update jest, install transform-require-context

frontend/babel.config.js

@@ -1,6 +1,7 @@
 module.exports = {
   presets: ['@babel/preset-env'],
   plugins: [
+    'transform-require-context',
     [
       'component',
       {

frontend/jest.config.js

@@ -22,4 +22,5 @@ module.exports = {
   testMatch: ['**/?(*.)+(spec|test).js?(x)'],
   // snapshotSerializers: ['jest-serializer-vue'],
   transformIgnorePatterns: ['<rootDir>/node_modules/(?!vee-validate/dist/rules)'],
+  testEnvironment: 'jest-environment-jsdom-sixteen',
 }

frontend/package.json

@@ -22,8 +22,9 @@
     "apollo-boost": "^0.4.9",
     "axios": "^0.21.1",
     "babel-core": "^7.0.0-bridge.0",
-    "babel-jest": "^26.6.3",
+    "babel-jest": "^27.3.1",
     "babel-plugin-require-context-hook": "^1.0.0",
+    "babel-plugin-transform-require-context": "^0.1.1",
     "babel-preset-vue": "^2.0.2",
     "bootstrap": "4.3.1",
     "bootstrap-vue": "^2.5.0",
@@ -51,6 +52,7 @@
     "identity-obj-proxy": "^3.0.0",
     "jest": "^26.6.3",
     "jest-canvas-mock": "^2.3.1",
+    "jest-environment-jsdom-sixteen": "^2.0.0",
     "nouislider": "^12.1.0",
     "particles-bg-vue": "1.2.3",
     "perfect-scrollbar": "^1.3.0",

frontend/src/main.js

@@ -3,9 +3,6 @@ import DashboardPlugin from './plugins/dashboard-plugin'
 import App from './App.vue'
 import i18n from './i18n.js'
 import { loadAllRules } from './validation-rules'
-import { ApolloClient, ApolloLink, InMemoryCache, HttpLink } from 'apollo-boost'
-import VueApollo from 'vue-apollo'
-import CONFIG from './config'
 
 import addNavigationGuards from './routes/guards'
 
@@ -13,37 +10,7 @@ import { store } from './store/store'
 
 import router from './routes/router'
 
-const httpLink = new HttpLink({ uri: CONFIG.GRAPHQL_URI })
-
-const authLink = new ApolloLink((operation, forward) => {
-  const token = store.state.token
-  operation.setContext({
-    headers: {
-      Authorization: token && token.length > 0 ? `Bearer ${token}` : '',
-    },
-  })
-  return forward(operation).map((response) => {
-    if (response.errors && response.errors[0].message === '403.13 - Client certificate revoked') {
-      response.errors[0].message = i18n.t('error.session-expired')
-      store.dispatch('logout', null)
-      if (router.currentRoute.path !== '/login') router.push('/login')
-      return response
-    }
-    const newToken = operation.getContext().response.headers.get('token')
-    if (newToken) store.commit('token', newToken)
-    return response
-  })
-})
-
-const apolloClient = new ApolloClient({
-  link: authLink.concat(httpLink),
-  cache: new InMemoryCache(),
-  uri: CONFIG.GRAPHQL_URI,
-})
-
-const apolloProvider = new VueApollo({
-  defaultClient: apolloClient,
-})
+import { apolloProvider } from './plugins/apolloProvider'
 
 // plugin setup
 Vue.use(DashboardPlugin)

frontend/src/plugins/apolloProvider.js

@@ -0,0 +1,37 @@
+import { ApolloClient, ApolloLink, InMemoryCache, HttpLink } from 'apollo-boost'
+import VueApollo from 'vue-apollo'
+import CONFIG from '../config'
+import { store } from '../store/store'
+import router from '../routes/router'
+import i18n from '../i18n'
+
+const httpLink = new HttpLink({ uri: CONFIG.GRAPHQL_URI })
+
+const authLink = new ApolloLink((operation, forward) => {
+  const token = store.state.token
+  operation.setContext({
+    headers: {
+      Authorization: token && token.length > 0 ? `Bearer ${token}` : '',
+    },
+  })
+  return forward(operation).map((response) => {
+    if (response.errors && response.errors[0].message === '403.13 - Client certificate revoked') {
+      response.errors[0].message = i18n.t('error.session-expired')
+      store.dispatch('logout', null)
+      if (router.currentRoute.path !== '/login') router.push('/login')
+      return response
+    }
+    const newToken = operation.getContext().response.headers.get('token')
+    if (newToken) store.commit('token', newToken)
+    return response
+  })
+})
+
+const apolloClient = new ApolloClient({
+  link: authLink.concat(httpLink),
+  cache: new InMemoryCache(),
+})
+
+export const apolloProvider = new VueApollo({
+  defaultClient: apolloClient,
+})

frontend/src/plugins/apolloProvider.test.js

@@ -0,0 +1,116 @@
+import { ApolloClient, ApolloLink, InMemoryCache, HttpLink } from 'apollo-boost'
+import './apolloProvider'
+import CONFIG from '../config'
+
+import VueApollo from 'vue-apollo'
+import { store } from '../store/store.js'
+import router from '../routes/router'
+import i18n from '../i18n'
+
+jest.mock('vue-apollo')
+jest.mock('../store/store')
+jest.mock('../routes/router')
+jest.mock('../i18n')
+
+jest.mock('apollo-boost', () => {
+  return {
+    __esModule: true,
+    ApolloClient: jest.fn(),
+    ApolloLink: jest.fn(() => {
+      return { concat: jest.fn() }
+    }),
+    InMemoryCache: jest.fn(),
+    HttpLink: jest.fn(),
+  }
+})
+
+describe('apolloProvider', () => {
+  it('calls the HttpLink', () => {
+    expect(HttpLink).toBeCalledWith({ uri: CONFIG.GRAPHQL_URI })
+  })
+
+  it('calls the ApolloLink', () => {
+    expect(ApolloLink).toBeCalled()
+  })
+
+  it('calls the ApolloClient', () => {
+    expect(ApolloClient).toBeCalled()
+  })
+
+  it('calls the VueApollo', () => {
+    expect(VueApollo).toBeCalled()
+  })
+
+  describe('ApolloLink', () => {
+    // mock store
+    const storeDispatchMock = jest.fn()
+    store.state = {
+      token: 'some-token',
+    }
+    store.dispatch = storeDispatchMock
+
+    // mock i18n.t
+    i18n.t = jest.fn((t) => t)
+
+    // mock apllo response
+    const responseMock = {
+      errors: [{ message: '403.13 - Client certificate revoked' }],
+    }
+
+    // mock router
+    const routerPushMock = jest.fn()
+    router.push = routerPushMock
+    router.currentRoute = {
+      path: '/overview',
+    }
+
+    // mock context
+    const setContextMock = jest.fn()
+    const getContextMock = jest.fn(() => {
+      return {
+        response: {
+          headers: {
+            get: jest.fn(),
+          },
+        },
+      }
+    })
+
+    // mock apollo link function params
+    const operationMock = {
+      setContext: setContextMock,
+      getContext: getContextMock,
+    }
+
+    const forwardMock = jest.fn(() => {
+      return [responseMock]
+    })
+
+    // get apollo link callback
+    const middleware = ApolloLink.mock.calls[0][0]
+
+    beforeEach(() => {
+      jest.clearAllMocks()
+      // run the callback with mocked params
+      middleware(operationMock, forwardMock)
+    })
+
+    it('sets authorization header', () => {
+      expect(setContextMock).toBeCalledWith({
+        headers: {
+          Authorization: 'Bearer some-token',
+        },
+      })
+    })
+
+    describe('apollo response is 403.13', () => {
+      it.skip('dispatches logout', () => {
+        expect(storeDispatchMock).toBeCalledWith('logout', null)
+      })
+
+      it.skip('redirects to logout', () => {
+        expect(routerPushMock).toBeCalledWith('/logout')
+      })
+    })
+  })
+})