import { mount } from '@vue/test-utils' import CreationFormular from './CreationFormular.vue' import { createPendingCreation } from '../graphql/createPendingCreation' import { createPendingCreations } from '../graphql/createPendingCreations' const localVue = global.localVue const apolloMutateMock = jest.fn().mockResolvedValue({ data: { createPendingCreation: [0, 0, 0], }, }) const stateCommitMock = jest.fn() const toastedErrorMock = jest.fn() const toastedSuccessMock = jest.fn() const mocks = { $t: jest.fn((t, options) => (options ? [t, options] : t)), $d: jest.fn((d) => { const date = new Date(d) return date.toISOString().split('T')[0] }), $apollo: { mutate: apolloMutateMock, }, $store: { commit: stateCommitMock, state: { moderator: { id: 0, name: 'test moderator', }, }, }, $toasted: { error: toastedErrorMock, success: toastedSuccessMock, }, } const propsData = { type: '', creation: [], } const now = new Date(Date.now()) const getCreationDate = (sub) => { const date = sub === 0 ? now : new Date(now.getFullYear(), now.getMonth() - sub, 1, 0) return date.toISOString().split('T')[0] } describe('CreationFormular', () => { let wrapper const Wrapper = () => { return mount(CreationFormular, { localVue, mocks, propsData }) } describe('mount', () => { beforeEach(() => { wrapper = Wrapper() }) it('has a DIV element with the class.component-creation-formular', () => { expect(wrapper.find('.component-creation-formular').exists()).toBeTruthy() }) describe('text and value form props', () => { beforeEach(async () => { wrapper = mount(CreationFormular, { localVue, mocks, propsData: { creationUserData: { memo: 'Memo from property', amount: 42 }, ...propsData, }, }) }) it('has text taken from props', () => { expect(wrapper.vm.text).toBe('Memo from property') }) it('has value taken from props', () => { expect(wrapper.vm.value).toBe(42) }) }) describe('radio buttons to selcet month', () => { it('has three radio buttons', () => { expect(wrapper.findAll('input[type="radio"]').length).toBe(3) }) describe('with single creation', () => { beforeEach(async () => { jest.clearAllMocks() await wrapper.setProps({ type: 'singleCreation', creation: [200, 400, 600], item: { email: 'benjamin@bluemchen.de' }, }) await wrapper.findAll('input[type="radio"]').at(1).setChecked() await wrapper.find('input[type="number"]').setValue(90) }) describe('first radio button', () => { beforeEach(async () => { await wrapper.findAll('input[type="radio"]').at(0).setChecked() await wrapper.find('textarea').setValue('Test create coins') }) it('sets rangeMax to 200', () => { expect(wrapper.vm.rangeMax).toBe(200) }) describe('sendForm', () => { beforeEach(async () => { await wrapper.find('.test-submit').trigger('click') }) it('sends ... to apollo', () => { expect(apolloMutateMock).toBeCalledWith( expect.objectContaining({ mutation: createPendingCreation, variables: { email: 'benjamin@bluemchen.de', creationDate: getCreationDate(2), amount: 90, memo: 'Test create coins', moderator: 0, }, }), ) }) it('emits update-user-data', () => { expect(wrapper.emitted('update-user-data')).toEqual([ [{ email: 'benjamin@bluemchen.de' }, [0, 0, 0]], ]) }) it('toasts a success message', () => { expect(toastedSuccessMock).toBeCalledWith([ 'creation_form.toasted', { email: 'benjamin@bluemchen.de', value: '90' }, ]) }) it('updates open creations in store', () => { expect(stateCommitMock).toBeCalledWith('openCreationsPlus', 1) }) it('resets the form data', () => { expect(wrapper.vm.value).toBe(0) }) }) describe('sendForm with server error', () => { beforeEach(async () => { apolloMutateMock.mockRejectedValueOnce({ message: 'Ouch!' }) await wrapper.find('.test-submit').trigger('click') }) it('toasts an error message', () => { expect(toastedErrorMock).toBeCalledWith('Ouch!') }) }) describe('Negativ value', () => { beforeEach(async () => { jest.clearAllMocks() await wrapper.setProps({ type: 'singleCreation', creation: [200, 400, 600] }) await wrapper.setData({ rangeMin: 180 }) await wrapper.setData({ value: -20 }) }) it('has no submit button', async () => { expect(await wrapper.find('.test-submit').attributes('disabled')).toBe('disabled') }) }) describe('Empty text', () => { beforeEach(async () => { jest.clearAllMocks() await wrapper.setProps({ type: 'singleCreation', creation: [200, 400, 600] }) await wrapper.setData({ rangeMin: 180 }) await wrapper.setData({ text: '' }) }) it('has no submit button', async () => { expect(await wrapper.find('.test-submit').attributes('disabled')).toBe('disabled') }) }) describe('Text length less than 10', () => { beforeEach(async () => { jest.clearAllMocks() await wrapper.setProps({ type: 'singleCreation', creation: [200, 400, 600] }) await wrapper.setData({ rangeMin: 180 }) await wrapper.setData({ text: 'Try this' }) }) it('has no submit button', async () => { expect(await wrapper.find('.test-submit').attributes('disabled')).toBe('disabled') }) }) }) describe('second radio button', () => { beforeEach(async () => { await wrapper.findAll('input[type="radio"]').at(1).setChecked() }) it('sets rangeMin to 0', () => { expect(wrapper.vm.rangeMin).toBe(0) }) it('sets rangeMax to 400', () => { expect(wrapper.vm.rangeMax).toBe(400) }) describe('sendForm', () => { beforeEach(async () => { await wrapper.find('.test-submit').trigger('click') }) it('sends ... to apollo', () => { expect(apolloMutateMock).toBeCalled() }) }) describe('Negativ value', () => { beforeEach(async () => { jest.clearAllMocks() await wrapper.setProps({ type: 'singleCreation', creation: [200, 400, 600] }) await wrapper.setData({ rangeMin: 180 }) await wrapper.setData({ value: -20 }) }) it('has no submit button', async () => { expect(await wrapper.find('.test-submit').attributes('disabled')).toBe('disabled') }) }) describe('Empty text', () => { beforeEach(async () => { jest.clearAllMocks() await wrapper.setProps({ type: 'singleCreation', creation: [200, 400, 600] }) await wrapper.setData({ rangeMin: 180 }) await wrapper.setData({ text: '' }) }) it('has no submit button', async () => { expect(await wrapper.find('.test-submit').attributes('disabled')).toBe('disabled') }) }) describe('Text length less than 10', () => { beforeEach(async () => { jest.clearAllMocks() await wrapper.setProps({ type: 'singleCreation', creation: [200, 400, 600] }) await wrapper.setData({ rangeMin: 180 }) await wrapper.setData({ text: 'Try this' }) }) it('has no submit button', async () => { expect(await wrapper.find('.test-submit').attributes('disabled')).toBe('disabled') }) }) }) describe('third radio button', () => { beforeEach(async () => { await wrapper.findAll('input[type="radio"]').at(2).setChecked() }) it('sets rangeMin to 0', () => { expect(wrapper.vm.rangeMin).toBe(0) }) it('sets rangeMax to 400', () => { expect(wrapper.vm.rangeMax).toBe(600) }) describe('sendForm', () => { beforeEach(async () => { await wrapper.find('.test-submit').trigger('click') }) it('sends mutation to apollo', () => { expect(apolloMutateMock).toBeCalled() }) it('toast success message', () => { expect(toastedSuccessMock).toBeCalled() }) it('store commit openCreationPlus', () => { expect(stateCommitMock).toBeCalledWith('openCreationsPlus', 1) }) }) describe('Negativ value', () => { beforeEach(async () => { jest.clearAllMocks() await wrapper.setProps({ type: 'singleCreation', creation: [200, 400, 600] }) await wrapper.setData({ rangeMin: 180 }) await wrapper.setData({ value: -20 }) }) it('has no submit button', async () => { expect(await wrapper.find('.test-submit').attributes('disabled')).toBe('disabled') }) }) describe('Empty text', () => { beforeEach(async () => { jest.clearAllMocks() await wrapper.setProps({ type: 'singleCreation', creation: [200, 400, 600] }) await wrapper.setData({ rangeMin: 180 }) await wrapper.setData({ text: '' }) }) it('has no submit button', async () => { expect(await wrapper.find('.test-submit').attributes('disabled')).toBe('disabled') }) }) describe('Text length less than 10', () => { beforeEach(async () => { jest.clearAllMocks() await wrapper.setProps({ type: 'singleCreation', creation: [200, 400, 600] }) await wrapper.setData({ rangeMin: 180 }) await wrapper.setData({ text: 'Try this' }) }) it('has no submit button', async () => { expect(await wrapper.find('.test-submit').attributes('disabled')).toBe('disabled') }) }) }) }) describe('mass creation with success', () => { beforeEach(async () => { jest.clearAllMocks() apolloMutateMock.mockResolvedValue({ data: { createPendingCreations: { success: true, successfulCreation: ['bob@baumeister.de', 'bibi@bloxberg.de'], failedCreation: [], }, }, }) await wrapper.setProps({ type: 'massCreation', creation: [200, 400, 600], items: [{ email: 'bob@baumeister.de' }, { email: 'bibi@bloxberg.de' }], }) await wrapper.findAll('input[type="radio"]').at(1).setChecked() await wrapper.find('textarea').setValue('Test mass create coins') await wrapper.find('input[type="number"]').setValue(200) await wrapper.find('.test-submit').trigger('click') }) it('calls the API', () => { expect(apolloMutateMock).toBeCalledWith( expect.objectContaining({ mutation: createPendingCreations, variables: { pendingCreations: [ { email: 'bob@baumeister.de', creationDate: getCreationDate(1), amount: 200, memo: 'Test mass create coins', moderator: 0, }, { email: 'bibi@bloxberg.de', creationDate: getCreationDate(1), amount: 200, memo: 'Test mass create coins', moderator: 0, }, ], }, }), ) }) it('updates open creations in store', () => { expect(stateCommitMock).toBeCalledWith('openCreationsPlus', 2) }) it('emits remove-all-bookmark', () => { expect(wrapper.emitted('remove-all-bookmark')).toBeTruthy() }) }) describe('mass creation with success but all failed', () => { beforeEach(async () => { jest.clearAllMocks() apolloMutateMock.mockResolvedValue({ data: { createPendingCreations: { success: true, successfulCreation: [], failedCreation: ['bob@baumeister.de', 'bibi@bloxberg.de'], }, }, }) await wrapper.setProps({ type: 'massCreation', creation: [200, 400, 600], items: [{ email: 'bob@baumeister.de' }, { email: 'bibi@bloxberg.de' }], }) await wrapper.findAll('input[type="radio"]').at(1).setChecked() await wrapper.find('textarea').setValue('Test mass create coins') await wrapper.find('input[type="number"]').setValue(200) await wrapper.find('.test-submit').trigger('click') }) it('updates open creations in store', () => { expect(stateCommitMock).toBeCalledWith('openCreationsPlus', 0) }) it('toasts two errors', () => { expect(toastedErrorMock).toBeCalledWith( 'Could not created PendingCreation for bob@baumeister.de', ) expect(toastedErrorMock).toBeCalledWith( 'Could not created PendingCreation for bibi@bloxberg.de', ) }) }) describe('mass creation with error', () => { beforeEach(async () => { jest.clearAllMocks() apolloMutateMock.mockRejectedValue({ message: 'Oh no!', }) await wrapper.setProps({ type: 'massCreation', creation: [200, 400, 600], items: [{ email: 'bob@baumeister.de' }, { email: 'bibi@bloxberg.de' }], }) await wrapper.findAll('input[type="radio"]').at(1).setChecked() await wrapper.find('textarea').setValue('Test mass create coins') await wrapper.find('input[type="number"]').setValue(200) await wrapper.find('.test-submit').trigger('click') }) it('toasts an error message', () => { expect(toastedErrorMock).toBeCalledWith('Oh no!') }) }) }) }) })