Skip to content

test(material/chips): fix flakes and re-enable test #33426

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

Merged
crisbeto merged 1 commit into from
Jun 20, 2026
Merged

test(material/chips): fix flakes and re-enable test #33426

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
55 changes: 31 additions & 24 deletions src/material/chips/chip-grid.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -180,23 +180,23 @@ describe('MatChipGrid', () => {
expect(chipGridNativeElement.getAttribute('tabindex')).toBe('-1');
});

// TODO: re-enable this test.
// it('should clear the active item in key manager when the last focused chip is destroyed', fakeAsync(() => {
// const fixture = createComponent(StandardChipGrid);
// fixture.detectChanges();
it('should clear the active item in key manager when the last focused chip is destroyed', async () => {
const fixture = createComponent(InputChipGrid);
patchElementFocus(primaryActions[0]);
fixture.detectChanges();

// // Focus a chip
// chips.first.focus();
// fixture.detectChanges();
// Focus a chip
chips.first.focus();
fixture.detectChanges();

// // Remove ALL chips
// fixture.componentInstance.foods = []; // Clear the bound data array
// fixture.detectChanges();
// flush();
// Remove ALL chips
fixture.componentInstance.foods.set([]); // Clear the bound data array
fixture.detectChanges();
await fixture.whenStable();

// // Verify key manager is reset to prevent stale references
// expect(chipGridInstance._keyManager.activeItemIndex).toBe(-1);
// }));
// Verify key manager is reset to prevent stale references
expect((chipGridInstance as any)._keyManager.activeItemIndex).toBe(-1);
});

describe('on chip destroy', () => {
it('should focus the next item', () => {
Expand Down Expand Up @@ -872,7 +872,7 @@ describe('MatChipGrid', () => {
}

nativeInput.focus();
expect(fixture.componentInstance.foods)
expect(fixture.componentInstance.foods())
.withContext('Expected all chips to be removed.')
.toEqual([]);
expect(document.activeElement).withContext('Expected input to be focused.').toBe(nativeInput);
Expand Down Expand Up @@ -1172,7 +1172,7 @@ class FormFieldChipGrid {
<mat-form-field>
<mat-label>New food...</mat-label>
<mat-chip-grid #chipGrid placeholder="Food" [formControl]="control">
@for (food of foods; track food) {
@for (food of foods(); track food) {
<mat-chip-row [value]="food.value" (removed)="remove(food)">
{{ food.viewValue }}
</mat-chip-row>
Expand All @@ -1189,7 +1189,7 @@ class FormFieldChipGrid {
changeDetection: ChangeDetectionStrategy.Eager,
})
class InputChipGrid {
foods: any[] = [
readonly foods = signal([
{value: 'steak-0', viewValue: 'Steak'},
{value: 'pizza-1', viewValue: 'Pizza'},
{value: 'tacos-2', viewValue: 'Tacos', disabled: true},
Expand All @@ -1198,7 +1198,7 @@ class InputChipGrid {
{value: 'eggs-5', viewValue: 'Eggs'},
{value: 'pasta-6', viewValue: 'Pasta'},
{value: 'sushi-7', viewValue: 'Sushi'},
];
]);
control = new FormControl<string | null>(null);

separatorKeyCodes = [ENTER, SPACE];
Expand All @@ -1209,21 +1209,28 @@ class InputChipGrid {

// Add our foods
if (value) {
this.foods.push({
value: `${value.toLowerCase()}-${this.foods.length}`,
viewValue: value,
});
this.foods.update(current => [
...current,
{
value: `${value.toLowerCase()}-${current.length}`,
viewValue: value,
},
]);
}

// Reset the input value
event.chipInput!.clear();
}

remove(food: any): void {
const index = this.foods.indexOf(food);
const index = this.foods().indexOf(food);

if (index > -1) {
this.foods.splice(index, 1);
this.foods.update(current => {
const newValue = current.slice();
newValue.splice(index, 1);
return newValue;
});
}
}

Expand Down
22 changes: 13 additions & 9 deletions src/material/chips/chip-listbox.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,10 @@ describe('MatChipListbox', () => {
let directionality: WritableSignal<Direction>;
let primaryActions: NodeListOf<HTMLElement>;

function wait(milliseconds: number) {
return new Promise(resolve => setTimeout(resolve, milliseconds));
}

describe('StandardChipList', () => {
describe('basic behaviors', () => {
beforeEach(() => {
Expand Down Expand Up @@ -384,7 +388,7 @@ describe('MatChipListbox', () => {
.withContext('Expected tabIndex to be set to -1 temporarily.')
.toBe(-1);

await new Promise(r => setTimeout(r, 0));
await wait(0);

expect(chipListboxNativeElement.tabIndex)
.withContext('Expected tabIndex to be reset back to 0')
Expand All @@ -407,7 +411,7 @@ describe('MatChipListbox', () => {
.withContext('Expected tabIndex to be set to -1 temporarily.')
.toBe(-1);

await new Promise(r => setTimeout(r, 0));
await wait(0);

expect(chipListboxNativeElement.tabIndex)
.withContext('Expected tabIndex to be reset back to 4')
Expand Down Expand Up @@ -690,7 +694,7 @@ describe('MatChipListbox', () => {
By.css('mat-chip-listbox'),
)!.nativeElement;
dispatchFakeEvent(nativeChipListbox, 'blur');
await new Promise(r => setTimeout(r, 0));
await wait(0);

expect(fixture.componentInstance.control.touched)
.withContext('Expected the control to be touched.')
Expand All @@ -707,7 +711,7 @@ describe('MatChipListbox', () => {
By.css('mat-chip-listbox'),
)!.nativeElement;
dispatchFakeEvent(nativeChipListbox, 'blur');
await new Promise(r => setTimeout(r, 0));
await wait(0);

expect(fixture.componentInstance.control.touched)
.withContext('Expected the control to stay untouched.')
Expand Down Expand Up @@ -863,16 +867,16 @@ describe('MatChipListbox', () => {
initFixture.componentInstance.control = new FormControl(['tutorial-1', 'tutorial-2']);
});
fixture.detectChanges();

await new Promise(r => setTimeout(r, 400));
await wait(400);
fixture.detectChanges();

let array = fixture.componentInstance.chips.toArray();

expect(array.length).withContext('Expect chips not to be rendered yet').toBe(0);

await new Promise(r => setTimeout(r, 100));
await wait(100);
fixture.detectChanges();
await fixture.whenStable();

array = fixture.componentInstance.chips.toArray();

Expand All @@ -891,13 +895,13 @@ describe('MatChipListbox', () => {
fixture.detectChanges();
await fixture.whenStable();

await new Promise(r => setTimeout(r, 500));
await wait(500);
fixture.detectChanges();

fixture.componentInstance.control.setValue(['tutorial-4']);
fixture.componentInstance.updateChips(['tutorial-3', 'tutorial-4']);

await new Promise(r => setTimeout(r, 500));
await wait(500);
fixture.detectChanges();
await fixture.whenStable();

Expand Down
Loading