chip-grid.spec.ts

import {Direction, Directionality} from '@angular/cdk/bidi';
import {
  BACKSPACE,
  DELETE,
  DOWN_ARROW,
  END,
  ENTER,
  HOME,
  LEFT_ARROW,
  RIGHT_ARROW,
  SPACE,
  TAB,
  UP_ARROW,
} from '@angular/cdk/keycodes';
import {
  createKeyboardEvent,
  dispatchEvent,
  dispatchFakeEvent,
  dispatchKeyboardEvent,
  patchElementFocus,
  typeInElement,
} from '@angular/cdk/testing/private';
import {
  ChangeDetectorRef,
  Component,
  DebugElement,
  EventEmitter,
  QueryList,
  Type,
  ViewChild,
  ViewChildren,
  inject,
} from '@angular/core';
import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
import {ComponentFixture, TestBed, fakeAsync, flush, tick} from '@angular/core/testing';
import {FormControl, FormsModule, NgForm, ReactiveFormsModule, Validators} from '@angular/forms';
import {MatFormFieldModule} from '../form-field';
import {MatInputModule} from '../input';
import {By} from '@angular/platform-browser';
import {MatChipEvent, MatChipGrid, MatChipInputEvent, MatChipRow, MatChipsModule} from './index';
import {NoopAnimationsModule} from '@angular/platform-browser/animations';

