test: Fix tests

tests/actions.spec.ts

@@ -1,17 +1,15 @@
-import { expect, test } from '@playwright/test';
-import { typeInEditor, verifyFileSizeGreaterThan } from './utils';
+import { expect, test } from './test';
 
 test.describe('Check actions', () => {
-  test.beforeEach(async ({ page }) => {
-    await page.goto('/edit');
-    await page.getByText('Actions', { exact: true }).click();
+  test.beforeEach(async ({ editPage }) => {
+    await editPage.toggleSampleDiagrams();
+    await editPage.toggleActions();
   });
 
-  test('should update markdown code', async ({ page }) => {
-    const markdown = page.locator('#markdown');
-    const oldText = await markdown.inputValue();
-    await typeInEditor(page, 'C --> HistoryTest', { bottom: true, newline: true });
-    const newText = await markdown.inputValue();
+  test('should update markdown code', async ({ editPage }) => {
+    const oldText = await editPage.markdownInput.inputValue();
+    await editPage.typeInEditor('C --> HistoryTest', { bottom: true, newline: true });
+    const newText = await editPage.markdownInput.inputValue();
     expect(newText).not.toBe(oldText);
   });
 
@@ -23,26 +21,16 @@ test.describe('Check actions', () => {
     await expect(page.getByText('Go shopping!!')).toBeVisible();
   });
 
-  test('should download png and svg', async ({ page }) => {
-    const downloadPNGPromise = verifyFileSizeGreaterThan(page, 'diagram', 'png', 29_000);
-    await page.locator('#downloadPNG').click();
-    const firstPngSize = await downloadPNGPromise;
-
-    const downloadSVGPromise = verifyFileSizeGreaterThan(page, 'diagram', 'svg', 10_000);
-    await page.locator('#downloadSVG').click();
-    const firstSvgSize = await downloadSVGPromise;
+  test('should download png and svg', async ({ editPage }) => {
+    const firstPngSize = await editPage.checkAndDownloadPNG(80_000);
+    const firstSvgSize = await editPage.downloadSVG(10_000);
 
     // Verify downloaded file is different for different diagrams
-    await page.getByText('Sample Diagrams').click();
-    await page.getByText('ER', { exact: true }).click();
+    await editPage.toggleSampleDiagrams();
+    await editPage.loadSampleDiagram('ER');
 
-    const downloadPNGPromise2 = verifyFileSizeGreaterThan(page, 'diagram', 'png', 35_000);
-    await page.locator('#downloadPNG').click();
-    const secondPngSize = await downloadPNGPromise2;
-
-    const downloadSVGPromise2 = verifyFileSizeGreaterThan(page, 'diagram', 'svg', 11_000);
-    await page.locator('#downloadSVG').click();
-    const secondSvgSize = await downloadSVGPromise2;
+    const secondPngSize = await editPage.checkAndDownloadPNG(110_000);
+    const secondSvgSize = await editPage.downloadSVG(11_000);
 
     // Verify files are actually different
     expect(firstPngSize).not.toBe(secondPngSize);

tests/diagramUpdate.spec.ts

@@ -1,63 +1,10 @@
-import { expect, test } from '@playwright/test';
-import { typeInEditor } from './utils';
+import { test } from './test';
 
 test.describe('Auto sync tests', () => {
-  test.beforeEach(async ({ page }) => {
-    await page.goto('/');
-    await expect(page).toHaveURL(/.*\/edit#pako/);
-  });
-
-  test('should dim diagram when code is edited', async ({ page }) => {
-    await page.getByText('Auto sync').click();
-    await expect(page.locator('#view')).not.toHaveClass(/outOfSync/);
-    await expect(page.locator('#errorContainer')).not.toBeVisible();
-    await typeInEditor(page, '  C --> Test', { bottom: true });
-    await expect(page.locator('#view')).toHaveClass(/outOfSync/);
-    await expect(page.locator('#errorContainer')).toContainText('Diagram out of sync.');
-    const codeStore = await page.evaluate(() => localStorage.getItem('codeStore'));
-    expect(codeStore).toBeTruthy();
-  });
-
-  test('should update diagram when shortcut is used', async ({ page }) => {
-    await page.getByText('Auto sync').click();
-    await expect(page.locator('#view')).not.toHaveClass(/outOfSync/);
-    await typeInEditor(page, '  C --> Test');
-    await expect(page.locator('#view')).toHaveClass(/outOfSync/);
-    await expect(page.locator('#errorContainer')).toContainText('Diagram out of sync.');
-    await page.locator('#editor').click();
-    await page.keyboard.press('Control+Enter');
-    await expect(page.locator('#errorContainer')).not.toBeVisible();
-    await expect(page.locator('#view')).not.toHaveClass(/outOfSync/);
-  });
-
-  test('should show/hide sync button with auto sync', async ({ page }) => {
-    await expect(page.locator('[data-cy=sync]')).not.toBeVisible();
-    await page.getByText('Auto sync').click();
-    await expect(page.locator('[data-cy=sync]')).toBeVisible();
-    await page.locator('#autoSync').check();
-    await expect(page.locator('[data-cy=sync]')).not.toBeVisible();
-  });
-
-  test('should not dim diagram when code is in sync', async ({ page }) => {
-    await page.getByText('Auto sync').click();
-    await expect(page.locator('#view')).not.toHaveClass(/outOfSync/);
-    await typeInEditor(page, '  C --> Test');
-    await expect(page.locator('#view')).toHaveClass(/outOfSync/);
-    await page.locator('[data-cy=sync]').click();
-    await expect(page.locator('#view')).not.toHaveClass(/outOfSync/);
-    await page.locator('#autoSync').check();
-    await typeInEditor(page, 'ing');
-    await expect(page.locator('#view')).not.toHaveClass(/outOfSync/);
-    const codeStore = await page.evaluate(() => localStorage.getItem('codeStore'));
-    expect(codeStore).toBeTruthy();
-  });
-
   test('should automatically defer rendering when complex diagrams are edited', async ({
-    page
+    editPage
   }) => {
-    await expect(page.locator('#view')).not.toHaveClass(/outOfSync/);
-    await typeInEditor(
-      page,
+    await editPage.typeInEditor(
       `
 A & B & C & D & E --> F & G & H & I & J & K
 A & B & C & D & E --> F & G & H & I & J & K
@@ -66,62 +13,35 @@ A & B & C & D & E --> F & G & H & I & J & K
 A & B & C & D & E --> F & G & H & I & J & K
 A & B & C & D & E --> F & G & H & I & J & K
 A & B & C & D & E --> F & G & H & I & J & K
-A & B & C & D & E --> F & G & H & I & J & K`
+A & B & C & D & E --> F & G & H & I & J & K & LongTest`
     );
-    await expect(page.locator('#view')).toHaveClass(/outOfSync/);
-    await expect(page.locator('#errorContainer')).toContainText(
-      'It will be updated automatically.'
-    );
-    // The class should be removed automatically after 1 second
-    await expect(page.locator('#view')).not.toHaveClass(/outOfSync/, { timeout: 2000 });
+    await editPage.checkTextNotInView('LongTest');
+    await editPage.checkTextInView('LongTest');
   });
 
-  test('supports commenting code out/in', async ({ page }) => {
-    await page.locator('#editor').getByText('fa-car').click();
-    await page.waitForTimeout(1000);
-    await page.keyboard.press('Control+/');
-
-    await expect(page.locator('#view').getByText('Car')).not.toBeVisible();
-
-    await page.keyboard.press('Control+/');
-    await expect(page.locator('#view').getByText('Car')).toBeVisible();
+  test('supports commenting code out/in', async ({ editPage }) => {
+    await editPage.toggleComment('fa-car');
+    await editPage.checkTextNotInView('Car');
+    await editPage.toggleComment('fa-car');
+    await editPage.checkTextInView('Car');
   });
 
-  test('supports editing code when code is incorrect', async ({ page }) => {
-    await page.goto(
+  test('supports editing code when code is incorrect', async ({ editPage }) => {
+    await editPage.start(
       '/edit#pako:eNpljjEKwzAMRa8SNOcEnlt6gK5eVFvYJsgOqkwpIXevg9smEE1PnyfxF3DFExgISW-CczQ2D21cYU7a-SGYXRwyvTp9jUhuKlVP-eHy7zA-leQsMEmg_QOM0BLG5FujZVMsaCQmC6ahR5ks2Lw2r84ela4-aREwKpVGwKrl_s7ut3fnkjAIcg_XDzuaUhs'
     );
-    await expect(page.getByText('Diagram syntax error')).not.toBeVisible();
-    await typeInEditor(page, 'branch test', { bottom: true, newline: true });
-    await expect(page.locator('#editor')).toContainText('branch test');
-    await expect(
-      page.getByText('Error: Trying to checkout branch which is not yet created.')
-    ).toBeVisible();
+    await editPage.typeInEditor('branch test', { bottom: true, newline: true });
+    await editPage.checkTextNotInView('test');
+    await editPage.checkInEditor('branch test');
+    await editPage.checkError('Error: Trying to checkout branch which is not yet created.');
   });
 
-  test('should update diagram after entire text is removed', async ({ page }) => {
-    await page.locator('#editor').click();
-    await page.keyboard.press('Control+KeyA');
-    await page.keyboard.press('Backspace');
-    await typeInEditor(
-      page,
+  test('should update diagram after entire text is removed', async ({ editPage }) => {
+    await editPage.clearEditor();
+    await editPage.typeInEditor(
       `graph LR
 	A-->Bike`
     );
-    await expect(page.locator('#view').getByText('Bike')).toBeVisible();
-  });
-});
-
-test.describe('Pan and Zoom', () => {
-  test.beforeEach(async ({ page }) => {
-    await page.goto('/');
-  });
-
-  test('should toggle pan and zoom', async ({ page }) => {
-    await expect(page.locator('#svg-pan-zoom-reset-pan-zoom')).not.toBeVisible();
-    await page.getByText('Pan & Zoom').click();
-    await expect(page.locator('#svg-pan-zoom-reset-pan-zoom')).toBeVisible();
-    await page.getByText('Pan & Zoom').click();
-    await expect(page.locator('#svg-pan-zoom-reset-pan-zoom')).not.toBeVisible();
+    await editPage.checkTextInView('Bike');
   });
 });

tests/docMap.spec.ts

@@ -1,42 +1,38 @@
-import { expect, test } from '@playwright/test';
+import { test } from './test';
 
 test.describe('Editor docs tests', () => {
-  test.beforeEach(async ({ page }) => {
-    await page.goto('/edit');
-    await page.getByText('Sample Diagrams').click();
+  test.beforeEach(async ({ editPage }) => {
+    await editPage.toggleSampleDiagrams();
   });
 
-  test('Test default loading', async ({ page }) => {
-    await expect(page.locator('[data-cy=docs][href^="https://mermaid.js.org/"]')).toBeVisible();
+  test('Test default loading', async ({ editPage }) => {
+    await editPage.checkDocURL(/mermaid\.js\.org\//);
   });
 
   test('Test to see if the correct URL loads when changing from one diagram to other', async ({
-    page
+    editPage
   }) => {
-    await page.getByText('Flow', { exact: true }).click();
-    await expect(page.locator('[data-cy=docs][href$="/syntax/flowchart.html"]')).toBeVisible();
+    await editPage.loadSampleDiagram('Flow');
+    await editPage.checkDocURL(/syntax\/flowchart\.html/);
+    await editPage.setEditorMode('Config');
+    await editPage.checkDocURL(/syntax\/flowchart\.html#configuration/);
+    await editPage.setEditorMode('Code');
+    await editPage.checkDocURL(/syntax\/flowchart\.html/);
 
-    await page.getByText('Config').click();
-    await expect(
-      page.locator('[data-cy=docs][href$="/syntax/flowchart.html#configuration"]')
-    ).toBeVisible();
-
-    await page.getByText('Sequence').click();
-    await expect(
-      page.locator('[data-cy=docs][href$="/syntax/sequenceDiagram.html#configuration"]')
-    ).toBeVisible();
-
-    await page.getByText('Code', { exact: true }).click();
-    await expect(
-      page.locator('[data-cy=docs][href$="/syntax/sequenceDiagram.html"]')
-    ).toBeVisible();
+    await editPage.loadSampleDiagram('Sequence');
+    await editPage.checkDocURL(/syntax\/sequenceDiagram\.html/);
+    await editPage.setEditorMode('Config');
+    await editPage.checkDocURL(/syntax\/sequenceDiagram\.html#configuration/);
+    await editPage.setEditorMode('Code');
+    await editPage.checkDocURL(/syntax\/sequenceDiagram\.html/);
   });
 
-  test("Test to check URLs for a case where config URL doesn't exist", async ({ page }) => {
-    await page.getByText('State').click();
-    await expect(page.locator('[data-cy=docs][href$="/syntax/stateDiagram.html"]')).toBeVisible();
-
-    await page.getByText('Config').click();
-    await expect(page.locator('[data-cy=docs][href$="/syntax/stateDiagram.html"]')).toBeVisible();
+  test("Test to check URLs for a case where config URL doesn't exist", async ({ editPage }) => {
+    await editPage.loadSampleDiagram('State');
+    await editPage.checkDocURL(/syntax\/stateDiagram\.html/);
+    await editPage.setEditorMode('Config');
+    await editPage.checkDocURL(/syntax\/stateDiagram\.html/);
+    await editPage.setEditorMode('Code');
+    await editPage.checkDocURL(/syntax\/stateDiagram\.html/);
   });
 });

tests/test.ts

@@ -0,0 +1,104 @@
+import { TID } from '$/constants';
+import { test as base, expect, type Locator, type Page } from '@playwright/test';
+import { verifyFileSizeGreaterThan, type EditorOptions } from './utils';
+
+export class EditorPage {
+  readonly editor: Locator;
+  readonly markdownInput: Locator;
+  readonly view: Locator;
+
+  constructor(readonly page: Page) {
+    this.editor = page.locator('css=.monaco-editor');
+    this.markdownInput = page.getByTestId(TID.copyMarkdown);
+    this.view = page.locator('#view');
+  }
+
+  async start(url = '/edit') {
+    await this.page.goto(url);
+    await expect(this.page).toHaveURL(/.*\/edit#pako/);
+  }
+
+  async typeInEditor(text: string, { bottom = true, newline = false }: EditorOptions = {}) {
+    await this.editor.click();
+    if (bottom) {
+      await this.page.keyboard.press('PageDown');
+    }
+    if (newline) {
+      await this.page.keyboard.press('Enter');
+    }
+    await this.page.keyboard.type(text, { delay: 10 });
+  }
+
+  async clearEditor() {
+    await this.editor.click();
+    await this.page.keyboard.press('Control+KeyA');
+    await this.page.keyboard.press('Backspace');
+  }
+
+  async toggleActions() {
+    await this.page.getByText('Actions', { exact: true }).click();
+  }
+
+  async toggleSampleDiagrams() {
+    await this.page.getByText('Sample Diagrams', { exact: true }).click();
+  }
+
+  async checkAndDownloadPNG(expectedSize: number) {
+    const downloadPNGPromise = verifyFileSizeGreaterThan(this.page, 'diagram', 'png', expectedSize);
+    await this.page.getByTestId(TID.downloadPNG).click();
+    return await downloadPNGPromise;
+  }
+
+  async downloadSVG(expectedSize: number) {
+    const downloadSVGPromise = verifyFileSizeGreaterThan(this.page, 'diagram', 'svg', expectedSize);
+    await this.page.getByTestId(TID.downloadSVG).click();
+    return await downloadSVGPromise;
+  }
+
+  async loadSampleDiagram(diagramName: string) {
+    await this.page.getByText(diagramName, { exact: true }).click();
+  }
+
+  async checkTextInView(text: string) {
+    await expect(this.view).toContainText(text);
+  }
+
+  async checkTextNotInView(text: string) {
+    await expect(this.view).not.toContainText(text);
+  }
+
+  async checkError(text: string) {
+    await expect(this.page.getByTestId(TID.errorContainer)).toContainText(text);
+  }
+
+  async checkInEditor(text: string) {
+    await expect(this.editor).toContainText(text);
+  }
+
+  async toggleComment(text: string) {
+    await this.editor.getByText(text).click();
+    await this.page.keyboard.press('Control+/');
+  }
+
+  async setEditorMode(mode: 'Code' | 'Config') {
+    await this.page.getByRole('tab').getByText(mode).click();
+  }
+
+  async checkDocURL(url: string | RegExp) {
+    await expect(this.page.getByTestId(TID.diagramDocumentationButton)).toHaveAttribute(
+      'href',
+      url
+    );
+  }
+}
+
+export const test = base.extend<{ editPage: EditorPage }>({
+  editPage: async ({ page }, use) => {
+    const editorPage = new EditorPage(page);
+    await editorPage.start();
+    await editorPage.toggleSampleDiagrams();
+    await use(editorPage);
+  }
+});
+
+export { expect } from '@playwright/test';

tests/utils.ts

@@ -21,8 +21,8 @@ export async function typeInEditor(
   text: string,
   { bottom = true, newline = false }: EditorOptions = {}
 ) {
-  await page.locator('#editor').click();
-  const editor = page.locator('#editor');
+  const editor = page.locator('css=.monaco-editor');
+  await editor.click();
 
   if (bottom) {
     await editor.locator('textarea').press('PageDown');