test: add playwright e2e test cases

static/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "static",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "type": "module",
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "packageManager": "[email protected]",
+  "devDependencies": {
+    "@playwright/test": "^1.52.0",
+    "@types/node": "^22.14.1",
+    "dotenv": "^16.5.0"
+  }
+}

static/playwright.config.ts

@@ -0,0 +1,100 @@
+import 'dotenv/config'
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  timeout: 24 * 1000,
+  testDir: './tests',
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: [ ['html', { open: 'never' }] ],
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL: 'http://localhost:3000',
+    browserName: "chromium",
+    viewport: { width: 1600, height: 1200 },
+    ignoreHTTPSErrors: true,
+    permissions: ['microphone'],
+    screenshot: 'only-on-failure',
+    trace: 'on-first-retry',
+    video: 'retain-on-failure',
+    launchOptions: {
+      ignoreDefaultArgs: ['--mute-audio'],
+      args: [
+        "--use-fake-device-for-media-stream",
+        "--use-fake-ui-for-media-stream",
+      ],
+    }
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      // grepInvert: /mobile/,
+      use: { 
+        ...devices['Desktop Chrome'],
+        viewport: { width: 1600, height: 1200 },
+      },
+    },
+
+    {
+      name: 'firefox',
+      // grepInvert: /mobile/,
+      use: { ...devices['Desktop Firefox'] },
+    },
+
+    {
+      name: 'webkit',
+      // grepInvert: /mobile/,
+      use: { ...devices['Desktop Safari'] },
+    },
+
+    // Test against mobile viewports. 
+    {
+      name: 'MobileChrome',
+      // grep: /mobile/,
+      use: { ...devices['Pixel 5'] },
+    },
+    {
+      name: 'MobileSafari',
+      // grep: /mobile/,
+      use: { ...devices['iPhone 12'] },
+    },
+
+    /*
+    // Test against branded browsers.
+    {
+      name: 'Microsoft Edge',
+      use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    },
+    {
+      name: 'Google Chrome',
+      use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    }*/
+  ],
+
+  /* Run your local dev server before starting the tests */
+  // webServer: {
+  //   command: 'npm run start',
+  //   url: 'http://127.0.0.1:3000',
+  //   reuseExistingServer: !process.env.CI,
+  // },
+});

static/pnpm-lock.yaml

