Skip to content

Arrow function syntax; replace deprecated initEvent method #31

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Arrow function syntax; replace deprecated initEvent method #31

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
112 changes: 50 additions & 62 deletions src/app/spec-helpers/element.spec-helper.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand All @@ -26,10 +24,10 @@ export function testIdSelector(testId: string): string {
* @param selector CSS selector
*
*/
export function queryByCss<T>(
export const queryByCss: <T>(
fixture: ComponentFixture<T>,
selector: string,
): DebugElement {
) => DebugElement = <T>(fixture: ComponentFixture<T>, 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.
Expand All @@ -39,7 +37,7 @@ export function queryByCss<T>(
throw new Error(`queryByCss: Element with ${selector} not found`);
}
return debugElement;
}
};

/**
* Finds an element inside the Component by the given `data-testid` attribute.
Expand All @@ -49,29 +47,23 @@ export function queryByCss<T>(
* @param testId Test id set by `data-testid`
*
*/
export function findEl<T>(fixture: ComponentFixture<T>, testId: string): DebugElement {
return queryByCss<T>(fixture, testIdSelector(testId));
}
export const findEl = <T>(fixture: ComponentFixture<T>, testId: string): DebugElement => queryByCss<T>(fixture, testIdSelector(testId));

/**
* Finds all elements with the given `data-testid` attribute.
*
* @param fixture Component fixture
* @param testId Test id set by `data-testid`
*/
export function findEls<T>(fixture: ComponentFixture<T>, testId: string): DebugElement[] {
return fixture.debugElement.queryAll(By.css(testIdSelector(testId)));
}
export const findEls = <T>(fixture: ComponentFixture<T>, testId: string): DebugElement[] => fixture.debugElement.queryAll(By.css(testIdSelector(testId)));

/**
* Gets the text content of an element with the given `data-testid` attribute.
*
* @param fixture Component fixture
* @param testId Test id set by `data-testid`
*/
export function getText<T>(fixture: ComponentFixture<T>, testId: string): string {
return findEl(fixture, testId).nativeElement.textContent;
}
export const getText = <T>(fixture: ComponentFixture<T>, testId: string): string => findEl(fixture, testId).nativeElement.textContent;

/**
* Expects that the element with the given `data-testid` attribute
Expand All @@ -81,13 +73,13 @@ export function getText<T>(fixture: ComponentFixture<T>, testId: string): string
* @param testId Test id set by `data-testid`
* @param text Expected text
*/
export function expectText<T>(
export const expectText = <T>(
fixture: ComponentFixture<T>,
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
Expand All @@ -96,9 +88,9 @@ export function expectText<T>(
* @param fixture Component fixture
* @param text Expected text
*/
export function expectContainedText<T>(fixture: ComponentFixture<T>, text: string): void {
expect(fixture.nativeElement.textContent).toContain(text);
}
export const expectContainedText = <T>(fixture: ComponentFixture<T>, text: string): void => {
void expect(fixture.nativeElement.textContent).toContain(text);
};

/**
* Expects that a component has the given text content.
Expand All @@ -107,9 +99,9 @@ export function expectContainedText<T>(fixture: ComponentFixture<T>, text: strin
* @param fixture Component fixture
* @param text Expected text
*/
export function expectContent<T>(fixture: ComponentFixture<T>, text: string): void {
expect(fixture.nativeElement.textContent).toBe(text);
}
export const expectContent = <T>(fixture: ComponentFixture<T>, text: string): void => {
void expect(fixture.nativeElement.textContent).toBe(text);
};

/**
* Dispatches a fake event (synthetic event) at the given element.
Expand All @@ -118,15 +110,17 @@ export function expectContent<T>(fixture: ComponentFixture<T>, 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).
Expand All @@ -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.
Expand All @@ -155,13 +149,13 @@ export function setFieldElementValue(
* @param testId Test id set by `data-testid`
* @param value Form field value
*/
export function setFieldValue<T>(
export const setFieldValue = <T>(
fixture: ComponentFixture<T>,
testId: string,
value: string,
): void {
): void => {
setFieldElementValue(findEl(fixture, testId).nativeElement, value);
}
};

/**
* Checks or unchecks a checkbox or radio button.
Expand All @@ -171,16 +165,16 @@ export function setFieldValue<T>(
* @param testId Test id set by `data-testid`
* @param checked Whether the checkbox or radio should be checked
*/
export function checkField<T>(
export const checkField = <T>(
fixture: ComponentFixture<T>,
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.
Expand All @@ -189,31 +183,29 @@ export function checkField<T>(
*
* @param target Element that is the target of the click event
*/
export function makeClickEvent(target: EventTarget): Partial<MouseEvent> {
return {
preventDefault(): void {},
stopPropagation(): void {},
stopImmediatePropagation(): void {},
type: 'click',
target,
currentTarget: target,
bubbles: true,
cancelable: true,
button: 0,
};
}
export const makeClickEvent = (target: EventTarget): Partial<MouseEvent> => ({
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.
*
* @param fixture Component fixture
* @param testId Test id set by `data-testid`
*/
export function click<T>(fixture: ComponentFixture<T>, testId: string): void {
export const click = <T>(fixture: ComponentFixture<T>, 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`.
Expand All @@ -224,19 +216,15 @@ export function click<T>(fixture: ComponentFixture<T>, testId: string): void {
* @param fixture Fixture of the parent Component
* @param selector Element selector, e.g. `app-example`
*/
export function findComponent<T>(
export const findComponent = <T>(
fixture: ComponentFixture<T>,
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<T>(
export const findComponents = <T>(
fixture: ComponentFixture<T>,
selector: string,
): DebugElement[] {
return fixture.debugElement.queryAll(By.css(selector));
}
): DebugElement[] => fixture.debugElement.queryAll(By.css(selector));