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

Question

鉴于这个非常微不足道的属性指令，它所做的只是将输入中的文本放入 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) { }
}

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

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().

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

Answer 1

像这样的东西可能会起作用：

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

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