Skip to content
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

Jump to bottom

Refactor E2E tests helper signatures #45

Merged
merged 2 commits into from
Oct 22, 2023
Merged

Refactor E2E tests helper signatures #45

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
16684f3
E2E refactor: locators
satelllte Oct 22, 2023
241ec13
E2E refactor: expects
satelllte Oct 22, 2023
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
96 changes: 50 additions & 46 deletions apps/docs/e2e/expects.ts
View file
Open in desktop
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
Open in desktop
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