diff options
Diffstat (limited to 'spec/frontend/crm')
-rw-r--r-- | spec/frontend/crm/contact_form_spec.js | 157 | ||||
-rw-r--r-- | spec/frontend/crm/contact_form_wrapper_spec.js | 88 | ||||
-rw-r--r-- | spec/frontend/crm/contacts_root_spec.js | 77 | ||||
-rw-r--r-- | spec/frontend/crm/form_spec.js | 51 | ||||
-rw-r--r-- | spec/frontend/crm/mock_data.js | 25 | ||||
-rw-r--r-- | spec/frontend/crm/new_organization_form_spec.js | 109 | ||||
-rw-r--r-- | spec/frontend/crm/organization_form_wrapper_spec.js | 88 | ||||
-rw-r--r-- | spec/frontend/crm/organizations_root_spec.js | 51 |
8 files changed, 236 insertions, 410 deletions
diff --git a/spec/frontend/crm/contact_form_spec.js b/spec/frontend/crm/contact_form_spec.js deleted file mode 100644 index 0edab4f5ec5..00000000000 --- a/spec/frontend/crm/contact_form_spec.js +++ /dev/null @@ -1,157 +0,0 @@ -import { GlAlert } from '@gitlab/ui'; -import Vue from 'vue'; -import VueApollo from 'vue-apollo'; -import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; -import createMockApollo from 'helpers/mock_apollo_helper'; -import waitForPromises from 'helpers/wait_for_promises'; -import ContactForm from '~/crm/components/contact_form.vue'; -import createContactMutation from '~/crm/components/queries/create_contact.mutation.graphql'; -import updateContactMutation from '~/crm/components/queries/update_contact.mutation.graphql'; -import getGroupContactsQuery from '~/crm/components/queries/get_group_contacts.query.graphql'; -import { - createContactMutationErrorResponse, - createContactMutationResponse, - getGroupContactsQueryResponse, - updateContactMutationErrorResponse, - updateContactMutationResponse, -} from './mock_data'; - -describe('Customer relations contact form component', () => { - Vue.use(VueApollo); - let wrapper; - let fakeApollo; - let mutation; - let queryHandler; - - const findSaveContactButton = () => wrapper.findByTestId('save-contact-button'); - const findCancelButton = () => wrapper.findByTestId('cancel-button'); - const findForm = () => wrapper.find('form'); - const findError = () => wrapper.findComponent(GlAlert); - - const mountComponent = ({ mountFunction = shallowMountExtended, editForm = false } = {}) => { - fakeApollo = createMockApollo([[mutation, queryHandler]]); - fakeApollo.clients.defaultClient.cache.writeQuery({ - query: getGroupContactsQuery, - variables: { groupFullPath: 'flightjs' }, - data: getGroupContactsQueryResponse.data, - }); - const propsData = { drawerOpen: true }; - if (editForm) - propsData.contact = { firstName: 'First', lastName: 'Last', email: 'email@example.com' }; - wrapper = mountFunction(ContactForm, { - provide: { groupId: 26, groupFullPath: 'flightjs' }, - apolloProvider: fakeApollo, - propsData, - }); - }; - - beforeEach(() => { - mutation = createContactMutation; - queryHandler = jest.fn().mockResolvedValue(createContactMutationResponse); - }); - - afterEach(() => { - wrapper.destroy(); - fakeApollo = null; - }); - - describe('Save contact button', () => { - it('should be disabled when required fields are empty', () => { - mountComponent(); - - expect(findSaveContactButton().props('disabled')).toBe(true); - }); - - it('should not be disabled when required fields have values', async () => { - mountComponent(); - - wrapper.find('#contact-first-name').vm.$emit('input', 'A'); - wrapper.find('#contact-last-name').vm.$emit('input', 'B'); - wrapper.find('#contact-email').vm.$emit('input', 'C'); - await waitForPromises(); - - expect(findSaveContactButton().props('disabled')).toBe(false); - }); - }); - - it("should emit 'close' when cancel button is clicked", () => { - mountComponent(); - - findCancelButton().vm.$emit('click'); - - expect(wrapper.emitted().close).toBeTruthy(); - }); - - describe('when create mutation is successful', () => { - it("should emit 'close'", async () => { - mountComponent(); - - findForm().trigger('submit'); - await waitForPromises(); - - expect(wrapper.emitted().close).toBeTruthy(); - }); - }); - - describe('when create mutation fails', () => { - it('should show error on reject', async () => { - queryHandler = jest.fn().mockRejectedValue('ERROR'); - mountComponent(); - - findForm().trigger('submit'); - await waitForPromises(); - - expect(findError().exists()).toBe(true); - }); - - it('should show error on error response', async () => { - queryHandler = jest.fn().mockResolvedValue(createContactMutationErrorResponse); - mountComponent(); - - findForm().trigger('submit'); - await waitForPromises(); - - expect(findError().exists()).toBe(true); - expect(findError().text()).toBe('create contact is invalid.'); - }); - }); - - describe('when update mutation is successful', () => { - it("should emit 'close'", async () => { - mutation = updateContactMutation; - queryHandler = jest.fn().mockResolvedValue(updateContactMutationResponse); - mountComponent({ editForm: true }); - - findForm().trigger('submit'); - await waitForPromises(); - - expect(wrapper.emitted().close).toBeTruthy(); - }); - }); - - describe('when update mutation fails', () => { - beforeEach(() => { - mutation = updateContactMutation; - }); - - it('should show error on reject', async () => { - queryHandler = jest.fn().mockRejectedValue('ERROR'); - mountComponent({ editForm: true }); - findForm().trigger('submit'); - await waitForPromises(); - - expect(findError().exists()).toBe(true); - }); - - it('should show error on error response', async () => { - queryHandler = jest.fn().mockResolvedValue(updateContactMutationErrorResponse); - mountComponent({ editForm: true }); - - findForm().trigger('submit'); - await waitForPromises(); - - expect(findError().exists()).toBe(true); - expect(findError().text()).toBe('update contact is invalid.'); - }); - }); -}); diff --git a/spec/frontend/crm/contact_form_wrapper_spec.js b/spec/frontend/crm/contact_form_wrapper_spec.js new file mode 100644 index 00000000000..6307889a7aa --- /dev/null +++ b/spec/frontend/crm/contact_form_wrapper_spec.js @@ -0,0 +1,88 @@ +import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; +import ContactFormWrapper from '~/crm/contacts/components/contact_form_wrapper.vue'; +import ContactForm from '~/crm/components/form.vue'; +import getGroupContactsQuery from '~/crm/contacts/components/graphql/get_group_contacts.query.graphql'; +import createContactMutation from '~/crm/contacts/components/graphql/create_contact.mutation.graphql'; +import updateContactMutation from '~/crm/contacts/components/graphql/update_contact.mutation.graphql'; + +describe('Customer relations contact form wrapper', () => { + let wrapper; + + const findContactForm = () => wrapper.findComponent(ContactForm); + + const $apollo = { + queries: { + contacts: { + loading: false, + }, + }, + }; + const $route = { + params: { + id: 7, + }, + }; + const contacts = [{ id: 'gid://gitlab/CustomerRelations::Contact/7' }]; + + const mountComponent = ({ isEditMode = false } = {}) => { + wrapper = shallowMountExtended(ContactFormWrapper, { + propsData: { + isEditMode, + }, + provide: { + groupFullPath: 'flightjs', + groupId: 26, + }, + mocks: { + $apollo, + $route, + }, + }); + }; + + afterEach(() => { + wrapper.destroy(); + }); + + describe('in edit mode', () => { + it('should render contact form with correct props', () => { + mountComponent({ isEditMode: true }); + + const contactForm = findContactForm(); + expect(contactForm.props('fields')).toHaveLength(5); + expect(contactForm.props('title')).toBe('Edit contact'); + expect(contactForm.props('successMessage')).toBe('Contact has been updated.'); + expect(contactForm.props('mutation')).toBe(updateContactMutation); + expect(contactForm.props('getQuery')).toMatchObject({ + query: getGroupContactsQuery, + variables: { groupFullPath: 'flightjs' }, + }); + expect(contactForm.props('getQueryNodePath')).toBe('group.contacts'); + expect(contactForm.props('existingId')).toBe(contacts[0].id); + expect(contactForm.props('additionalCreateParams')).toMatchObject({ + groupId: 'gid://gitlab/Group/26', + }); + }); + }); + + describe('in create mode', () => { + it('should render contact form with correct props', () => { + mountComponent(); + + const contactForm = findContactForm(); + expect(contactForm.props('fields')).toHaveLength(5); + expect(contactForm.props('title')).toBe('New contact'); + expect(contactForm.props('successMessage')).toBe('Contact has been added.'); + expect(contactForm.props('mutation')).toBe(createContactMutation); + expect(contactForm.props('getQuery')).toMatchObject({ + query: getGroupContactsQuery, + variables: { groupFullPath: 'flightjs' }, + }); + expect(contactForm.props('getQueryNodePath')).toBe('group.contacts'); + expect(contactForm.props('existingId')).toBeNull(); + expect(contactForm.props('additionalCreateParams')).toMatchObject({ + groupId: 'gid://gitlab/Group/26', + }); + }); + }); +}); diff --git a/spec/frontend/crm/contacts_root_spec.js b/spec/frontend/crm/contacts_root_spec.js index b30349305a3..b02d94e9cb1 100644 --- a/spec/frontend/crm/contacts_root_spec.js +++ b/spec/frontend/crm/contacts_root_spec.js @@ -5,11 +5,9 @@ import VueRouter from 'vue-router'; import { mountExtended, shallowMountExtended } from 'helpers/vue_test_utils_helper'; import createMockApollo from 'helpers/mock_apollo_helper'; import waitForPromises from 'helpers/wait_for_promises'; -import ContactsRoot from '~/crm/components/contacts_root.vue'; -import ContactForm from '~/crm/components/contact_form.vue'; -import getGroupContactsQuery from '~/crm/components/queries/get_group_contacts.query.graphql'; -import { NEW_ROUTE_NAME, EDIT_ROUTE_NAME } from '~/crm/constants'; -import routes from '~/crm/routes'; +import ContactsRoot from '~/crm/contacts/components/contacts_root.vue'; +import getGroupContactsQuery from '~/crm/contacts/components/graphql/get_group_contacts.query.graphql'; +import routes from '~/crm/contacts/routes'; import { getGroupContactsQueryResponse } from './mock_data'; describe('Customer relations contacts root app', () => { @@ -23,8 +21,6 @@ describe('Customer relations contacts root app', () => { const findRowByName = (rowName) => wrapper.findAllByRole('row', { name: rowName }); const findIssuesLinks = () => wrapper.findAllByTestId('issues-link'); const findNewContactButton = () => wrapper.findByTestId('new-contact-button'); - const findEditContactButton = () => wrapper.findByTestId('edit-contact-button'); - const findContactForm = () => wrapper.findComponent(ContactForm); const findError = () => wrapper.findComponent(GlAlert); const successQueryHandler = jest.fn().mockResolvedValue(getGroupContactsQueryResponse); @@ -40,8 +36,8 @@ describe('Customer relations contacts root app', () => { router, provide: { groupFullPath: 'flightjs', - groupIssuesPath: '/issues', groupId: 26, + groupIssuesPath: '/issues', canAdminCrmContact, }, apolloProvider: fakeApollo, @@ -82,71 +78,6 @@ describe('Customer relations contacts root app', () => { }); }); - describe('contact form', () => { - it('should not exist by default', async () => { - mountComponent(); - await waitForPromises(); - - expect(findContactForm().exists()).toBe(false); - }); - - it('should exist when user clicks new contact button', async () => { - mountComponent(); - - findNewContactButton().vm.$emit('click'); - await waitForPromises(); - - expect(findContactForm().exists()).toBe(true); - }); - - it('should exist when user navigates directly to `new` route', async () => { - router.replace({ name: NEW_ROUTE_NAME }); - mountComponent(); - await waitForPromises(); - - expect(findContactForm().exists()).toBe(true); - }); - - it('should exist when user clicks edit contact button', async () => { - mountComponent({ mountFunction: mountExtended }); - await waitForPromises(); - - findEditContactButton().vm.$emit('click'); - await waitForPromises(); - - expect(findContactForm().exists()).toBe(true); - }); - - it('should exist when user navigates directly to `edit` route', async () => { - router.replace({ name: EDIT_ROUTE_NAME, params: { id: 16 } }); - mountComponent(); - await waitForPromises(); - - expect(findContactForm().exists()).toBe(true); - }); - - it('should not exist when new form emits close', async () => { - router.replace({ name: NEW_ROUTE_NAME }); - mountComponent(); - - findContactForm().vm.$emit('close'); - await waitForPromises(); - - expect(findContactForm().exists()).toBe(false); - }); - - it('should not exist when edit form emits close', async () => { - router.replace({ name: EDIT_ROUTE_NAME, params: { id: 16 } }); - mountComponent(); - await waitForPromises(); - - findContactForm().vm.$emit('close'); - await waitForPromises(); - - expect(findContactForm().exists()).toBe(false); - }); - }); - describe('error', () => { it('should exist on reject', async () => { mountComponent({ queryHandler: jest.fn().mockRejectedValue('ERROR') }); diff --git a/spec/frontend/crm/form_spec.js b/spec/frontend/crm/form_spec.js index 0e3abc05c37..5c349b24ea1 100644 --- a/spec/frontend/crm/form_spec.js +++ b/spec/frontend/crm/form_spec.js @@ -6,12 +6,12 @@ import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; import createMockApollo from 'helpers/mock_apollo_helper'; import waitForPromises from 'helpers/wait_for_promises'; import Form from '~/crm/components/form.vue'; -import routes from '~/crm/routes'; -import createContactMutation from '~/crm/components/queries/create_contact.mutation.graphql'; -import updateContactMutation from '~/crm/components/queries/update_contact.mutation.graphql'; -import getGroupContactsQuery from '~/crm/components/queries/get_group_contacts.query.graphql'; -import createOrganizationMutation from '~/crm/components/queries/create_organization.mutation.graphql'; -import getGroupOrganizationsQuery from '~/crm/components/queries/get_group_organizations.query.graphql'; +import routes from '~/crm/contacts/routes'; +import createContactMutation from '~/crm/contacts/components/graphql/create_contact.mutation.graphql'; +import updateContactMutation from '~/crm/contacts/components/graphql/update_contact.mutation.graphql'; +import getGroupContactsQuery from '~/crm/contacts/components/graphql/get_group_contacts.query.graphql'; +import createOrganizationMutation from '~/crm/organizations/components/graphql/create_organization.mutation.graphql'; +import getGroupOrganizationsQuery from '~/crm/organizations/components/graphql/get_group_organizations.query.graphql'; import { createContactMutationErrorResponse, createContactMutationResponse, @@ -101,6 +101,11 @@ describe('Reusable form component', () => { { name: 'phone', label: 'Phone' }, { name: 'description', label: 'Description' }, ], + getQuery: { + query: getGroupContactsQuery, + variables: { groupFullPath: 'flightjs' }, + }, + getQueryNodePath: 'group.contacts', ...propsData, }); }; @@ -108,13 +113,8 @@ describe('Reusable form component', () => { const mountContactCreate = () => { const propsData = { title: 'New contact', - successMessage: 'Contact has been added', + successMessage: 'Contact has been added.', buttonLabel: 'Create contact', - getQuery: { - query: getGroupContactsQuery, - variables: { groupFullPath: 'flightjs' }, - }, - getQueryNodePath: 'group.contacts', mutation: createContactMutation, additionalCreateParams: { groupId: 'gid://gitlab/Group/26' }, }; @@ -124,14 +124,9 @@ describe('Reusable form component', () => { const mountContactUpdate = () => { const propsData = { title: 'Edit contact', - successMessage: 'Contact has been updated', + successMessage: 'Contact has been updated.', mutation: updateContactMutation, - existingModel: { - id: 'gid://gitlab/CustomerRelations::Contact/12', - firstName: 'First', - lastName: 'Last', - email: 'email@example.com', - }, + existingId: 'gid://gitlab/CustomerRelations::Contact/12', }; mountContact({ propsData }); }; @@ -143,6 +138,11 @@ describe('Reusable form component', () => { { name: 'defaultRate', label: 'Default rate', input: { type: 'number', step: '0.01' } }, { name: 'description', label: 'Description' }, ], + getQuery: { + query: getGroupOrganizationsQuery, + variables: { groupFullPath: 'flightjs' }, + }, + getQueryNodePath: 'group.organizations', ...propsData, }); }; @@ -150,13 +150,8 @@ describe('Reusable form component', () => { const mountOrganizationCreate = () => { const propsData = { title: 'New organization', - successMessage: 'Organization has been added', + successMessage: 'Organization has been added.', buttonLabel: 'Create organization', - getQuery: { - query: getGroupOrganizationsQuery, - variables: { groupFullPath: 'flightjs' }, - }, - getQueryNodePath: 'group.organizations', mutation: createOrganizationMutation, additionalCreateParams: { groupId: 'gid://gitlab/Group/26' }, }; @@ -167,17 +162,17 @@ describe('Reusable form component', () => { [FORM_CREATE_CONTACT]: { mountFunction: mountContactCreate, mutationErrorResponse: createContactMutationErrorResponse, - toastMessage: 'Contact has been added', + toastMessage: 'Contact has been added.', }, [FORM_UPDATE_CONTACT]: { mountFunction: mountContactUpdate, mutationErrorResponse: updateContactMutationErrorResponse, - toastMessage: 'Contact has been updated', + toastMessage: 'Contact has been updated.', }, [FORM_CREATE_ORG]: { mountFunction: mountOrganizationCreate, mutationErrorResponse: createOrganizationMutationErrorResponse, - toastMessage: 'Organization has been added', + toastMessage: 'Organization has been added.', }, }; const asTestParams = (...keys) => keys.map((name) => [name, forms[name]]); diff --git a/spec/frontend/crm/mock_data.js b/spec/frontend/crm/mock_data.js index e351e101b29..35bc7fb69b4 100644 --- a/spec/frontend/crm/mock_data.js +++ b/spec/frontend/crm/mock_data.js @@ -157,3 +157,28 @@ export const createOrganizationMutationErrorResponse = { }, }, }; + +export const updateOrganizationMutationResponse = { + data: { + customerRelationsOrganizationUpdate: { + __typeName: 'CustomerRelationsOrganizationUpdatePayload', + organization: { + __typename: 'CustomerRelationsOrganization', + id: 'gid://gitlab/CustomerRelations::Organization/2', + name: 'A', + defaultRate: null, + description: null, + }, + errors: [], + }, + }, +}; + +export const updateOrganizationMutationErrorResponse = { + data: { + customerRelationsOrganizationUpdate: { + organization: null, + errors: ['Description is invalid.'], + }, + }, +}; diff --git a/spec/frontend/crm/new_organization_form_spec.js b/spec/frontend/crm/new_organization_form_spec.js deleted file mode 100644 index 0a7909774c9..00000000000 --- a/spec/frontend/crm/new_organization_form_spec.js +++ /dev/null @@ -1,109 +0,0 @@ -import { GlAlert } from '@gitlab/ui'; -import Vue from 'vue'; -import VueApollo from 'vue-apollo'; -import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; -import createMockApollo from 'helpers/mock_apollo_helper'; -import waitForPromises from 'helpers/wait_for_promises'; -import NewOrganizationForm from '~/crm/components/new_organization_form.vue'; -import createOrganizationMutation from '~/crm/components/queries/create_organization.mutation.graphql'; -import getGroupOrganizationsQuery from '~/crm/components/queries/get_group_organizations.query.graphql'; -import { - createOrganizationMutationErrorResponse, - createOrganizationMutationResponse, - getGroupOrganizationsQueryResponse, -} from './mock_data'; - -describe('Customer relations organizations root app', () => { - Vue.use(VueApollo); - let wrapper; - let fakeApollo; - let queryHandler; - - const findCreateNewOrganizationButton = () => - wrapper.findByTestId('create-new-organization-button'); - const findCancelButton = () => wrapper.findByTestId('cancel-button'); - const findForm = () => wrapper.find('form'); - const findError = () => wrapper.findComponent(GlAlert); - - const mountComponent = () => { - fakeApollo = createMockApollo([[createOrganizationMutation, queryHandler]]); - fakeApollo.clients.defaultClient.cache.writeQuery({ - query: getGroupOrganizationsQuery, - variables: { groupFullPath: 'flightjs' }, - data: getGroupOrganizationsQueryResponse.data, - }); - wrapper = shallowMountExtended(NewOrganizationForm, { - provide: { groupId: 26, groupFullPath: 'flightjs' }, - apolloProvider: fakeApollo, - propsData: { drawerOpen: true }, - }); - }; - - beforeEach(() => { - queryHandler = jest.fn().mockResolvedValue(createOrganizationMutationResponse); - }); - - afterEach(() => { - wrapper.destroy(); - fakeApollo = null; - }); - - describe('Create new organization button', () => { - it('should be disabled by default', () => { - mountComponent(); - - expect(findCreateNewOrganizationButton().attributes('disabled')).toBeTruthy(); - }); - - it('should not be disabled when first, last and email have values', async () => { - mountComponent(); - - wrapper.find('#organization-name').vm.$emit('input', 'A'); - await waitForPromises(); - - expect(findCreateNewOrganizationButton().attributes('disabled')).toBeFalsy(); - }); - }); - - it("should emit 'close' when cancel button is clicked", () => { - mountComponent(); - - findCancelButton().vm.$emit('click'); - - expect(wrapper.emitted().close).toBeTruthy(); - }); - - describe('when query is successful', () => { - it("should emit 'close'", async () => { - mountComponent(); - - findForm().trigger('submit'); - await waitForPromises(); - - expect(wrapper.emitted().close).toBeTruthy(); - }); - }); - - describe('when query fails', () => { - it('should show error on reject', async () => { - queryHandler = jest.fn().mockRejectedValue('ERROR'); - mountComponent(); - - findForm().trigger('submit'); - await waitForPromises(); - - expect(findError().exists()).toBe(true); - }); - - it('should show error on error response', async () => { - queryHandler = jest.fn().mockResolvedValue(createOrganizationMutationErrorResponse); - mountComponent(); - - findForm().trigger('submit'); - await waitForPromises(); - - expect(findError().exists()).toBe(true); - expect(findError().text()).toBe('create organization is invalid.'); - }); - }); -}); diff --git a/spec/frontend/crm/organization_form_wrapper_spec.js b/spec/frontend/crm/organization_form_wrapper_spec.js new file mode 100644 index 00000000000..1a5a7c6ca5d --- /dev/null +++ b/spec/frontend/crm/organization_form_wrapper_spec.js @@ -0,0 +1,88 @@ +import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; +import OrganizationFormWrapper from '~/crm/organizations/components/organization_form_wrapper.vue'; +import OrganizationForm from '~/crm/components/form.vue'; +import getGroupOrganizationsQuery from '~/crm/organizations/components/graphql/get_group_organizations.query.graphql'; +import createOrganizationMutation from '~/crm/organizations/components/graphql/create_organization.mutation.graphql'; +import updateOrganizationMutation from '~/crm/organizations/components/graphql/update_organization.mutation.graphql'; + +describe('Customer relations organization form wrapper', () => { + let wrapper; + + const findOrganizationForm = () => wrapper.findComponent(OrganizationForm); + + const $apollo = { + queries: { + organizations: { + loading: false, + }, + }, + }; + const $route = { + params: { + id: 7, + }, + }; + const organizations = [{ id: 'gid://gitlab/CustomerRelations::Organization/7' }]; + + const mountComponent = ({ isEditMode = false } = {}) => { + wrapper = shallowMountExtended(OrganizationFormWrapper, { + propsData: { + isEditMode, + }, + provide: { + groupFullPath: 'flightjs', + groupId: 26, + }, + mocks: { + $apollo, + $route, + }, + }); + }; + + afterEach(() => { + wrapper.destroy(); + }); + + describe('in edit mode', () => { + it('should render organization form with correct props', () => { + mountComponent({ isEditMode: true }); + + const organizationForm = findOrganizationForm(); + expect(organizationForm.props('fields')).toHaveLength(3); + expect(organizationForm.props('title')).toBe('Edit organization'); + expect(organizationForm.props('successMessage')).toBe('Organization has been updated.'); + expect(organizationForm.props('mutation')).toBe(updateOrganizationMutation); + expect(organizationForm.props('getQuery')).toMatchObject({ + query: getGroupOrganizationsQuery, + variables: { groupFullPath: 'flightjs' }, + }); + expect(organizationForm.props('getQueryNodePath')).toBe('group.organizations'); + expect(organizationForm.props('existingId')).toBe(organizations[0].id); + expect(organizationForm.props('additionalCreateParams')).toMatchObject({ + groupId: 'gid://gitlab/Group/26', + }); + }); + }); + + describe('in create mode', () => { + it('should render organization form with correct props', () => { + mountComponent(); + + const organizationForm = findOrganizationForm(); + expect(organizationForm.props('fields')).toHaveLength(3); + expect(organizationForm.props('title')).toBe('New organization'); + expect(organizationForm.props('successMessage')).toBe('Organization has been added.'); + expect(organizationForm.props('mutation')).toBe(createOrganizationMutation); + expect(organizationForm.props('getQuery')).toMatchObject({ + query: getGroupOrganizationsQuery, + variables: { groupFullPath: 'flightjs' }, + }); + expect(organizationForm.props('getQueryNodePath')).toBe('group.organizations'); + expect(organizationForm.props('existingId')).toBeNull(); + expect(organizationForm.props('additionalCreateParams')).toMatchObject({ + groupId: 'gid://gitlab/Group/26', + }); + }); + }); +}); diff --git a/spec/frontend/crm/organizations_root_spec.js b/spec/frontend/crm/organizations_root_spec.js index aef417964f4..231208d938e 100644 --- a/spec/frontend/crm/organizations_root_spec.js +++ b/spec/frontend/crm/organizations_root_spec.js @@ -5,11 +5,9 @@ import VueRouter from 'vue-router'; import { mountExtended, shallowMountExtended } from 'helpers/vue_test_utils_helper'; import createMockApollo from 'helpers/mock_apollo_helper'; import waitForPromises from 'helpers/wait_for_promises'; -import OrganizationsRoot from '~/crm/components/organizations_root.vue'; -import NewOrganizationForm from '~/crm/components/new_organization_form.vue'; -import { NEW_ROUTE_NAME } from '~/crm/constants'; -import routes from '~/crm/routes'; -import getGroupOrganizationsQuery from '~/crm/components/queries/get_group_organizations.query.graphql'; +import OrganizationsRoot from '~/crm/organizations/components/organizations_root.vue'; +import routes from '~/crm/organizations/routes'; +import getGroupOrganizationsQuery from '~/crm/organizations/components/graphql/get_group_organizations.query.graphql'; import { getGroupOrganizationsQueryResponse } from './mock_data'; describe('Customer relations organizations root app', () => { @@ -23,7 +21,6 @@ describe('Customer relations organizations root app', () => { const findRowByName = (rowName) => wrapper.findAllByRole('row', { name: rowName }); const findIssuesLinks = () => wrapper.findAllByTestId('issues-link'); const findNewOrganizationButton = () => wrapper.findByTestId('new-organization-button'); - const findNewOrganizationForm = () => wrapper.findComponent(NewOrganizationForm); const findError = () => wrapper.findComponent(GlAlert); const successQueryHandler = jest.fn().mockResolvedValue(getGroupOrganizationsQueryResponse); @@ -37,7 +34,11 @@ describe('Customer relations organizations root app', () => { fakeApollo = createMockApollo([[getGroupOrganizationsQuery, queryHandler]]); wrapper = mountFunction(OrganizationsRoot, { router, - provide: { canAdminCrmOrganization, groupFullPath: 'flightjs', groupIssuesPath: '/issues' }, + provide: { + canAdminCrmOrganization, + groupFullPath: 'flightjs', + groupIssuesPath: '/issues', + }, apolloProvider: fakeApollo, }); }; @@ -76,42 +77,6 @@ describe('Customer relations organizations root app', () => { }); }); - describe('new organization form', () => { - it('should not exist by default', async () => { - mountComponent(); - await waitForPromises(); - - expect(findNewOrganizationForm().exists()).toBe(false); - }); - - it('should exist when user clicks new contact button', async () => { - mountComponent(); - - findNewOrganizationButton().vm.$emit('click'); - await waitForPromises(); - - expect(findNewOrganizationForm().exists()).toBe(true); - }); - - it('should exist when user navigates directly to /new', async () => { - router.replace({ name: NEW_ROUTE_NAME }); - mountComponent(); - await waitForPromises(); - - expect(findNewOrganizationForm().exists()).toBe(true); - }); - - it('should not exist when form emits close', async () => { - router.replace({ name: NEW_ROUTE_NAME }); - mountComponent(); - - findNewOrganizationForm().vm.$emit('close'); - await waitForPromises(); - - expect(findNewOrganizationForm().exists()).toBe(false); - }); - }); - it('should render error message on reject', async () => { mountComponent({ queryHandler: jest.fn().mockRejectedValue('ERROR') }); await waitForPromises(); |