cargdev/angular
1
0
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects Releases Wiki Activity

docs: testing - highlight dispatchEvent (#22726)

Browse Source 
PR Close #22726
This commit is contained in:
Ward Bell
2018-03-12 22:33:11 -07:00
committed by Kara Erickson
parent 6f0dad1710
commit 1f9734315d
2 changed files with 27 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
aio/content/examples/testing/src/app/hero/hero-detail.component.spec.ts
View File

@ -197,20 +197,21 @@ function heroModuleSetup() {
// #docregion title-case-pipe
it('should convert hero name to Title Case', () => {
const inputName = 'quick BROWN fox';
const titleCaseName = 'Quick Brown Fox';
const { nameInput, nameDisplay } = page;
// get the name's input and display elements from the DOM
const hostElement = fixture.nativeElement;
const nameInput: HTMLInputElement = hostElement.querySelector('input');
const nameDisplay: HTMLElement = hostElement.querySelector('span');
// simulate user entering new name into the input box
nameInput.value = inputName;
// 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.
nameInput.dispatchEvent(newEvent('input'));
// Tell Angular to update the output span through the title pipe
// Tell Angular to update the display binding through the title pipe
fixture.detectChanges();
expect(nameDisplay.textContent).toBe(titleCaseName);
expect(nameDisplay.textContent).toBe('Quick Brown Fox');
});
// #enddocregion title-case-pipe
// #enddocregion selected-tests