diff --git a/admin/src/components/ChangeUserRoleFormular.spec.js b/admin/src/components/ChangeUserRoleFormular.spec.js index 5373f4ee8..1e8a7811c 100644 --- a/admin/src/components/ChangeUserRoleFormular.spec.js +++ b/admin/src/components/ChangeUserRoleFormular.spec.js @@ -1,7 +1,7 @@ import { mount } from '@vue/test-utils' import ChangeUserRoleFormular from './ChangeUserRoleFormular.vue' import { setUserRole } from '../graphql/setUserRole' -import { toastErrorSpy } from '../../test/testSetup' +import { toastSuccessSpy, toastErrorSpy } from '../../test/testSetup' const localVue = global.localVue @@ -28,13 +28,10 @@ const mocks = { }, } -const propsData = { - item: {}, -} +let propsData +let wrapper describe('ChangeUserRoleFormular', () => { - let wrapper - const Wrapper = () => { return mount(ChangeUserRoleFormular, { localVue, mocks, propsData }) } @@ -42,20 +39,33 @@ describe('ChangeUserRoleFormular', () => { describe('mount', () => { beforeEach(() => { jest.clearAllMocks() - wrapper = Wrapper() }) - it('has a DIV element with the class.delete-user-formular', () => { - expect(wrapper.find('.change-user-role-formular').exists()).toBe(true) + describe('DOM has', () => { + beforeEach(() => { + propsData = { + item: { + userId: 1, + isAdmin: null, + }, + } + wrapper = Wrapper() + }) + + it('a DIV element with the class.delete-user-formular', () => { + expect(wrapper.find('.change-user-role-formular').exists()).toBe(true) + }) }) describe('change own role', () => { beforeEach(() => { - wrapper.setProps({ + propsData = { item: { userId: 0, + isAdmin: null, }, - }) + } + wrapper = Wrapper() }) it('shows a text that you cannot change own role', () => { @@ -68,219 +78,176 @@ describe('ChangeUserRoleFormular', () => { }) describe('change others role', () => { - beforeEach(() => { - // Wolle: await? - wrapper.setProps({ - item: { - userId: 1, - isAdmin: null, - }, + let rolesToSelect + + describe('general', () => { + beforeEach(() => { + propsData = { + item: { + userId: 1, + isAdmin: null, + }, + } + wrapper = Wrapper() + rolesToSelect = wrapper.find('select.role-select').findAll('option') + }) + + it('shows no text that you cannot change own role', () => { + expect(wrapper.text()).not.toContain('userRole.notChangeYourSelf') + }) + + it('shows the select label', () => { + expect(wrapper.text()).toContain('userRole.selectLabel') + }) + + it('has a select', () => { + expect(wrapper.find('select.role-select').exists()).toBe(true) + }) + + it('role select is enabled', () => { + expect(wrapper.find('select.role-select[disabled="disabled"]').exists()).toBe(false) + }) + + describe.skip('on API error', () => { + beforeEach(async () => { + apolloMutateMock.mockRejectedValue({ message: 'Oh no!' }) + rolesToSelect.at(1).setSelected() + // wrapper.vm.roleSelected = 'admin' + await wrapper.vm.$nextTick() + }) + + it('toasts an error message', () => { + expect(toastErrorSpy).toBeCalledWith('Oh no!') + }) }) }) - it('shows no text that you cannot change own role', () => { - expect(wrapper.text()).not.toContain('userRole.notChangeYourSelf') - }) - - it('shows the select label', () => { - expect(wrapper.text()).toContain('userRole.selectLabel') - }) - - it('has a select', () => { - expect(wrapper.find('select.role-select').exists()).toBe(true) - }) - - it('role select is enabled', () => { - expect(wrapper.find('select.role-select[disabled="disabled"]').exists()).toBe(false) - }) - describe('user is usual user', () => { + beforeEach(() => { + propsData = { + item: { + userId: 1, + isAdmin: null, + }, + } + wrapper = Wrapper() + rolesToSelect = wrapper.find('select.role-select').findAll('option') + }) + it('select is set to "usual user"', () => { - // expect(wrapper.find('option:checked').element.value).toBe('user') expect(wrapper.find('select.role-select').element.value).toBe('user') }) + + describe('change select to', () => { + describe('same role', () => { + it('not calling the API', () => { + rolesToSelect.at(0).setSelected() + expect(apolloMutateMock).not.toHaveBeenCalled() + }) + }) + + describe('new role', () => { + beforeEach(() => { + rolesToSelect.at(1).setSelected() + }) + + it('calls the API', () => { + expect(apolloMutateMock).toBeCalledWith( + expect.objectContaining({ + mutation: setUserRole, + variables: { + userId: 1, + isAdmin: true, + }, + }), + ) + }) + + it('emits "updateIsAdmin"', () => { + expect(wrapper.emitted('updateIsAdmin')).toEqual( + expect.arrayContaining([ + expect.arrayContaining([ + { + userId: 1, + isAdmin: date, + }, + ]), + ]), + ) + }) + + it('toasts success message', () => { + expect(toastSuccessSpy).toBeCalledWith('userRole.successfullyChangedTo') + }) + }) + }) }) describe('user is admin', () => { - beforeEach(async () => { - await wrapper.setProps({ + beforeEach(() => { + apolloMutateMock.mockResolvedValue({ + data: { + setUserRole: null, + }, + }) + propsData = { item: { userId: 1, isAdmin: date, }, - }) - await wrapper.vm.$nextTick() + } + wrapper = Wrapper() + rolesToSelect = wrapper.find('select.role-select').findAll('option') }) - it.only('select is set to "admin"', () => { - // expect(wrapper.find('option:checked').element.value).toBe('admin') + it('select is set to "admin"', () => { expect(wrapper.find('select.role-select').element.value).toBe('admin') }) + + describe('change select to', () => { + describe('same role', () => { + it('not calling the API', () => { + rolesToSelect.at(1).setSelected() + expect(apolloMutateMock).not.toHaveBeenCalled() + }) + }) + + describe('new role', () => { + beforeEach(() => { + rolesToSelect.at(0).setSelected() + }) + + it('calls the API', () => { + expect(apolloMutateMock).toBeCalledWith( + expect.objectContaining({ + mutation: setUserRole, + variables: { + userId: 1, + isAdmin: false, + }, + }), + ) + }) + + it('emits "updateIsAdmin"', () => { + expect(wrapper.emitted('updateIsAdmin')).toEqual( + expect.arrayContaining([ + expect.arrayContaining([ + { + userId: 1, + isAdmin: null, + }, + ]), + ]), + ) + }) + + it('toasts success message', () => { + expect(toastSuccessSpy).toBeCalledWith('userRole.successfullyChangedTo') + }) + }) + }) }) - - // Wolle - // describe('click on select', () => { - // beforeEach(async () => { - // await wrapper.find('input[type="checkbox"]').setChecked() - // }) - - // it('has a confirmation button', () => { - // expect(wrapper.find('button').exists()).toBeTruthy() - // }) - - // it('has the button text "delete_user"', () => { - // expect(wrapper.find('button').text()).toBe('delete_user') - // }) - - // describe('confirm delete with success', () => { - // beforeEach(async () => { - // await wrapper.find('button').trigger('click') - // }) - - // it('calls the API', () => { - // expect(apolloMutateMock).toBeCalledWith( - // expect.objectContaining({ - // mutation: setUserRole, - // variables: { - // userId: 1, - // }, - // }), - // ) - // }) - - // it('emits update deleted At', () => { - // expect(wrapper.emitted('updateDeletedAt')).toEqual( - // expect.arrayContaining([ - // expect.arrayContaining([ - // { - // userId: 1, - // isAdmin: date, - // }, - // ]), - // ]), - // ) - // }) - - // it('unchecks the checkbox', () => { - // expect(wrapper.find('input').attributes('checked')).toBe(undefined) - // }) - // }) - - // describe('confirm delete with error', () => { - // beforeEach(async () => { - // apolloMutateMock.mockRejectedValue({ message: 'Oh no!' }) - // await wrapper.find('button').trigger('click') - // }) - - // it('toasts an error message', () => { - // expect(toastErrorSpy).toBeCalledWith('Oh no!') - // }) - // }) - - // describe('click on checkbox again', () => { - // beforeEach(async () => { - // await wrapper.find('input[type="checkbox"]').setChecked(false) - // }) - - // it('has no confirmation button anymore', () => { - // expect(wrapper.find('button').exists()).toBeFalsy() - // }) - // }) - // }) }) - - // Wolle - // describe.skip('recover user', () => { - // beforeEach(() => { - // wrapper.setProps({ - // item: { - // userId: 1, - // isAdmin: date, - // }, - // }) - // }) - - // it('has a checkbox', () => { - // expect(wrapper.find('input[type="checkbox"]').exists()).toBeTruthy() - // }) - - // it('shows the text "undelete_user"', () => { - // expect(wrapper.text()).toBe('undelete_user') - // }) - - // describe('click on checkbox', () => { - // beforeEach(async () => { - // apolloMutateMock.mockResolvedValue({ - // data: { - // unDeleteUser: null, - // }, - // }) - // await wrapper.find('input[type="checkbox"]').setChecked() - // }) - - // it('has a confirmation button', () => { - // expect(wrapper.find('button').exists()).toBeTruthy() - // }) - - // it('has the button text "undelete_user"', () => { - // expect(wrapper.find('button').text()).toBe('undelete_user') - // }) - - // describe('confirm recover with success', () => { - // beforeEach(async () => { - // await wrapper.find('button').trigger('click') - // }) - - // it('calls the API', () => { - // expect(apolloMutateMock).toBeCalledWith( - // expect.objectContaining({ - // mutation: unDeleteUser, - // variables: { - // userId: 1, - // }, - // }), - // ) - // }) - - // it('emits update deleted At', () => { - // expect(wrapper.emitted('updateDeletedAt')).toEqual( - // expect.arrayContaining([ - // expect.arrayContaining([ - // { - // userId: 1, - // isAdmin: null, - // }, - // ]), - // ]), - // ) - // }) - - // it('unchecks the checkbox', () => { - // expect(wrapper.find('input').attributes('checked')).toBe(undefined) - // }) - // }) - - // describe('confirm recover with error', () => { - // beforeEach(async () => { - // apolloMutateMock.mockRejectedValue({ message: 'Oh no!' }) - // await wrapper.find('button').trigger('click') - // }) - - // it('toasts an error message', () => { - // expect(toastErrorSpy).toBeCalledWith('Oh no!') - // }) - // }) - - // describe('click on checkbox again', () => { - // beforeEach(async () => { - // await wrapper.find('input[type="checkbox"]').setChecked(false) - // }) - - // it('has no confirmation button anymore', () => { - // expect(wrapper.find('button').exists()).toBeFalsy() - // }) - // }) - // }) - // }) }) })