From 199cca39c5bbc3fa7681efa11e07926d4f3cb1f9 Mon Sep 17 00:00:00 2001 From: Dan Russell <4387475+dangrussell@users.noreply.github.com> Date: Mon, 1 May 2023 14:06:15 -0400 Subject: [PATCH] Arrow function syntax; replace deprecated `initEvent` method --- src/app/spec-helpers/element.spec-helper.ts | 112 +++++++++----------- 1 file changed, 50 insertions(+), 62 deletions(-) diff --git a/src/app/spec-helpers/element.spec-helper.ts b/src/app/spec-helpers/element.spec-helper.ts index 9c48947..e89f5b3 100644 --- a/src/app/spec-helpers/element.spec-helper.ts +++ b/src/app/spec-helpers/element.spec-helper.ts @@ -14,9 +14,7 @@ import { By } from '@angular/platform-browser'; * @param testId Test id set by `data-testid` * */ -export function testIdSelector(testId: string): string { - return `[data-testid="${testId}"]`; -} +const testIdSelector: (testId: string) => string = (testId: string) => `[data-testid="${testId}"]`; /** * Finds a single element inside the Component by the given CSS selector. @@ -26,10 +24,10 @@ export function testIdSelector(testId: string): string { * @param selector CSS selector * */ -export function queryByCss( +export const queryByCss: ( fixture: ComponentFixture, selector: string, -): DebugElement { +) => DebugElement = (fixture: ComponentFixture, selector: string) => { // The return type of DebugElement#query() is declared as DebugElement, // but the actual return type is DebugElement | null. // See https://github.com/angular/angular/issues/22449. @@ -39,7 +37,7 @@ export function queryByCss( throw new Error(`queryByCss: Element with ${selector} not found`); } return debugElement; -} +}; /** * Finds an element inside the Component by the given `data-testid` attribute. @@ -49,9 +47,7 @@ export function queryByCss( * @param testId Test id set by `data-testid` * */ -export function findEl(fixture: ComponentFixture, testId: string): DebugElement { - return queryByCss(fixture, testIdSelector(testId)); -} +export const findEl = (fixture: ComponentFixture, testId: string): DebugElement => queryByCss(fixture, testIdSelector(testId)); /** * Finds all elements with the given `data-testid` attribute. @@ -59,9 +55,7 @@ export function findEl(fixture: ComponentFixture, testId: string): DebugEl * @param fixture Component fixture * @param testId Test id set by `data-testid` */ -export function findEls(fixture: ComponentFixture, testId: string): DebugElement[] { - return fixture.debugElement.queryAll(By.css(testIdSelector(testId))); -} +export const findEls = (fixture: ComponentFixture, testId: string): DebugElement[] => fixture.debugElement.queryAll(By.css(testIdSelector(testId))); /** * Gets the text content of an element with the given `data-testid` attribute. @@ -69,9 +63,7 @@ export function findEls(fixture: ComponentFixture, testId: string): DebugE * @param fixture Component fixture * @param testId Test id set by `data-testid` */ -export function getText(fixture: ComponentFixture, testId: string): string { - return findEl(fixture, testId).nativeElement.textContent; -} +export const getText = (fixture: ComponentFixture, testId: string): string => findEl(fixture, testId).nativeElement.textContent; /** * Expects that the element with the given `data-testid` attribute @@ -81,13 +73,13 @@ export function getText(fixture: ComponentFixture, testId: string): string * @param testId Test id set by `data-testid` * @param text Expected text */ -export function expectText( +export const expectText = ( fixture: ComponentFixture, testId: string, text: string, -): void { - expect(getText(fixture, testId)).toBe(text); -} +): void => { + void expect(getText(fixture, testId)).toBe(text); +}; /** * Expects that the element with the given `data-testid` attribute @@ -96,9 +88,9 @@ export function expectText( * @param fixture Component fixture * @param text Expected text */ -export function expectContainedText(fixture: ComponentFixture, text: string): void { - expect(fixture.nativeElement.textContent).toContain(text); -} +export const expectContainedText = (fixture: ComponentFixture, text: string): void => { + void expect(fixture.nativeElement.textContent).toContain(text); +}; /** * Expects that a component has the given text content. @@ -107,9 +99,9 @@ export function expectContainedText(fixture: ComponentFixture, text: strin * @param fixture Component fixture * @param text Expected text */ -export function expectContent(fixture: ComponentFixture, text: string): void { - expect(fixture.nativeElement.textContent).toBe(text); -} +export const expectContent = (fixture: ComponentFixture, text: string): void => { + void expect(fixture.nativeElement.textContent).toBe(text); +}; /** * Dispatches a fake event (synthetic event) at the given element. @@ -118,15 +110,17 @@ export function expectContent(fixture: ComponentFixture, text: string): vo * @param type Event name, e.g. `input` * @param bubbles Whether the event bubbles up in the DOM tree */ -export function dispatchFakeEvent( +export const dispatchFakeEvent = ( element: EventTarget, type: string, bubbles: boolean = false, -): void { - const event = document.createEvent('Event'); - event.initEvent(type, bubbles, false); +): void => { + const event: Event = new Event(type, { + bubbles, + cancelable: false, + }); element.dispatchEvent(event); -} +}; /** * Enters text into a form field (`input`, `textarea` or `select` element). @@ -137,16 +131,16 @@ export function dispatchFakeEvent( * @param element Form field * @param value Form field value */ -export function setFieldElementValue( +export const setFieldElementValue = ( element: HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement, value: string, -): void { +): void => { element.value = value; // Dispatch an `input` or `change` fake event // so Angular form bindings take notice of the change. const isSelect = element instanceof HTMLSelectElement; dispatchFakeEvent(element, isSelect ? 'change' : 'input', isSelect ? false : true); -} +}; /** * Sets the value of a form field with the given `data-testid` attribute. @@ -155,13 +149,13 @@ export function setFieldElementValue( * @param testId Test id set by `data-testid` * @param value Form field value */ -export function setFieldValue( +export const setFieldValue = ( fixture: ComponentFixture, testId: string, value: string, -): void { +): void => { setFieldElementValue(findEl(fixture, testId).nativeElement, value); -} +}; /** * Checks or unchecks a checkbox or radio button. @@ -171,16 +165,16 @@ export function setFieldValue( * @param testId Test id set by `data-testid` * @param checked Whether the checkbox or radio should be checked */ -export function checkField( +export const checkField = ( fixture: ComponentFixture, testId: string, checked: boolean, -): void { +): void => { const { nativeElement } = findEl(fixture, testId); nativeElement.checked = checked; // Dispatch a `change` fake event so Angular form bindings take notice of the change. dispatchFakeEvent(nativeElement, 'change'); -} +}; /** * Makes a fake click event that provides the most important properties. @@ -189,19 +183,17 @@ export function checkField( * * @param target Element that is the target of the click event */ -export function makeClickEvent(target: EventTarget): Partial { - return { - preventDefault(): void {}, - stopPropagation(): void {}, - stopImmediatePropagation(): void {}, - type: 'click', - target, - currentTarget: target, - bubbles: true, - cancelable: true, - button: 0, - }; -} +export const makeClickEvent = (target: EventTarget): Partial => ({ + preventDefault: () => void {}, + stopPropagation: () => void {}, + stopImmediatePropagation: () => void {}, + type: 'click', + target, + currentTarget: target, + bubbles: true, + cancelable: true, + button: 0, +}); /** * Emulates a left click on the element with the given `data-testid` attribute. @@ -209,11 +201,11 @@ export function makeClickEvent(target: EventTarget): Partial { * @param fixture Component fixture * @param testId Test id set by `data-testid` */ -export function click(fixture: ComponentFixture, testId: string): void { +export const click = (fixture: ComponentFixture, testId: string): void => { const element = findEl(fixture, testId); const event = makeClickEvent(element.nativeElement); element.triggerEventHandler('click', event); -} +}; /** * Finds a nested Component by its selector, e.g. `app-example`. @@ -224,19 +216,15 @@ export function click(fixture: ComponentFixture, testId: string): void { * @param fixture Fixture of the parent Component * @param selector Element selector, e.g. `app-example` */ -export function findComponent( +export const findComponent = ( fixture: ComponentFixture, selector: string, -): DebugElement { - return queryByCss(fixture, selector); -} +): DebugElement => queryByCss(fixture, selector); /** * Finds all nested Components by its selector, e.g. `app-example`. */ -export function findComponents( +export const findComponents = ( fixture: ComponentFixture, selector: string, -): DebugElement[] { - return fixture.debugElement.queryAll(By.css(selector)); -} +): DebugElement[] => fixture.debugElement.queryAll(By.css(selector));