From 183f838e63f9a3f9ca128aa77fccf37150576293 Mon Sep 17 00:00:00 2001
From: Florian Schade <f.schade@icloud.com>
Date: Mon, 5 Apr 2021 10:17:56 +0200
Subject: [PATCH] move theme to web-runtime and get it closer where it belongs
 to extract theme loading into own helper method add test to verify theme
 loading is working as expected fix theme loading, before it has overwritten
 the whole theme object, now we respect the values and keys that are set-able.
 add init step for fetchMock to use mocks in testing by default clean up
 config test to use global fetch to be able to reset the store in tests we
 started to use createStore from vuex-extensions which offers a reset method
 to get back the initial state fine-tune jest to ignore lodash-es which is
 problematic in some cases introduce web-pkg which provides globally used
 functionality add and write tests for keysDeep which is similar to lodash
 keys but deep rename web-runtime Top-Bar component to match style move TopBar
 tests to web-runtime move web-runtime config to helpers folder move config
 spec from toplevel to package level bump core-js

---
 changelog/unreleased/change-introduce-web-pkg |   6 +++
 package.json                                  |   5 ++-
 packages/web-pkg/package.json                 |   9 ++++
 packages/web-pkg/src/utils/object.js          |  17 +++++++
 packages/web-pkg/tests/utils/object.spec.js   |  19 ++++++++
 packages/web-runtime/package.json             |   2 +
 packages/web-runtime/src/App.vue              |   2 +-
 .../components/{Top-Bar.vue => TopBar.vue}    |   0
 .../{configHelper.js => helpers/config.js}    |   4 --
 packages/web-runtime/src/helpers/theme.js     |  22 +++++++++
 packages/web-runtime/src/index.js             |   8 ++--
 packages/web-runtime/src/store/config.js      |   3 +-
 packages/web-runtime/src/store/index.js       |   3 +-
 .../tests/components}/TopBar.spec.js          |  12 +++--
 .../__snapshots__/TopBar.spec.js.snap         |   0
 .../web-runtime/tests/helpers/config.spec.js  |  13 +++---
 .../web-runtime/tests/helpers/theme.spec.js   |  42 ++++++++++++++++++
 .../web-runtime/tests/store/config.spec.js    |  34 ++++++++++++++
 .../themes/owncloud.json                      |   0
 .../themes/owncloud/assets/cloud.svg          |   0
 .../owncloud/assets/loginBackground.jpg       | Bin
 .../themes/owncloud/assets/logo.svg           |   0
 .../themes/owncloud/favicon.jpg               | Bin
 rollup.config.js                              |  10 +++--
 tests/unit/config/jest.config.js              |   1 +
 tests/unit/config/jest.init.js                |   5 ++-
 tests/unit/config/stubs.js                    |   4 +-
 yarn.lock                                     |  15 ++++---
 28 files changed, 194 insertions(+), 42 deletions(-)
 create mode 100644 changelog/unreleased/change-introduce-web-pkg
 create mode 100644 packages/web-pkg/package.json
 create mode 100644 packages/web-pkg/src/utils/object.js
 create mode 100644 packages/web-pkg/tests/utils/object.spec.js
 rename packages/web-runtime/src/components/{Top-Bar.vue => TopBar.vue} (100%)
 rename packages/web-runtime/src/{configHelper.js => helpers/config.js} (88%)
 create mode 100644 packages/web-runtime/src/helpers/theme.js
 rename {tests/unit/specs => packages/web-runtime/tests/components}/TopBar.spec.js (91%)
 rename {tests/unit/specs => packages/web-runtime/tests/components}/__snapshots__/TopBar.spec.js.snap (100%)
 rename tests/unit/specs/loadConfig.spec.js => packages/web-runtime/tests/helpers/config.spec.js (87%)
 create mode 100644 packages/web-runtime/tests/helpers/theme.spec.js
 create mode 100644 packages/web-runtime/tests/store/config.spec.js
 rename packages/{web-container => web-runtime}/themes/owncloud.json (100%)
 rename packages/{web-container => web-runtime}/themes/owncloud/assets/cloud.svg (100%)
 rename packages/{web-container => web-runtime}/themes/owncloud/assets/loginBackground.jpg (100%)
 rename packages/{web-container => web-runtime}/themes/owncloud/assets/logo.svg (100%)
 rename packages/{web-container => web-runtime}/themes/owncloud/favicon.jpg (100%)

