Merge pull request #154 from gradido/test-dashboard-layout

feat: Test Dashboard Layout

frontend/src/views/Layout/DashboardLayout_gdd.spec.js

@@ -0,0 +1,144 @@
+import { mount, RouterLinkStub } from '@vue/test-utils'
+import VueRouter from 'vue-router'
+import Vuex from 'vuex'
+import flushPromises from 'flush-promises'
+import routes from '../../routes/routes'
+import DashboardLayoutGdd from './DashboardLayout_gdd'
+
+jest.useFakeTimers()
+
+const localVue = global.localVue
+
+const router = new VueRouter({ routes })
+
+const transitionStub = () => ({
+  render(h) {
+    return this.$options._renderChildren
+  },
+})
+
+describe('DashboardLayoutGdd', () => {
+  let wrapper
+
+  let mocks = {
+    $i18n: {
+      locale: 'en',
+    },
+    $t: jest.fn((t) => t),
+    $n: jest.fn(),
+  }
+
+  let state = {
+    user: {
+      name: 'Peter Lustig',
+      balance: 2546,
+      balance_gdt: 20,
+    },
+    email: 'peter.lustig@example.org',
+  }
+
+  let stubs = {
+    RouterLink: RouterLinkStub,
+    FadeTransition: transitionStub(),
+  }
+
+  let store = new Vuex.Store({
+    state,
+  })
+
+  const Wrapper = () => {
+    return mount(DashboardLayoutGdd, { localVue, mocks, router, store, stubs })
+  }
+
+  describe('mount', () => {
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    it('has a sidebar', () => {
+      expect(wrapper.find('nav#sidenav-main').exists()).toBeTruthy()
+    })
+
+    it('has a notifications component', () => {
+      expect(wrapper.find('div.notifications').exists()).toBeTruthy()
+    })
+
+    it('has a main content div', () => {
+      expect(wrapper.find('div.main-content').exists()).toBeTruthy()
+    })
+
+    it('has a footer inside the main content', () => {
+      expect(wrapper.find('div.main-content').find('footer.footer').exists()).toBeTruthy()
+    })
+
+    describe('navigation bar', () => {
+      let navbar
+
+      beforeEach(() => {
+        navbar = wrapper.findAll('ul.navbar-nav').at(0)
+      })
+
+      it('has five items in the navbar', () => {
+        expect(navbar.findAll('ul > li')).toHaveLength(5)
+      })
+
+      it('has first item "send" in navbar', () => {
+        expect(navbar.findAll('ul > li').at(0).text()).toEqual('sent')
+      })
+
+      it('has first item "send" linked to overview in navbar', () => {
+        navbar.findAll('ul > li').at(0).trigger('click')
+        expect(wrapper.findComponent(RouterLinkStub).props().to).toBe('/overview')
+      })
+
+      it('has second item "transactions" in navbar', () => {
+        expect(navbar.findAll('ul > li').at(1).text()).toEqual('transactions')
+      })
+
+      // to do: get this working!
+      it.skip('has second item "transactions" linked to transactions in navbar', async () => {
+        navbar.findAll('ul > li > a').at(1).trigger('click')
+        await flushPromises()
+        await jest.runAllTimers()
+        await flushPromises()
+        expect(wrapper.findComponent(RouterLinkStub).props().to).toBe('/transactions')
+      })
+
+      it('has third item "My profile" in navbar', () => {
+        expect(navbar.findAll('ul > li').at(2).text()).toEqual('site.navbar.my-profil')
+      })
+
+      it.skip('has third item "My profile" linked to profile in navbar', async () => {
+        navbar.findAll('ul > li > a').at(2).trigger('click')
+        await flushPromises()
+        await jest.runAllTimers()
+        await flushPromises()
+        expect(wrapper.findComponent(RouterLinkStub).props().to).toBe('/profile')
+      })
+
+      it('has fourth item "Settigs" in navbar', () => {
+        expect(navbar.findAll('ul > li').at(3).text()).toEqual('site.navbar.settings')
+      })
+
+      it.skip('has fourth item "Settings" linked to profileedit in navbar', async () => {
+        navbar.findAll('ul > li > a').at(3).trigger('click')
+        await flushPromises()
+        await jest.runAllTimers()
+        await flushPromises()
+        expect(wrapper.findComponent(RouterLinkStub).props().to).toBe('/profileedit')
+      })
+
+      it('has fifth item "Activity" in navbar', () => {
+        expect(navbar.findAll('ul > li').at(4).text()).toEqual('site.navbar.activity')
+      })
+
+      it.skip('has fourth item "Activity" linked to activity in navbar', async () => {
+        navbar.findAll('ul > li > a').at(4).trigger('click')
+        await flushPromises()
+        await jest.runAllTimers()
+        await flushPromises()
+        expect(wrapper.findComponent(RouterLinkStub).props().to).toBe('/activity')
+      })
+    })
+  })
+})

frontend/test/testSetup.js

@@ -9,6 +9,13 @@ import { messages } from 'vee-validate/dist/locale/en.json'
 import BaseInput from '@/components/Inputs/BaseInput.vue'
 import BaseButton from '@/components/BaseButton.vue'
 import RegeneratorRuntime from 'regenerator-runtime'
+import Notifications from '@/components/NotificationPlugin'
+import SideBar from '@/components/SidebarPlugin'
+import VueRouter from 'vue-router'
+import BaseDropdown from '@/components/BaseDropdown.vue'
+import VueQrcode from 'vue-qrcode'
+
+import clickOutside from '@/directives/click-ouside.js'
 
 global.localVue = createLocalVue()
 
@@ -24,7 +31,14 @@ global.localVue.use(BootstrapVue)
 global.localVue.use(Vuex)
 global.localVue.use(IconsPlugin)
 global.localVue.use(RegeneratorRuntime)
+global.localVue.use(Notifications)
+global.localVue.use(SideBar)
+global.localVue.use(VueRouter)
+global.localVue.use(VueQrcode)
 global.localVue.component(BaseInput.name, BaseInput)
 global.localVue.component('validation-provider', ValidationProvider)
 global.localVue.component('validation-observer', ValidationObserver)
 global.localVue.component(BaseButton.name, BaseButton)
+global.localVue.component(BaseDropdown.name, BaseDropdown)
+
+global.localVue.directive('click-outside', clickOutside)