独立组件中的模拟独立指令

Question

我正在尝试为独立组件编写单元测试并模拟其依赖性。该独立组件具有以下内容：

import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DemoDirectiveDirective } from './demo-directive.directive';

@Component({
  selector: 'app-demo-cmp',
  standalone: true,
  imports: [CommonModule,DemoDirectiveDirective],
  templateUrl: './demo-cmp.component.html',
})
export class DemoCmpComponent implements OnInit {
  constructor() {}

  ngOnInit(): void {}
}

并且 DemoDirectiveDirective 具有以下内容：

import { Directive, ElementRef } from '@angular/core';

@Directive({
  selector: '[appDemoDirective]',
  standalone: true,
})
export class DemoDirectiveDirective {
  constructor(private hostElement: ElementRef) {
    this.hostElement.nativeElement.innerHTML += 'Update from directive! ';
  }
}

DemoCmpComponent我想这样测试：

import { ComponentFixture, TestBed } from '@angular/core/testing';

import { DemoCmpComponent } from './demo-cmp.component';

describe('DemoCmpComponent', () => {

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

  it('should create', () => {
    const fixture = TestBed.createComponent(DemoCmpComponent);
    fixture.detectChanges();

    expect(fixture.nativeElement.querySelector('p').innerHTML).toBe(
      'demo-cmp works!'
    );
  });
});

该测试将失败，因为标签的内容p将为Update from directive! demo-cmp works!。

我在这里缺少的是我模拟的步骤，DemoDirectiveDirective我不知道如何操作，并且在 Angular 页面上找不到任何相关资源。

请注意，这只是一个演示测试，一个概念证明。请忽略组件名称和多余的测试。

这是包含代码的GitHub存储库。

Answer 1

// define a mock directive
@Directive({standalone: true, selector: "[appDemoDirective]"})
class MockDemoDirectiveDirective {
  // define whatever mock inputs/methods etc you need here
}

// override imports in TestBed to use the mock directive
TestBed.overrideComponent(DemoCmpComponent, {
  remove: {imports: [DemoDirectiveDirective] },
  add: {imports: [MockDemoDirectiveDirective]}
})

Answer 2

模拟角度声明的最简单方法之一是使用模拟库，例如ng-mocks.

ng-mocks支持独立组件，并且它MockBuilder确实知道如何模拟独立声明的导入。

在你的情况下，测试可以是这样的：

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { MockBuilder } from "ng-mocks";

import { DemoCmpComponent } from './demo-cmp.component';

describe('DemoCmpComponent', () => {

  beforeEach(() => {
    return MockBuilder(DemoCmpComponent);
    // it will mock DemoDirectiveDirective automatically,
    // because it's a dependency of DemoCmpComponent.
  });

  it('should create', () => {
    const fixture = TestBed.createComponent(DemoCmpComponent);
    fixture.detectChanges();

    expect(fixture.nativeElement.querySelector('p').innerHTML).toBe(
      'demo-cmp works!'
    );
  });
});

这是一个实例：https://codesandbox.io/s/bold-kate-1gkymd ?file=/src/test.spec.ts:770-812