test: finish refactoring the test cases handling also mobile cases

static/playwright.config.ts

@@ -49,7 +49,6 @@ export default defineConfig({
     // { name: 'setup_classic_lite.koboldai.net', testMatch: 'setup-classic-lite.koboldai.net.ts' },
     {
       name: 'chromium',
-      grep: /test-classic-desktop/,
       use: { 
         ...devices['Desktop Chrome'],
         viewport: { width: 1600, height: 1200 },
@@ -57,7 +56,6 @@ export default defineConfig({
     },
     {
       name: 'firefox',
-      grep: /test-classic-desktop/,
       use: {
         ...devices['Desktop Firefox'],
         viewport: { width: 1600, height: 1200 },
@@ -65,75 +63,74 @@ export default defineConfig({
     },
     {
       name: 'webkit',
-      grep: /test-classic-desktop/,
       use: {
         ...devices['Desktop Safari'],
         viewport: { width: 1600, height: 1200 },
       },
     },
     {
-      name: 'responsive',
-      grep: /test-classic-responsive/,
+      name: 'responsivePortrait',
       use: { 
         ...devices['Desktop Chrome'],
+        viewport: { width: 600, height: 1260 },
+      }
+    },
+    {
+      name: 'responsiveLandscape',
+      use: { 
+        ...devices['Desktop Chrome'],
+        viewport: { width: 2000, height: 600 },
       }
     },
 
-    // Test against mobile viewports. 
+    // Test against mobile viewports.
     {
       name: 'MobileChrome',
-      grep: /test-classic-mobile-pixel/,
       use: { ...devices['Pixel 7'] },
     },
+    {
+      name: 'MobileChromeLandscape',
+      use: { ...devices['Pixel 7 landscape'] },
+    },
     {
       name: 'MobileSafari',
-      grep: /test-classic-mobile-iphone/,
       use: { ...devices['iPhone 13'] },
     },
     {
-      name: 'MobileSafari',
-      grep: /test-classic-landscape-mobile-iphone/,
+      name: 'MobileSafariLandscape',
       use: { ...devices['iPhone 13 landscape'] },
     },
 
     {
       name: 'iPad (gen 7)',
-      grep: /test-classic-ipad-seven/,
       use: { ...devices['iPad (gen 7)'] }
     },
     {
       name: 'iPad (gen 7) landscape',
-      grep: /test-classic-landscape-ipad-seven/,
       use: { ...devices['iPad (gen 7) landscape'] }
     },
     {
       name: 'iPad (gen 11)',
-      grep: /test-classic-ipad-eleven/,
       use: { ...devices['iPad (gen 11)'] }
     },
     {
       name: 'iPad (gen 11) landscape',
-      grep: /test-classic-landscape-ipad-eleven/,
       use: { ...devices['iPad (gen 11) landscape'] }
     },
     {
       name: 'iPad Mini',
-      grep: /test-classic-ipad-mini/,
       use: { ...devices['iPad Mini'] }
     },
     {
       name: 'iPad Mini landscape',
-      grep: /test-classic-landscape-ipad-mini/,
       use: { ...devices['iPad Mini landscape'] }
     },
     {
       name: 'iPad Pro 11',
-      grep: /test-classic-ipad-pro/,
       use: { ...devices['iPad Pro 11'] }
     },
     {
       name: 'iPad Pro 11 landscape',
-      grep: /test-classic-landscape-ipad-pro/,
       use: { ...devices['iPad Pro 11 landscape'] }
     }
     /*

static/tests/{test-classic-desktop-0-lite.koboldai.net.spec.ts → test-classic-0-lite.koboldai.net.spec.ts}

@@ -11,12 +11,16 @@ const expectedStringArray = [
   "Mr. Dursley was the director of a firm called Grunnings, which made drills. He was a big, beefy man with hardly any neck, although he did have a very large mustache.",
   `"Shouldn'ta lost me temper," he said ruefully, "but it didn't work anyway. Meant ter turn him into a pig, but I suppose he was so much like a pig anyway there wasn't much left ter do."`
 ]
+const editState = [
+  { state: "read-only", expectedFirstAriaSnapshot: `- text: /40\\d results/` },
+  { state: "editable", expectedFirstAriaSnapshot: `- text: /40\\d results/` }
+]
 
 test('test My Ghost Writer, desktop: navigate between the list/tables containing the stemming; check for sentences sorrounding the clicked words/0', async ({ page }: { page: Page }, workerInfo: TestInfo) => {
   const projectName = await initTest(page, workerInfo, testStoryJsonTxt)
   await fillInputFieldWithString(page, '');
   await page.waitForTimeout(200)
-  
+
   await expect(page.getByLabel('wordsearch_candidates_count')).toMatchAriaSnapshot(`- text: /2\\d\\d\\d\\d result\\(s\\) found/`);
   const wordsearch_results = page.getByLabel("wordsearch_results")
   await expect(wordsearch_results).toMatchAriaSnapshot({ name: `test-classic-desktop-0-wordsearch_results-0-${projectName}.txt` });
@@ -26,7 +30,7 @@ test('test My Ghost Writer, desktop: navigate between the list/tables containing
   await page.waitForTimeout(200)
   await expect(page.getByLabel('wordsearch_results')).toMatchAriaSnapshot(`- text: /40\\d results/`);
   await expect(wordsearch_results).toMatchAriaSnapshot({ name: `test-classic-desktop-0-wordsearch_results-1-${projectName}.txt` });
-  
+
   console.log("end!")
   await page.close()
 })
@@ -35,21 +39,33 @@ test('test My Ghost Writer, desktop: navigate between the list/tables containing
   const projectName = await initTest(page, workerInfo, testStoryJsonTxt)
   await fillInputFieldWithString(page, '');
   await page.waitForTimeout(200)
-  await expect(page.getByLabel('wordsearch_results')).not.toMatchAriaSnapshot(`- text: /40\\d results/`);
-  await page.getByLabel('id-div-candidate-1-nth').click();
-  await page.waitForTimeout(200)
-  ///
-  await scrollToBottomById(page, "gametext")
-  await scrollToTopById(page, "wordsearch_results")
-  const id0 = 'id-div-1-range-0-nth'
-  let clickedElement = page.getByLabel(id0)
-  await expect(clickedElement).toMatchAriaSnapshot({ name: `test-classic-desktop-0-wordsearch_results-2-${projectName}.txt` });
-  await expect(clickedElement).not.toHaveClass("background-border-clicked")
-  await clickedElement.click();
-  await page.waitForTimeout(200)
-  await expect(clickedElement).toHaveClass("background-border-clicked")
-  console.log(`clicked on id ${id0}, check for the expected string...`)
-  await expectVisibleTextWithWalker(page, "gametext", expectedStringArray[0])
+  for (let { state, expectedFirstAriaSnapshot } of Object.values(editState)) {
+    console.log(state, expectedFirstAriaSnapshot)
+    if (state === "editable") {
+      const toggleEditing = page.getByRole('checkbox', { name: 'Allow Editing' })
+      await toggleEditing.click()
+      await page.waitForTimeout(300)
+      await expect(toggleEditing).toBeChecked()
+    }
+
+    await expect(page.getByLabel('wordsearch_results')).not.toMatchAriaSnapshot(expectedFirstAriaSnapshot);
+    await page.getByLabel('id-div-candidate-1-nth').click();
+    await page.waitForTimeout(200)
+    await expect(page.getByLabel('wordsearch_results')).toMatchAriaSnapshot(expectedFirstAriaSnapshot);
+    ///
+    await scrollToBottomById(page, "gametext")
+    await scrollToTopById(page, "wordsearch_results")
+    const id0 = 'id-div-1-range-0-nth'
+    let clickedElement = page.getByLabel(id0)
+    await expect(clickedElement).toMatchAriaSnapshot({ name: `test-classic-desktop-0-wordsearch_results-2-${projectName}-${state}.txt` });
+    await expect(clickedElement).not.toHaveClass("background-border-clicked")
+    await clickedElement.click();
+    await page.waitForTimeout(200)
+    await expect(clickedElement).toHaveClass("background-border-clicked")
+    console.log(`clicked on id ${id0}, check for the expected string...`)
+    await expectVisibleTextWithWalker(page, "gametext", expectedStringArray[0])
+    console.log(`${projectName}, state ${state} done.`)
+  }
   console.log("end!")
   await page.close()
 })
@@ -88,14 +104,11 @@ test('test My Ghost Writer, desktop: sort by frequency and alphabetically', asyn
   await page.locator('#wordsearch_sort').selectOption('1');
   await page.getByRole('button', { name: 'id-perform-wordsearch' }).click();
   await expect(wordsearch_results).toMatchAriaSnapshot({ name: `test-classic-desktop-0-wordsearch_results-4-${projectName}.txt` });
-  
-  await page.locator('#wordsearch_sort').selectOption('0');
-  await page.getByRole('button', { name: 'id-perform-wordsearch' }).click();
-  await expect(wordsearch_results).toMatchAriaSnapshot({ name: `test-classic-desktop-0-wordsearch_results-5-${projectName}.txt` });
 
+  await page.locator('#wordsearch_sort').selectOption('0');
   await page.getByRole('button', { name: 'id-perform-wordsearch' }).click();
   await expect(page.getByLabel('wordsearch_candidates_count')).toMatchAriaSnapshot(`- text: /2\\d\\d\\d\\d result\\(s\\) found/`);
-  await expect(wordsearch_results).toMatchAriaSnapshot({ name: `test-classic-desktop-0-wordsearch_results-6-${projectName}.txt` });  
+  await expect(wordsearch_results).toMatchAriaSnapshot({ name: `test-classic-desktop-0-wordsearch_results-5-${projectName}.txt` });
 
   console.log("end!")
   await page.close()

static/tests/test-helper.ts

@@ -346,9 +346,22 @@ export async function initTest(page: Page, workerInfo: TestInfo, filepath: strin
   // 2. Activate the required UI mode (e.g., switch to classic or advanced UI)
   await page.getByRole('button', { name: 'Set UI' }).click();
 
+  const mobileButtonGlobalMenu = page.getByRole('button', { name: 'id-mobile-main-menu-options' })
+  if (await mobileButtonGlobalMenu.isVisible({timeout: 500})) {
+    await mobileButtonGlobalMenu.click();
+    await page.waitForTimeout(200)
+    console.log("#found mobile button for global menu, open it to prepare json story upload!")
+  }
+
   // 3. Upload a saved JSON story file to provide long text content for analysis
   await uploadFileWithPageAndFilepath(page, filepath)
   // activate wordsearch
+  
+  if (await mobileButtonGlobalMenu.isVisible({timeout: 500})) {
+    await mobileButtonGlobalMenu.click();
+    await page.waitForTimeout(200)
+    console.log("#found mobile button for global menu, open it to toggle word search!")
+  }
   await page.getByRole('link', { name: 'Settings' }).click();
   await page.getByRole('checkbox', { name: 'wordsearch_toggle' }).check();
   await page.getByRole('button', { name: 'OK' }).click();