如何使用测试库重新呈现 Angular 属性指令答案

【问题标题】：How do I rerender an Angular attribute directive using testing-library如何使用测试库重新呈现 Angular 属性指令
【发布时间】：2021-08-17 13:41:31
【问题描述】：

鉴于这个非常微不足道的属性指令，它所做的只是将输入中的文本放入 innerText

import { Directive, ElementRef, Input } from '@angular/core';
    
@Directive({
  selector: '[appTrivial]',
})
export class TrivialDirective {
  @Input() set text(value: any) {
    this.el.nativeElement.innerText = value.toString();
  }

  constructor(private el: ElementRef) { }
}

我正在尝试使用@testing-library/angular 中的rerender 轻松更改输入：

import { render } from '@testing-library/angular';
import { TrivialDirective } from './trivial.directive';

describe('TrivialDirective', () => {
  it('should replace case insensitive', async () => {
    const template = `<div appTrivial text="qwe"></div>`;
    const { container, rerender, fixture } = await render(template, { declarations: [TrivialDirective] });

    expect(container.querySelector('div[appTrivial]').textContent).toEqual('qwe');

    rerender({ template: `<div appTrivial text="rty"></div>` });
    // fixture.detectChanges();
    expect(container.querySelector('div[appTrivial]').textContent).toEqual('rty');
  });
});

第二个断言不起作用 - 不管有没有fixture.detectChanges()。

那么，测试这样一个指令的正确方法是什么？尤其是当您有几个输入并且您想在测试期间一次更改它们的所有值时。

【问题讨论】：

标签： angular unit-testing angular-testing-library

【解决方案1】：

这样的事情可能会奏效：

为指令创建一个测试组件；
引导测试组件；
修改测试组件输入，并验证各个调试元素原生元素变化；

import { Component, DebugElement } from '@angular/core';
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { By } from '@angular/platform-browser';

@Component({
    selector: 'testing-component',
    template: '<div appTrivial text="{{textInput}}"></div>',
})
export class TestingComponent {
    public textInput = ''
}

describe('TrivialDirective', () => {
    let component: TestingComponent;
    let fixture: ComponentFixture<TestingComponent>;
    let debugElement: DebugElement;
    let directive: TrivialDirective;

    beforeEach(
        waitForAsync(() => {
            void TestBed.configureTestingModule({
                declarations: [TestingComponent, TrivialDirective],
            })
                .compileComponents()
                .then(() => {
                    fixture = TestBed.createComponent(TestingComponent);
                    component = fixture.componentInstance;
                    debugElement = fixture.debugElement.query(By.directive(TrivialDirective));
                    directive = debugElement.injector.get(TrivialDirective);
                    fixture.detectChanges();
                });
        }),
    );

    it('testing component with the directive should compile successfully', () => {
        expect(component).toBeDefined();
        expect(directive).toBeDefined();
    });

    it('should set text', () => {
        const directiveElement = () => <HTMLElement>debugElement.nativeElement;
        expect(component.textInput).toEqual('');
        expect(directiveElement().innerText).toEqual('');
        const testInput = 'test input'; 
        component.textInput = testInput;
        fixture.detectChanges();
        expect(directiveElement().innerText).toEqual(testInput);
    });
});

【讨论】：