test: add playwright for e2e tests (#828)

* test: add playwright for e2e tests fix :#688 * test: add gallery search/module addition * test: fix gallery item locator * test: add waitUntilModVReady function * test: refactor waitUntilModVReady to reduce promise creation * test: refactor waitUntilModVReady to remove useless else * test: refactor waitUntilModVReady to remove useless if * test: tidy up * test: add preset generation test * test: add evaluateWorkerState * test: add new group test * test: fix typo * test: add test:e2e script to package.json * test: split group tests into their own file * test: add group enabled toggle test * test: improve backspace removes focused group * test: add group clearing and pipeline tests * test: add inheritance test * test: add alpha state test * test: add blend mode test * refactor: remove console.log * test: add group name test * test: consolidate name locators * test: add group rearrangement test * test: tidy up * test: fix scope * test: add input link test * test: split up test files to avoid worker overlap * test: remove unneeded reload and wait * test: remove useless code * test: remove unused deps * fix: update title to name and fix keyboard event * test: significantly speed up tests on slower machines * test: remove page.waitForTimeout
vcync · Jun 11, 2023 · 2cad1e0 · 2cad1e0
1 parent e5f7c7b
commit 2cad1e0
Show file tree

Hide file tree

Showing 39 changed files with 1,044 additions and 38 deletions.
diff --git a/package.json b/package.json
@@ -20,7 +20,8 @@
     "electron:build": "vue-cli-service electron:build",
     "electron:serve": "vue-cli-service electron:serve",
     "postinstall": "electron-builder install-app-deps && patch-package",
-    "postuninstall": "electron-builder install-app-deps"
+    "postuninstall": "electron-builder install-app-deps",
+    "test:e2e": "npx playwright test"
   },
   "main": "background.js",
   "dependencies": {
@@ -70,6 +71,7 @@
     "@babel/core": "^7.0.0-0",
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.0",
     "@babel/plugin-proposal-optional-chaining": "^7.16.0",
+    "@playwright/test": "^1.31.2",
     "@semantic-release/git": "^9.0.0",
     "@vue/cli-plugin-babel": "^4.5.15",
     "@vue/cli-plugin-eslint": "^3.12.1",
@@ -81,11 +83,14 @@
     "electron": "^23.1.2",
     "electron-builder": "^22.9.1",
     "electron-notarize": "^1.2.2",
+    "electron-playwright-helpers": "^1.5.3",
     "eslint": "^5.16.0",
     "eslint-plugin-no-for-each": "^0.1.14",
     "eslint-plugin-vue": "^5.2.3",
     "lint-staged": "^8.2.1",
     "node-loader": "^0.6.0",
+    "playwright": "^1.31.2",
+    "playwright-core": "^1.31.2",
     "sass-loader": "^7.3.1",
     "text-loader": "0.0.1",
     "vue-cli-plugin-electron-builder": "^2.0.0",

diff --git a/playwright.config.js b/playwright.config.js
@@ -0,0 +1,9 @@
+import { defineConfig, expect } from "@playwright/test";
+import extensions from "./tests/e2e/extentions";
+
+expect.extend(extensions);
+
+export default defineConfig({
+  testDir: "./tests/e2e/spec",
+  workers: process.env.CI ? 1 : 2
+});
diff --git a/src/application/worker/index.worker.js b/src/application/worker/index.worker.js
@@ -11,6 +11,9 @@ async function start() {
   const grabCanvasPlugin = require("../plugins/grab-canvas").default;
   const get = require("lodash.get");
 
+  // For Playwright
+  self._get = get;
+
   const { tick: frameTick } = require("./frame-counter");
   const { getFeatures, setFeatures } = require("./audio-features");
   // const featureAssignmentPlugin = require("../plugins/feature-assignment");

diff --git a/src/background/background.js b/src/background/background.js
@@ -1,4 +1,4 @@
-import { app, protocol } from "electron";
+import { app, ipcMain, protocol } from "electron";
 import { APP_SCHEME } from "./background-constants";
 import { getMediaManager } from "./media-manager";
 import { openFile } from "./open-file";
@@ -73,8 +73,10 @@ app.on("ready", async () => {
   );
 
   createWindow({ windowName: "mainWindow" });
-  createWindow({ windowName: "splashScreen" });
-  createWindow({ windowName: "colorPicker", options: { show: false } });
+  ipcMain.once("main-window-created", () => {
+    createWindow({ windowName: "splashScreen" });
+    createWindow({ windowName: "colorPicker", options: { show: false } });
+  });
 });
 
 // Exit cleanly on request from parent process in development mode.

diff --git a/src/background/window-prefs.js b/src/background/window-prefs.js
@@ -8,8 +8,10 @@ import { closeWindow, createWindow, windows } from "./windows";
 import { updateMenu } from "./menu-bar";
 import { getMediaManager } from "./media-manager";
 
-const isDevelopment = process.env.NODE_ENV !== "production";
+const isDevelopment = process.env.NODE_ENV === "development";
+const isTest = process.env.CI === "e2e";
 let shouldCloseMainWindowAndQuit = false;
+let modVReady = false;
 
 const windowPrefs = {
   colorPicker: {
@@ -65,6 +67,8 @@ const windowPrefs = {
     beforeCreate() {
       const { width, height } = screen.getPrimaryDisplay().workAreaSize;
 
+      modVReady = false;
+
       return {
         options: {
           width,
@@ -76,6 +80,8 @@ const windowPrefs = {
     async create(window) {
       require("@electron/remote/main").enable(window.webContents);
 
+      ipcMain.handle("is-modv-ready", () => modVReady);
+
       // Configure child windows to open without a menubar (windows/linux)
       window.webContents.on(
         "new-window",
@@ -114,6 +120,7 @@ const windowPrefs = {
       });
 
       ipcMain.on("modv-ready", () => {
+        modVReady = true;
         mm.start();
       });
 
@@ -144,7 +151,7 @@ const windowPrefs = {
         window.webContents.send("input-update", message);
       });
 
-      if (!isDevelopment || process.env.IS_TEST) {
+      if (!isDevelopment && !isTest) {
         window.on("close", async e => {
           if (shouldCloseMainWindowAndQuit) {
             app.quit();

diff --git a/src/components/ActiveModule.vue b/src/components/ActiveModule.vue
@@ -6,9 +6,10 @@
     @focus="clickActiveModule"
     ref="activeModule"
     :class="{ focused }"
+    :id="`active-module-${id}`"
   >
     <div
-      class="active-module__title handle"
+      class="active-module__name handle"
       :class="{ grabbing }"
       @mousedown="titleMouseDown"
     >
@@ -264,7 +265,7 @@ export default {
   outline: #c4c4c4 2px solid;
 }
 
-.active-module__title {
+.active-module__name {
   background: #9a9a9a;
   width: 100%;
   overflow: hidden;
@@ -273,7 +274,7 @@ export default {
   cursor: grab;
 }
 
-.active-module__title.grabbing {
+.active-module__name.grabbing {
   cursor: grabbing;
 }
 
@@ -285,7 +286,7 @@ export default {
 }
 
 .active-module__controls grid,
-.active-module__title {
+.active-module__name {
   box-sizing: border-box;
   padding: 0 4px;
 }

diff --git a/src/components/Control.vue b/src/components/Control.vue
@@ -3,6 +3,7 @@
     columns="4"
     @mousedown="focusInput"
     :class="{ 'has-link': hasLink, focused: inputIsFocused }"
+    :id="`module-control-${inputId}`"
   >
     <c span="1">
       <label v-context-menu="menuOptions">{{ title }}</label>

diff --git a/src/components/Group.vue b/src/components/Group.vue
@@ -1,6 +1,7 @@
 <template>
   <div
     class="group"
+    :id="`group-${groupId}`"
     v-searchTerms="{
       terms: ['group'],
       title: name,
@@ -44,6 +45,7 @@
             <c span="4">
               <Select
                 v-model="inheritanceSelection"
+                class="group__inheritSelect"
                 :class="{ light: isFocused(group.inheritInputId) }"
               >
                 <option :value="-2">Don't Inherit</option>
@@ -72,6 +74,7 @@
             <c span="4">
               <Checkbox
                 v-model="clearing"
+                class="group__clearingCheckbox"
                 :class="{ light: isFocused(group.clearingInputId) }"
               />
             </c>
@@ -91,6 +94,7 @@
             <c span="4">
               <Checkbox
                 v-model="pipeline"
+                class="group__pipelineCheckbox"
                 :class="{ light: isFocused(group.pipelineInputId) }"
               />
             </c>
@@ -108,7 +112,13 @@
           >
             <c span="2">Alpha</c>
             <c span="4">
-              <Range value="1" max="1" step="0.001" v-model="alpha" />
+              <Range
+                class="group__alphaRange"
+                value="1"
+                max="1"
+                step="0.001"
+                v-model="alpha"
+              />
             </c>
           </grid>
         </c>
@@ -128,6 +138,7 @@
             <c span="4">
               <Select
                 v-model="blendMode"
+                class="group__blendModeSelect"
                 :class="{ light: isFocused(group.compositeOperationInputId) }"
               >
                 <optgroup
@@ -180,19 +191,19 @@
     </div>
     <div class="group__right">
       <div
-        class="group__title"
+        class="group__name"
         :class="{ grabbing }"
-        @click.self="endTitleEditable"
+        @click.self="endNameEditable"
         @mousedown="titleMouseDown"
       >
-        <span v-if="!titleEditable" @dblclick="toggleTitleEditable">{{
+        <span v-if="!nameEditable" @dblclick="toggleNameEditable">{{
           name
         }}</span>
         <TextInput
           v-model="localName"
-          ref="titleInput"
+          ref="nameInput"
           v-else
-          @keypress.enter="endTitleEditable"
+          @keypress.enter="endNameEditable"
         />
       </div>
       <figure
@@ -268,7 +279,7 @@ export default {
   data() {
     return {
       compositeOperations,
-      titleEditable: false,
+      nameEditable: false,
       localName: "",
       controlsShown: false,
       Arrow,
@@ -287,7 +298,7 @@ export default {
   },
 
   beforeDestroy() {
-    window.removeEventListener("mousedown", this.endTitleEditable);
+    window.removeEventListener("mousedown", this.endNameEditable);
   },
 
   computed: {
@@ -485,24 +496,24 @@ export default {
       }
     },
 
-    toggleTitleEditable() {
-      this.titleEditable = !this.titleEditable;
+    toggleNameEditable() {
+      this.nameEditable = !this.nameEditable;
 
-      if (this.titleEditable) {
-        window.addEventListener("mousedown", this.endTitleEditable);
+      if (this.nameEditable) {
+        window.addEventListener("mousedown", this.endNameEditable);
         this.$nextTick(() => {
-          this.$refs.titleInput.$el.focus();
-          this.$refs.titleInput.$el.select();
+          this.$refs.nameInput.$el.focus();
+          this.$refs.nameInput.$el.select();
         });
       }
     },
 
-    endTitleEditable(e) {
-      if (e.target === this.$refs.titleInput.$el) {
+    endNameEditable(e) {
+      if (e instanceof MouseEvent && e.target === this.$refs.nameInput.$el) {
         return;
       }
 
-      window.removeEventListener("mousedown", this.endTitleEditable);
+      window.removeEventListener("mousedown", this.endNameEditable);
 
       const { localName } = this;
       const trimmedName = localName.trim();
@@ -516,7 +527,7 @@ export default {
         this.localName = this.name;
       }
 
-      this.titleEditable = false;
+      this.nameEditable = false;
     },
 
     focusInput(id, title) {
@@ -678,19 +689,19 @@ export default {
   align-items: center;
 }
 
-.group__title {
+.group__name {
   background: #363636;
   color: white;
   padding: 8px;
   line-height: 1;
   cursor: grab;
 }
 
-.group__title.grabbing {
+.group__name.grabbing {
   cursor: grabbing;
 }
 
-.group__title input {
+.group__name input {
   max-width: 120px;
 }
 

diff --git a/src/components/Groups.vue b/src/components/Groups.vue
@@ -9,7 +9,7 @@
     }"
   >
     <Container
-      drag-handle-selector=".group__title"
+      drag-handle-selector=".group__name"
       lock-axis="y"
       group-name="groups"
       :should-animate-drop="() => false"
@@ -23,7 +23,9 @@
       </Draggable>
     </Container>
 
-    <Button class="light" @click="createGroup">New Group</Button>
+    <Button id="new-group-button" class="light" @click="createGroup">
+      New Group
+    </Button>
   </div>
 </template>
 

diff --git a/src/components/InputConfig.vue b/src/components/InputConfig.vue
@@ -20,7 +20,7 @@
     <div v-if="inputConfig">
       <grid class="borders">
         <c span="1.."
-          ><div class="title">{{ focusedInputTitle }}</div></c
+          ><div class="input-config__title">{{ focusedInputTitle }}</div></c
         >
         <c span="1..">
           <grid columns="4">
@@ -196,7 +196,7 @@ grid.borders > c:not(:last-child):not(:first-child) {
   border-bottom: 1px solid var(--foreground-color-2);
 }
 
-.title {
+.input-config__title {
   font-size: 24px;
 }
 </style>

diff --git a/src/components/ModuleInspector.vue b/src/components/ModuleInspector.vue
@@ -1,12 +1,16 @@
 <template>
-  <grid v-if="module.props" ref="moduleInspector">
+  <grid
+    v-if="module.props"
+    ref="moduleInspector"
+    :id="`module-inspector-${module.$id}`"
+  >
     <c span="1.." class="hidden">
       <button class="pin-button" @click="toggleModulePin(module.$id)">
         ({{ isPinned(module.$id) ? "Unpin" : "Pin" }})
       </button>
     </c>
     <c span="1..">
-      <div class="title">{{ module.meta.name }}</div>
+      <div class="module-inspector__title">{{ module.meta.name }}</div>
     </c>
     <c span="1..">
       <ModuleControl
@@ -90,7 +94,7 @@ grid {
   margin: -8px;
 }
 
-.title {
+.module-inspector__title {
   font-size: 24px;
   padding: 8px;
 }