From ae333968e4cffd08435d3153ff8d9b1d762c79cb Mon Sep 17 00:00:00 2001 From: Miles Malerba Date: Wed, 14 May 2025 00:55:28 +0000 Subject: [PATCH] test: fix invalid directionality providers --- .../directives/drop-list-shared.spec.ts | 59 ++++++------------- src/cdk/overlay/overlay-directives.spec.ts | 19 +++--- src/cdk/overlay/overlay.spec.ts | 20 +++---- src/cdk/testing/private/BUILD.bazel | 1 + .../testing/private/fake-directionality.ts | 38 ++++++++++++ src/cdk/testing/private/public-api.ts | 1 + src/cdk/tree/BUILD.bazel | 1 + src/cdk/tree/tree-with-tree-control.spec.ts | 29 +++++---- src/cdk/tree/tree.spec.ts | 29 +++++---- .../autocomplete/autocomplete.spec.ts | 20 +++---- src/material/chips/chip-grid.spec.ts | 24 ++++---- src/material/chips/chip-input.spec.ts | 22 ++----- src/material/chips/chip-listbox.spec.ts | 22 ++++--- src/material/chips/chip-option.spec.ts | 19 +++--- src/material/chips/chip-row.spec.ts | 15 +---- src/material/chips/chip.spec.ts | 15 +---- .../datepicker/calendar-header.spec.ts | 8 +-- src/material/datepicker/calendar.spec.ts | 6 +- .../datepicker/date-range-input.spec.ts | 18 ++---- src/material/datepicker/datepicker.spec.ts | 35 ++++------- src/material/datepicker/month-view.spec.ts | 21 ++++--- .../datepicker/multi-year-view.spec.ts | 20 ++++--- src/material/datepicker/year-view.spec.ts | 24 +++++--- src/material/grid-list/BUILD.bazel | 1 + src/material/grid-list/grid-list.spec.ts | 6 +- src/material/menu/menu.spec.ts | 41 ++++--------- src/material/select/select.spec.ts | 18 +++--- src/material/slider/slider.spec.ts | 24 +++----- src/material/stepper/stepper.spec.ts | 29 ++++----- src/material/tabs/tab-body.spec.ts | 21 ++++--- .../tabs/tab-nav-bar/tab-nav-bar.spec.ts | 17 +++--- src/material/tooltip/tooltip.spec.ts | 38 ++++++------ src/material/tooltip/tooltip.zone.spec.ts | 12 +--- 33 files changed, 305 insertions(+), 368 deletions(-) create mode 100644 src/cdk/testing/private/fake-directionality.ts diff --git a/src/cdk/drag-drop/directives/drop-list-shared.spec.ts b/src/cdk/drag-drop/directives/drop-list-shared.spec.ts index 20393fd6788a..a84fc9ebb63a 100644 --- a/src/cdk/drag-drop/directives/drop-list-shared.spec.ts +++ b/src/cdk/drag-drop/directives/drop-list-shared.spec.ts @@ -1,14 +1,3 @@ -import {Directionality} from '../../bidi'; -import {Platform, _supportsShadowDom} from '../../platform'; -import {CdkScrollable, ViewportRuler} from '../../scrolling'; -import { - createMouseEvent, - createTouchEvent, - dispatchEvent, - dispatchFakeEvent, - dispatchMouseEvent, - dispatchTouchEvent, -} from '../../testing/private'; import { AfterViewInit, ChangeDetectionStrategy, @@ -25,20 +14,33 @@ import { signal, } from '@angular/core'; import {ComponentFixture, TestBed, fakeAsync, flush, tick} from '@angular/core/testing'; -import {of as observableOf} from 'rxjs'; +import {Platform, _supportsShadowDom} from '../../platform'; +import {CdkScrollable, ViewportRuler} from '../../scrolling'; +import { + createMouseEvent, + createTouchEvent, + dispatchEvent, + dispatchFakeEvent, + dispatchMouseEvent, + dispatchTouchEvent, +} from '../../testing/private'; import {extendStyles} from '../dom/styling'; import {CdkDragDrop, CdkDragEnter, CdkDragStart} from '../drag-events'; import {DragRef, Point, PreviewContainer} from '../drag-ref'; import {moveItemInArray} from '../drag-utils'; +import {provideFakeDirectionality} from '@angular/cdk/testing/private/fake-directionality'; +import {NgClass, NgFor, NgIf, NgTemplateOutlet} from '@angular/common'; import {CDK_DRAG_CONFIG, DragAxis, DragDropConfig, DropListOrientation} from './config'; import {CdkDrag} from './drag'; +import {CdkDragPlaceholder} from './drag-placeholder'; +import {CdkDragPreview} from './drag-preview'; import {CdkDropList} from './drop-list'; import {CdkDropListGroup} from './drop-list-group'; import { - createComponent as _createComponent, DragDropTestConfig, + createComponent as _createComponent, continueDraggingViaTouch, dragElementViaMouse, makeScrollable, @@ -47,9 +49,6 @@ import { stopDraggingViaTouch, tickAnimationFrames, } from './test-utils.spec'; -import {NgClass, NgFor, NgIf, NgTemplateOutlet} from '@angular/common'; -import {CdkDragPreview} from './drag-preview'; -import {CdkDragPlaceholder} from './drag-placeholder'; export const ITEM_HEIGHT = 25; export const ITEM_WIDTH = 75; @@ -551,12 +550,7 @@ export function defineCommonDropListTests(config: { it('should dispatch the correct `dropped` event in RTL horizontal drop zone', fakeAsync(() => { const fixture = createComponent(DraggableInHorizontalDropZone, { - providers: [ - { - provide: Directionality, - useValue: {value: 'rtl', change: observableOf()}, - }, - ], + providers: [provideFakeDirectionality('rtl')], }); fixture.nativeElement.setAttribute('dir', 'rtl'); @@ -1200,12 +1194,7 @@ export function defineCommonDropListTests(config: { it('should pass the proper direction to the preview in rtl', fakeAsync(() => { const fixture = createComponent(DraggableInDropZone, { - providers: [ - { - provide: Directionality, - useValue: {value: 'rtl', change: observableOf()}, - }, - ], + providers: [provideFakeDirectionality('rtl')], }); fixture.detectChanges(); @@ -2500,12 +2489,7 @@ export function defineCommonDropListTests(config: { it('should auto-scroll right if the user holds their pointer at right edge in rtl', fakeAsync(() => { const fixture = createComponent(DraggableInScrollableHorizontalDropZone, { - providers: [ - { - provide: Directionality, - useValue: {value: 'rtl', change: observableOf()}, - }, - ], + providers: [provideFakeDirectionality('rtl')], }); fixture.nativeElement.setAttribute('dir', 'rtl'); fixture.detectChanges(); @@ -2529,12 +2513,7 @@ export function defineCommonDropListTests(config: { it('should auto-scroll left if the user holds their pointer at left edge in rtl', fakeAsync(() => { const fixture = createComponent(DraggableInScrollableHorizontalDropZone, { - providers: [ - { - provide: Directionality, - useValue: {value: 'rtl', change: observableOf()}, - }, - ], + providers: [provideFakeDirectionality('rtl')], }); fixture.nativeElement.setAttribute('dir', 'rtl'); fixture.detectChanges(); diff --git a/src/cdk/overlay/overlay-directives.spec.ts b/src/cdk/overlay/overlay-directives.spec.ts index 434b57500c77..1969e38e05ed 100644 --- a/src/cdk/overlay/overlay-directives.spec.ts +++ b/src/cdk/overlay/overlay-directives.spec.ts @@ -1,10 +1,11 @@ -import {Directionality} from '../bidi'; -import {A, ESCAPE} from '../keycodes'; -import {Component, ElementRef, Injector, ViewChild} from '@angular/core'; -import {ComponentFixture, TestBed, fakeAsync, tick, waitForAsync} from '@angular/core/testing'; +import {Component, ElementRef, Injector, signal, ViewChild, WritableSignal} from '@angular/core'; +import {ComponentFixture, fakeAsync, TestBed, tick, waitForAsync} from '@angular/core/testing'; import {By} from '@angular/platform-browser'; import {Subject} from 'rxjs'; +import {Direction} from '../bidi'; +import {A, ESCAPE} from '../keycodes'; import {createKeyboardEvent, dispatchEvent, dispatchKeyboardEvent} from '../testing/private'; +import {provideFakeDirectionality} from '../testing/private/fake-directionality'; import { CdkConnectedOverlay, CdkOverlayOrigin, @@ -27,14 +28,16 @@ import { describe('Overlay directives', () => { let overlayContainerElement: HTMLElement; let fixture: ComponentFixture; - let dir: {value: string}; + let dir: WritableSignal; let scrolledSubject = new Subject(); beforeEach(() => { + dir = signal('ltr'); + TestBed.configureTestingModule({ imports: [OverlayModule, ConnectedOverlayDirectiveTest, ConnectedOverlayPropertyInitOrder], providers: [ - {provide: Directionality, useFactory: () => (dir = {value: 'ltr'})}, + provideFakeDirectionality(dir), { provide: ScrollDispatcher, useFactory: () => ({ @@ -115,7 +118,7 @@ describe('Overlay directives', () => { }); it('should set and update the `dir` attribute', () => { - dir.value = 'rtl'; + dir.set('rtl'); fixture.componentInstance.isOpen = true; fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); @@ -130,7 +133,7 @@ describe('Overlay directives', () => { fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); - dir.value = 'ltr'; + dir.set('ltr'); fixture.componentInstance.isOpen = true; fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); diff --git a/src/cdk/overlay/overlay.spec.ts b/src/cdk/overlay/overlay.spec.ts index b723d2fe36f1..8d6740c1e254 100644 --- a/src/cdk/overlay/overlay.spec.ts +++ b/src/cdk/overlay/overlay.spec.ts @@ -9,7 +9,9 @@ import { Type, ViewChild, ViewContainerRef, + WritableSignal, inject, + signal, } from '@angular/core'; import { ComponentFixture, @@ -23,8 +25,8 @@ import {NoopAnimationsModule} from '@angular/platform-browser/animations'; import {Direction, Directionality} from '../bidi'; import {CdkPortal, ComponentPortal, TemplatePortal} from '../portal'; import {dispatchFakeEvent} from '../testing/private'; +import {provideFakeDirectionality} from '../testing/private/fake-directionality'; import { - createOverlayRef, Overlay, OverlayConfig, OverlayContainer, @@ -32,6 +34,7 @@ import { OverlayRef, PositionStrategy, ScrollStrategy, + createOverlayRef, } from './index'; describe('Overlay', () => { @@ -41,22 +44,15 @@ describe('Overlay', () => { let overlayContainerElement: HTMLElement; let overlayContainer: OverlayContainer; let viewContainerFixture: ComponentFixture; - let dir: Direction; + let dir: WritableSignal; let mockLocation: SpyLocation; function setup(imports: Type[] = []) { - dir = 'ltr'; + dir = signal('ltr'); TestBed.configureTestingModule({ imports: [OverlayModule, ...imports], providers: [ - { - provide: Directionality, - useFactory: () => { - const fakeDirectionality = {}; - Object.defineProperty(fakeDirectionality, 'value', {get: () => dir}); - return fakeDirectionality; - }, - }, + provideFakeDirectionality(dir), { provide: Location, useClass: SpyLocation, @@ -175,7 +171,7 @@ describe('Overlay', () => { }); it('should take the default direction from the global Directionality', () => { - dir = 'rtl'; + dir.set('rtl'); const overlayRef = createOverlayRef(injector); overlayRef.attach(componentPortal); diff --git a/src/cdk/testing/private/BUILD.bazel b/src/cdk/testing/private/BUILD.bazel index b6f2bc75385a..195295d4f470 100644 --- a/src/cdk/testing/private/BUILD.bazel +++ b/src/cdk/testing/private/BUILD.bazel @@ -12,6 +12,7 @@ ts_project( deps = [ "//:node_modules/@angular/core", "//:node_modules/@types/jasmine", + "//src/cdk/bidi", "//src/cdk/testing/testbed", ], ) diff --git a/src/cdk/testing/private/fake-directionality.ts b/src/cdk/testing/private/fake-directionality.ts new file mode 100644 index 000000000000..79410ea62e0e --- /dev/null +++ b/src/cdk/testing/private/fake-directionality.ts @@ -0,0 +1,38 @@ +/** + * @license + * Copyright Google LLC All Rights Reserved. + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://angular.dev/license + */ + +import {Direction, Directionality} from '@angular/cdk/bidi'; +import {EventEmitter, signal, WritableSignal} from '@angular/core'; +import {toObservable} from '@angular/core/rxjs-interop'; +import {skip} from 'rxjs/operators'; + +// Note: ngOnDestroy not needed, but must include it to match the Directionality interface. +// Implementing the interface ensures the fake stays in sync with the real API. +// tslint:disable-next-line:no-undecorated-class-with-angular-features lifecycle-hook-interface +class FakeDirectionality implements Directionality { + readonly change: EventEmitter; + + get value(): Direction { + return this.valueSignal(); + } + + constructor(readonly valueSignal: WritableSignal) { + this.change = toObservable(valueSignal).pipe(skip(1)) as EventEmitter; + } + + ngOnDestroy() {} +} + +export function provideFakeDirectionality(direction: Direction | WritableSignal) { + return { + provide: Directionality, + useFactory: () => + new FakeDirectionality(typeof direction === 'string' ? signal(direction) : direction), + deps: [], + }; +} diff --git a/src/cdk/testing/private/public-api.ts b/src/cdk/testing/private/public-api.ts index f853b686cbd2..5b973a376263 100644 --- a/src/cdk/testing/private/public-api.ts +++ b/src/cdk/testing/private/public-api.ts @@ -6,6 +6,7 @@ * found in the LICENSE file at https://angular.dev/license */ +export * from './fake-directionality'; export * from './text-dedent'; export * from './wrapped-error-message'; diff --git a/src/cdk/tree/BUILD.bazel b/src/cdk/tree/BUILD.bazel index 7f8e06db6fec..58ab2cd37775 100644 --- a/src/cdk/tree/BUILD.bazel +++ b/src/cdk/tree/BUILD.bazel @@ -41,6 +41,7 @@ ts_project( "//src/cdk/bidi", "//src/cdk/collections", "//src/cdk/keycodes", + "//src/cdk/testing/private", "//src/cdk/testing/testbed", ], ) diff --git a/src/cdk/tree/tree-with-tree-control.spec.ts b/src/cdk/tree/tree-with-tree-control.spec.ts index d74997773e4d..472776a7c991 100644 --- a/src/cdk/tree/tree-with-tree-control.spec.ts +++ b/src/cdk/tree/tree-with-tree-control.spec.ts @@ -5,27 +5,29 @@ * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://angular.dev/license */ -import {ComponentFixture, TestBed} from '@angular/core/testing'; import { Component, ErrorHandler, - ViewChild, + QueryList, + signal, TrackByFunction, Type, - EventEmitter, + ViewChild, ViewChildren, - QueryList, + WritableSignal, } from '@angular/core'; +import {ComponentFixture, TestBed} from '@angular/core/testing'; +import {BehaviorSubject, combineLatest, Observable} from 'rxjs'; +import {map} from 'rxjs/operators'; +import {Direction} from '../bidi'; import {CollectionViewer, DataSource} from '../collections'; -import {Directionality, Direction} from '../bidi'; import {createKeyboardEvent} from '../testing/testbed/fake-events'; -import {combineLatest, BehaviorSubject, Observable} from 'rxjs'; -import {map} from 'rxjs/operators'; -import {TreeControl} from './control/tree-control'; +import {provideFakeDirectionality} from '../testing/private/fake-directionality'; import {FlatTreeControl} from './control/flat-tree-control'; import {NestedTreeControl} from './control/nested-tree-control'; +import {TreeControl} from './control/tree-control'; import {CdkTreeModule, CdkTreeNodePadding} from './index'; import {CdkTree, CdkTreeNode} from './tree'; @@ -35,16 +37,14 @@ describe('CdkTree with TreeControl', () => { let dataSource: FakeDataSource; let treeElement: HTMLElement; let tree: CdkTree; - let dir: {value: Direction; readonly change: EventEmitter}; + let dir: WritableSignal; function configureCdkTreeTestingModule(declarations: Type[]) { + dir = signal('ltr'); TestBed.configureTestingModule({ imports: [CdkTreeModule], providers: [ - { - provide: Directionality, - useFactory: () => (dir = {value: 'ltr', change: new EventEmitter()}), - }, + provideFakeDirectionality(dir), // Custom error handler that re-throws the error. Errors happening within // change detection phase will be reported through the handler and thrown // in Ivy. Since we do not want to pollute the "console.error", but rather @@ -242,8 +242,7 @@ describe('CdkTree with TreeControl', () => { expect(node.style.paddingLeft).toBe('10px'); expect(node.style.paddingRight).toBeFalsy(); - dir.value = 'rtl'; - dir.change.emit('rtl'); + dir.set('rtl'); fixture.detectChanges(); expect(node.style.paddingRight).toBe('10px'); diff --git a/src/cdk/tree/tree.spec.ts b/src/cdk/tree/tree.spec.ts index b9d5dce285ab..8345af468459 100644 --- a/src/cdk/tree/tree.spec.ts +++ b/src/cdk/tree/tree.spec.ts @@ -5,29 +5,31 @@ * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://angular.dev/license */ -import {ComponentFixture, TestBed, fakeAsync, tick} from '@angular/core/testing'; import { ChangeDetectorRef, Component, + ElementRef, ErrorHandler, - EventEmitter, QueryList, TrackByFunction, Type, ViewChild, ViewChildren, + WritableSignal, inject, - ElementRef, + signal, } from '@angular/core'; +import {ComponentFixture, TestBed, fakeAsync, tick} from '@angular/core/testing'; -import {Direction, Directionality} from '../bidi'; -import {CollectionViewer, DataSource} from '../collections'; -import {combineLatest, BehaviorSubject, Observable, of} from 'rxjs'; +import {BehaviorSubject, Observable, combineLatest, of} from 'rxjs'; import {map} from 'rxjs/operators'; +import {Direction} from '../bidi'; +import {CollectionViewer, DataSource} from '../collections'; +import {provideFakeDirectionality} from '../testing/private/fake-directionality'; +import {createKeyboardEvent} from '../testing/testbed/fake-events'; import {CdkTreeModule, CdkTreeNodePadding} from './index'; import {CdkTree, CdkTreeNode} from './tree'; -import {createKeyboardEvent} from '../testing/testbed/fake-events'; /** * This is a cloned version of `tree.spec.ts` that contains all the same tests, @@ -39,16 +41,14 @@ describe('CdkTree', () => { let dataSource: FakeDataSource; let treeElement: HTMLElement; let tree: CdkTree; - let dir: {value: Direction; readonly change: EventEmitter}; + let dir: WritableSignal; function configureCdkTreeTestingModule(declarations: Type[]) { + dir = signal('ltr'); TestBed.configureTestingModule({ imports: [CdkTreeModule], providers: [ - { - provide: Directionality, - useFactory: () => (dir = {value: 'ltr', change: new EventEmitter()}), - }, + provideFakeDirectionality(dir), // Custom error handler that re-throws the error. Errors happening within // change detection phase will be reported through the handler and thrown // in Ivy. Since we do not want to pollute the "console.error", but rather @@ -237,7 +237,7 @@ describe('CdkTree', () => { ); }); - it('should reset element.styel to the opposite direction padding if the direction changes', () => { + it('should reset element.style to the opposite direction padding if the direction changes', () => { const node = getNodes(treeElement)[0]; component.indent = 10; @@ -247,8 +247,7 @@ describe('CdkTree', () => { expect(node.style.paddingLeft).toBe('10px'); expect(node.style.paddingRight).toBeFalsy(); - dir.value = 'rtl'; - dir.change.emit('rtl'); + dir.set('rtl'); fixture.detectChanges(); expect(node.style.paddingRight).toBe('10px'); diff --git a/src/material/autocomplete/autocomplete.spec.ts b/src/material/autocomplete/autocomplete.spec.ts index 2370dcd377a8..369b5f66f922 100644 --- a/src/material/autocomplete/autocomplete.spec.ts +++ b/src/material/autocomplete/autocomplete.spec.ts @@ -1,6 +1,6 @@ -import {Directionality} from '@angular/cdk/bidi'; +import {Direction} from '@angular/cdk/bidi'; import {DOWN_ARROW, ENTER, ESCAPE, SPACE, TAB, UP_ARROW} from '@angular/cdk/keycodes'; -import {createCloseScrollStrategy, OverlayContainer, OverlayModule} from '@angular/cdk/overlay'; +import {OverlayContainer, OverlayModule, createCloseScrollStrategy} from '@angular/cdk/overlay'; import {_supportsShadowDom} from '@angular/cdk/platform'; import {ScrollDispatcher} from '@angular/cdk/scrolling'; import { @@ -10,6 +10,7 @@ import { dispatchFakeEvent, dispatchKeyboardEvent, dispatchMouseEvent, + provideFakeDirectionality, typeInElement, } from '@angular/cdk/testing/private'; import { @@ -25,6 +26,7 @@ import { ViewChild, ViewChildren, ViewEncapsulation, + signal, } from '@angular/core'; import { ComponentFixture, @@ -36,7 +38,7 @@ import { } from '@angular/core/testing'; import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms'; import {By} from '@angular/platform-browser'; -import {EMPTY, Observable, Subject, Subscription} from 'rxjs'; +import {Observable, Subject, Subscription} from 'rxjs'; import {map, startWith} from 'rxjs/operators'; import {MATERIAL_ANIMATIONS, MatOption, MatOptionSelectionChange} from '../core'; import {MatFormField, MatFormFieldModule} from '../form-field'; @@ -634,9 +636,7 @@ describe('MatAutocomplete', () => { })); it('should have the correct text direction in RTL', () => { - const rtlFixture = createComponent(SimpleAutocomplete, [ - {provide: Directionality, useFactory: () => ({value: 'rtl', change: EMPTY})}, - ]); + const rtlFixture = createComponent(SimpleAutocomplete, [provideFakeDirectionality('rtl')]); rtlFixture.detectChanges(); rtlFixture.componentInstance.trigger.openPanel(); @@ -649,10 +649,8 @@ describe('MatAutocomplete', () => { }); it('should update the panel direction if it changes for the trigger', () => { - const dirProvider = {value: 'rtl', change: EMPTY}; - const rtlFixture = createComponent(SimpleAutocomplete, [ - {provide: Directionality, useFactory: () => dirProvider}, - ]); + const dir = signal('rtl'); + const rtlFixture = createComponent(SimpleAutocomplete, [provideFakeDirectionality(dir)]); rtlFixture.detectChanges(); rtlFixture.componentInstance.trigger.openPanel(); @@ -666,7 +664,7 @@ describe('MatAutocomplete', () => { rtlFixture.componentInstance.trigger.closePanel(); rtlFixture.detectChanges(); - dirProvider.value = 'ltr'; + dir.set('ltr'); rtlFixture.componentInstance.trigger.openPanel(); rtlFixture.detectChanges(); diff --git a/src/material/chips/chip-grid.spec.ts b/src/material/chips/chip-grid.spec.ts index 476d19ef4c50..92659883278a 100644 --- a/src/material/chips/chip-grid.spec.ts +++ b/src/material/chips/chip-grid.spec.ts @@ -1,4 +1,4 @@ -import {Direction, Directionality} from '@angular/cdk/bidi'; +import {Direction} from '@angular/cdk/bidi'; import { BACKSPACE, DELETE, @@ -18,28 +18,30 @@ import { dispatchFakeEvent, dispatchKeyboardEvent, patchElementFocus, + provideFakeDirectionality, typeInElement, } from '@angular/cdk/testing/private'; import { ChangeDetectorRef, Component, DebugElement, - EventEmitter, QueryList, Type, ViewChild, ViewChildren, + WritableSignal, inject, + signal, } 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 {By} from '@angular/platform-browser'; +import {NoopAnimationsModule} from '@angular/platform-browser/animations'; +import {MATERIAL_ANIMATIONS} from '../core'; import {MatFormFieldModule} from '../form-field'; import {MatInputModule} from '../input'; -import {By} from '@angular/platform-browser'; import {MatChipEvent, MatChipGrid, MatChipInputEvent, MatChipRow, MatChipsModule} from './index'; -import {MATERIAL_ANIMATIONS} from '../core'; -import {NoopAnimationsModule} from '@angular/platform-browser/animations'; describe('MatChipGrid', () => { let chipGridDebugElement: DebugElement; @@ -47,7 +49,7 @@ describe('MatChipGrid', () => { let chipGridInstance: MatChipGrid; let chips: QueryList; let testComponent: StandardChipGrid; - let directionality: {value: Direction; change: EventEmitter}; + let directionality: WritableSignal; let primaryActions: NodeListOf; const expectNoCellFocused = () => { @@ -441,8 +443,7 @@ describe('MatChipGrid', () => { expect(document.activeElement).toBe(primaryActions[1]); - directionality.value = 'rtl'; - directionality.change.next('rtl'); + directionality.set('rtl'); fixture.detectChanges(); dispatchKeyboardEvent(primaryActions[1], 'keydown', RIGHT_ARROW); @@ -1024,10 +1025,7 @@ describe('MatChipGrid', () => { direction: Direction = 'ltr', additionalImports: Type[] = [], ): ComponentFixture { - directionality = { - value: direction, - change: new EventEmitter(), - } as Directionality; + directionality = signal(direction); TestBed.configureTestingModule({ imports: [ @@ -1039,7 +1037,7 @@ describe('MatChipGrid', () => { ...additionalImports, ], providers: [ - {provide: Directionality, useValue: directionality}, + provideFakeDirectionality(directionality), {provide: MATERIAL_ANIMATIONS, useValue: {animationsDisabled: true}}, ], declarations: [component], diff --git a/src/material/chips/chip-input.spec.ts b/src/material/chips/chip-input.spec.ts index efc62a96fd40..99bedfec2539 100644 --- a/src/material/chips/chip-input.spec.ts +++ b/src/material/chips/chip-input.spec.ts @@ -1,16 +1,16 @@ -import {Directionality} from '@angular/cdk/bidi'; import {COMMA, ENTER, TAB} from '@angular/cdk/keycodes'; import {PlatformModule} from '@angular/cdk/platform'; import { createKeyboardEvent, - dispatchKeyboardEvent, dispatchEvent, + dispatchKeyboardEvent, + provideFakeDirectionality, } from '@angular/cdk/testing/private'; import {Component, DebugElement, ViewChild} from '@angular/core'; -import {ComponentFixture, TestBed, fakeAsync, flush, waitForAsync} from '@angular/core/testing'; -import {MatFormFieldModule} from '../form-field'; +import {ComponentFixture, fakeAsync, flush, TestBed, waitForAsync} from '@angular/core/testing'; import {By} from '@angular/platform-browser'; -import {Subject} from 'rxjs'; +import {MATERIAL_ANIMATIONS} from '../core'; +import {MatFormFieldModule} from '../form-field'; import { MAT_CHIPS_DEFAULT_OPTIONS, MatChipGrid, @@ -19,7 +19,6 @@ import { MatChipsDefaultOptions, MatChipsModule, } from './index'; -import {MATERIAL_ANIMATIONS} from '../core'; describe('MatChipInput', () => { let fixture: ComponentFixture; @@ -27,21 +26,12 @@ describe('MatChipInput', () => { let inputDebugElement: DebugElement; let inputNativeElement: HTMLInputElement; let chipInputDirective: MatChipInput; - let dir = 'ltr'; beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [PlatformModule, MatChipsModule, MatFormFieldModule], providers: [ - { - provide: Directionality, - useFactory: () => { - return { - value: dir.toLowerCase(), - change: new Subject(), - }; - }, - }, + provideFakeDirectionality('ltr'), {provide: MATERIAL_ANIMATIONS, useValue: {animationsDisabled: true}}, ], declarations: [TestChipInput], diff --git a/src/material/chips/chip-listbox.spec.ts b/src/material/chips/chip-listbox.spec.ts index 6a0f4d610fbd..9fe8faf05c00 100644 --- a/src/material/chips/chip-listbox.spec.ts +++ b/src/material/chips/chip-listbox.spec.ts @@ -1,25 +1,27 @@ -import {Direction, Directionality} from '@angular/cdk/bidi'; +import {Direction} from '@angular/cdk/bidi'; import {END, HOME, LEFT_ARROW, RIGHT_ARROW, SPACE, TAB} from '@angular/cdk/keycodes'; import { dispatchFakeEvent, dispatchKeyboardEvent, patchElementFocus, + provideFakeDirectionality, } from '@angular/cdk/testing/private'; import { Component, DebugElement, - EventEmitter, QueryList, + signal, Type, ViewChild, ViewChildren, + WritableSignal, } from '@angular/core'; -import {ComponentFixture, TestBed, fakeAsync, flush, tick} from '@angular/core/testing'; +import {ComponentFixture, fakeAsync, flush, TestBed, tick} from '@angular/core/testing'; import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms'; import {By} from '@angular/platform-browser'; -import {MatChipListbox, MatChipOption, MatChipsModule} from './index'; import {asyncScheduler, BehaviorSubject, Observable} from 'rxjs'; import {observeOn} from 'rxjs/operators'; +import {MatChipListbox, MatChipOption, MatChipsModule} from './index'; describe('MatChipListbox', () => { let fixture: ComponentFixture; @@ -28,7 +30,7 @@ describe('MatChipListbox', () => { let chipListboxInstance: MatChipListbox; let testComponent: StandardChipListbox; let chips: QueryList; - let directionality: {value: Direction; change: EventEmitter}; + let directionality: WritableSignal; let primaryActions: NodeListOf; describe('StandardChipList', () => { @@ -424,8 +426,7 @@ describe('MatChipListbox', () => { expect(document.activeElement).toBe(primaryActions[1]); - directionality.value = 'rtl'; - directionality.change.next('rtl'); + directionality.set('rtl'); fixture.detectChanges(); dispatchKeyboardEvent(primaryActions[1], 'keydown', RIGHT_ARROW); @@ -926,14 +927,11 @@ describe('MatChipListbox', () => { direction: Direction = 'ltr', beforeInitialChangeDetection?: (fixture: ComponentFixture) => void, ): ComponentFixture { - directionality = { - value: direction, - change: new EventEmitter(), - }; + directionality = signal(direction); TestBed.configureTestingModule({ imports: [FormsModule, ReactiveFormsModule, MatChipsModule], - providers: [{provide: Directionality, useValue: directionality}], + providers: [provideFakeDirectionality(directionality)], declarations: [component], }); diff --git a/src/material/chips/chip-option.spec.ts b/src/material/chips/chip-option.spec.ts index 582482acff81..f8dfb891ef57 100644 --- a/src/material/chips/chip-option.spec.ts +++ b/src/material/chips/chip-option.spec.ts @@ -1,11 +1,13 @@ -import {Directionality} from '@angular/cdk/bidi'; import {ENTER, SPACE} from '@angular/cdk/keycodes'; -import {dispatchFakeEvent, dispatchKeyboardEvent} from '@angular/cdk/testing/private'; +import { + dispatchFakeEvent, + dispatchKeyboardEvent, + provideFakeDirectionality, +} from '@angular/cdk/testing/private'; import {Component, DebugElement, ViewChild} from '@angular/core'; import {ComponentFixture, TestBed, fakeAsync, flush, waitForAsync} from '@angular/core/testing'; -import {MAT_RIPPLE_GLOBAL_OPTIONS, RippleGlobalOptions} from '../core'; import {By} from '@angular/platform-browser'; -import {Subject} from 'rxjs'; +import {MAT_RIPPLE_GLOBAL_OPTIONS, RippleGlobalOptions} from '../core'; import { MAT_CHIPS_DEFAULT_OPTIONS, MatChipEvent, @@ -23,7 +25,6 @@ describe('Option Chips', () => { let primaryAction: HTMLElement; let chipInstance: MatChipOption; let globalRippleOptions: RippleGlobalOptions; - let dir = 'ltr'; let hideSingleSelectionIndicator: boolean | undefined; @@ -38,13 +39,7 @@ describe('Option Chips', () => { imports: [MatChipsModule], providers: [ {provide: MAT_RIPPLE_GLOBAL_OPTIONS, useFactory: () => globalRippleOptions}, - { - provide: Directionality, - useFactory: () => ({ - value: dir, - change: new Subject(), - }), - }, + provideFakeDirectionality('ltr'), {provide: MAT_CHIPS_DEFAULT_OPTIONS, useFactory: () => defaultOptions}, ], declarations: [SingleChip], diff --git a/src/material/chips/chip-row.spec.ts b/src/material/chips/chip-row.spec.ts index 57f55050a712..08d957d65896 100644 --- a/src/material/chips/chip-row.spec.ts +++ b/src/material/chips/chip-row.spec.ts @@ -1,15 +1,14 @@ -import {Directionality} from '@angular/cdk/bidi'; import {BACKSPACE, DELETE, ENTER, SPACE} from '@angular/cdk/keycodes'; import { createKeyboardEvent, dispatchEvent, dispatchFakeEvent, dispatchKeyboardEvent, + provideFakeDirectionality, } from '@angular/cdk/testing/private'; import {Component, DebugElement, ElementRef, ViewChild} from '@angular/core'; import {ComponentFixture, TestBed, fakeAsync, flush, waitForAsync} from '@angular/core/testing'; import {By} from '@angular/platform-browser'; -import {Subject} from 'rxjs'; import { MatChipEditInput, MatChipEditedEvent, @@ -25,20 +24,10 @@ describe('Row Chips', () => { let chipNativeElement: HTMLElement; let chipInstance: MatChipRow; - let dir = 'ltr'; - beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [MatChipsModule, SingleChip], - providers: [ - { - provide: Directionality, - useFactory: () => ({ - value: dir, - change: new Subject(), - }), - }, - ], + providers: [provideFakeDirectionality('ltr')], }); })); diff --git a/src/material/chips/chip.spec.ts b/src/material/chips/chip.spec.ts index 35b54129637a..b9748576396d 100644 --- a/src/material/chips/chip.spec.ts +++ b/src/material/chips/chip.spec.ts @@ -1,8 +1,7 @@ -import {Directionality} from '@angular/cdk/bidi'; +import {provideFakeDirectionality} from '@angular/cdk/testing/private'; import {Component, DebugElement, ViewChild} from '@angular/core'; import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing'; import {By} from '@angular/platform-browser'; -import {Subject} from 'rxjs'; import {MatChip, MatChipEvent, MatChipSet, MatChipsModule} from './index'; describe('MatChip', () => { @@ -11,8 +10,6 @@ describe('MatChip', () => { let chipNativeElement: HTMLElement; let chipInstance: MatChip; - let dir = 'ltr'; - beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ @@ -22,15 +19,7 @@ describe('MatChip', () => { BasicChipWithStaticTabindex, BasicChipWithBoundTabindex, ], - providers: [ - { - provide: Directionality, - useFactory: () => ({ - value: dir, - change: new Subject(), - }), - }, - ], + providers: [provideFakeDirectionality('ltr')], }); })); diff --git a/src/material/datepicker/calendar-header.spec.ts b/src/material/datepicker/calendar-header.spec.ts index c053e0ac453f..8b67d0d079e4 100644 --- a/src/material/datepicker/calendar-header.spec.ts +++ b/src/material/datepicker/calendar-header.spec.ts @@ -1,9 +1,9 @@ -import {Directionality} from '@angular/cdk/bidi'; +import {provideFakeDirectionality} from '@angular/cdk/testing/private'; import {Component} from '@angular/core'; import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing'; -import {MatNativeDateModule, DateAdapter} from '../core'; -import {DEC, FEB, JAN} from '../testing'; import {By} from '@angular/platform-browser'; +import {DateAdapter, MatNativeDateModule} from '../core'; +import {DEC, FEB, JAN} from '../testing'; import {MatCalendar} from './calendar'; import {MatDatepickerIntl} from './datepicker-intl'; import {MatDatepickerModule} from './datepicker-module'; @@ -19,7 +19,7 @@ describe('MatCalendarHeader', () => { StandardCalendar, CalendarWithMinMaxDate, ], - providers: [MatDatepickerIntl, {provide: Directionality, useFactory: () => ({value: 'ltr'})}], + providers: [MatDatepickerIntl, provideFakeDirectionality('ltr')], }); })); diff --git a/src/material/datepicker/calendar.spec.ts b/src/material/datepicker/calendar.spec.ts index f9a4244f20df..ecf594ae1003 100644 --- a/src/material/datepicker/calendar.spec.ts +++ b/src/material/datepicker/calendar.spec.ts @@ -1,14 +1,14 @@ -import {Directionality} from '@angular/cdk/bidi'; import {ENTER, RIGHT_ARROW, SPACE} from '@angular/cdk/keycodes'; import { dispatchFakeEvent, dispatchKeyboardEvent, dispatchMouseEvent, + provideFakeDirectionality, } from '@angular/cdk/testing/private'; import {Component, provideCheckNoChangesConfig} from '@angular/core'; import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing'; -import {DateAdapter, MatNativeDateModule} from '../core'; import {By} from '@angular/platform-browser'; +import {DateAdapter, MatNativeDateModule} from '../core'; import {DEC, FEB, JAN, JUL, NOV} from '../testing'; import {MatCalendar} from './calendar'; import {MatDatepickerIntl} from './datepicker-intl'; @@ -23,7 +23,7 @@ describe('MatCalendar', () => { imports: [MatNativeDateModule, MatDatepickerModule], providers: [ MatDatepickerIntl, - {provide: Directionality, useFactory: () => ({value: 'ltr'})}, + provideFakeDirectionality('ltr'), provideCheckNoChangesConfig({exhaustive: false}), ], declarations: [ diff --git a/src/material/datepicker/date-range-input.spec.ts b/src/material/datepicker/date-range-input.spec.ts index 169ce44f5304..c3baba3cf451 100644 --- a/src/material/datepicker/date-range-input.spec.ts +++ b/src/material/datepicker/date-range-input.spec.ts @@ -1,15 +1,17 @@ import {FocusMonitor} from '@angular/cdk/a11y'; -import {Direction, Directionality} from '@angular/cdk/bidi'; import {BACKSPACE, LEFT_ARROW, RIGHT_ARROW} from '@angular/cdk/keycodes'; import {OverlayContainer} from '@angular/cdk/overlay'; -import {dispatchFakeEvent, dispatchKeyboardEvent} from '@angular/cdk/testing/private'; +import { + dispatchFakeEvent, + dispatchKeyboardEvent, + provideFakeDirectionality, +} from '@angular/cdk/testing/private'; import { Component, Directive, ElementRef, provideCheckNoChangesConfig, Provider, - signal, Type, ViewChild, } from '@angular/core'; @@ -839,15 +841,7 @@ describe('MatDateRangeInput', () => { }); it('moves focus between fields with arrow keys when cursor is at edge (RTL)', () => { - class RTL extends Directionality { - override readonly valueSignal = signal('rtl'); - } - const fixture = createComponent(StandardRangePicker, [ - { - provide: Directionality, - useFactory: () => new RTL(null), - }, - ]); + const fixture = createComponent(StandardRangePicker, [provideFakeDirectionality('rtl')]); fixture.detectChanges(); const {start, end} = fixture.componentInstance; diff --git a/src/material/datepicker/datepicker.spec.ts b/src/material/datepicker/datepicker.spec.ts index 5991d9cc51cd..9f3896b1de56 100644 --- a/src/material/datepicker/datepicker.spec.ts +++ b/src/material/datepicker/datepicker.spec.ts @@ -1,4 +1,4 @@ -import {Directionality} from '@angular/cdk/bidi'; +import {Direction} from '@angular/cdk/bidi'; import { DOWN_ARROW, ENTER, @@ -18,6 +18,7 @@ import { dispatchFakeEvent, dispatchKeyboardEvent, dispatchMouseEvent, + provideFakeDirectionality, typeInElement, } from '@angular/cdk/testing/private'; import { @@ -28,6 +29,7 @@ import { Type, ViewChild, ViewEncapsulation, + signal, } from '@angular/core'; import {ComponentFixture, TestBed, fakeAsync, flush, tick} from '@angular/core/testing'; import { @@ -38,11 +40,11 @@ import { ReactiveFormsModule, Validator, } from '@angular/forms'; -import {MAT_DATE_LOCALE, MATERIAL_ANIMATIONS, MatNativeDateModule, NativeDateModule} from '../core'; -import {MatFormField, MatFormFieldModule} from '../form-field'; -import {MatInputModule} from '../input'; import {By} from '@angular/platform-browser'; import {Subject} from 'rxjs'; +import {MATERIAL_ANIMATIONS, MAT_DATE_LOCALE, MatNativeDateModule, NativeDateModule} from '../core'; +import {MatFormField, MatFormFieldModule} from '../form-field'; +import {MatInputModule} from '../input'; import {DEC, JAN, JUL, JUN, SEP} from '../testing'; import {MatDatepicker} from './datepicker'; import {DatepickerDropdownPositionX, DatepickerDropdownPositionY} from './datepicker-base'; @@ -2085,12 +2087,7 @@ describe('MatDatepicker', () => { const fixture = createComponent( StandardDatepicker, [MatNativeDateModule], - [ - { - provide: Directionality, - useValue: {value: 'rtl'}, - }, - ], + [provideFakeDirectionality('rtl')], ); fixture.detectChanges(); @@ -2104,16 +2101,11 @@ describe('MatDatepicker', () => { })); it('should update the popup direction if the directionality value changes', fakeAsync(() => { - const dirProvider = {value: 'ltr'}; + const dir = signal('ltr'); const fixture = createComponent( StandardDatepicker, [MatNativeDateModule], - [ - { - provide: Directionality, - useFactory: () => dirProvider, - }, - ], + [provideFakeDirectionality(dir)], ); fixture.detectChanges(); @@ -2129,7 +2121,7 @@ describe('MatDatepicker', () => { fixture.detectChanges(); flush(); - dirProvider.value = 'rtl'; + dir.set('rtl'); fixture.componentInstance.datepicker.open(); fixture.detectChanges(); tick(); @@ -2143,12 +2135,7 @@ describe('MatDatepicker', () => { const fixture = createComponent( StandardDatepicker, [MatNativeDateModule], - [ - { - provide: Directionality, - useValue: {value: 'rtl'}, - }, - ], + [provideFakeDirectionality('rtl')], ); fixture.componentInstance.touch = true; diff --git a/src/material/datepicker/month-view.spec.ts b/src/material/datepicker/month-view.spec.ts index 3d4ccf41f4b2..acd0bbe82c79 100644 --- a/src/material/datepicker/month-view.spec.ts +++ b/src/material/datepicker/month-view.spec.ts @@ -1,4 +1,4 @@ -import {Direction, Directionality} from '@angular/cdk/bidi'; +import {Direction} from '@angular/cdk/bidi'; import { DOWN_ARROW, END, @@ -18,11 +18,12 @@ import { dispatchFakeEvent, dispatchKeyboardEvent, dispatchMouseEvent, + provideFakeDirectionality, } from '@angular/cdk/testing/private'; -import {Component} from '@angular/core'; +import {Component, signal, WritableSignal} from '@angular/core'; import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing'; -import {MAT_DATE_FORMATS, MatNativeDateModule} from '../core'; import {By} from '@angular/platform-browser'; +import {MAT_DATE_FORMATS, MatNativeDateModule} from '../core'; import {DEC, FEB, JAN, MAR, NOV} from '../testing'; import {MatCalendarBody, MatCalendarUserEvent} from './calendar-body'; import { @@ -34,9 +35,11 @@ import {MatMonthView} from './month-view'; describe('MatMonthView', () => { describe('standard providers', () => { - let dir: {value: Direction}; + let dir: WritableSignal; beforeEach(waitForAsync(() => { + dir = signal('ltr'); + TestBed.configureTestingModule({ imports: [ MatNativeDateModule, @@ -48,7 +51,7 @@ describe('MatMonthView', () => { MonthViewWithDateClass, ], providers: [ - {provide: Directionality, useFactory: () => (dir = {value: 'ltr'})}, + provideFakeDirectionality(dir), {provide: MAT_DATE_RANGE_SELECTION_STRATEGY, useClass: DefaultMatCalendarRangeStrategy}, ], }); @@ -264,7 +267,7 @@ describe('MatMonthView', () => { '.mat-calendar-body', ) as HTMLElement; expect(calendarBodyEl).not.toBeNull(); - dir.value = 'ltr'; + dir.set('ltr'); fixture.componentInstance.date = new Date(2017, JAN, 5); fixture.changeDetectorRef.markForCheck(); dispatchFakeEvent(calendarBodyEl, 'focus'); @@ -287,7 +290,7 @@ describe('MatMonthView', () => { }); it('should increment date on left arrow press in rtl', () => { - dir.value = 'rtl'; + dir.set('rtl'); dispatchKeyboardEvent(calendarBodyEl, 'keydown', LEFT_ARROW); fixture.detectChanges(); @@ -313,7 +316,7 @@ describe('MatMonthView', () => { }); it('should decrement date on right arrow press in rtl', () => { - dir.value = 'rtl'; + dir.set('rtl'); dispatchKeyboardEvent(calendarBodyEl, 'keydown', RIGHT_ARROW); fixture.detectChanges(); @@ -813,7 +816,7 @@ describe('MatMonthView', () => { MonthViewWithDateClass, ], providers: [ - {provide: Directionality, useFactory: () => ({value: 'ltr'})}, + provideFakeDirectionality('ltr'), {provide: MAT_DATE_RANGE_SELECTION_STRATEGY, useClass: DefaultMatCalendarRangeStrategy}, { provide: MAT_DATE_FORMATS, diff --git a/src/material/datepicker/multi-year-view.spec.ts b/src/material/datepicker/multi-year-view.spec.ts index 7228dc7d2796..ac12a39cb30c 100644 --- a/src/material/datepicker/multi-year-view.spec.ts +++ b/src/material/datepicker/multi-year-view.spec.ts @@ -1,4 +1,4 @@ -import {Direction, Directionality} from '@angular/cdk/bidi'; +import {Direction} from '@angular/cdk/bidi'; import { DOWN_ARROW, END, @@ -9,19 +9,25 @@ import { RIGHT_ARROW, UP_ARROW, } from '@angular/cdk/keycodes'; -import {dispatchFakeEvent, dispatchKeyboardEvent} from '@angular/cdk/testing/private'; -import {Component, ViewChild} from '@angular/core'; +import { + dispatchFakeEvent, + dispatchKeyboardEvent, + provideFakeDirectionality, +} from '@angular/cdk/testing/private'; +import {Component, signal, ViewChild, WritableSignal} from '@angular/core'; import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing'; -import {MatNativeDateModule} from '../core'; import {By} from '@angular/platform-browser'; +import {MatNativeDateModule} from '../core'; import {JAN, MAR} from '../testing'; import {MatCalendarBody} from './calendar-body'; import {MatMultiYearView, yearsPerPage, yearsPerRow} from './multi-year-view'; describe('MatMultiYearView', () => { - let dir: {value: Direction}; + let dir: WritableSignal; beforeEach(waitForAsync(() => { + dir = signal('ltr'); + TestBed.configureTestingModule({ imports: [ MatNativeDateModule, @@ -33,7 +39,7 @@ describe('MatMultiYearView', () => { MultiYearViewWithMinMaxDate, MultiYearViewWithDateClass, ], - providers: [{provide: Directionality, useFactory: () => (dir = {value: 'ltr'})}], + providers: [provideFakeDirectionality(dir)], }); })); @@ -111,7 +117,7 @@ describe('MatMultiYearView', () => { '.mat-calendar-body', ) as HTMLElement; expect(calendarBodyEl).not.toBeNull(); - dir.value = 'ltr'; + dir.set('ltr'); fixture.componentInstance.date = new Date(2017, JAN, 3); fixture.changeDetectorRef.markForCheck(); dispatchFakeEvent(calendarBodyEl, 'focus'); diff --git a/src/material/datepicker/year-view.spec.ts b/src/material/datepicker/year-view.spec.ts index 6ed6c2f17bca..c30d9ae5a385 100644 --- a/src/material/datepicker/year-view.spec.ts +++ b/src/material/datepicker/year-view.spec.ts @@ -1,4 +1,4 @@ -import {Direction, Directionality} from '@angular/cdk/bidi'; +import {Direction} from '@angular/cdk/bidi'; import { DOWN_ARROW, END, @@ -9,19 +9,25 @@ import { RIGHT_ARROW, UP_ARROW, } from '@angular/cdk/keycodes'; -import {dispatchFakeEvent, dispatchKeyboardEvent} from '@angular/cdk/testing/private'; -import {Component, ViewChild} from '@angular/core'; +import { + dispatchFakeEvent, + dispatchKeyboardEvent, + provideFakeDirectionality, +} from '@angular/cdk/testing/private'; +import {Component, signal, ViewChild, WritableSignal} from '@angular/core'; import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing'; -import {MatNativeDateModule} from '../core'; import {By} from '@angular/platform-browser'; +import {MatNativeDateModule} from '../core'; import {AUG, DEC, FEB, JAN, JUL, JUN, MAR, MAY, NOV, OCT, SEP} from '../testing'; import {MatCalendarBody} from './calendar-body'; import {MatYearView} from './year-view'; describe('MatYearView', () => { - let dir: {value: Direction}; + let dir: WritableSignal; beforeEach(waitForAsync(() => { + dir = signal('ltr'); + TestBed.configureTestingModule({ imports: [ MatNativeDateModule, @@ -32,7 +38,7 @@ describe('MatYearView', () => { YearViewWithDateFilter, YearViewWithDateClass, ], - providers: [{provide: Directionality, useFactory: () => (dir = {value: 'ltr'})}], + providers: [provideFakeDirectionality(dir)], }); })); @@ -126,7 +132,7 @@ describe('MatYearView', () => { '.mat-calendar-body', ) as HTMLElement; expect(calendarBodyEl).not.toBeNull(); - dir.value = 'ltr'; + dir.set('ltr'); fixture.componentInstance.date = new Date(2017, JAN, 5); fixture.changeDetectorRef.markForCheck(); dispatchFakeEvent(calendarBodyEl, 'focus'); @@ -146,7 +152,7 @@ describe('MatYearView', () => { }); it('should increment month on left arrow press in rtl', () => { - dir.value = 'rtl'; + dir.set('rtl'); dispatchKeyboardEvent(calendarBodyEl, 'keydown', LEFT_ARROW); fixture.detectChanges(); @@ -172,7 +178,7 @@ describe('MatYearView', () => { }); it('should decrement month on right arrow press in rtl', () => { - dir.value = 'rtl'; + dir.set('rtl'); dispatchKeyboardEvent(calendarBodyEl, 'keydown', RIGHT_ARROW); fixture.detectChanges(); diff --git a/src/material/grid-list/BUILD.bazel b/src/material/grid-list/BUILD.bazel index b1155f61a9ae..14ebf51d582f 100644 --- a/src/material/grid-list/BUILD.bazel +++ b/src/material/grid-list/BUILD.bazel @@ -100,6 +100,7 @@ ts_project( "//:node_modules/@angular/core", "//:node_modules/@angular/platform-browser", "//src/cdk/bidi", + "//src/cdk/testing/private", ], ) diff --git a/src/material/grid-list/grid-list.spec.ts b/src/material/grid-list/grid-list.spec.ts index 0a5b084a53eb..69ddea756bea 100644 --- a/src/material/grid-list/grid-list.spec.ts +++ b/src/material/grid-list/grid-list.spec.ts @@ -1,4 +1,4 @@ -import {Directionality} from '@angular/cdk/bidi'; +import {provideFakeDirectionality} from '@angular/cdk/testing/private'; import {Component, DebugElement, Type, ViewChild} from '@angular/core'; import {ComponentFixture, TestBed} from '@angular/core/testing'; import {By} from '@angular/platform-browser'; @@ -812,14 +812,14 @@ class GridListWithoutMatchingGap {} @Component({ template: `Hello`, - providers: [{provide: Directionality, useValue: {}}], + providers: [provideFakeDirectionality('ltr')], standalone: false, }) class GridListWithEmptyDirectionality {} @Component({ template: `Hello`, - providers: [{provide: Directionality, useValue: {value: 'rtl'}}], + providers: [provideFakeDirectionality('rtl')], standalone: false, }) class GridListWithRtl {} diff --git a/src/material/menu/menu.spec.ts b/src/material/menu/menu.spec.ts index cce50535ab93..231f2a5e949f 100644 --- a/src/material/menu/menu.spec.ts +++ b/src/material/menu/menu.spec.ts @@ -1,5 +1,5 @@ import {FocusMonitor} from '@angular/cdk/a11y'; -import {Direction, Directionality} from '@angular/cdk/bidi'; +import {Direction} from '@angular/cdk/bidi'; import { DOWN_ARROW, END, @@ -25,13 +25,13 @@ import { provideCheckNoChangesConfig, Provider, QueryList, + signal, TemplateRef, Type, ViewChild, ViewChildren, } from '@angular/core'; -import {ComponentFixture, TestBed, fakeAsync, flush, tick} from '@angular/core/testing'; -import {MATERIAL_ANIMATIONS, MatRipple} from '../core'; +import {ComponentFixture, fakeAsync, flush, TestBed, tick} from '@angular/core/testing'; import {By} from '@angular/platform-browser'; import {NoopAnimationsModule} from '@angular/platform-browser/animations'; import {Subject} from 'rxjs'; @@ -43,7 +43,9 @@ import { dispatchKeyboardEvent, dispatchMouseEvent, patchElementFocus, + provideFakeDirectionality, } from '../../cdk/testing/private'; +import {MATERIAL_ANIMATIONS, MatRipple} from '../core'; import {MatMenu, MatMenuItem, MatMenuModule} from './index'; import { MAT_MENU_DEFAULT_OPTIONS, @@ -523,16 +525,7 @@ describe('MatMenu', () => { }); it('should set the panel direction based on the trigger direction', fakeAsync(() => { - const fixture = createComponent( - SimpleMenu, - [ - { - provide: Directionality, - useFactory: () => ({value: 'rtl'}), - }, - ], - [FakeIcon], - ); + const fixture = createComponent(SimpleMenu, [provideFakeDirectionality('rtl')], [FakeIcon]); fixture.detectChanges(); fixture.componentInstance.trigger.openMenu(); @@ -546,17 +539,8 @@ describe('MatMenu', () => { })); it('should update the panel direction if the trigger direction changes', fakeAsync(() => { - const dirProvider = {value: 'rtl'}; - const fixture = createComponent( - SimpleMenu, - [ - { - provide: Directionality, - useFactory: () => dirProvider, - }, - ], - [FakeIcon], - ); + const dir = signal('rtl'); + const fixture = createComponent(SimpleMenu, [provideFakeDirectionality(dir)], [FakeIcon]); fixture.detectChanges(); fixture.componentInstance.trigger.openMenu(); @@ -572,7 +556,7 @@ describe('MatMenu', () => { fixture.detectChanges(); tick(500); - dirProvider.value = 'ltr'; + dir.set('ltr'); fixture.componentInstance.trigger.openMenu(); fixture.detectChanges(); tick(500); @@ -1757,12 +1741,7 @@ describe('MatMenu', () => { let instance: NestedMenu; let overlay: HTMLElement; let compileTestComponent = (direction: Direction = 'ltr') => { - fixture = createComponent(NestedMenu, [ - { - provide: Directionality, - useFactory: () => ({value: direction}), - }, - ]); + fixture = createComponent(NestedMenu, [provideFakeDirectionality(direction)]); fixture.detectChanges(); instance = fixture.componentInstance; diff --git a/src/material/select/select.spec.ts b/src/material/select/select.spec.ts index ca6545b198a4..c2574ea65c34 100644 --- a/src/material/select/select.spec.ts +++ b/src/material/select/select.spec.ts @@ -1,5 +1,5 @@ import {LiveAnnouncer} from '@angular/cdk/a11y'; -import {Directionality} from '@angular/cdk/bidi'; +import {Direction} from '@angular/cdk/bidi'; import { A, DOWN_ARROW, @@ -15,13 +15,14 @@ import { TAB, UP_ARROW, } from '@angular/cdk/keycodes'; -import {createCloseScrollStrategy, OverlayContainer, OverlayModule} from '@angular/cdk/overlay'; +import {OverlayContainer, OverlayModule, createCloseScrollStrategy} from '@angular/cdk/overlay'; import {ScrollDispatcher} from '@angular/cdk/scrolling'; import { createKeyboardEvent, dispatchEvent, dispatchFakeEvent, dispatchKeyboardEvent, + provideFakeDirectionality, wrappedErrorMessage, } from '@angular/cdk/testing/private'; import { @@ -36,8 +37,10 @@ import { QueryList, ViewChild, ViewChildren, + WritableSignal, inject, provideCheckNoChangesConfig, + signal, } from '@angular/core'; import { ComponentFixture, @@ -59,7 +62,7 @@ import { Validators, } from '@angular/forms'; import {By} from '@angular/platform-browser'; -import {EMPTY, Observable, Subject, Subscription} from 'rxjs'; +import {Subject, Subscription} from 'rxjs'; import {map} from 'rxjs/operators'; import {ErrorStateMatcher, MATERIAL_ANIMATIONS, MatOption, MatOptionSelectionChange} from '../core'; import {FloatLabelType, MAT_FORM_FIELD_DEFAULT_OPTIONS, MatFormFieldModule} from '../form-field'; @@ -77,7 +80,7 @@ const DEFAULT_TYPEAHEAD_DEBOUNCE_INTERVAL = 200; describe('MatSelect', () => { let overlayContainerElement: HTMLElement; - let dir: {value: 'ltr' | 'rtl'; change: Observable}; + let dir: WritableSignal; let scrolledSubject = new Subject(); /** @@ -88,6 +91,7 @@ describe('MatSelect', () => { * @param providers Additional providers for this block */ function configureMatSelectTestingModule(declarations: any[], providers: Provider[] = []) { + dir = signal('ltr'); TestBed.configureTestingModule({ imports: [ MatFormFieldModule, @@ -99,7 +103,7 @@ describe('MatSelect', () => { providers: [ provideCheckNoChangesConfig({exhaustive: false}), {provide: MATERIAL_ANIMATIONS, useValue: {animationsDisabled: true}}, - {provide: Directionality, useFactory: () => (dir = {value: 'ltr', change: EMPTY})}, + provideFakeDirectionality(dir), { provide: ScrollDispatcher, useFactory: () => ({ @@ -4311,7 +4315,7 @@ describe('MatSelect', () => { })); it('should sort the selected options in reverse in rtl', fakeAsync(() => { - dir.value = 'rtl'; + dir.set('rtl'); trigger.click(); fixture.detectChanges(); flush(); @@ -4365,7 +4369,7 @@ describe('MatSelect', () => { }); it('should reverse sort the values, that get set via the model in rtl', () => { - dir.value = 'rtl'; + dir.set('rtl'); trigger.click(); fixture.detectChanges(); diff --git a/src/material/slider/slider.spec.ts b/src/material/slider/slider.spec.ts index fd85c30fd19b..0c2db2b63fba 100644 --- a/src/material/slider/slider.spec.ts +++ b/src/material/slider/slider.spec.ts @@ -6,9 +6,14 @@ * found in the LICENSE file at https://angular.dev/license */ -import {BidiModule, Directionality} from '@angular/cdk/bidi'; +import {BidiModule} from '@angular/cdk/bidi'; import {Platform} from '@angular/cdk/platform'; -import {dispatchEvent, dispatchFakeEvent, dispatchPointerEvent} from '@angular/cdk/testing/private'; +import { + dispatchEvent, + dispatchFakeEvent, + dispatchPointerEvent, + provideFakeDirectionality, +} from '@angular/cdk/testing/private'; import {Component, Provider, QueryList, Type, ViewChild, ViewChildren} from '@angular/core'; import { ComponentFixture, @@ -20,7 +25,6 @@ import { } from '@angular/core/testing'; import {FormControl, FormGroup, FormsModule, ReactiveFormsModule} from '@angular/forms'; import {By} from '@angular/platform-browser'; -import {of} from 'rxjs'; import {MatSliderModule} from './module'; import {MatSlider} from './slider'; import {MatSliderRangeThumb, MatSliderThumb} from './slider-input'; @@ -1123,12 +1127,7 @@ describe('MatSlider', () => { let fixture: ComponentFixture; beforeEach(waitForAsync(() => { - fixture = createComponent(StandardSlider, [ - { - provide: Directionality, - useValue: {value: 'rtl', change: of()}, - }, - ]); + fixture = createComponent(StandardSlider, [provideFakeDirectionality('rtl')]); fixture.detectChanges(); const sliderDebugElement = fixture.debugElement.query(By.directive(MatSlider)); slider = sliderDebugElement.componentInstance; @@ -1165,12 +1164,7 @@ describe('MatSlider', () => { let endInput: MatSliderThumb; beforeEach(waitForAsync(() => { - const fixture = createComponent(StandardRangeSlider, [ - { - provide: Directionality, - useValue: {value: 'rtl', change: of()}, - }, - ]); + const fixture = createComponent(StandardRangeSlider, [provideFakeDirectionality('rtl')]); fixture.detectChanges(); const sliderDebugElement = fixture.debugElement.query(By.directive(MatSlider)); slider = sliderDebugElement.componentInstance; diff --git a/src/material/stepper/stepper.spec.ts b/src/material/stepper/stepper.spec.ts index efc39d237777..c640438ae327 100644 --- a/src/material/stepper/stepper.spec.ts +++ b/src/material/stepper/stepper.spec.ts @@ -1,4 +1,4 @@ -import {Direction, Directionality} from '@angular/cdk/bidi'; +import {Direction} from '@angular/cdk/bidi'; import { DOWN_ARROW, END, @@ -20,17 +20,18 @@ import { createKeyboardEvent, dispatchEvent, dispatchKeyboardEvent, + provideFakeDirectionality, } from '@angular/cdk/testing/private'; import { Component, DebugElement, - EventEmitter, Provider, QueryList, Type, ViewChild, ViewChildren, ViewEncapsulation, + WritableSignal, inject, provideCheckNoChangesConfig, signal, @@ -46,26 +47,23 @@ import { ValidationErrors, Validators, } from '@angular/forms'; -import {MATERIAL_ANIMATIONS, MatRipple, ThemePalette} from '../core'; -import {MatFormFieldModule} from '../form-field'; -import {MatInputModule} from '../input'; import {By} from '@angular/platform-browser'; import {Observable, Subject, merge} from 'rxjs'; import {map, take} from 'rxjs/operators'; +import {MATERIAL_ANIMATIONS, MatRipple, ThemePalette} from '../core'; +import {MatFormFieldModule} from '../form-field'; +import {MatInputModule} from '../input'; import {MatStepHeader, MatStepperModule} from './index'; import {MatStep, MatStepper} from './stepper'; import {MatStepperNext, MatStepperPrevious} from './stepper-button'; import {MatStepperIntl} from './stepper-intl'; const VALID_REGEX = /valid/; -let dir: {value: Direction; readonly change: EventEmitter}; +let dir: WritableSignal; describe('MatStepper', () => { beforeEach(() => { - dir = { - value: 'ltr', - change: new EventEmitter(), - }; + dir = signal('ltr'); }); describe('basic stepper', () => { @@ -599,7 +597,7 @@ describe('MatStepper', () => { let fixture: ComponentFixture; beforeEach(() => { - dir.value = 'rtl'; + dir.set('rtl'); fixture = createComponent(SimpleMatVerticalStepperApp); fixture.detectChanges(); }); @@ -1011,7 +1009,7 @@ describe('MatStepper', () => { }); it('should reverse arrow key focus in RTL mode', () => { - dir.value = 'rtl'; + dir.set('rtl'); const fixture = createComponent(SimpleMatVerticalStepperApp); fixture.detectChanges(); @@ -1107,7 +1105,7 @@ describe('MatStepper', () => { }); it('should reverse arrow key focus in RTL mode', () => { - dir.value = 'rtl'; + dir.set('rtl'); const fixture = createComponent(SimpleMatHorizontalStepperApp); fixture.detectChanges(); @@ -1132,8 +1130,7 @@ describe('MatStepper', () => { const stepHeaders = fixture.debugElement.queryAll(By.css('.mat-horizontal-stepper-header')); assertCorrectKeyboardInteraction(fixture, stepHeaders, 'horizontal'); - dir.value = 'rtl'; - dir.change.emit('rtl'); + dir.set('rtl'); fixture.detectChanges(); assertArrowKeyInteractionInRtl(fixture, stepHeaders); @@ -1831,7 +1828,7 @@ function createComponent( imports: [MatStepperModule, ReactiveFormsModule, ...imports], providers: [ provideCheckNoChangesConfig({exhaustive: false}), - {provide: Directionality, useFactory: () => dir}, + provideFakeDirectionality(dir), {provide: MATERIAL_ANIMATIONS, useValue: {animationsDisabled: true}}, ...providers, ], diff --git a/src/material/tabs/tab-body.spec.ts b/src/material/tabs/tab-body.spec.ts index 08b8dc206ccf..ab4cea850053 100644 --- a/src/material/tabs/tab-body.spec.ts +++ b/src/material/tabs/tab-body.spec.ts @@ -1,30 +1,30 @@ -import {Direction, Directionality} from '@angular/cdk/bidi'; +import {Direction} from '@angular/cdk/bidi'; import {PortalModule, TemplatePortal} from '@angular/cdk/portal'; import {CdkScrollable, ScrollingModule} from '@angular/cdk/scrolling'; +import {provideFakeDirectionality} from '@angular/cdk/testing/private'; import { AfterViewInit, Component, TemplateRef, ViewChild, ViewContainerRef, + WritableSignal, inject, signal, } from '@angular/core'; import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing'; -import {MatRippleModule} from '../core'; import {By} from '@angular/platform-browser'; -import {Subject} from 'rxjs'; +import {MatRippleModule} from '../core'; import {MatTabBody, MatTabBodyPortal} from './tab-body'; describe('MatTabBody', () => { - let dir: Direction = 'ltr'; - let dirChange: Subject = new Subject(); + let dir: WritableSignal; beforeEach(waitForAsync(() => { - dir = 'ltr'; + dir = signal('ltr'); TestBed.configureTestingModule({ imports: [PortalModule, MatRippleModule, MatTabBody, MatTabBodyPortal, SimpleTabBodyApp], - providers: [{provide: Directionality, useFactory: () => ({value: dir, change: dirChange})}], + providers: [provideFakeDirectionality(dir)], }); })); @@ -40,7 +40,7 @@ describe('MatTabBody', () => { let fixture: ComponentFixture; beforeEach(() => { - dir = 'ltr'; + dir.set('ltr'); fixture = TestBed.createComponent(SimpleTabBodyApp); fixture.detectChanges(); }); @@ -74,7 +74,7 @@ describe('MatTabBody', () => { let fixture: ComponentFixture; beforeEach(() => { - dir = 'rtl'; + dir.set('rtl'); fixture = TestBed.createComponent(SimpleTabBodyApp); fixture.detectChanges(); }); @@ -112,8 +112,7 @@ describe('MatTabBody', () => { expect(fixture.componentInstance.tabBody._position).toBe('right'); - dirChange.next('rtl'); - dir = 'rtl'; + dir.set('rtl'); fixture.detectChanges(); diff --git a/src/material/tabs/tab-nav-bar/tab-nav-bar.spec.ts b/src/material/tabs/tab-nav-bar/tab-nav-bar.spec.ts index 51a076042151..51e2aad7cd41 100644 --- a/src/material/tabs/tab-nav-bar/tab-nav-bar.spec.ts +++ b/src/material/tabs/tab-nav-bar/tab-nav-bar.spec.ts @@ -1,34 +1,37 @@ -import {Direction, Directionality} from '@angular/cdk/bidi'; +import {Direction} from '@angular/cdk/bidi'; import {ENTER, SPACE} from '@angular/cdk/keycodes'; import {SharedResizeObserver} from '@angular/cdk/observers/private'; import { dispatchFakeEvent, dispatchKeyboardEvent, dispatchMouseEvent, + provideFakeDirectionality, } from '@angular/cdk/testing/private'; import { Component, provideCheckNoChangesConfig, QueryList, + signal, ViewChild, ViewChildren, + WritableSignal, } from '@angular/core'; -import {ComponentFixture, TestBed, fakeAsync, tick, waitForAsync} from '@angular/core/testing'; -import {MAT_RIPPLE_GLOBAL_OPTIONS, RippleGlobalOptions} from '../../core'; +import {ComponentFixture, fakeAsync, TestBed, tick, waitForAsync} from '@angular/core/testing'; import {By} from '@angular/platform-browser'; import {Subject} from 'rxjs'; +import {MAT_RIPPLE_GLOBAL_OPTIONS, RippleGlobalOptions} from '../../core'; import {MAT_TABS_CONFIG} from '../index'; import {MatTabsModule} from '../module'; import {MatTabLink, MatTabNav} from './tab-nav-bar'; describe('MatTabNavBar', () => { - let dir: Direction = 'ltr'; - let dirChange = new Subject(); + let dir: WritableSignal; let globalRippleOptions: RippleGlobalOptions; let resizeEvents: Subject; beforeEach(waitForAsync(() => { globalRippleOptions = {}; + dir = signal('ltr'); TestBed.configureTestingModule({ imports: [ @@ -40,7 +43,7 @@ describe('MatTabNavBar', () => { providers: [ provideCheckNoChangesConfig({exhaustive: false}), {provide: MAT_RIPPLE_GLOBAL_OPTIONS, useFactory: () => globalRippleOptions}, - {provide: Directionality, useFactory: () => ({value: dir, change: dirChange})}, + provideFakeDirectionality(dir), ], }); @@ -154,7 +157,7 @@ describe('MatTabNavBar', () => { spyOn(inkBar, 'alignToElement'); - dirChange.next(); + dir.set('rtl'); tick(); fixture.detectChanges(); diff --git a/src/material/tooltip/tooltip.spec.ts b/src/material/tooltip/tooltip.spec.ts index 6f11bfd899c8..5dbc7574c5e8 100644 --- a/src/material/tooltip/tooltip.spec.ts +++ b/src/material/tooltip/tooltip.spec.ts @@ -1,5 +1,5 @@ import {FocusMonitor} from '@angular/cdk/a11y'; -import {Direction, Directionality} from '@angular/cdk/bidi'; +import {Direction} from '@angular/cdk/bidi'; import {ESCAPE} from '@angular/cdk/keycodes'; import {CdkScrollable, OverlayContainer, OverlayModule} from '@angular/cdk/overlay'; import {Platform} from '@angular/cdk/platform'; @@ -12,24 +12,26 @@ import { dispatchKeyboardEvent, dispatchMouseEvent, patchElementFocus, + provideFakeDirectionality, } from '@angular/cdk/testing/private'; import { ChangeDetectionStrategy, Component, DebugElement, ElementRef, + signal, ViewChild, + WritableSignal, } from '@angular/core'; import { ComponentFixture, - TestBed, fakeAsync, flush, + TestBed, tick, waitForAsync, } from '@angular/core/testing'; import {By} from '@angular/platform-browser'; -import {Subject} from 'rxjs'; import { MAT_TOOLTIP_DEFAULT_OPTIONS, MatTooltip, @@ -43,11 +45,13 @@ const initialTooltipMessage = 'initial tooltip message'; describe('MatTooltip', () => { let overlayContainerElement: HTMLElement; - let dir: {value: Direction; change: Subject}; + let dir: WritableSignal; let platform: Platform; let focusMonitor: FocusMonitor; beforeEach(waitForAsync(() => { + dir = signal('ltr'); + TestBed.configureTestingModule({ imports: [ MatTooltipModule, @@ -60,14 +64,7 @@ describe('MatTooltip', () => { TooltipOnDraggableElement, DataBoundAriaLabelTooltip, ], - providers: [ - { - provide: Directionality, - useFactory: () => { - return (dir = {value: 'ltr', change: new Subject()}); - }, - }, - ], + providers: [provideFakeDirectionality(dir)], }); overlayContainerElement = TestBed.inject(OverlayContainer).getContainerElement(); @@ -512,7 +509,8 @@ describe('MatTooltip', () => { assertTooltipInstance(tooltipDirective, true); const spy = spyOn(tooltipDirective as any, '_updatePosition').and.callThrough(); - dir.change.next('rtl'); + dir.set('rtl'); + fixture.detectChanges(); assertTooltipInstance(tooltipDirective, true); expect(spy).toHaveBeenCalled(); @@ -683,7 +681,7 @@ describe('MatTooltip', () => { expect(tooltipDirective._getOrigin().main).toEqual(rightOrigin); // Test expectations in RTL - dir.value = 'rtl'; + dir.set('rtl'); tooltipDirective.position = 'before'; expect(tooltipDirective._getOrigin().main).toEqual(leftOrigin); tooltipDirective.position = 'after'; @@ -703,7 +701,7 @@ describe('MatTooltip', () => { expect(tooltipDirective._getOverlayPosition().main).toEqual(rightOverlayPosition); // Test expectations in RTL - dir.value = 'rtl'; + dir.set('rtl'); tooltipDirective.position = 'before'; expect(tooltipDirective._getOverlayPosition().main).toEqual(leftOverlayPosition); tooltipDirective.position = 'after'; @@ -720,7 +718,7 @@ describe('MatTooltip', () => { }); it('should pass the layout direction to the tooltip', fakeAsync(() => { - dir.value = 'rtl'; + dir.set('rtl'); tooltipDirective.show(); tick(0); @@ -737,7 +735,7 @@ describe('MatTooltip', () => { })); it('should keep the overlay direction in sync with the trigger direction', fakeAsync(() => { - dir.value = 'rtl'; + dir.set('rtl'); tooltipDirective.show(); tick(0); fixture.detectChanges(); @@ -755,7 +753,7 @@ describe('MatTooltip', () => { fixture.detectChanges(); finishCurrentTooltipAnimation(overlayContainerElement, false); - dir.value = 'ltr'; + dir.set('ltr'); tooltipDirective.show(); tick(0); fixture.detectChanges(); @@ -989,7 +987,7 @@ describe('MatTooltip', () => { fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); - dir.value = 'ltr'; + dir.set('ltr'); tooltipDirective.position = 'after'; fixture.changeDetectorRef.markForCheck(); tooltipDirective.show(0); @@ -1007,7 +1005,7 @@ describe('MatTooltip', () => { tooltipDirective.hide(0); fixture.detectChanges(); tick(0); - dir.value = 'rtl'; + dir.set('rtl'); tooltipDirective.show(0); fixture.detectChanges(); tick(0); diff --git a/src/material/tooltip/tooltip.zone.spec.ts b/src/material/tooltip/tooltip.zone.spec.ts index 4d8c8cf1de4d..541ab76edc9b 100644 --- a/src/material/tooltip/tooltip.zone.spec.ts +++ b/src/material/tooltip/tooltip.zone.spec.ts @@ -1,6 +1,5 @@ -import {Directionality} from '@angular/cdk/bidi'; import {CdkScrollable, OverlayModule} from '@angular/cdk/overlay'; -import {dispatchFakeEvent} from '@angular/cdk/testing/private'; +import {dispatchFakeEvent, provideFakeDirectionality} from '@angular/cdk/testing/private'; import { Component, DebugElement, @@ -10,7 +9,6 @@ import { } from '@angular/core'; import {ComponentFixture, TestBed, fakeAsync, tick, waitForAsync} from '@angular/core/testing'; import {By} from '@angular/platform-browser'; -import {Subject} from 'rxjs'; import {MatTooltipModule} from './module'; import {MatTooltip} from './tooltip'; @@ -20,13 +18,7 @@ describe('MatTooltip Zone.js integration', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [MatTooltipModule, OverlayModule, ScrollableTooltipDemo], - providers: [ - provideZoneChangeDetection(), - { - provide: Directionality, - useFactory: () => ({value: 'ltr', change: new Subject()}), - }, - ], + providers: [provideZoneChangeDetection(), provideFakeDirectionality('rtl')], }); }));