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 4 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
40 changes: 40 additions & 0 deletions projects/igniteui-angular/src/lib/combo/combo.component.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1064,6 +1064,7 @@ describe('igxCombo', () => {
expect(dropdown.nativeElement.getAttribute('aria-labelledby')).toEqual(combo.placeholder);

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

Expand All @@ -1077,6 +1078,7 @@ describe('igxCombo', () => {
expect(list.nativeElement.getAttribute('aria-activedescendant')).toEqual(null);

UIInteractions.triggerEventHandlerKeyDown('ArrowDown', list);
fixture.detectChanges();
tick();
fixture.detectChanges();
expect(list.nativeElement.getAttribute('aria-activedescendant')).toEqual(combo.dropdown.focusedItem.id);
Expand All @@ -1088,10 +1090,12 @@ describe('igxCombo', () => {
it('should render aria-expanded attribute properly', fakeAsync(() => {
expect(input.nativeElement.getAttribute('aria-expanded')).toMatch('false');
combo.open();
fixture.detectChanges();
tick();
fixture.detectChanges();
expect(input.nativeElement.getAttribute('aria-expanded')).toMatch('true');
combo.close();
fixture.detectChanges();
tick();
fixture.detectChanges();
expect(input.nativeElement.getAttribute('aria-expanded')).toMatch('false');
Expand Down Expand Up @@ -1126,6 +1130,7 @@ describe('igxCombo', () => {
fixture.componentInstance.size = "large";
fixture.detectChanges();
combo.toggle();
fixture.detectChanges();
tick();
fixture.detectChanges();
const dropdownItems = fixture.debugElement.queryAll(By.css(`.${CSS_CLASS_DROPDOWNLISTITEM}`));
Expand Down Expand Up @@ -1242,13 +1247,15 @@ describe('igxCombo', () => {
});
it('should focus search input', fakeAsync(() => {
combo.toggle();
fixture.detectChanges();
tick();
fixture.detectChanges();
expect(document.activeElement).toEqual(combo.searchInput.nativeElement);
}));
it('should not focus search input, when autoFocusSearch=false', fakeAsync(() => {
combo.autoFocusSearch = false;
combo.toggle();
fixture.detectChanges();
tick();
fixture.detectChanges();
expect(document.activeElement).not.toEqual(combo.searchInput.nativeElement);
Expand Down Expand Up @@ -1345,6 +1352,7 @@ describe('igxCombo', () => {
expect(containerElementWidth).toEqual(wrapperWidth);

combo.toggle();
fixture.detectChanges();
tick();
fixture.detectChanges();
const inputElement = fixture.debugElement.query(By.css(`.${CSS_CLASS_INPUTGROUP_WRAPPER}`)).nativeElement;
Expand All @@ -1370,6 +1378,7 @@ describe('igxCombo', () => {
expect(wrapperWidth).toEqual(comboWidth);

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

Expand All @@ -1385,6 +1394,7 @@ describe('igxCombo', () => {
expect(inputWidth).toEqual(comboWidth);

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

Expand All @@ -1393,6 +1403,7 @@ describe('igxCombo', () => {
fixture.detectChanges();

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

Expand Down Expand Up @@ -1668,6 +1679,7 @@ describe('igxCombo', () => {
expect(dropdown.focusedItem).toEqual(null);
expect(combo.collapsed).toBeTruthy();
combo.toggle();
fixture.detectChanges();
tick();
fixture.detectChanges();
expect(document.activeElement).toEqual(combo.searchInput.nativeElement);
Expand Down Expand Up @@ -1784,6 +1796,7 @@ describe('igxCombo', () => {
});
it('should properly handle dropdown.focusItem', fakeAsync(() => {
combo.toggle();
fixture.detectChanges();
tick();
fixture.detectChanges();
const virtualSpyUP = spyOn(dropdown, 'navigatePrev');
Expand All @@ -1802,6 +1815,7 @@ describe('igxCombo', () => {
}));
it('should handle keyboard events', fakeAsync(() => {
combo.toggle();
fixture.detectChanges();
tick();
fixture.detectChanges();
spyOn(combo, 'selectAllItems');
Expand All @@ -1825,13 +1839,15 @@ describe('igxCombo', () => {
it('should toggle combo dropdown on toggle button click', fakeAsync(() => {
spyOn(combo, 'toggle').and.callThrough();
input.triggerEventHandler('click', UIInteractions.getMouseEvent('click'));
fixture.detectChanges();
tick();
fixture.detectChanges();
expect(combo.collapsed).toEqual(false);
expect(combo.toggle).toHaveBeenCalledTimes(1);
expect(document.activeElement).toEqual(combo.searchInput.nativeElement);

input.triggerEventHandler('click', UIInteractions.getMouseEvent('click'));
fixture.detectChanges();
tick();
fixture.detectChanges();
expect(combo.collapsed).toEqual(true);
Expand Down Expand Up @@ -1950,6 +1966,7 @@ describe('igxCombo', () => {

const dropdownContent = fixture.debugElement.query(By.css(`.${CSS_CLASS_CONTENT}`));
UIInteractions.triggerEventHandlerKeyDown('Tab', dropdownContent);
fixture.detectChanges();
tick();
fixture.detectChanges();
expect(combo.collapsed).toBeTruthy();
Expand Down Expand Up @@ -2288,12 +2305,14 @@ describe('igxCombo', () => {
const toggleBtn = fixture.debugElement.query(By.css(`.${CSS_CLASS_TOGGLEBUTTON}`));

UIInteractions.triggerEventHandlerKeyDown('Enter', toggleBtn);
fixture.detectChanges();
tick();
fixture.detectChanges();
expect(combo.toggle).toHaveBeenCalledTimes(1);
expect(combo.collapsed).toEqual(false);

UIInteractions.triggerEventHandlerKeyDown('Enter', toggleBtn);
fixture.detectChanges();
tick();
fixture.detectChanges();
expect(combo.toggle).toHaveBeenCalledTimes(2);
Expand Down Expand Up @@ -2454,6 +2473,7 @@ describe('igxCombo', () => {
const dropdown = combo.dropdown;

dropdown.toggle();
fixture.detectChanges();
tick();
fixture.detectChanges();
const dropdownContent = fixture.debugElement.query(By.css(`.${CSS_CLASS_CONTENT}`));
Expand All @@ -2468,9 +2488,11 @@ describe('igxCombo', () => {
tick();
fixture.detectChanges();
UIInteractions.triggerEventHandlerKeyDown('Space', dropdownContent);
fixture.detectChanges();
tick();
fixture.detectChanges();
combo.toggle();
fixture.detectChanges();
tick();
fixture.detectChanges();
combo.onBlur();
Expand Down Expand Up @@ -2603,6 +2625,7 @@ describe('igxCombo', () => {
});
it('should group items correctly', fakeAsync(() => {
combo.toggle();
fixture.detectChanges();
tick();
fixture.detectChanges();
expect(combo.groupKey).toEqual('region');
Expand All @@ -2621,6 +2644,7 @@ describe('igxCombo', () => {
it('should properly handle click events on disabled/header items', fakeAsync(() => {
spyOn(combo.dropdown, 'selectItem').and.callThrough();
combo.toggle();
fixture.detectChanges();
tick();
fixture.detectChanges();
expect(combo.collapsed).toBeFalsy();
Expand Down Expand Up @@ -2976,6 +3000,7 @@ describe('igxCombo', () => {
expect(dropdownItems.length).toEqual(3);

UIInteractions.triggerEventHandlerKeyUp('Escape', searchInput);
fixture.detectChanges();
tick();
fixture.detectChanges();
expect(combo.collapsed).toBeTruthy();
Expand Down Expand Up @@ -3105,23 +3130,27 @@ describe('igxCombo', () => {
});
it('should enable/disable filtering at runtime', fakeAsync(() => {
combo.open(); // Open combo - all data items are in filteredData
fixture.detectChanges();
tick();
fixture.detectChanges();
expect(combo.dropdown.items.length).toBeGreaterThan(0);

const searchInput = fixture.debugElement.query(By.css(CSS_CLASS_SEARCHINPUT));
searchInput.nativeElement.value = 'Not-available item';
searchInput.triggerEventHandler('input', { target: searchInput.nativeElement });
fixture.detectChanges();
tick();
fixture.detectChanges();
expect(combo.dropdown.items.length).toEqual(0); // No items are available because of filtering

combo.close(); // Filter is cleared on close
fixture.detectChanges();
tick();
fixture.detectChanges();
combo.disableFiltering = true; // Filtering is disabled
fixture.detectChanges();
combo.open(); // All items are visible since filtering is disabled
fixture.detectChanges();
tick();
fixture.detectChanges();
expect(combo.dropdown.items.length).toBeGreaterThan(0); // All items are visible since filtering is disabled
Expand All @@ -3132,11 +3161,13 @@ describe('igxCombo', () => {
expect(combo.dropdown.items.length).toBeGreaterThan(0); // All items are visible since filtering is disabled

combo.close(); // Filter is cleared on close
fixture.detectChanges();
tick();
fixture.detectChanges();
combo.disableFiltering = false; // Filtering is re-enabled
fixture.detectChanges();
combo.open(); // Filter is cleared on open
fixture.detectChanges();
tick();
fixture.detectChanges();
expect(combo.dropdown.items.length).toBeGreaterThan(0);
Expand Down Expand Up @@ -3188,6 +3219,7 @@ describe('igxCombo', () => {
});
it('Should filter the data when custom filterFunction is provided', fakeAsync(() => {
combo.open();
fixture.detectChanges();
tick();
fixture.detectChanges();
expect(combo.dropdown.items.length).toBeGreaterThan(0);
Expand All @@ -3198,6 +3230,7 @@ describe('igxCombo', () => {
expect(combo.dropdown.items.length).toEqual(0);

combo.close();
fixture.detectChanges();
tick();
fixture.detectChanges();
combo.filteringOptions = { caseSensitive: false, filteringKey: combo.groupKey };
Expand All @@ -3210,6 +3243,7 @@ describe('igxCombo', () => {
i[filteringOptions.filteringKey]?.toString().toLowerCase().includes(searchTerm))
}
combo.open();
fixture.detectChanges();
tick();
fixture.detectChanges();
expect(combo.dropdown.items.length).toBeGreaterThan(0);
Expand All @@ -3226,6 +3260,7 @@ describe('igxCombo', () => {
}));
it('Should update filtering when custom filterFunction is provided and filteringOptions.caseSensitive is changed', fakeAsync(() => {
combo.open();
fixture.detectChanges();
tick();
fixture.detectChanges();
expect(combo.dropdown.items.length).toBeGreaterThan(0);
Expand All @@ -3236,6 +3271,7 @@ describe('igxCombo', () => {
expect(combo.dropdown.items.length).toEqual(0);

combo.close();
fixture.detectChanges();
tick();
fixture.detectChanges();
combo.filteringOptions = { caseSensitive: false, filteringKey: combo.groupKey };
Expand All @@ -3248,6 +3284,7 @@ describe('igxCombo', () => {
i[filteringOptions.filteringKey]?.toString().toLowerCase().includes(searchTerm))
}
combo.open();
fixture.detectChanges();
tick();
fixture.detectChanges();
expect(combo.dropdown.items.length).toBeGreaterThan(0);
Expand All @@ -3263,6 +3300,7 @@ describe('igxCombo', () => {
}));
it('Should update filtering when custom filteringOptions are provided', fakeAsync(() => {
combo.open();
fixture.detectChanges();
tick();
fixture.detectChanges();
expect(combo.dropdown.items.length).toBeGreaterThan(0);
Expand All @@ -3273,10 +3311,12 @@ describe('igxCombo', () => {
expect(combo.dropdown.items.length).toEqual(0);

combo.close();
fixture.detectChanges();
tick();
fixture.detectChanges();
combo.filteringOptions = { caseSensitive: false, filteringKey: combo.groupKey };
combo.open();
fixture.detectChanges();
tick();
fixture.detectChanges();
expect(combo.dropdown.items.length).toBeGreaterThan(0);
Expand Down
Loading