How do I add svg files via MatIconRegistry in unit tests?

在单元测试中，通过MatIconRegistry添加SVG文件是Angular Material中常见的需求，尤其是当你使用自定义SVG图标时。下面，我将详细解释如何操作，并提供一个具体的例子。

步骤 1: 导入相关模块

首先，确保你的测试文件中导入了必要的模块和服务。这包括 HttpClientTestingModule 和 MatIconTestingModule，后者用于处理图标的加载。

typescript
import { TestBed } from '@angular/core/testing';
import { HttpClientTestingModule } from '@angular/common/http/testing';
import { MatIconModule, MatIconRegistry } from '@angular/material/icon';
import { DomSanitizer } from '@angular/platform-browser';

// 如果你使用的是Angular 9及以上版本，还需要导入MatIconTestingModule
import { MatIconTestingModule } from '@angular/material/icon/testing';

步骤 2: 配置测试模块

在你的测试配置中，使用TestBed.configureTestingModule方法设置你的测试环境。

typescript
beforeEach(() => {
  TestBed.configureTestingModule({
    imports: [
      HttpClientTestingModule,
      MatIconModule,
      MatIconTestingModule  // 用于简化图标的测试处理
    ],
    providers: [
      MatIconRegistry
    ]
  });

  // 获取MatIconRegistry和DomSanitizer服务的实例
  const iconRegistry = TestBed.inject(MatIconRegistry);
  const sanitizer = TestBed.inject(DomSanitizer);
});

步骤 3: 添加SVG图标

在测试环境配置好之后，你可以通过MatIconRegistry服务添加SVG图标。此操作通常在beforeEach或单个测试用例中执行。

typescript
beforeEach(() => {
  const iconRegistry = TestBed.inject(MatIconRegistry);
  const sanitizer = TestBed.inject(DomSanitizer);
  const safeUrl = sanitizer.bypassSecurityTrustResourceUrl('path/to/your/icon.svg');

  iconRegistry.addSvgIcon('custom_icon', safeUrl);
});

步骤 4: 测试使用SVG图标

一旦注册了SVG图标，你可以在组件或服务的测试中使用这些图标。确保图标的使用是如你所预期的。

typescript
it('should display custom svg icon', () => {
  const fixture = TestBed.createComponent(YourComponent);
  fixture.detectChanges();
  
  const compiled = fixture.debugElement.nativeElement;
  expect(compiled.querySelector('mat-icon[svgIcon="custom_icon"]')).not.toBeNull();
});

这样，你就可以在Angular的单元测试中添加和测试SVG图标了。这个方法尤其有用于图标依赖的组件的测试，确保图标正确加载并显示。