In this section, we will be performing an integration test on our component by mocking an observable with an expected type of data. This will help us understand whether the data that's passed is flowing properly in our component and that the expected result is being obtained. We have already successfully configured TestModule for the spec of our HomeComponent. Let's add some data to our HomeComponent and check whether we can find the items that are being displayed by the template:
beforeEach(() => {
fixture = TestBed.createComponent(HomeComponent);
component = fixture.componentInstance;
component.posts$ = of([{id: 1, name: 'Title 1', covers: {115: 'image
1.jpg'}}, {id: 1, name: 'Title 2', covers: {115: 'image 2.jpg'}}]);
fixture.detectChanges();
});
Here, in beforeEach, before we call our fixture to detect changes in the component, we've added a couple of posts. Let's add a couple of tests to test whether it has added two cards in the DOM and if the first card's title is like it was in the data we passed:
describe('HomeComponent', () => {
...
it ('show have 2 post cards', () => {
const cards = fixture.debugElement.queryAll(By.css('.card'));
expect(cards.length).toEqual(2);
});
it ('should have the title in the card', () => {
const cards = fixture.debugElement.queryAll(By.css('.card'));
expect(cards[0].query(By.css('.card-
text')).nativeElement.textContent)
.toEqual('Title 1');
});
});
By doing this, we have performed a deep test, which not only verifies whether the element with the card class has been created but also checks whether the title matches in the first element.