diff --git a/changelog/unreleased/change-introduce-web-pkg b/changelog/unreleased/change-introduce-web-pkg
new file mode 100644
index 00000000000..db03d1fa2d4
--- /dev/null
+++ b/changelog/unreleased/change-introduce-web-pkg
@@ -0,0 +1,6 @@
+Change: Add web-pkg package
+
+We added web-pkg as a new package.
+It is supposed to be the central location for reuse of generic functionality.
+
+https://github.com/owncloud/web/pull/4907
diff --git a/package.json b/package.json
index 2e1a3daa034..8145ec253f5 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
     "packages/web-app-files",
     "packages/web-app-markdown-editor",
     "packages/web-app-media-viewer",
+    "packages/web-pkg",
     "packages/web-runtime"
   ],
   "scripts": {
@@ -45,7 +46,7 @@
     "babel-eslint": "^10.1.0",
     "babel-jest": "^26.6.3",
     "chromedriver": "^89.0.0",
-    "core-js": "3",
+    "core-js": "^3.10.0",
     "cucumber": ">=6.0.5",
     "cucumber-pretty": ">=6.0.0",
     "depcheck": "^1.3.1",
@@ -80,13 +81,13 @@
     "rollup-plugin-copy-watch": "^0.0.1",
     "rollup-plugin-delete": "^2.0.0",
     "rollup-plugin-gzip": "^2.5.0",
+    "rollup-plugin-livereload": "^2.0.0",
     "rollup-plugin-modify": "^3.0.0",
     "rollup-plugin-node-globals": "^1.4.0",
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-postcss": "^4.0.0",
     "rollup-plugin-progress": "^1.1.2",
     "rollup-plugin-serve": "^1.1.0",
-    "rollup-plugin-livereload": "^2.0.0",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-visualizer": "^4.2.0",
     "rollup-plugin-vue": "^5.1.4",
diff --git a/packages/web-pkg/package.json b/packages/web-pkg/package.json
new file mode 100644
index 00000000000..433a74e99cd
--- /dev/null
+++ b/packages/web-pkg/package.json
@@ -0,0 +1,9 @@
+{
+  "name": "web-pkg",
+  "version": "0.0.0",
+  "description": "ownCloud web pkg",
+  "license": "AGPL-3.0",
+  "devDependencies": {
+    "lodash-es": "^4.17.20"
+  }
+}
diff --git a/packages/web-pkg/src/utils/object.js b/packages/web-pkg/src/utils/object.js
new file mode 100644
index 00000000000..7c6ab1d69cf
--- /dev/null
+++ b/packages/web-pkg/src/utils/object.js
@@ -0,0 +1,17 @@
+import { isPlainObject } from 'lodash'
+
+export const keysDeep = obj => {
+  const paths = []
+
+  const walk = (o, p = '') =>
+    Object.keys(o).forEach(key => {
+      if (isPlainObject(o[key])) {
+        walk(o[key], `${p}${key}.`)
+      } else {
+        paths.push(`${p}${key}`)
+      }
+    })
+
+  walk(obj)
+  return paths
+}
diff --git a/packages/web-pkg/tests/utils/object.spec.js b/packages/web-pkg/tests/utils/object.spec.js
new file mode 100644
index 00000000000..ab442b92874
--- /dev/null
+++ b/packages/web-pkg/tests/utils/object.spec.js
@@ -0,0 +1,19 @@
+import { keysDeep } from 'web-pkg/src/utils/object'
+
+describe('keysDeep', () => {
+  it('should return the correct keys', () => {
+    expect(
+      keysDeep({
+        foo1: { bar1: { baz1: 1, baz2: 1 }, bar2: { baz1: 1, baz2: 1 }, bar3: 1 },
+        foo2: 1
+      })
+    ).toMatchObject([
+      'foo1.bar1.baz1',
+      'foo1.bar1.baz2',
+      'foo1.bar2.baz1',
+      'foo1.bar2.baz2',
+      'foo1.bar3',
+      'foo2'
+    ])
+  })
+})
diff --git a/packages/web-runtime/package.json b/packages/web-runtime/package.json
index cf253d18165..834d2d22c25 100644
--- a/packages/web-runtime/package.json
+++ b/packages/web-runtime/package.json
@@ -23,8 +23,10 @@
     "vue-scrollto": "^2.15.0",
     "vue2-touch-events": "^2.2.1",
     "vuex": "^3.1.1",
+    "vuex-extensions": "^1.1.5",
     "vuex-persist": "2.0.1",
     "vuex-router-sync": "^5.0.0",
+    "web-pkg": "*",
     "wicked-good-xpath": "^1.3.0"
   }
 }
