Skip to content

Commit

Permalink
Refactor E2E tests helper signatures (#45)
Browse files Browse the repository at this point in the history
  • Loading branch information
@satelllte
satelllte authored Oct 22, 2023
1 parent 0e37b82 commit fff0c57
Show file tree
Hide file tree
Showing 3 changed files with 109 additions and 101 deletions.
96 changes: 50 additions & 46 deletions apps/docs/e2e/expects.ts
View file
Original file line number Diff line number Diff line change
@@ -1,29 +1,19 @@
import {expect, type Page, type Locator} from '@playwright/test';

const _dragSteps = 10;
const _dragAmplitude = 40.0;

const _calculateElementCenter = async (element: Locator) => {
const bounds = await element.evaluate((el) => el.getBoundingClientRect());
const x = bounds.x + bounds.width / 2;
const y = bounds.y + bounds.height / 2;
return {x, y};
};

type KnobDragAssertionArgs = [Locator, {valueNow: number; page: Page}];

type KnobDragAssertionProps = {knob: Locator; valueNow: number; page: Page};
const _knobDragsCorrectly =
(direction: 'up' | 'down' | 'left' | 'right') =>
async (
knob: Locator,
{
valueNow,
page,
}: {
valueNow: number;
page: Page;
},
) => {
async ({knob, valueNow, page}: KnobDragAssertionProps) => {
const dragSteps = 10;
const dragAmplitude = 40.0;

// It's necessary to hover over the knob and scroll it into view,
// so then we can calculate its bounds in the viewport properly
await knob.hover();
Expand All @@ -32,72 +22,86 @@ const _knobDragsCorrectly =

x =
direction === 'right'
? x + _dragAmplitude
? x + dragAmplitude
: direction === 'left'
? x - _dragAmplitude
? x - dragAmplitude
: x;
y =
direction === 'down'
? y + _dragAmplitude
? y + dragAmplitude
: direction === 'up'
? y - _dragAmplitude
? y - dragAmplitude
: y;

await page.mouse.down();
await page.mouse.move(x, y, {steps: _dragSteps});
await page.mouse.move(x, y, {steps: dragSteps});
await page.mouse.up();

if (direction === 'up' || direction === 'right') {
await knobValueIsMoreThan(knob, {value: valueNow});
await knobValueIsMoreThan({knob, value: valueNow});
} else {
await knobValueIsLessThan(knob, {value: valueNow});
await knobValueIsLessThan({knob, value: valueNow});
}
};

export const knobValueTextIs = async (
knob: Locator,
{knobOutput, valueText}: {knobOutput?: Locator; valueText: string},
) => {
export const knobValueTextIs = async ({
knob,
knobOutput,
valueText,
}: {
knob: Locator;
knobOutput?: Locator;
valueText: string;
}) => {
expect(await knob.getAttribute('aria-valuetext')).toBe(valueText);
if (knobOutput) {
await expect(knobOutput).toHaveText(valueText);
}
};

export const knobValueIsEqualTo = async (
knob: Locator,
{valueNow}: {valueNow: number},
) => {
export const knobValueIsEqualTo = async ({
knob,
valueNow,
}: {
knob: Locator;
valueNow: number;
}) => {
expect(await knob.getAttribute('aria-valuenow')).toBe(`${valueNow}`);
};

export const knobValueIsLessThan = async (
knob: Locator,
{value}: {value: number},
) => {
export const knobValueIsLessThan = async ({
knob,
value,
}: {
knob: Locator;
value: number;
}) => {
expect(Number(await knob.getAttribute('aria-valuenow'))).toBeLessThan(value);
};

export const knobValueIsMoreThan = async (
knob: Locator,
{value}: {value: number},
) => {
export const knobValueIsMoreThan = async ({
knob,
value,
}: {
knob: Locator;
value: number;
}) => {
expect(Number(await knob.getAttribute('aria-valuenow'))).toBeGreaterThan(
value,
);
};

export const knobDragsDownCorrectly = async (...args: KnobDragAssertionArgs) =>
_knobDragsCorrectly('down')(...args);
export const knobDragsDownCorrectly = async (props: KnobDragAssertionProps) =>
_knobDragsCorrectly('down')(props);

export const knobDragsUpCorrectly = async (...args: KnobDragAssertionArgs) =>
_knobDragsCorrectly('up')(...args);
export const knobDragsUpCorrectly = async (props: KnobDragAssertionProps) =>
_knobDragsCorrectly('up')(props);

export const knobDragsLeftCorrectly = async (...args: KnobDragAssertionArgs) =>
_knobDragsCorrectly('left')(...args);
export const knobDragsLeftCorrectly = async (props: KnobDragAssertionProps) =>
_knobDragsCorrectly('left')(props);

export const knobDragsRightCorrectly = async (...args: KnobDragAssertionArgs) =>
_knobDragsCorrectly('right')(...args);
export const knobDragsRightCorrectly = async (props: KnobDragAssertionProps) =>
_knobDragsCorrectly('right')(props);

export const sourceCodeLinkIsValid = async ({
link,
Expand Down
95 changes: 49 additions & 46 deletions apps/docs/e2e/index.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ test.describe('Page title', () => {

test.describe('Repository link', () => {
test('has correct reference', async ({page}) => {
const repositoryLink = locators.repositoryLink(page);
const repositoryLink = locators.repositoryLink({page});
await expect(repositoryLink).toBeVisible();
await expect(repositoryLink).toHaveAttribute(
'href',
Expand All @@ -23,7 +23,7 @@ test.describe('Repository link', () => {
});

test('opens GitHub repository page', async ({page}) => {
const repositoryLink = locators.repositoryLink(page);
const repositoryLink = locators.repositoryLink({page});
await repositoryLink.click();

const repositoryPage = await page.waitForEvent('popup');
Expand All @@ -35,40 +35,40 @@ test.describe('Repository link', () => {

test.describe('Decorative knobs', () => {
test('have correct default values and drag behaviour', async ({page}) => {
const knobStone = locators.decorativeKnobStone(page);
const knobPink = locators.decorativeKnobPink(page);
const knobGreen = locators.decorativeKnobGreen(page);
const knobSky = locators.decorativeKnobSky(page);

await expects.knobValueIsEqualTo(knobStone, {valueNow: 0});
await expects.knobValueTextIs(knobStone, {valueText: '0 units'});
await expects.knobDragsUpCorrectly(knobStone, {valueNow: 0, page});

await expects.knobValueIsEqualTo(knobPink, {valueNow: 40});
await expects.knobValueTextIs(knobPink, {valueText: '40 units'});
await expects.knobDragsDownCorrectly(knobPink, {valueNow: 40, page});

await expects.knobValueIsEqualTo(knobGreen, {valueNow: 80});
await expects.knobValueTextIs(knobGreen, {valueText: '80 units'});
await expects.knobDragsUpCorrectly(knobGreen, {valueNow: 80, page});

await expects.knobValueIsEqualTo(knobSky, {valueNow: 100});
await expects.knobValueTextIs(knobSky, {valueText: '100 units'});
await expects.knobDragsDownCorrectly(knobSky, {valueNow: 100, page});
const knobStone = locators.decorativeKnobStone({page});
const knobPink = locators.decorativeKnobPink({page});
const knobGreen = locators.decorativeKnobGreen({page});
const knobSky = locators.decorativeKnobSky({page});

await expects.knobValueIsEqualTo({knob: knobStone, valueNow: 0});
await expects.knobValueTextIs({knob: knobStone, valueText: '0 units'});
await expects.knobDragsUpCorrectly({knob: knobStone, valueNow: 0, page});

await expects.knobValueIsEqualTo({knob: knobPink, valueNow: 40});
await expects.knobValueTextIs({knob: knobPink, valueText: '40 units'});
await expects.knobDragsDownCorrectly({knob: knobPink, valueNow: 40, page});

await expects.knobValueIsEqualTo({knob: knobGreen, valueNow: 80});
await expects.knobValueTextIs({knob: knobGreen, valueText: '80 units'});
await expects.knobDragsUpCorrectly({knob: knobGreen, valueNow: 80, page});

await expects.knobValueIsEqualTo({knob: knobSky, valueNow: 100});
await expects.knobValueTextIs({knob: knobSky, valueText: '100 units'});
await expects.knobDragsDownCorrectly({knob: knobSky, valueNow: 100, page});
});
});

test.describe('"Simple linear knob" example', () => {
let container: Locator;

test.beforeEach(({page}) => {
container = locators.exampleContainer(page, 'Simple linear knob');
container = locators.exampleContainer({page, name: 'Simple linear knob'});
});

test('has "View source" link leading to "KnobPercentage.tsx" source code file', async ({
page,
}) => {
const viewSourceLink = locators.exampleViewSourceLink(container);
const viewSourceLink = locators.exampleViewSourceLink({container});
await expects.sourceCodeLinkIsValid({
link: viewSourceLink,
page,
Expand All @@ -80,21 +80,21 @@ test.describe('"Simple linear knob" example', () => {
let knob: Locator;

test.beforeEach(() => {
knob = locators.exampleKnob(container, 'Dry/Wet');
knob = locators.exampleKnob({container, name: 'Dry/Wet'});
});

test('has correct default value', async () => {
const knobOutput = locators.exampleKnobOutput(container);
await expects.knobValueIsEqualTo(knob, {valueNow: 50});
await expects.knobValueTextIs(knob, {knobOutput, valueText: '50%'});
const knobOutput = locators.exampleKnobOutput({container});
await expects.knobValueIsEqualTo({knob, valueNow: 50});
await expects.knobValueTextIs({knob, knobOutput, valueText: '50%'});
});

test('has correct drag down behaviour', async ({page}) => {
await expects.knobDragsDownCorrectly(knob, {valueNow: 50, page});
await expects.knobDragsDownCorrectly({knob, valueNow: 50, page});
});

test('has correct drag up behaviour', async ({page}) => {
await expects.knobDragsUpCorrectly(knob, {valueNow: 50, page});
await expects.knobDragsUpCorrectly({knob, valueNow: 50, page});
});
});
});
Expand All @@ -103,13 +103,13 @@ test.describe('"Interpolated knob" example', () => {
let container: Locator;

test.beforeEach(({page}) => {
container = locators.exampleContainer(page, 'Interpolated knob');
container = locators.exampleContainer({page, name: 'Interpolated knob'});
});

test('has "View source" link leading to "KnobFrequency.tsx" source code file', async ({
page,
}) => {
const viewSourceLink = locators.exampleViewSourceLink(container);
const viewSourceLink = locators.exampleViewSourceLink({container});
await expects.sourceCodeLinkIsValid({
link: viewSourceLink,
page,
Expand All @@ -121,21 +121,21 @@ test.describe('"Interpolated knob" example', () => {
let knob: Locator;

test.beforeEach(() => {
knob = locators.exampleKnob(container, 'Frequency');
knob = locators.exampleKnob({container, name: 'Frequency'});
});

test('has correct default value', async () => {
const knobOutput = locators.exampleKnobOutput(container);
await expects.knobValueIsEqualTo(knob, {valueNow: 440});
await expects.knobValueTextIs(knob, {knobOutput, valueText: '440 Hz'});
const knobOutput = locators.exampleKnobOutput({container});
await expects.knobValueIsEqualTo({knob, valueNow: 440});
await expects.knobValueTextIs({knob, knobOutput, valueText: '440 Hz'});
});

test('has correct drag down behaviour', async ({page}) => {
await expects.knobDragsDownCorrectly(knob, {valueNow: 440, page});
await expects.knobDragsDownCorrectly({knob, valueNow: 440, page});
});

test('has correct drag up behaviour', async ({page}) => {
await expects.knobDragsUpCorrectly(knob, {valueNow: 440, page});
await expects.knobDragsUpCorrectly({knob, valueNow: 440, page});
});
});
});
Expand All @@ -144,13 +144,16 @@ test.describe('"Horizontal orientation" example', () => {
let container: Locator;

test.beforeEach(({page}) => {
container = locators.exampleContainer(page, 'Horizontal orientation');
container = locators.exampleContainer({
page,
name: 'Horizontal orientation',
});
});

test('has "View source" link leading to "KnobPercentageHorizontal.tsx" source code file', async ({
page,
}) => {
const viewSourceLink = locators.exampleViewSourceLink(container);
const viewSourceLink = locators.exampleViewSourceLink({container});
await expects.sourceCodeLinkIsValid({
link: viewSourceLink,
page,
Expand All @@ -162,21 +165,21 @@ test.describe('"Horizontal orientation" example', () => {
let knob: Locator;

test.beforeEach(() => {
knob = locators.exampleKnob(container, 'X');
knob = locators.exampleKnob({container, name: 'X'});
});

test('has correct default value', async () => {
const knobOutput = locators.exampleKnobOutput(container);
await expects.knobValueIsEqualTo(knob, {valueNow: 50});
await expects.knobValueTextIs(knob, {knobOutput, valueText: '50%'});
const knobOutput = locators.exampleKnobOutput({container});
await expects.knobValueIsEqualTo({knob, valueNow: 50});
await expects.knobValueTextIs({knob, knobOutput, valueText: '50%'});
});

test('has correct drag left behaviour', async ({page}) => {
await expects.knobDragsLeftCorrectly(knob, {valueNow: 50, page});
await expects.knobDragsLeftCorrectly({knob, valueNow: 50, page});
});

test('has correct drag right behaviour', async ({page}) => {
await expects.knobDragsRightCorrectly(knob, {valueNow: 50, page});
await expects.knobDragsRightCorrectly({knob, valueNow: 50, page});
});
});
});
Loading

0 comments on commit fff0c57

Please sign in to comment.