From c3e19758c342bf7d328c76e780a26af1eb1fec55 Mon Sep 17 00:00:00 2001 From: mahula Date: Thu, 8 Dec 2022 11:17:54 +0100 Subject: [PATCH] adapt dashboard layout unit tests to design changes --- frontend/src/layouts/DashboardLayout.spec.js | 431 ++++++++++--------- 1 file changed, 218 insertions(+), 213 deletions(-) diff --git a/frontend/src/layouts/DashboardLayout.spec.js b/frontend/src/layouts/DashboardLayout.spec.js index 784274210..55efcabd3 100644 --- a/frontend/src/layouts/DashboardLayout.spec.js +++ b/frontend/src/layouts/DashboardLayout.spec.js @@ -1,98 +1,191 @@ import { mount, RouterLinkStub } from '@vue/test-utils' import flushPromises from 'flush-promises' import DashboardLayout from './DashboardLayout' - import { toastErrorSpy } from '@test/testSetup' // import { async } from 'regenerator-runtime' // import { nextTick } from 'vue/types/umd' jest.useFakeTimers() -jest.setTimeout(30000) - const localVue = global.localVue const storeDispatchMock = jest.fn() -const storeCommitMock = jest.fn() -const routerPushMock = jest.fn() -const apolloMock = jest.fn().mockResolvedValue({ - data: { - logout: 'success', - }, -}) +//const mockStoreDispach = jest.fn() const apolloQueryMock = jest.fn() +const apolloMutationMock = jest.fn() +const routerPushMock = jest.fn() + +const stubs = { + RouterLink: RouterLinkStub, + RouterView: true, +} + +const mocks = { + $t: jest.fn((t) => t), + $d: jest.fn((d) => d), + $apollo: { + query: apolloQueryMock, + mutate: apolloMutationMock, + }, + $n: jest.fn(), + $route: { + meta: { + hideFooter: false, + }, + }, + $router: { + push: routerPushMock, + currentRoute: { + path: '/overview', + }, + }, + $store: { + dispatch: storeDispatchMock, + state: { + email: 'user@example.org', + publisherId: 123, + firstName: 'User', + lastName: 'Example', + token: 'valid-token', + }, + // commit: storeCommitMock, + }, + $i18n: { + locale: 'en', + }, +} describe('DashboardLayout', () => { let wrapper - const mocks = { - $i18n: { - locale: 'en', - }, - $t: jest.fn((t) => t), - $n: jest.fn(), - $route: { - meta: { - hideFooter: false, - }, - }, - $router: { - push: routerPushMock, - currentRoute: { - path: '/overview', - }, - }, - $apollo: { - mutate: apolloMock, - query: apolloQueryMock, - }, - $store: { - state: { - email: 'user@example.org', - publisherId: 123, - firstName: 'User', - lastName: 'Example', - token: 'valid-token', - }, - dispatch: storeDispatchMock, - commit: storeCommitMock, - }, - } - - const stubs = { - RouterLink: RouterLinkStub, - RouterView: true, - } - const Wrapper = () => { return mount(DashboardLayout, { localVue, mocks, stubs }) } describe('mount', () => { beforeEach(() => { + apolloQueryMock.mockResolvedValue({ + data: { + communityStatistics: { + totalUsers: 3113, + activeUsers: 1057, + deletedUsers: 35, + totalGradidoCreated: '4083774.05000000000000000000', + totalGradidoDecayed: '-1062639.13634129622923372197', + totalGradidoAvailable: '2513565.869444365732411569', + totalGradidoUnbookedDecayed: '-500474.6738366222166261272', + }, + }, + }) + // apolloMutationMock.mockResolvedValue({ + // data: { + // logout: 'success', + // }, + // }) wrapper = Wrapper() }) it('renders DIV .main-page', () => { expect(wrapper.find('div.main-page').exists()).toBe(true) }) - describe('white Skeleton', () => { - it('has a component SkeletonOverview', () => { + + describe('at first', () => { + it('renders a component Skeleton', () => { expect(wrapper.findComponent({ name: 'SkeletonOverview' }).exists()).toBe(true) }) }) - describe.skip('whiteout Skeleton', () => { - beforeEach(async () => { - // await new Promise((res) => setTimeout(res, 1500)) - // await jest.advanceTimersByTime(1500) - // jest.useFakeTimers() - // jest.runTimersToTime(2500) - // await jest.runAllTimers() - // await wrapper.vm.$nextTick() - // await wrapper.setData({ - // skeleton: false, - // }) + describe('after a timeout', () => { + beforeEach(() => { + jest.advanceTimersByTime(1500) + }) + + describe('update transactions', () => { + beforeEach(async () => { + await apolloQueryMock.mockResolvedValue({ + data: { + transactionList: { + balance: { + balanceGDT: 100, + count: 4, + linkCount: 8, + balance: 1450, + decay: 1250, + }, + transactions: ['transaction', 'transaction', 'transaction', 'transaction'], + }, + }, + }) + await wrapper + .findComponent({ ref: 'router-view' }) + .vm.$emit('update-transactions', { currentPage: 2, pageSize: 5 }) + await flushPromises() + }) + + it('calls the API', () => { + expect(apolloQueryMock).toBeCalledWith( + expect.objectContaining({ + variables: { + currentPage: 2, + pageSize: 5, + }, + }), + ) + }) + + it('updates balance', () => { + expect(wrapper.vm.balance).toBe(1450) + }) + + it('updates transactions', () => { + expect(wrapper.vm.transactions).toEqual([ + 'transaction', + 'transaction', + 'transaction', + 'transaction', + ]) + }) + + it('updates GDT balance', () => { + expect(wrapper.vm.GdtBalance).toBe(100) + }) + + it('updates transaction count', () => { + expect(wrapper.vm.transactionCount).toBe(4) + }) + + it('updates transaction link count', () => { + expect(wrapper.vm.transactionLinkCount).toBe(8) + }) + }) + + describe('update transactions returns error', () => { + beforeEach(async () => { + apolloQueryMock.mockRejectedValue({ + message: 'Ouch!', + }) + await wrapper + .findComponent({ ref: 'router-view' }) + .vm.$emit('update-transactions', { currentPage: 2, pageSize: 5 }) + await flushPromises() + }) + + it('sets pending to true', () => { + expect(wrapper.vm.pending).toBeTruthy() + }) + + it('toasts the error message', () => { + expect(toastErrorSpy).toBeCalledWith('Ouch!') + }) + }) + + describe('set tunneled email', () => { + it('updates tunneled email', async () => { + await wrapper + .findComponent({ ref: 'router-view' }) + .vm.$emit('set-tunneled-email', 'bibi@bloxberg.de') + expect(wrapper.vm.tunneledEmail).toBe('bibi@bloxberg.de') + }) }) it('has a component Navbar', () => { @@ -115,10 +208,10 @@ describe('DashboardLayout', () => { expect(wrapper.find('div.main-page').find('footer.footer').exists()).toBeTruthy() }) - describe.skip('navigation bar', () => { + describe('navigation bar', () => { describe('logout', () => { beforeEach(async () => { - await apolloMock.mockResolvedValue({ + await apolloMutationMock.mockResolvedValue({ data: { logout: 'success', }, @@ -129,7 +222,7 @@ describe('DashboardLayout', () => { }) it('calls the API', async () => { - await expect(apolloMock).toBeCalled() + await expect(apolloMutationMock).toBeCalled() }) it('dispatches logout to store', () => { @@ -141,9 +234,9 @@ describe('DashboardLayout', () => { }) }) - describe.skip('logout fails', () => { + describe('logout fails', () => { beforeEach(async () => { - apolloMock.mockRejectedValue({ + apolloMutationMock.mockRejectedValue({ message: 'error', }) await wrapper.findComponent({ name: 'sidebar' }).vm.$emit('logout') @@ -169,154 +262,66 @@ describe('DashboardLayout', () => { }) }) }) - - describe.skip('update transactions', () => { - beforeEach(async () => { - apolloQueryMock.mockResolvedValue({ - data: { - transactionList: { - balance: { - balanceGDT: 100, - count: 4, - linkCount: 8, - balance: 1450, - decay: 1250, - }, - transactions: ['transaction', 'transaction', 'transaction', 'transaction'], - }, - }, - }) - await wrapper - .findComponent({ ref: 'router-view' }) - .vm.$emit('update-transactions', { currentPage: 2, pageSize: 5 }) - await flushPromises() - }) - - it('calls the API', () => { - expect(apolloQueryMock).toBeCalledWith( - expect.objectContaining({ - variables: { - currentPage: 2, - pageSize: 5, - }, - }), - ) - }) - - it('updates balance', () => { - expect(wrapper.vm.balance).toBe(1450) - }) - - it('updates transactions', () => { - expect(wrapper.vm.transactions).toEqual([ - 'transaction', - 'transaction', - 'transaction', - 'transaction', - ]) - }) - - it('updates GDT balance', () => { - expect(wrapper.vm.GdtBalance).toBe(100) - }) - - it('updates transaction count', () => { - expect(wrapper.vm.transactionCount).toBe(4) - }) - - it('updates transaction link count', () => { - expect(wrapper.vm.transactionLinkCount).toBe(8) - }) - }) - - describe.skip('update transactions returns error', () => { - beforeEach(async () => { - apolloQueryMock.mockRejectedValue({ - message: 'Ouch!', - }) - await wrapper - .findComponent({ ref: 'router-view' }) - .vm.$emit('update-transactions', { currentPage: 2, pageSize: 5 }) - await flushPromises() - }) - - it('sets pending to true', () => { - expect(wrapper.vm.pending).toBeTruthy() - }) - - it('toasts the error message', () => { - expect(toastErrorSpy).toBeCalledWith('Ouch!') - }) - }) - - // describe('set visible method', () => { - // beforeEach(() => { - // wrapper.findComponent({ name: 'NavbarNew' }).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: 'NavbarNew' }).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', - // ) - // }) - // }) }) - describe('set tunneled email', () => { - it('updates tunneled email', async () => { - await wrapper - .findComponent({ ref: 'router-view' }) - .vm.$emit('set-tunneled-email', 'bibi@bloxberg.de') - expect(wrapper.vm.tunneledEmail).toBe('bibi@bloxberg.de') - }) - }) + // describe('set visible method', () => { + // beforeEach(() => { + // wrapper.findComponent({ name: 'NavbarNew' }).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: 'NavbarNew' }).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', + // ) + // }) + // }) }) }) })