拆分包含异步的 Angular 组件单元测试

Question

我有一个组件，它通过服务从服务器加载一些数据，并显示出来。

我已经为组件编写了以下测试（有效）：

...
it('Should contains 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]);
        });
    });
}));

是否有可能将所有期望拆分为单独的 it 测试？

我想要这样的东西：

...
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]);
            });
        });
    });
}));

但我在describe 行中收到错误Argument of type '(done: any) => any' is not assignable to parameter of type '() => void'。

编辑：

添加了TestBed 设置。

beforeEach(async(() => {
    serviceMock = prepareServiceMock();
    TestBed.configureTestingModule({
        declarations: [
            TestComponent
        ],
        providers: [
            { provide: TestService, useValue: serviceMock }
        ]
    }).compileComponents();
}));

beforeEach(() => {
    fixture = TestBed.createComponent(TestComponent);
});

Answer 1

每个测试规范都将单独执行。所以你可以做的是每次在新规范开始时调用fixture.detectChanges();。

it('Should contain title', async(() => {
  fixture.detectChanges();
  fixture.whenStable().then(() => {
  expect(element.querySelector('h1').textContent.trim()).toBe(expectedTitle);
 }
})); 

it('Should contain paragraph', async(() => {
      fixture.detectChanges();
      fixture.whenStable().then(() => {
      expect(element.querySelector('p').textContent.trim()).toBe(expectedParagraph);
    }
})); 

确保每次都创建新组件。

beforeEach(() => {
        fixture = TestBed.createComponent(MyComponent);
});