describe('MatChipGrid', () => {
  let chipGridDebugElement: DebugElement;
  let chipGridNativeElement: HTMLElement;
  let chipGridInstance: MatChipGrid;
  let chips: QueryList<MatChipRow>;
  let testComponent: StandardChipGrid;
  let directionality: {value: Direction; change: EventEmitter<Direction>};
  let primaryActions: NodeListOf<HTMLElement>;

  const expectNoCellFocused = () => {
    expect(Array.from(primaryActions)).not.toContain(document.activeElement as HTMLElement);
  };

  const expectLastCellFocused = () => {
    expect(document.activeElement).toBe(primaryActions[primaryActions.length - 1]);
  };

  describe('StandardChipGrid', () => {
    describe('basic behaviors', () => {
      let fixture: ComponentFixture<StandardChipGrid>;

      beforeEach(() => {
        fixture = createComponent(StandardChipGrid);
      });

      it('should add the `mat-mdc-chip-set` class', () => {
        expect(chipGridNativeElement.classList).toContain('mat-mdc-chip-set');
      });

      it('should toggle the chips disabled state based on whether it is disabled', () => {
        expect(chips.toArray().every(chip => chip.disabled)).toBe(false);

        chipGridInstance.disabled = true;
        fixture.changeDetectorRef.markForCheck();
        fixture.detectChanges();

        expect(chips.toArray().every(chip => chip.disabled)).toBe(true);

        chipGridInstance.disabled = false;
        fixture.changeDetectorRef.markForCheck();
        fixture.detectChanges();

        expect(chips.toArray().every(chip => chip.disabled)).toBe(false);
      });

      it('should disable a chip that is added after the list became disabled', fakeAsync(() => {
        expect(chips.toArray().every(chip => chip.disabled)).toBe(false);

        chipGridInstance.disabled = true;
        fixture.changeDetectorRef.markForCheck();
        fixture.detectChanges();

        expect(chips.toArray().every(chip => chip.disabled)).toBe(true);

        fixture.componentInstance.chips.push(5, 6);
        fixture.changeDetectorRef.markForCheck();
        fixture.detectChanges();
        tick();
        fixture.detectChanges();

        expect(chips.toArray().every(chip => chip.disabled)).toBe(true);
      }));

      it('should not set a role on the grid when the list is empty', () => {
        testComponent.chips = [];
        fixture.changeDetectorRef.markForCheck();
        fixture.detectChanges();

        expect(chipGridNativeElement.hasAttribute('role')).toBe(false);
      });

      it('should be able to set a custom role', () => {
        testComponent.role = 'listbox';
        fixture.changeDetectorRef.markForCheck();
        fixture.detectChanges();

        expect(chipGridNativeElement.getAttribute('role')).toBe('listbox');
      });
    });

    describe('focus behaviors', () => {
      let fixture: ComponentFixture<StandardChipGrid>;

      beforeEach(() => {
        fixture = createComponent(StandardChipGrid);
      });

      it('should focus the first chip on focus', () => {
        chipGridInstance.focus();
        fixture.detectChanges();

        expect(document.activeElement).toBe(primaryActions[0]);
      });

      it('should focus the primary action when calling the `focus` method', () => {
        chips.last.focus();
        fixture.detectChanges();

        expect(document.activeElement).toBe(primaryActions[primaryActions.length - 1]);
      });

      it('should not be able to become focused when disabled', () => {
        expect(chipGridInstance.focused)
          .withContext('Expected grid to not be focused.')
          .toBe(false);

        chipGridInstance.disabled = true;
        fixture.changeDetectorRef.markForCheck();
        fixture.detectChanges();

        chipGridInstance.focus();
        fixture.detectChanges();

        expect(chipGridInstance.focused)
          .withContext('Expected grid to continue not to be focused')
          .toBe(false);
      });

      it('should remove the tabindex from the grid if it is disabled', () => {
        expect(chipGridNativeElement.getAttribute('tabindex')).toBe('0');

        chipGridInstance.disabled = true;
        fixture.changeDetectorRef.markForCheck();
        fixture.detectChanges();

        expect(chipGridNativeElement.getAttribute('tabindex')).toBe('-1');
      });

      describe('on chip destroy', () => {
        it('should focus the next item', () => {
          const midItem = chips.get(2)!;

          // Focus the middle item
          midItem.focus();

          // Destroy the middle item
          testComponent.chips.splice(2, 1);
          fixture.changeDetectorRef.markForCheck();
          fixture.detectChanges();

          // It focuses the 4th item
          expect(document.activeElement).toBe(primaryActions[3]);
        });

        it('should focus the previous item', () => {
          // Focus the last item
          chips.last.focus();

          // Destroy the last item
          testComponent.chips.pop();
          fixture.changeDetectorRef.markForCheck();
          fixture.detectChanges();

          // It focuses the next-to-last item
          expect(document.activeElement).toBe(primaryActions[primaryActions.length - 2]);
        });

        it('should not focus if chip grid is not focused', fakeAsync(() => {
          const midItem = chips.get(2)!;

          // Focus and blur the middle item
          midItem.focus();
          (document.activeElement as HTMLElement).blur();
          tick();

          // Destroy the middle item
          testComponent.chips.splice(2, 1);
          fixture.changeDetectorRef.markForCheck();
          fixture.detectChanges();
          flush();

          // Should not have focus
          expect(chipGridNativeElement.contains(document.activeElement)).toBe(false);
        }));

        it('should focus the grid if the last focused item is removed', () => {
          testComponent.chips = [0];
          fixture.changeDetectorRef.markForCheck();

          spyOn(chipGridInstance, 'focus');
          patchElementFocus(chips.last.primaryAction!._elementRef.nativeElement);
          chips.last.focus();

          testComponent.chips.pop();
          fixture.changeDetectorRef.markForCheck();
          fixture.detectChanges();

          expect(chipGridInstance.focus).toHaveBeenCalled();
        });
      });

      it('should have a focus indicator', () => {
        const focusIndicators = chipGridNativeElement.querySelectorAll(
          '.mat-mdc-chip-primary-focus-indicator',
        );
        expect(focusIndicators.length).toBeGreaterThan(0);
        expect(focusIndicators.length).toBe(chips.length);
      });
    });

    describe('keyboard behavior', () => {
      describe('LTR (default)', () => {
        let fixture: ComponentFixture<ChipGridWithRemove>;
        let trailingActions: NodeListOf<HTMLElement>;

        beforeEach(fakeAsync(() => {
          fixture = createComponent(ChipGridWithRemove);
          flush();
          trailingActions = chipGridNativeElement.querySelectorAll(
            '.mdc-evolution-chip__action--trailing',
          );
        }));

        it('should focus previous column when press LEFT ARROW', () => {
          const lastIndex = primaryActions.length - 1;

          // Focus the first column of the last chip in the array
          chips.last.focus();
          expect(document.activeElement).toBe(primaryActions[lastIndex]);

          // Press the LEFT arrow
          dispatchKeyboardEvent(primaryActions[lastIndex], 'keydown', LEFT_ARROW);
          fixture.detectChanges();

          // It focuses the last column of the previous chip
          expect(document.activeElement).toBe(trailingActions[lastIndex - 1]);
        });

        it('should focus next column when press RIGHT ARROW', () => {
          // Focus the first column of the first chip in the array
          chips.first.focus();
          expect(document.activeElement).toBe(primaryActions[0]);

          // Press the RIGHT arrow
          dispatchKeyboardEvent(primaryActions[0], 'keydown', RIGHT_ARROW);
          fixture.detectChanges();

          // It focuses the next column of the chip
          expect(document.activeElement).toBe(trailingActions[0]);
        });

        it('should not handle arrow key events from non-chip elements', () => {
          const previousActiveElement = document.activeElement;

          dispatchKeyboardEvent(chipGridNativeElement, 'keydown', RIGHT_ARROW);
          fixture.detectChanges();

          expect(document.activeElement)
            .withContext('Expected focused item not to have changed.')
            .toBe(previousActiveElement);
        });

        it('should focus primary action in next row when pressing DOWN ARROW on primary action', () => {
          chips.first.focus();
          expect(document.activeElement).toBe(primaryActions[0]);

          dispatchKeyboardEvent(primaryActions[0], 'keydown', DOWN_ARROW);
          fixture.detectChanges();

          expect(document.activeElement).toBe(primaryActions[1]);
        });

        it('should focus primary action in previous row when pressing UP ARROW on primary action', () => {
          const lastIndex = primaryActions.length - 1;
          chips.last.focus();
          expect(document.activeElement).toBe(primaryActions[lastIndex]);

          dispatchKeyboardEvent(primaryActions[lastIndex], 'keydown', UP_ARROW);
          fixture.detectChanges();

          expect(document.activeElement).toBe(primaryActions[lastIndex - 1]);
        });

        it('should focus(trailing action in next row when pressing DOWN ARROW on(trailing action', () => {
          trailingActions[0].focus();
          expect(document.activeElement).toBe(trailingActions[0]);

          dispatchKeyboardEvent(trailingActions[0], 'keydown', DOWN_ARROW);
          fixture.detectChanges();

          expect(document.activeElement).toBe(trailingActions[1]);
        });

        it('should focus trailing action in previous row when pressing UP ARROW on trailing action', () => {
          const lastIndex = trailingActions.length - 1;
          trailingActions[lastIndex].focus();
          expect(document.activeElement).toBe(trailingActions[lastIndex]);

          dispatchKeyboardEvent(trailingActions[lastIndex], 'keydown', UP_ARROW);
          fixture.detectChanges();

          expect(document.activeElement).toBe(trailingActions[lastIndex - 1]);
        });
      });

      describe('RTL', () => {
        let fixture: ComponentFixture<StandardChipGrid>;

        beforeEach(() => {
          fixture = createComponent(StandardChipGrid, 'rtl');
        });

        it('should focus previous column when press RIGHT ARROW', () => {
          const lastIndex = primaryActions.length - 1;

          // Focus the first column of the last chip in the array
          chips.last.focus();
          expect(document.activeElement).toBe(primaryActions[lastIndex]);

          // Press the RIGHT arrow
          dispatchKeyboardEvent(primaryActions[lastIndex], 'keydown', RIGHT_ARROW);
          fixture.detectChanges();

          // It focuses the last column of the previous chip
          expect(document.activeElement).toBe(primaryActions[lastIndex - 1]);
        });

        it('should focus next column when press LEFT ARROW', () => {
          // Focus the first column of the first chip in the array
          chips.first.focus();
          expect(document.activeElement).toBe(primaryActions[0]);

          // Press the LEFT arrow
          dispatchKeyboardEvent(primaryActions[0], 'keydown', LEFT_ARROW);
          fixture.detectChanges();

          // It focuses the next column of the chip
          expect(document.activeElement).toBe(primaryActions[1]);
        });

        it('should allow focus to escape when tabbing away', fakeAsync(() => {
          let nativeChips = chipGridNativeElement.querySelectorAll('mat-chip-row');
          let firstNativeChip = nativeChips[0] as HTMLElement;

          dispatchKeyboardEvent(firstNativeChip, 'keydown', TAB);

          expect(chipGridNativeElement.tabIndex)
            .withContext('Expected tabIndex to be set to -1 temporarily.')
            .toBe(-1);

          flush();

          expect(chipGridNativeElement.tabIndex)
            .withContext('Expected tabIndex to be reset back to 0')
            .toBe(0);
        }));

        it('should use user defined tabIndex', fakeAsync(() => {
          chipGridInstance.tabIndex = 4;
          fixture.changeDetectorRef.markForCheck();
          fixture.detectChanges();

          expect(chipGridNativeElement.tabIndex)
            .withContext('Expected tabIndex to be set to user defined value 4.')
            .toBe(4);

          let nativeChips = chipGridNativeElement.querySelectorAll('mat-chip-row');
          let firstNativeChip = nativeChips[0] as HTMLElement;

          dispatchKeyboardEvent(firstNativeChip, 'keydown', TAB);
          expect(chipGridNativeElement.tabIndex)
            .withContext('Expected tabIndex to be set to -1 temporarily.')
            .toBe(-1);

          flush();

          expect(chipGridNativeElement.tabIndex)
            .withContext('Expected tabIndex to be reset back to 4')
            .toBe(4);
        }));
      });

      describe('keydown behavior', () => {
        let fixture: ComponentFixture<StandardChipGrid>;

        beforeEach(() => {
          fixture = createComponent(StandardChipGrid);
        });

        it('should account for the direction changing', () => {
          chips.first.focus();
          expect(document.activeElement).toBe(primaryActions[0]);

          dispatchKeyboardEvent(primaryActions[0], 'keydown', RIGHT_ARROW);
          fixture.detectChanges();

          expect(document.activeElement).toBe(primaryActions[1]);

          directionality.value = 'rtl';
          directionality.change.next('rtl');
          fixture.detectChanges();

          dispatchKeyboardEvent(primaryActions[1], 'keydown', RIGHT_ARROW);
          fixture.detectChanges();

          expect(document.activeElement).toBe(primaryActions[0]);
        });

        it('should move focus to the first chip when pressing HOME', () => {
          chips.last.focus();
          expect(document.activeElement).toBe(primaryActions[4]);

          const event = dispatchKeyboardEvent(primaryActions[4], 'keydown', HOME);
          fixture.detectChanges();

          expect(event.defaultPrevented).toBe(true);
          expect(document.activeElement).toBe(primaryActions[0]);
        });

        it('should move focus to the last chip when pressing END', () => {
          chips.first.focus();
          expect(document.activeElement).toBe(primaryActions[0]);

          const event = dispatchKeyboardEvent(primaryActions[0], 'keydown', END);
          fixture.detectChanges();

          expect(event.defaultPrevented).toBe(true);
          expect(document.activeElement).toBe(primaryActions[4]);
        });

        it('should ignore all non-tab navigation keyboard events from an editing chip', fakeAsync(() => {
          testComponent.editable = true;
          fixture.changeDetectorRef.markForCheck();
          fixture.detectChanges();

          chips.first.focus();
          expect(document.activeElement).toBe(primaryActions[0]);

          dispatchKeyboardEvent(document.activeElement!, 'keydown', ENTER);
          fixture.detectChanges();
          flush();

          const previousActiveElement = document.activeElement;
          const keysToIgnore = [HOME, END, LEFT_ARROW, RIGHT_ARROW];

          for (const key of keysToIgnore) {
            dispatchKeyboardEvent(document.activeElement!, 'keydown', key);
            fixture.detectChanges();
            flush();

            expect(document.activeElement).toBe(previousActiveElement);
          }
        }));
      });
    });
  });

  describe('FormFieldChipGrid', () => {
    let fixture: ComponentFixture<FormFieldChipGrid>;

    beforeEach(() => {
      fixture = createComponent(FormFieldChipGrid);
    });

    describe('keyboard behavior', () => {
      it('should maintain focus if the active chip is deleted', () => {
        const secondChip = fixture.nativeElement.querySelectorAll('.mat-mdc-chip')[1];
        const secondChipAction = secondChip.querySelector('.mdc-evolution-chip__action--primary');

        secondChipAction.focus();
        fixture.detectChanges();

        expect(chipGridInstance._chips.toArray().findIndex(chip => chip._hasFocus())).toBe(1);

        dispatchKeyboardEvent(secondChip, 'keydown', DELETE);
        fixture.detectChanges();

        expect(chipGridInstance._chips.toArray().findIndex(chip => chip._hasFocus())).toBe(1);
      });

      describe('when the input has focus', () => {
        it('should not focus the last chip when press DELETE', () => {
          let nativeInput = fixture.nativeElement.querySelector('input');

          // Focus the input
          nativeInput.focus();
          expectNoCellFocused();

          // Press the DELETE key
          dispatchKeyboardEvent(nativeInput, 'keydown', DELETE);
          fixture.detectChanges();

          // It doesn't focus the last chip
          expectNoCellFocused();
        });

        it('should focus the last chip when press BACKSPACE', () => {
          let nativeInput = fixture.nativeElement.querySelector('input');

          // Focus the input
          nativeInput.focus();
          expectNoCellFocused();

          // Press the BACKSPACE key
          dispatchKeyboardEvent(nativeInput, 'keydown', BACKSPACE);
          fixture.detectChanges();

          // It focuses the last chip
          expectLastCellFocused();
        });

        it('should not focus the last chip when pressing BACKSPACE on a non-empty input', () => {
          const nativeInput = fixture.nativeElement.querySelector('input');
          nativeInput.value = 'hello';
          nativeInput.focus();
          fixture.detectChanges();

          expectNoCellFocused();

          dispatchKeyboardEvent(nativeInput, 'keydown', BACKSPACE);
          fixture.detectChanges();

          expectNoCellFocused();
        });
      });
    });

    it('should complete the stateChanges stream on destroy', () => {
      const spy = jasmine.createSpy('stateChanges complete');
      const subscription = chipGridInstance.stateChanges.subscribe({complete: spy});

      fixture.destroy();
      expect(spy).toHaveBeenCalled();
      subscription.unsubscribe();
    });
  });

  describe('with chip remove', () => {
    let fixture: ComponentFixture<ChipGridWithRemove>;
    let trailingActions: NodeListOf<HTMLElement>;

    beforeEach(fakeAsync(() => {
      fixture = createComponent(ChipGridWithRemove);
      flush();
      trailingActions = chipGridNativeElement.querySelectorAll(
        '.mdc-evolution-chip__action--trailing',
      );
    }));

    it('should properly focus next item if chip is removed through click', fakeAsync(() => {
      const chip = chips.get(2)!;
      chip.focus();
      fixture.detectChanges();

      // Destroy the third focused chip by dispatching a bubbling click event on the
      // associated chip remove element.
      trailingActions[2].click();
      fixture.detectChanges();
      flush();

      expect(document.activeElement).toBe(primaryActions[3]);
    }));
  });

  describe('chip grid with chip input', () => {
    let fixture: ComponentFixture<InputChipGrid>;
    let nativeChips: HTMLElement[];
    let nativeInput: HTMLInputElement;
    let nativeChipGrid: HTMLElement;

    beforeEach(() => {
      fixture = createComponent(InputChipGrid);

      nativeChips = fixture.debugElement
        .queryAll(By.css('mat-chip-row'))
        .map(chip => chip.nativeElement);

      nativeChipGrid = fixture.debugElement.query(By.css('mat-chip-grid'))!.nativeElement;
      nativeInput = fixture.nativeElement.querySelector('input');
    });

    it('should take an initial view value with reactive forms', () => {
      fixture.componentInstance.control = new FormControl('[pizza-1]');
      fixture.changeDetectorRef.markForCheck();
      fixture.detectChanges();

      expect(fixture.componentInstance.chipGrid.value).toEqual('[pizza-1]');
    });

    it('should set the view value from the form', () => {
      const chipGrid = fixture.componentInstance.chipGrid;

      expect(chipGrid.value).withContext('Expect chip grid to have no initial value').toBeFalsy();

      fixture.componentInstance.control.setValue('[pizza-1]');
      fixture.detectChanges();

      expect(chipGrid.value).toEqual('[pizza-1]');
    });

    it('should update the form value when the view changes', fakeAsync(() => {
      expect(fixture.componentInstance.control.value)
        .withContext(`Expected the control's value to be empty initially.`)
        .toEqual(null);

      nativeInput.focus();

      typeInElement(nativeInput, '123');
      fixture.detectChanges();
      dispatchKeyboardEvent(nativeInput, 'keydown', ENTER);
      fixture.detectChanges();
      flush();

      dispatchFakeEvent(nativeInput, 'blur');
      flush();

      expect(fixture.componentInstance.control.value).toContain('123-8');
    }));

    it('should clear the value when the control is reset', () => {
      fixture.componentInstance.control.setValue('pizza-1');
      fixture.detectChanges();

      fixture.componentInstance.control.reset();
      fixture.detectChanges();

      expect(fixture.componentInstance.chipGrid.value).toEqual(null);
    });

    it('should set the control to touched when the chip grid is touched', fakeAsync(() => {
      expect(fixture.componentInstance.control.touched)
        .withContext('Expected the control to start off as untouched.')
        .toBe(false);

      dispatchFakeEvent(nativeChipGrid, 'blur');
      tick();

      expect(fixture.componentInstance.control.touched)
        .withContext('Expected the control to be touched.')
        .toBe(true);
    }));

    it('should not set touched when a disabled chip grid is touched', fakeAsync(() => {
      expect(fixture.componentInstance.control.touched)
        .withContext('Expected the control to start off as untouched.')
        .toBe(false);

      fixture.componentInstance.control.disable();
      dispatchFakeEvent(nativeChipGrid, 'blur');
      tick();

      expect(fixture.componentInstance.control.touched)
        .withContext('Expected the control to stay untouched.')
        .toBe(false);
    }));

    it("should set the control to dirty when the chip grid's value changes in the DOM", fakeAsync(() => {
      expect(fixture.componentInstance.control.dirty)
        .withContext(`Expected control to start out pristine.`)
        .toEqual(false);

      nativeInput.focus();

      typeInElement(nativeInput, '123');
      fixture.detectChanges();
      dispatchKeyboardEvent(nativeInput, 'keydown', ENTER);
      fixture.detectChanges();
      flush();

      dispatchFakeEvent(nativeInput, 'blur');
      flush();

      expect(fixture.componentInstance.control.dirty)
        .withContext(`Expected control to be dirty after value was changed by user.`)
        .toEqual(true);
    }));

    it('should not set the control to dirty when the value changes programmatically', () => {
      expect(fixture.componentInstance.control.dirty)
        .withContext(`Expected control to start out pristine.`)
        .toEqual(false);

      fixture.componentInstance.control.setValue('pizza-1');

      expect(fixture.componentInstance.control.dirty)
        .withContext(`Expected control to stay pristine after programmatic change.`)
        .toEqual(false);
    });

    it('should set an asterisk after the placeholder if the control is required', () => {
      let requiredMarker = fixture.debugElement.query(
        By.css('.mat-mdc-form-field-required-marker'),
      )!;
      expect(requiredMarker)
        .withContext(`Expected placeholder not to have an asterisk, as control was not required.`)
        .toBeNull();

      fixture.componentInstance.chipGrid.required = true;
      fixture.detectChanges();

      requiredMarker = fixture.debugElement.query(By.css('.mat-mdc-form-field-required-marker'))!;
      expect(requiredMarker)
        .not.withContext(`Expected placeholder to have an asterisk, as control was required.`)
        .toBeNull();
    });

    it('should mark the component as required if the control has a required validator', () => {
      fixture.destroy();
      fixture = TestBed.createComponent(InputChipGrid);
      fixture.componentInstance.control = new FormControl('', [Validators.required]);
      fixture.detectChanges();

      expect(
        fixture.nativeElement.querySelector('.mat-mdc-form-field-required-marker'),
      ).toBeTruthy();
    });

    it('should blur the form field when the active chip is blurred', fakeAsync(() => {
      const formField: HTMLElement = fixture.nativeElement.querySelector('.mat-mdc-form-field');
      const firstAction = nativeChips[0].querySelector('.mat-mdc-chip-action') as HTMLElement;

      patchElementFocus(firstAction);
      firstAction.focus();
      fixture.detectChanges();

      expect(formField.classList).toContain('mat-focused');

      firstAction.blur();
      fixture.detectChanges();
      fixture.detectChanges();
      fixture.detectChanges();
      flush();

      expect(formField.classList).not.toContain('mat-focused');
    }));

    it('should keep focus on the input after adding the first chip', fakeAsync(() => {
      const chipEls = Array.from<HTMLElement>(
        fixture.nativeElement.querySelectorAll('mat-chip-row'),
      ).reverse();

      // Remove the chips via backspace to simulate the user removing them.
      chipEls.forEach(chip => {
        chip.focus();
        dispatchKeyboardEvent(chip, 'keydown', BACKSPACE);
        fixture.detectChanges();
        tick();
      });

      nativeInput.focus();
      expect(fixture.componentInstance.foods)
        .withContext('Expected all chips to be removed.')
        .toEqual([]);
      expect(document.activeElement).withContext('Expected input to be focused.').toBe(nativeInput);

      typeInElement(nativeInput, '123');
      fixture.detectChanges();
      dispatchKeyboardEvent(nativeInput, 'keydown', ENTER);
      fixture.detectChanges();
      tick();

      expect(document.activeElement)
        .withContext('Expected input to remain focused.')
        .toBe(nativeInput);
    }));

    it('should set aria-invalid if the form field is invalid', fakeAsync(() => {
      fixture.componentInstance.control = new FormControl('', [Validators.required]);
      fixture.changeDetectorRef.markForCheck();
      fixture.detectChanges();

      const input: HTMLInputElement = fixture.nativeElement.querySelector('input');

      expect(input.getAttribute('aria-invalid')).toBe('true');

      typeInElement(input, '123');
      fixture.detectChanges();
      dispatchKeyboardEvent(input, 'keydown', ENTER);
      fixture.detectChanges();
      flush();

      dispatchFakeEvent(input, 'blur');
      flush();

      fixture.detectChanges();
      expect(input.getAttribute('aria-invalid')).toBe('false');
    }));

    describe('when the input has focus', () => {
      beforeEach(() => {
        nativeInput.focus();
        expectNoCellFocused();
      });

      it('should not focus the last chip when pressing DELETE', () => {
        dispatchKeyboardEvent(nativeInput, 'keydown', DELETE);
        expectNoCellFocused();
      });

      it('should focus the last chip when pressing BACKSPACE when input is empty', () => {
        dispatchKeyboardEvent(nativeInput, 'keydown', BACKSPACE);
        expectLastCellFocused();
      });

      it('should not focus the last chip when the BACKSPACE key is being repeated', () => {
        // Only now should it focus the last element
        const event = createKeyboardEvent('keydown', BACKSPACE);
        Object.defineProperty(event, 'repeat', {
          get: () => true,
        });
        dispatchEvent(nativeInput, event);
        expectNoCellFocused();
      });

      it('should focus last chip after pressing BACKSPACE after creating a chip', () => {
        // Create a chip
        typeInElement(nativeInput, '123');
        dispatchKeyboardEvent(nativeInput, 'keydown', ENTER);

        expectNoCellFocused();

        dispatchKeyboardEvent(nativeInput, 'keydown', BACKSPACE);
        expectLastCellFocused();
      });
    });
  });

  describe('error messages', () => {
    let fixture: ComponentFixture<ChipGridWithFormErrorMessages>;
    let errorTestComponent: ChipGridWithFormErrorMessages;
    let containerEl: HTMLElement;
    let chipGridEl: HTMLElement;
    let inputEl: HTMLElement;

    beforeEach(fakeAsync(() => {
      fixture = createComponent(ChipGridWithFormErrorMessages);
      flush();
      fixture.detectChanges();

      errorTestComponent = fixture.componentInstance;
      containerEl = fixture.debugElement.query(By.css('mat-form-field'))!.nativeElement;
      chipGridEl = fixture.debugElement.query(By.css('mat-chip-grid'))!.nativeElement;
      inputEl = fixture.debugElement.query(By.css('input'))!.nativeElement;
    }));

    it('should not show any errors if the user has not interacted', () => {
      expect(errorTestComponent.formControl.untouched)
        .withContext('Expected untouched form control')
        .toBe(true);
      expect(containerEl.querySelectorAll('mat-error').length)
        .withContext('Expected no error message')
        .toBe(0);
      expect(chipGridEl.getAttribute('aria-invalid'))
        .withContext('Expected aria-invalid to be set to "false".')
        .toBe('false');
    });

    it('should display an error message when the grid is touched and invalid', fakeAsync(() => {
      expect(errorTestComponent.formControl.invalid)
        .withContext('Expected form control to be invalid')
        .toBe(true);
      expect(containerEl.querySelectorAll('mat-error').length)
        .withContext('Expected no error message')
        .toBe(0);

      errorTestComponent.formControl.markAsTouched();
      fixture.detectChanges();
      tick();

      expect(containerEl.classList)
        .withContext('Expected container to have the invalid CSS class.')
        .toContain('mat-form-field-invalid');
      expect(containerEl.querySelectorAll('mat-error').length)
        .withContext('Expected one error message to have been rendered.')
        .toBe(1);
      expect(chipGridEl.getAttribute('aria-invalid'))
        .withContext('Expected aria-invalid to be set to "true".')
        .toBe('true');
    }));

    it('should display an error message when the parent form is submitted', fakeAsync(() => {
      expect(errorTestComponent.form.submitted)
        .withContext('Expected form not to have been submitted')
        .toBe(false);
      expect(errorTestComponent.formControl.invalid)
        .withContext('Expected form control to be invalid')
        .toBe(true);
      expect(containerEl.querySelectorAll('mat-error').length)
        .withContext('Expected no error message')
        .toBe(0);

      dispatchFakeEvent(fixture.debugElement.query(By.css('form'))!.nativeElement, 'submit');
      flush();
      fixture.detectChanges();

      fixture.whenStable().then(() => {
        expect(errorTestComponent.form.submitted)
          .withContext('Expected form to have been submitted')
          .toBe(true);
        expect(containerEl.classList)
          .withContext('Expected container to have the invalid CSS class.')
          .toContain('mat-form-field-invalid');
        expect(containerEl.querySelectorAll('mat-error').length)
          .withContext('Expected one error message to have been rendered.')
          .toBe(1);
        expect(chipGridEl.getAttribute('aria-invalid'))
          .withContext('Expected aria-invalid to be set to "true".')
          .toBe('true');
      });
      flush();
    }));

    it('should hide the errors and show the hints once the chip grid becomes valid', fakeAsync(() => {
      errorTestComponent.formControl.markAsTouched();
      flush();
      fixture.detectChanges();

      fixture.whenStable().then(() => {
        expect(containerEl.classList)
          .withContext('Expected container to have the invalid CSS class.')
          .toContain('mat-form-field-invalid');
        expect(containerEl.querySelectorAll('mat-error').length)
          .withContext('Expected one error message to have been rendered.')
          .toBe(1);
        expect(containerEl.querySelectorAll('mat-hint').length)
          .withContext('Expected no hints to be shown.')
          .toBe(0);

        errorTestComponent.formControl.setValue('something');
        flush();
        fixture.detectChanges();

        fixture.whenStable().then(() => {
          expect(containerEl.classList).not.toContain(
            'mat-form-field-invalid',
            'Expected container not to have the invalid class when valid.',
          );
          expect(containerEl.querySelectorAll('mat-error').length)
            .withContext('Expected no error messages when the input is valid.')
            .toBe(0);
          expect(containerEl.querySelectorAll('mat-hint').length)
            .withContext('Expected one hint to be shown once the input is valid.')
            .toBe(1);
        });

        flush();
      });
    }));

    it('should set the proper aria-live attribute on the error messages', () => {
      errorTestComponent.formControl.markAsTouched();
      fixture.detectChanges();

      expect(
        containerEl.querySelector('[aria-live]:has(mat-error)')!.getAttribute('aria-live'),
      ).toBe('polite');
    });

    it('sets the aria-describedby on the input to reference errors when in error state', fakeAsync(() => {
      let hintId = fixture.debugElement
        .query(By.css('.mat-mdc-form-field-hint'))!
        .nativeElement.getAttribute('id');
      let describedBy = inputEl.getAttribute('aria-describedby');

      expect(hintId).withContext('hint should be shown').toBeTruthy();
      expect(describedBy).toBe(hintId);

      fixture.componentInstance.formControl.markAsTouched();
      fixture.detectChanges();

      // Flush the describedby timer and detect changes caused by it.
      flush();
      fixture.detectChanges();

      let errorIds = fixture.debugElement
        .queryAll(By.css('.mat-mdc-form-field-error'))
        .map(el => el.nativeElement.getAttribute('id'))
        .join(' ');
      let errorDescribedBy = inputEl.getAttribute('aria-describedby');

      expect(errorIds).withContext('errors should be shown').toBeTruthy();
      expect(errorDescribedBy).toBe(errorIds);
    }));
  });

  describe('chip with form control', () => {
    let fixture: ComponentFixture<ChipsFormControlUpdate>;
    let component: ChipsFormControlUpdate;
    let nativeInput: HTMLInputElement;
    let nativeButton: HTMLButtonElement;

    beforeEach(() => {
      fixture = createComponent(ChipsFormControlUpdate);
      component = fixture.componentInstance;
      nativeInput = fixture.nativeElement.querySelector('input');
      nativeButton = fixture.nativeElement.querySelector('button[id="save"]');
    });

    it('should update the form control value when pressed enter', fakeAsync(() => {
      nativeInput.value = 'hello';
      nativeInput.focus();
      fixture.detectChanges();

      dispatchKeyboardEvent(document.activeElement!, 'keydown', ENTER);
      fixture.detectChanges();
      flush();

      expect(component.keywordChipControl.value).not.toBeNull();
      expect(component.keywordChipControl.value.length).toBe(1);
      expect(nativeButton.disabled).toBeFalsy();

      nativeInput.value = 'how are you ?';
      nativeInput.focus();
      fixture.detectChanges();

      dispatchKeyboardEvent(document.activeElement!, 'keydown', ENTER);
      fixture.detectChanges();
      flush();

      expect(component.keywordChipControl.value.length).toBe(2);
    }));
  });

  function createComponent<T>(
    component: Type<T>,
    direction: Direction = 'ltr',
  ): ComponentFixture<T> {
    directionality = {
      value: direction,
      change: new EventEmitter<Direction>(),
    } as Directionality;

    TestBed.configureTestingModule({
      imports: [
        FormsModule,
        ReactiveFormsModule,
        MatChipsModule,
        MatFormFieldModule,
        MatInputModule,
        NoopAnimationsModule,
      ],
      providers: [{provide: Directionality, useValue: directionality}],
      declarations: [component],
    });

    const fixture = TestBed.createComponent<T>(component);
    fixture.detectChanges();

    chipGridDebugElement = fixture.debugElement.query(By.directive(MatChipGrid))!;
    chipGridNativeElement = chipGridDebugElement.nativeElement;
    chipGridInstance = chipGridDebugElement.componentInstance;
    testComponent = fixture.debugElement.componentInstance;
    chips = chipGridInstance._chips;
    primaryActions = chipGridNativeElement.querySelectorAll<HTMLElement>(
      '.mdc-evolution-chip__action--primary',
    );

    return fixture;
  }
});

