test(playwright): added helper fixtures for tests

Author: d3m1d0v

tests/playwright/core/editor.ts

@@ -0,0 +1,104 @@
+import type {Expect, Page} from '@playwright/test';
+
+import type {DataTransferType, MarkdownEditorMode} from 'src';
+
+class MarkdownEditorLocators {
+    readonly component;
+    readonly editor;
+
+    readonly settingsButton;
+    readonly settingsContent;
+
+    readonly contenteditable;
+
+    constructor(page: Page) {
+        this.component = page.getByTestId('playground-md-editor');
+        this.editor = page.getByTestId('g-md-editor-mode');
+
+        this.settingsButton = page.getByTestId('g-md-settings-button');
+        this.settingsContent = page.getByTestId('g-md-settings-content');
+
+        this.contenteditable = this.editor.locator('[contenteditable=true]');
+    }
+}
+
+type PasteData = Partial<Record<DataTransferType, string>>;
+
+export class MarkdownEditorPage {
+    protected readonly page: Page;
+    protected readonly expect: Expect;
+    protected readonly locators;
+
+    constructor(page: Page, expect: Expect) {
+        this.page = page;
+        this.expect = expect;
+
+        this.locators = new MarkdownEditorLocators(page);
+    }
+
+    async getMode(): Promise<MarkdownEditorMode> {
+        const value = await this.locators.editor.getAttribute('data-mode');
+        const mode = value as MarkdownEditorMode | null;
+        if (mode === 'wysiwyg' || mode === 'markup') return mode;
+        throw new Error(`MarkdownEditorPage.getMode(): unknown editor mode "${mode}"`);
+    }
+
+    async openSettingsPopup() {
+        if (await this.locators.settingsContent.isVisible()) return;
+
+        await this.locators.settingsButton.click();
+        await this.locators.settingsContent.waitFor({state: 'visible'});
+    }
+
+    async switchMode(mode: MarkdownEditorMode) {
+        if ((await this.getMode()) === mode) return;
+
+        await this.openSettingsPopup();
+        await this.locators.settingsContent.getByTestId(`md-settings-mode-${mode}`).click();
+        await this.assertMode(mode);
+    }
+
+    async assertMode(mode: MarkdownEditorMode) {
+        await this.expect.poll(() => this.getMode()).toBe(mode);
+    }
+
+    async blur() {
+        await this.locators.contenteditable.blur();
+    }
+
+    async press(key: string) {
+        await this.locators.contenteditable.press(key);
+    }
+
+    async clearContent() {
+        await this.press('ControlOrMeta+A');
+        await this.press('Backspace');
+    }
+
+    async paste(value: PasteData | string) {
+        const data: PasteData = typeof value === 'string' ? {'text/plain': value} : value;
+
+        await this.locators.contenteditable.evaluate((element, data) => {
+            const clipboardData = new DataTransfer();
+
+            for (const [key, value] of Object.entries(data)) {
+                clipboardData.setData(key, value);
+            }
+
+            element.focus();
+            element.dispatchEvent(new ClipboardEvent('paste', {clipboardData}));
+        }, data);
+    }
+
+    async fill(text: string) {
+        this.locators.contenteditable.fill(text);
+    }
+
+    async selectTextIn(selector?: string) {
+        let loc = this.locators.contenteditable;
+        if (selector) loc = loc.locator(selector);
+
+        loc.selectText();
+        await this.page.waitForTimeout(100);
+    }
+}

tests/playwright/core/helpers.ts

@@ -0,0 +1,33 @@
+import type {BrowserContext, Page} from '@playwright/test';
+
+class Keymap {
+    readonly selectAll = 'ControlOrMeta+A';
+    readonly copy = 'ControlOrMeta+C';
+    readonly cut = 'ControlOrMeta+X';
+    readonly paste = 'ControlOrMeta+V';
+}
+
+export class PlaywrightHelpers {
+    readonly keys = new Keymap();
+
+    private readonly page;
+    private readonly context;
+
+    constructor({page, context}: {page: Page; context: BrowserContext}) {
+        this.page = page;
+        this.context = context;
+    }
+
+    async getClipboardData() {
+        await this.context.grantPermissions(['clipboard-read']);
+        return this.page.evaluate(async () => {
+            const item = (await navigator.clipboard.read())[0];
+            const data: Record<string, string> = {};
+            const types = Array.from(item.types);
+            for (const type of types) {
+                data[type] = await (await item.getType(type)).text();
+            }
+            return data;
+        });
+    }
+}

tests/playwright/core/index.ts

@@ -1,6 +1,8 @@
-import {test as base} from '@playwright/experimental-ct-react';
+import {test as base, expect} from '@playwright/experimental-ct-react';
 
+import {MarkdownEditorPage} from './editor';
 import {expectScreenshot} from './expectScreenshot';
+import {PlaywrightHelpers} from './helpers';
 import {mount} from './mount';
 import type {Fixtures} from './types';
 import {wait} from './wait';
@@ -9,6 +11,15 @@ export const test = base.extend<Fixtures>({
     mount,
     expectScreenshot,
     wait,
+    editor: async ({page}, use) => {
+        const editor = new MarkdownEditorPage(page, expect);
+        await use(editor);
+    },
+    helpers: async ({page, context}, use) => {
+        const helpers = new PlaywrightHelpers({page, context});
+        await use(helpers);
+    },
+    platform: [process.platform, {scope: 'test'}],
 });
 
 export {expect} from '@playwright/experimental-ct-react';

tests/playwright/core/types.ts

@@ -12,6 +12,9 @@ import type {
     TestFixture,
 } from '@playwright/test';
 
+import type {MarkdownEditorPage} from './editor';
+import type {PlaywrightHelpers} from './helpers';
+
 interface ComponentFixtures {
     mount<HooksConfig>(
         component: JSX.Element,
@@ -31,6 +34,9 @@ export type Fixtures = {
     mount: MountFixture;
     expectScreenshot: ExpectScreenshotFixture;
     wait: WaitFixture;
+    editor: MarkdownEditorPage;
+    helpers: PlaywrightHelpers;
+    platform: NodeJS.Platform;
 };
 
 export type MountFixture = ComponentFixtures['mount'];