Angular 5 使用材料，茉莉花业力测试失败，带有 mat-icon

Question

我正在尝试使用 jasmine karma

ng test

对角材料的所有问题感到惊讶。 几个月前我看到了旧版本材料的例子，当时它被称为md-icon而不是mat-icon等......

因此这并不能解决抛出的错误

MaterialModule.forRoot()

错误

mat-icon 不是已知的元素角材料

Answer 1

我在测试 Material 组件时遇到了同样的问题。

感谢k.vincent在评论中为我提供正确答案。

对于使用 Material 的组件，请确保您的 *.spec 文件类似于以下内容：

import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

...

beforeEach(async(() => {
    TestBed.configureTestingModule({
        declarations: [ MyComponent ],
        schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
    })
    .compileComponents();
}));

Answer 2

我的测试也失败了，因为can't bind to 'formGroup' 因为它不是 'form' 的已知属性； 如果 'app-forgot-password' 是一个 Angular 组件，那么验证它是否是这个模块的一部分； 如果 'mat-card' 是一个 Angular 组件，那么验证它是否是这个模块的一部分。 在规范文件中，我添加了 ReactiveFormsModule 和 CUSTOM_ELEMENTS_SCHEMA 的导入并且它起作用了。

import { ReactiveFormsModule } from '@angular/forms';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

beforeEach(async(() => {
TestBed.configureTestingModule({
  declarations: [ ForgotPasswordComponent ],
  imports: [ReactiveFormsModule],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
.compileComponents();
}));

然后我有另一个错误：无法绑定到 'routerLink' 因为它不是 'a' 的已知属性。 我可以通过在规范文件中添加 RouterTestingModule 来修复它：

import {RouterTestingModule} from '@angular/router/testing';

beforeEach(async(() => {
TestBed.configureTestingModule({
  imports: [
    FormsModule,
    ReactiveFormsModule,
    BrowserAnimationsModule,
    MaterialModule,
    RouterTestingModule
  ],
  declarations: [ LoginFormComponent ]
})
.compileComponents();
}));

Answer 3

我正在使用 Angular 9，通过从另一个答案中获取线索，我找到了一种渲染图标的方法。 解决方案是找到应用程序注册图标的位置，然后显式调用该注册。 MatIconRegistry需要HttpClientModule有一个警告。

背景：
从app.component.ts我正在使用我的服务IconService并在此调用我的registerIcons方法。

缩写IconService ：

constructor(
  private matIconRegistry: MatIconRegistry,
  private domSanitizer: DomSanitizer
) { }

public registerIcons(): void {
  ...
  this.matIconRegistry.addSvgIcon(key, this.domSanitizer.bypassSecurityTrustResourceUrl(iconUrl));
});

所以在我的测试中我：

TestBed.configureTestingModule({
  declarations: [
    ...
  ],
  imports: [
    MatIconModule,
    HttpClientModule,
  ],
  providers: [
    // MatIconRegistry, <- strangely enough not needed.
    {
      provide: DomSanitizer,
      useValue: {
        sanitize: (ctx: any, val: string) => val,
        bypassSecurityTrustResourceUrl: (val: string) => val,
      },
    },
    IconService,
  ]
})
  .compileComponents();

和

beforeEach(() => {
  TestBed.inject(IconService).registerIcons();
});

---

图标Enums.ts：

export enum Icon {
    cloud = 1,
    drop,
    rain,
}

iconService.ts:

@Injectable({
  providedIn: 'root'
})
export class IconService {

  constructor(
    private matIconRegistry: MatIconRegistry,
    private domSanitizer: DomSanitizer
  ) { }

  public registerIcons(): void {
    const iconValues = this.getEnumValues(Icon);
    iconValues.forEach(key => {
      const iconUrl = (`../assets/icons/${key}-icon.svg`);
      this.matIconRegistry.addSvgIcon(key, this.domSanitizer.bypassSecurityTrustResourceUrl(iconUrl));
    });
  }

  private getEnumValues(enumType: any): string[] {
    return Object.values(enumType).filter(v => typeof v === 'string') as string[];
  }
}

Answer 4

就我而言，我只是缺少MatIconTestingModule ：

beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [
        ...,
        MatIconTestingModule
      ],
      ...
    })
    .compileComponents();
  });

Answer 5

我正在使用 Angular 9，通过从另一个答案中获取线索，我最终从FakeMatIconModule复制了源文件，并像这样使用它：

imports: [
  MatIconModule,
  MatIconTestingModule,
],

虽然它不呈现图标。