From 501c983b99df5ed16b0d2369f1b7459ff0de2dbd Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Wed, 19 Mar 2025 19:10:51 -0700
Subject: [PATCH] test: Fix tests

---
 src/lib/components/Actions.svelte             |   8 +-
 src/lib/components/CopyInput.svelte           |   6 +-
 .../DiagramDocumentationButton.svelte         |   2 +
 src/lib/components/Editor.svelte              |   3 +-
 src/lib/constants.ts                          |   7 +
 tests/actions.spec.ts                         |  42 +++---
 tests/diagramUpdate.spec.ts                   | 122 +++---------------
 tests/docMap.spec.ts                          |  54 ++++----
 tests/test.ts                                 | 104 +++++++++++++++
 tests/utils.ts                                |   4 +-
 10 files changed, 188 insertions(+), 164 deletions(-)
 create mode 100644 src/lib/constants.ts
 create mode 100644 tests/test.ts

diff --git a/src/lib/components/Actions.svelte b/src/lib/components/Actions.svelte
index e05693e6..a1773723 100644
--- a/src/lib/components/Actions.svelte
+++ b/src/lib/components/Actions.svelte
@@ -6,6 +6,7 @@
   import { Input } from '$/components/ui/input';
   import { Separator } from '$/components/ui/separator';
   import * as ToggleGroup from '$/components/ui/toggle-group';
+  import { TID } from '$/constants';
   import { env } from '$/util/env';
   import { browser } from '$app/environment';
   import { waitForRender } from '$lib/util/autoSync';
@@ -190,7 +191,10 @@ ${svgString}`);
 
 {#snippet dualActionButton(text: string, download: (event: Event) => unknown, url?: string)}
   <div class="flex flex-grow gap-0.5">
-    <Button class={['flex-grow', url && 'rounded-r-none']} onclick={download}>
+    <Button
+      class={['flex-grow', url && 'rounded-r-none']}
+      onclick={download}
+      data-testid="download-{text}">
       <DownloadIcon />
       {text}
     </Button>
@@ -238,7 +242,7 @@ ${svgString}`);
       <CopyButton onclick={onCopyClipboard} label="Copy Image" />
     {/if}
     {#if $urlsStore.mdCode}
-      <CopyInput value={$urlsStore.mdCode} label="Copy Markdown" />
+      <CopyInput value={$urlsStore.mdCode} label="Copy Markdown" testID={TID.copyMarkdown} />
     {/if}
 
     <div class="flex w-full items-center gap-2">
diff --git a/src/lib/components/CopyInput.svelte b/src/lib/components/CopyInput.svelte
index b01937dd..e3eeac8f 100644
--- a/src/lib/components/CopyInput.svelte
+++ b/src/lib/components/CopyInput.svelte
@@ -7,14 +7,16 @@
   let {
     value,
     label = 'Copy',
-    type = 'url'
-  }: { value: string; label?: string; type?: InputType } = $props();
+    type = 'url',
+    testID
+  }: { value: string; label?: string; type?: InputType; testID?: string } = $props();
 </script>
 
 <div class="flex w-full items-center gap-2">
   <Input
     {type}
     {value}
+    data-testid={testID}
     onclick={(event) => {
       event.currentTarget.setSelectionRange(0, event.currentTarget.value.length);
     }} />
diff --git a/src/lib/components/DiagramDocumentationButton.svelte b/src/lib/components/DiagramDocumentationButton.svelte
index d37bc206..b2449c01 100644
--- a/src/lib/components/DiagramDocumentationButton.svelte
+++ b/src/lib/components/DiagramDocumentationButton.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import { Button } from '$/components/ui/button';
+  import { TID } from '$/constants';
   import type { DocumentationConfig } from '$/types';
   import { standardizeDiagramType } from '$/util/mermaid';
   import { stateStore } from '$/util/state';
@@ -99,6 +100,7 @@
 
 <Button
   variant="ghost"
+  data-testid={TID.diagramDocumentationButton}
   href={doc.url}
   target="_blank"
   title="View documentation for {doc.key.replace('Diagram', '')} diagram">
diff --git a/src/lib/components/Editor.svelte b/src/lib/components/Editor.svelte
index dd820bfc..e6c25350 100644
--- a/src/lib/components/Editor.svelte
+++ b/src/lib/components/Editor.svelte
@@ -2,6 +2,7 @@
   import McWrapper from '$/components/McWrapper.svelte';
   import MermaidChartIcon from '$/components/MermaidChartIcon.svelte';
   import { Button } from '$/components/ui/button';
+  import { TID } from '$/constants';
   import { env } from '$/util/env';
   import type { EditorMode } from '$lib/types';
   import { initEditor } from '$lib/util/monacoExtra';
@@ -112,7 +113,7 @@
 <div class="flex h-full flex-col pt-1">
   <div bind:this={divElement} id="editor" class="h-full flex-grow overflow-hidden"></div>
   {#if $stateStore.error instanceof Error}
-    <div class="flex flex-col text-sm">
+    <div class="flex flex-col text-sm" data-testid={TID.errorContainer}>
       <div class="flex items-center justify-between gap-2 bg-slate-900 p-2 text-white">
         <div class="flex w-fit items-center gap-2">
           <ExclamationCircleIcon class="size-6 text-destructive" aria-hidden="true" />
diff --git a/src/lib/constants.ts b/src/lib/constants.ts
new file mode 100644
index 00000000..5c47148e
--- /dev/null
+++ b/src/lib/constants.ts
@@ -0,0 +1,7 @@
+export const TID = {
+  copyMarkdown: 'copy-markdown',
+  diagramDocumentationButton: 'diagram-documentation-button',
+  downloadPNG: 'download-PNG',
+  downloadSVG: 'download-SVG',
+  errorContainer: 'error-container'
+} as const;
diff --git a/tests/actions.spec.ts b/tests/actions.spec.ts
index f710e55c..00a090b8 100644
--- a/tests/actions.spec.ts
+++ b/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);
diff --git a/tests/diagramUpdate.spec.ts b/tests/diagramUpdate.spec.ts
index aaa1dfec..08a1d778 100644
--- a/tests/diagramUpdate.spec.ts
+++ b/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');
   });
 });
diff --git a/tests/docMap.spec.ts b/tests/docMap.spec.ts
index d7c35daf..649ac56a 100644
--- a/tests/docMap.spec.ts
+++ b/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/);
   });
 });
diff --git a/tests/test.ts b/tests/test.ts
new file mode 100644
index 00000000..70678e47
--- /dev/null
+++ b/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';
diff --git a/tests/utils.ts b/tests/utils.ts
index 0c4864c1..f2842c9a 100644
--- a/tests/utils.ts
+++ b/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');