FIX-2367 Automatic testing of the Desktop App

.github/workflows/ci_desktop.yml

@@ -0,0 +1,30 @@
+name: Desktop Package and Test
+on:
+  pull_request:
+    branches:
+      - main
+    paths:
+      - 'Src/WitsmlExplorer.Api/**'
+      - 'Src/WitsmlExplorer.Frontend/**'
+      - 'Src/WitsmlExplorer.Desktop/**'
+
+permissions: {}
+
+jobs:
+  desktop:
+    name: Package and Test
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
+      - uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4.0.2
+        with:
+          node-version: '20'
+      - name: Install dependencies
+        run: yarn
+        working-directory: ./Src/WitsmlExplorer.Desktop
+      - name: Package
+        run: yarn electron:pack
+        working-directory: ./Src/WitsmlExplorer.Desktop
+      - name: Test
+        run: xvfb-run --auto-servernum --server-args="-screen 0 1280x960x24" -- yarn test:pack
+        working-directory: ./Src/WitsmlExplorer.Desktop

Src/WitsmlExplorer.Desktop/README.md

@@ -48,6 +48,16 @@ yarn electron:dist
 
 The installer can be found in `Src/WitsmlExplorer.Desktop/dist/WEx-Desktop Setup <version>.exe`. Run it and follow the instructions.
 
+Run playwright tests:
+```sh
+# From Src/WitsmlExplorer.Desktop/ run:
+yarn electron:pack
+yarn test:pack
+
+# Debug tests interactively:
+yarn test:pack --debug
+```
+
 ### API log files for debugging
 
 Check the [Configuration](#configuration) file to see where the logging files are placed.

Src/WitsmlExplorer.Desktop/electron.test.ts

@@ -0,0 +1,57 @@
+/* eslint-disable no-console */
+import { ElectronApplication, _electron, expect, test } from "@playwright/test";
+import * as eph from "electron-playwright-helpers";
+
+let electronApp: ElectronApplication;
+
+test.beforeAll(async () => {
+  const latestBuild = eph.findLatestBuild("dist");
+  const appInfo = eph.parseElectronApp(latestBuild);
+  electronApp = await _electron.launch({
+    args: [appInfo.main],
+    executablePath: appInfo.executable
+  });
+
+  electronApp.on("window", async (page) => {
+    page.on("pageerror", (error) => {
+      console.error(error);
+    });
+    page.on("console", (msg) => {
+      console.log(msg.text());
+    });
+  });
+});
+
+test.afterAll(async () => {
+  await electronApp.close();
+});
+
+test("should open window and edit server list", async () => {
+  // arrange
+  const serverName = "Test Witsml Server 123";
+  const window = await electronApp.firstWindow();
+
+  // act
+  await window.click("role=button[name=/new server/i]");
+  await window.fill(
+    "role=textbox[name=/url/i]",
+    "https://test.witsml.server.com"
+  );
+  await window.fill("role=textbox[name=/name/i]", serverName);
+  await window.click("role=button[name=/save/i]");
+
+  await window.waitForSelector(`role=cell[name=/${serverName}/i]`);
+
+  const title = await window.title();
+  const server = await window.$$(`role=cell[name=/${serverName}/i]`);
+
+  // cleanup
+  const row = window.locator("role=row", { hasText: serverName });
+  const deleteButton = row.locator(`data-testid=deleteServerButton`);
+  await deleteButton.click();
+  await window.click("role=button[name=/remove server/i]");
+
+  // assert
+  expect(title).toBe("WITSML Explorer");
+  expect(server.length).toBeGreaterThan(0);
+});

Src/WitsmlExplorer.Desktop/package.json

@@ -6,12 +6,14 @@
   "author": "Witsml Explorer Team",
   "scripts": {
     "dev": "electron-vite dev -w",
-    "build:api": "dotnet publish -o ./dist/api --os win --arch x64 --self-contained true /p:IncludeApiConfig=true /p:CONFIG_PATH=../WitsmlExplorer.Desktop/api.config.json ../WitsmlExplorer.Api/WitsmlExplorer.Api.csproj",
+    "build:api": "dotnet publish -o ./dist/api /p:IncludeApiConfig=true /p:CONFIG_PATH=../WitsmlExplorer.Desktop/api.config.json ../WitsmlExplorer.Api/WitsmlExplorer.Api.csproj",
+    "build:api:win64": "dotnet publish -o ./dist/api --os win --arch x64 --self-contained true /p:IncludeApiConfig=true /p:CONFIG_PATH=../WitsmlExplorer.Desktop/api.config.json ../WitsmlExplorer.Api/WitsmlExplorer.Api.csproj",
     "build:frontend": "electron-vite build",
     "build": "yarn build:api && yarn build:frontend",
     "preview": "yarn build:api && electron-vite preview",
     "electron:pack": "yarn build && electron-builder --dir -c electron-builder.json",
-    "electron:dist": "yarn build && electron-builder -c electron-builder.json"
+    "electron:dist": "yarn build && electron-builder -c electron-builder.json",
+    "test:pack": "playwright test"
   },
   "main": "./dist/main/main.js",
   "lint-staged": {
@@ -26,13 +28,15 @@
     "out/"
   ],
   "devDependencies": {
+    "@playwright/test": "^1.43.1",
     "@types/cross-spawn": "^6.0.6",
+    "@vitejs/plugin-react": "^4.2.1",
     "cross-spawn": "^7.0.3",
     "electron": "^29.3.0",
     "electron-builder": "^24.13.3",
+    "electron-playwright-helpers": "^1.7.1",
     "electron-vite": "^2.1.0",
-    "vite-tsconfig-paths": "^4.3.2",
-    "@vitejs/plugin-react": "^4.2.1",
-    "lint-staged": "^13.0.3"
+    "lint-staged": "^13.0.3",
+    "vite-tsconfig-paths": "^4.3.2"
   }
 }