diff --git a/packages/web-runtime/src/App.vue b/packages/web-runtime/src/App.vue
index d250a99161c..8cd3d65ad04 100644
--- a/packages/web-runtime/src/App.vue
+++ b/packages/web-runtime/src/App.vue
@@ -85,7 +85,7 @@
 <script>
 import 'inert-polyfill'
 import { mapGetters, mapState, mapActions } from 'vuex'
-import TopBar from './components/Top-Bar.vue'
+import TopBar from './components/TopBar.vue'
 import MessageBar from './components/MessageBar.vue'
 import SkipTo from './components/SkipTo.vue'
 import moment from 'moment'
diff --git a/packages/web-runtime/src/components/Top-Bar.vue b/packages/web-runtime/src/components/TopBar.vue
similarity index 100%
rename from packages/web-runtime/src/components/Top-Bar.vue
rename to packages/web-runtime/src/components/TopBar.vue
diff --git a/packages/web-runtime/src/configHelper.js b/packages/web-runtime/src/helpers/config.js
similarity index 88%
rename from packages/web-runtime/src/configHelper.js
rename to packages/web-runtime/src/helpers/config.js
index 9eed9b5595e..6618e8265a5 100644
--- a/packages/web-runtime/src/configHelper.js
+++ b/packages/web-runtime/src/helpers/config.js
@@ -10,7 +10,3 @@ export const loadConfig = async () => {
   }
   return config
 }
-
-export default {
-  loadConfig: loadConfig
-}
diff --git a/packages/web-runtime/src/helpers/theme.js b/packages/web-runtime/src/helpers/theme.js
new file mode 100644
index 00000000000..e3f4080d2d4
--- /dev/null
+++ b/packages/web-runtime/src/helpers/theme.js
@@ -0,0 +1,22 @@
+import defaultTheme from 'web-runtime/themes/owncloud.json'
+export const loadTheme = async (name = '') => {
+  const defaults = { theme: defaultTheme, name: 'themes/owncloud/theme.json' }
+
+  if (name === '' || name === defaults.name) {
+    return defaults
+  }
+
+  let response
+  try {
+    response = await fetch(name)
+  } catch (e) {
+    return defaults
+  }
+
+  if (!response.ok) {
+    return defaults
+  }
+
+  const customTheme = await response.json()
+  return { theme: customTheme, name }
+}
diff --git a/packages/web-runtime/src/index.js b/packages/web-runtime/src/index.js
index ff63f12f648..fa74c1ce9f8 100644
--- a/packages/web-runtime/src/index.js
+++ b/packages/web-runtime/src/index.js
@@ -44,7 +44,8 @@ import wgxpath from 'wicked-good-xpath'
 
 import { registerClient } from './services/clientRegistration'
 
-import { loadConfig } from './configHelper'
+import { loadConfig } from './helpers/config'
+import { loadTheme } from './helpers/theme'
 
 wgxpath.install()
 
