add a config for local testing, plus add mobile testing and some instructions

.env.production

@@ -1,4 +1,4 @@
-# Only the variables that start with VITE_ are seen in the application process.env in Vue.
+# Only the variables that start with VITE_ are seen in the application import.meta.env in Vue.
 VITE_BVC_MEETUPS_PROJECT_CLAIM_ID=https://endorser.ch/entity/01GXYPFF7FA03NXKPYY142PY4H
 VITE_DEFAULT_ENDORSER_API_SERVER=https://api.endorser.ch
 VITE_DEFAULT_IMAGE_API_SERVER=https://image-api.timesafari.app

README.md

@@ -71,8 +71,22 @@ npm run build
 
 ### Automated
 
+At the test server:
 `npx playwright test`
 
+At the locally running server:
+... after clone and setup https://github.com/trentlarson/endorser-ch
+... and after you `npx playwright install chrome`
+... then run these:
+```
+# In the endorser-ch directory:
+NODE_ENV=test-local npm run dev
+
+# Here:
+npx playwright test -c playwright.config-local.ts
+```
+``
+
 ### Register new user on test server
 
 On the test server, User #0 has rights to register others, so you can start

playwright.config-local.ts

@@ -0,0 +1,94 @@
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// import dotenv from 'dotenv';
+// dotenv.config({ path: path.resolve(__dirname, '.env') });
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: './test-playwright',
+  /* 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',
+  /* 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:8080',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: {
+        ...devices['Desktop Chrome'],
+        permissions: ["clipboard-read"],
+      },
+    },
+
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },
+
+    /* Test against mobile viewports. */
+    {
+      name: 'Mobile Chrome',
+      use: { ...devices['Pixel 5'] },
+    },
+    {
+      name: 'Mobile Safari',
+      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 */
+  /**
+   * This could be an array of servers, meaning we could start the Endorser server as well:
+   *     {
+   *       command: "cd ../endorser-ch; NODE_ENV=test-local npm run dev",
+   *       url: 'http://localhost:3000',
+   *       reuseExistingServer: !process.env.CI,
+   *     },
+   *
+   * But if we do then the testInfo.config.webServer is null and the API-setting test 00 fails.
+   * It is worth considering a change such that Time Safari's default Endorer API server is NOT set
+   * in the user's settings so that it can be blanked out and the default is used.
+   */
+  webServer: {
+    command:
+      "VITE_PASSKEYS_ENABLED=true VITE_DEFAULT_ENDORSER_API_SERVER=http://localhost:3000 npm run dev",
+    url: "http://localhost:8080",
+    reuseExistingServer: !process.env.CI,
+  },
+});

playwright.config.ts

@@ -38,7 +38,7 @@ export default defineConfig({
       use: {
         ...devices['Desktop Chrome'],
         permissions: ["clipboard-read"],
-       },
+      },
     },
 
     {
@@ -46,20 +46,20 @@ export default defineConfig({
       use: { ...devices['Desktop Firefox'] },
     },
 
-    {
+    // {
-      name: 'webkit',
+    //   name: 'webkit',
-      use: { ...devices['Desktop Safari'] },
+    //   use: { ...devices['Desktop Safari'] },
-    },
+    // },
 
     /* Test against mobile viewports. */
     // {
     //   name: 'Mobile Chrome',
     //   use: { ...devices['Pixel 5'] },
     // },
-    // {
+    {
-    //   name: 'Mobile Safari',
+      name: 'Mobile Safari',
-    //   use: { ...devices['iPhone 12'] },
+      use: { ...devices['iPhone 12'] },
-    // },
+    },
 
     /* Test against branded browsers. */
     // {
@@ -74,8 +74,9 @@ export default defineConfig({
 
   /* Run your local dev server before starting the tests */
   // webServer: {
-  //   command: 'npm run start',
+  //   command:
-  //   url: 'http://127.0.0.1:3000',
+  //     "VITE_PASSKEYS_ENABLED=true VITE_DEFAULT_ENDORSER_API_SERVER=http://localhost:3000 npm run dev",
+  //   url: "http://localhost:8080",
   //   reuseExistingServer: !process.env.CI,
   // },
 });

test-playwright/00-confirm-test-api.spec.ts

@@ -1,8 +1,14 @@
 import { test, expect } from '@playwright/test';
 
-test('Confirm usage of test API', async ({ page }) => {
+test('Confirm usage of test API', async ({ page }, testInfo) => {
   // Load account view
   await page.goto('./account');
   await page.getByRole('heading', { name: 'Advanced' }).click();
-  await expect(page.getByRole('textbox').nth(1)).toHaveValue('https://test-api.endorser.ch');
+
+  const webServer = testInfo.config.webServer;
+  const endorserWords = webServer?.command.split(' ');
+  const ENDORSER_ENV_NAME = 'VITE_DEFAULT_ENDORSER_API_SERVER';
+  const endorserTerm = endorserWords?.find(word => word.startsWith(ENDORSER_ENV_NAME + '='));
+  const endorserServer = endorserTerm?.substring(ENDORSER_ENV_NAME.length + 1) || 'https://test-api.endorser.ch';
+  await expect(page.getByRole('textbox').nth(1)).toHaveValue(endorserServer);
 });