@Component({
  template: `
    <mat-chip-grid [tabIndex]="tabIndex" [role]="role" #chipGrid>
      @for (i of chips; track i) {
        <mat-chip-row [editable]="editable">{{name}} {{i + 1}}</mat-chip-row>
      }
    </mat-chip-grid>
    <input name="test" [matChipInputFor]="chipGrid"/>`,
  standalone: false,
})
class StandardChipGrid {
  name: string = 'Test';
  tabIndex: number = 0;
  chips = [0, 1, 2, 3, 4];
  editable = false;
  role: string | null = null;
}

@Component({
  template: `
    <mat-form-field>
      <mat-label>Add a chip</mat-label>
      <mat-chip-grid #chipGrid>
        @for (chip of chips; track chip) {
          <mat-chip-row (removed)="remove(chip)">{{chip}}</mat-chip-row>
        }
      </mat-chip-grid>
      <input name="test" [matChipInputFor]="chipGrid"/>
    </mat-form-field>
  `,
  standalone: false,
})
class FormFieldChipGrid {
  chips = ['Chip 0', 'Chip 1', 'Chip 2'];

  remove(chip: string) {
    const index = this.chips.indexOf(chip);

    if (index > -1) {
      this.chips.splice(index, 1);
    }
  }
}

@Component({
  template: `
    <mat-form-field>
      <mat-label>New food...</mat-label>
      <mat-chip-grid #chipGrid placeholder="Food" [formControl]="control">
        @for (food of foods; track food) {
          <mat-chip-row [value]="food.value" (removed)="remove(food)">
            {{ food.viewValue }}
          </mat-chip-row>
        }
      </mat-chip-grid>
      <input
          [matChipInputFor]="chipGrid"
          [matChipInputSeparatorKeyCodes]="separatorKeyCodes"
          [matChipInputAddOnBlur]="addOnBlur"
          (matChipInputTokenEnd)="add($event)"/>
    </mat-form-field>
  `,
  standalone: false,
})
class InputChipGrid {
  foods: any[] = [
    {value: 'steak-0', viewValue: 'Steak'},
    {value: 'pizza-1', viewValue: 'Pizza'},
    {value: 'tacos-2', viewValue: 'Tacos', disabled: true},
    {value: 'sandwich-3', viewValue: 'Sandwich'},
    {value: 'chips-4', viewValue: 'Chips'},
    {value: 'eggs-5', viewValue: 'Eggs'},
    {value: 'pasta-6', viewValue: 'Pasta'},
    {value: 'sushi-7', viewValue: 'Sushi'},
  ];
  control = new FormControl<string | null>(null);

