I'm currently facing a challenge with testing whether a class's prop value changes after clicking the switcher.
Below is the component class I am working with:
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);
}
}
Here is the template used for this component:
<label class="switcher">
<input
type="checkbox"
[checked]="isChecked"
(change)="onChange($event)"
/>
<span class="switcher__slider"></span>
</label>
When it comes to testing, I have started with the following approach:
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();
}));
// Additional test cases are included here...
});
My main goal in testing is to ensure that the prop value changes as expected after certain actions. However, I have encountered an issue when the initial prop value is set to false and needs to be changed to true upon user interaction. This seems to cause the test to fail unexpectedly.
Therefore, my primary question is: What is the best approach to verify if a prop value has been successfully changed after a specific action, such as a click event?
Furthermore, I would appreciate guidance on the correct methods for testing components, especially since this is my first attempt at writing tests.