Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat (v18): Modernize toggleswitch and expand test #16598

Closed
wants to merge 16 commits into from
Closed

feat (v18): Modernize toggleswitch and expand test #16598

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
cdf7cfa
improve imports
Oct 20, 2024
5b6b4f1
convert to modern input
Oct 20, 2024
4202873
convert to modern input
Oct 20, 2024
0d09f19
convert vars to signals to improve change detection
Oct 20, 2024
f01dc82
convert to modern output
Oct 20, 2024
c31a366
convert to modern view child
Oct 20, 2024
4567cdc
add test cases
Oct 20, 2024
b66e7ea
Merge branch 'v18' into modern-toggleswitch
medbenmakhlouf Oct 20, 2024
ea39681
use component directly
Oct 20, 2024
1dc83c8
correct error
Oct 20, 2024
5ecf4d3
values type could be any
Oct 20, 2024
18799bd
Merge branch 'v18' into modern-toggleswitch
medbenmakhlouf Nov 1, 2024
7395d0e
handle conflict
Nov 1, 2024
ce944aa
Merge branch 'v18' into modern-toggleswitch
medbenmakhlouf Nov 5, 2024
4a3f271
Merge remote-tracking branch 'origin/v18' into modern-toggleswitch
Nov 17, 2024
6ba1e42
correct toggleswitch.ts
Nov 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
184 changes: 63 additions & 121 deletions packages/primeng/src/toggleswitch/toggleswitch.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,171 +1,113 @@
import { TestBed, ComponentFixture, fakeAsync, tick } from '@angular/core/testing';
import { ComponentRef } from '@angular/core';
import { TestBed, ComponentFixture } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { InputSwitch } from './inputswitch';
import { ToggleSwitch } from './toggleswitch';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';

