Feature/update jest deps workflow

.github/workflows/actions.yml

@@ -1,32 +1,40 @@
 name: SDS Viewer Workflow
 
-# Controls when the workflow will run
 on:
-  # Triggers the workflow on push or pull request events but only for the specified branch
   push:
     branches:
-     - "master"
-     - "development"
+      - "master"
+      - "development"
   pull_request:
     branches:
-     - "master"
-     - "development"
+      - "master"
+      - "development"
 
-# A workflow run is made up of one or more jobs that can run sequentially or in parallel
-jobs: 
+jobs:
   sds_viewer_test:
-    # The type of runner that the job will run on
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-22.04
     container: lironavon/docker-puppeteer-container:14.16.0
     env:
       CI: true
     steps:
-    - uses: actions/checkout@v1
-    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v1
-      with:
-          node-version: 16.X
-    - name: SDS Viewer tests disabled
-      run: echo "Tests disabled for this pipeline"
-      env:
+      - uses: actions/checkout@v4
+
+      - name: Use Node.js 18.x
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18.x
+
+      - name: Install dependencies
+        run: yarn
+
+      - name: Start development server in background
+        run: |
+          yarn start &
+          npx wait-on http://localhost:3000
+        env:
+          CI: true
+
+      - name: Run E2E snapshot tests
+        run: npm run e2e_test
+        env:
           CI: true

__tests__/e2e.test.js

@@ -1,31 +1,30 @@
-import * as puppeteer from "puppeteer";
-import * as selectors from "./selectors";
-import { ONE_SECOND, ONE_MINUTE, TWO_MINUTES, TEN_MINUTES } from "./time_constants";
-import 'expect-puppeteer';
-import 'puppeteer'
-import { toMatchImageSnapshot } from 'jest-image-snapshot'
-import { time } from "console";
-expect.extend({ toMatchImageSnapshot })
+const puppeteer = require("puppeteer");
+const selectors = require("./selectors");
+const { ONE_SECOND, ONE_MINUTE, TWO_MINUTES, TEN_MINUTES } = require("./time_constants");
+require('expect-puppeteer');
+require('puppeteer');
+const { toMatchImageSnapshot } = require('jest-image-snapshot');
+const { time } = require("console");
+expect.extend({ toMatchImageSnapshot });
 const axios = require('axios').default;
 const fs = require('fs');
 const path = require('path');
 var scriptName = path.basename(__filename, '.js');
 
 
-const DEV_URL = 'https://metacell.github.io/sds-viewer/'
+const DEV_URL = process.env.DEV_URL || 'http://localhost:3000/'
 const DATASET_ID = '0a5a2827-2b39-4085-87ea-2b7fbbe27cc8'
 
 //SNAPSHOT
 const SNAPSHOT_OPTIONS = {
     customSnapshotsDir: './__tests__/snapshots',
     comparisonMethod: 'ssim',
     failureThresholdType: 'percent',
-    failureThreshold: 0.25
+    failureThreshold: 0.3
 };
 
 
 
-
 jest.setTimeout(TEN_MINUTES);
 
 

__tests__/selectors.js

@@ -1,23 +1,46 @@
 //Selectors: 
 
