update cypress and use official image (#89)

.github/workflows/build.yml

@@ -13,31 +13,12 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
 
-      - uses: docker/setup-qemu-action@v1
-      - uses: docker/setup-buildx-action@v1
-
-      - uses: actions/cache@v3
-        with:
-          path: /tmp/.buildx-cache
-          key: ${{ runner.os }}-buildx-${{ hashFiles('demo/docker/Dockerfile') }}
-          restore-keys: |
-            ${{ runner.os }}-buildx-
-
-      - uses: docker/build-push-action@v2
-        with:
-          file: demo/docker/Dockerfile
-          platforms: linux/amd64
-          tags: itwinui/cypress:latest
-          cache-from: type=local,src=/tmp/.buildx-cache
-          cache-to: type=local,dest=/tmp/.buildx-cache
-          load: true
-
-      - name: Use Node 16.X
-        uses: actions/setup-node@v2
+      - name: Use Node 18.X
+        uses: actions/setup-node@v4
         with:
-          node-version: 16.x
+          node-version: 18.x
           cache: yarn
 
       - run: yarn install --frozen-lockfile
@@ -65,12 +46,12 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
 
-      - name: Use Node 16.X
-        uses: actions/setup-node@v2
+      - name: Use Node 18.X
+        uses: actions/setup-node@v4
         with:
-          node-version: 16.x
+          node-version: 18.x
           cache: yarn
 
       - run: yarn install --frozen-lockfile

CONTRIBUTING.md

@@ -28,14 +28,6 @@ yarn start
 
 ### To run visual tests
 
-If you are running tests for the first time, then you need to build docker image locally by running:
-
-```console
-yarn build-docker
-```
-
-Then you can run tests by running:
-
 ```console
 yarn test
 ```

demo/cypress.config.cjs

@@ -0,0 +1,19 @@
+const { defineConfig } = require('cypress');
+const getCompareSnapshotsPlugin = require('cypress-image-diff-js/dist/plugin');
+
+module.exports = defineConfig({
+  e2e: {
+    baseUrl: 'http://localhost:4000/#/',
+    specPattern: 'src/**/*.spec.{js,ts,jsx,tsx}',
+    video: false,
+    defaultCommandTimeout: 20000,
+    requestTimeout: 20000,
+    viewportWidth: 3840,
+    viewportHeight: 2160,
+    retries: 3,
+    fixturesFolder: false,
+    setupNodeEvents(on, config) {
+      getCompareSnapshotsPlugin(on, config);
+    },
+  },
+});

demo/cypress/common/layoutDescribe.ts

@@ -17,7 +17,7 @@ const SCREEN_SIZES = [
  */
 export const layoutDescribe = (
   testsName: string,
-  callback: (screenSize: typeof SCREEN_SIZES[number]) => void,
+  callback: (screenSize: (typeof SCREEN_SIZES)[number]) => void,
 ) => {
   SCREEN_SIZES.forEach((screenSize) => {
     describe(`${testsName} ${screenSize.width}x${screenSize.height}`, () => {

demo/entrypoint.sh

@@ -1,11 +1,8 @@
 #!/bin/sh
 
-# `esbuild` is needed for the preview and it is has different binaries for different OSes
-# therefore we need to rebuild it in Docker container
-npm rebuild esbuild
 cd demo
 # `&` is used to run the process in the background
-yarn preview &
+yarn preview:serve &
 cypress run "$@"
 
 # exec "$@"

demo/package.json

@@ -24,10 +24,10 @@
     "dev": "vite",
     "build": "tsc --noEmit && vite build",
     "preview": "vite preview --port 4000",
+    "preview:serve": "npx -y serve dist -p 4000 -L",
     "test": "yarn build && node run-tests.js",
     "test:ci": "node run-tests.js",
-    "test:approve": "cypress-image-diff -u",
-    "build-docker": "node build-docker.js"
+    "test:approve": "cypress-image-diff -u"
   },
   "dependencies": {
     "@fontsource/noto-sans": "^4.5.11",
@@ -43,13 +43,13 @@
   "devDependencies": {
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
-    "@vitejs/plugin-react": "^1.0.7",
-    "cypress": "^9.5.0",
-    "cypress-image-diff-js": "^1.18.1",
+    "@vitejs/plugin-react": "^4.2.0",
+    "cypress": "^13.6.0",
+    "cypress-image-diff-js": "^1.32.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "sass": "^1.49.0",
-    "typescript": "^4.4.4",
-    "vite": "^2.9.16"
+    "sass": "^1.69.5",
+    "typescript": "^5.3.2",
+    "vite": "^5.0.4"
   }
 }

demo/run-tests.js

@@ -4,6 +4,8 @@
  *--------------------------------------------------------------------------------------------*/
 const { spawn } = require('child_process');
 
+const IMAGE_NAME = 'cypress/included:13.6.0'; // https://hub.docker.com/r/cypress/included
+
 // Need to use this script because current directory variable is different in different shells
 const dockerProcess = spawn(
   // --rm - removes container after run
@@ -12,7 +14,7 @@ const dockerProcess = spawn(
   // -w /e2e - makes `e2e` the working directory
   // cypress/included:9.5.0 or cookiescrumbs/cypress-m1:9.4.1 - Docker image to run
   // ./demo/entrypoint.sh - entrypoint script to run
-  `docker run --rm --entrypoint /bin/bash -v "${__dirname}/../":/e2e -w /e2e itwinui/cypress:latest ./demo/entrypoint.sh`,
+  `docker run --rm --entrypoint /bin/bash -v "${__dirname}/../":/e2e -w /e2e ${IMAGE_NAME} ./demo/entrypoint.sh`,
   {
     stdio: 'inherit',
     shell: true,

demo/vite.config.ts → demo/vite.config.mjs

@@ -8,7 +8,7 @@ import svgrPlugin from 'vite-plugin-svgr';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  base: `/iTwinUI-layouts/`,
+  base: `./`,
   plugins: [
     react(),
     svgrPlugin({

package.json

@@ -34,19 +34,19 @@
   },
   "devDependencies": {
     "@changesets/cli": "^2.26.1",
-    "@typescript-eslint/eslint-plugin": "^5.10.1",
-    "@typescript-eslint/parser": "^5.10.1",
+    "@typescript-eslint/eslint-plugin": "^6.13.1",
+    "@typescript-eslint/parser": "^6.13.1",
     "concurrently": "^7.0.0",
-    "eslint": "^8.7.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.28.0",
-    "eslint-plugin-react-hooks": "^4.3.0",
+    "eslint": "^8.54.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-prettier": "^5.0.1",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "husky": "^7.0.0",
     "lint-staged": "^11.2.6",
     "postcss": "^8.4.31",
     "postcss-scss": "^4.0.4",
-    "prettier": "^2.5.1",
+    "prettier": "^3.1.0",
     "stylelint": "^15.10.1",
     "stylelint-config-sass-guidelines": "^9.0.1"
   },