Test Card List Test Suite Conclusion

In the following section, we will test some information displayed in the DOM. First, we will cover the following statements:

CSS :first-child Selector

Select and style every element that is the first child of its parent:

p:first-child {
  background-color: yellow;
}

HTML DOM textContent Property

Get the text content of an element:

var x = document.getElementById("myBtn").textContent;

Once we have understood these two statements one for CSS and the other for DOM we can now test the results we should expect in our test case.

it("should display the first course", () => {
  component.courses = setupCourses();
  fixture.detectChanges();
  
  const course = component.courses[0];
  
  const card = el.query(By.css('.course-card:first-child')),
    title = card.query(By.css('mat-card-title')),
    img = card.query(By.css('img'));
  
  expect(card).toBeTruthy('Could not find course card');
  expect(title.nativeElement.textContent).toBe(course.titles.description);
  expect(img.nativeElement.src).toBe(course.iconUrl);
});

In our HTML file we can check the following:

<mat-card *ngFor="let course of courses" class="course-card mat-elevation-z10">
    <mat-card-header>
        <mat-card-title>{{course.titles.description}}</mat-card-title>
    </mat-card-header>
    <img mat-card-image [src]="course.iconUrl">
</mat-card>

Let's cover a couple of things as well, we should know that if we are don't have a class we can write the proper HTML element like follows:

  const card = el.query(By.css('.course-card:first-child')), // CLASS
    title = card.query(By.css('mat-card-title')), // ELEMENT
    img = card.query(By.css('img')); // ELEMENT