  separatorKeyCodes = [ENTER, SPACE];
  addOnBlur: boolean = true;

  add(event: MatChipInputEvent): void {
    const value = (event.value || '').trim();

    // Add our foods
    if (value) {
      this.foods.push({
        value: `${value.toLowerCase()}-${this.foods.length}`,
        viewValue: value,
      });
    }

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

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

    if (index > -1) {
      this.foods.splice(index, 1);
    }
  }

  @ViewChild(MatChipGrid) chipGrid: MatChipGrid;
  @ViewChildren(MatChipRow) chips: QueryList<MatChipRow>;
}

@Component({
  template: `
<form #form="ngForm" novalidate>
  <mat-form-field>
    <mat-chip-grid #chipGrid [formControl]="formControl">
      @for (food of foods; track food) {
        <mat-chip-row [value]="food.value">{{food.viewValue}}</mat-chip-row>
      }
    </mat-chip-grid>
    <input name="test" [matChipInputFor]="chipGrid"/>
    <mat-hint>Please select a chip, or type to add a new chip</mat-hint>
    <mat-error>Should have value</mat-error>
  </mat-form-field>
</form>
  `,
  standalone: false,
})
class ChipGridWithFormErrorMessages {
  foods: any[] = [
    {value: 0, viewValue: 'Steak'},
    {value: 1, viewValue: 'Pizza'},
    {value: 2, viewValue: 'Pasta'},
  ];
  @ViewChildren(MatChipRow) chips: QueryList<MatChipRow>;

