如何在Angular中为带有星号*前缀的结构指令编写单元测试答案

【问题标题】：How to write unit test for structural directive prefixed with an asterisk * in Angular如何在Angular中为带有星号*前缀的结构指令编写单元测试
【发布时间】：2019-07-08 19:24:09
【问题描述】：

我正在创建 Angular 示例项目并为其添加单元测试。开始添加带有指令的示例，并在添加带有简单创建测试的结构指令后，其他指令测试开始失败，并显示消息不够明确，需要修复什么：

`Failed: Template parse errors:
Property binding appSimpleStructural not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("
      </p>
      <div *ngIf="4 === index">
        [ERROR ->]<div *appSimpleStructural="!isOnlyOdd">
          <li
            *ngFor="let even of evenNumbers"
"): ng:///DynamicTestModule/DirectivesComponent.html@17:8`

directives.component.html

    <div *ngIf="4 === index">
        <div *appSimpleStructural="!isOnlyOdd">
          <li
            *ngFor="let even of evenNumbers"
            [ngStyle]="{backgroundColor: even % 2 !== 0 ? 'yellow' : 'transparent'}">
            {{ even }}
          </li>
        </div>
      </div>

directives.module.ts

    @NgModule({
      declarations: [
        ...
        SimpleStructuralDirective
    ],
    imports: [
        CommonModule,
      ],
    exports: [
        ....
        SimpleStructuralDirective,
      ]
    ....

simple-structural.directive.ts


    @Directive({
      selector: '[appSimpleStructural]'
    })
    export class SimpleStructuralDirective {
      @Input() set appSimpleStructural(condition: boolean) {
        if (!condition) {
          this.vcRef.clear();
        } else {
          this.vcRef.createEmbeddedView(this.templateRef);
        }
      }

      constructor(
        private templateRef: TemplateRef<any>,
        private vcRef: ViewContainerRef,
      ) { }
    }

simple-structural.directive.spec.ts

    describe('SimpleStructuralDirective', () => {
      let templateRef: jasmine.SpyObj<TemplateRef<any>>;
      let vcRef: jasmine.SpyObj<ViewContainerRef>;

      let component: DirectivesComponent;
      let fixture: ComponentFixture<DirectivesComponent>;

      beforeEach(async(() => {
        TestBed.configureTestingModule({
          declarations: [
            DirectivesComponent,
            SimpleStructuralDirective,
          ],
          schemas: [ NO_ERRORS_SCHEMA ]
        })
        .compileComponents();

        fixture = TestBed.createComponent(DirectivesComponent);
        component = fixture.componentInstance;
      }));

      it('should create an instance', () => {
        const directive = new SimpleStructuralDirective(
          templateRef,
          vcRef
        );

        fixture.detectChanges();

        expect(directive)
          .toBeTruthy();
      });
    });

完整代码见：https://github.com/dirdakas/ng-playground

预计有 0 个失败的测试，但在添加结构指令后，其他指令测试开始失败。

【问题讨论】：

标签： angular unit-testing karma-jasmine

【解决方案1】：

很遗憾，NO_ERRORS_SCHEMA 无法通过ng-template 上的属性绑定来抑制大小写

https://github.com/angular/angular/issues/13713

您应该在使用DirectivesComponent 的所有spec.ts 文件中将SimpleStructuralDirective 添加到declarations 数组中的TestBed.configureTestingModule。

【讨论】：