-export const EMPTY_DATASET_VIEWER_SELECTOR = '.MuiBox-empty';
-export const EMPTY_DATASET_LIST_SELECTOR = '.no-instance';
-export const LOAD_BUTTONS_SELECTOR = 'button[class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-disableElevation MuiButton-fullWidth"]';
-export const DATASET_LIST_SELECTOR = '.datasets_list';
-export const DATASET_ITEM_SELECTOR = '.dataset_item';
-export const DONE_BUTTON_SELECTOR = 'button[class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-disableElevation Mui-disabled MuiButton-fullWidth Mui-disabled"]';
-export const DATASET_COUNT_NUMBER_SELECTOR = 'p[class="MuiTypography-root MuiTypography-body1"]';
-export const SPARC_DATASET_LIST_SELECTOR = 'li[class="MuiListItem-root dataset_item MuiListItem-gutters"]';
-export const ENABLED_DONE_BUTTON_SELECTOR = 'button[class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-disableElevation MuiButton-fullWidth"]';
-export const LOADED_DATASET_SELECTOR = 'p[class="MuiTypography-root labelText MuiTypography-body2"]';
-export const GRAPH_SELECTOR = '.graph-view';
-export const OPEN_FOLDER_BUTTON_SELECTOR = 'span[class="MuiTypography-root labelCaption MuiTypography-caption MuiTypography-colorInherit"]';
-export const SUBFOLDERS_SELECTOR = 'ul[class="MuiCollapse-root MuiTreeItem-group MuiCollapse-entered"]'
-export const FELINE_DATASET_IMG_SELECTOR = 'img[alt="Feline brainstem neuron extracellular potential recordings"]';
-export const DATA_ID_SELECTOR = 'h6[class="MuiTypography-root breadcrumb_selected MuiTypography-subtitle2"]';
-export const URL_UPLOADER_SELECTOR = '#url-uploader';
-export const LOAD_DATA_POPUP_SELECTOR = 'div[class="MuiTabs-root rounded"]';
-export const LOAD_THROUGH_URL_TAB_SELECTOR = '#simple-tab-1';
-export const LOCAL_UPLOAD_TAB_SELECTOR = '#simple-tab-0';
-export const LOCAL_SYSTEM_UPLOAD_BUTTON_SELECTOR = '#simple-tabpanel-0';
+const EMPTY_DATASET_VIEWER_SELECTOR = '.MuiBox-empty';
+const EMPTY_DATASET_LIST_SELECTOR = '.no-instance';
+const LOAD_BUTTONS_SELECTOR = 'button[class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-disableElevation MuiButton-fullWidth"]';
+const DATASET_LIST_SELECTOR = '.datasets_list';
+const DATASET_ITEM_SELECTOR = '.dataset_item';
+const DONE_BUTTON_SELECTOR = 'button[class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-disableElevation Mui-disabled MuiButton-fullWidth Mui-disabled"]';
+const DATASET_COUNT_NUMBER_SELECTOR = 'p[class="MuiTypography-root MuiTypography-body1"]';
+const SPARC_DATASET_LIST_SELECTOR = 'li[class="MuiListItem-root dataset_item MuiListItem-gutters"]';
+const ENABLED_DONE_BUTTON_SELECTOR = 'button[class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-disableElevation MuiButton-fullWidth"]';
+const LOADED_DATASET_SELECTOR = 'p[class="MuiTypography-root labelText MuiTypography-body2"]';
+const GRAPH_SELECTOR = '.graph-view';
+const OPEN_FOLDER_BUTTON_SELECTOR = 'span[class="MuiTypography-root labelCaption MuiTypography-caption MuiTypography-colorInherit"]';
+const SUBFOLDERS_SELECTOR = 'ul[class="MuiCollapse-root MuiTreeItem-group MuiCollapse-entered"]'
+const FELINE_DATASET_IMG_SELECTOR = 'img[alt="Feline brainstem neuron extracellular potential recordings"]';
+const DATA_ID_SELECTOR = 'h6[class="MuiTypography-root breadcrumb_selected MuiTypography-subtitle2"]';
+const URL_UPLOADER_SELECTOR = '#url-uploader';
+const LOAD_DATA_POPUP_SELECTOR = 'div[class="MuiTabs-root rounded"]';
+const LOAD_THROUGH_URL_TAB_SELECTOR = '#simple-tab-1';
+const LOCAL_UPLOAD_TAB_SELECTOR = '#simple-tab-0';
+const LOCAL_SYSTEM_UPLOAD_BUTTON_SELECTOR = '#simple-tabpanel-0';
+
+module.exports = {
+  EMPTY_DATASET_VIEWER_SELECTOR,
+  EMPTY_DATASET_LIST_SELECTOR,
+  LOAD_BUTTONS_SELECTOR,
+  DATASET_LIST_SELECTOR,
+  DATASET_ITEM_SELECTOR,
+  DONE_BUTTON_SELECTOR,
+  DATASET_COUNT_NUMBER_SELECTOR,
+  SPARC_DATASET_LIST_SELECTOR,
+  ENABLED_DONE_BUTTON_SELECTOR,
+  LOADED_DATASET_SELECTOR,
+  GRAPH_SELECTOR,
+  OPEN_FOLDER_BUTTON_SELECTOR,
+  SUBFOLDERS_SELECTOR,
+  FELINE_DATASET_IMG_SELECTOR,
+  DATA_ID_SELECTOR,
+  URL_UPLOADER_SELECTOR,
+  LOAD_DATA_POPUP_SELECTOR,
+  LOAD_THROUGH_URL_TAB_SELECTOR,
+  LOCAL_UPLOAD_TAB_SELECTOR,
+  LOCAL_SYSTEM_UPLOAD_BUTTON_SELECTOR
+};
 