  @ViewChild('form') form: NgForm;
  formControl = new FormControl('', Validators.required);

  private readonly _changeDetectorRef = inject(ChangeDetectorRef);

  constructor() {
    this.formControl.events.pipe(takeUntilDestroyed()).subscribe(() => {
      this._changeDetectorRef.markForCheck();
    });
  }
}

@Component({
  template: `
    <mat-form-field>
      <mat-chip-grid #chipGrid>
        @for (i of chips; track i) {
          <mat-chip-row [value]="i" (removed)="removeChip($event)">
            Chip {{i + 1}}
            <span matChipRemove>Remove</span>
          </mat-chip-row>
        }
      </mat-chip-grid>
      <input name="test" [matChipInputFor]="chipGrid"/>
    </mat-form-field>
  `,
  standalone: false,
})
class ChipGridWithRemove {
  chips = [0, 1, 2, 3, 4];

  removeChip(event: MatChipEvent) {
    this.chips.splice(event.chip.value, 1);
  }
}

@Component({
  template: `
<mat-form-field>
      <mat-label>Keywords</mat-label>
      <mat-chip-grid #chipGrid [formControl]="keywordChipControl">
      @for (keyword of keywords; track keyword) {
        <mat-chip-row>{{keyword}}</mat-chip-row>
      }
      </mat-chip-grid>
      <input placeholder="New keyword..." [matChipInputFor]="chipGrid" (matChipInputTokenEnd)="add($event)">
    </mat-form-field>
    <button id="save" [disabled]="!keywordChipControl.valid">Save</button>
    <button >Cancel</button>`,
  standalone: false,
})
class ChipsFormControlUpdate {
  keywords = new Array<string>();
  keywordChipControl = new FormControl();

  constructor() {
    this.keywordChipControl.setValidators(Validators.required);
  }

  add(event: MatChipInputEvent): void {
    const value = (event.value || '').trim();

    if (value) {
      this.keywords.push(value);
    }

    event.chipInput.clear();
  }
}