From c4b8964424f8a70bf0247211e4494d1b3f809b94 Mon Sep 17 00:00:00 2001 From: Adrien Crivelli Date: Thu, 9 Jul 2020 12:46:27 +0300 Subject: [PATCH] docs: drop `newEvent()` compatibility function (#37251) Because PhantomJS has been deprecated since March 2018, and `newEvent` is very confusing for newcomers that read the testing documentation, we remove it entirely, and instead assume most, if not all, newcomers will run tests in Chrome as it is the default. Fixes #23370 PR Close #37251 --- .../testing/src/app/demo/demo.testbed.spec.ts | 20 ++++++++++++------- .../app/hero/hero-detail.component.spec.ts | 14 ++++++++----- .../src/app/hero/hero-list.component.spec.ts | 12 ++++++++--- .../app/shared/highlight.directive.spec.ts | 8 +++++--- .../examples/testing/src/testing/index.ts | 12 ----------- 5 files changed, 36 insertions(+), 30 deletions(-) diff --git a/aio/content/examples/testing/src/app/demo/demo.testbed.spec.ts b/aio/content/examples/testing/src/app/demo/demo.testbed.spec.ts index a6bbd1aafc..9510eb8f51 100644 --- a/aio/content/examples/testing/src/app/demo/demo.testbed.spec.ts +++ b/aio/content/examples/testing/src/app/demo/demo.testbed.spec.ts @@ -28,7 +28,7 @@ import { ComponentFixture, fakeAsync, inject, TestBed, tick, waitForAsync } from '@angular/core/testing'; -import { addMatchers, newEvent, click } from '../../testing'; +import { addMatchers, click } from '../../testing'; export class NotProvided extends ValueService { /* example below */ } beforeEach(addMatchers); @@ -274,9 +274,11 @@ describe('demo (with TestBed):', () => { expect(comp.name).toBe(expectedOrigName, `comp.name should still be ${expectedOrigName} after value change, before binding happens`); - // dispatch a DOM event so that Angular learns of input value change. + // Dispatch a DOM event so that Angular learns of input value change. // then wait while ngModel pushes input.box value to comp.name - input.dispatchEvent(newEvent('input')); + // In older browsers, such as IE, you might need a CustomEvent instead. See + // https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent#Polyfill + input.dispatchEvent(new Event('input')); return fixture.whenStable(); }) .then(() => { @@ -312,9 +314,11 @@ describe('demo (with TestBed):', () => { expect(comp.name).toBe(expectedOrigName, `comp.name should still be ${expectedOrigName} after value change, before binding happens`); - // dispatch a DOM event so that Angular learns of input value change. + // Dispatch a DOM event so that Angular learns of input value change. // then wait a tick while ngModel pushes input.box value to comp.name - input.dispatchEvent(newEvent('input')); + // In older browsers, such as IE, you might need a CustomEvent instead. See + // https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent#Polyfill + input.dispatchEvent(new Event('input')); tick(); expect(comp.name).toBe(expectedNewName, `After ngModel updates the model, comp.name should be ${expectedNewName} `); @@ -335,10 +339,12 @@ describe('demo (with TestBed):', () => { // simulate user entering new name in input input.value = inputText; - // dispatch a DOM event so that Angular learns of input value change. + // Dispatch a DOM event so that Angular learns of input value change. // then wait a tick while ngModel pushes input.box value to comp.text // and Angular updates the output span - input.dispatchEvent(newEvent('input')); + // In older browsers, such as IE, you might need a CustomEvent instead. See + // https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent#Polyfill + input.dispatchEvent(new Event('input')); tick(); fixture.detectChanges(); expect(span.textContent).toBe(expectedText, 'output span'); diff --git a/aio/content/examples/testing/src/app/hero/hero-detail.component.spec.ts b/aio/content/examples/testing/src/app/hero/hero-detail.component.spec.ts index 0015c96d52..8f4ee4f6d7 100644 --- a/aio/content/examples/testing/src/app/hero/hero-detail.component.spec.ts +++ b/aio/content/examples/testing/src/app/hero/hero-detail.component.spec.ts @@ -3,7 +3,7 @@ import { ComponentFixture, fakeAsync, inject, TestBed, tick, waitForAsync } from import { Router } from '@angular/router'; import { - ActivatedRoute, ActivatedRouteStub, asyncData, click, newEvent + ActivatedRoute, ActivatedRouteStub, asyncData, click } from '../../testing'; import { Hero } from '../model/hero'; @@ -99,7 +99,10 @@ function overrideSetup() { const newName = 'New Name'; page.nameInput.value = newName; - page.nameInput.dispatchEvent(newEvent('input')); // tell Angular + + // In older browsers, such as IE, you might need a CustomEvent instead. See + // https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent#Polyfill + page.nameInput.dispatchEvent(new Event('input')); // tell Angular expect(component.hero.name).toBe(newName, 'component hero has new name'); expect(hdsSpy.testHero.name).toBe(origName, 'service hero unchanged before save'); @@ -197,9 +200,10 @@ function heroModuleSetup() { // simulate user entering a new name into the input box nameInput.value = 'quick BROWN fOx'; - // dispatch a DOM event so that Angular learns of input value change. - // use newEvent utility function (not provided by Angular) for better browser compatibility - nameInput.dispatchEvent(newEvent('input')); + // Dispatch a DOM event so that Angular learns of input value change. + // In older browsers, such as IE, you might need a CustomEvent instead. See + // https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent#Polyfill + nameInput.dispatchEvent(new Event('input')); // Tell Angular to update the display binding through the title pipe fixture.detectChanges(); diff --git a/aio/content/examples/testing/src/app/hero/hero-list.component.spec.ts b/aio/content/examples/testing/src/app/hero/hero-list.component.spec.ts index b8c0278bf6..b65eaada82 100644 --- a/aio/content/examples/testing/src/app/hero/hero-list.component.spec.ts +++ b/aio/content/examples/testing/src/app/hero/hero-list.component.spec.ts @@ -6,7 +6,7 @@ import { DebugElement } from '@angular/core'; import { Router } from '@angular/router'; -import { addMatchers, newEvent } from '../../testing'; +import { addMatchers } from '../../testing'; import { HeroService } from '../model/hero.service'; import { getTestHeroes, TestHeroService } from '../model/testing/test-hero.service'; @@ -53,7 +53,10 @@ describe('HeroListComponent', () => { it('should select hero on click', fakeAsync(() => { const expectedHero = HEROES[1]; const li = page.heroRows[1]; - li.dispatchEvent(newEvent('click')); + + // In older browsers, such as IE, you might need a CustomEvent instead. See + // https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent#Polyfill + li.dispatchEvent(new Event('click')); tick(); // `.toEqual` because selectedHero is clone of expectedHero; see FakeHeroService expect(comp.selectedHero).toEqual(expectedHero); @@ -62,7 +65,10 @@ describe('HeroListComponent', () => { it('should navigate to selected hero detail on click', fakeAsync(() => { const expectedHero = HEROES[1]; const li = page.heroRows[1]; - li.dispatchEvent(newEvent('click')); + + // In older browsers, such as IE, you might need a CustomEvent instead. See + // https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent#Polyfill + li.dispatchEvent(new Event('click')); tick(); // should have navigated diff --git a/aio/content/examples/testing/src/app/shared/highlight.directive.spec.ts b/aio/content/examples/testing/src/app/shared/highlight.directive.spec.ts index bd068c5c68..1ab8d68a6c 100644 --- a/aio/content/examples/testing/src/app/shared/highlight.directive.spec.ts +++ b/aio/content/examples/testing/src/app/shared/highlight.directive.spec.ts @@ -3,7 +3,6 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; import { HighlightDirective } from './highlight.directive'; -import { newEvent } from '../../testing'; // #docregion test-component @Component({ @@ -59,9 +58,12 @@ describe('HighlightDirective', () => { const input = des[2].nativeElement as HTMLInputElement; expect(input.style.backgroundColor).toBe('cyan', 'initial backgroundColor'); - // dispatch a DOM event so that Angular responds to the input value change. input.value = 'green'; - input.dispatchEvent(newEvent('input')); + + // Dispatch a DOM event so that Angular responds to the input value change. + // In older browsers, such as IE, you might need a CustomEvent instead. See + // https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent#Polyfill + input.dispatchEvent(new Event('input')); fixture.detectChanges(); expect(input.style.backgroundColor).toBe('green', 'changed backgroundColor'); diff --git a/aio/content/examples/testing/src/testing/index.ts b/aio/content/examples/testing/src/testing/index.ts index e9e139a906..bcea4482a2 100644 --- a/aio/content/examples/testing/src/testing/index.ts +++ b/aio/content/examples/testing/src/testing/index.ts @@ -14,18 +14,6 @@ export function advance(f: ComponentFixture): void { f.detectChanges(); } -/** - * Create custom DOM event the old fashioned way - * - * https://developer.mozilla.org/en-US/docs/Web/API/Event/initEvent - * Although officially deprecated, some browsers (phantom) don't accept the preferred "new Event(eventName)" - */ -export function newEvent(eventName: string, bubbles = false, cancelable = false) { - const evt = document.createEvent('CustomEvent'); // MUST be 'CustomEvent' - evt.initCustomEvent(eventName, bubbles, cancelable, null); - return evt; -} - // See https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button // #docregion click-event /** Button events to pass to `DebugElement.triggerEventHandler` for RouterLink event handler */