Merge pull request #1417 from opencloud-eu/renovate/major-vitest-monorepo

chore(deps): update vitest monorepo to v4 (major)

Author: JammingBen

package.json

@@ -21,7 +21,7 @@
     "test:e2e:mobile-webkit": "BROWSER=mobile-webkit NODE_TLS_REJECT_UNAUTHORIZED=0 TS_NODE_PROJECT=./tests/e2e/cucumber/tsconfig.json cucumber-js --profile=e2e ./tests/e2e/cucumber/features/mobile-view",
     "test:e2e:ipad-chromium": "BROWSER=ipad-chromium NODE_TLS_REJECT_UNAUTHORIZED=0 TS_NODE_PROJECT=./tests/e2e/cucumber/tsconfig.json cucumber-js --profile=e2e ./tests/e2e/cucumber/features/mobile-view",
     "test:e2e:ipad-safari": "BROWSER=ipad-landscape-webkit NODE_TLS_REJECT_UNAUTHORIZED=0 TS_NODE_PROJECT=./tests/e2e/cucumber/tsconfig.json cucumber-js --profile=e2e ./tests/e2e/cucumber/features/mobile-view",
-    "test:unit": "NODE_OPTIONS=--unhandled-rejections=throw vitest",
+    "test:unit": "NODE_OPTIONS=--unhandled-rejections=throw vitest --config ./tests/unit/config/vitest.config.ts",
     "licenses:check": "license-checker-rseidelsohn --summary --relativeLicensePath --onlyAllow 'Python-2.0;Apache*;Apache License, Version 2.0;Apache-2.0;Apache 2.0;Artistic-2.0;BSD;BSD-3-Clause;CC-BY-3.0;CC-BY-4.0;CC0-1.0;ISC;MIT;MPL-2.0;Public Domain;Unicode-TOU;Unlicense;WTFPL;BlueOak-1.0.0' --excludePackages '@opencloud-eu/babel-preset;@opencloud-eu/eslint-config;@opencloud-eu/prettier-config;@opencloud-eu/tsconfig;@opencloud-eu/web-client;@opencloud-eu/web-pkg;external;web-app-files;text-editor;preview;web-app-ocm;@opencloud-eu/design-system;pdf-viewer;web-app-search;admin-settings;webfinger;web-runtime;@opencloud-eu/web-test-helpers'",
     "licenses:csv": "license-checker-rseidelsohn --relativeLicensePath --csv --out ./third-party-licenses/third-party-licenses.csv",
     "licenses:save": "license-checker-rseidelsohn --relativeLicensePath --out /dev/null --files ./third-party-licenses/third-party-licenses",
@@ -60,8 +60,8 @@
     "@types/lodash-es": "^4.17.12",
     "@types/luxon": "^3.7.1",
     "@vitejs/plugin-vue": "6.0.1",
-    "@vitest/coverage-v8": "^3.0.5",
-    "@vitest/web-worker": "^3.0.5",
+    "@vitest/coverage-v8": "^4.0.0",
+    "@vitest/web-worker": "^4.0.0",
     "@vue/compiler-dom": "3.5.22",
     "@vue/compiler-sfc": "3.5.22",
     "@vue/test-utils": "2.4.6",
@@ -92,7 +92,7 @@
     "vite-plugin-node-polyfills": "0.24.0",
     "vite-plugin-static-copy": "^3.0.0",
     "vite-plugin-treat-umd-as-commonjs": "0.1.4",
-    "vitest": "^3.0.5",
+    "vitest": "^4.0.0",
     "vitest-mock-extended": "3.1.0",
     "vue": "3.5.22",
     "vue-demi": "0.14.10",

packages/design-system/src/composables/useIsVisible/index.spec.ts

