chore(CI): move tasks from yarn to bun, improve cypress tests (#4476)

.circleci/config.yml

@@ -1,72 +1,52 @@
 version: 2.1
 
-### ABOUT
-#
-# This configuration powers our Circleci.io integration
-#
-# Note:
-# Netlify works independently from this configuration to
-# create pull request previews and to update `https://docs.ohif.org`
-###
-
-## https://github.com/cypress-io/circleci-orb
-##
 orbs:
   codecov: codecov/codecov@1.0.5
   cypress: cypress-io/cypress@3.3.1
 
-executors:
-  cypress-custom:
-    description: |
-      Single Docker container used to run Cypress Tests
-    docker:
-      - image: cimg/node:<< parameters.node-version >>-browsers
-    parameters:
-      node-version:
-        default: '18.16.1'
-        description: |
-          The version of Node to run your tests with.
-        type: string
-
 defaults: &defaults
   docker:
     - image: cimg/node:18.18
       environment:
-        TERM: xterm # Enable colors in term
+        TERM: xterm
         QUICK_BUILD: true
   working_directory: ~/repo
 
+commands:
+  install_bun:
+    steps:
+      - restore_cache:
+          keys:
+            - bun-cache-v2-{{ arch }}-latest
+      - run:
+          name: Install Bun
+          command: |
+            if [ ! -d "$HOME/.bun" ]; then
+              curl -fsSL https://bun.sh/install | bash
+            fi
+            echo 'export BUN_INSTALL="$HOME/.bun"' >> $BASH_ENV
+            echo 'export PATH="$BUN_INSTALL/bin:$PATH"' >> $BASH_ENV
+            source $BASH_ENV
+      - save_cache:
+          key: bun-cache-v2-{{ arch }}-latest
+          paths:
+            - ~/.bun
+
 jobs:
-  ###
-  # Workflow: PR_CHECKS
-  ###
   UNIT_TESTS:
     <<: *defaults
     resource_class: large
     steps:
-      # Update yarn
+      - install_bun
-      - run: yarn -v
       - run: node --version
-      # Checkout code and ALL Git Tags
       - checkout
-      - restore_cache:
-          name: Restore Yarn and Cypress Package Cache
-          keys:
-            # when lock file changes, use increasingly general patterns to restore cache
-            - yarn-packages-{{ checksum "yarn.lock" }}
-            - yarn-packages-
       - run:
           name: Install Dependencies
-          command: yarn install --frozen-lockfile
+          command: bun install --no-save
-      - save_cache:
-          name: Save Yarn Package Cache
-          paths:
-            - ~/.cache ## Cache yarn and Cypress
-          key: yarn-packages-{{ checksum "yarn.lock" }}
       # RUN TESTS
       - run:
           name: 'JavaScript Test Suite'
-          command: yarn run test:unit:ci
+          command: bun run test:unit:ci
       # platform/app
       - run:
           name: 'VIEWER: Combine report output'
@@ -94,36 +74,23 @@ jobs:
           file: '/home/circleci/repo/platform/core/coverage/reports'
           flags: 'core'
 
-  ###
-  # Workflow: DEPLOY
-  ###
   BUILD:
     <<: *defaults
     resource_class: large
     steps:
       # Checkout code and ALL Git Tags
       - checkout
-      - restore_cache:
+      - install_bun
-          name: Restore Yarn and Cypress Package Cache
-          keys:
-            # when lock file changes, use increasingly general patterns to restore cache
-            - yarn-packages-{{ checksum "yarn.lock" }}
-            - yarn-packages-
       - run:
           name: Install Dependencies
-          command: yarn install --frozen-lockfile
+          command: bun install --no-save
-      - save_cache:
-          name: Save Yarn Package Cache
-          paths:
-            - ~/.cache ## Cache yarn and Cypress
-          key: yarn-packages-{{ checksum "yarn.lock" }}
       # Build & Test
       - run:
           name: 'Perform the versioning before build'
-          command: node ./version.mjs
+          command: bun ./version.mjs
       - run:
           name: 'Build the OHIF Viewer'
-          command: yarn run build
+          command: bun run build
           no_output_timeout: 45m
       - run:
           name: 'Upload SourceMaps, Send Deploy Notification'
@@ -145,30 +112,18 @@ jobs:
             - commit.txt
             - version.json
 
-  # just to make sure later on we can publish them
   BUILD_PACKAGES_QUICK:
     <<: *defaults
     resource_class: large
     steps:
-      - run: yarn -v
+      - install_bun
       # Checkout code and ALL Git Tags
       - checkout
       - attach_workspace:
           at: ~/repo
-      # Use increasingly general patterns to restore cache
-      - restore_cache:
-          name: Restore Yarn and Cypress Package Cache
-          keys:
-            - yarn-packages-{{ checksum "yarn.lock" }}
-            - yarn-packages-
       - run:
           name: Install Dependencies
-          command: yarn install --frozen-lockfile
+          command: bun install --frozen-lockfile
-      - save_cache:
-          name: Save Yarn Package Cache
-          paths:
-            - ~/.cache/yarn
-          key: yarn-packages-{{ checksum "yarn.lock" }}
       - run:
           name: Avoid hosts unknown for github
           command: |
@@ -183,38 +138,24 @@ jobs:
       - run:
           name: build half of the packages (to avoid out of memory in circleci)
           command: |
-            yarn run build:package-all
+            bun run build:package-all
       - run:
           name: build the other half of the packages
           command: |
-            yarn run build:package-all-1
+            bun run build:package-all-1
 
-  ###
-  # Workflow: RELEASE
-  ###
   NPM_PUBLISH:
     <<: *defaults
     resource_class: large
     steps:
-      - run: yarn -v
+      - install_bun
       # Checkout code and ALL Git Tags
       - checkout
       - attach_workspace:
           at: ~/repo
-      # Use increasingly general patterns to restore cache
-      - restore_cache:
-          name: Restore Yarn and Cypress Package Cache
-          keys:
-            - yarn-packages-{{ checksum "yarn.lock" }}
-            - yarn-packages-
       - run:
           name: Install Dependencies
-          command: yarn install --frozen-lockfile
+          command: bun install --no-save
-      - save_cache:
-          name: Save Yarn Package Cache
-          paths:
-            - ~/.cache/yarn
-          key: yarn-packages-{{ checksum "yarn.lock" }}
       - run:
           name: Avoid hosts unknown for github
           command: |
@@ -229,11 +170,11 @@ jobs:
       - run:
           name: build half of the packages (to avoid out of memory in circleci)
           command: |
-            yarn run build:package-all
+            bun run build:package-all
       - run:
           name: build the other half of the packages
           command: |
-            yarn run build:package-all-1
+            bun run build:package-all-1
       - run:
           name: increase min time out
           command: |
@@ -245,14 +186,14 @@ jobs:
       - run:
           name: publish package versions
           command: |
-            node ./publish-version.mjs
+            bun ./publish-version.mjs
       - run:
           name: Again set the NPM registry (was deleted in the version script)
           command: echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" > ~/repo/.npmrc
       - run:
           name: publish package dist
           command: |
-            node ./publish-package.mjs
+            bun ./publish-package.mjs
       - persist_to_workspace:
           root: ~/repo
           paths:
@@ -324,93 +265,31 @@ jobs:
               docker push ohif/app:$IMAGE_VERSION_FULL
             fi
 
-  # This is copied from the Cypress orb since the default for cypress/run is node 16 and
+  CYPRESS:
-  # we migrated to 18
+    <<: *defaults
-  CYPRESS_CUSTOM_RUN:
-    description: |
-      A single, complete job to run Cypress end-to-end tests in your application.
-    executor: cypress-custom
-    parallelism: << parameters.parallelism >>
-    parameters:
-      cypress-cache-key:
-        default: cypress-cache-{{ arch }}-{{ checksum "package.json" }}
-        description: Cache key used to cache the Cypress binary.
-        type: string
-      cypress-cache-path:
-        default: ~/.cache/Cypress
-        description: |
-          By default, this will cache the '~/.cache/Cypress' directory so that the Cypress binary is cached. You can override this by providing your own cache path.
-        type: string
-      cypress-command:
-        default: npx cypress run
-        description: Command used to run your Cypress tests
-        type: string
-      include-branch-in-node-cache-key:
-        default: false
-        description: |
-          If true, this cache will only apply to runs within the same branch. (Adds -{{ .Branch }}- to the node cache key)
-        type: boolean
-      install-browsers:
-        default: false
-        description: |
-          Cypress runs by default in the Electron browser. Use this flag to install additional browsers to run your tests in.
-          This is only needed if you are passing the `--browser` flag in your `cypress-command`.
-          This parameter leverages the `circleci/browser-tools` orb and includes Chrome and FireFox.
-          If you need additional browser support you can set this to false and use an executor with a docker image
-          that includes the browsers of your choosing. See https://hub.docker.com/r/cypress/browsers/tags
-        type: boolean
-      install-command:
-        default: ''
-        description: Overrides the default NPM command (npm ci)
-        type: string
-      node-cache-version:
-        default: v1
-        description:
-          Change the default node cache version if you need to clear the cache for any reason.
-        type: string
-      package-manager:
-        default: npm
-        description: Select the default node package manager to use. NPM v5+ Required.
-        enum:
-          - npm
-          - yarn
-          - yarn-berry
-        type: enum
-      parallelism:
-        default: 4
-        description: |
-          Number of Circle machines to use for load balancing, min 1
-          (requires `parallel` and `record` flags in your `cypress-command`)
-        type: integer
-      post-install:
-        default: ''
-        description: |
-          Additional commands to run after running install but before verifying Cypress and saving cache.
-        type: string
-      start-command:
-        default: ''
-        description: Command used to start your local dev server for Cypress to tests against
-        type: string
-      working-directory:
-        default: ''
-        description: Directory containing package.json
-        type: string
     resource_class: large
+    parallelism: 8
     steps:
+      - install_bun
+      - run:
+          name: Install Xvfb
+          command: sudo apt-get update && sudo apt-get install -y xvfb
+      - run:
+          name: Start Xvfb
+          command: Xvfb :99 -screen 0 1920x1080x24 &
+          background: true
+      - run:
+          name: Export Display Variable
+          command: export DISPLAY=:99
       - cypress/install:
-          cypress-cache-key: << parameters.cypress-cache-key >>
+          install-browsers: true
-          cypress-cache-path: << parameters.cypress-cache-path >>
+          install-command: bun install --no-save
-          include-branch-in-node-cache-key: << parameters.include-branch-in-node-cache-key >>
+          package-manager: yarn
-          install-browsers: << parameters.install-browsers >>
-          install-command: << parameters.install-command >>
-          node-cache-version: << parameters.node-cache-version >>
-          package-manager: << parameters.package-manager >>
-          post-install: << parameters.post-install >>
-          working-directory: << parameters.working-directory >>
       - cypress/run-tests:
-          cypress-command: << parameters.cypress-command >>
+          cypress-command:
-          start-command: << parameters.start-command >>
+            npx wait-on@latest http://localhost:3000 && cd platform/app &&  npx cypress run --record
-          working-directory: << parameters.working-directory >>
+            --browser chrome --parallel
+          start-command: bun run test:data && bun run test:e2e:serve
 
 workflows:
   PR_CHECKS:
@@ -419,61 +298,12 @@ workflows:
           filters:
             branches:
               ignore: master
-      - UNIT_TESTS:
+      - UNIT_TESTS
-          requires:
+      - CYPRESS:
-            - BUILD_PACKAGES_QUICK
-      - CYPRESS_CUSTOM_RUN:
           name: 'Cypress Tests'
           context: cypress
-          matrix:
-            parameters:
-              start-command:
-                - yarn run test:data && yarn run test:e2e:serve
-              install-browsers:
-                - true
-              cypress-command:
-                - 'npx wait-on@latest http://localhost:3000 && cd platform/app &&  npx cypress run
-                  --record --browser chrome --parallel'
-              package-manager:
-                - 'yarn'
-              cypress-cache-key:
-                - 'yarn-packages-{{ checksum "yarn.lock" }}'
-              cypress-cache-path:
-                - '~/.cache/Cypress'
-          requires:
-            - BUILD_PACKAGES_QUICK
 
-  # PR_OPTIONAL_VISUAL_TESTS:
+  # viewer-dev.ohif.org
-  #   jobs:
-  #     - AWAIT_APPROVAL:
-  #         type: approval
-  #     # Update hub.docker.org
-  #     - cypress/run:
-  #         name: 'Generate Percy Snapshots'
-  #         executor: cypress/browsers-chrome76
-  #         browser: chrome
-  #         pre-steps:
-  #           - run: 'rm -rf ~/.yarn && yarn -v && yarn global add wait-on'
-  #         yarn: true
-  #         store_artifacts: false
-  #         working_directory: platform/app
-  #         build:
-  #           yarn test:data && npx cross-env QUICK_BUILD=true APP_CONFIG=config/dicomweb-server.js
-  #           yarn run build
-  #         # start server --> verify running --> percy + chrome + cypress
-  #         command: yarn run test:e2e:dist
-  #         cache-key: 'yarn-packages-{{ checksum "yarn.lock" }}'
-  #         no-workspace: true # Don't persist workspace
-  #         post-steps:
-  #           - store_artifacts:
-  #               path: platform/app/cypress/screenshots
-  #           - store_artifacts:
-  #               path: platform/app/cypress/videos
-  #         requires:
-  #           - AWAIT_APPROVAL
-
-  # Our master branch deploys to viewer-dev.ohif.org, the viewer.ohif.org is
-  # deployed from the release branch which is more stable and less frequently updated.
   DEPLOY_MASTER:
     jobs:
       - BUILD:
@@ -487,8 +317,7 @@ workflows:
           requires:
             - NPM_PUBLISH
 
-  # Our release branch deploys to viewer.ohif.org and is more stable and less
+  # viewer.ohif.org
-  # frequently updated after being tested in the staging environment.
   DEPLOY_RELEASE:
     jobs:
       - BUILD:
@@ -505,50 +334,3 @@ workflows:
       - DOCKER_RELEASE_PUBLISH:
           requires:
             - NPM_PUBLISH
-
-  ###
-  # Unit and E2E tests have already run for PR_CHECKS
-  # Re-running should not gain us any confidence here
-  ###
-  # RELEASE:
-  #   jobs:
-  #     - NPM_PUBLISH:
-  #         filters:
-  #           branches:
-  #             only: master
-  #     - DOCS_PUBLISH:
-  #         filters:
-  #           branches:
-  #             only: master
-  #     # Update base branch snapshots
-  #     # and record a Cypress dashboard test run
-  #     - cypress/run:
-  #         name: 'Generate Percy Snapshots'
-  #         executor: cypress/browsers-chrome76
-  #         browser: chrome
-  #         pre-steps:
-  #           - run: 'rm -rf ~/.yarn && npm i -g yarn && yarn -v && yarn global
-  #               add wait-on' # Use yarn latest
-  #         yarn: true
-  #         store_artifacts: false
-  #         working_directory: platform/app
-  #         build:
-  #           npx cross-env QUICK_BUILD=true APP_CONFIG=config/e2e.js yarn run
-  #           build
-  #         # start server --> verify running --> percy + chrome + cypress
-  #         command: yarn run test:e2e:dist
-  #         cache-key: 'yarn-packages-{{ checksum "yarn.lock" }}'
-  #         no-workspace: true # Don't persist workspace
-  #         post-steps:
-  #           - store_artifacts:
-  #               path: platform/app/cypress/screenshots
-  #           - store_artifacts:
-  #               path: platform/app/cypress/videos
-  #           - store_test_results:
-  #               path: platform/app/cypress/results
-  #         filters:
-  #           branches:
-  #             only: master
-  #     - DOCKER_MASTER_PUBLISH:
-  #         requires:
-  #           - NPM_PUBLISH

.github/workflows/playwright.yml

@@ -8,23 +8,28 @@ jobs:
   playwright-tests:
     timeout-minutes: 60
     runs-on: ubuntu-latest
+    container:
+      image: mcr.microsoft.com/playwright:v1.48.1-focal
     strategy:
       fail-fast: false
       matrix:
-        shardIndex: [1, 2, 3, 4, 5]
+        shardIndex: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
-        shardTotal: [5]
+        shardTotal: [10]
     steps:
       - uses: actions/checkout@v4
+      - name: Install unzip
+        run: apt-get update && apt-get install -y unzip
+      - uses: oven-sh/setup-bun@v2
       - uses: actions/setup-node@v4
         with:
           node-version: 18
       - name: Install dependencies
-        run: yarn install --frozen-lockfile
+        run: bun install --frozen-lockfile
-      - name: Install Playwright Browsers
+      - name: Set up Git safe directory
-        run: npx playwright install --with-deps
+        run: git config --global --add safe.directory /__w/Viewers/Viewers
       - name: Run Playwright tests
         run:
-          export NODE_OPTIONS="--max_old_space_size=8192" && npx playwright test --shard=${{
+          export NODE_OPTIONS="--max_old_space_size=8192" && bun x playwright test --shard=${{
           matrix.shardIndex }}/${{ matrix.shardTotal }}
 
       - name: Upload blob report to GitHub Actions Artifacts
@@ -40,12 +45,15 @@ jobs:
     needs: [playwright-tests]
     runs-on: ubuntu-latest
     steps:
+      - name: Install unzip
+        run: apt-get update && apt-get install -y unzip
+      - uses: oven-sh/setup-bun@v2
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
           node-version: 18
       - name: Install dependencies
-        run: yarn install --frozen-lockfile
+        run: bun install --frozen-lockfile
 
       - name: Download blob reports from GitHub Actions Artifacts
         uses: actions/download-artifact@v4
@@ -55,7 +63,7 @@ jobs:
           merge-multiple: true
 
       - name: Merge into HTML Report
-        run: npx playwright merge-reports --reporter html ./all-blob-reports
+        run: bun x playwright merge-reports --reporter html ./all-blob-reports
 
       - name: Upload HTML report
         uses: actions/upload-artifact@v4

package.json

@@ -112,7 +112,6 @@
     "package-json": "^8.1.0",
     "typescript": "5.5.4",
     "sharp": "^0.32.6",
-    "ip": "https://registry.npmjs.org/ip-address/-/ip-address-9.0.5.tgz",
     "**/express/path-to-regexp": "0.1.10",
     "**/serve/serve-handler/path-to-regexp": "3.3.0",
     "**/@docusaurus/core/serve-handler/path-to-regexp": "3.3.0",

yarn.lock

@@ -14382,12 +14382,10 @@ ip-address@^9.0.5:
     jsbn "1.1.0"
     sprintf-js "^1.1.3"
 
-ip@^1.1.0, "ip@https://registry.npmjs.org/ip-address/-/ip-address-9.0.5.tgz":
+ip@^1.1.0:
-  version "9.0.5"
+  version "1.1.9"
-  resolved "https://registry.npmjs.org/ip-address/-/ip-address-9.0.5.tgz#117a960819b08780c3bd1f14ef3c1cc1d3f3ea5a"
+  resolved "https://registry.yarnpkg.com/ip/-/ip-1.1.9.tgz#8dfbcc99a754d07f425310b86a99546b1151e396"
-  dependencies:
+  integrity sha512-cyRxvOEpNHNtchU3Ln9KC/auJgup87llfQpQ+t5ghoC/UhL16SWzbueiCsdTnWmqAWl7LadfuwhlqmtOaqMHdQ==
-    jsbn "1.1.0"
-    sprintf-js "^1.1.3"
 
 ipaddr.js@1.9.1:
   version "1.9.1"