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 */