在Angular By.css中使用多选css的选择模式不会给出多个元素

Question

在css中，我可以执行a[href^="https"]，它会选择<a>属性值以"https“开头的每个href元素。如何在Angular的By.css中指定相同的规则

在https://angular.io/api/platform-browser/By中，By.css定义为

static css(selector: string): Predicate<DebugElement>

我的Angular代码有几个div，它们的id属性等于thumbnail-1，thumbnail-2。我想把它们都放到我的Jasmine单元测试中。

目前，我正在逐一收集它们

let imageThumbnailDiv1 = fixture.debugElement.query(By.css("#thumbnail-1")); let imageThumbnailDiv2 = fixture.debugElement.query(By.css("#thumbnail-2"));

如果我使用多选模式，我只得到第一个元素。有没有办法获得多个元素。

  fit('select all thumbnails',(done)=>{
      let newPracticeQuestionComponent = component;
      let imageThumbnailDivs = fixture.debugElement.query(By.css("div[id^=\"thumbnail\"]"));
      console.log("thumbnail divs before file upload ",imageThumbnailDivs);
      expect(imageThumbnailDivs).toBeFalsy();

      let file1 = new File(["foo1"], "foo1.txt");
      let file2 = new File(["foo2"], "foo2.txt");
      let file3 = new File(["foo3"], "foo3.txt");
      //let file4 = new File(["foo4"], "foo4.txt");
      let reader1 = newPracticeQuestionComponent.handleFileSelect([file1]);
      let reader2 = newPracticeQuestionComponent.handleFileSelect([file2]);
      let reader3 = newPracticeQuestionComponent.handleFileSelect([file3]);

      setTimeout(function() {
        console.log("in timeout");

        fixture.detectChanges();//without this, the view will not be updated with model
        let imageThumbnailDivsAfter = fixture.debugElement.query(By.css("div[id^=\"thumbnail\""));
        console.log("thumbnail divs after file upload ",imageThumbnailDivsAfter); //<-- this shows only the 1st element
        expect(imageThumbnailDivsAfter).toBeTruthy();
        //console.log("before done call")
        done();//without done, jasmine will finish this test spec without checking the assertions in the timeout
        //console.log("after timeout call")
      }, 2000);

  });

Answer 1

您可以使用debugElement.queryAll而不是debugElement.query来获得一个可以迭代的数组。

let thumbnails = fixture.debugElement.queryAll(By.css(".thumbnail"));

thumbnails.forEach((debugElement)=>{
    expect(debugElement)//Whatever you want to test
})