Question

我目前正在研究通用列表解决方案，可以使用属性指令将其外观从垂直更改为水平。它只是删除了一个CSS类并添加了一个新类。

在afterViewInit中调用的指令的私有函数中，我期望元素存在，并且基于结果，我可能会抛出错误。

要对指令进行单元测试，我创建了一个示例测试组件：

@Component({
    template: `
        <app-list horizontal-list>
            <app-list-item title="First item"></app-list-item>
            <app-list-item title="Second item"></app-list-item>
            <app-list-item title="Third item"></app-list-item>
        </app-list> 
    `
})

我的指令代码段在这里：

@Directive({
  selector: '[horizontal-list]'
})
export class SampleDirective implements AfterViewInit {

  sampleList: Element;

  constructor(private readonly elementRef: ElementRef, private readonly renderer: Renderer2) {
  }

  ngAfterViewInit(): void {
    this.checkDOMPrecondition();

    this.switchToVerticalToHorizontal();
  }

  private checkDOMPrecondition(): void {
    this.sampleList = this.elementRef.nativeElement.querySelector('.sample-list-vertical');

    if (!(!!sampleList)) {
      throw new Error('Required dom element is missing');
    }
  }

  private switchToVerticalToHorizontal(): void {
    this.renderer.removeClass(this.sampleList, 'sample-list-vertical');
    this.renderer.addClass(this.tabList, 'sample-list-horizontal');
  }
}

如果运行测试，由于创建组件的方式（使用伪指令），css类已被删除。因此，如果我调用component.afterViewInit来测试像这样的抛出：

expect(() => component.afterViewInit()).toThrowError('Required dom element is missing');

将自动引发错误，因为它是在创建测试组件之后运行的，我们已经删除了预期的CSS类。

此外，如果我想创建一个不会引发错误的单元测试方案，那么我不知道该怎么做。

你们有解决我问题的办法吗？希望你能帮助我。

Answer 1

我仅找到一种解决此问题的方法。我为不具有预期样式的appListItem组件创建了存根组件。将这个存根组件添加到一个单独的TestBed configureTestingModule对象中，我就可以测试此行为。

单元测试Angular指令，该指令检查css类的存在，然后将其删除

1 个答案: