Skip to content

Commit

Permalink
test: rewrite tests that test zone.js implementation details
Browse files Browse the repository at this point in the history
  • Loading branch information
mmalerba committed May 21, 2024
1 parent 3a48d1f commit 60be42f
Show file tree
Hide file tree
Showing 6 changed files with 61 additions and 356 deletions.
37 changes: 36 additions & 1 deletion src/cdk/a11y/focus-monitor/focus-monitor.spec.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import {TAB} from '@angular/cdk/keycodes';
import {Platform} from '@angular/cdk/platform';
import {DOCUMENT} from '@angular/common';
import {Component, ViewChild} from '@angular/core';
import {Component, ViewChild, provideZoneChangeDetection} from '@angular/core';
import {ComponentFixture, TestBed, fakeAsync, flush, inject, tick} from '@angular/core/testing';
import {By} from '@angular/platform-browser';
import {
Expand Down Expand Up @@ -34,6 +34,7 @@ describe('FocusMonitor', () => {
TestBed.configureTestingModule({
imports: [A11yModule, PlainButton],
providers: [
provideZoneChangeDetection(),
{
provide: DOCUMENT,
useFactory: () => {
Expand Down Expand Up @@ -899,6 +900,28 @@ describe('FocusMonitor input label detection', () => {
}));
});

describe('cdkMonitorFocus with change detection counter', () => {
beforeEach(() => {
TestBed.configureTestingModule({
imports: [A11yModule, ButtonWithCDCounter],

providers: [
provideZoneChangeDetection(), // TODO: Make this work with zoneless.
{provide: Platform, useValue: {isBrowser: true}},
],
}).compileComponents();
});

it('should detect changes caused by focus change', () => {
const fixture = TestBed.createComponent(ButtonWithCDCounter);
fixture.autoDetectChanges();
const buttonElement = fixture.nativeElement.querySelector('button');
buttonElement.focus();
const focusChangeCounter = fixture.nativeElement.querySelector('.focus-change-counter');
expect(focusChangeCounter.innerText).toBe('1');
});
});

@Component({
template: `<div class="parent"><button>focus me!</button></div>`,
standalone: true,
Expand Down Expand Up @@ -961,3 +984,15 @@ class CheckboxWithLabel {}
class ExportedFocusMonitor {
@ViewChild('exportedDir') exportedDirRef: CdkMonitorFocus;
}

@Component({
template: `
<button cdkMonitorElementFocus (cdkFocusChange)="focusChangeCount = focusChangeCount + 1"></button>
<div class="focus-change-counter">{{focusChangeCount}}</div>
`,
standalone: true,
imports: [A11yModule],
})
class ButtonWithCDCounter {
focusChangeCount = 0;
}
47 changes: 0 additions & 47 deletions src/cdk/a11y/focus-monitor/focus-monitor.zone.spec.ts

This file was deleted.

13 changes: 13 additions & 0 deletions src/cdk/drag-drop/directives/drag.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -566,6 +566,16 @@ describe('CdkDrag', () => {
subscription.unsubscribe();
});

it('should detect changes cased by `cdkDragMoved`', () => {
const fixture = createComponent(StandaloneDraggable);
fixture.autoDetectChanges();

dragElementViaMouse(fixture, fixture.componentInstance.dragElement.nativeElement, 10, 20);

const movedCounter = fixture.nativeElement.querySelector('.moved-counter');
expect(movedCounter.innerText).toBe('1');
});

it('should complete the `moved` stream on destroy', () => {
const fixture = createComponent(StandaloneDraggable);
fixture.changeDetectorRef.markForCheck();
Expand Down Expand Up @@ -7268,9 +7278,11 @@ describe('CdkDrag', () => {
(cdkDragStarted)="startedSpy($event)"
(cdkDragReleased)="releasedSpy($event)"
(cdkDragEnded)="endedSpy($event)"
(cdkDragMoved)="movedCount = movedCount + 1"
#dragElement
style="width: 100px; height: 100px; background: red;"></div>
</div>
<div class="moved-counter">{{movedCount}}</div>
`,
})
class StandaloneDraggable {
Expand All @@ -7283,6 +7295,7 @@ class StandaloneDraggable {
dragStartDelay: number | string | {touch: number; mouse: number};
constrainPosition: (point: Point) => Point;
freeDragPosition?: {x: number; y: number};
movedCount = 0;
}

@Component({
Expand Down
158 changes: 0 additions & 158 deletions src/cdk/drag-drop/directives/drag.zone.spec.ts

This file was deleted.

13 changes: 12 additions & 1 deletion src/cdk/overlay/overlay-directives.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -680,6 +680,15 @@ describe('Overlay directives', () => {
.toBe(true);
});

it('should detect changes caused by position change', () => {
fixture.destroy();
fixture = TestBed.createComponent(ConnectedOverlayDirectiveTest);
fixture.componentInstance.isOpen = true;
fixture.autoDetectChanges();
const positionChangeCounter = fixture.nativeElement.querySelector('.position-change-counter');
expect(positionChangeCounter.innerText).toBe('1');
});

it('should emit when attached', () => {
expect(fixture.componentInstance.attachHandler).not.toHaveBeenCalled();
fixture.componentInstance.isOpen = true;
Expand Down Expand Up @@ -764,6 +773,7 @@ describe('Overlay directives', () => {
<button cdk-overlay-origin id="trigger" #trigger="cdkOverlayOrigin">Toggle menu</button>
<button cdk-overlay-origin id="otherTrigger" #otherTrigger="cdkOverlayOrigin">Toggle menu</button>
<button id="nonDirectiveTrigger" #nonDirectiveTrigger>Toggle menu</button>
<div class="position-change-counter">{{positionChangeCount}}</div>
<ng-template cdk-connected-overlay
[cdkConnectedOverlayOpen]="isOpen"
Expand All @@ -783,7 +793,7 @@ describe('Overlay directives', () => {
(backdropClick)="backdropClickHandler($event)"
[cdkConnectedOverlayOffsetX]="offsetX"
[cdkConnectedOverlayOffsetY]="offsetY"
(positionChange)="positionChangeHandler($event)"
(positionChange)="positionChangeCount = positionChangeCount + 1; positionChangeHandler($event)"
(attach)="attachHandler()"
(detach)="detachHandler()"
(overlayKeydown)="keydownHandler($event)"
Expand Down Expand Up @@ -829,6 +839,7 @@ class ConnectedOverlayDirectiveTest {
detachHandler = jasmine.createSpy('detachHandler');
attachResult: HTMLElement;
transformOriginSelector: string;
positionChangeCount = 0;
}

@Component({
Expand Down
Loading

0 comments on commit 60be42f

Please sign in to comment.