Проверка, изменилась ли пропа '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. Убедившись, что щелчок переключателя действительно изменит пропеллер, который выдается позже - тест работает, только если isChecked инициализируется с истинным значением, если его ложь и его следует заменить на истинный, тест не пройден и не знает причину

Итак, мой основной вопрос: Как я могу проверить в тесте, изменилось ли значение опоры после определенного действия (в этом случае нажмите).

и дополнительный вопрос: Как правильно тестировать такие компоненты, поскольку я раньше не писал никаких тестов?

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 для тестирования.

Надеюсь, это поможет.