Skip to content

Fix tests for async toggle directive behavior #16435

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

Closed
wants to merge 7 commits into from
Closed

Fix tests for async toggle directive behavior #16435

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
7c63f02
Initial plan
Copilot Nov 10, 2025
be0a2f1
Fix toggle directive tests for async behavior
Copilot Nov 10, 2025
44d7ab4
Fix toggle async patterns in test files - add detectChanges before ti…
Copilot Nov 10, 2025
836ec66
Comprehensive fix for toggle async patterns - replace flush with tick…
Copilot Nov 10, 2025
6446bad
Replace flush() with tick() in tooltip tests and fix select test patt…
Copilot Nov 11, 2025
97415a8
Fix double detectChanges pattern in select tests
Copilot Nov 11, 2025
12579a2
Remove double detectChanges pattern from all remaining test files
Copilot Nov 11, 2025
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
83 changes: 41 additions & 42 deletions projects/igniteui-angular/src/lib/combo/combo.component.spec.ts
View file
Open in desktop

Large diffs are not rendered by default.

30 changes: 16 additions & 14 deletions projects/igniteui-angular/src/lib/dialog/dialog.component.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -153,8 +153,8 @@ describe('Dialog', () => {
expect(dialog.isOpen).toEqual(true);

dialog.close();
tick();
fixture.detectChanges();
tick();
expect(dialog.isOpen).toEqual(false);
}));

Expand Down Expand Up @@ -219,8 +219,8 @@ describe('Dialog', () => {
expect(dialog.isOpen).toEqual(true);

dialog.close();
tick();
fixture.detectChanges();
tick();
expect(dialog.isOpen).toEqual(false);
}));

Expand All @@ -229,24 +229,24 @@ describe('Dialog', () => {
fixture.detectChanges();
const dialog = fixture.componentInstance.dialog;
dialog.open();
tick();
fixture.detectChanges();
tick();

const dialogElem = fixture.debugElement.query(By.css('.igx-dialog')).nativeElement;
dialogElem.click();
tick();
fixture.detectChanges();
tick();

expect(dialog.isOpen).toEqual(false);

dialog.closeOnOutsideSelect = false;
dialog.open();
tick();
fixture.detectChanges();
tick();

dialogElem.click();
tick();
fixture.detectChanges();
tick();
expect(dialog.isOpen).toEqual(true);
}));

