javascript - 测试 'isChecked' 属性是否已更改

Question

我正在努力测试类的属性值是否在单击切换器后发生变化。

所以这里我有组件类(没什么复杂的-.-):

import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';

@Component({
selector: 'sps-flow-asset-switcher',
templateUrl: './flow-asset-switcher.component.html',
styleUrls: ['./flow-asset-switcher.component.scss'],
})

export class FlowAssetSwitcherComponent implements OnInit {

@Input() isChecked: boolean;
@Output() checkedChange = new EventEmitter<boolean>();

constructor() { }

ngOnInit() {}

onChange(e): void {
    this.isChecked = e.target.checked;
    this.checkedChange.emit(this.isChecked);
  }
}

这是模板:

<label class="switcher">
  <input
    type="checkbox"
    [checked]="isChecked"
    (change)="onChange($event)"
   />
  <span class="switcher__slider"></span>
</label>

在这里我开始测试:

import { async, ComponentFixture, fakeAsync, TestBed } from '@angular/core/testing';
import { FormsModule } from '@angular/forms';

import { FlowAssetSwitcherComponent } from './flow-asset-switcher.component';

fdescribe('FlowAssetSwitcherComponent', () => {
let component: FlowAssetSwitcherComponent;
let fixture: ComponentFixture<FlowAssetSwitcherComponent>;

beforeEach(async(() => {
    TestBed.configureTestingModule({
        imports: [FormsModule],
        declarations: [FlowAssetSwitcherComponent],
    })
        .compileComponents();
}));

beforeEach(() => {
    fixture = TestBed.createComponent(FlowAssetSwitcherComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
});

it('should create', () => {
    expect(component)
        .toBeTruthy();
});

it('should call onChange when switcher clicked', async(() => {
    spyOn(component, 'onChange');

    const button = fixture.debugElement.nativeElement.querySelector('.switcher__slider');
    button.click();

    fixture.whenStable()
        .then(() => {
            expect(component.onChange)
                .toHaveBeenCalled();
        });
}));

it('should change isChecked prop when switcher clicked', async(() => {
    const inputEl = fixture.debugElement.nativeElement.querySelector('input');
    component.isChecked = true;

    inputEl.dispatchEvent(new Event('change'));
    fixture.whenStable()
        .then(() => {
            expect(component.isChecked)
                .toEqual(false);
        });
}));
});

所以我正在测试 3 件事:1. 如果创建了组件 - 测试效果很好2.切换器点击-测试效果很好3. 确保切换器点击实际上会更改稍后发出的 Prop - 测试仅在 isChecked 初始化为 true 值时有效，如果它为 false 并且应该更改为 true 测试失败并且不知道原因

所以我的基本问题是:如果特定操作后 Prop 值已更改，我如何检查测试(在这种情况下单击)。

和附加问题:由于我之前没有编写过任何测试，因此测试此类组件的正确方法是什么？

Answer 1

有多种方法可以做到这一点，但我想保持简单，所以我建议如下:

• 当您设置 isChecked 的值时，您需要调用 fixture.detectChanges() 以便将此值传播到输入元素。
• 在实际没有发生任何变化时仅仅触发一个变化事件是不会有效的。我建议只需单击输入元素即可调用您正在寻找的更改。
• 这里没有什么是异步的，所以 async() 不是严格需要的。

为了展示这些变化，我整理了以下 StackBlitz .以下是包含上述更改的建议规范:

it('should change isChecked from false to true when switcher clicked', () => {
    const inputEl = fixture.debugElement.nativeElement.querySelector('input');
    component.isChecked = false;
    fixture.detectChanges(); // invoke detectChanges right after you set 'isChecked'

    // inputEl.dispatchEvent(new Event('change')); // <-- This is not needed
    inputEl.click(); // Just invoke 'click' on the inputElement to simulate a mouse click event
    expect(component.isChecked)
        .toEqual(true);
});

顺便说一句 - 感谢您在问题中包含所有需要的详细信息!这使得创建用于测试的 Stackblitz 变得容易。

希望对您有所帮助。