One of my components is responsible for fetching data from a server using a service and then displaying it.
I have created a test for this component which ensures that the data is loaded correctly:
...
it('Should contain data after loading', async(() => {
fixture.whenStable().then(() => {
fixture.detectChanges();
expect(element.querySelector('h1').textContent.trim()).toBe(expectedTitle);
expect(element.querySelector('p').textContent.trim()).toBe(expectedParagraph);
element.querySelectorAll('ul > li').forEach((li, index) => {
expect(li.textContent.trim()).toBe(expectedListItem[index]);
});
});
}));
I am wondering if it's possible to split these expectations into separate it tests?
Here's what I have in mind:
...
describe('Component contains data after loading', async(() => {
fixture.whenStable().then(() => {
fixture.detectChanges();
it('Should contain title', () => {
expect(element.querySelector('h1').textContent.trim()).toBe(expectedTitle);
});
it('Should contain paragraph', () => {
expect(element.querySelector('p').textContent.trim()).toBe(expectedParagraph);
});
it('Should contain list', () => {
element.querySelectorAll('ul > li').forEach((li, index) => {
expect(li.textContent.trim()).toBe(expectedListItem[index]);
});
});
});
}));
However, I encounter an error stating
Argument of type '(done: any) => any' is not assignable to parameter of type '() => void'describe line.
EDIT:
I have included the setup with TestBed.
beforeEach(async(() => {
serviceMock = prepareServiceMock();
TestBed.configureTestingModule({
declarations: [
TestComponent
],
providers: [
{ provide: TestService, useValue: serviceMock }
]
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(TestComponent);
});