Angular UI 单元测试

ABP Angular UI的测试与其他Angular应用程序一样. 所以, 这里的指南也适用于ABP. 也就是说, 我们想指出一些特定于ABP Angular应用程序的单元测试内容.

设置

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

基础

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

  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, TestBed, waitForAsync } from "@angular/core/testing";
  5. import { NgxValidateCoreModule } from "@ngx-validate/core";
  6. import { MyComponent } from "./my.component";
  8. describe("MyComponent", () => {
  9.   let fixture: ComponentFixture<MyComponent>;
  11.   beforeEach(
  12.     waitForAsync(() => {
  13.       TestBed.configureTestingModule({
  14.         declarations: [MyComponent],
  15.         imports: [
  16.           CoreTestingModule.withConfig(),
  17.           ThemeSharedTestingModule.withConfig(),
  18.           ThemeBasicTestingModule.withConfig(),
  19.           NgxValidateCoreModule,
  20.         ],
  21.         providers: [
  22.           /* mock providers here */
  23.         ],
  24.       }).compileComponents();
  25.     })
  26.   );
  28.   beforeEach(() => {
  29.     fixture = TestBed.createComponent(MyComponent);
  30.     fixture.detectChanges();
  31.   });
  33.   it("should be initiated", () => {
  34.     expect(fixture.componentInstance).toBeTruthy();
  35.   });
  36. });

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

提示

Angular测试库

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

上面的简单示例可以用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. });

正如你所见, 二者非常相似. 当我们使用查询和触发事件时, 真正的区别就显现出来了.

  1. // other imports
  2. import { getByLabelText, screen } from "@testing-library/angular";
  3. import userEvent from "@testing-library/user-event";
  5. describe("MyComponent", () => {
  6.   beforeEach(/* removed for sake of brevity */);
  8.   it("should display advanced filters", () => {
  9.     const filters = screen.getByTestId("author-filters");
  10.     const nameInput = getByLabelText(filters, /name/i) as HTMLInputElement;
  11.     expect(nameInput.offsetWidth).toBe(0);
  13.     const advancedFiltersBtn = screen.getByRole("link", { name: /advanced/i });
  14.     userEvent.click(advancedFiltersBtn);
  16.     expect(nameInput.offsetWidth).toBeGreaterThan(0);
  18.     userEvent.type(nameInput, "fooo{backspace}");
  19.     expect(nameInput.value).toBe("foo");
  20.   });
  21. });

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

在每个Spec之后清除DOM

