0

我对 lit-element 和单元测试非常陌生，并且不确定问题是否正确。如果我在任何地方错了，请纠正我。

所以，我创建了 1 个点亮的组件，以便它从 uri 中获取 json <abc infoJsonLink="../data/data.json"></abc>

数据.json

[
 {"id":1, "name":"one", "img":"one.jpg"},
{"id":1, "name":"two", "img":"two.jpg"}, 
...]

在 abc 的 render() 方法中，我们遍历 json 数据并创建一个数组，其中包含与每个项目对应的 html 标记，itemsMarkupList

 *0* <div "item-data"><span>one</span><img src="one.jpg"/></div> 
 *1* <div "item-data"><span>two</span><img src="two.jpg"/></div>  
 *2* ...

这些标记中的每一个都必须在引导轮播中呈现。https://mdbootstrap.com/snippets/jquery/ascensus/135508

为此，我们创建了另一个组件，<carousel-helper>它具有接受标记数组并使用引导库将其呈现为轮播的代码。

下面是组件的render()方法<abc>

render(){... 
let ch = document.createElement("carousel-helper"); 
ch.itemsMarkupList = this.itemsMarkupList;
return html`... <div class="parent_wrapper"> ${ch} </div>`;
}

当我这样做时，这整个渲染得非常完美npm run。

但是当我为此编写测试用例时，子元素的 shadowroot 似乎没有呈现。

  it("test1", async () => {
   const el = /** @type {Abc} */ (await fixture(
    html`<abc infoJsonLink="/data/data.json"></abc>
    `));

  await el.loadJsonData();

  /*statement 1*/
  console.log(el.shadowRoot.querySelector("carousel-helper")); 

  /*statement 2*/
  console.log(el.shadowRoot.querySelector("carousel-helper").
    shadowRoot.querySelectorAll(".item-data"));

  });

statement-1工作并返回<carousel-helper></carousel-helper>
statement-2 return 和空数组，NodeList {}

谁能告诉我我需要做什么才能从statement-2获得一个填充的数组？

4

0 回答 0