e2etest of custom access protocol choices

README.md

@@ -51,7 +51,7 @@ arbitrary URL, the render process in electron is tied up with its own chromium b
 run a built exe of lameta.
 
 ```bash
-yarn vite build --watch
+yarn  e2ebuildwatch
 yarn e2e
 ```
 
@@ -63,10 +63,10 @@ To run just one e2e fixture, name it:
 yarn e2e registration.e2e.ts
 ```
 
-To show the Playwright Inspector, use
+To show the Playwright Inspector (which has a recorder), use
 
 ```bash
-yarn e2edebug
+yarn e2erecord
 ```
 
 ### l10n

e2e/archiveConfiguration.e2e.ts

@@ -0,0 +1,37 @@
+import { test, expect as expect, Page } from "@playwright/test";
+import { LametaE2ERunner } from "./lametaE2ERunner";
+import { createNewProject, E2eProject } from "./e2eProject";
+import { shouldSeeExactlyOnce } from "./e2e.expects";
+
+let lameta: LametaE2ERunner;
+let page: Page;
+let project: E2eProject;
+
+test.describe("ArchiveConfiguration", () => {
+  test.beforeAll(async () => {
+    lameta = new LametaE2ERunner();
+    page = await lameta.launch();
+    await lameta.cancelRegistration();
+    project = await createNewProject(lameta, "ArchiveConfiguration");
+    //fileList = new E2eFileList(lameta, page, project.projectDirectory);
+  });
+  test.afterAll(async () => {
+    await lameta.quit();
+  });
+  test("New project gets 'Other' and can enter custom access protocols", async () => {
+    await project.goToProjectConfiguration();
+    await shouldSeeExactlyOnce(page, ["Other"]);
+    await page.locator("#customAccessChoices").click();
+    await page.locator("#customAccessChoices").fill("good, bad");
+    await page.locator("#customAccessChoices").press("Tab");
+    project.goToSessions();
+    project.addSession();
+    await page.locator("#access-chooser").click();
+    await shouldSeeExactlyOnce(page, ["good", "bad"]);
+    await project.goToProjectConfiguration();
+    await page.locator("#customAccessChoices").fill("good, bad, ugly");
+    project.goToSessions();
+    await page.locator("#access-chooser").click();
+    await shouldSeeExactlyOnce(page, ["good", "bad", "ugly"]);
+  });
+});

e2e/e2e.expects.ts

@@ -1,4 +1,4 @@
-import { ElectronApplication, expect } from "@playwright/test";
+import { ElectronApplication, Page, expect } from "@playwright/test";
 
 export async function expectMenuWithLabel(
   app: ElectronApplication,
@@ -17,3 +17,31 @@ export async function expectMenuWithLabel(
   );
   expect(menu).toBeTruthy();
 }
+export async function shouldSeeExactlyOnce(
+  page: Page,
+  labels: string[],
+  exact = true
+) {
+  for (const label of labels) {
+    await expect(page.getByText(label, { exact: exact })).toBeVisible();
+  }
+}
+export async function shouldAtLeastOnce(
+  page: Page,
+  labels: string[],
+  exact = true
+) {
+  for (const label of labels) {
+    await expect(page.getByText(label, { exact: exact })).toBeTruthy();
+  }
+}
+export async function shouldHaveMultiple(
+  page: Page,
+  label: string,
+  count: number,
+  exact = true
+) {
+  const x = await page.getByText(label, { exact: exact });
+  const c = await x.count();
+  await expect(c).toBe(count);
+}

e2e/e2eProject.ts

@@ -66,7 +66,10 @@ export class E2eProject {
     await this.goToProject();
     await this.page.getByTestId("project-about").click();
   }
-
+  public async goToProjectConfiguration() {
+    await this.goToProject();
+    await this.page.getByTestId("project-configuration").click();
+  }
   public async goToSessions() {
     await this.page.getByTestId("sessions-tab").click();
   }

e2e/localization.e2e.ts

@@ -2,7 +2,12 @@ import { E2eProject, createNewProject } from "./e2eProject";
 import { test, expect as expect } from "@playwright/test";
 import { Page } from "playwright-core";
 import { LametaE2ERunner } from "./lametaE2ERunner";
-import { expectMenuWithLabel } from "./e2e.expects";
+import {
+  expectMenuWithLabel,
+  shouldAtLeastOnce,
+  shouldHaveMultiple,
+  shouldSeeExactlyOnce
+} from "./e2e.expects";
 
 let lameta: LametaE2ERunner;
 let page: Page;
@@ -35,15 +40,15 @@ test.describe("Localization", () => {
     await expectMenuWithLabel(lameta.electronApp, "Lihat");
 
     // Project, Session, People tabs
-    await shouldSeeExactlyOnce(["Proyek", "Sesi", "Orang-Orang"]);
+    await shouldSeeExactlyOnce(page, ["Proyek", "Sesi", "Orang-Orang"]);
     // tabs in Project
-    await shouldSeeExactlyOnce(["Tentang proyek ini"]);
+    await shouldSeeExactlyOnce(page, ["Tentang proyek ini"]);
 
-    await shouldAtLeastOnce(["pilih..."]);
+    await shouldAtLeastOnce(page, ["pilih..."]);
 
     // main project page
     await project.goToProjectAbout();
-    await shouldSeeExactlyOnce([
+    await shouldSeeExactlyOnce(page, [
       "Bahasa yang didokumentasi", // we have a hack to fix the plurality of the key
       "Judul proyek yang didanai" // regression test
     ]);
@@ -53,44 +58,28 @@ test.describe("Localization", () => {
     // sessions page
 
     // session list
-    await shouldAtLeastOnce(["Judul"]); // file list header for title
+    await shouldAtLeastOnce(page, ["Judul"]); // file list header for title
 
     // buttons above the file lise
-    await shouldSeeExactlyOnce(["Buka", "Ubah Nama..."]);
+    await shouldSeeExactlyOnce(page, ["Buka", "Ubah Nama..."]);
 
     // files in the session headers
-    await shouldSeeExactlyOnce(["Nama", "Tipe"]);
+    await shouldSeeExactlyOnce(page, ["Nama", "Tipe"]);
     // tabs of the selected file
-    await shouldSeeExactlyOnce(["Catatan"]);
+    await shouldSeeExactlyOnce(page, ["Catatan"]);
     // some fields
-    await shouldSeeExactlyOnce(["Deskripsi", "Kotak-kotak Khusus"]);
+    await shouldSeeExactlyOnce(page, ["Deskripsi", "Kotak-kotak Khusus"]);
 
-    await shouldHaveMultiple("Tanggal", 2); // date
+    await shouldHaveMultiple(page, "Tanggal", 2); // date
 
     await project.goToPeople();
     await project.addPerson();
 
-    await shouldSeeExactlyOnce([
+    await shouldSeeExactlyOnce(page, [
       "Nama Lengkap", //name
       "Tahun Lahir", //birth year
       // TODO not finding this link: "Tambah Bahasa", // add language
       "Bagaimana dihubungi" // How to Contact
     ]);
   });
 });
-
-async function shouldSeeExactlyOnce(labels: string[], exact = true) {
-  for (const label of labels) {
-    await expect(page.getByText(label, { exact: exact })).toBeVisible();
-  }
-}
-async function shouldAtLeastOnce(labels: string[], exact = true) {
-  for (const label of labels) {
-    await expect(page.getByText(label, { exact: exact })).toBeTruthy();
-  }
-}
-async function shouldHaveMultiple(label: string, count: number, exact = true) {
-  const x = await page.getByText(label, { exact: exact });
-  const c = await x.count();
-  await expect(c).toBe(count);
-}

package.json

@@ -16,11 +16,13 @@
     "//note that e2e tests require that you run build to pick up new code in the app (but not in the e2e tests themselves)": "",
     "e2e": "npx playwright test",
     "// This brings up the inspector and record button oh my...": "",
-    "e2edebug": "cross-env PWDEBUG=console  npx playwright test --debug",
+    "e2edebug": "echo To debug, right click on the e2e test and choose 'Debug Test'",
+    "// This is the same as as e2edebug because neither actually runs a test": "",
+    "e2erecord": "cross-env PWDEBUG=console  npx playwright test --debug",
     "//----watch": "The nature of watch is that we can't run two commands, so you'll have to have 2 terminals if you want to watch both",
     "//---build-is-what-github-actions-runs": "",
     "build": "yarn strings:extract && tsc && yarn vite build",
-    "e2ebuild": "yarn vite build --config vite.config.nonminified.js",
+    "e2ebuildwatch": "yarn vite build --config vite.config.nonminified.js --watch",
     "postinstall": "yarn patch-package && electron-builder install-app-deps",
     "//----dev": "this is the normal day-to-day way of running while developing, with compiling of main, preload, and render",
     "dev": "yarn check-node && vite",
@@ -31,7 +33,7 @@
     "package": "npm run build && electron-builder",
     "cleanup": "mop -v",
     "lingui-add": "lingui add-locale",
-    "##note": "lingui extract will overwrite the fields.po so strings:extract-json must be run afterwards",
+    "##note": "lingui extract will overwrite the fields.po so stringsaextract-json must be run afterwards",
     "strings:extract-code": "lingui extract --clean",
     "strings:extract-json": "yarn tsx ./archive-configurations/extractFromJSON.ts",
     "strings:extract": "yarn strings:extract-code && yarn strings:extract-json",

src/components/project/ProjectTab.tsx

@@ -35,7 +35,10 @@ export const ProjectTab: React.FunctionComponent<IProps> = observer((props) => {
           <Tab className={"tab-project-about"} data-testid="project-about">
             <Trans>About This Project</Trans>
           </Tab>
-          <Tab className={"tab-project-archive-configuration"}>
+          <Tab
+            className={"tab-project-archive-configuration"}
+            data-testid="project-configuration"
+          >
             <Trans>Archive Configuration</Trans>
           </Tab>
           <Tab className={"tab-project-collection"}>

src/components/session/AccessChooser.tsx

@@ -7,6 +7,7 @@ import ReactSelectClass from "react-select";
 import { AuthorityLists } from "../../model/Project/AuthorityLists/AuthorityLists";
 import { translateAccessProtocolLabelOrDescription } from "../../other/localization";
 import { lameta_orange } from "../../containers/theme";
+import { FieldLabel } from "../FieldLabel";
 
 export interface IProps {
   field: Field;
@@ -56,11 +57,11 @@ class AccessChooser extends React.Component<
 
     return (
       <div className={"field access-chooser"}>
-        <label>
-          <Trans>Access</Trans>
-        </label>
+        <FieldLabel fieldDef={this.props.field.definition} />
         <ReactSelectClass
-          name={this.props.field.labelInUILanguage}
+          //doesn't work data-testid="access-chooser"
+          // playwright locator can't find name here either: name={"foobar"}
+          id="access-chooser" // for playwright
           tabIndex={this.props.tabIndex ? this.props.tabIndex.toString() : ""}
           value={currentOption}
           placeholder=""

src/model/Project/Project.ts

@@ -512,6 +512,7 @@ export class Project extends Folder {
           this.properties.getTextStringOrEmpty("customAccessChoices")
         )
     );
+    */
     mobx.reaction(
       () => this.properties.getValueOrThrow("customAccessChoices").text,
       (newValue) => {
@@ -522,7 +523,7 @@ export class Project extends Folder {
         this.authorityLists.setAccessProtocol(currentProtocol, newValue);
       }
     );
-    */
+
     // this.properties
     //   .getValueOrThrow("customAccessChoices")
     //    .textHolder.map.intercept((change) => {