Skip to content

test: Convert material chips tests to zoneless #29238

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
merged 1 commit into from
Jun 13, 2024
Merged

test: Convert material chips tests to zoneless #29238

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
34 changes: 29 additions & 5 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 @@ -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
Open in desktop
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
Open in desktop
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
Loading