@@ -0,0 +1,76 @@
+lockfileVersion: '9.0'
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
+importers:
+
+  .:
+    devDependencies:
+      '@playwright/test':
+        specifier: ^1.52.0
+        version: 1.52.0
+      '@types/node':
+        specifier: ^22.14.1
+        version: 22.14.1
+      dotenv:
+        specifier: ^16.5.0
+        version: 16.5.0
+
+packages:
+
+  '@playwright/[email protected]':
+    resolution: {integrity: sha512-uh6W7sb55hl7D6vsAeA+V2p5JnlAqzhqFyF0VcJkKZXkgnFcVG9PziERRHQfPLfNGx1C292a4JqbWzhR8L4R1g==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  '@types/[email protected]':
+    resolution: {integrity: sha512-u0HuPQwe/dHrItgHHpmw3N2fYCR6x4ivMNbPHRkBVP4CvN+kiRrKHWk3i8tXiO/joPwXLMYvF9TTF0eqgHIuOw==}
+
+  [email protected]:
+    resolution: {integrity: sha512-m/C+AwOAr9/W1UOIZUo232ejMNnJAJtYQjUbHoNTBNTJSvqzzDh7vnrei3o3r3m9blf6ZoDkvcw0VmozNRFJxg==}
+    engines: {node: '>=12'}
+
+  [email protected]:
+    resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+
+  [email protected]:
+    resolution: {integrity: sha512-l2osTgLXSMeuLZOML9qYODUQoPPnUsKsb5/P6LJ2e6uPKXUdPK5WYhN4z03G+YNbWmGDY4YENauNu4ZKczreHg==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  [email protected]:
+    resolution: {integrity: sha512-JAwMNMBlxJ2oD1kce4KPtMkDeKGHQstdpFPcPH3maElAXon/QZeTvtsfXmTMRyO9TslfoYOXkSsvao2nE1ilTw==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  [email protected]:
+    resolution: {integrity: sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==}
+
+snapshots:
+
+  '@playwright/[email protected]':
+    dependencies:
+      playwright: 1.52.0
+
+  '@types/[email protected]':
+    dependencies:
+      undici-types: 6.21.0
+
+  [email protected]: {}
+
+  [email protected]:
+    optional: true
+
+  [email protected]: {}
+
+  [email protected]:
+    dependencies:
+      playwright-core: 1.52.0
+    optionalDependencies:
+      fsevents: 2.3.2
+
+  [email protected]: {}

static/template.env

@@ -0,0 +1 @@
+DOMAIN=http://localhost:7860

static/tests/test-helper.ts

@@ -0,0 +1,29 @@
+import fs from 'node:fs'
+import { Page, expect } from '@playwright/test';
+ 
+interface CellObject {
+  table: number
+  row: number
+}
+
+ export const fileReader = async (filePath: string) => {
+    try {
+        const data = fs.readFileSync(filePath, { encoding: 'utf8' });
+        console.log("data length:", data.length, "#");
+        return data
+      } catch (err) {
+        console.error(err);
+        throw err
+      }
+}
+
+export const loopOverTablesAndClickOnUrls = async (page: Page, cellObj: CellObject, timeout=50) => {
+    let cellLabel = `id-table-${cellObj["table"]}-row-${cellObj["row"]}-nth`
+    console.log(`current aria-label:${cellLabel}...`)
+    console.log(`current cell content: '${cellLabel}'...`)
+    let currentCellElement = page.getByLabel(cellLabel).locator('a')
+    console.log("currentCellElement:", currentCellElement, "#")
+    await currentCellElement.click();
+    await page.waitForTimeout(timeout)
+    await expect(page.getByLabel('editor')).toHaveScreenshot(/** {stylePath: `${import.meta.dirname}/../index.css`} */);
+}

static/tests/test-word-frequency-1-table0-aria-snapshot.txt

@@ -0,0 +1,21 @@
+
+    - table "id-table-0-nth":
+      - caption
+      - rowgroup:
+        - row "word row nth offsets":
+          - cell "word"
+          - cell "row nth"
+          - cell "offsets"
+      - rowgroup:
+        - row "id-table-0-row-0-nth":
+          - cell "there"
+          - cell "0"
+          - cell "3,8"
+        - row "id-table-0-row-1-nth":
+          - cell "There"
+          - cell "0"
+          - cell "23,28"
+        - row "id-table-0-row-2-nth":
+          - cell "there"
+          - cell "0"
+          - cell "107,112"

static/tests/test-word-frequency-1-table13-aria-snapshot.txt

@@ -0,0 +1,13 @@
+
+    - table "id-table-13-nth":
+      - caption
+      - rowgroup:
+        - row "word row nth offsets":
+          - cell "word"
+          - cell "row nth"
+          - cell "offsets"
+      - rowgroup:
+        - row "id-table-13-row-0-nth":
+          - cell "table"
+          - cell "0"
+          - cell "101,106"

static/tests/test-word-frequency-1.spec.ts

@@ -0,0 +1,53 @@
+import 'dotenv/config'
+import { test, expect } from '@playwright/test';
+import { fileReader, loopOverTablesAndClickOnUrls } from './test-helper'
+
+test(`test: word frequency (short text input)`, async ({ page }) => {
+  const wordFreqTable0AriaSnapshot1FilePath = `${import.meta.dirname}/test-word-frequency-1-table0-aria-snapshot.txt`
+  const wordFreqTable13AriaSnapshot1FilePath = `${import.meta.dirname}/test-word-frequency-1-table13-aria-snapshot.txt`
+  await page.goto(process.env.DOMAIN ?? "http://localhost:7860/");
+  console.log(page.url())
+
+  await page.getByRole('button', { name: 'btn4-getWordFrequency' }).click();
+  let table0 = page.getByRole('table', { name: 'id-table-0-nth' })
+  let dataTable0 = await fileReader(wordFreqTable0AriaSnapshot1FilePath)
+  let table13 = page.getByRole('table', { name: 'id-table-13-nth' })
+  let dataTableLast = await fileReader(wordFreqTable13AriaSnapshot1FilePath)
+  await expect(table0).toMatchAriaSnapshot(dataTable0)
+  await expect(table13).toMatchAriaSnapshot(dataTableLast)
+
+  let cellArray1 = [{ table: 0, row: 0 }, { table: 0, row: 1 }, { table: 5, row: 0 }, { table: 13, row: 0 }]
+  for (let idx in cellArray1) {
+    await loopOverTablesAndClickOnUrls(page, cellArray1[idx], 0)
+  }
+  console.log("end!")
+});
+
+test(`test: word frequency (long, multi line text input)`, async ({ page }) => {
+  const testLLMTextFilePath = `${import.meta.dirname}/../../tests/events/llm_generated_story_1.txt`
+  await page.goto(process.env.DOMAIN ?? "http://localhost:7860/");
+  console.log(page.url())
+
+  console.log("Let's try with a much longer, multiline text while scrolling the conteditable div on click")
+  console.log("first upload a new, longer, multiline text then populate again the words frequency tables and re-try again the word links")
+
+  const fileChooserPromise = page.waitForEvent('filechooser');
+  await page.getByRole('button', { name: 'id-input-file-selector' }).click();
+  await page.waitForTimeout(200)
+  const fileChooser = await fileChooserPromise;
+  await fileChooser.setFiles(testLLMTextFilePath);
+  await page.waitForTimeout(200)
+
+  await page.getByRole('button', { name: 'btn4-getWordFrequency' }).click();
+  
+  console.log("try with a new array of tables/rows...")
+  let cellArray2 = [
+    { table: 1, row: 1 }, { table: 1, row: 2 }, { table: 1, row: 3 }, { table: 2, row: 0 }, { table: 2, row: 1 },
+    { table: 2, row: 2 }, { table: 0, row: 1 }, { table: 8, row: 1 }, { table: 8, row: 4 }, { table: 737, row: 1 },
+    { table: 737, row: 3 }
+  ]
+  for (let idx in cellArray2) {
+    await loopOverTablesAndClickOnUrls(page, cellArray2[idx], 100)
+  }
+  console.log("end!")
+});

static/tests/test-word-frequency-1.spec.ts-snapshots/test-word-frequency-short-text-input-1.aria.yml

@@ -0,0 +1,20 @@
+- table "id-table-0-nth":
+  - caption
+  - rowgroup:
+    - row "word row nth offsets":
+      - cell "word"
+      - cell "row nth"
+      - cell "offsets"
+  - rowgroup:
+    - row "id-table-0-row-0-nth":
+      - cell "there"
+      - cell "0"
+      - cell /\d+,\d+/
+    - row "id-table-0-row-1-nth":
+      - cell "There"
+      - cell "0"
+      - cell /\d+,\d+/
+    - row "id-table-0-row-2-nth":
+      - cell "there"
+      - cell "0"
+      - cell /\d+,\d+/

static/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "target": "es2016",
+    "module": "commonjs",
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "skipLibCheck": true
+  }
+}