From 924e0f25dfc6a6d13d4cd922064d0f6f8727fbf6 Mon Sep 17 00:00:00 2001 From: MateuszMichalowski <79852198+MateuszMichalowski@users.noreply.github.com> Date: Tue, 17 Dec 2024 21:44:04 +0100 Subject: [PATCH] fix(frontend): updated tests (#3406) * feat(frontend): add feedback fixes + map feature fixes * feat(frontend): fetch contribution data networkOnly * feat(frontend): test files updated --- .../CollapseLinksList.spec.js | 34 ++- .../components/Inputs/InputUsername.spec.js | 6 - frontend/src/components/Transaction.spec.js | 285 ++---------------- .../components/UserSettings/UserName.spec.js | 30 +- frontend/src/pages/Register.spec.js | 14 + 5 files changed, 82 insertions(+), 287 deletions(-) diff --git a/frontend/src/components/DecayInformations/CollapseLinksList.spec.js b/frontend/src/components/DecayInformations/CollapseLinksList.spec.js index 53f3f511b..0ae4b419b 100644 --- a/frontend/src/components/DecayInformations/CollapseLinksList.spec.js +++ b/frontend/src/components/DecayInformations/CollapseLinksList.spec.js @@ -1,13 +1,24 @@ import { mount } from '@vue/test-utils' import { describe, it, expect, beforeEach, vi } from 'vitest' -import CollapseLinksList from './CollapseLinksList' +import CollapseLinksList from './CollapseLinksList.vue' import { createStore } from 'vuex' import { createI18n } from 'vue-i18n' import { BButton } from 'bootstrap-vue-next' -// Mock vue-i18n -const mockT = vi.fn((key, value) => `${key} ${value}`) +// Mock translations +const mockT = vi.fn((key, params) => { + switch (key) { + case 'link-load': + if (params === 0) return '1 more link' + return `${params.n} more links` + case 'link-load-more': + return `Load ${params.n} more links` + default: + return key + } +}) +// Mock vue-i18n vi.mock('vue-i18n', () => ({ createI18n: vi.fn(() => ({ global: { @@ -64,6 +75,7 @@ describe('CollapseLinksList', () => { }, }, props: { + modelValue: 1, transactionLinks: [ { amount: '5', @@ -89,7 +101,6 @@ describe('CollapseLinksList', () => { }, ], transactionLinkCount: 3, - value: 1, pending: false, pageSize: 5, ...props, @@ -111,8 +122,8 @@ describe('CollapseLinksList', () => { await wrapper.find('.test-button-load-more').trigger('click') }) - it('emits input', () => { - expect(wrapper.emitted('input')).toEqual([[2]]) + it('emits update:modelValue', () => { + expect(wrapper.emitted('update:modelValue')).toEqual([[2]]) }) }) @@ -123,8 +134,8 @@ describe('CollapseLinksList', () => { .vm.$emit('reset-transaction-link-list') }) - it('emits input ', () => { - expect(wrapper.emitted('input')).toEqual([[0]]) + it('emits update:modelValue', () => { + expect(wrapper.emitted('update:modelValue')).toEqual([[0]]) }) }) @@ -138,7 +149,7 @@ describe('CollapseLinksList', () => { }) it('renders text in singular', () => { - expect(mockT).toHaveBeenCalledWith('link-load', 0) + expect(wrapper.find('.test-button-load-more').text()).toBe('1 more link') }) }) @@ -151,7 +162,7 @@ describe('CollapseLinksList', () => { }) it('renders text in plural and shows the correct count of links', () => { - expect(mockT).toHaveBeenCalledWith('link-load', 0) + expect(wrapper.find('.test-button-load-more').text()).toBe('4 more links') }) }) @@ -162,11 +173,10 @@ describe('CollapseLinksList', () => { transactionLinks: [{ id: 1 }, { id: 2 }], pageSize: 5, }) - await wrapper.vm.$nextTick() }) it('renders text with pageSize as number of links to load', () => { - expect(mockT).toHaveBeenCalledWith('link-load-more', { n: 5 }) + expect(wrapper.find('.test-button-load-more').text()).toBe('Load 5 more links') }) }) }) diff --git a/frontend/src/components/Inputs/InputUsername.spec.js b/frontend/src/components/Inputs/InputUsername.spec.js index 0fddb1017..075a3608b 100644 --- a/frontend/src/components/Inputs/InputUsername.spec.js +++ b/frontend/src/components/Inputs/InputUsername.spec.js @@ -69,12 +69,6 @@ describe('InputUsername', () => { expect(input.props('placeholder')).toBe('Username') }) - it('emits set-is-edit event when button is clicked', async () => { - const button = wrapper.findComponent({ name: 'BButton' }) - await button.trigger('click') - expect(wrapper.emitted('set-is-edit')).toBeTruthy() - }) - it('shows all errors when showAllErrors prop is true', async () => { const errors = ['Error 1', 'Error 2'] vi.mocked(useField).mockReturnValue({ diff --git a/frontend/src/components/Transaction.spec.js b/frontend/src/components/Transaction.spec.js index 6467151f3..9b671b7dd 100644 --- a/frontend/src/components/Transaction.spec.js +++ b/frontend/src/components/Transaction.spec.js @@ -1,242 +1,3 @@ -// import { mount } from '@vue/test-utils' -// import Transaction from './Transaction' -// import Vue from 'vue' -// import flushPromises from 'flush-promises' -// -// const localVue = global.localVue -// -// const consoleErrorMock = jest.fn() -// -// describe('Transaction', () => { -// let wrapper -// -// const mocks = { -// $i18n: { -// locale: 'en', -// }, -// $t: jest.fn((t) => t), -// $n: jest.fn((n) => n), -// $d: jest.fn((d) => d), -// } -// -// const Wrapper = () => { -// return mount(Transaction, { localVue, mocks }) -// } -// -// describe('mount', () => { -// beforeEach(() => { -// wrapper = Wrapper() -// }) -// -// it('renders the component', () => { -// expect(wrapper.find('div.gdt-transaction-list').exists()).toBeTruthy() -// }) -// -// it('has a collapse icon bi-arrow-down-circle', () => { -// expect(wrapper.find('div.gdt-transaction-list').findAll('svg').at(1).classes()).toEqual([ -// 'bi-arrow-down-circle', -// 'h1', -// 'b-icon', -// 'bi', -// 'text-muted', -// ]) -// }) -// -// describe('no valid GDT entry type', () => { -// beforeEach(async () => { -// // disable throwing Errors on warnings to catch the warning -// Vue.config.warnHandler = (w) => {} -// // eslint-disable-next-line no-console -// console.error = consoleErrorMock -// await wrapper.setProps({ gdtEntryType: 'NOT_VALID' }) -// }) -// -// it('throws an error', () => { -// expect(consoleErrorMock).toBeCalledWith( -// expect.objectContaining({ message: 'no lines for this type: NOT_VALID' }), -// ) -// }) -// }) -// -// describe('default entry type FORM', () => { -// beforeEach(async () => { -// await wrapper.setProps({ -// amount: 100, -// date: '2021-05-02T17:20:11+00:00', -// comment: 'This is a comment', -// factor: 17, -// gdt: 1700, -// id: 42, -// }) -// }) -// -// it('has the heart icon', () => { -// expect(wrapper.find('svg.bi-heart').exists()).toBeTruthy() -// }) -// -// it('has the description gdt.contribution', () => { -// expect(wrapper.findAll('div.row').at(0).text()).toContain('gdt.contribution') -// }) -// -// it('renders the amount of euros', () => { -// expect(wrapper.findAll('div.row').at(0).text()).toContain('100 €') -// }) -// -// it('renders the amount of GDT', () => { -// expect(wrapper.findAll('div.row').at(0).text()).toContain('1700 GDT') -// }) -// -// it.skip('renders the comment message', () => { -// expect(wrapper.findAll('div.row').at(0).text()).toContain('This is a comment') -// }) -// -// it.skip('renders the date', () => { -// expect(wrapper.findAll('div.row').at(0).text()).toContain('Sun May 02 2021') -// }) -// -// it('does not show the collapse by default', () => { -// expect(wrapper.find('div#gdt-collapse-42').isVisible()).toBeFalsy() -// }) -// -// describe('without comment', () => { -// it('does not render the message row', async () => { -// await wrapper.setProps({ comment: undefined }) -// expect(wrapper.findAll('div.row').at(1).text()).toContain('gdt.calculation') -// }) -// }) -// // how to open the collapse ????? -// describe.skip('collapse is open', () => { -// beforeEach(async () => { -// await wrapper.find('div#gdt-collapse-42').trigger('click') -// await wrapper.vm.$nextTick() -// await flushPromises() -// await wrapper.vm.$nextTick() -// await flushPromises() -// }) -// -// it('shows the collapse', () => { -// expect(wrapper.find('div#gdt-collapse-42').isVisible()).toBeTruthy() -// }) -// }) -// }) -// -// describe('GdtEntryType.CVS', () => { -// it('behaves as default FORM', async () => { -// await wrapper.setProps({ gdtEntryType: 'CVS' }) -// expect(wrapper.find('svg.bi-heart').exists()).toBeTruthy() -// }) -// }) -// -// describe('GdtEntryType.ELOPAGE', () => { -// it('behaves as default FORM', async () => { -// await wrapper.setProps({ gdtEntryType: 'ELOPAGE' }) -// expect(wrapper.find('svg.bi-heart').exists()).toBeTruthy() -// }) -// }) -// -// describe('GdtEntryType.DIGISTORE', () => { -// it('behaves as default FORM', async () => { -// await wrapper.setProps({ gdtEntryType: 'DIGISTORE' }) -// expect(wrapper.find('svg.bi-heart').exists()).toBeTruthy() -// }) -// }) -// -// describe('GdtEntryType.CVS2', () => { -// it('behaves as default FORM', async () => { -// await wrapper.setProps({ gdtEntryType: 'CVS2' }) -// expect(wrapper.find('svg.bi-heart').exists()).toBeTruthy() -// }) -// }) -// -// describe('GdtEntryType.ELOPAGE_PUBLISHER', () => { -// beforeEach(async () => { -// await wrapper.setProps({ -// amount: 365.67, -// date: '2020-04-10T13:28:00+00:00', -// comment: 'This is a comment', -// gdtEntryType: 'ELOPAGE_PUBLISHER', -// factor: 22, -// gdt: 967.65, -// id: 42, -// }) -// }) -// -// it('has the person-check icon', () => { -// expect(wrapper.find('svg.bi-person-check').exists()).toBeTruthy() -// }) -// -// it('has the description gdt.recruited-member', () => { -// expect(wrapper.findAll('div.row').at(0).text()).toContain('gdt.recruited-member') -// }) -// -// it('renders the percentage', () => { -// expect(wrapper.findAll('div.row').at(0).text()).toContain('5%') -// }) -// -// it('renders the amount of GDT', () => { -// expect(wrapper.findAll('div.row').at(0).text()).toContain('365.67 GDT') -// }) -// -// it('renders the gdt.publisher', () => { -// expect(wrapper.findAll('div.row').at(1).text()).toContain('gdt.publisher') -// }) -// -// it.skip('renders the date', () => { -// expect(wrapper.findAll('div.row').at(2).text()).toContain('Fri Apr 10 2020') -// }) -// -// it('does not show the collapse by default', () => { -// expect(wrapper.find('div#gdt-collapse-42').isVisible()).toBeFalsy() -// }) -// -// describe.skip('without comment', () => { -// it('does not render the message row', async () => { -// await wrapper.setProps({ comment: undefined }) -// expect(wrapper.findAll('div.row').at(0).text()).toContain('form.date') -// }) -// }) -// }) -// -// describe('GdtEntryType.GLOBAL_MODIFICATOR', () => { -// beforeEach(async () => { -// await wrapper.setProps({ -// amount: 123.45, -// date: '2020-03-12T13:28:00+00:00', -// comment: 'This is a comment', -// gdtEntryType: 'GLOBAL_MODIFICATOR', -// factor: 19, -// gdt: 61.23, -// id: 42, -// }) -// }) -// -// it('has the gift icon', () => { -// expect(wrapper.find('svg.bi-gift').exists()).toBeTruthy() -// }) -// -// it('has the description gdt.gdt-received', () => { -// expect(wrapper.findAll('div.row').at(0).text()).toContain('gdt.gdt-received') -// }) -// -// it('renders the comment', () => { -// expect(wrapper.findAll('div.row').at(0).text()).toContain('This is a comment') -// }) -// -// it('renders the amount of GDT', () => { -// expect(wrapper.findAll('div.row').at(0).text()).toContain('61.23 GDT') -// }) -// -// it('renders the gdt.conversion-gdt-euro', () => { -// expect(wrapper.findAll('div.row').at(1).text()).toContain('gdt.conversion-gdt-euro') -// }) -// -// it('does not show the collapse by default', () => { -// expect(wrapper.find('div#gdt-collapse-42').isVisible()).toBeFalsy() -// }) -// }) -// }) -// }) - import { mount } from '@vue/test-utils' import { describe, it, expect, beforeEach, vi } from 'vitest' import Transaction from './Transaction' @@ -266,8 +27,11 @@ vi.mock('vue-i18n', () => ({ describe('Transaction', () => { let wrapper - const Wrapper = () => { + const createWrapper = (props = {}, options = {}) => { return mount(Transaction, { + props: { + ...props, + }, global: { plugins: [ createStore({ @@ -285,8 +49,21 @@ describe('Transaction', () => { BRow, BCol, BAvatar, - BCollapse, + BCollapse: { + template: ` +
+ +
+ `, + props: ['id', 'modelValue'], + }, VariantIcon, + ...options.stubs, }, }, }) @@ -294,7 +71,7 @@ describe('Transaction', () => { describe('mount', () => { beforeEach(() => { - wrapper = Wrapper() + wrapper = createWrapper() }) it('renders the component', () => { @@ -330,7 +107,7 @@ describe('Transaction', () => { describe('default entry type FORM', () => { beforeEach(async () => { - await wrapper.setProps({ + wrapper = createWrapper({ amount: 100, date: '2021-05-02T17:20:11+00:00', comment: 'This is a comment', @@ -356,10 +133,6 @@ describe('Transaction', () => { expect(wrapper.findAll('div.row').at(0).text()).toContain('1700 GDT') }) - // it('does not show the collapse by default', () => { - // expect(wrapper.find('div#gdt-collapse-42').isVisible()).toBe(false) - // }) - describe('without comment', () => { it('does not render the message row', async () => { await wrapper.setProps({ comment: undefined }) @@ -374,7 +147,10 @@ describe('Transaction', () => { }) it('shows the collapse', () => { - expect(wrapper.find('div#gdt-collapse-42').isVisible()).toBe(true) + const collapse = wrapper.find('div#gdt-collapse-42') + expect(collapse.exists()).toBe(true) + expect(collapse.attributes('data-test')).toBe('collapse') + expect(wrapper.find('[data-test="collapse"]').classes()).toContain('show') }) }) }) @@ -409,7 +185,7 @@ describe('Transaction', () => { describe('GdtEntryType.ELOPAGE_PUBLISHER', () => { beforeEach(async () => { - await wrapper.setProps({ + wrapper = createWrapper({ amount: 365.67, date: '2020-04-10T13:28:00+00:00', comment: 'This is a comment', @@ -435,15 +211,11 @@ describe('Transaction', () => { it('renders the amount of GDT', () => { expect(wrapper.findAll('div.row').at(0).text()).toContain('365.67 GDT') }) - - // it('does not show the collapse by default', () => { - // expect(wrapper.find('div#gdt-collapse-42').isVisible()).toBe(false) - // }) }) describe('GdtEntryType.GLOBAL_MODIFICATOR', () => { beforeEach(async () => { - await wrapper.setProps({ + wrapper = createWrapper({ amount: 123.45, date: '2020-03-12T13:28:00+00:00', comment: 'This is a comment', @@ -452,7 +224,6 @@ describe('Transaction', () => { gdt: 61.23, id: 42, }) - wrapper.attachTo = document.body }) it('has the gift icon', () => { @@ -470,10 +241,6 @@ describe('Transaction', () => { it('renders the amount of GDT', () => { expect(wrapper.findAll('div.row').at(0).text()).toContain('61.23 GDT') }) - - // it('does not show the collapse by default', () => { - // expect(wrapper.find('div#gdt-collapse-42').isVisible()).toBe(false) - // }) }) }) }) diff --git a/frontend/src/components/UserSettings/UserName.spec.js b/frontend/src/components/UserSettings/UserName.spec.js index dc6ad04aa..485fe29ec 100644 --- a/frontend/src/components/UserSettings/UserName.spec.js +++ b/frontend/src/components/UserSettings/UserName.spec.js @@ -1,5 +1,6 @@ import { mount } from '@vue/test-utils' import { describe, it, expect, beforeEach, vi } from 'vitest' +import { ref } from 'vue' import UserName from './UserName.vue' import { createStore } from 'vuex' import { createI18n } from 'vue-i18n' @@ -60,20 +61,22 @@ vi.mock('@/composables/useToast', () => ({ }), })) -const valuesMock = {} -const errorsMock = {} +// Updated to use Vue's reactivity +const valuesMock = ref({ username: '' }) +const errorsMock = ref({}) const setFieldValueMock = vi.fn((field, value) => { - valuesMock[field] = value + valuesMock.value[field] = value }) const handleSubmitMock = vi.fn((callback) => { - return () => callback(valuesMock) + return () => callback(valuesMock.value) }) + vi.mock('vee-validate', () => ({ useForm: () => ({ handleSubmit: handleSubmitMock, setFieldValue: setFieldValueMock, - values: valuesMock, - errors: errorsMock, + values: valuesMock.value, + errors: errorsMock.value, }), })) @@ -94,7 +97,7 @@ describe('UserName Form', () => { beforeEach(() => { vi.clearAllMocks() - valuesMock.username = '' + valuesMock.value.username = '' wrapper = mountComponent() }) @@ -132,8 +135,13 @@ describe('UserName Form', () => { }) it('enables submit button when a new username is entered', async () => { - setFieldValueMock('username', 'newUser') + valuesMock.value.username = 'newUser' // Directly set the reactive value await wrapper.vm.$nextTick() + + // Trigger input change to ensure reactivity + await wrapper.find('[data-test="component-input-username"]').trigger('input') + await wrapper.vm.$nextTick() + expect(wrapper.find('[data-test="submit-username-button"]').exists()).toBe(true) expect( wrapper.find('[data-test="submit-username-button"]').attributes('disabled'), @@ -143,7 +151,8 @@ describe('UserName Form', () => { it('submits the form and updates the store on success', async () => { mutationMock.mockResolvedValue({ data: { updateUserInfos: { validValues: 3 } } }) - setFieldValueMock('username', 'newUser') + valuesMock.value.username = 'newUser' + await wrapper.vm.$nextTick() await wrapper.find('form').trigger('submit') expect(mutationMock).toHaveBeenCalledWith({ alias: 'newUser' }) @@ -154,7 +163,8 @@ describe('UserName Form', () => { it('shows an error toast on submission failure', async () => { mutationMock.mockRejectedValue(new Error('API Error')) - setFieldValueMock('username', 'newUser') + valuesMock.value.username = 'newUser' + await wrapper.vm.$nextTick() await wrapper.find('form').trigger('submit') expect(mutationMock).toHaveBeenCalledWith({ alias: 'newUser' }) diff --git a/frontend/src/pages/Register.spec.js b/frontend/src/pages/Register.spec.js index 0fd2aa4b4..f6cc4fcd1 100644 --- a/frontend/src/pages/Register.spec.js +++ b/frontend/src/pages/Register.spec.js @@ -130,18 +130,32 @@ describe('Register', () => { }) it('displays a message that firstname is required', async () => { + // First set some value to make the field dirty + await wrapper.find('#registerFirstname').setValue('test') + await wrapper.find('#registerFirstname').trigger('blur') + + // Then clear it to trigger validation await wrapper.find('#registerFirstname').setValue('') await wrapper.find('#registerFirstname').trigger('blur') await flushPromises() + + expect(wrapper.find('#registerFirstnameLiveFeedback').exists()).toBe(true) expect(wrapper.find('#registerFirstnameLiveFeedback').text()).toBe( 'The field firstname is invalid', ) }) it('displays a message that lastname is required', async () => { + // First set some value to make the field dirty + await wrapper.find('#registerLastname').setValue('test') + await wrapper.find('#registerLastname').trigger('blur') + + // Then clear it to trigger validation await wrapper.find('#registerLastname').setValue('') await wrapper.find('#registerLastname').trigger('blur') await flushPromises() + + expect(wrapper.find('#registerLastnameLiveFeedback').exists()).toBe(true) expect(wrapper.find('#registerLastnameLiveFeedback').text()).toBe( 'The field lastname is invalid', )