From 3c727795742ac2e66823c3dbf1ae99259603de66 Mon Sep 17 00:00:00 2001 From: Moriz Wahl Date: Fri, 4 Feb 2022 16:41:53 +0100 Subject: [PATCH] Test for user table in component folder --- admin/src/components/UserTable.spec.js | 153 ++++++++++++++++++++++--- admin/src/pages/UserSearch.spec.js | 94 --------------- 2 files changed, 138 insertions(+), 109 deletions(-) diff --git a/admin/src/components/UserTable.spec.js b/admin/src/components/UserTable.spec.js index 982b65a81..b83711c18 100644 --- a/admin/src/components/UserTable.spec.js +++ b/admin/src/components/UserTable.spec.js @@ -1,7 +1,9 @@ -import { mount } from '@vue/test-utils' +import { createLocalVue, mount } from '@vue/test-utils' +import { BootstrapVue, IconsPlugin } from 'bootstrap-vue' import UserTable from './UserTable.vue' -const localVue = global.localVue +let localVue +// const localVue = global.localVue const apolloQueryMock = jest.fn() apolloQueryMock.mockResolvedValue() @@ -11,22 +13,36 @@ describe('UserTable', () => { const defaultItemsUser = [ { - email: 'bibi@bloxberg.de', + userId: 1, firstName: 'Bibi', lastName: 'Bloxberg', - creation: [1000, 1000, 1000], + email: 'bibi@bloxberg.de', + creation: [200, 400, 600], + emailChecked: true, }, { - email: 'bibi@bloxberg.de', - firstName: 'Bibi', - lastName: 'Bloxberg', + userId: 2, + firstName: 'Benjamin', + lastName: 'Blümchen', + email: 'benjamin@bluemchen.de', creation: [1000, 1000, 1000], + emailChecked: true, }, { - email: 'bibi@bloxberg.de', - firstName: 'Bibi', - lastName: 'Bloxberg', + userId: 3, + firstName: 'Peter', + lastName: 'Lustig', + email: 'peter@lustig.de', + creation: [0, 0, 0], + emailChecked: true, + }, + { + userId: 4, + firstName: 'New', + lastName: 'User', + email: 'new@user.ch', creation: [1000, 1000, 1000], + emailChecked: false, }, ] @@ -107,7 +123,7 @@ describe('UserTable', () => { const mocks = { $t: jest.fn((t) => t), - $d: jest.fn((d) => d), + $d: jest.fn((d) => String(d)), $apollo: { query: apolloQueryMock, }, @@ -117,12 +133,15 @@ describe('UserTable', () => { } const Wrapper = (propsData) => { + localVue = createLocalVue() + localVue.use(BootstrapVue) + localVue.use(IconsPlugin) return mount(UserTable, { localVue, propsData, mocks }) } describe('mount', () => { describe('type PageUserSearch', () => { - beforeEach(() => { + beforeEach(async () => { wrapper = Wrapper(propsDataPageUserSearch) }) @@ -175,12 +194,12 @@ describe('UserTable', () => { }) describe('content', () => { - it('has 3 rows', () => { - expect(wrapper.findAll('tbody tr').length).toBe(3) + it('has 4 rows', () => { + expect(wrapper.findAll('tbody tr')).toHaveLength(4) }) it('has 7 columns', () => { - expect(wrapper.findAll('tr:nth-child(1) > td').length).toBe(7) + expect(wrapper.findAll('tr:nth-child(1) > td')).toHaveLength(7) }) it('find button on fifth column', () => { @@ -189,6 +208,110 @@ describe('UserTable', () => { ).toBeTruthy() }) }) + + describe('row toggling', () => { + describe('user with email not activated', () => { + it('has no details button', () => { + expect( + wrapper.findAll('tbody > tr').at(3).findAll('td').at(4).find('button').exists(), + ).toBeFalsy() + }) + + it('has a red confirmed button with envelope item', () => { + const row = wrapper.findAll('tbody > tr').at(3) + expect(row.findAll('td').at(5).find('button').exists()).toBeTruthy() + expect(row.findAll('td').at(5).find('button').classes('btn-danger')).toBeTruthy() + expect(row.findAll('td').at(5).find('svg').classes('bi-envelope')).toBeTruthy() + }) + + describe('click on envelope', () => { + beforeEach(async () => { + await wrapper + .findAll('tbody > tr') + .at(3) + .findAll('td') + .at(5) + .find('button') + .trigger('click') + }) + + it('opens the details', async () => { + expect(wrapper.findAll('tbody > tr')).toHaveLength(6) + expect(wrapper.findAll('tbody > tr').at(5).find('input').element.value).toBe( + 'new@user.ch', + ) + expect(wrapper.findAll('tbody > tr').at(5).text()).toContain( + 'unregister_mail.text_false', + ) + // HACK: for some reason we need to close the row details after this test + await wrapper + .findAll('tbody > tr') + .at(3) + .findAll('td') + .at(5) + .find('button') + .trigger('click') + }) + + describe('click on envelope again', () => { + beforeEach(async () => { + await wrapper + .findAll('tbody > tr') + .at(3) + .findAll('td') + .at(5) + .find('button') + .trigger('click') + }) + + it('closes the details', () => { + expect(wrapper.findAll('tbody > tr')).toHaveLength(4) + }) + }) + + describe('click on close details', () => { + beforeEach(async () => { + await wrapper.findAll('tbody > tr').at(5).findAll('button').at(1).trigger('click') + }) + + it('closes the details', () => { + expect(wrapper.findAll('tbody > tr')).toHaveLength(4) + }) + }) + }) + }) + + describe('different details', () => { + it.skip('shows the creation formular for second user', async () => { + await wrapper + .findAll('tbody > tr') + .at(1) + .findAll('td') + .at(4) + .find('button') + .trigger('click') + expect(wrapper.findAll('tbody > tr')).toHaveLength(6) + expect( + wrapper + .findAll('tbody > tr') + .at(3) + .find('div.component-creation-formular') + .exists(), + ).toBeTruthy() + }) + + it.skip('shows the transactions for third user', async () => { + await wrapper + .findAll('tbody > tr') + .at(4) + .findAll('td') + .at(6) + .find('button') + .trigger('click') + expect(wrapper.findAll('tbody > tr')).toHaveLength(6) + }) + }) + }) }) }) diff --git a/admin/src/pages/UserSearch.spec.js b/admin/src/pages/UserSearch.spec.js index 64783e82e..df326923f 100644 --- a/admin/src/pages/UserSearch.spec.js +++ b/admin/src/pages/UserSearch.spec.js @@ -88,100 +88,6 @@ describe('UserSearch', () => { ) }) - describe('row toggling', () => { - it('has 4 users in the table', () => { - expect(wrapper.findAll('tbody > tr')).toHaveLength(4) - }) - - describe('user with email not activated', () => { - it('has no details button', () => { - expect( - wrapper.findAll('tbody > tr').at(3).findAll('td').at(4).find('button').exists(), - ).toBeFalsy() - }) - - it('has a red confirmed button with envelope item', () => { - const row = wrapper.findAll('tbody > tr').at(3) - expect(row.findAll('td').at(5).find('button').exists()).toBeTruthy() - expect(row.findAll('td').at(5).find('button').classes('btn-danger')).toBeTruthy() - expect(row.findAll('td').at(5).find('svg').classes('bi-envelope')).toBeTruthy() - }) - - describe('click on envelope', () => { - it('opens the details', async () => { - await wrapper - .findAll('tbody > tr') - .at(3) - .findAll('td') - .at(5) - .find('button') - .trigger('click') - expect(wrapper.findAll('tbody > tr')).toHaveLength(6) - expect(wrapper.findAll('tbody > tr').at(5).find('input').element.value).toBe( - 'new@user.ch', - ) - expect(wrapper.findAll('tbody > tr').at(5).text()).toContain( - 'unregister_mail.text_false', - ) - }) - - describe('click on envelope again', () => { - it('closes the details', async () => { - await wrapper - .findAll('tbody > tr') - .at(3) - .findAll('td') - .at(5) - .find('button') - .trigger('click') - expect(wrapper.findAll('tbody > tr')).toHaveLength(4) - }) - }) - - describe('click on close details', () => { - it('closes the details', async () => { - await wrapper - .findAll('tbody > tr') - .at(3) - .findAll('td') - .at(5) - .find('button') - .trigger('click') - await wrapper.findAll('tbody > tr').at(5).findAll('button').at(1).trigger('click') - expect(wrapper.findAll('tbody > tr')).toHaveLength(4) - }) - }) - }) - }) - - describe('different details', () => { - it.skip('shows the creation formular for second user', async () => { - await wrapper - .findAll('tbody > tr') - .at(1) - .findAll('td') - .at(4) - .find('button') - .trigger('click') - expect(wrapper.findAll('tbody > tr')).toHaveLength(6) - expect( - wrapper.findAll('tbody > tr').at(3).find('div.component-creation-formular').exists(), - ).toBeTruthy() - }) - - it.skip('shows the transactions for third user', async () => { - await wrapper - .findAll('tbody > tr') - .at(4) - .findAll('td') - .at(6) - .find('button') - .trigger('click') - expect(wrapper.findAll('tbody > tr')).toHaveLength(6) - }) - }) - }) - describe('unconfirmed emails', () => { beforeEach(async () => { await wrapper.find('button.btn-block').trigger('click')