时间戳

首页 > 解决方案 > Angular - 如何使用 Jest 和 NgMocks 模拟包装器组件

angular - Angular - 如何使用 Jest 和 NgMocks 模拟包装器组件

问题描述

在我们的项目中，我们可以将用户角色分配给整个应用程序中的多个元素，当缺少所需角色时禁用这些元素。但是由于对于某些按钮应用了其他条件，即使角色检查也可能禁用组件，因此我们的组件也会接管它并在必要时禁用它的子组件。这种设计背后的原因是，如果应该禁用元素，我们可以轻松显示工具提示。

// app-role-element
<div matTooltip="{{ tooltipMessage | translate }}" [matTooltipDisabled]="!isDisabled">
  <ng-content> </ng-content>
</div>
// .ts
export class AppRoleElement implements AfterConentInit {
  @Input('roles') roles: string[];
  @ContentChild('roleElement') roleElement: MatButton;

  constructor(...){}    

  ngAfterContentInit(): void {
    ...
    this.setDisabled();
  }

  setDisabled(): void {
    if (this.roleElement) {
      if (this.isDisabled) {
        this.roleElement.disabled = true; // disable if no role
      } else {
        this.roleElement.disabled = this.disableCondition; // disable if other condition
      }
    }
  }
}

// usage
<app-role-component
  [role]="['required-role']"
  [disableCondition]= "isRunning || isUnstable"
  [id]="startButtonRoleElem"
>
  <button mat-raised-button id="startBtnId" (click)="start()">Start</button>
</app-role-component>

这种方法效果很好，但很难进行单元测试。在上面的代码中，如果我要编写一个单击“开始”按钮的单元测试，那么按 ID 选择它会绕过角色元素并调用远程服务，即使它不应该这样做。按 ID 选择角色元素不会传播对按钮的单击。

test('to prevent click on a start btn when form is invalid', () => {
  spectator.component.runEnabled$ = of(false);
  spectator.detectComponentChanges();

  const checkExportFolderSpy = jest.spyOn(spectator.component, 'checkExportFolder');
  spectator.inject(PreferencesService).validateCurrentExportPath.andReturn(of(VALIDATION_RESULT_OK));
  spectator.detectChanges();

  spectator.click('#startBtnId');
  spectator.detectChanges();

  expect(checkExportFolderSpy).not.toHaveBeenCalled();
  expect(dispatchSpy).not.toHaveBeenCalled();
});

我们将 JEST 与 Spectator 和 NgMocks 一起使用，我希望利用该功能并模拟此组件，但我不知道如何。而且我不确定我应该尝试模拟它的扩展范围，我应该将点击事件传递给孩子，禁用孩子吗？任何想法或建议如何处理这个问题？

标签： angulartypescriptunit-testingjestjs

解决方案

你的案子很复杂。

这很复杂，因为：

  • 该按钮通过 禁用MatButton，因此无法模拟
  • 因为我们要测试AppRoleElement，所以也不能mock
  • triggerEventHandler不尊重disabled属性，总是触发点击

因此在测试中我们需要：

  • 保持原样AppRoleElement_MatButton
  • 为禁用和启用案例创建特殊环境
  • 点击按钮通过nativeElement

下面的代码仅使用ng-mocks并且角色检测已被简化。

import {AfterContentInit, Component, ContentChild, Input, NgModule,} from '@angular/core';
import {MatButton, MatButtonModule} from '@angular/material/button';
import {MockBuilder, MockRender, ngMocks} from 'ng-mocks';

@Component({
  selector: 'app-role-component',
  template: `
    <div>
      <ng-content></ng-content>
    </div>
  `,
})
class AppRoleElement implements AfterContentInit {
  @Input() public disable: boolean | null = null;
  @ContentChild(MatButton) public roleElement?: MatButton;

  public ngAfterContentInit(): void {
    this.setDisabled();
  }

  public setDisabled(): void {
    if (this.roleElement) {
      this.roleElement.disabled = this.disable;
    }
  }
}

@NgModule({
  declarations: [AppRoleElement],
  imports: [MatButtonModule],
})
class AppModule {}

fdescribe('ng-mocks-click', () => {
  // Keeping AppRoleElement and MatButton
  beforeEach(() => MockBuilder(AppRoleElement, AppModule).keep(MatButton));

  it('is not able to click the disabled button', () => {
    // specific params for the render
    const params = {
      disabled: true,
      start: jasmine.createSpy('start'),
    };

    // rendering custom template
    MockRender(
      `
      <app-role-component
        [disable]="disabled"
      >
        <button mat-raised-button id="startBtnId" (click)="start()">Start</button>
      </app-role-component>
    `,
      params,
    );

    // click on a disable element isn't propagandized
    ngMocks.find('button').nativeElement.click();

    // asserting
    expect(params.start).not.toHaveBeenCalled();
  });

  // checking the enabled case
  it('is able to click the button', () => {
    const params = {
      disabled: false,
      start: jasmine.createSpy('start'),
    };

    MockRender(
      `
      <app-role-component
        [disable]="disabled"
      >
        <button mat-raised-button id="startBtnId" (click)="start()">Start</button>
      </app-role-component>
    `,
      params,
    );

    ngMocks.find('button').nativeElement.click();
    expect(params.start).toHaveBeenCalled();
  });
});

推荐阅读