3

我正在尝试对使用第三方控件（来自 Clarity）的 Angular 4 组件进行单元测试。我已经使用正确的导入设置了测试模块，但 html 中的清晰元素只是作为元素保留 - 它们没有按预期解析并扩展为 html，即控件似乎没有经过正确的渲染周期。这是设置：

import { ClarityModule } from 'clarity-angular';
import { Alert } from '../../shared/components/alert.component';
import { AlertMessage, AlertStatus } from '../../shared/types/alert.message.type';

describe('Alert component tests->', () => {
    let comp: Alert;
    let fixture: ComponentFixture<Alert>;
    let de: DebugElement;
    let el: HTMLElement;
    let deIcon: DebugElement;
    let elIcon: HTMLElement;

    beforeEach(async(() => {
      TestBed.configureTestingModule({
        imports: [ClarityModule],
        declarations: [Alert]
      });
    }));

当我检查夹具 debugElement 或 nativeElement 时，它没有被转换？当我尝试选择预期的元素时，它不存在。我是否缺少一些技巧来使控件呈现？

组件 html 模板看起来像这样并且保持这样：

<clr-alert [clrAlertType]="alertType" [clrAlertSizeSmall]="isSmall" [clrAlertAppLevel]="isAppLevel" [clrAlertClosable]="isCloseable">
  <div class="alert-item">
    <span class="alert-text">
      {{message}}
    </span>
  </div>
</clr-alert>

编辑：经过一番拉扯后，我发现我需要调用 fixture.detectChanges() 来让测试台渲染组件。总之，在测试第三方组件时：

  1. 确保您已将包含该组件的模块导入到测试台中
  2. 如果您遇到错误，请不要只将 CUSTOM_ELEMENTS_SCHEMA 添加到测试平台模式，尝试找出它发生的原因并导入正确的模块（除非您进行浅层测试）
  3. 在尝试选择组件呈现的任何元素之前调用 fixture.detectChanges() （然后在设置属性后再次调用它，如角度文档站点上的大多数示例）。
4

0 回答 0