From ac91c59a596928d8b8267a977086156a54dfaa67 Mon Sep 17 00:00:00 2001 From: Moriz Wahl Date: Fri, 6 Aug 2021 16:52:45 +0200 Subject: [PATCH] logout in graphql, test for logout --- frontend/src/graphql/queries.js | 5 + .../views/Layout/DashboardLayout_gdd.spec.js | 118 +++++++++--------- .../src/views/Layout/DashboardLayout_gdd.vue | 52 ++------ 3 files changed, 78 insertions(+), 97 deletions(-) diff --git a/frontend/src/graphql/queries.js b/frontend/src/graphql/queries.js index 6a51b3858..e02e7fcdf 100644 --- a/frontend/src/graphql/queries.js +++ b/frontend/src/graphql/queries.js @@ -15,3 +15,8 @@ export const login = gql` } } ` +export const logout = gql` + query($sessionId: Float!) { + logout(sessionId: $sessionId) + } +` diff --git a/frontend/src/views/Layout/DashboardLayout_gdd.spec.js b/frontend/src/views/Layout/DashboardLayout_gdd.spec.js index 9221ff59a..cfed75cbd 100644 --- a/frontend/src/views/Layout/DashboardLayout_gdd.spec.js +++ b/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') + }) + }) }) }) }) diff --git a/frontend/src/views/Layout/DashboardLayout_gdd.vue b/frontend/src/views/Layout/DashboardLayout_gdd.vue index 1bde53e60..7a04e39ab 100755 --- a/frontend/src/views/Layout/DashboardLayout_gdd.vue +++ b/frontend/src/views/Layout/DashboardLayout_gdd.vue @@ -66,32 +66,13 @@ -