logout in graphql, test for logout

frontend/src/graphql/queries.js

@@ -15,3 +15,8 @@ export const login = gql`
     }
   }
 `
+export const logout = gql`
+  query($sessionId: Float!) {
+    logout(sessionId: $sessionId)
+  }
+`

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

@@ -1,5 +1,4 @@
 import { mount, RouterLinkStub } from '@vue/test-utils'
-import Vuex from 'vuex'
 import flushPromises from 'flush-promises'
 import DashboardLayoutGdd from './DashboardLayout_gdd'
 
@@ -13,6 +12,15 @@ const transitionStub = () => ({
   },
 })
 
+const storeDispatchMock = jest.fn()
+const storeCommitMock = jest.fn()
+const routerPushMock = jest.fn()
+const logoutQueryMock = jest.fn().mockResolvedValue({
+  data: {
+    logout: 'success',
+  },
+})
+
 describe('DashboardLayoutGdd', () => {
   let wrapper
 
@@ -28,17 +36,19 @@ describe('DashboardLayoutGdd', () => {
       },
     },
     $router: {
-      push: jest.fn(),
+      push: routerPushMock,
     },
-  }
-
-  const state = {
-    user: {
-      name: 'Peter Lustig',
-      balance: 2546,
-      balance_gdt: 20,
+    $apollo: {
+      query: logoutQueryMock,
+    },
+    $store: {
+      state: {
+        sessionId: 1,
+        email: 'user@example.org',
+      },
+      dispatch: storeDispatchMock,
+      commit: storeCommitMock,
     },
-    email: 'peter.lustig@example.org',
   }
 
   const stubs = {
@@ -47,15 +57,8 @@ describe('DashboardLayoutGdd', () => {
     RouterView: transitionStub(),
   }
 
-  const store = new Vuex.Store({
-    state,
-    mutations: {
-      language: jest.fn(),
-    },
-  })
-
   const Wrapper = () => {
-    return mount(DashboardLayoutGdd, { localVue, mocks, store, stubs })
+    return mount(DashboardLayoutGdd, { localVue, mocks, stubs })
   }
 
   describe('mount', () => {
@@ -82,7 +85,7 @@ describe('DashboardLayoutGdd', () => {
         navbar = wrapper.findAll('ul.navbar-nav').at(0)
       })
 
-      it('has five items in the navbar', () => {
+      it('has three items in the navbar', () => {
         expect(navbar.findAll('ul > a')).toHaveLength(3)
       })
 
@@ -99,54 +102,55 @@ describe('DashboardLayoutGdd', () => {
         expect(navbar.findAll('ul > a').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 > a').at(1).trigger('click')
-        await flushPromises()
-        await jest.runAllTimers()
-        await flushPromises()
-        expect(wrapper.findComponent(RouterLinkStub).props().to).toBe('/transactions')
+      it('has second item "transactions" linked to transactions in navbar', async () => {
+        expect(wrapper.findAll('a').at(3).attributes('href')).toBe('/transactions')
       })
 
-      it('has tree items in the navbar', () => {
+      it('has three items in the navbar', () => {
         expect(navbar.findAll('ul > a')).toHaveLength(3)
       })
 
-      it('has third item "My profile" in navbar', () => {
-        expect(navbar.findAll('ul > a').at(2).text()).toEqual('site.navbar.my-profil')
+      it('has third item "My profile" linked to profile in navbar', async () => {
+        expect(wrapper.findAll('a').at(5).attributes('href')).toBe('/profile')
       })
 
-      it.skip('has third item "My profile" linked to profile in navbar', async () => {
-        navbar.findAll('ul > a').at(2).trigger('click')
-        await flushPromises()
-        await jest.runAllTimers()
-        await flushPromises()
-        expect(wrapper.findComponent(RouterLinkStub).props().to).toBe('/profile')
+      it('has a link to the members area', () => {
+        expect(wrapper.findAll('ul').at(2).text()).toBe('members_area')
+        expect(wrapper.findAll('ul').at(2).find('a').attributes('href')).toBe(
+          'https://elopage.com/s/gradido/sign_in?locale=en',
+        )
       })
 
-      // 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 a locale switch', () => {
+        expect(wrapper.find('div.language-switch').exists()).toBeTruthy()
+      })
 
-      // 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')
-      // })
+      it('has a logout button', () => {
+        expect(wrapper.findAll('ul').at(3).text()).toBe('logout')
+      })
+
+      describe('logout', () => {
+        beforeEach(async () => {
+          await wrapper.findComponent({ name: 'sidebar' }).vm.$emit('logout')
+          await flushPromises()
+        })
+
+        it('calls the API', async () => {
+          expect(logoutQueryMock).toBeCalledWith(
+            expect.objectContaining({
+              variables: { sessionId: 1 },
+            }),
+          )
+        })
+
+        it('dispatches logout to store', () => {
+          expect(storeDispatchMock).toBeCalledWith('logout')
+        })
+
+        it('redirects to login page', () => {
+          expect(routerPushMock).toBeCalledWith('/login')
+        })
+      })
     })
   })
 })

frontend/src/views/Layout/DashboardLayout_gdd.vue

@@ -66,32 +66,13 @@
   </div>
 </template>
 <script>
-import PerfectScrollbar from 'perfect-scrollbar'
-import 'perfect-scrollbar/css/perfect-scrollbar.css'
-import loginAPI from '../../apis/loginAPI'
+import { logout } from '../../graphql/queries'
 
 import ContentFooter from './ContentFooter.vue'
-// import DashboardContent from './Content.vue';
 import { FadeTransition } from 'vue2-transitions'
 import communityAPI from '../../apis/communityAPI'
 import VueQrcode from 'vue-qrcode'
 
-function hasElement(className) {
-  return document.getElementsByClassName(className).length > 0
-}
-
-function initScrollbar(className) {
-  if (hasElement(className)) {
-    // eslint-disable-next-line no-new
-    new PerfectScrollbar(`.${className}`)
-  } else {
-    // try to init it later in case this component is loaded async
-    setTimeout(() => {
-      initScrollbar(className)
-    }, 100)
-  }
-}
-
 export default {
   components: {
     ContentFooter,
@@ -109,18 +90,18 @@ export default {
     }
   },
   methods: {
-    initScrollbar() {
-      const isWindows = navigator.platform.startsWith('Win')
-      if (isWindows) {
-        initScrollbar('sidenav')
-      }
-    },
     async logout() {
-      await loginAPI.logout(this.$store.state.sessionId)
-      // do we have to check success?
-      this.$sidebar.displaySidebar(false)
-      this.$store.dispatch('logout')
-      this.$router.push('/login')
+      this.$apollo
+        .query({
+          query: logout,
+          variables: { sessionId: this.$store.state.sessionId },
+        })
+        .then(() => {
+          this.$sidebar.displaySidebar(false)
+          this.$store.dispatch('logout')
+          this.$router.push('/login')
+        })
+      // do we have to handle errors?
     },
     async updateTransactions(pagination) {
       this.pending = true
@@ -145,14 +126,5 @@ export default {
       this.balance -= ammount
     },
   },
-  mounted() {
-    this.initScrollbar()
-  },
 }
 </script>
-<style lang="scss">
-.xxx {
-  position: relative;
-  right: 0px;
-}
-</style>