From 55f2918ba7e21be30a8294d7020bb582fdbebffd Mon Sep 17 00:00:00 2001 From: Jannik Stehle Date: Thu, 5 Jan 2023 12:33:59 +0100 Subject: [PATCH] Enable Vue 3 compat mode --- package.json | 16 +- packages/design-system/package.json | 12 +- .../OcAccordionItem/OcAccordionItem.spec.ts | 16 +- .../OcAvatarCount/OcAvatarCount.spec.ts | 2 +- .../components/OcAvatars/OcAvatars.spec.ts | 6 +- .../src/components/OcAvatars/OcAvatars.vue | 5 +- .../__snapshots__/OcAvatars.spec.ts.snap | 10 +- .../OcBreadcrumb/OcBreadcrumb.spec.ts | 21 +- .../components/OcBreadcrumb/OcBreadcrumb.vue | 8 +- .../__snapshots__/OcBreadcrumb.spec.ts.snap | 56 +- .../src/components/OcButton/OcButton.spec.ts | 25 +- .../src/components/OcButton/OcButton.vue | 1 + .../components/OcCheckbox/OcCheckbox.spec.ts | 6 +- .../src/components/OcCheckbox/OcCheckbox.vue | 3 +- .../OcDatepicker/OcDatepicker.spec.ts | 14 +- .../components/OcDatepicker/OcDatepicker.vue | 35 +- .../OcDrop/__snapshots__/OcDrop.spec.ts.snap | 6 + .../src/components/OcGrid/OcGrid.spec.ts | 3 +- .../src/components/OcImage/OcImage.spec.ts | 3 +- .../components/OcInfoDrop/OcInfoDrop.spec.ts | 10 +- .../src/components/OcList/OcList.vue | 17 +- .../src/components/OcLogo/OcLogo.vue | 10 +- .../src/components/OcModal/OcModal.spec.ts | 15 +- .../__snapshots__/OcModal.spec.ts.snap | 30 +- .../OcNotificationMessage.spec.ts | 3 +- .../OcNotifications/OcNotifications.spec.ts | 7 +- .../components/OcPageSize/OcPageSize.spec.ts | 7 +- .../src/components/OcPageSize/OcPageSize.vue | 11 +- .../OcPagination/OcPagination.spec.ts | 8 +- .../components/OcProgress/OcProgress.spec.ts | 2 +- .../src/components/OcRadio/OcRadio.spec.ts | 8 +- .../OcRecipient/OcRecipient.spec.ts | 5 +- .../components/OcResource/OcResource.spec.ts | 34 +- .../src/components/OcResource/OcResource.vue | 5 +- .../__snapshots__/OcResource.spec.ts.snap | 6 +- .../OcResourceIcon/OcResourceIcon.vue | 4 +- .../OcResourceLink/OcResourceLink.vue | 6 +- .../OcResourceName/OcResourceName.spec.ts | 12 +- .../__snapshots__/OcResourceName.spec.ts.snap | 8 +- .../OcSearchBar/OcSearchBar.spec.ts | 31 +- .../components/OcSearchBar/OcSearchBar.vue | 2 + .../src/components/OcSelect/OcSelect.vue | 13 +- .../components/OcTable/OcTable.sort.spec.ts | 3 +- .../src/components/OcTable/OcTable.spec.ts | 24 +- .../src/components/OcTable/OcTable.vue | 26 +- .../src/components/OcTag/OcTag.spec.ts | 2 +- .../OcTag/__snapshots__/OcTag.spec.ts.snap | 6 +- .../OcTextInput/OcTextInput.spec.ts | 8 +- .../src/components/OcTextarea/OcTextarea.vue | 3 +- .../src/components/OcTile/OcTile.spec.ts | 7 +- .../src/components/OcTile/OcTile.vue | 3 +- .../OcTile/__snapshots__/OcTile.spec.ts.snap | 19 +- .../_OcTableCell/OcTableCell.spec.ts | 6 +- .../components/_OcTableCell/_OcTableCell.vue | 11 +- .../_OcTableCellHead/_OcTableCellHead.vue | 4 +- .../components/_OcTableRow/_OcTableRow.vue | 25 +- .../composables/useIsVisible/index.spec.js | 2 +- packages/web-app-draw-io/package.json | 2 +- packages/web-app-external/package.json | 2 +- .../tests/unit/__snapshots__/app.spec.ts.snap | 30 +- .../web-app-external/tests/unit/app.spec.ts | 4 +- .../__snapshots__/ErrorScreen.spec.ts.snap | 2 +- .../__snapshots__/LoadingScreen.spec.ts.snap | 4 +- packages/web-app-files/package.json | 2 +- .../src/components/AppBar/CreateAndUpload.vue | 15 +- .../src/components/AppBar/ViewOptions.vue | 3 +- .../components/FilesList/KeyboardActions.vue | 2 +- .../components/FilesList/ResourceTable.vue | 4 +- .../components/FilesList/ResourceTiles.vue | 4 +- .../InviteCollaboratorForm.vue | 9 +- .../Shares/Collaborators/RoleDropdown.vue | 5 +- .../components/SideBar/Shares/FileLinks.vue | 11 +- .../web-app-files/src/composables/index.ts | 6 - .../src/composables/viewMode/useViewMode.ts | 2 +- .../web-app-files/src/views/FilesDrop.vue | 4 +- .../mocks/useResourcesViewDefaultsMock.ts | 4 +- .../unit/components/ActionMenuItem.spec.ts | 1 + .../unit/components/AppBar/AppBar.spec.ts | 2 +- .../components/AppBar/CreateAndUpload.spec.ts | 45 +- .../components/AppBar/CreateSpace.spec.ts | 11 +- .../AppBar/SharesNavigation.spec.ts | 1 + .../__snapshots__/ResourceUpload.spec.ts.snap | 4 +- .../components/AppBar/ViewOptions.spec.ts | 15 +- .../AppBar/__snapshots__/AppBar.spec.ts.snap | 76 +- .../CreateAndUpload.spec.ts.snap | 44 +- .../__snapshots__/CreateSpace.spec.ts.snap | 3 +- .../__snapshots__/SidebarToggle.spec.ts.snap | 6 +- .../__snapshots__/ViewOptions.spec.ts.snap | 51 +- .../unit/components/ContextActionMenu.spec.ts | 4 +- .../FilesList/ContextActions.spec.ts | 8 +- .../FilesList/KeyboardActions.spec.ts | 8 +- .../FilesList/NotFoundMessage.spec.ts | 5 +- .../components/FilesList/Pagination.spec.ts | 2 +- .../components/FilesList/QuickActions.spec.ts | 14 +- .../FilesList/ResourceTable.spec.ts | 8 +- .../FilesList/ResourceTiles.spec.ts | 14 +- .../__snapshots__/ResourceTiles.spec.ts.snap | 10 +- .../tests/unit/components/Search/List.spec.ts | 2 +- .../unit/components/Search/Preview.spec.ts | 3 +- .../SideBar/Actions/FileActions.spec.ts | 8 +- .../__snapshots__/FileDetails.spec.ts.snap | 248 +++--- .../__snapshots__/SpaceDetails.spec.ts.snap | 12 +- .../unit/components/SideBar/FileInfo.spec.ts | 4 +- .../AutocompleteItem.spec.ts | 3 +- .../ExpirationDatepicker.spec.ts | 23 +- .../InviteCollaboratorForm.spec.ts | 14 +- .../ExpirationDatepicker.spec.ts.snap | 3 + .../RecipientContainer.spec.ts.snap | 52 +- .../Shares/Collaborators/ListItem.spec.ts | 24 +- .../Shares/Collaborators/RoleDropdown.spec.ts | 11 +- .../__snapshots__/ListItem.spec.ts.snap | 8 +- .../__snapshots__/RoleDropdown.spec.ts.snap | 208 ++--- .../SideBar/Shares/FileLinks.spec.ts | 6 +- .../SideBar/Shares/FileShares.spec.ts | 18 +- .../Shares/Links/DetailsAndEdit.spec.ts | 7 +- .../__snapshots__/DetailsAndEdit.spec.ts.snap | 28 +- .../__snapshots__/NameAndCopy.spec.ts.snap | 6 +- .../SideBar/Shares/SpaceMembers.spec.ts | 12 +- .../__snapshots__/FileShares.spec.ts.snap | 18 +- .../__snapshots__/SpaceMembers.spec.ts.snap | 37 +- .../unit/components/SideBar/SideBar.spec.ts | 5 +- .../SideBar/Versions/FileVersions.spec.ts | 7 +- .../PrivateLinkItem.spec.ts.snap | 11 +- .../tests/unit/components/SpaceQuota.spec.ts | 2 +- .../SpaceContextActions.spec.ts.snap | 21 +- .../__snapshots__/SpaceHeader.spec.ts.snap | 88 +- .../useFileListHeaderPosition.spec.ts | 16 +- .../unit/views/shares/SharedViaLink.spec.ts | 2 +- .../unit/views/shares/SharedWithMe.spec.ts | 12 +- .../views/shares/SharedWithOthers.spec.ts | 2 +- .../unit/views/spaces/GenericSpace.spec.ts | 20 +- .../unit/views/spaces/GenericTrash.spec.ts | 8 +- .../__snapshots__/Projects.spec.ts.snap | 6 +- packages/web-app-pdf-viewer/package.json | 2 +- packages/web-app-preview/package.json | 2 +- packages/web-app-preview/src/App.vue | 2 +- .../web-app-search/src/portals/SearchBar.vue | 14 +- .../tests/unit/portals/SearchBar.spec.ts | 29 +- packages/web-app-text-editor/package.json | 2 +- .../tests/unit/app.spec.ts | 6 +- packages/web-app-user-management/package.json | 2 +- .../src/composables/loadTasks/useLoadTasks.ts | 2 +- .../tests/unit/components/AppTemplate.spec.ts | 8 +- .../Groups/SideBar/EditPanel.spec.ts | 3 +- .../tests/unit/views/Groups.spec.ts | 10 +- .../tests/unit/views/Users.spec.ts | 82 +- packages/web-client/src/webdav/deleteFile.ts | 5 +- packages/web-pkg/package.json | 2 +- .../src/components/AppLoadingSpinner.vue | 2 +- .../web-pkg/src/components/QuotaSelect.vue | 10 +- .../composables/appDefaults/useAppDefaults.ts | 1 - .../appDefaults/useAppDocumentTitle.ts | 2 - .../appDefaults/useAppFileHandling.ts | 2 +- .../composables/authContext/useAuthService.ts | 4 +- .../clientService/useClientService.ts | 5 +- .../src/composables/router/useRouter.ts | 8 +- .../web-pkg/src/composables/service/index.ts | 1 + .../src/composables/service/useService.ts | 7 + .../web-pkg/src/composables/store/useStore.ts | 4 +- .../translations/useTranslations.ts | 11 +- .../web-pkg/src/helpers/preview/common.ts | 4 +- .../tests/unit/components/QuotaSelect.spec.ts | 26 +- .../sidebar/CompareSaveDialog.spec.ts | 4 +- .../composables/router/useRouteQuery.spec.ts | 13 +- .../unit/composables/router/useRouter.spec.ts | 7 +- .../store/useMutationSubscription.spec.ts | 4 +- .../unit/composables/store/useStore.spec.ts | 2 +- packages/web-runtime/package.json | 6 +- .../src/container/application/classic.ts | 6 +- .../src/container/application/index.ts | 2 +- .../src/container/application/next.ts | 3 +- .../web-runtime/src/container/bootstrap.ts | 10 +- packages/web-runtime/src/index.ts | 2 + packages/web-runtime/src/router/index.ts | 9 +- packages/web-runtime/src/store/index.js | 4 +- .../tests/unit/components/Avatar.spec.ts | 17 +- .../tests/unit/components/MessageBar.spec.ts | 6 +- .../components/SidebarNav/SidebarNav.spec.ts | 3 +- .../__snapshots__/SidebarNav.spec.ts.snap | 21 +- .../__snapshots__/SidebarNavItem.spec.ts.snap | 20 +- .../Topbar/ApplicationsMenu.spec.ts | 1 + .../components/Topbar/Notification.spec.ts | 11 +- .../unit/components/Topbar/UserMenu.spec.ts | 1 + .../ApplicationsMenu.spec.ts.snap | 8 +- .../__snapshots__/FeedbackLink.spec.ts.snap | 1 + .../__snapshots__/ThemeSwitcher.spec.ts.snap | 30 +- .../Topbar/__snapshots__/TopBar.spec.ts.snap | 6 +- .../__snapshots__/UserMenu.spec.ts.snap | 164 ++-- .../tests/unit/components/UploadInfo.spec.ts | 2 +- .../tests/unit/mixins/lifecycleMixin.spec.ts | 11 +- .../pages/__snapshots__/account.spec.ts.snap | 36 +- .../unit/pages/resolvePublicLink.spec.ts | 13 +- packages/web-test-helpers/package.json | 2 +- .../web-test-helpers/src/defaultPlugins.ts | 40 +- packages/web-test-helpers/src/helpers.ts | 90 +-- packages/web-test-helpers/src/mocks/axios.ts | 4 +- .../src/mocks/defaultComponentMocks.ts | 3 + .../src/mocks/useAppDefaultsMock.ts | 12 +- patches/vue-gettext@2.1.12.patch | 15 + pnpm-lock.yaml | 755 ++++++------------ .../FilesPageElement/expirationDatePicker.js | 10 +- .../support/objects/app-files/link/actions.ts | 4 +- .../objects/app-files/resource/actions.ts | 6 +- .../config/{jest.config.js => jest.config.ts} | 21 +- tests/unit/config/jest.init.js | 9 +- tests/unit/stubs/function.ts | 1 + vite.config.ts | 17 +- web.d.ts | 14 +- 208 files changed, 1842 insertions(+), 1895 deletions(-) create mode 100644 packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/InviteCollaborator/__snapshots__/ExpirationDatepicker.spec.ts.snap create mode 100644 packages/web-pkg/src/composables/service/index.ts create mode 100644 packages/web-pkg/src/composables/service/useService.ts create mode 100644 patches/vue-gettext@2.1.12.patch rename tests/unit/config/{jest.config.js => jest.config.ts} (72%) create mode 100644 tests/unit/stubs/function.ts diff --git a/package.json b/package.json index 3ecb025defe..b40042e161a 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,7 @@ "lint": "eslint vite.config.ts '{packages,tests}/**/*.{js,ts,vue}' --color", "serve": "SERVER=true pnpm build:w", "test:e2e:cucumber": "NODE_TLS_REJECT_UNAUTHORIZED=0 cucumber-js --profile=e2e -f json:tests/e2e/cucumber/report/cucumber_report.json", - "test:unit": "NODE_OPTIONS=--unhandled-rejections=throw jest --config ./tests/unit/config/jest.config.js", + "test:unit": "NODE_OPTIONS=--unhandled-rejections=throw jest --config ./tests/unit/config/jest.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' --excludePackages '@ownclouders/babel-preset;@ownclouders/eslint-config;@ownclouders/prettier-config;@ownclouders/tsconfig;@ownclouders/web-client;@ownclouders/web-pkg,draw-io;external;web-app-files;text-editor;preview;@ownclouders/design-system;pdf-viewer;web-app-search;user-management;web-runtime'", "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", @@ -31,11 +31,15 @@ "not OperaMobile > 0" ], "dependencies": { + "@vue/compat": "3.2.45", + "@vue/compiler-dom": "^3.2.45", + "@vue/compiler-sfc": "3.2.45", + "@vue/runtime-dom": "^3.2.45", "keycode": "^2.2.1", "rollup-plugin-gzip": "^3.1.0", "vite-plugin-static-copy": "^0.12.0", "vite-plugin-treat-umd-as-commonjs": "0.1.3", - "vue": "2.7.14" + "vue": "3.2.45" }, "peerDependencies": { "caf": "*", @@ -63,9 +67,9 @@ "@types/lodash-es": "4.17.6", "@types/node": "16.18.11", "@types/node-fetch": "2.6.2", - "@vitejs/plugin-vue2": "2.2.0", - "@vue/test-utils": "1.3.3", - "@vue/vue2-jest": "29.2.2", + "@vitejs/plugin-vue": "4.0.0", + "@vue/test-utils": "2.2.2", + "@vue/vue3-jest": "29.0.0", "autoprefixer": "10.4.13", "babel-core": "7.0.0-bridge.0", "babel-jest": "29.3.1", @@ -139,7 +143,7 @@ "patchedDependencies": { "@adobe/leonardo-contrast-colors@1.0.0-alpha.16": "patches/@adobe__leonardo-contrast-colors@1.0.0-alpha.16.patch", "jest-serializer-vue-tjw@3.19.0": "patches/jest-serializer-vue-tjw@3.19.0.patch", - "v-calendar@2.3.4": "patches/v-calendar@2.3.4.patch" + "vue-gettext@2.1.12": "patches/vue-gettext@2.1.12.patch" } }, "jestSerializer": { diff --git a/packages/design-system/package.json b/packages/design-system/package.json index 4f09a3ce9f9..d6ad49e26ee 100644 --- a/packages/design-system/package.json +++ b/packages/design-system/package.json @@ -50,7 +50,7 @@ "@babel/preset-env": "^7.14.8", "@babel/runtime": "^7.19.4", "@popperjs/core": "^2.4.0", - "@vue/test-utils": "^1.2.0", + "@vue/compat": "3.2.45", "autoprefixer": "^10.0.0", "babel-core": "^7.0.0-bridge.0", "babel-jest": "^29.0.2", @@ -106,15 +106,15 @@ "tippy.js": "^6.3.7", "typescript": "^4.3.2", "url-loader": "^4.1.1", - "v-calendar": "^2.3.4", - "vue": "2.7.14", + "v-calendar": "github:dschmidt/v-calendar#3ce6e3b8afd5491cb53ee811281d5fa8a45b044d", "vue-gettext": "^2.1.12", "vue-inline-svg": "^2.0.0", "vue-jest": "^3.0.4", "vue-loader": "^15.9.0", - "vue-select": "^3.12.0", + "vue-select": "4.0.0-beta.6", "vue-style-loader": "^4.1.2", "vue-styleguidist": "^4.44.2", + "vue": "3.2.45", "web-test-helpers": "workspace:*", "webfontloader": "^1.6.28", "webpack": "^4.41.6", @@ -134,8 +134,8 @@ "postcss-import": "^12.0.1", "postcss-url": "^9.0.0", "tippy.js": "^6.3.7", - "v-calendar": "^2.3.4", - "vue": "^2.7.13", + "v-calendar": "github:dschmidt/v-calendar#3ce6e3b8afd5491cb53ee811281d5fa8a45b044d", + "vue": "3.2.45", "vue-inline-svg": "^2.0.0", "vue-select": "^3.12.0", "web-client": "npm:@ownclouders/web-client", diff --git a/packages/design-system/src/components/OcAccordionItem/OcAccordionItem.spec.ts b/packages/design-system/src/components/OcAccordionItem/OcAccordionItem.spec.ts index 202b6caf8c1..d73c1c670c6 100644 --- a/packages/design-system/src/components/OcAccordionItem/OcAccordionItem.spec.ts +++ b/packages/design-system/src/components/OcAccordionItem/OcAccordionItem.spec.ts @@ -41,10 +41,9 @@ describe('OcAccordionItem', () => { describe('icon prop', () => { describe('when icon is not given', () => { - let wrapper - wrapper = getWrapper({}) + const wrapper = getWrapper({}) it('should not render any icon', () => { - const titleHeadingSpan = wrapper.find('.oc-accordion-title > oc-button-stub > span') + const titleHeadingSpan = wrapper.find('.oc-accordion-title > .oc-button > span') expect(titleHeadingSpan.findAll('.oc-mr-s').length).toBe(0) }) }) @@ -53,7 +52,7 @@ describe('OcAccordionItem', () => { const wrapper = getWrapper({ icon: 'mdi-icon' }) - const titleHeadingSpan = wrapper.find('.oc-accordion-title > oc-button-stub > span') + const titleHeadingSpan = wrapper.find('.oc-accordion-title > .oc-button > span') expect(titleHeadingSpan.findAll('.oc-mr-s').length).toBe(1) }) }) @@ -65,8 +64,8 @@ describe('OcAccordionItem', () => { it('when title button is clicked', async () => { const toggleExpandedSpy = jest.spyOn((OcAccordionItem as any).methods, 'toggleExpanded') const wrapper = getWrapper() - const titleButton = wrapper.find('.oc-accordion-title oc-button-stub') - await titleButton.vm.$emit('click') + const titleButton = wrapper.findComponent('.oc-accordion-title .oc-button') + await titleButton.trigger('click') expect(toggleExpandedSpy).toHaveBeenCalledTimes(1) }) }) @@ -77,6 +76,11 @@ function getWrapper(props = {}) { props: { title: 'Test title', ...props + }, + global: { + stubs: { + OcButton: false + } } }) } diff --git a/packages/design-system/src/components/OcAvatarCount/OcAvatarCount.spec.ts b/packages/design-system/src/components/OcAvatarCount/OcAvatarCount.spec.ts index cf04e95ed78..a62cd83c992 100644 --- a/packages/design-system/src/components/OcAvatarCount/OcAvatarCount.spec.ts +++ b/packages/design-system/src/components/OcAvatarCount/OcAvatarCount.spec.ts @@ -11,6 +11,6 @@ describe('OcAvatarCount', () => { }) expect((wrapper.element as HTMLElement).style.fontSize).toMatch('40px') - expect(wrapper).toMatchSnapshot() + expect(wrapper.html()).toMatchSnapshot() }) }) diff --git a/packages/design-system/src/components/OcAvatars/OcAvatars.spec.ts b/packages/design-system/src/components/OcAvatars/OcAvatars.spec.ts index 836f40b5862..2dcf4884b85 100644 --- a/packages/design-system/src/components/OcAvatars/OcAvatars.spec.ts +++ b/packages/design-system/src/components/OcAvatars/OcAvatars.spec.ts @@ -56,7 +56,7 @@ describe('OcAvatars', () => { }) expect(OcTooltip.mock.calls[0][1].value).toMatch('Bob, Marie +3') - expect(wrapper).toMatchSnapshot() + expect(wrapper.html()).toMatchSnapshot() }) it('prefers avatars over links when maxDisplayed is exceeded', () => { @@ -78,7 +78,7 @@ describe('OcAvatars', () => { expect(OcTooltip.mock.calls[0][1].value).toMatch( 'Bob, Marie, John Richards Emperor of long names +2' ) - expect(wrapper).toMatchSnapshot() + expect(wrapper.html()).toMatchSnapshot() }) it('shows avatars first and links last', () => { @@ -99,6 +99,6 @@ describe('OcAvatars', () => { expect(OcTooltip.mock.calls[0][1].value).toMatch( 'Bob, Marie, John Richards Emperor of long names, link 0, link 1' ) - expect(wrapper).toMatchSnapshot() + expect(wrapper.html()).toMatchSnapshot() }) }) diff --git a/packages/design-system/src/components/OcAvatars/OcAvatars.vue b/packages/design-system/src/components/OcAvatars/OcAvatars.vue index ad5dfce98d9..614610de748 100644 --- a/packages/design-system/src/components/OcAvatars/OcAvatars.vue +++ b/packages/design-system/src/components/OcAvatars/OcAvatars.vue @@ -37,11 +37,12 @@ import OcAvatarLink from '../OcAvatarLink/OcAvatarLink.vue' import OcAvatarGroup from '../OcAvatarGroup/OcAvatarGroup.vue' import OcAvatarFederated from '../OcAvatarFederated/OcAvatarFederated.vue' import OcAvatarGuest from '../OcAvatarGuest/OcAvatarGuest.vue' +import { defineComponent } from 'vue' /** * Display a group of avatars */ -export default { +export default defineComponent({ name: 'OcAvatars', status: 'ready', release: '2.1.0', @@ -156,7 +157,7 @@ export default { } } } -} +})