Refactor entry-edit-persists tests and page and component models

Author: myieye

frontend/viewer/tests/browse-page.ts

@@ -0,0 +1,33 @@
+import {type Page} from '@playwright/test';
+import {waitForProjectViewReady} from './test-utils';
+import {EntriesListComponent} from './entries-list-component';
+import {EntryViewComponent} from './entry-view-component';
+import {EntryApiHelper} from './entry-api-helper';
+
+/**
+ * Page object for the browse page which contains:
+ * - EntriesListComponent (left panel - entry list with virtual scrolling)
+ * - EntryViewComponent (right panel - entry detail/edit view)
+ */
+export class BrowsePage {
+  readonly entriesList: EntriesListComponent;
+  readonly entryView: EntryViewComponent;
+  readonly api: EntryApiHelper;
+
+  constructor(readonly page: Page) {
+    this.api = new EntryApiHelper(page);
+    this.entriesList = new EntriesListComponent(page, this.api);
+    this.entryView = new EntryViewComponent(page);
+  }
+
+  async goto(): Promise<void> {
+    await this.page.goto('/testing/project-view');
+    await waitForProjectViewReady(this.page, true);
+  }
+
+  async selectEntryByFilter(filter: string): Promise<void> {
+    await this.entriesList.filterByText(filter);
+    await this.entriesList.entryWithText(filter.slice(0, 5)).click();
+    await this.entryView.waitForEntryLoaded();
+  }
+}

…ontend/viewer/tests/entries-list-page.ts …d/viewer/tests/entries-list-component.tsfrontend/viewer/tests/entries-list-page.ts renamed to frontend/viewer/tests/entries-list-component.ts frontend/viewer/tests/entries-list-page.ts renamed to frontend/viewer/tests/entries-list-component.ts

@@ -3,10 +3,10 @@ import {waitForProjectViewReady} from './test-utils';
 import type {EntryApiHelper} from './entry-api-helper';
 
 /**
- * Page object for EntriesList tests.
+ * Component object for EntriesList.
  * Provides locators and common actions for virtual scrolling entry list.
  */
