我如何创建一个单元测试，以确保我的标题在加载后显示在页面上并具有正确的文本？

Question

在单元测试方面，我是一个全新的人，我正在尝试创建一个单元测试，该单元测试可以隔离我的标头，并在加载后显示在页面上并具有正确的文本。更具体地说，这段代码：

  static get template() {
    return `
      <style include="my-todo-style-element"></style>
      // This part right here.
      <h1 id="grocery-list">Grocery List</h1>
      <section>
        <todo-input></todo-input>
        <ul id="list-container">
          <template is="dom-repeat" items="[[list]]">
            <todo-item text="[[item.text]]" checked="[[item.checked]]" index="[[index]]" on-remove="removeItem" on-toggle="toggleItem"></todo-item>
          </template>
        </ul>
      </section>
    `
  }

由于我是单元测试的新手，因此我目前在同一JS文件中输入了该信息：

  fireEvent() {
    this.dispatchEvent(new CustomEvent('grocery-list', {detail: 
'tested!'}))
  }
}

以此作为我的测试文件：

<script>
test('fires an event', function(done) {
  myEl.addEventListener('grocery-list', function(event) {
    assert.equal(event.detail, 'tested!');
    done();
  });
  myEl.fireEvent();
});
</script>