Move all E2E dependencies into its own folder, run from there (#3068)

* Move all E2E dependencies into its own folder, run from there

* Run flaky-tests from E2E folder

* This should work better

* Fix E2E test for Linux

* Fix for Windows, fix lint

.eslintignore

@@ -1,4 +1,5 @@
 node_modules
 dist
 api-types/lib
-mochawesome-report
+e2e/mochawesome-report
+e2e/dist

.eslintrc.json

@@ -108,6 +108,16 @@
                 "import/no-commonjs": 0
             }
         },
+        {
+            "files": ["e2e/**/*"],
+            "settings": {
+                "import/resolver": {
+                    "webpack": {
+                        "config": "webpack.config.js"
+                    }
+                }
+            }
+        },
         {
             "files": [
                 "webpack.config.renderer.js",
@@ -117,7 +127,7 @@
                 "e2e/modules/environment.js",
                 "CHANGELOG.md",
                 "webpack.config.base.js",
-                "babel.config.js",
+                "./babel.config.js",
                 "README.md",
                 "scripts/check_build_config.js",
                 "LICENSE.txt",

.github/workflows/e2e-functional-template.yml

@@ -146,7 +146,10 @@ jobs:
           wget -qO /usr/local/bin/yq https://github.com/mikefarah/yq/releases/download/v4.20.1/yq_linux_amd64 && chmod a+x /usr/local/bin/yq
           sudo apt-get update || true && sudo apt-get install -y ca-certificates libxtst-dev libpng++-dev gcc-aarch64-linux-gnu g++-aarch64-linux-gnu jq icnsutils graphicsmagick tzdata xsel
           npm ci
+          cd e2e
+          npm ci
           npx electron-rebuild --platform=linux -f -t prod,optional,dev -w robotjs
+          cd ../
 
       - name: e2e/install-dependencies-macos
         if: runner.os == 'macOS'
@@ -155,7 +158,10 @@ jobs:
         run: |
           jq '.mac.target=["zip"]' electron-builder.json | jq '.mac.gatekeeperAssess=false' > /tmp/electron-builder.json && cp /tmp/electron-builder.json .
           npm ci
+          cd e2e
+          npm ci
           npx electron-rebuild --platform=darwin -f -t prod,optional,dev -w robotjs
+          cd ../
 
       ## Windows Dependencies
       - name: e2e/install-dependencies-windows
@@ -169,8 +175,10 @@ jobs:
           node-gyp install --devdir="C:\Users\runneradmin\.electron-gyp" --target=$(jq -r .devDependencies.electron package.json) --dist-url="https://electronjs.org/headers"
           node-gyp install --devdir="C:\Users\runneradmin\.electron-gyp" --target=$(jq -r .devDependencies.electron package.json) --dist-url="https://electronjs.org/headers" --arch arm64
           npm ci --openssl_fips=''
-          npm i robotjs
+          cd e2e
+          npm ci
           npx electron-rebuild --platform=win32 -f -t prod,optional,dev -w robotjs
+          cd ../
 
       - name: e2e/run-playright-tests-${{ runner.os }}
         run: |
@@ -178,15 +186,17 @@ jobs:
             export DISPLAY=:99
             Xvfb $DISPLAY -screen 0 1280x960x24 > /dev/null 2>&1 &
           fi
-          npm run test:e2e || true # making job pass even if the tests fail due to flakyness
-          npm run test:e2e:send-report
+          npm run e2e || true # making job pass even if the tests fail due to flakyness
+          cd e2e
+          npm run send-report
 
       - name: e2e/analyze-flaky-tests
         id: analyze-flaky-tests
         uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7.0.1
         with:
           script: |
-            const { analyzeFlakyTests } = require('./e2e/utils/analyze-flaky-test.js');
+            process.chdir('./e2e');
+            const { analyzeFlakyTests } = require('./utils/analyze-flaky-test.js');
             const { commentBody, newFailedTests } = analyzeFlakyTests();
             core.setOutput('COMMENT_BODY', commentBody);
             if (newFailedTests.length > 0) {

.github/workflows/e2e-performance.yml

@@ -47,7 +47,7 @@ jobs:
         run: npm ci
 
       - name: E2E Performance Tests for Electron 🧪
-        run: ELECTRON_DISABLE_SANDBOX=1 xvfb-run --auto-servernum --server-args="-screen 0 1280x960x24" -- npm run test:e2e:performance
+        run: ELECTRON_DISABLE_SANDBOX=1 xvfb-run --auto-servernum --server-args="-screen 0 1280x960x24" -- cd e2e && npm run test:performance
 
       - name: Upload artifact to Github
         uses: actions/upload-artifact@5d5d22a31266ced268874388b861e4b58bb5c2f3 # v4.3.1

e2e/babel.config.js

@@ -0,0 +1,11 @@
+// Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+module.exports = (api) => {
+    api.cache.forever();
+    return {
+        presets: [
+            '@babel/typescript',
+        ],
+    };
+};

e2e/modules/environment.js

@@ -11,10 +11,9 @@ const chai = require('chai');
 const {ipcRenderer} = require('electron');
 const {_electron: electron} = require('playwright');
 const ps = require('ps-node');
+const {SHOW_SETTINGS_WINDOW} = require('src/common/communication');
 
 const {asyncSleep, mkDirAsync, rmDirAsync, unlinkAsync} = require('./utils');
-
-const {SHOW_SETTINGS_WINDOW} = require('../../src/common/communication');
 chai.should();
 
 const sourceRootDir = path.join(__dirname, '../..');
@@ -218,7 +217,7 @@ module.exports = {
                 RESOURCES_PATH: userDataDir,
             },
             executablePath: electronBinaryPath,
-            args: [`${path.join(sourceRootDir, 'dist')}`, `--user-data-dir=${userDataDir}`, '--disable-dev-mode', '--no-sandbox', ...args],
+            args: [`${path.join(sourceRootDir, 'e2e/dist')}`, `--user-data-dir=${userDataDir}`, '--disable-dev-mode', '--no-sandbox', ...args],
         };
 
         // if (process.env.MM_DEBUG_SETTINGS) {

e2e/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "desktop-e2e",
+  "version": "1.0.0",
+  "description": "E2E tests for the Desktop App",
+  "main": "dist/e2e_bundle.js",
+  "scripts": {
+    "clean": "rm -rf dist/ mochawesome-report/ node_modules/ testUserData/",
+    "run": "npm run build && npm run test",
+    "build": "webpack-cli --config webpack.config.js",
+    "build:performance": "webpack-cli --config webpack.config.performance.js",
+    "test": "electron-mocha --reporter mochawesome dist/e2e_bundle.js",
+    "test:performance": "electron-mocha --reporter json --reporter-option output=./performance/perf-test-report.json dist/e2e_bundle.js",
+    "send-report": "node ./save_report.js",
+    "postinstall": "cross-env CL='/std:c++17' electron-rebuild -m ./node_modules/robotjs"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com/mattermost/desktop.git"
+  },
+  "author": "Mattermost, Inc. <feedback@mattermost.com>",
+  "license": "Apache-2.0",
+  "bugs": {
+    "url": "https://github.com/mattermost/desktop/issues"
+  },
+  "homepage": "https://github.com/mattermost/desktop#readme",
+  "dependencies": {
+    "@aws-sdk/client-s3": "3.445.0",
+    "@aws-sdk/lib-storage": "3.445.0",
+    "@electron/rebuild": "3.6.0",
+    "axios": "1.6.7",
+    "chai": "4.3.6",
+    "electron-mocha": "12.2.0",
+    "mochawesome": "7.1.3",
+    "playwright": "1.42.0",
+    "ps-node": "0.1.6",
+    "recursive-readdir": "2.2.3",
+    "robotjs": "0.6.0"
+  }
+}

