Angular UI 单元测试

    在Angular中, 单元测试默认使用Karma和. 虽然我们更喜欢Jest, 但我们选择不偏离这些默认设置, 因此你下载的应用程序模板将预先配置Karma和Jasmine. 你可以在根目录中的 karma.conf.js 文件中找到Karma配置. 你什么都不用做. 添加一个spec文件并运行即可.

    基础

    简化版的spec文件如下所示:

    如果你看一下导入内容, 你会注意到我们已经准备了一些测试模块来取代内置的ABP模块. 这对于模拟某些特性是必要的, 否则这些特性会破坏你的测试. 请记住使用测试模块并调用其withConfig静态方法.

    虽然你可以使用Angular TestBed测试代码, 但你可以找到一个好的替代品.

    上面的简单示例可以用Angular测试库编写, 如下所示:

    1. import { CoreTestingModule } from "@abp/ng.core/testing";
    2. import { ThemeBasicTestingModule } from "@abp/ng.theme.basic/testing";
    3. import { ThemeSharedTestingModule } from "@abp/ng.theme.shared/testing";
    4. import { ComponentFixture } from "@angular/core/testing";
    5. import { NgxValidateCoreModule } from "@ngx-validate/core";
    6. import { render } from "@testing-library/angular";
    7. import { MyComponent } from "./my.component";
    9. describe("MyComponent", () => {
    10.   let fixture: ComponentFixture<MyComponent>;
    12.   beforeEach(async () => {
    13.     const result = await render(MyComponent, {
    14.       imports: [
    15.         CoreTestingModule.withConfig(),
    16.         ThemeSharedTestingModule.withConfig(),
    17.         ThemeBasicTestingModule.withConfig(),
    18.         NgxValidateCoreModule,
    19.       ],
    20.       providers: [
    21.         /* mock providers here */
    22.       ],
    23.     });
    25.     fixture = result.fixture;
    26.   });
    28.   it("should be initiated", () => {
    29.     expect(fixture.componentInstance).toBeTruthy();
    30.   });
    31. });

    Angular测试库中的查询遵循可维护测试, 用户事件库提供了与DOM的类人交互, 并且该库通常有清晰的API简化组件测试. 下面提供一些有用的链接:

    需要记住的一点是, Karma在真实的浏览器实例中运行测试. 这意味着, 你将能够看到测试代码的结果, 但也会遇到与文档正文连接的组件的问题, 这些组件可能无法在每次测试后都清除, 即使你配置了Karma也一样无法清除.

    我们准备了一个简单的函数, 可以在每次测试后清除所有剩余的DOM元素.

    1. // other imports
    2. import { clearPage } from "@abp/ng.core/testing";
    4. describe("MyComponent", () => {
    5.   let fixture: ComponentFixture<MyComponent>;
    7.   afterEach(() => clearPage(fixture));
    9.   beforeEach(async () => {
    10.     const result = await render(MyComponent, {
    11.       /* removed for sake of brevity */
    12.     });
    13.     fixture = result.fixture;
    14.   });
    16.   // specs here
    17. });

    请确保你使用它, 否则Karma将无法删除对话框, 并且你将有多个模态对话框、确认框等的副本.

    一些组件, 特别是在检测周期之外工作的模态对话框. 换句话说, 你无法在打开这些组件后立即访问这些组件插入的DOM元素. 同样, 插入的元素在关闭时也不会立即销毁.

    wait函数接受第二个参数, 即超时(默认值为0). 但是尽量不要使用它. 使用大于0的超时通常表明某些不正确事情发生了.

    测试示例

    下面是一个测试示例. 它并没有涵盖所有内容, 但却能够对测试有一个更好的了解.

    1. import { clearPage, CoreTestingModule, wait } from "@abp/ng.core/testing";
    2. import { ThemeBasicTestingModule } from "@abp/ng.theme.basic/testing";
    3. import { ThemeSharedTestingModule } from "@abp/ng.theme.shared/testing";
    4. import { ComponentFixture } from "@angular/core/testing";
    5. import {
    6.   NgbCollapseModule,
    7.   NgbDatepickerModule,
    8.   NgbDropdownModule,
    9. } from "@ng-bootstrap/ng-bootstrap";
    10. import { NgxValidateCoreModule } from "@ngx-validate/core";
    11. import { CountryService } from "@proxy/countries";
    12. import {
    13.   findByText,
    14.   getByRole,
    15.   getByText,
    16.   queryByRole,
    18.   screen,
    19. } from "@testing-library/angular";
    20. import userEvent from "@testing-library/user-event";
    21. import { BehaviorSubject, of } from "rxjs";
    22. import { CountryComponent } from "./country.component";
    24. const list$ = new BehaviorSubject({
    25.   items: [{ id: "ID_US", name: "United States of America" }],
    26.   totalCount: 1,
    27. });
    29. describe("Country", () => {
    30.   let fixture: ComponentFixture<CountryComponent>;
    32.   afterEach(() => clearPage(fixture));
    34.   beforeEach(async () => {
    35.     const result = await render(CountryComponent, {
    36.       imports: [
    37.         CoreTestingModule.withConfig(),
    38.         ThemeSharedTestingModule.withConfig(),
    39.         ThemeBasicTestingModule.withConfig(),
    40.         NgxValidateCoreModule,
    41.         NgbCollapseModule,
    42.         NgbDatepickerModule,
    43.         NgbDropdownModule,
    44.       ],
    45.       providers: [
    46.         {
    47.           provide: CountryService,
    48.           useValue: {
    49.             getList: () => list$,
    50.           },
    51.         },
    52.       ],
    53.     });
    55.     fixture = result.fixture;
    56.   });
    58.   it("should display advanced filters", () => {
    59.     const filters = screen.getByTestId("country-filters");
    60.     const nameInput = getByLabelText(filters, /name/i) as HTMLInputElement;
    61.     expect(nameInput.offsetWidth).toBe(0);
    63.     const advancedFiltersBtn = screen.getByRole("link", { name: /advanced/i });
    64.     userEvent.click(advancedFiltersBtn);
    66.     expect(nameInput.offsetWidth).toBeGreaterThan(0);
    68.     userEvent.type(nameInput, "fooo{backspace}");
    69.     expect(nameInput.value).toBe("foo");
    71.     userEvent.click(advancedFiltersBtn);
    72.     expect(nameInput.offsetWidth).toBe(0);
    73.   });
    75.   it("should have a heading", () => {
    76.     const heading = screen.getByRole("heading", { name: "Countries" });
    77.     expect(heading).toBeTruthy();
    78.   });
    80.   it("should render list in table", async () => {
    81.     const table = await screen.findByTestId("country-table");
    83.     const name = getByText(table, "United States of America");
    84.     expect(name).toBeTruthy();
    85.   });
    88.     userEvent.click(actionsBtn);
    90.     const editBtn = screen.getByRole("button", { name: /edit/i });
    91.     userEvent.click(editBtn);
    93.     await wait(fixture);
    95.     const modal = screen.getByRole("dialog");
    96.     const modalHeading = queryByRole(modal, "heading", { name: /edit/i });
    97.     expect(modalHeading).toBeTruthy();
    99.     const closeBtn = getByText(modal, "×");
    100.     userEvent.click(closeBtn);
    102.     await wait(fixture);
    104.     expect(screen.queryByRole("dialog")).toBeFalsy();
    105.   });
    107.   it("should display create modal", async () => {
    108.     const newBtn = screen.getByRole("button", { name: /new/i });
    109.     userEvent.click(newBtn);
    111.     await wait(fixture);
    113.     const modal = screen.getByRole("dialog");
    114.     const modalHeading = queryByRole(modal, "heading", { name: /new/i });
    116.     expect(modalHeading).toBeTruthy();
    117.   });
    119.   it("should validate required name field", async () => {
    120.     const newBtn = screen.getByRole("button", { name: /new/i });
    121.     userEvent.click(newBtn);
    123.     await wait(fixture);
    125.     const modal = screen.getByRole("dialog");
    126.     const nameInput = getByRole(modal, "textbox", {
    127.       name: /^name/i,
    128.     }) as HTMLInputElement;
    130.     userEvent.type(nameInput, "x");
    131.     userEvent.type(nameInput, "{backspace}");
    133.     const nameError = await findByText(modal, /required/i);
    134.     expect(nameError).toBeTruthy();
    135.   });
    137.   it("should delete a country", () => {
    138.     const getSpy = spyOn(fixture.componentInstance.list, "get");
    139.     const deleteSpy = jasmine.createSpy().and.returnValue(of(null));
    140.     fixture.componentInstance.service.delete = deleteSpy;
    142.     const actionsBtn = screen.queryByRole("button", { name: /actions/i });
    143.     userEvent.click(actionsBtn);
    145.     const deleteBtn = screen.getByRole("button", { name: /delete/i });
    146.     userEvent.click(deleteBtn);
    148.     const confirmText = screen.getByText("AreYouSure");
    149.     expect(confirmText).toBeTruthy();
    151.     const confirmBtn = screen.getByRole("button", { name: "Yes" });
    152.     userEvent.click(confirmBtn);
    154.     expect(deleteSpy).toHaveBeenCalledWith(list$.value.items[0].id);
    155.     expect(getSpy).toHaveBeenCalledTimes(1);
    156.   });
    157. });

    你的CI环境需要不同的配置. 要为单元测试设置新的配置, 请在测试项目中找到 angular.json 文件, 或者如下所示添加一个:

    现在你可以复制 karma.conf.js 作为 karma.conf.prod.js 并在其中使用你喜欢的任何配置. 请查看Karma配置文档配置选项.

    最后, 不要忘记使用以下命令运行CI测试:

    另请参阅