@@ -4,16 +4,21 @@ import { mount } from '@opencloud-eu/web-test-helpers'
 
 const mockIntersectionObserver = () => {
   const enable = () => {
-    const mock = {
-      observe: vi.fn(),
-      disconnect: vi.fn(),
-      unobserve: vi.fn()
-    }
-
-    window.IntersectionObserver = vi.fn().mockImplementation(() => mock)
+    const observeMock = vi.fn()
+    const unobserveMock = vi.fn()
+    const disconnectMock = vi.fn()
+    window.IntersectionObserver = vi.fn(
+      class {
+        observe = observeMock
+        unobserve = unobserveMock
+        disconnect = disconnectMock
+      }
+    ) as any
 
     return {
-      mock,
+      observeMock,
+      unobserveMock,
+      disconnectMock,
       callback: (args: unknown[], fastForward = 0) => {
         ;(window.IntersectionObserver as any).mock.calls[0][0](args)
         vi.advanceTimersByTime(fastForward)
@@ -64,15 +69,15 @@ describe('useIsVisible', () => {
   })
 
   it('observes the target', async () => {
-    const { mock: observerMock } = enableIntersectionObserver()
+    const { observeMock } = enableIntersectionObserver()
     createWrapper()
     await nextTick()
 
-    expect(observerMock.observe).toHaveBeenCalledTimes(1)
+    expect(observeMock).toHaveBeenCalledTimes(1)
   })
 
   it('only shows once and then gets unobserved if the the composable is in the default show mode', async () => {
-    const { mock: observerMock, callback: observerCallback } = enableIntersectionObserver()
+    const { unobserveMock, callback: observerCallback } = enableIntersectionObserver()
     const wrapper = createWrapper()
 
     await nextTick()
@@ -81,11 +86,11 @@ describe('useIsVisible', () => {
     observerCallback([{ isIntersecting: true }])
     await nextTick()
     expect((wrapper.vm.$refs.target as any).innerHTML).toBe('true')
-    expect(observerMock.unobserve).toHaveBeenCalledTimes(1)
+    expect(unobserveMock).toHaveBeenCalledTimes(1)
   })
 
   it('shows and hides multiple times if the the composable is in showHide mode', async () => {
-    const { mock: observerMock, callback: observerCallback } = enableIntersectionObserver()
+    const { unobserveMock, callback: observerCallback } = enableIntersectionObserver()
     const wrapper = createWrapper({ mode: 'showHide' })
 
     await nextTick()
@@ -94,15 +99,15 @@ describe('useIsVisible', () => {
     observerCallback([{ isIntersecting: true }])
     await nextTick()
     expect((wrapper.vm.$refs.target as any).innerHTML).toBe('true')
-    expect(observerMock.unobserve).toHaveBeenCalledTimes(0)
+    expect(unobserveMock).toHaveBeenCalledTimes(0)
   })
 
   it('disconnects the observer before component gets unmounted', () => {
-    const { mock: observerMock } = enableIntersectionObserver()
+    const { disconnectMock } = enableIntersectionObserver()
     const wrapper = createWrapper()
 
-    expect(observerMock.disconnect).toHaveBeenCalledTimes(0)
+    expect(disconnectMock).toHaveBeenCalledTimes(0)
     wrapper.unmount()
-    expect(observerMock.disconnect).toHaveBeenCalledTimes(1)
+    expect(disconnectMock).toHaveBeenCalledTimes(1)
   })
 })

packages/web-app-files/tests/unit/HandleUpload.spec.ts

@@ -17,10 +17,20 @@ import {
   OcUppyBody
 } from '@opencloud-eu/web-pkg'
 import { Language } from 'vue3-gettext'
-import { UploadResourceConflict } from '../../src/helpers/resource/actions'
 import { createTestingPinia } from '@opencloud-eu/web-test-helpers'
 
-vi.mock('../../src/helpers/resource/actions')
+let getConflictsMock = vi.fn()
+let displayOverwriteDialogMock = vi.fn()
+
+vi.mock('../../src/helpers/resource/actions', () => {
+  const UploadResourceConflict = vi.fn(
+    class {
+      getConflicts = getConflictsMock
+      displayOverwriteDialog = displayOverwriteDialogMock
+    }
+  )
+  return { UploadResourceConflict }
+})
 
 type UppyPlugin = UnknownPlugin<OcUppyMeta, OcUppyBody, Record<string, unknown>>
 
@@ -247,14 +257,14 @@ describe('HandleUpload', () => {
     })
     describe('conflict handling check', () => {
       it('checks for conflicts if check enabled', async () => {
-        const { instance, mocks } = getWrapper()
+        const { instance } = getWrapper()
         await instance.handleUpload([mock<OcUppyFile>({ name: 'name' })])
-        expect(mocks.resourceConflict.getConflicts).toHaveBeenCalled()
+        expect(getConflictsMock).toHaveBeenCalled()
       })
       it('does not check for conflicts if check disabled', async () => {
-        const { instance, mocks } = getWrapper({ conflictHandlingEnabled: false })
+        const { instance } = getWrapper({ conflictHandlingEnabled: false })
         await instance.handleUpload([mock<OcUppyFile>({ name: 'name' })])
-        expect(mocks.resourceConflict.getConflicts).not.toHaveBeenCalled()
+        expect(getConflictsMock).not.toHaveBeenCalled()
       })
       it('does not start upload if all files were skipped in conflict handling', async () => {
         const { instance, mocks } = getWrapper({ conflicts: [{}], conflictHandlerResult: [] })
@@ -300,10 +310,8 @@ const getWrapper = ({
   conflictHandlerResult = [],
   spaces = []
 } = {}) => {
-  const resourceConflict = mock<UploadResourceConflict>()
-  resourceConflict.getConflicts.mockReturnValue(conflicts)
-  resourceConflict.displayOverwriteDialog.mockResolvedValue(conflictHandlerResult)
-  vi.mocked(UploadResourceConflict).mockImplementation(() => resourceConflict)
+  getConflictsMock = vi.fn(() => conflicts)
+  displayOverwriteDialogMock = vi.fn().mockResolvedValue(conflictHandlerResult)
 
   const route = mock<RouteLocationNormalizedLoaded>()
   route.params.driveAliasAndItem = '1'
@@ -334,7 +342,7 @@ const getWrapper = ({
     quotaCheckEnabled
   }
 
-  const mocks = { uppy, opts, resourceConflict }
+  const mocks = { uppy, opts }
   const instance = new HandleUpload(uppy, opts)
   return { instance, mocks }
 }

packages/web-app-preview/tests/unit/app.spec.ts

@@ -4,6 +4,8 @@ import { defaultComponentMocks, defaultPlugins, shallowMount } from '@opencloud-
 import { FileContext, queryItemAsString } from '@opencloud-eu/web-pkg'
 import { mock } from 'vitest-mock-extended'
 
+vi.mock('@panzoom/panzoom')
+
 vi.mock('@opencloud-eu/web-pkg', async (importOriginal) => ({
   ...(await importOriginal<any>()),
   queryItemAsString: vi.fn(),

packages/web-pkg/package.json

@@ -75,7 +75,7 @@
     "@opencloud-eu/web-test-helpers": "workspace:^",
     "@types/dompurify": "3.2.0",
     "@types/lodash-es": "4.17.12",
-    "@vitest/web-worker": "^3.0.5",
+    "@vitest/web-worker": "^4.0.0",
     "clean-publish": "5.2.2",
     "vite-plugin-dts": "4.5.4",
     "vite-plugin-node-polyfills": "0.24.0"

packages/web-pkg/tests/unit/components/Avatars/AvatarUpload.spec.ts

@@ -10,24 +10,21 @@ import { useMessages } from '../../../../src'
 import { describe } from 'vitest'
 
 vi.mock('cropperjs', () => {
-  return {
-    default: vi.fn().mockImplementation(() => ({
-      getCroppedCanvas: vi.fn(() => ({
+  const Cropper = vi.fn(
+    class {
+      getCroppedCanvas = vi.fn(() => ({
         toBlob: vi.fn((cb) => cb(new Blob())),
         toDataURL: vi.fn(() => 'data:image/png;base64,mocked')
-      })),
-      destroy: vi.fn(),
-      replace: vi.fn(),
-      reset: vi.fn(),
-      crop: vi.fn(),
-      move: vi.fn(),
-      rotate: vi.fn(),
-      scale: vi.fn(),
-      ready: vi.fn(() => true)
-    }))
-  }
+      }))
+      destroy = vi.fn()
+      ready = vi.fn(() => true)
+    }
+  )
+  return { default: Cropper }
 })
 
+window.URL.createObjectURL = vi.fn(() => 'foo')
+
 const selectors = {
   removeAvatarButton: '.avatar-upload-remove-button',
   avatarFileInput: '.avatar-file-input',

packages/web-pkg/tests/unit/components/Spaces/SpaceImageModal.spec.ts

@@ -8,23 +8,7 @@ import { useSpaceHelpers } from '../../../../src/composables/spaces/useSpaceHelp
 vi.mock('../../../../src/composables/spaces/useSpaceHelpers', () => ({
   useSpaceHelpers: vi.fn()
 }))
-vi.mock('cropperjs', () => {
-  return {
-    default: vi.fn().mockImplementation(() => ({
-      getCroppedCanvas: vi.fn(() => ({
-        toBlob: vi.fn((cb) => cb(new Blob())),
-        toDataURL: vi.fn(() => 'data:image/png;base64,mocked')
-      })),
-      destroy: vi.fn(),
-      replace: vi.fn(),
-      reset: vi.fn(),
-      crop: vi.fn(),
-      move: vi.fn(),
-      rotate: vi.fn(),
-      scale: vi.fn()
-    }))
-  }
-})
+vi.mock('cropperjs')
 
 window.URL.createObjectURL = vi.fn(() => '')
 

packages/web-pkg/tests/unit/observer/visibility.spec.ts

@@ -3,17 +3,20 @@ import { VisibilityObserver } from '../../../src/observer'
 let callback: (
   arg: { isIntersecting: boolean; intersectionRatio: number; target: HTMLElement }[]
 ) => void
-let mockIntersectionObserver: IntersectionObserver
+
+const observeMock = vi.fn()
+const unobserveMock = vi.fn()
 const reset = () => {
-  mockIntersectionObserver = {
-    observe: vi.fn(),
-    disconnect: vi.fn(),
-    unobserve: vi.fn()
-  } as unknown as IntersectionObserver
-  window.IntersectionObserver = vi.fn().mockImplementation((cb) => {
-    callback = cb
-    return mockIntersectionObserver
-  })
+  window.IntersectionObserver = vi.fn(
+    class {
+      constructor(cb: typeof callback) {
+        callback = cb
+      }
+      observe = observeMock
+      unobserve = unobserveMock
+      disconnect = vi.fn()
+    }
+  ) as any
 }
 
 beforeEach(reset)
@@ -29,10 +32,10 @@ describe('VisibilityObserver', () => {
       onExit: vi.fn()
     },
     {}
-  ])('observes %p', (cb) => {
+  ])('observes %s', (cb) => {
     const observer = new VisibilityObserver()
     observer.observe(document.getElementById('target'), cb)
-    expect(mockIntersectionObserver.observe).toHaveBeenCalledTimes(Object.keys(cb).length ? 1 : 0)
+    expect(observeMock).toHaveBeenCalledTimes(Object.keys(cb).length ? 1 : 0)
   })
 
   it('handles entered and exited callbacks', () => {
@@ -58,7 +61,7 @@ describe('VisibilityObserver', () => {
     expect(onExit).toHaveBeenCalledTimes(2)
   })
 
-  it.each(['disconnect', 'unobserve'] as const)('handles %p', (m) => {
+  it.each(['disconnect', 'unobserve'] as const)('handles %s', (m) => {
     const onEnter = vi.fn()
     const onExit = vi.fn()
     const observer = new VisibilityObserver()
@@ -94,15 +97,15 @@ describe('VisibilityObserver', () => {
     callback([{ isIntersecting: false, intersectionRatio: -1, target }])
     expect(onEnter).toHaveBeenCalledTimes(0)
     expect(onExit).toHaveBeenCalledTimes(0)
-    expect(mockIntersectionObserver.unobserve).toHaveBeenCalledTimes(0)
+    expect(unobserveMock).toHaveBeenCalledTimes(0)
     callback([{ isIntersecting: true, intersectionRatio: 1, target }])
     expect(onEnter).toHaveBeenCalledTimes(1)
     expect(onExit).toHaveBeenCalledTimes(0)
-    expect(mockIntersectionObserver.unobserve).toHaveBeenCalledTimes(0)
+    expect(unobserveMock).toHaveBeenCalledTimes(0)
     callback([{ isIntersecting: false, intersectionRatio: -1, target }])
     expect(onEnter).toHaveBeenCalledTimes(1)
     expect(onExit).toHaveBeenCalledTimes(1)
-    expect(mockIntersectionObserver.unobserve).toHaveBeenCalledTimes(1)
+    expect(unobserveMock).toHaveBeenCalledTimes(1)
     callback([{ isIntersecting: true, intersectionRatio: 1, target }])
     expect(onEnter).toHaveBeenCalledTimes(1)
     expect(onExit).toHaveBeenCalledTimes(1)

packages/web-runtime/tests/unit/components/Account/ThemeSwitcher.spec.ts

@@ -1,5 +1,5 @@
-import { WebThemeType, useThemeStore, ThemeConfigType } from '@opencloud-eu/web-pkg'
-import { mock, mockDeep } from 'vitest-mock-extended'
+import { useThemeStore, ThemeConfigType } from '@opencloud-eu/web-pkg'
+import { mockDeep } from 'vitest-mock-extended'
 import ThemeSwitcher from '../../../../src/components/Account/ThemeSwitcher.vue'
 import { defaultPlugins, defaultStubs, mount } from '@opencloud-eu/web-test-helpers'
 
@@ -49,10 +49,10 @@ function getWrapper({ hasOnlyOneTheme = false } = {}) {
               stubActions: false,
               themeState: {
                 availableThemes,
-                currentTheme: mock<WebThemeType>({
+                currentTheme: {
                   ...themeConfig.clients.web.defaults,
                   ...themeConfig.clients.web.themes[0]
-                })
+                }
               }
             }
           })