__tests__/time_constants.js

@@ -1,4 +1,11 @@
-export const TWO_MINUTES = 60000 * 2;
-export const ONE_SECOND = 1000
-export const ONE_MINUTE = 60000;
-export const TEN_MINUTES = 600000
+const TWO_MINUTES = 60000 * 2;
+const ONE_SECOND = 1000;
+const ONE_MINUTE = 60000;
+const TEN_MINUTES = 600000;
+
+module.exports = {
+  TWO_MINUTES,
+  ONE_SECOND,
+  ONE_MINUTE,
+  TEN_MINUTES
+};

jest-puppeteer.config.js

@@ -1,11 +1,12 @@
 module.exports = {
-    launch: {
-      headless: true,
-      // slowMo:20,
-      defaultViewport: {
-        width: 1000,
-        height: 800
-      },
-      timeout: 120000
+  launch: {
+    headless: 'new',
+    // slowMo:20,
+    defaultViewport: {
+      width: 1000,
+      height: 800
     },
-  }
+    timeout: 120000
+  },
+  testEnvironmentOptions: {}
+}

jest.config.js

@@ -1,8 +1,10 @@
 module.exports = {
   rootDir: "__tests__",
   verbose: true,
-  bail : false,
+  bail: false,
   preset: "jest-puppeteer",
+  testEnvironment: "jest-environment-puppeteer",
+  testEnvironmentOptions: {},
   globals: {
     "ts-jest": {
       tsConfig: {
@@ -11,4 +13,4 @@ module.exports = {
       },
     },
   }
-  };
+};

package.json

@@ -26,30 +26,31 @@
     "axios": "^0.21.1",
     "fs": "^0.0.1-security",
     "gh-pages": "^3.2.3",
-    "jest": "26.6.0",
-    "jest-image-snapshot": "4.5.1",
-    "jest-puppeteer": "^11.0.0",
+    "jest": "^29.7.0",
+    "jest-image-snapshot": "6.5.1",
+    "jest-puppeteer": "^7.0.0",
     "material-ui-dropzone": "^3.5.0",
     "n3": "^1.13.0",
-    "puppeteer": "^24.10.0",
+    "puppeteer": "^19.11.1",
     "react": "^17.0.2",
     "react-beautiful-dnd": "^13.1.1",
     "react-dom": "^17.0.2",
     "react-hot-loader": "^4.13.0",
     "react-redux": "^7.2.4",
     "react-scripts": "^5.0.1",
     "three": "^0.171.0",
-    "ts-jest": "^26.4.4",
+    "ts-jest": "^29.1.0",
     "typescript": "^4.2.4",
-    "uuid": "^8.3.2"
+    "uuid": "^8.3.2",
+    "expect-puppeteer": "^6.0.0"
   },
   "scripts": {
     "start": "craco start",
     "predeploy": "yarn build",
     "deploy": "gh-pages -d build",
     "build": "craco build",
     "test": "jest",
-    "e2e_test": "./node_modules/.bin/jest e2e.test.js --no-sandbox"
+    "e2e_test": "jest e2e --no-sandbox"
   },
   "eslintConfig": {
     "extends": "react-app"