-export class EntriesListPage {
+export class EntriesListComponent {
   readonly vlist: Locator;
   readonly entryRows: Locator;
   readonly skeletons: Locator;

frontend/viewer/tests/entries-list.test.ts

@@ -1,18 +1,18 @@
 import {expect, test} from '@playwright/test';
-import {EntriesListPage} from './entries-list-page';
+import {EntriesListComponent} from './entries-list-component';
 import {EntryApiHelper} from './entry-api-helper';
 
 const ESTIMATED_ITEM_HEIGHT = 60;
 const BATCH_SIZE = 50;
 
 test.describe('EntriesList', () => {
-  let entriesList: EntriesListPage;
+  let entriesList: EntriesListComponent;
   let api: EntryApiHelper;
 
   test.describe('Lazy loading', () => {
     test.beforeEach(async ({page}) => {
       api = new EntryApiHelper(page);
-      entriesList = new EntriesListPage(page, api);
+      entriesList = new EntriesListComponent(page, api);
       await entriesList.goto();
     });
 
@@ -85,7 +85,7 @@ test.describe('EntriesList', () => {
   test.describe('Jump to entry', () => {
     test.beforeEach(async ({page}) => {
       api = new EntryApiHelper(page);
-      entriesList = new EntriesListPage(page, api);
+      entriesList = new EntriesListComponent(page, api);
       await entriesList.goto();
     });
 
@@ -137,15 +137,15 @@ test.describe('EntriesList', () => {
   test.describe('Entry event handling', () => {
     test.beforeEach(async ({page}) => {
       api = new EntryApiHelper(page);
-      entriesList = new EntriesListPage(page, api);
+      entriesList = new EntriesListComponent(page, api);
       await entriesList.goto(true);
     });
 
     test('entry delete event removes entry from list without full reset', async () => {
       const initialTexts = await entriesList.getVisibleEntryTexts();
       expect(initialTexts.length).toBeGreaterThan(2);
 
-      const {id: firstEntryId} = await api.getEntryAtIndex(0);
+      const firstEntryId = await api.getEntryIdAtIndex(0);
       await api.deleteEntry(firstEntryId);
 
       await expect(async () => {
@@ -175,7 +175,7 @@ test.describe('EntriesList', () => {
       await entriesList.entryRows.first().click();
       await expect(entriesList.selectedEntry).toBeVisible();
 
-      const {id: entryId} = await api.getEntryAtIndex(0);
+      const entryId = await api.getEntryIdAtIndex(0);
       await api.deleteEntry(entryId);
 
       await entriesList.page.waitForTimeout(300);
@@ -191,7 +191,7 @@ test.describe('EntriesList', () => {
       expect(visibleTexts.length).toBeGreaterThan(0);
 
       // Delete entry from top (not in cache)
-      const {id: topEntryId} = await api.getEntryAtIndex(0);
+      const topEntryId = await api.getEntryIdAtIndex(0);
       await api.deleteEntry(topEntryId);
 
       await entriesList.page.waitForTimeout(500);

frontend/viewer/tests/entry-api-helper.ts

@@ -17,14 +17,15 @@ export class EntryApiHelper {
     });
   }
 
-  async getEntryAtIndex(index: number): Promise<{id: string; headword: string}> {
+  async getEntryAtIndex(index: number): Promise<{entryId: string; headword: string; senseCount: number}> {
     return this.page.evaluate(async ({idx, order}) => {
       const api = window.__PLAYWRIGHT_UTILS__.demoApi;
       const entries = await api.getEntries({offset: idx, count: 1, order});
       const entry = entries[0];
       return {
-        id: entry.id,
+        entryId: entry.id,
         headword: entry.citationForm?.seh ?? entry.lexemeForm?.seh ?? '',
+        senseCount: entry.senses.length,
       };
     }, {idx: index, order: DEFAULT_ORDER});
   }
@@ -34,6 +35,11 @@ export class EntryApiHelper {
     return headword;
   }
 
+  async getEntryIdAtIndex(index: number): Promise<string> {
+    const {entryId} = await this.getEntryAtIndex(index);
+    return entryId;
+  }
+
   async getLastEntry(): Promise<{headword: string; index: number}> {
     return this.page.evaluate(async ({order}) => {
       const api = window.__PLAYWRIGHT_UTILS__.demoApi;
@@ -139,4 +145,58 @@ export class EntryApiHelper {
       return {id: entry.id, updatedHeadword: newHeadword};
     }, {idx: index, pfx: prefix, order: DEFAULT_ORDER});
   }
+
+  async getEntryWithEnglishGloss(): Promise<{entryId: string; headword: string; originalGloss: string}> {
+    return this.page.evaluate(async ({order}) => {
+      const api = window.__PLAYWRIGHT_UTILS__.demoApi;
+      const entries = await api.getEntries({offset: 0, count: 50, order});
+      const entry = entries.find(e => e.senses.length > 0 && e.senses[0].gloss?.en);
+      if (!entry) throw new Error('No suitable entry with English gloss found in demo data');
+      return {
+        entryId: entry.id,
+        headword: entry.citationForm?.seh ?? entry.lexemeForm?.seh ?? '',
+        originalGloss: entry.senses[0].gloss?.en ?? '',
+      };
+    }, {order: DEFAULT_ORDER});
+  }
+
+  async getEntry(entryId: string): Promise<unknown> {
+    return this.page.evaluate(async (id) => {
+      return window.__PLAYWRIGHT_UTILS__.demoApi.getEntry(id);
+    }, entryId);
+  }
+
+  async getEntryGloss(entryId: string, writingSystem: string): Promise<string> {
+    return this.page.evaluate(async ({id, ws}) => {
+      const api = window.__PLAYWRIGHT_UTILS__.demoApi;
+      const entry = await api.getEntry(id);
+      return entry?.senses[0]?.gloss?.[ws] ?? '';
+    }, {id: entryId, ws: writingSystem});
+  }
+
+  async getEntryLexeme(entryId: string): Promise<string> {
+    return this.page.evaluate(async (id) => {
+      const api = window.__PLAYWRIGHT_UTILS__.demoApi;
+      const entry = await api.getEntry(id);
+      return entry?.lexemeForm?.seh ?? '';
+    }, entryId);
+  }
+
+  async getEntrySenseCount(entryId: string): Promise<number> {
+    return this.page.evaluate(async (id) => {
+      const api = window.__PLAYWRIGHT_UTILS__.demoApi;
+      const entry = await api.getEntry(id);
+      return entry?.senses.length ?? 0;
+    }, entryId);
+  }
+
+  async entryHasGlossValue(entryId: string, glossValue: string): Promise<boolean> {
+    return this.page.evaluate(async ({id, value}) => {
+      const api = window.__PLAYWRIGHT_UTILS__.demoApi;
+      const entry = await api.getEntry(id);
+      return entry?.senses.some(s =>
+        Object.values(s.gloss || {}).some(v => v === value)
+      ) ?? false;
+    }, {id: entryId, value: glossValue});
+  }
 }