Skip to content

Commit

Permalink
test: Convert material chips tests to zoneless (#29238)
Browse files Browse the repository at this point in the history 
(cherry picked from commit 799d952)
  • Loading branch information
@mmalerba
mmalerba committed Jun 13, 2024
1 parent 9988ef2 commit 60d3317
Show file tree
Hide file tree
Showing 17 changed files with 175 additions and 118 deletions.
34 changes: 29 additions & 5 deletions src/material/chips/chip-grid.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,15 +20,17 @@ import {
typeInElement,
} from '@angular/cdk/testing/private';
import {
ChangeDetectorRef,
Component,
DebugElement,
EventEmitter,
QueryList,
Type,
ViewChild,
ViewChildren,
provideZoneChangeDetection,
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 '@angular/material/form-field';
Expand Down Expand Up @@ -70,11 +72,13 @@ describe('MDC-based MatChipGrid', () => {
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);
Expand All @@ -84,11 +88,13 @@ describe('MDC-based MatChipGrid', () => {
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();
Expand All @@ -98,13 +104,15 @@ describe('MDC-based MatChipGrid', () => {

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');
Expand Down Expand Up @@ -140,6 +148,7 @@ describe('MDC-based MatChipGrid', () => {
.toBe(false);

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

chipGridInstance.focus();
Expand All @@ -154,6 +163,7 @@ describe('MDC-based MatChipGrid', () => {
expect(chipGridNativeElement.getAttribute('tabindex')).toBe('0');

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

expect(chipGridNativeElement.getAttribute('tabindex')).toBe('-1');
Expand All @@ -168,6 +178,7 @@ describe('MDC-based MatChipGrid', () => {

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

// It focuses the 4th item
Expand All @@ -180,6 +191,7 @@ describe('MDC-based MatChipGrid', () => {

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

// It focuses the next-to-last item
Expand All @@ -196,6 +208,7 @@ describe('MDC-based MatChipGrid', () => {

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

Expand All @@ -205,12 +218,14 @@ describe('MDC-based MatChipGrid', () => {

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();
Expand Down Expand Up @@ -350,6 +365,7 @@ describe('MDC-based MatChipGrid', () => {

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

expect(chipGridInstance.tabIndex)
Expand Down Expand Up @@ -422,6 +438,7 @@ describe('MDC-based MatChipGrid', () => {

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();
Expand Down Expand Up @@ -572,6 +589,7 @@ describe('MDC-based MatChipGrid', () => {

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]');
Expand Down Expand Up @@ -756,6 +774,7 @@ describe('MDC-based MatChipGrid', () => {

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');
Expand Down Expand Up @@ -991,10 +1010,7 @@ describe('MDC-based MatChipGrid', () => {
MatInputModule,
animationsModule,
],
providers: [
{provide: Directionality, useValue: directionality},
provideZoneChangeDetection(),
],
providers: [{provide: Directionality, useValue: directionality}],
declarations: [component],
}).compileComponents();

Expand Down Expand Up @@ -1149,6 +1165,14 @@ class ChipGridWithFormErrorMessages {

@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({
Expand Down
20 changes: 15 additions & 5 deletions src/material/chips/chip-grid.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
* found in the LICENSE file at https://angular.io/license
*/

import {Directionality} from '@angular/cdk/bidi';
import {hasModifierKey, TAB} from '@angular/cdk/keycodes';
import {
AfterContentInit,
Expand All @@ -20,6 +21,7 @@ import {
EventEmitter,
Input,
OnDestroy,
OnInit,
Optional,
Output,
QueryList,
Expand All @@ -33,15 +35,14 @@ import {
NgForm,
Validators,
} from '@angular/forms';
import {ErrorStateMatcher, _ErrorStateTracker} from '@angular/material/core';
import {_ErrorStateTracker, ErrorStateMatcher} from '@angular/material/core';
import {MatFormFieldControl} from '@angular/material/form-field';
import {MatChipTextControl} from './chip-text-control';
import {Observable, Subject, merge} from 'rxjs';
import {merge, Observable, Subject} from 'rxjs';
import {takeUntil} from 'rxjs/operators';
import {MatChipEvent} from './chip';
import {MatChipRow} from './chip-row';
import {MatChipSet} from './chip-set';
import {Directionality} from '@angular/cdk/bidi';
import {MatChipTextControl} from './chip-text-control';

/** Change event object that is emitted when the chip grid value has changed. */
export class MatChipGridChange {
Expand Down Expand Up @@ -90,7 +91,8 @@ export class MatChipGrid
ControlValueAccessor,
DoCheck,
MatFormFieldControl<any>,
OnDestroy
OnDestroy,
OnInit
{
/**
* Implemented as part of MatFormFieldControl.
Expand Down Expand Up @@ -278,6 +280,14 @@ export class MatChipGrid
);
}

ngOnInit() {
if (this.ngControl) {
this.ngControl.control?.events.pipe(takeUntil(this._destroyed)).subscribe(() => {
this._changeDetectorRef.markForCheck();
});
}
}

ngAfterContentInit() {
this.chipBlurChanges.pipe(takeUntil(this._destroyed)).subscribe(() => {
this._blur();
Expand Down
16 changes: 8 additions & 8 deletions src/material/chips/chip-input.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@ import {Directionality} from '@angular/cdk/bidi';
import {COMMA, ENTER, TAB} from '@angular/cdk/keycodes';
import {PlatformModule} from '@angular/cdk/platform';
import {dispatchKeyboardEvent} from '@angular/cdk/testing/private';
import {Component, DebugElement, ViewChild, provideZoneChangeDetection} from '@angular/core';
import {waitForAsync, ComponentFixture, fakeAsync, TestBed, flush} from '@angular/core/testing';
import {Component, DebugElement, ViewChild} from '@angular/core';
import {ComponentFixture, TestBed, fakeAsync, flush, waitForAsync} from '@angular/core/testing';
import {MatFormFieldModule} from '@angular/material/form-field';
import {By} from '@angular/platform-browser';
import {NoopAnimationsModule} from '@angular/platform-browser/animations';
Expand All @@ -25,12 +25,6 @@ describe('MDC-based MatChipInput', () => {
let chipInputDirective: MatChipInput;
let dir = 'ltr';

beforeEach(() => {
TestBed.configureTestingModule({
providers: [provideZoneChangeDetection()],
});
});

beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
imports: [PlatformModule, MatChipsModule, MatFormFieldModule, NoopAnimationsModule],
Expand Down Expand Up @@ -77,6 +71,7 @@ describe('MDC-based MatChipInput', () => {
expect(inputNativeElement.hasAttribute('placeholder')).toBe(false);

testChipInput.placeholder = 'bound placeholder';
fixture.changeDetectorRef.markForCheck();
fixture.detectChanges();

expect(inputNativeElement.getAttribute('placeholder')).toBe('bound placeholder');
Expand All @@ -87,6 +82,7 @@ describe('MDC-based MatChipInput', () => {
expect(chipInputDirective.disabled).toBe(false);

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

expect(inputNativeElement.getAttribute('disabled')).toBe('true');
Expand All @@ -97,6 +93,7 @@ describe('MDC-based MatChipInput', () => {
expect(inputNativeElement.hasAttribute('aria-required')).toBe(false);

fixture.componentInstance.required = true;
fixture.changeDetectorRef.markForCheck();
fixture.detectChanges();

expect(inputNativeElement.getAttribute('aria-required')).toBe('true');
Expand All @@ -106,6 +103,7 @@ describe('MDC-based MatChipInput', () => {
expect(inputNativeElement.hasAttribute('required')).toBe(false);

fixture.componentInstance.required = true;
fixture.changeDetectorRef.markForCheck();
fixture.detectChanges();

expect(inputNativeElement.getAttribute('required')).toBe('true');
Expand Down Expand Up @@ -144,6 +142,7 @@ describe('MDC-based MatChipInput', () => {
spyOn(testChipInput, 'add');

testChipInput.addOnBlur = true;
fixture.changeDetectorRef.markForCheck();
fixture.detectChanges();

chipInputDirective._blur();
Expand All @@ -154,6 +153,7 @@ describe('MDC-based MatChipInput', () => {
spyOn(testChipInput, 'add');

testChipInput.addOnBlur = false;
fixture.changeDetectorRef.markForCheck();
fixture.detectChanges();

chipInputDirective._blur();
Expand Down
Loading

0 comments on commit 60d3317

Please sign in to comment.