Angular 角度5使用材料，茉莉花业力测试失败

我正试着和jasmine一起经营karma

ng test

令人惊讶的是，角材料的所有问题。我看到了几个月前旧版本材料的例子，当时它被称为

md-icon

，而不是

mat-icon

等等

因此，这并不能修复抛出的错误

MaterialModule.forRoot()

错误

mat图标不是已知的元素角材质

---

我在测试材料组件时遇到了同样的问题

感谢您在评论中为我提供了正确的答案

对于使用材质的零部件，请确保*.spec文件类似于以下内容：

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

...

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

---

我的测试也失败了，因为无法绑定到'formGroup'，因为它不是'form'的已知属性；如果“应用程序忘记密码”是一个角度组件，则验证它是否是此模块的一部分；如果“mat卡”是一个角度组件，则确认它是该模块的一部分。在spec文件中，我添加了ReactiveFormsModule和CUSTOM_元素_模式的导入，它成功了

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();
}));

---

我正在使用Angular 9，通过从中获取线索，我最终复制了最原始的图像，并像这样使用它：

imports: [
  MatIconModule,
  MatIconTestingModule,
],

---

但它不会渲染图标。

我使用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();

---

iconsEnums.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[];
  }
}

---

如果我们可以看到您遇到问题的单元测试之一，那就太好了。可能必须在

*.spec

文件中导入MatIconModule进行单元测试，您必须像Naykam所说的那样导入MatIconModule，并且您还必须导入：

自定义元素\u架构
从“@angular/core”导入{CUSTOM ELEMENTS\u SCHEMA}”。之后，您必须在中添加以下内容：
schemas:[CUSTOM\u ELEMENTS\u SCHEMA]
in:
TestBed.configureTestingModule（{….}）
。尝试导入图标模块，MaterialModule是DepracatedReady导入MatIconModule…这在Angular 7中对我来说仍然失败是的，对我来说也是失败的。谁能解释一下这个问题的“原因”，因此，我不只是复制/粘贴并继续保持无知。CUSTOM_ELEMENTS_SCHEMA定义了一种模式，允许NgModule包含以破折号大小写命名的非角度元素（
-
）和以破折号大小写命名的元素属性（
-
）。所以，我认为它完全忽略了它们是特殊的元素。事实上，我不得不从我的测试模块中删除MatIconModule，然后它就成功了。上述解决方案与从我的测试模块中删除MatIconModule相结合，成功了。嗨，你能给出你在服务plz中输入的代码吗？因为我不知道“key”和“iconur”是从哪里来的。这是一个通用的解决方案还是我必须把所有的图标和图标放在一个数组中？Thxso使用您的解决方案，我们必须在资产/图标中保存我们希望在测试中看到的所有图标？@user3659739 Yes。您还必须将它们命名为“cloudicon.svg”、“drop icon.svg”和“rain icon.svg”。如果它不适合您，请根据您的需要调整
（'../assets/icons/${key}-icon.svg'）
。代码的一个很好的特性是，只需将文件添加到文件夹中，Angular就可以拾取它，并且只需将一个项目添加到
图标
枚举中，就可以在代码中使用它。
@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[];
  }
}