Enable Vue 3 compat mode

owncloud · Jan 5, 2023 · 55f2918 · 55f2918
1 parent 2d01cdb
commit 55f2918
Show file tree

Hide file tree

Showing 208 changed files with 1,842 additions and 1,895 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 {
  }
  }
  }
-}
+})
 </script>
 
 <style lang="scss">

diff --git a/packages/design-system/src/components/OcAvatars/__snapshots__/OcAvatars.spec.ts.snap b/packages/design-system/src/components/OcAvatars/__snapshots__/OcAvatars.spec.ts.snap
@@ -5,7 +5,7 @@ exports[`OcAvatars displays tooltip 1`] = `
  <span aria-hidden="true" class="oc-avatars">
  <oc-avatar-stub accessiblelabel="" src="https://images.unsplash.com/photo-1610216705422-caa3fcb6d158?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTB8fGZhY2V8ZW58MHwyfDB8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" username="Bob" width="30"></oc-avatar-stub>
  <oc-avatar-stub accessiblelabel="" src="https://images.unsplash.com/photo-1584308972272-9e4e7685e80f?ixid=MXwxMjA3fDB8MHxzZWFyY2h8Mzh8fGZhY2V8ZW58MHwyfDB8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" username="Marie" width="30"></oc-avatar-stub>
- <!---->
+ <!--v-if-->
  <oc-avatar-count-stub count="3" size="30"></oc-avatar-count-stub>
  </span>
  <span class="oc-invisible-sr">List of users</span>
@@ -18,7 +18,7 @@ exports[`OcAvatars prefers avatars over links when maxDisplayed is exceeded 1`]
  <oc-avatar-stub accessiblelabel="" src="https://images.unsplash.com/photo-1610216705422-caa3fcb6d158?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTB8fGZhY2V8ZW58MHwyfDB8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" username="Bob" width="30"></oc-avatar-stub>
  <oc-avatar-stub accessiblelabel="" src="https://images.unsplash.com/photo-1584308972272-9e4e7685e80f?ixid=MXwxMjA3fDB8MHxzZWFyY2h8Mzh8fGZhY2V8ZW58MHwyfDB8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" username="Marie" width="30"></oc-avatar-stub>
  <oc-avatar-stub accessiblelabel="" src="" username="John Richards Emperor of long names" width="30"></oc-avatar-stub>
- <!---->
+ <!--v-if-->
  <oc-avatar-count-stub count="2" size="30"></oc-avatar-count-stub>
  </span>
  <span class="oc-invisible-sr">List of users</span>
@@ -31,9 +31,9 @@ exports[`OcAvatars shows avatars first and links last 1`] = `
  <oc-avatar-stub accessiblelabel="" src="https://images.unsplash.com/photo-1610216705422-caa3fcb6d158?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTB8fGZhY2V8ZW58MHwyfDB8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" username="Bob" width="30"></oc-avatar-stub>
  <oc-avatar-stub accessiblelabel="" src="https://images.unsplash.com/photo-1584308972272-9e4e7685e80f?ixid=MXwxMjA3fDB8MHxzZWFyY2h8Mzh8fGZhY2V8ZW58MHwyfDB8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" username="Marie" width="30"></oc-avatar-stub>
  <oc-avatar-stub accessiblelabel="" src="" username="John Richards Emperor of long names" width="30"></oc-avatar-stub>
- <ocavatarlink-stub accessiblelabel="" iconsize="small" name="link 0" width="30"></ocavatarlink-stub>
- <ocavatarlink-stub accessiblelabel="" iconsize="small" name="link 1" width="30"></ocavatarlink-stub>
- <!---->
+ <oc-avatar-link-stub accessiblelabel="" iconsize="small" name="link 0" width="30"></oc-avatar-link-stub>
+ <oc-avatar-link-stub accessiblelabel="" iconsize="small" name="link 1" width="30"></oc-avatar-link-stub>
+ <!--v-if-->
  </span>
  <span class="oc-invisible-sr">List of users</span>
 </span>

diff --git a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.spec.ts b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.spec.ts
@@ -1,5 +1,6 @@
-import { shallowMount } from 'web-test-helpers'
+import { defaultPlugins, shallowMount } from 'web-test-helpers'
 import Breadcrumb from './OcBreadcrumb.vue'
+import { defineComponent } from 'vue'
 
 const items = [
  { text: 'First folder', to: { path: 'folder' } },
@@ -14,31 +15,34 @@ describe('OcBreadcrumb', () => {
  props: {
  variation: 'lead',
  items
- }
+ },
+ global: { renderStubDefaultSlot: true, plugins: [...defaultPlugins()] }
  })
 
  expect(wrapper.props().variation).toMatch('lead')
  expect(wrapper.classes()).toContain('oc-breadcrumb-lead')
- expect(wrapper).toMatchSnapshot()
+ expect(wrapper.html()).toMatchSnapshot()
  })
  it('displays all items', () => {
  const wrapper = shallowMount(Breadcrumb, {
  props: {
  items
- }
+ },
+ global: { renderStubDefaultSlot: true, plugins: [...defaultPlugins()] }
  })
 
  expect(wrapper.findAll('.oc-breadcrumb-list-item').length).toBe(items.length)
- expect(wrapper).toMatchSnapshot()
+ expect(wrapper.html()).toMatchSnapshot()
  })
  it('displays context menu trigger when a slot is given', () => {
  const wrapper = shallowMount(Breadcrumb, {
  props: {
  items
  },
  slots: {
- contextMenu: 'Example item'
- }
+ contextMenu: defineComponent({})
+ },
+ global: { renderStubDefaultSlot: true, plugins: [...defaultPlugins()] }
  })
 
  expect(wrapper.find('#oc-breadcrumb-contextmenu-trigger').exists()).toBe(true)
@@ -47,7 +51,8 @@ describe('OcBreadcrumb', () => {
  const wrapper = shallowMount(Breadcrumb, {
  props: {
  items
- }
+ },
+ global: { renderStubDefaultSlot: true, plugins: [...defaultPlugins()] }
  })
 
  expect(wrapper.find('#oc-breadcrumb-contextmenu-trigger').exists()).toBe(false)

diff --git a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
@@ -40,7 +40,6 @@
  mode="click"
  close-on-click
  :padding-size="contextMenuPadding"
- @click.native.stop.prevent
  >
  <!-- @slot Add context actions that open in a dropdown when clicking on the "three dots" button -->
  <slot name="contextMenu" />
@@ -163,7 +162,12 @@ export default {
  return this.$gettext('Show actions for current folder')
  },
  showContextMenu() {
- return !!this.$slots.contextMenu
+ const contextMenuSlot = this.$slots.contextMenu
+ if (!contextMenuSlot) {
+ return false
+ }
+ const slotContent = contextMenuSlot()[0] ?? null
+ return !!slotContent?.type?.name
  }
  },
  methods: {