Polyfill Vue Test Utils 2 API

package.json

@@ -112,7 +112,6 @@
     "typescript": "4.8.4",
     "url-search-params-polyfill": "8.1.1",
     "vue-template-compiler": "2.6.14",
-    "vuex-mock-store": "0.0.8",
     "wait-for-expect": "3.0.2"
   },
   "engines": {

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

@@ -1,89 +1,25 @@
 import App from '../../src/App.vue'
-import { shallowMount, createLocalVue } from '@vue/test-utils'
-import Vuex from 'vuex'
-import GetTextPlugin from 'vue-gettext'
+import { createStore, defaultComponentMocks, defaultPlugins, shallowMount } from 'web-test-helpers'
+import { FileContext, useAppDefaults } from 'web-pkg/src/composables/appDefaults'
+import { useAppDefaultsMock } from 'web-test-helpers/src/mocks/useAppDefaultsMock'
+import { ref } from '@vue/composition-api'
+import { mockDeep } from 'jest-mock-extended'
+import { defaultStoreMockOptions } from 'web-test-helpers/src/mocks/store/defaultStoreMockOptions'
 
-const localVue = createLocalVue()
-
-localVue.use(GetTextPlugin, {
-  translations: 'does-not-matter.json',
-  silent: true
+jest.mock('web-pkg/src/composables/appDefaults', () => {
+  const { queryItemAsString } = jest.requireActual('web-pkg/src/composables/appDefaults')
+  return {
+    useAppDefaults: jest.fn(),
+    useAppFileHandling: jest.fn(),
+    queryItemAsString
+  }
 })
-localVue.use(Vuex)
 
 const componentStubs = {
   ErrorScreen: true,
   LoadingScreen: true
 }
 
-const $route = {
-  query: {
-    'public-token': 'a-token',
-    app: 'exampleApp',
-    fileId: '2147491323'
-  },
-  params: {
-    filePath: 'someFile.md'
-  }
-}
-
-const mockFileInfo = jest.fn(() => ({
-  name: $route.params.filePath,
-  fileInfo: {
-    '{http://owncloud.org/ns}fileid': '2147491323'
-  }
-}))
-
-const storeOptions = {
-  getters: {
-    configuration: jest.fn(() => ({
-      server: 'http://example.com/',
-      currentTheme: {
-        general: {
-          name: 'some-company'
-        }
-      }
-    })),
-    capabilities: jest.fn(() => ({
-      files: {
-        app_providers: [
-          {
-            apps_url: '/app/list',
-            enabled: true,
-            open_url: '/app/open'
-          }
-        ]
-      }
-    }))
-  },
-  modules: {
-    External: {
-      namespaced: true,
-      getters: {
-        mimeTypes: jest.fn()
-      },
-      actions: {
-        fetchMimeTypes: jest.fn()
-      },
-      mutations: {
-        SET_MIME_TYPES: jest.fn()
-      }
-    },
-    runtime: {
-      namespaced: true,
-      modules: {
-        auth: {
-          namespaced: true,
-          getters: {
-            accessToken: jest.fn(() => 'GFwHKXdsMgoFwt'),
-            isUserContextReady: jest.fn(() => true)
-          }
-        }
-      }
-    }
-  }
-}
-
 const appUrl = 'https://example.test/d12ab86/loe009157-MzBw'
 
 const providerSuccessResponsePost = {
@@ -102,107 +38,101 @@ const providerSuccessResponseGet = {
 
 describe('The app provider extension', () => {
   beforeEach(() => {
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    jest.spyOn(console, 'error').mockImplementation(() => {})
+    jest.spyOn(console, 'error').mockImplementation(() => undefined)
   })
 
   afterEach(() => {
     jest.clearAllMocks()
   })
 
   it('should show a loading spinner while loading', async () => {
-    const makeRequest = jest.fn(
-      () =>
-        new Promise((resolve) => {
-          setTimeout(() => {
-            resolve({
-              ok: true,
-              status: 200
-            })
-          }, 500)
-        })
-    )
-    const wrapper = createShallowMountWrapper(makeRequest)
+    const { wrapper } = createShallowMountWrapper()
     await wrapper.vm.$nextTick()
     expect(wrapper).toMatchSnapshot()
   })
   it('should show a meaningful message if an error occurs during loading', async () => {
-    const makeRequest = jest.fn(() =>
-      Promise.resolve({
-        ok: false,
-        status: 500,
-        message: 'We encountered an internal error'
-      })
-    )
-    const wrapper = createShallowMountWrapper(makeRequest)
+    const makeRequest = jest.fn().mockResolvedValue({
+      ok: false,
+      status: 500,
+      message: 'We encountered an internal error'
+    })
+    const { wrapper } = createShallowMountWrapper(makeRequest)
     await wrapper.vm.$nextTick()
     await wrapper.vm.$nextTick()
     expect(wrapper).toMatchSnapshot()
   })
   it('should fail for unauthenticated users', async () => {
-    const makeRequest = jest.fn(() =>
-      Promise.resolve({
-        ok: true,
-        status: 401,
-        message: 'Login Required'
-      })
-    )
-    const wrapper = createShallowMountWrapper(makeRequest)
+    const makeRequest = jest.fn().mockResolvedValue({
+      ok: true,
+      status: 401,
+      message: 'Login Required'
+    })
+    const { wrapper } = createShallowMountWrapper(makeRequest)
     await wrapper.vm.$nextTick()
     await wrapper.vm.$nextTick()
     expect(wrapper).toMatchSnapshot()
   })
   it('should be able to load an iFrame via get', async () => {
-    const makeRequest = jest.fn(() =>
-      Promise.resolve({
-        ok: true,
-        status: 200,
-        data: providerSuccessResponseGet
-      })
-    )
+    const makeRequest = jest.fn().mockResolvedValue({
+      ok: true,
+      status: 200,
+      data: providerSuccessResponseGet
+    })
 
-    const wrapper = createShallowMountWrapper(makeRequest)
+    const { wrapper } = createShallowMountWrapper(makeRequest)
     await wrapper.vm.$nextTick()
     await wrapper.vm.$nextTick()
     await wrapper.vm.$nextTick()
     expect(wrapper).toMatchSnapshot()
   })
   it('should be able to load an iFrame via post', async () => {
-    const makeRequest = jest.fn(() =>
-      Promise.resolve({
-        ok: true,
-        status: 200,
-        data: providerSuccessResponsePost
-      })
-    )
-    const wrapper = createShallowMountWrapper(makeRequest)
+    const makeRequest = jest.fn().mockResolvedValue({
+      ok: true,
+      status: 200,
+      data: providerSuccessResponsePost
+    })
+    const { wrapper } = createShallowMountWrapper(makeRequest)
     await wrapper.vm.$nextTick()
     await wrapper.vm.$nextTick()
     await wrapper.vm.$nextTick()
     expect(wrapper).toMatchSnapshot()
   })
 })
 
-function createShallowMountWrapper(makeRequest, options = {}) {
-  return shallowMount(App, {
-    localVue,
-    store: createStore(),
-    stubs: componentStubs,
-    mocks: {
-      $route
-    },
-    computed: {
-      currentFileContext: () => $route.params,
-      applicationName: () => $route.query.app
-    },
-    methods: {
-      getFileInfo: mockFileInfo,
+function createShallowMountWrapper(makeRequest = jest.fn().mockResolvedValue({ status: 200 })) {
+  jest.mocked(useAppDefaults).mockImplementation(() =>
+    useAppDefaultsMock({
+      currentFileContext: ref(mockDeep<FileContext>({ path: 'someFile.md' })),
       makeRequest
-    },
-    ...options
-  })
-}
+    })
+  )
 
-function createStore() {
-  return new Vuex.Store(storeOptions)
+  const storeOptions = defaultStoreMockOptions
+  storeOptions.getters.capabilities.mockImplementation(() => ({
+    files: {
+      app_providers: [
+        {
+          apps_url: '/app/list',
+          enabled: true,
+          open_url: '/app/open'
+        }
+      ]
+    }
+  }))
+
+  const store = createStore(storeOptions)
+  return {
+    wrapper: shallowMount(App, {
+      global: {
+        plugins: [...defaultPlugins(), store],
+        stubs: componentStubs,
+        mocks: {
+          ...defaultComponentMocks({
+            gettext: false,
+            currentRoute: { query: { app: 'exampleApp' } }
+          })
+        }
+      }
+    })
+  }
 }

packages/web-app-external/tests/unit/components/ErrorScreen.spec.ts

@@ -1,25 +1,17 @@
 import ErrorScreen from '../../../src/components/ErrorScreen.vue'
-import { Wrapper, mount, createLocalVue } from '@vue/test-utils'
-import GetTextPlugin from 'vue-gettext'
-
-const localVue = createLocalVue()
-
-localVue.use(GetTextPlugin, {
-  translations: 'does-not-matter.json',
-  silent: true
-})
-
-let wrapper: Wrapper<any>
+import { defaultPlugins, mount } from 'web-test-helpers'
 
 describe('The external app error screen component', () => {
   test('displays an icon and a paragraph', () => {
-    wrapper = mount(ErrorScreen, {
-      localVue,
-      stubs: {
-        OcIcon: true
-      },
-      propsData: {
+    const wrapper = mount(ErrorScreen, {
+      props: {
         message: 'Error when loading the application'
+      },
+      global: {
+        stubs: {
+          OcIcon: true
+        },
+        plugins: [...defaultPlugins()]
       }
     })
     expect(wrapper).toMatchSnapshot()

packages/web-app-external/tests/unit/components/LoadingScreen.spec.ts

@@ -1,22 +1,14 @@
 import LoadingScreen from '../../../src/components/LoadingScreen.vue'
-import { Wrapper, mount, createLocalVue } from '@vue/test-utils'
-import GetTextPlugin from 'vue-gettext'
-
-const localVue = createLocalVue()
-
-localVue.use(GetTextPlugin, {
-  translations: 'does-not-matter.json',
-  silent: true
-})
-
-let wrapper: Wrapper<any>
+import { defaultPlugins, mount } from 'web-test-helpers'
 
 describe('The external app loading screen component', () => {
   test('displays a spinner and a paragraph', () => {
-    wrapper = mount(LoadingScreen, {
-      localVue,
-      stubs: {
-        OcSpinner: true
+    const wrapper = mount(LoadingScreen, {
+      global: {
+        stubs: {
+          OcSpinner: true
+        },
+        plugins: [...defaultPlugins()]
       }
     })
     expect(wrapper).toMatchSnapshot()

packages/web-app-external/tests/unit/components/__snapshots__/ErrorScreen.spec.ts.snap

@@ -2,7 +2,7 @@
 
 exports[`The external app error screen component displays an icon and a paragraph 1`] = `
 <div class="oc-text-center">
-  <ocicon-stub size="xxlarge" name="error-warning" fill-type="line"></ocicon-stub>
+  <ocicon-stub name="error-warning" filltype="line" accessiblelabel="" type="span" size="xxlarge" variation="passive" color=""></ocicon-stub>
   <p class="oc-text-xlarge">Error when loading the application</p>
 </div>
 `;

packages/web-app-external/tests/unit/components/__snapshots__/LoadingScreen.spec.ts.snap

@@ -2,7 +2,7 @@
 
 exports[`The external app loading screen component displays a spinner and a paragraph 1`] = `
 <div class="oc-text-center">
-  <ocspinner-stub size="xlarge"></ocspinner-stub>
-  <p class="oc-invisible" data-msgid="Loading app" data-current-language="en_US">Loading app</p>
+  <ocspinner-stub arialabel="" size="xlarge"></ocspinner-stub>
+  <p class="oc-invisible">Loading app</p>
 </div>
 `;

packages/web-app-files/package.json

@@ -27,10 +27,10 @@
     "vue-resize": "^1.0.1",
     "vue-router": "3.6.5",
     "vuex": "^3.6.2",
-    "vuex-extensions": "^1.1.5",
     "web-app-search": "workspace:*",
     "web-client": "npm:@ownclouders/web-client",
     "web-pkg": "npm:@ownclouders/web-pkg",
-    "web-runtime": "workspace:*"
+    "web-runtime": "workspace:*",
+    "web-test-helpers": "workspace:*"
   }
 }

packages/web-app-files/src/components/Search/Preview.vue

@@ -26,7 +26,7 @@ import { ImageDimension, ImageType } from '../../constants'
 import { loadPreview } from 'web-pkg/src/helpers/preview'
 import debounce from 'lodash-es/debounce'
 import Vue from 'vue'
-import { mapGetters, mapState } from 'vuex'
+import { mapGetters } from 'vuex'
 import { createLocationShares, createLocationSpaces } from '../../router'
 import { basename, dirname } from 'path'
 import { useAccessToken, useCapabilityShareJailEnabled, useStore } from 'web-pkg/src/composables'
@@ -63,7 +63,7 @@ export default defineComponent({
   },
   computed: {
     ...mapGetters(['configuration', 'user']),
-    ...mapState('runtime/spaces', ['spaces']),
+    ...mapGetters('runtime/spaces', ['spaces']),
 
     attrs() {
       return this.resource.isFolder