@@ -184,10 +185,9 @@ const finalizeInit = async () => {
 }
 
 const fetchTheme = async (themeName = 'owncloud') => {
-  const response = await fetch(`themes/${themeName}.json`)
-  const theme = await response.json()
+  const { theme, name } = await loadTheme(`themes/${themeName}.json`)
 
-  await store.dispatch('loadTheme', { theme, name: themeName })
+  await store.dispatch('loadTheme', { theme, name })
 }
 
 const missingOrInvalidConfig = async () => {
diff --git a/packages/web-runtime/src/store/config.js b/packages/web-runtime/src/store/config.js
index cd6edc778e2..f6bd6288608 100644
--- a/packages/web-runtime/src/store/config.js
+++ b/packages/web-runtime/src/store/config.js
@@ -1,4 +1,5 @@
 import isEmpty from 'lodash-es/isEmpty'
+import merge from 'lodash-es/merge'
 
 const state = {
   state: null,
@@ -84,7 +85,7 @@ const mutations = {
     }
   },
   LOAD_THEME(state, theme) {
-    state.theme = { ...state.theme, ...theme }
+    state.theme = merge({}, state.theme, theme)
   }
 }
 
diff --git a/packages/web-runtime/src/store/index.js b/packages/web-runtime/src/store/index.js
index bf34a914542..830ad7daa06 100644
--- a/packages/web-runtime/src/store/index.js
+++ b/packages/web-runtime/src/store/index.js
@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 import VuexPersistence from 'vuex-persist'
+import { createStore } from 'vuex-extensions'
 
 /* STORE MODULES
  */