describe('InputSwitch', () => {
let inputswitch: InputSwitch;
let fixture: ComponentFixture<InputSwitch>;
describe('ToggleSwitch', () => {
let toggleSwitch: ToggleSwitch;
let fixture: ComponentFixture<ToggleSwitch>;
let toggleSwitchRef: ComponentRef<ToggleSwitch>;

beforeEach(() => {
TestBed.configureTestingModule({
imports: [NoopAnimationsModule],
declarations: [InputSwitch]
imports: [NoopAnimationsModule, ToggleSwitch]
});

fixture = TestBed.createComponent(InputSwitch);
inputswitch = fixture.componentInstance;
});

it('should created by default', () => {
fixture = TestBed.createComponent(ToggleSwitch);
toggleSwitch = fixture.componentInstance;
toggleSwitchRef = fixture.componentRef;
fixture.detectChanges();

const inputSwitchEl = fixture.debugElement.query(By.css('div')).nativeElement;
expect(inputSwitchEl).toBeTruthy();
});

it('should disabled', () => {
inputswitch.disabled = true;
fixture.detectChanges();

const onClickSpy = spyOn(inputswitch, 'onClick').and.callThrough();
const onModelChangeSpy = spyOn(inputswitch, 'onModelChange').and.callThrough();
const inputSwitchEl = fixture.debugElement.query(By.css('div')).nativeElement;
const inputEl = fixture.debugElement.query(By.css('input')).nativeElement;
inputSwitchEl.click();
fixture.detectChanges();

expect(inputSwitchEl.className).toContain('p-disabled');
expect(inputEl.disabled).toEqual(true);
expect(onClickSpy).toHaveBeenCalled();
expect(onModelChangeSpy).not.toHaveBeenCalled();
it('should render the ToggleSwitch with default values', () => {
const inputElement = fixture.debugElement.query(By.css('input[type="checkbox"]'));
expect(inputElement).toBeTruthy();
expect(inputElement.nativeElement.checked).toBeFalse();
});

it('should change style and styleClass', () => {
inputswitch.style = { height: '300px' };
inputswitch.styleClass = 'Primeng ROCKS!';
it('should reflect the correct state when checked', () => {
toggleSwitch.modelValue.set(true);
fixture.detectChanges();

const inputSwitchEl = fixture.debugElement.query(By.css('div')).nativeElement;
expect(inputSwitchEl.className).toContain('Primeng ROCKS!');
expect(inputSwitchEl.style.height).toContain('300px');
const inputElement = fixture.debugElement.query(By.css('input[type="checkbox"]'));
expect(inputElement.nativeElement.checked).toBeTrue();
});

it('should get a name inputId and tabindex', () => {
inputswitch.tabindex = 5;
inputswitch.inputId = 'Primeng!';
inputswitch.name = 'Primeng ROCKS!';
it('should not allow interaction when disabled', () => {
toggleSwitch.disabled.set(true);
fixture.detectChanges();

const inputSwitchEl = fixture.debugElement.query(By.css('input')).nativeElement;
expect(inputSwitchEl.tabIndex).toEqual(5);
expect(inputSwitchEl.name).toEqual('Primeng ROCKS!');
expect(inputSwitchEl.id).toEqual('Primeng!');
const inputElement = fixture.debugElement.query(By.css('input[type="checkbox"]'));
expect(inputElement.nativeElement.disabled).toBeTrue();
});

it('should checked when click', () => {
it('should autofocus the input element if autofocus is true', () => {
toggleSwitchRef.setInput('autofocus', true);
fixture.detectChanges();

const onClickSpy = spyOn(inputswitch, 'onClick').and.callThrough();
const inputSwitchEl = fixture.debugElement.query(By.css('div')).nativeElement;
let data;
inputswitch.onChange.subscribe((value) => (data = value));
inputSwitchEl.click();
const inputElement = fixture.debugElement.query(By.css('input[type="checkbox"]'));
inputElement.nativeElement.focus(); // Manually trigger focus
fixture.detectChanges();

expect(inputswitch.checked()).toEqual(true);
expect(data.checked).toEqual(true);
expect(onClickSpy).toHaveBeenCalled();
expect(document.activeElement).toBe(inputElement.nativeElement);
});

it('should listen event emitter', () => {
it('should toggle the checked state on click and emit onChange', () => {
spyOn(toggleSwitch.onChange, 'emit');
fixture.detectChanges();

let data;
inputswitch.onChange.subscribe((value) => (data = value));
const inputSwitchEl = fixture.debugElement.query(By.css('div')).nativeElement;
inputSwitchEl.click();
const inputElement = fixture.debugElement.query(By.css('input[type="checkbox"]'));
inputElement.nativeElement.click();
fixture.detectChanges();

expect(data.checked).toEqual(true);
inputSwitchEl.click();
expect(data.checked).toEqual(false);
expect(toggleSwitch.modelValue()).toBeTrue();
expect(toggleSwitch.onChange.emit).toHaveBeenCalled();
});

it('should change focused', () => {
it('should not toggle when readonly is true', () => {
toggleSwitchRef.setInput('readonly', true);
fixture.detectChanges();

const onFocusSpy = spyOn(inputswitch, 'onFocus').and.callThrough();
const onBlurSpy = spyOn(inputswitch, 'onBlur').and.callThrough();
const onModelTouchedSpy = spyOn(inputswitch, 'onModelTouched').and.callThrough();
const inputEl = fixture.debugElement.query(By.css('input')).nativeElement;
const inputSwitchEl = fixture.debugElement.query(By.css('div')).nativeElement;
inputEl.dispatchEvent(new Event('focus'));
const inputElement = fixture.debugElement.query(By.css('input[type="checkbox"]'));
inputElement.nativeElement.click();
fixture.detectChanges();

expect(inputSwitchEl.className).toContain('p-focus');
expect(inputswitch.focused).toEqual(true);
expect(onFocusSpy).toHaveBeenCalled();
inputEl.dispatchEvent(new Event('blur'));
fixture.detectChanges();

expect(inputswitch.focused).toEqual(false);
expect(inputSwitchEl.className).not.toContain('p-focus');
expect(onBlurSpy).toHaveBeenCalled();
expect(onModelTouchedSpy).toHaveBeenCalled();
expect(toggleSwitch.modelValue()).toBeFalse(); // default state
});

it('should change disabled', () => {
it('should apply correct aria-label and aria-labelledby attributes', () => {
toggleSwitchRef.setInput('ariaLabel', 'Toggle Switch');
toggleSwitchRef.setInput('ariaLabelledBy', 'toggleSwitchLabel');
fixture.detectChanges();

inputswitch.setDisabledState(true);
fixture.detectChanges();
const inputElement = fixture.debugElement.query(By.css('input[type="checkbox"]'));
expect(inputElement.nativeElement.getAttribute('aria-label')).toBe('Toggle Switch');
expect(inputElement.nativeElement.getAttribute('aria-labelledby')).toBe('toggleSwitchLabel');
});

const onClickSpy = spyOn(inputswitch, 'onClick').and.callThrough();
const onModelChangeSpy = spyOn(inputswitch, 'onModelChange').and.callThrough();
const inputSwitchEl = fixture.debugElement.query(By.css('div')).nativeElement;
const inputEl = fixture.debugElement.query(By.css('input')).nativeElement;
inputSwitchEl.click();
it('should apply the correct tabindex attribute', () => {
toggleSwitchRef.setInput('tabindex', 3);
fixture.detectChanges();

expect(inputSwitchEl.className).toContain('p-disabled');
expect(inputEl.disabled).toEqual(true);
expect(onClickSpy).toHaveBeenCalled();
expect(onModelChangeSpy).not.toHaveBeenCalled();
const inputElement = fixture.debugElement.query(By.css('input[type="checkbox"]'));
expect(inputElement.nativeElement.getAttribute('tabindex')).toBe('3'); // Should reflect tabindex value
});

it('should toggle the modelValue and call necessary functions when not disabled and not readonly', () => {
const onClickSpy = spyOn(inputswitch, 'onClick').and.callThrough();
const onChangeSpy = spyOn(inputswitch.onChange, 'emit').and.callThrough();
const onModelChangeSpy = spyOn(inputswitch, 'onModelChange').and.callThrough();

const divElement: HTMLElement = fixture.debugElement.query(By.css('div')).nativeElement;
divElement.click();
it('should initialize with the correct checked state based on modelValue', () => {
toggleSwitch.modelValue.set(true); // Set initial value to true
fixture.detectChanges();

expect(onClickSpy).toHaveBeenCalledWith(jasmine.anything());
const inputElement = fixture.debugElement.query(By.css('input[type="checkbox"]'));
expect(inputElement.nativeElement.checked).toBeTrue(); // Should reflect true state
});

const initialModelValue = inputswitch.modelValue;
inputswitch.onClick(new Event('click'));
it('should emit onChange event with the correct value on click', () => {
spyOn(fixture.componentInstance.onChange, 'emit');
fixture.detectChanges();

expect(inputswitch.modelValue).toEqual(initialModelValue ? inputswitch.falseValue : inputswitch.trueValue);
expect(onModelChangeSpy).toHaveBeenCalled();
expect(onChangeSpy).toHaveBeenCalledWith({
originalEvent: jasmine.anything(),
checked: inputswitch.modelValue
});
});
const inputElement = fixture.debugElement.query(By.css('input[type="checkbox"]'));
inputElement.nativeElement.click(); // Toggle to true
fixture.detectChanges();

it('should not toggle the modelValue when disabled or readonly', () => {
inputswitch.disabled = true;
let initialModelValue = inputswitch.modelValue;
inputswitch.onClick(new Event('click'));
expect(inputswitch.modelValue).toEqual(initialModelValue);

inputswitch.disabled = false;
inputswitch.readonly = true;
initialModelValue = inputswitch.modelValue;
inputswitch.onClick(new Event('click'));
expect(inputswitch.modelValue).toEqual(initialModelValue);
expect(toggleSwitch.modelValue()).toBeTrue();
expect(toggleSwitch.onChange.emit).toHaveBeenCalledWith({ originalEvent: jasmine.any(Event), checked: true });
});
});
Loading
Loading