test: TopLevelHeader component unit test suite

jest.config.unit.js

@@ -19,5 +19,5 @@ module.exports = {
     'jest-watch-typeahead/filename',
     'jest-watch-typeahead/testname'
   ],
-  testEnvironment: 'jest-environment-jsdom-fourteen'
+  setupFiles: ['./jest.unit.setup.js']
 }

jest.e2e.setup.js

@@ -1 +1,6 @@
+/**
+ * Global Setup for e2e testing
+ * here you can do whatever global thing you want
+ * eg: mock a global module
+ */
 jest.setTimeout(30000)

jest.unit.setup.js

@@ -0,0 +1,10 @@
+/**
+ * Global Setup for e2e testing
+ * here you can do whatever global thing you want
+ * eg: mock a global module
+ */
+jest.mock('@/plugins/axios', () => {
+  const axios = require('axios')
+  return axios
+})
+jest.mock('axios')

package.json

@@ -13,6 +13,7 @@
     "axios": "^0.19.0",
     "buefy": "^0.8.2",
     "core-js": "^2.6.5",
+    "jest-environment-node": "^24.9.0",
     "postcss-import": "^12.0.1",
     "vee-validate": "^2.2.15",
     "vue": "^2.6.10",

src/components/Navbar/TopLevelHeader.vue

@@ -277,6 +277,9 @@ export default {
           variables: this.signup.user
         },
         done: res => {
+          this.$store.commit('customer/SET_TOKEN', res.accessToken)
+          this.$store.commit('customer/SET_CUSTOMER', res.customer)
+          this.$store.commit('customer/SET_TOKEN_EXPIRE', res.expires_in)
           this.signup.active = false
         },
         doneNtf: {

tests/unit/components/topLevelHeader.spec.js

@@ -0,0 +1,74 @@
+import { shallowMount } from '@vue/test-utils'
+import TopLevelHeader from '@/components/Navbar/TopLevelHeader.vue'
+import store from '@/store/index'
+import { localVue } from '../index'
+import axiosInstance from '@/plugins/axios'
+window.FB = {
+  logout: jest.fn(() => true)
+}
+describe('Authentication', () => {
+  let vm
+  beforeAll(() => {
+    const wrapper = shallowMount(TopLevelHeader, {
+      store,
+      localVue,
+      stubs: ['custom-button', 'router-view', 'v-facebook-login']
+    })
+    vm = wrapper.vm
+  })
+
+  describe('Sign up', () => {
+    it('should create a new use when invoke createUser', async () => {
+      let customer = {
+        customer_id: 1,
+        name: 'John doe'
+      }
+      axiosInstance.mockImplementation(({ url, method }) => {
+        if (url === '/customers' && method === 'post') {
+          return Promise.resolve({
+            status: 200,
+            data: {
+              customer,
+              token: 'token',
+              expires_in: '2019/9/1'
+            }
+          })
+        }
+      })
+      await vm.createUser()
+      expect(vm.customer).toEqual(customer)
+    })
+  })
+
+  describe('Login', () => {
+    test('user is not logged in by default', () => {
+      expect(vm.loggedin).toBe(false)
+    })
+
+    test('user could log in', async () => {
+      const customer = {
+        customer_id: 1,
+        name: 'John Dor'
+      }
+      axiosInstance.mockImplementation(({ url, method }) => {
+        if (url === '/customers/login' && method === 'post') {
+          return Promise.resolve({
+            status: 200,
+            data: {
+              customer,
+              token: 'token',
+              expires_in: '2019/9/1'
+            }
+          })
+        }
+      })
+      await vm.loginUser()
+      expect(vm.customer).toEqual(customer)
+    })
+  })
+
+  test.only('logout', () => {
+    vm.logout()
+    expect(vm.customer).toEqual({})
+  })
+})

tests/unit/index.js

@@ -0,0 +1,18 @@
+import { createLocalVue } from '@vue/test-utils'
+import NodeEnvironment from 'jest-environment-node'
+import Vuex from 'vuex'
+import buefy from 'buefy'
+import globals from '@/mixins/globals'
+import VeeValidate from 'vee-validate'
+
+export const localVue = createLocalVue()
+localVue.use(Vuex)
+localVue.use(buefy)
+localVue.mixin(globals)
+localVue.use(VeeValidate)
+
+localVue.prototype.$buefy = {
+  notification: {
+    open: () => true
+  }
+}

tests/unit/mixins/asyncHelper.spec.js

@@ -1,25 +1,13 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils'
+import { shallowMount } from '@vue/test-utils'
 import App from '@/layouts/Main.vue'
-import buefy from 'buefy'
-jest.mock('@/plugins/axios', () => {
-  const axios = require('axios')
-  return axios
-})
-jest.mock('axios')
-
-const localVue = createLocalVue()
-localVue.use(buefy)
-
-import globals from '../../../src/mixins/globals'
-
+import { localVue } from '../index'
 import axiosInstance from '@/plugins/axios'
 
 describe('AsyncHelpers', () => {
   let wrapper
   beforeAll(() => {
     wrapper = shallowMount(App, {
       localVue,
-      mixins: [globals],
       stubs: ['router-view', 'b-notification']
     })
   })

tests/unit/views/home.spec.js

@@ -1,33 +1,14 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils'
-import Vuex from 'vuex'
+import { shallowMount } from '@vue/test-utils'
 import Home from '@/views/Home.vue'
-import buefy from 'buefy'
-import productStore from '@/store/modules/product'
-import globals from '../../../src/mixins/globals'
-jest.mock('@/plugins/axios', () => {
-  const axios = require('axios')
-  return axios
-})
-jest.mock('axios')
 import axiosInstance from '@/plugins/axios'
-
-const localVue = createLocalVue()
-localVue.use(Vuex)
-localVue.use(buefy)
-
-const store = new Vuex.Store({
-  modules: {
-    product: productStore
-  }
-})
-
+import store from '@/store/index'
+import { localVue } from '../index'
 describe('Home Page', () => {
   let vm
   beforeAll(() => {
     const wrapper = shallowMount(Home, {
       store,
       localVue,
-      mixins: [globals],
       stubs: ['custom-button']
     })
     vm = wrapper.vm