Expand All @@ -270,25 +270,25 @@ describe('Dialog', () => {
spyOn(dialog.closed, 'emit');

dialog.open();
tick();
fixture.detectChanges();
tick();

expect(dialog.opening.emit).toHaveBeenCalledWith(cancellableArgs);
expect(dialog.isOpenChange.emit).toHaveBeenCalledWith(true);
// expect(dialog.onOpened.emit).toHaveBeenCalled();

dialog.close();
tick();
fixture.detectChanges();
tick();

cancellableArgs = { dialog, event: undefined, cancel: false };
expect(dialog.closing.emit).toHaveBeenCalledWith(cancellableArgs);
expect(dialog.closed.emit).toHaveBeenCalledWith(args);
expect(dialog.isOpenChange.emit).toHaveBeenCalledWith(false);

dialog.open();
tick();
fixture.detectChanges();
tick();
const buttons = document.querySelectorAll('button');
const leftButton = buttons[0];
const rightButton = buttons[1];
Expand All @@ -299,6 +299,7 @@ describe('Dialog', () => {

spyOn(dialog.rightButtonSelect, 'emit');
dispatchEvent(rightButton, 'click');
fixture.detectChanges();
tick();
expect(dialog.rightButtonSelect.emit).toHaveBeenCalled();
}));
Expand Down Expand Up @@ -330,26 +331,27 @@ describe('Dialog', () => {
const childDialog = fixture.componentInstance.child;

mainDialog.open();
fixture.detectChanges();
tick();

childDialog.open();
tick();
fixture.detectChanges();
tick();

const dialogs = fixture.debugElement.queryAll(By.css('.igx-dialog'));
const maindDialogElem = dialogs[0].nativeElement;
const childDialogElem = dialogs[1].nativeElement;

childDialogElem.click();
tick();
fixture.detectChanges();
tick();

expect(mainDialog.isOpen).toEqual(true);
expect(childDialog.isOpen).toEqual(false);

maindDialogElem.click();
tick();
fixture.detectChanges();
tick();

expect(mainDialog.isOpen).toEqual(false);
expect(childDialog.isOpen).toEqual(false);
Expand Down Expand Up @@ -387,17 +389,17 @@ describe('Dialog', () => {
const dialog = fix.componentInstance.dialog;

dialog.open();
tick();
fix.detectChanges();
tick();

let overlaydiv = document.getElementsByClassName(OVERLAY_MAIN_CLASS)[0];
let overlayWrapper = overlaydiv.children[0];
expect(overlayWrapper.classList.contains(OVERLAY_WRAPPER_CLASS)).toBe(true);
expect(overlayWrapper.classList.contains(OVERLAY_MODAL_WRAPPER_CLASS)).toBe(false);

dialog.close();
tick();
fix.detectChanges();
tick();

fix.componentInstance.isModal = true;
fix.detectChanges();
Expand Down
10 changes: 5 additions & 5 deletions projects/igniteui-angular/src/lib/directives/autocomplete/autocomplete.directive.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,13 +65,13 @@ describe('IgxAutocomplete', () => {
expect(dropDown.collapsed).toBeTruthy();

autocomplete.open();
tick();
fixture.detectChanges();
tick();
expect(dropDown.collapsed).toBeFalsy();

autocomplete.close();
tick();
fixture.detectChanges();
tick();
expect(dropDown.collapsed).toBeTruthy();
}));
it('Should open drop down on (Alt+)ArrowUp/ArrowDown', fakeAsync(() => {
Expand Down Expand Up @@ -180,13 +180,13 @@ describe('IgxAutocomplete', () => {
expect(dropDown.collapsed).toBeFalsy();

input.nativeElement.click();
tick();
fixture.detectChanges();
tick();
expect(dropDown.collapsed).toBeFalsy();

group.element.nativeElement.click();
tick();
fixture.detectChanges();
tick();
expect(dropDown.collapsed).toBeFalsy();

// Click in center of the body.
Expand Down Expand Up @@ -766,8 +766,8 @@ describe('IgxAutocomplete', () => {
expect(input.nativeElement.attributes['aria-expanded'].value).toEqual('true');
expect(input.nativeElement.attributes['aria-activedescendant'].value).toEqual(dropDown.focusedItem.id);
autocomplete.close();
tick();
fixture.detectChanges();
tick();
expect(input.nativeElement.attributes['aria-expanded'].value).toEqual('false');
}));
it('Should accept Japanese input', fakeAsync(() => {
Expand Down
31 changes: 19 additions & 12 deletions projects/igniteui-angular/src/lib/directives/toggle/toggle.directive.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,8 +69,8 @@ describe('IgxToggle', () => {
spyOn(toggle.opening, 'emit');
spyOn(toggle.opened, 'emit');
toggle.open();
tick();
fixture.detectChanges();
tick();

expect(toggle.opening.emit).toHaveBeenCalled();
expect(toggle.opened.emit).toHaveBeenCalled();
Expand Down Expand Up @@ -127,24 +127,29 @@ describe('IgxToggle', () => {
spyOn(toggle.closed, 'emit');

toggle.open();
fixture.detectChanges();
tick();
expect(toggle.opened.emit).toHaveBeenCalledTimes(1);
expect(toggle.collapsed).toBe(false);
toggle.close();
fixture.detectChanges();
tick();
expect(toggle.closed.emit).toHaveBeenCalledTimes(1);
expect(toggle.collapsed).toBe(true);

toggle.open();
fixture.detectChanges();
tick();
expect(toggle.opened.emit).toHaveBeenCalledTimes(2);
const otherId = overlay.attach(fixture.componentInstance.other);
overlay.show(otherId);
overlay.hide(otherId);
fixture.detectChanges();
tick();
expect(toggle.closed.emit).toHaveBeenCalledTimes(1);
expect(toggle.collapsed).toBe(false);
overlay.hideAll(); // as if outside click
fixture.detectChanges();
tick();
expect(toggle.closed.emit).toHaveBeenCalledTimes(2);
expect(toggle.collapsed).toBe(true);
Expand All @@ -170,6 +175,7 @@ describe('IgxToggle', () => {
const fixture = TestBed.createComponent(IgxToggleActionTestComponent);
fixture.detectChanges();
fixture.componentInstance.toggle.open();
fixture.detectChanges();
tick();

const divEl = fixture.debugElement.query(By.directive(IgxToggleDirective)).nativeElement;
Expand All @@ -179,8 +185,8 @@ describe('IgxToggle', () => {

button.triggerEventHandler('click', null);

tick();
fixture.detectChanges();
tick();
expect(divEl.classList.contains(HIDDEN_TOGGLER_CLASS)).toBeTruthy();
}));

Expand All @@ -195,6 +201,7 @@ describe('IgxToggle', () => {
spyOn(toggle.opened, 'emit');

fixture.componentInstance.toggleAction.onClick();
fixture.detectChanges();
tick();
expect(toggle.opening.emit).toHaveBeenCalled();
expect(toggle.opened.emit).toHaveBeenCalled();
Expand All @@ -205,8 +212,8 @@ describe('IgxToggle', () => {
spyOn(toggle.closed, 'emit');

p.nativeElement.click();
tick();
fixture.detectChanges();
tick();

expect(toggle.closing.emit).toHaveBeenCalled();
expect(toggle.closed.emit).toHaveBeenCalled();
Expand Down Expand Up @@ -263,15 +270,15 @@ describe('IgxToggle', () => {
spyOn(toggle.closed, 'emit');
button.triggerEventHandler('click', null);

tick();
fix.detectChanges();
tick();

expect(toggle.opened.emit).toHaveBeenCalled();
expect(toggleElm.classList.contains(TOGGLER_CLASS)).toBe(true);
button.triggerEventHandler('click', null);

tick();
fix.detectChanges();
tick();

expect(toggle.closed.emit).toHaveBeenCalled();
expect(toggleElm.classList.contains(HIDDEN_TOGGLER_CLASS)).toBe(true);
Expand Down Expand Up @@ -429,15 +436,15 @@ describe('IgxToggle', () => {
spyOn(toggle.opening, 'emit');
spyOn(toggle.opened, 'emit');
toggle.open();
tick();
fixture.detectChanges();
tick();

expect(toggle.opening.emit).toHaveBeenCalledTimes(1);
expect(toggle.opened.emit).toHaveBeenCalledTimes(1);

toggle.open();
tick();
fixture.detectChanges();
tick();

expect(toggle.opening.emit).toHaveBeenCalledTimes(1);
expect(toggle.opened.emit).toHaveBeenCalledTimes(1);
Expand All @@ -451,24 +458,24 @@ describe('IgxToggle', () => {
spyOn(toggle.opening, 'emit');
spyOn(toggle.opened, 'emit');
toggle.open();
tick();
fixture.detectChanges();
tick();

expect(toggle.opening.emit).toHaveBeenCalledTimes(1);
expect(toggle.opened.emit).toHaveBeenCalledTimes(1);

spyOn(toggle.closing, 'emit');
spyOn(toggle.closed, 'emit');
toggle.close();
tick();
fixture.detectChanges();
tick();

expect(toggle.closing.emit).toHaveBeenCalledTimes(1);
expect(toggle.closed.emit).toHaveBeenCalledTimes(1);

toggle.close();
tick();
fixture.detectChanges();
tick();

expect(toggle.closing.emit).toHaveBeenCalledTimes(1);
expect(toggle.closed.emit).toHaveBeenCalledTimes(1);
Expand Down Expand Up @@ -601,15 +608,15 @@ describe('IgxToggle', () => {

const button = fixture.debugElement.query(By.css('button')).nativeElement;
button.click();
tick();
fixture.detectChanges();
tick();

expect(toggle.opening.emit).toHaveBeenCalledTimes(1);
expect(toggle.opened.emit).toHaveBeenCalledTimes(1);

document.documentElement.dispatchEvent(new Event('click'));
tick();
fixture.detectChanges();
tick();

expect(toggle.closing.emit).toHaveBeenCalledTimes(1);
expect(toggle.closing.emit).toHaveBeenCalledWith({ id: '0', owner: toggle, cancel: false, event: new Event('click') });
Expand Down
Loading