add click get started test and cleanup after upgrading deps

NiceNode · Dec 12, 2023 · 8f50814 · 8f50814
1 parent 98149b1
commit 8f50814
Show file tree

Hide file tree

Showing 21 changed files with 253 additions and 206 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -42,3 +42,5 @@ src/stories
 src/stories/Generic
 src/stories/Presentational
 storybook-static
+
+.eslintrc.js
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -51,7 +51,7 @@ module.exports = {
   parserOptions: {
     ecmaVersion: 2020,
     sourceType: 'module',
-    project: './tsconfig.json',
+    project: ['./tsconfig.json', './tsconfig.eslint.json'],
     tsconfigRootDir: __dirname,
     createDefaultProgram: true,
   },

diff --git a/README.md b/README.md
@@ -62,6 +62,23 @@ For a specific platform & architecture:
 
 ```bash
 npm run package -- --linux --arm64
+npm run package -- --mac dmg --arm64
+```
+
+## Tests
+
+Unit tests with `npm run test`
+
+### End-to-end (e2e) tests
+
+For e2e tests, we use webdriver and an electron plugin to automate testing.
+It requires a packaged build to complete the tests.
+
+To run them locally, package the source first (and after making any changes to anything other than `tests`), then run the e2e tests with `wdio`
+
+```bash
+npm run package <your os and arch>
+npm run wdio
 ```
 
 ## Running Storybook

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -27,7 +27,7 @@
     "prepare": "husky install",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "wdio": "wdio run ./wdio.conf.ts"
+    "wdio": "cross-env NODE_ENV=test wdio run ./wdio.conf.ts"
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": [
@@ -318,10 +318,10 @@
     "terser-webpack-plugin": "^5.3.6",
     "ts-jest": "^29.0.3",
     "ts-loader": "^9.4.2",
-    "ts-node": "^10.9.1",
+    "ts-node": "^10.9.2",
     "typedoc": "^0.25.4",
     "typedoc-plugin-markdown": "^3.17.1",
-    "typescript": "^5.1.6",
+    "typescript": "^5.3.3",
     "url-loader": "^4.1.1",
     "wdio-electron-service": "^6.0.1",
     "wdio-wait-for": "^3.0.9",
@@ -359,7 +359,7 @@
     "react-i18next": "^13.2.2",
     "react-redux": "^8.0.5",
     "react-router-dom": "^6.4.4",
-    "react-select": "^5.7.0",
+    "react-select": "^5.8.0",
     "systeminformation": "^5.21.7",
     "throttle-debounce": "^5.0.0",
     "uuid": "^9.0.0",

diff --git a/src/main/main.ts b/src/main/main.ts
@@ -38,10 +38,13 @@ import * as i18nMain from './i18nMain';
 if (process.env.NODE_ENV === 'development') {
   require('dotenv').config();
 }
-const isTest = process.env.NODE_ENV === 'test';
-if (isTest) {
-  require('wdio-electron-service/main');
-}
+
+// todo: when moving from require to imports
+// const isTest = process.env.NODE_ENV === 'test';
+// if (isTest) {
+//   console.log('NODE_ENV=TEST... requiring wdio-electron-service/main');
+//   require('wdio-electron-service/main');
+// }
 
 fixPathEnvVar();
 logger.info(`NICENODE_ENV: ${process.env.NICENODE_ENV}`);
@@ -99,6 +102,7 @@ const createWindow = async () => {
     height: 780,
     icon: getAssetPath('icon.png'),
     webPreferences: {
+      // sandbox: !isTest,
       nodeIntegration: true,
       preload: app.isPackaged
         ? path.join(__dirname, 'preload.js')

diff --git a/src/main/preload.ts b/src/main/preload.ts
@@ -10,10 +10,12 @@ import { ThemeSetting } from './state/settings';
 import { AddNodePackageNodeService } from './nodePackageManager';
 import { ConfigValuesMap } from '../common/nodeConfig';
 
-const isTest = process.env.NODE_ENV === 'test';
-if (isTest) {
-  require('wdio-electron-service/preload');
-}
+// todo: when moving from require to imports
+// const isTest = process.env.NODE_ENV === 'test';
+// if (isTest) {
+//   console.log('NODE_ENV=TEST... requiring wdio-electron-service/main');
+//   require('wdio-electron-service/preload');
+// }
 
 contextBridge.exposeInMainWorld('electron', {
   SENTRY_DSN: process.env.SENTRY_DSN,

diff --git a/src/main/util/escapePath.js b/src/main/util/escapePath.js
@@ -18,10 +18,10 @@ export const escapePath = (given_path) => {
     ? // for posix path, escape is simple
       given_path.replace(/(\s+)/g, '\\$1')
     : // for windows, it depend of the build
-    should_not_escape(...windows_version_regex.exec(version).splice(1))
-    ? // on major version, no need to escape anymore
-      // https://support.microsoft.com/en-us/help/4467268/url-encoded-unc-paths-not-url-decoded-in-windows-10-version-1803-later
-      given_path
-    : // on older version, replace space with symbol %20
-      given_path.replace(/(\s+)/g, '%20');
+      should_not_escape(...windows_version_regex.exec(version).splice(1))
+      ? // on major version, no need to escape anymore
+        // https://support.microsoft.com/en-us/help/4467268/url-encoded-unc-paths-not-url-decoded-in-windows-10-version-1803-later
+        given_path
+      : // on older version, replace space with symbol %20
+        given_path.replace(/(\s+)/g, '%20');
 };
diff --git a/src/renderer/Generics/redesign/Button/Button.tsx b/src/renderer/Generics/redesign/Button/Button.tsx
@@ -39,6 +39,10 @@ export interface ButtonProps {
    */
   label?: string;
   onClick?: () => void;
+  /**
+   * id for the <button/> element
+   */
+  id?: string;
 }
 
 const Button = ({

diff --git a/src/renderer/Generics/redesign/HeaderButton/HeaderButton.tsx b/src/renderer/Generics/redesign/HeaderButton/HeaderButton.tsx
@@ -52,6 +52,7 @@ export const HeaderButton = ({
   };
 
   return (
+    // eslint-disable-next-line jsx-a11y/control-has-associated-label
     <div
       className={[container, isToggled ? 'toggled' : ''].join(' ')}
       onKeyDown={handleButtonClick}

diff --git a/src/renderer/Generics/redesign/Select/MultiSelect.tsx b/src/renderer/Generics/redesign/Select/MultiSelect.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react';
 import ReactSelect, {
+  CSSObjectWithLabel,
   MenuPlacement,
   MultiValue,
   SingleValue,
@@ -46,47 +47,59 @@ const MultiSelect = ({
   }, [value, options]);
 
   const customStyles: StylesConfig<any, true> = {
-    control: (styles) => ({
-      ...styles,
-      backgroundColor: vars.color.background,
-      color: vars.color.font,
-      borderColor: vars.color.border,
-      boxShadow: 'none',
-      '&:hover': {
-        borderColor: vars.color.primary,
-        outline: 0,
-        boxShadow: '0 0 0 2px rgba(115, 81, 235, 0.25)',
-      },
-    }),
-    menu: (styles) => ({
-      ...styles,
-      backgroundColor: vars.color.background,
-    }),
-    option: (styles) => ({
-      ...styles,
-      backgroundColor: vars.color.font8,
-      color: vars.color.font85,
-      ':active': {
+    control: (styles) => {
+      return {
+        ...styles,
+        backgroundColor: vars.color.background,
+        color: vars.color.font,
+        borderColor: vars.color.border,
+        boxShadow: 'none',
+        '&:hover': {
+          borderColor: vars.color.primary,
+          outline: 0,
+          boxShadow: '0 0 0 2px rgba(115, 81, 235, 0.25)',
+        },
+      } as CSSObjectWithLabel;
+    },
+    menu: (styles) => {
+      return {
+        ...styles,
+        backgroundColor: vars.color.background,
+      } as CSSObjectWithLabel;
+    },
+    option: (styles) => {
+      return {
+        ...styles,
         backgroundColor: vars.color.font8,
-      },
-    }),
-    multiValue: (styles) => ({
-      ...styles,
-      backgroundColor: vars.color.font8,
-    }),
-    multiValueLabel: (styles) => ({
-      ...styles,
-      fontSize: 13,
-      color: vars.color.font85,
-    }),
-    multiValueRemove: (styles) => ({
-      ...styles,
-      color: vars.color.font85,
-      ':hover': {
+        color: vars.color.font85,
+        ':active': {
+          backgroundColor: vars.color.font8,
+        },
+      } as CSSObjectWithLabel;
+    },
+    multiValue: (styles) => {
+      return {
+        ...styles,
         backgroundColor: vars.color.font8,
+      } as CSSObjectWithLabel;
+    },
+    multiValueLabel: (styles) => {
+      return {
+        ...styles,
+        fontSize: 13,
+        color: vars.color.font85,
+      } as CSSObjectWithLabel;
+    },
+    multiValueRemove: (styles) => {
+      return {
+        ...styles,
         color: vars.color.font85,
-      },
-    }),
+        ':hover': {
+          backgroundColor: vars.color.font8,
+          color: vars.color.font85,
+        },
+      } as CSSObjectWithLabel;
+    },
   };
 
   return (

diff --git a/src/renderer/Generics/redesign/Select/Select.tsx b/src/renderer/Generics/redesign/Select/Select.tsx
@@ -2,7 +2,11 @@
 // React select docs at:
 // https://react-select.com/components#Option
 import { useState, useCallback, useEffect } from 'react';
-import ReactSelect, { MenuPlacement, SingleValue } from 'react-select';
+import ReactSelect, {
+  CSSObjectWithLabel,
+  MenuPlacement,
+  SingleValue,
+} from 'react-select';
 import { Icon } from '../Icon/Icon';
 import { vars } from '../theme.css';
 
@@ -80,55 +84,65 @@ const Select = ({
           IndicatorsContainer,
         }}
         styles={{
-          control: (base) => ({
-            ...base,
-            backgroundColor: isDisabled
-              ? vars.color.backgroundDisabled
-              : 'inherit',
-            color: isDisabled ? vars.color.fontDisabled : 'inherit',
-            borderColor: vars.color.border,
-            boxShadow: 'none',
-            ':hover': {
-              borderColor: vars.color.border15,
+          control: (base) => {
+            return {
+              ...base,
+              backgroundColor: isDisabled
+                ? vars.color.backgroundDisabled
+                : 'inherit',
+              color: isDisabled ? vars.color.fontDisabled : 'inherit',
+              borderColor: vars.color.border,
               boxShadow: 'none',
-              color: vars.color.font50,
-            },
-            minHeight: 28,
-          }),
-          menu: (base) => ({
-            ...base,
-            width: 'auto', // makes menu as wide as longest option name
-            backgroundColor: vars.color.background,
-            marginTop: 0,
-            borderTop: 0,
-            boxShadow: '0px 14px 16px rgba(0, 0, 0, 0.14)',
-            zIndex: 100,
-          }),
-          option: (base) => ({
-            ...base,
-            backgroundColor: 'inherit',
-            ':hover': {
-              backgroundColor: vars.color.background96,
-            },
-          }),
+              ':hover': {
+                borderColor: vars.color.border15,
+                boxShadow: 'none',
+                color: vars.color.font50,
+              },
+              minHeight: 28,
+            } as CSSObjectWithLabel;
+          },
+          menu: (base) => {
+            return {
+              ...base,
+              width: 'auto', // makes menu as wide as longest option name
+              backgroundColor: vars.color.background,
+              marginTop: 0,
+              borderTop: 0,
+              boxShadow: '0px 14px 16px rgba(0, 0, 0, 0.14)',
+              zIndex: 100,
+            } as CSSObjectWithLabel;
+          },
+          option: (base) => {
+            return {
+              ...base,
+              backgroundColor: 'inherit',
+              ':hover': {
+                backgroundColor: vars.color.background96,
+              },
+            } as CSSObjectWithLabel;
+          },
           dropdownIndicator: () => ({
             display: 'none',
           }),
-          valueContainer: (base) => ({
-            ...base,
-            padding: 0,
-            // https://github.com/JedWatson/react-select/issues/3995#issuecomment-738470183
-            input: {
-              gridArea: 'auto',
-              height: 0,
-            },
-          }),
-          singleValue: (base) => ({
-            ...base,
-            color: 'inherit',
-            marginLeft: 8,
-            lineHeight: '16px',
-          }),
+          valueContainer: (base) => {
+            return {
+              ...base,
+              padding: 0,
+              // https://github.com/JedWatson/react-select/issues/3995#issuecomment-738470183
+              input: {
+                gridArea: 'auto',
+                height: 0,
+              },
+            } as CSSObjectWithLabel;
+          },
+          singleValue: (base) => {
+            return {
+              ...base,
+              color: 'inherit',
+              marginLeft: 8,
+              lineHeight: '16px',
+            } as CSSObjectWithLabel;
+          },
         }}
       />
     </>