Merge pull request #1186 from gradido/frontend-refactor-and-tests

feat: Frontend Refactor and Tests

.github/workflows/test.yml

@@ -399,7 +399,7 @@ jobs:
           report_name: Coverage Frontend
           type: lcov
           result_path: ./coverage/lcov.info
-          min_coverage: 90
+          min_coverage: 94
           token: ${{ github.token }}
   
   ##############################################################################

frontend/src/plugins/globalDirectives.js

@@ -1,4 +1,3 @@
-// import clickOutside from '@/directives/click-ouside.js'
 import { focus } from 'vue-focus'
 
 /**
@@ -7,7 +6,6 @@ import { focus } from 'vue-focus'
 
 const GlobalDirectives = {
   install(Vue) {
-    // Vue.directive('click-outside', clickOutside)
     Vue.directive('focus', focus)
   },
 }

frontend/src/plugins/globalDirectives.test.js

@@ -0,0 +1,21 @@
+import GlobalDirectives from './globalDirectives'
+import { focus } from 'vue-focus'
+import Vue from 'vue'
+
+jest.mock('vue-focus', () => {
+  return {
+    __esModule: true,
+    focus: jest.fn(),
+  }
+})
+jest.mock('vue')
+
+const vueDirectiveMock = jest.fn()
+Vue.directive = vueDirectiveMock
+
+describe('globalDirectives', () => {
+  it('installs the focus directive', () => {
+    GlobalDirectives.install(Vue)
+    expect(vueDirectiveMock).toBeCalledWith('focus', focus)
+  })
+})

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

@@ -52,6 +52,7 @@ describe('DashboardLayoutGdd', () => {
         publisherId: 123,
         firstName: 'User',
         lastName: 'Example',
+        token: 'valid-token',
       },
       dispatch: storeDispatchMock,
       commit: storeCommitMock,
@@ -222,6 +223,65 @@ describe('DashboardLayoutGdd', () => {
           expect(toasterMock).toBeCalledWith('Ouch!')
         })
       })
+
+      describe('set visible method', () => {
+        beforeEach(() => {
+          wrapper.findComponent({ name: 'Navbar' }).vm.$emit('set-visible', true)
+        })
+
+        it('sets visible to true', () => {
+          expect(wrapper.vm.visible).toBe(true)
+        })
+      })
+
+      describe('elopage URI', () => {
+        describe('user has no publisher ID and no elopage', () => {
+          beforeEach(() => {
+            mocks.$store.state.publisherId = null
+            mocks.$store.state.hasElopage = false
+            wrapper = Wrapper()
+          })
+
+          it('links to basic-de', () => {
+            expect(wrapper.vm.elopageUri).toBe(
+              'https://elopage.com/s/gradido/basic-de/payment?locale=en&prid=111&pid=2896&firstName=User&lastName=Example&email=user@example.org',
+            )
+          })
+        })
+
+        describe('user has elopage', () => {
+          beforeEach(() => {
+            mocks.$store.state.publisherId = '123'
+            mocks.$store.state.hasElopage = true
+            wrapper = Wrapper()
+          })
+
+          it('links to sign in for elopage', () => {
+            expect(wrapper.vm.elopageUri).toBe('https://elopage.com/s/gradido/sign_in?locale=en')
+          })
+        })
+      })
+
+      describe('admin method', () => {
+        const windowLocationMock = jest.fn()
+        beforeEach(() => {
+          delete window.location
+          window.location = {
+            assign: windowLocationMock,
+          }
+          wrapper.findComponent({ name: 'Navbar' }).vm.$emit('admin')
+        })
+
+        it('dispatches logout to store', () => {
+          expect(storeDispatchMock).toBeCalled()
+        })
+
+        it('changes window location to admin interface', () => {
+          expect(windowLocationMock).toBeCalledWith(
+            'http://localhost/admin/authenticate?token=valid-token',
+          )
+        })
+      })
     })
   })
 })

frontend/src/views/Pages/SendOverview.vue

@@ -70,11 +70,6 @@ export default {
       default: true,
     },
   },
-  computed: {
-    showContext() {
-      return this.currentTransactionStep === 0
-    },
-  },
   methods: {
     setTransaction(data) {
       this.transactionData = { ...data }