Src/WitsmlExplorer.Frontend/components/ContentViews/ServerManager.tsx

@@ -182,6 +182,7 @@ const ServerManager = (): React.ReactElement => {
                 </Table.Cell>
                 <Table.Cell style={CellStyle}>
                   <Button
+                    data-testid="deleteServerButton"
                     disabled={editDisabled}
                     variant="ghost"
                     onClick={() =>

Src/WitsmlExplorer.Frontend/components/Modals/ServerModal.tsx

@@ -154,9 +154,9 @@ const ServerModal = (props: ServerModalProps): React.ReactElement => {
       content={
         <>
           <ContentWrapper>
-            <Label label="Server URL" style={labelStyle} />
+            <Label label="Server URL" style={labelStyle} htmlFor="serverUrl" />
             <TextField
-              id="url"
+              id="serverUrl"
               defaultValue={server.url}
               variant={displayUrlError ? "error" : null}
               helperText={displayUrlError ? "Not a valid server url" : ""}
@@ -165,9 +165,13 @@ const ServerModal = (props: ServerModalProps): React.ReactElement => {
               required
               disabled={props.editDisabled}
             />
-            <Label label="Server name" style={labelStyle} />
+            <Label
+              label="Server name"
+              style={labelStyle}
+              htmlFor="serverName"
+            />
             <TextField
-              id="name"
+              id="serverName"
               defaultValue={server.name}
               variant={displayNameError ? "error" : null}
               helperText={
@@ -180,7 +184,11 @@ const ServerModal = (props: ServerModalProps): React.ReactElement => {
               required
               disabled={props.editDisabled}
             />
-            <Label label="Server description" style={labelStyle} />
+            <Label
+              label="Server description"
+              style={labelStyle}
+              htmlFor="description"
+            />
             <TextField
               id="description"
               defaultValue={server.description}
@@ -191,7 +199,11 @@ const ServerModal = (props: ServerModalProps): React.ReactElement => {
             />
             {msalEnabled && (
               <>
-                <Label label="Roles (space delimited)" style={labelStyle} />
+                <Label
+                  label="Roles (space delimited)"
+                  style={labelStyle}
+                  htmlFor="role"
+                />
                 <TextField
                   id="role"
                   defaultValue={server.roles?.join(" ")}
@@ -206,7 +218,11 @@ const ServerModal = (props: ServerModalProps): React.ReactElement => {
                   disabled={props.editDisabled}
                 />
                 <div style={{ display: "flex", flexDirection: "row" }}>
-                  <Label label="Credential Ids" style={labelStyle} />
+                  <Label
+                    label="Credential Ids"
+                    style={labelStyle}
+                    htmlFor="creds"
+                  />
                   <Tooltip title="If this (space \ndelimited) field is set, the server will use the credentials with the given ids to authenticate. Otherwise, the server will use the Server URL to find the credentials.">
                     <Icon
                       name="infoCircle"
@@ -233,6 +249,7 @@ const ServerModal = (props: ServerModalProps): React.ReactElement => {
             <Label
               label="Number of decimals in depth log index"
               style={labelStyle}
+              htmlFor="depthLogDecimals"
             />
             <TextField
               id="depthLogDecimals"

yarn.lock

@@ -277,7 +277,7 @@
     ajv "^6.12.0"
     ajv-keywords "^3.4.1"
 
-"@electron/asar@^3.2.1":
+"@electron/asar@^3.2.1", "@electron/asar@^3.2.4":
   version "3.2.9"
   resolved "https://registry.yarnpkg.com/@electron/asar/-/asar-3.2.9.tgz#7b3a1fd677b485629f334dd80ced8c85353ba7e7"
   integrity sha512-Vu2P3X2gcZ3MY9W7yH72X9+AMXwUQZEJBrsPIbX0JsdllLtoh62/Q8Wg370/DawIEVKOyfD6KtTLo645ezqxUA==
@@ -1064,6 +1064,13 @@
   resolved "https://registry.yarnpkg.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz#a77ea742fab25775145434eb1d2328cf5013ac33"
   integrity sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==
 
+"@playwright/test@^1.43.1":
+  version "1.43.1"
+  resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.43.1.tgz#16728a59eb8ce0f60472f98d8886d6cab0fa3e42"
+  integrity sha512-HgtQzFgNEEo4TE22K/X7sYTYNqEMMTZmFS8kTq6m8hXj+m1D8TgwgIbumHddJa9h4yl4GkKb8/bgAl2+g7eDgA==
+  dependencies:
+    playwright "1.43.1"
+
 "@popperjs/core@^2.11.8":
   version "2.11.8"
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
@@ -2805,6 +2812,13 @@ electron-builder@^24.13.3:
     simple-update-notifier "2.0.0"
     yargs "^17.6.2"
 
+electron-playwright-helpers@^1.7.1:
+  version "1.7.1"
+  resolved "https://registry.yarnpkg.com/electron-playwright-helpers/-/electron-playwright-helpers-1.7.1.tgz#1e63f8b9da91787ffabe13f0a770c35811e8a9d3"
+  integrity sha512-S9mo7LfpERgub2WIuYVPpib4XKFeAqBP+mxYf5Bv7E0B5GUB+LUbSj6Fpu39h18Ar635Nf9nQYTmypjuvaYJng==
+  dependencies:
+    "@electron/asar" "^3.2.4"
+
 [email protected]:
   version "24.13.1"
   resolved "https://registry.yarnpkg.com/electron-publish/-/electron-publish-24.13.1.tgz#57289b2f7af18737dc2ad134668cdd4a1b574a0c"
@@ -3480,6 +3494,11 @@ fs.realpath@^1.0.0:
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
   integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
 
+[email protected]:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
+  integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
+
 fsevents@~2.3.2, fsevents@~2.3.3:
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6"
@@ -4969,6 +4988,20 @@ pkg-types@^1.0.3:
     mlly "^1.6.1"
     pathe "^1.1.2"
 
+[email protected]:
+  version "1.43.1"
+  resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.43.1.tgz#0eafef9994c69c02a1a3825a4343e56c99c03b02"
+  integrity sha512-EI36Mto2Vrx6VF7rm708qSnesVQKbxEWvPrfA1IPY6HgczBplDx7ENtx+K2n4kJ41sLLkuGfmb0ZLSSXlDhqPg==
+
+[email protected]:
+  version "1.43.1"
+  resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.43.1.tgz#8ad08984ac66c9ef3d0db035be54dd7ec9f1c7d9"
+  integrity sha512-V7SoH0ai2kNt1Md9E3Gwas5B9m8KR2GVvwZnAI6Pg0m3sh7UvgiYhRrhsziCmqMJNouPckiOhk8T+9bSAK0VIA==
+  dependencies:
+    playwright-core "1.43.1"
+  optionalDependencies:
+    fsevents "2.3.2"
+
 plist@^3.0.4, plist@^3.0.5:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/plist/-/plist-3.1.0.tgz#797a516a93e62f5bde55e0b9cc9c967f860893c9"
@@ -5614,7 +5647,16 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/string-argv/-/string-argv-0.3.2.tgz#2b6d0ef24b656274d957d54e0a4bbf6153dc02b6"
   integrity sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==
 
-"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0":
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -5678,7 +5720,14 @@ string.prototype.trimstart@^1.0.8:
     define-properties "^1.2.1"
     es-object-atoms "^1.0.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -6236,7 +6285,16 @@ why-is-node-running@^2.2.2:
     siginfo "^2.0.0"
     stackback "0.0.2"
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
+wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==