e2e/specs/focus.test.js

@@ -5,8 +5,8 @@
 const fs = require('fs');
 
 const robot = require('robotjs');
+const {SHOW_SETTINGS_WINDOW} = require('src/common/communication');
 
-const {SHOW_SETTINGS_WINDOW} = require('../../src/common/communication');
 const env = require('../modules/environment');
 const {asyncSleep} = require('../modules/utils');
 

e2e/specs/mattermost/copy_link.test.js

@@ -5,6 +5,7 @@
 const fs = require('fs');
 
 const {clipboard} = require('electron');
+const robot = require('robotjs');
 
 const env = require('../../modules/environment');
 const {asyncSleep} = require('../../modules/utils');
@@ -38,7 +39,17 @@ describe('copylink', function desc() {
         await env.loginToMattermost(firstServer);
         await firstServer.waitForSelector('#sidebarItem_town-square');
         await firstServer.click('#sidebarItem_town-square', {button: 'right'});
-        await firstServer.click('li.SidebarChannel.expanded.active > span > nav > div');
+        switch (process.platform) {
+        case 'linux':
+        case 'win32':
+            robot.keyTap('down');
+            robot.keyTap('down');
+            break;
+        case 'darwin':
+            robot.keyTap('c');
+            break;
+        }
+        robot.keyTap('enter');
         await firstServer.click('#sidebarItem_town-square');
         await firstServer.click('#post_textbox');
         const clipboardText = clipboard.readText();

e2e/specs/settings.test.js

@@ -6,7 +6,8 @@
 
 const fs = require('fs');
 
-const {SHOW_SETTINGS_WINDOW} = require('../../src/common/communication');
+const {SHOW_SETTINGS_WINDOW} = require('src/common/communication');
+
 const env = require('../modules/environment');
 const {asyncSleep} = require('../modules/utils');
 

e2e/specs/settings/keyboard_shortcuts.test.js

@@ -6,8 +6,8 @@
 const fs = require('fs');
 
 const robot = require('robotjs');
+const {SHOW_SETTINGS_WINDOW} = require('src/common/communication');
 
-const {SHOW_SETTINGS_WINDOW} = require('../../../src/common/communication');
 const env = require('../../modules/environment');
 const {asyncSleep} = require('../../modules/utils');
 

e2e/specs/startup/config.test.js

@@ -58,7 +58,7 @@ describe('config', function desc() {
     });
 
     it('MM-T4402 should upgrade v0 config file', async () => {
-        const Config = require('../../../src/common/config').Config;
+        const Config = require('src/common/config').Config;
         const newConfig = new Config(env.configFilePath);
         const oldConfig = {
             url: env.exampleURL,

e2e/utils/constants.js

@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.
 
 const MOCHAWESOME_REPORT_DIR = './mochawesome-report';
-const PERFORMANCE_REPORT_DIR = './e2e/performance';
+const PERFORMANCE_REPORT_DIR = './performance';
 
 module.exports = {
     MOCHAWESOME_REPORT_DIR,

e2e/webpack.config.js

@@ -4,19 +4,22 @@
 const path = require('path');
 
 const glob = require('glob');
-const {merge} = require('webpack-merge');
+const webpack = require('webpack');
 
-const base = require('./webpack.config.base');
-
-module.exports = merge(base, {
+module.exports = {
+    mode: 'development',
     entry: {
-        e2e: glob.sync('./e2e/specs/**/*.js'),
+        e2e: glob.sync('./specs/**/*.js'),
     },
     output: {
-        path: path.resolve(__dirname, 'dist/tests'),
+        path: path.resolve(__dirname, 'dist/'),
         filename: '[name]_bundle.js',
     },
+    plugins: [
+        new webpack.DefinePlugin({__IS_MAC_APP_STORE__: false}),
+    ],
     externals: {
+        electron: 'require("electron")',
         fs: 'require("fs")',
         ws: 'require("ws")',
         child_process: 'require("child_process")',
@@ -28,9 +31,26 @@ module.exports = merge(base, {
         playwright: 'require("playwright")',
         robotjs: 'require("robotjs")',
     },
+    module: {
+        rules: [{
+            test: /\.(js|ts)?$/,
+            exclude: /node_modules/,
+            loader: 'babel-loader',
+        }],
+    },
     node: {
         __filename: false,
         __dirname: false,
     },
-    target: 'electron-main',
-});
+    target: 'node',
+    resolve: {
+        modules: [
+            'node_modules',
+            '../src',
+        ],
+        alias: {
+            src: path.resolve(__dirname, '../src'),
+        },
+        extensions: ['.ts', '.js'],
+    },
+};

package.json

@@ -15,17 +15,9 @@
     "type": "git",
     "url": "git://github.com/mattermost/desktop.git"
   },
-  "config": {
-    "target": "29.3.0",
-    "arch": "x64",
-    "target_arch": "x64",
-    "disturl": "https://electronjs.org/headers",
-    "runtime": "electron",
-    "build_from_source": true
-  },
   "scripts": {
     "postinstall": "patch-package && electron-builder install-app-deps",
-    "clean": "rm -rf release/ node_modules/ src/node_modules/ dist/",
+    "clean": "rm -rf release/ node_modules/ src/node_modules/ dist/ && cd e2e && npm run clean && cd -",
     "clean-install": "npm run clean && npm install",
     "clean-dist": "rm -rf dist/",
     "check": "run-p lint:js-quiet check-build-config check-types test:unit",
@@ -36,15 +28,10 @@
     "lint:js": "eslint --ext .js,.jsx,.tsx,.ts --cache .",
     "lint:js-quiet": "npm run lint:js -- --quiet",
     "fix:js": "npm run lint:js-quiet -- --fix",
-    "test": "run-s lint:js test:unit test:e2e",
-    "test:e2e": "run-s build-test test:e2e:run",
-    "test:e2e:run": "electron-mocha --reporter mochawesome dist/tests/e2e_bundle.js",
-    "test:e2e:no-rebuild": "run-s build-test:e2e test:e2e:run",
-    "test:e2e:performance": "run-s build-test test:e2e:run-performance",
-    "test:e2e:run-performance": "electron-mocha --reporter json --reporter-option output=./e2e/performance/perf-test-report.json dist/tests/e2e_bundle.js",
-    "test:e2e:send-report": "node ./e2e/save_report.js",
+    "test": "run-s lint:js test:unit",
     "test:unit": "jest",
     "test:unit-coverage": "jest --coverage",
+    "e2e": "npm run build-test && cd e2e && npm i && npm run run",
     "build": "run-p build:*",
     "build:main": "webpack-cli --config webpack.config.main.js",
     "build:preload": "webpack-cli --config webpack.config.preload.js",
@@ -52,11 +39,7 @@
     "build-prod": "cross-env NODE_ENV=production run-s check-build-config build",
     "build-prod-mas": "cross-env NODE_ENV=production IS_MAC_APP_STORE=true run-s check-build-config build",
     "build-prod-upgrade": "cross-env NODE_ENV=production CAN_UPGRADE=true run-s check-build-config build",
-    "build-test": "cross-env NODE_ENV=test run-p build:* build-test:*",
-    "build-test:robotjs": "cross-env CL='/std:c++17' electron-rebuild -m ./node_modules/robotjs",
-    "build-test:e2e": "webpack-cli --config webpack.config.test.js",
-    "build-test:e2e-performance": "webpack-cli --config webpack.config.performance.test.js",
-    "build-all": "run-p build build-test",
+    "build-test": "cross-env NODE_ENV=test run-p build:*",
     "create-linux-dev-shortcut": "node scripts/create_linux_dev_shortcut.js",
     "start": "npm run create-linux-dev-shortcut && electron dist/ --disable-dev-mode",
     "restart": "run-s build start",
@@ -129,13 +112,10 @@
     ]
   },
   "devDependencies": {
-    "@aws-sdk/client-s3": "3.445.0",
-    "@aws-sdk/lib-storage": "3.445.0",
     "@babel/preset-env": "7.24.0",
     "@babel/preset-react": "7.23.3",
     "@babel/preset-typescript": "7.23.3",
     "@electron/fuses": "1.6.0",
-    "@electron/rebuild": "3.6.0",
     "@mattermost/desktop-api": "file:api-types",
     "@mattermost/eslint-plugin": "1.1.0-0",
     "@types/auto-launch": "5.0.5",
@@ -147,16 +127,13 @@
     "@types/valid-url": "1.0.7",
     "@types/winreg": "1.2.36",
     "7zip-bin": "5.1.1",
-    "axios": "1.6.7",
     "babel-loader": "9.1.3",
-    "chai": "4.3.6",
     "copy-webpack-plugin": "10.2.4",
     "cross-env": "7.0.3",
     "css-loader": "6.7.1",
     "electron": "29.3.0",
     "electron-builder": "24.13.3",
     "electron-connect": "0.6.3",
-    "electron-mocha": "12.2.0",
     "eslint": "8.57.0",
     "eslint-import-resolver-webpack": "0.13.8",
     "eslint-plugin-formatjs": "4.12.2",
@@ -168,17 +145,9 @@
     "jest-junit": "13.1.0",
     "mini-css-extract-plugin": "2.6.0",
     "mmjstool": "github:mattermost/mattermost-utilities#3b4506b0f6b14fbb402f9f8ef932370e459e3773",
-    "mochawesome": "7.1.3",
-    "nan": "2.19.0",
-    "node-abi": "3.56.0",
-    "node-gyp": "10.0.1",
     "node-loader": "2.0.0",
     "npm-run-all": "4.1.5",
     "patch-package": "8.0.0",
-    "playwright": "1.42.0",
-    "ps-node": "0.1.6",
-    "recursive-readdir": "2.2.3",
-    "robotjs": "0.6.0",
     "sass": "1.49.11",
     "sass-loader": "12.6.0",
     "semver": "7.6.0",

webpack.config.base.js

@@ -53,4 +53,7 @@ module.exports = {
         },
         extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
     },
+    output: {
+        path: process.env.NODE_ENV === 'test' ? path.resolve(__dirname, 'e2e/dist/') : undefined,
+    },
 };

webpack.config.renderer.js

@@ -28,7 +28,7 @@ module.exports = merge(base, {
         welcomeScreen: './src/renderer/modals/welcomeScreen/welcomeScreen.tsx',
     },
     output: {
-        path: path.resolve(__dirname, 'dist/renderer'),
+        path: process.env.NODE_ENV === 'test' ? path.resolve(__dirname, 'e2e/dist/renderer') : path.resolve(__dirname, 'dist/renderer'),
         filename: '[name]_bundle.js',
         assetModuleFilename: '[name].[ext]',
     },