@@ -31,7 +32,7 @@ const vuexPersistInSession = new VuexPersistence({
 
 const strict = process.env.NODE_ENV === 'development'
 
-export const Store = new Vuex.Store({
+export const Store = createStore(Vuex.Store, {
   plugins: [vuexPersistInSession.plugin],
   modules: {
     app,
diff --git a/tests/unit/specs/TopBar.spec.js b/packages/web-runtime/tests/components/TopBar.spec.js
similarity index 91%
rename from tests/unit/specs/TopBar.spec.js
rename to packages/web-runtime/tests/components/TopBar.spec.js
index d90a04122ae..638bceff28e 100644
--- a/tests/unit/specs/TopBar.spec.js
+++ b/packages/web-runtime/tests/components/TopBar.spec.js
@@ -1,9 +1,7 @@
 import { shallowMount, createLocalVue } from '@vue/test-utils'
 import Vuex from 'vuex'
-
-import Stubs from '../config/stubs'
-
-import TopBar from 'web-runtime/src/components/Top-Bar.vue'
+import TopBar from 'web-runtime/src/components/TopBar.vue'
+import stubs from '../../../../tests/unit/config/stubs'
 
 const localVue = createLocalVue()
 const search = enabled => ({
@@ -21,7 +19,7 @@ describe('Top Bar component', () => {
         }
       }),
       localVue,
-      stubs: Stubs,
+      stubs,
       propsData: {
         userId: 'einstein',
         userDisplayName: 'Albert Einstein'
@@ -40,7 +38,7 @@ describe('Top Bar component', () => {
         }
       }),
       localVue,
-      stubs: Stubs,
+      stubs,
       propsData: {
         userId: 'einstein',
         userDisplayName: 'Albert Einstein',
@@ -60,7 +58,7 @@ describe('Top Bar component', () => {
         }
       }),
       localVue,
-      stubs: Stubs
+      stubs
     })
 
     wrapper.find('.oc-app-navigation-toggle').vm.$emit('click')
diff --git a/tests/unit/specs/__snapshots__/TopBar.spec.js.snap b/packages/web-runtime/tests/components/__snapshots__/TopBar.spec.js.snap
similarity index 100%
rename from tests/unit/specs/__snapshots__/TopBar.spec.js.snap
rename to packages/web-runtime/tests/components/__snapshots__/TopBar.spec.js.snap
diff --git a/tests/unit/specs/loadConfig.spec.js b/packages/web-runtime/tests/helpers/config.spec.js
similarity index 87%
rename from tests/unit/specs/loadConfig.spec.js
rename to packages/web-runtime/tests/helpers/config.spec.js
index 2abd7902d85..01b9c9504b7 100644
--- a/tests/unit/specs/loadConfig.spec.js
+++ b/packages/web-runtime/tests/helpers/config.spec.js
@@ -1,7 +1,4 @@
-import { loadConfig } from 'web-runtime/src/configHelper'
-import fetchMock from 'jest-fetch-mock'
-
-fetchMock.enableMocks()
+import { loadConfig } from 'web-runtime/src/helpers/config'
 
 const validConfig = `{
   "server" : "http://localhost/owncloud-core",
@@ -31,14 +28,14 @@ const validConfig = `{
 
 describe('config file loading and error reporting', () => {
   it('should load and parse a valid config', function() {
-    fetchMock.mockOnce(validConfig)
+    fetch.mockResponseOnce(validConfig)
     return loadConfig().then(async result => {
       expect(await result).toMatchObject(JSON.parse(validConfig))
     })
   })
   describe('empty config', () => {
     it('should throw an exception', function() {
-      fetchMock.mockOnce('')
+      fetch.mockResponseOnce('')
       return expect(loadConfig).rejects.toThrow(
         'config could not be parsed. ' +
           'FetchError: invalid json response body at  ' +
@@ -48,7 +45,7 @@ describe('config file loading and error reporting', () => {
   })
   describe('config with an trailing comma', () => {
     it('should throw an exception', function() {
-      fetchMock.mockOnce('"title": { "en": "Classic Design", "de": "Dateien", },')
+      fetch.mockResponseOnce('"title": { "en": "Classic Design", "de": "Dateien", },')
       return expect(loadConfig).rejects.toThrow(
         'config could not be parsed. ' +
           'FetchError: invalid json response body at  ' +
@@ -59,7 +56,7 @@ describe('config file loading and error reporting', () => {
 })
 describe('missing config', () => {
   it('should throw an exception', function() {
-    fetchMock.mockOnce(
+    fetch.mockResponseOnce(
       '<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">\n' +
         '<html><head>\n' +
         '<title>404 Not Found</title>\n' +
diff --git a/packages/web-runtime/tests/helpers/theme.spec.js b/packages/web-runtime/tests/helpers/theme.spec.js
new file mode 100644
index 00000000000..d28c04c5274
--- /dev/null
+++ b/packages/web-runtime/tests/helpers/theme.spec.js
@@ -0,0 +1,42 @@
+import { loadTheme } from 'web-runtime/src/helpers/theme'
+import { merge } from 'lodash'
+import defaultTheme from 'web-runtime/themes/owncloud.json'
+const defaultName = 'themes/owncloud/theme.json'
+
+describe('theme loading and error reporting', () => {
+  it('should load the default theme if no name is given', async () => {
+    const { theme, name } = await loadTheme()
+    expect(theme).toMatchObject(defaultTheme)
+    expect(name).toMatch(defaultName)
+  })
+
+  it('should load the default theme if default name is given', async () => {
+    const { theme, name } = await loadTheme(defaultName)
+    expect(theme).toMatchObject(defaultTheme)
+    expect(name).toMatch(defaultName)
+  })
+
+  it('should load the default theme if name is unknown', async () => {
+    fetch.mockResponseOnce(new Error(), { status: 404 })
+    const { theme, name } = await loadTheme('unknown.json')
+    expect(theme).toMatchObject(defaultTheme)
+    expect(name).toMatch(defaultName)
+  })
+
+  it('should load the default theme if server errors', async () => {
+    fetch.mockRejectOnce(new Error())
+    const { theme, name } = await loadTheme('something.json')
+    expect(theme).toMatchObject(defaultTheme)
+    expect(name).toMatch(defaultName)
+  })
+
+  it('should load the custom theme if a custom name is given', async () => {
+    const customTheme = merge({}, defaultTheme, { logo: { login: 'custom.svg' } })
+    const customName = 'themes/custom/theme.json'
+    fetch.mockResponseOnce(JSON.stringify(customTheme))
+
+    const { theme, name } = await loadTheme(customName)
+    expect(theme).toMatchObject(customTheme)
+    expect(name).toMatch(customName)
+  })
+})
diff --git a/packages/web-runtime/tests/store/config.spec.js b/packages/web-runtime/tests/store/config.spec.js
new file mode 100644
index 00000000000..f7aa041b064
--- /dev/null
+++ b/packages/web-runtime/tests/store/config.spec.js
@@ -0,0 +1,34 @@
+import { loadTheme } from 'web-runtime/src/helpers/theme'
+import store from 'web-runtime/src/store'
+import { keysDeep } from 'web-pkg/src/utils/object'
+import get from 'lodash-es/get'
+import difference from 'lodash-es/difference'
+
+describe('config theme bootstrap', () => {
+  const initialStoreTheme = { ...store.getters.configuration.theme }
+
+  beforeEach(() => {
+    store.reset()
+  })
+
+  it('should be able to loadTheme', async () => {
+    const { theme, name } = await loadTheme()
+
+    await store.dispatch('loadTheme', { theme, name })
+    keysDeep(theme).forEach(k => {
+      expect(get(store.getters.configuration.theme, k)).toBe(get(theme, k))
+    })
+  })
+
+  it('should not overwrite keys that are not part of theme', async () => {
+    const { theme, name } = await loadTheme()
+    const storeThemeKeys = keysDeep(store.getters.configuration.theme)
+    const loadedThemeKeys = keysDeep(theme)
+    const diffThemeKeys = difference(storeThemeKeys, loadedThemeKeys)
+    await store.dispatch('loadTheme', { theme, name })
+
+    diffThemeKeys.forEach(k => {
+      expect(get(store.getters.configuration.theme, k)).toBe(get(initialStoreTheme, k))
+    })
+  })
+})
diff --git a/packages/web-container/themes/owncloud.json b/packages/web-runtime/themes/owncloud.json
similarity index 100%
rename from packages/web-container/themes/owncloud.json
rename to packages/web-runtime/themes/owncloud.json
diff --git a/packages/web-container/themes/owncloud/assets/cloud.svg b/packages/web-runtime/themes/owncloud/assets/cloud.svg
similarity index 100%
rename from packages/web-container/themes/owncloud/assets/cloud.svg
rename to packages/web-runtime/themes/owncloud/assets/cloud.svg
diff --git a/packages/web-container/themes/owncloud/assets/loginBackground.jpg b/packages/web-runtime/themes/owncloud/assets/loginBackground.jpg
similarity index 100%
rename from packages/web-container/themes/owncloud/assets/loginBackground.jpg
rename to packages/web-runtime/themes/owncloud/assets/loginBackground.jpg
diff --git a/packages/web-container/themes/owncloud/assets/logo.svg b/packages/web-runtime/themes/owncloud/assets/logo.svg
similarity index 100%
rename from packages/web-container/themes/owncloud/assets/logo.svg
rename to packages/web-runtime/themes/owncloud/assets/logo.svg
diff --git a/packages/web-container/themes/owncloud/favicon.jpg b/packages/web-runtime/themes/owncloud/favicon.jpg
similarity index 100%
rename from packages/web-container/themes/owncloud/favicon.jpg
rename to packages/web-runtime/themes/owncloud/favicon.jpg
diff --git a/rollup.config.js b/rollup.config.js
index 0ff86e7cde2..e745e5c5940 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -63,10 +63,10 @@ const plugins = [
     watch: !production && './config',
     targets: [
       { src: './packages/web-container/img', dest: 'dist' },
-      { src: './packages/web-container/themes', dest: 'dist' },
       { src: './packages/web-container/oidc-callback.html', dest: 'dist' },
       { src: './packages/web-container/oidc-silent-redirect.html', dest: 'dist' },
       { src: './packages/web-container/manifest.json', dest: 'dist' },
+      { src: './packages/web-runtime/themes', dest: 'dist' },
       { src: `./config/${production ? 'config.dist.json' : 'config.json'}`, dest: 'dist' },
       { src: 'node_modules/requirejs/require.js', dest: 'dist/js' }
     ]
@@ -154,9 +154,11 @@ if (process.env.SERVER === 'true') {
       port: process.env.PORT || 9100
     })
   )
-  plugins.push(livereload({
-    watch: 'dist',
-  }))
+  plugins.push(
+    livereload({
+      watch: 'dist'
+    })
+  )
 }
 
 if (process.env.REPORT === 'true') {
diff --git a/tests/unit/config/jest.config.js b/tests/unit/config/jest.config.js
index 3cd76798634..1667dc8f439 100644
--- a/tests/unit/config/jest.config.js
+++ b/tests/unit/config/jest.config.js
@@ -10,6 +10,7 @@ module.exports = {
     '.*\\.(vue)$': 'vue-jest',
     '^.+\\.svg$': 'jest-svg-transformer'
   },
+  transformIgnorePatterns: ['<rootDir>/node_modules/(?!lodash-es)'],
   setupFiles: ['<rootDir>/tests/unit/config/jest.init.js'],
   snapshotSerializers: ['jest-serializer-vue'],
   coverageDirectory: '<rootDir>/coverage',
diff --git a/tests/unit/config/jest.init.js b/tests/unit/config/jest.init.js
index 61c8e543f31..e403776652b 100644
--- a/tests/unit/config/jest.init.js
+++ b/tests/unit/config/jest.init.js
@@ -1,7 +1,8 @@
 import { config } from '@vue/test-utils'
+import fetchMock from 'jest-fetch-mock'
 
-const $gettext = str => str
+fetchMock.enableMocks()
 
 config.mocks = {
-  $gettext
+  $gettext: str => str
 }
diff --git a/tests/unit/config/stubs.js b/tests/unit/config/stubs.js
index 1dc42e6b58c..09dafcec24a 100644
--- a/tests/unit/config/stubs.js
+++ b/tests/unit/config/stubs.js
@@ -1,4 +1,4 @@
-export const stubs = {
+export default {
   'oc-spinner': true,
   'oc-grid': true,
   'oc-icon': true,
@@ -6,5 +6,3 @@ export const stubs = {
   'oc-button': true,
   'oc-breadcrumb': true
 }
-
-export default stubs
diff --git a/yarn.lock b/yarn.lock
index 23c1c57b26c..c30c919caf5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2971,16 +2971,16 @@ core-js-pure@^3.0.0:
   resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.8.3.tgz#10e9e3b2592ecaede4283e8f3ad7020811587c02"
   integrity sha512-V5qQZVAr9K0xu7jXg1M7qTEwuxUgqr7dUOezGaNa7i+Xn9oXAU/d1fzqD9ObuwpVQOaorO5s70ckyi1woP9lVA==
 
-core-js@3:
-  version "3.8.3"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.8.3.tgz#c21906e1f14f3689f93abcc6e26883550dd92dd0"
-  integrity sha512-KPYXeVZYemC2TkNEkX/01I+7yd+nX3KddKwZ1Ww7SKWdI2wQprSgLmrTddT8nw92AjEklTsPBoSdQBhbI1bQ6Q==
-
 core-js@^2.4.0, core-js@^2.5.3, core-js@^2.6.4, core-js@^2.6.5:
   version "2.6.12"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.12.tgz#d9333dfa7b065e347cc5682219d6f690859cc2ec"
   integrity sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==
 
+core-js@^3.10.0:
+  version "3.10.0"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.10.0.tgz#9a020547c8b6879f929306949e31496bbe2ae9b3"
+  integrity sha512-MQx/7TLgmmDVamSyfE+O+5BHvG1aUGj/gHhLn1wVtm2B5u1eVIPvh7vkfjwWKNCjrTJB8+He99IntSQ1qP+vYQ==
+
 core-util-is@1.0.2, core-util-is@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
@@ -10963,6 +10963,11 @@ vue@^2.6.10, vue@^2.6.11:
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.12.tgz#f5ebd4fa6bd2869403e29a896aed4904456c9123"
   integrity sha512-uhmLFETqPPNyuLLbsKz6ioJ4q7AZHzD8ZVFNATNyICSZouqP2Sz0rotWQC8UNBF6VGSCs5abnKJoStA6JbCbfg==
 
+vuex-extensions@^1.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/vuex-extensions/-/vuex-extensions-1.1.5.tgz#d1664aabdc720057c945993324de9bc34d871487"
+  integrity sha512-1Jfi8o6coel3jj20k6SaEtinddzS0jEG41lyyWmodAorXoN85AzuYa4oou71e99B6V+Y+gSVUysa3yHVhWpTrQ==
+
 vuex-persist@2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/vuex-persist/-/vuex-persist-2.0.1.tgz#411ef2becc04db3f222779f7c5d2e6615cbdd4ca"