Shadow DOM 并通过 Jasmine 对其进行测试

Question

我有一个 web 组件，它创建一个 shadow DOM 并将一些 html 添加到它的 shadowRoot。

class SomeThing extends HTMLElement {
  attachedCallback () {
    this.el = this.createShadowRoot();
    this.render();
  }

  render () {
    this.el.innerHTML = '<h1>Hello</h1>';
  }
}
export default SomeThing;

我正在 webpack 及其 babel-core 和 babel-preset-es2015 插件的帮助下编译它。

我也在使用 Karma 和 Jasmine 来编写我的单元测试。这就是它的样子。

describe('some-thing', function () {
  var someElement;


  beforeEach(function () {
    someElement = document.createElement('some-thing');
  });


  it('created element should match string representation', function () {
    var expectedEl = '<some-thing></some-thing>';

    var wrapper = document.createElement('div');
    wrapper.appendChild(someElement);

    expect(wrapper.innerHTML).toBe(expectedEl);
  });

  it('created element should have shadow root', function () {

    var wrapper = document.createElement('div');
    wrapper.appendChild(someElement);

    expect(wrapper.querySelector('some-thing').shadowRoot).not.toBeNull();

  })
});

我想看看我的元素的 shadowRoot 中是否有东西，并想为在 shadowRoot 中创建的 HTML 和事件编写测试用例。但是第二次测试失败了。无法将 shadowRoot 添加到 some-element DOM。

如果有人可以帮助我，那将很有帮助。

我还在 Github 上上传了完整的测试工作项目。您可以通过此链接访问它https://github.com/prateekjadhwani/unit-tests-for-shadow-dom-webcomponents

提前致谢

Answer 1

我在测试 Web 组件时遇到了类似的问题，但就我而言，我使用的是来自 polymer/lit-element 的 lit-element。 Lit-element 提供生命周期钩子，使用 lit-html 库(documentation) 进行模板渲染。

所以这是我的问题以及我是如何解决的。我注意到添加了组件并且类执行了构造函数，并且我可以使用以下方法访问公共方法：

const element = document.querySelector('my-component-name')
element.METHOD();
element.VARIABLE

但它从来没有达到钩子firstUpdated，所以我认为问题在于测试执行的速度与创建速度组件的速度。所以我使用了lit-element API提供的promise (updateComplete)：

注意：我用 mocha/chai 代替 Jasmine

class MyComponent extends LitElement {
  render() {
    return html`<h1>Hello</h1>`
  }
}
customElements.define('my-component', TodoApp);
let element;
describe('main', () => {
  beforeEach(() => {
    element = document.createElement("my-component");
    document.querySelector('body').appendChild(element);
  });
  describe('test', () => {
    it('Checks that header tag was added to shadowRoot', (done) => {
     (async () => {
       const res = await element.updateComplete;
       const header = element.shadowRoot.querySelector('h1');
       assert.notEqual(header, null);
       done();
      })();
    });
  });
});

所以，我的建议是创建一个 Promise 并在执行渲染函数时解决它，使用 Promise 将组件的创建与测试同步。 我正在使用这个存储库来测试概念 https://github.com/correju/polymer-playground