需要记住的一点是, 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函数.

  1. // other imports
  2. import { wait } from "@abp/ng.core/testing";
  4. describe("MyComponent", () => {
  5.   beforeEach(/* removed for sake of brevity */);
  7.   it("should open a modal", async () => {
  8.     const openModalBtn = screen.getByRole("button", { name: "Open Modal" });
  9.     userEvent.click(openModalBtn);
  11.     await wait(fixture);
  13.     const modal = screen.getByRole("dialog");
  15.     expect(modal).toBeTruthy();
  17.     /* wait again after closing the modal */
  18.   });
  19. });

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.   getByLabelText,
  15.   getByRole,
  16.   getByText,
  17.   queryByRole,
  18.   render,
  19.   screen,
  20. } from "@testing-library/angular";
  21. import userEvent from "@testing-library/user-event";
  22. import { BehaviorSubject, of } from "rxjs";
  23. import { CountryComponent } from "./country.component";
  25. const list$ = new BehaviorSubject({
  26.   items: [{ id: "ID_US", name: "United States of America" }],
  27.   totalCount: 1,
  28. });
  30. describe("Country", () => {
  31.   let fixture: ComponentFixture<CountryComponent>;
  33.   afterEach(() => clearPage(fixture));
  35.   beforeEach(async () => {
  36.     const result = await render(CountryComponent, {
  37.       imports: [
  38.         CoreTestingModule.withConfig(),
  39.         ThemeSharedTestingModule.withConfig(),
  40.         ThemeBasicTestingModule.withConfig(),
  41.         NgxValidateCoreModule,
  42.         NgbCollapseModule,
  43.         NgbDatepickerModule,
  44.         NgbDropdownModule,
  45.       ],
  46.       providers: [
  47.         {
  48.           provide: CountryService,
  49.           useValue: {
  50.             getList: () => list$,
  51.           },
  52.         },
  53.       ],
  54.     });
  56.     fixture = result.fixture;
  57.   });
  59.   it("should display advanced filters", () => {
  60.     const filters = screen.getByTestId("country-filters");
  61.     const nameInput = getByLabelText(filters, /name/i) as HTMLInputElement;
  62.     expect(nameInput.offsetWidth).toBe(0);
  64.     const advancedFiltersBtn = screen.getByRole("link", { name: /advanced/i });
  65.     userEvent.click(advancedFiltersBtn);
  67.     expect(nameInput.offsetWidth).toBeGreaterThan(0);
  69.     userEvent.type(nameInput, "fooo{backspace}");
  70.     expect(nameInput.value).toBe("foo");
  72.     userEvent.click(advancedFiltersBtn);
  73.     expect(nameInput.offsetWidth).toBe(0);
  74.   });
  76.   it("should have a heading", () => {
  77.     const heading = screen.getByRole("heading", { name: "Countries" });
  78.     expect(heading).toBeTruthy();
  79.   });
  81.   it("should render list in table", async () => {
  82.     const table = await screen.findByTestId("country-table");
  84.     const name = getByText(table, "United States of America");
  85.     expect(name).toBeTruthy();
  86.   });
  88.   it("should display edit modal", async () => {
  89.     const actionsBtn = screen.queryByRole("button", { name: /actions/i });
  90.     userEvent.click(actionsBtn);
  92.     const editBtn = screen.getByRole("button", { name: /edit/i });
  93.     userEvent.click(editBtn);
  95.     await wait(fixture);
  97.     const modal = screen.getByRole("dialog");
  98.     const modalHeading = queryByRole(modal, "heading", { name: /edit/i });
  99.     expect(modalHeading).toBeTruthy();
  101.     const closeBtn = getByText(modal, "×");
  102.     userEvent.click(closeBtn);
  104.     await wait(fixture);
  106.     expect(screen.queryByRole("dialog")).toBeFalsy();
  107.   });
  109.   it("should display create modal", async () => {
  110.     const newBtn = screen.getByRole("button", { name: /new/i });
  111.     userEvent.click(newBtn);
  113.     await wait(fixture);
  115.     const modal = screen.getByRole("dialog");
  116.     const modalHeading = queryByRole(modal, "heading", { name: /new/i });
  118.     expect(modalHeading).toBeTruthy();
  119.   });
  121.   it("should validate required name field", async () => {
  122.     const newBtn = screen.getByRole("button", { name: /new/i });
  123.     userEvent.click(newBtn);
  125.     await wait(fixture);
  127.     const modal = screen.getByRole("dialog");
  128.     const nameInput = getByRole(modal, "textbox", {
  129.       name: /^name/i,
  130.     }) as HTMLInputElement;
  132.     userEvent.type(nameInput, "x");
  133.     userEvent.type(nameInput, "{backspace}");
  135.     const nameError = await findByText(modal, /required/i);
  136.     expect(nameError).toBeTruthy();
  137.   });
  139.   it("should delete a country", () => {
  140.     const getSpy = spyOn(fixture.componentInstance.list, "get");
  141.     const deleteSpy = jasmine.createSpy().and.returnValue(of(null));
  142.     fixture.componentInstance.service.delete = deleteSpy;
  144.     const actionsBtn = screen.queryByRole("button", { name: /actions/i });
  145.     userEvent.click(actionsBtn);
  147.     const deleteBtn = screen.getByRole("button", { name: /delete/i });
  148.     userEvent.click(deleteBtn);
  150.     const confirmText = screen.getByText("AreYouSure");
  151.     expect(confirmText).toBeTruthy();
  153.     const confirmBtn = screen.getByRole("button", { name: "Yes" });
  154.     userEvent.click(confirmBtn);
  156.     expect(deleteSpy).toHaveBeenCalledWith(list$.value.items[0].id);
  157.     expect(getSpy).toHaveBeenCalledTimes(1);
  158.   });
  159. });

CI配置

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

  1. // angular.json
  3. "test": {
  4.   "builder": "@angular-devkit/build-angular:karma",
  5.   "options": { /* several options here */ },
  6.   "configurations": {
  7.     "production": {
  8.       "karmaConfig": "karma.conf.prod.js"
  9.     }
  10.   }
  11. }

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

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

  1. npm test -- --prod

另请参阅