diff options
Diffstat (limited to 'spec/frontend/crm')
-rw-r--r-- | spec/frontend/crm/contact_form_wrapper_spec.js | 112 | ||||
-rw-r--r-- | spec/frontend/crm/contacts_root_spec.js | 2 | ||||
-rw-r--r-- | spec/frontend/crm/form_spec.js | 57 | ||||
-rw-r--r-- | spec/frontend/crm/organizations_root_spec.js | 4 |
4 files changed, 126 insertions, 49 deletions
diff --git a/spec/frontend/crm/contact_form_wrapper_spec.js b/spec/frontend/crm/contact_form_wrapper_spec.js index 6307889a7aa..5e1743701e4 100644 --- a/spec/frontend/crm/contact_form_wrapper_spec.js +++ b/spec/frontend/crm/contact_form_wrapper_spec.js @@ -1,22 +1,23 @@ +import Vue from 'vue'; +import VueApollo from 'vue-apollo'; import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; +import waitForPromises from 'helpers/wait_for_promises'; +import createMockApollo from 'helpers/mock_apollo_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'; +import getGroupOrganizationsQuery from '~/crm/organizations/components/graphql/get_group_organizations.query.graphql'; +import { getGroupContactsQueryResponse, getGroupOrganizationsQueryResponse } from './mock_data'; describe('Customer relations contact form wrapper', () => { + Vue.use(VueApollo); let wrapper; + let fakeApollo; const findContactForm = () => wrapper.findComponent(ContactForm); - const $apollo = { - queries: { - contacts: { - loading: false, - }, - }, - }; const $route = { params: { id: 7, @@ -33,56 +34,79 @@ describe('Customer relations contact form wrapper', () => { groupFullPath: 'flightjs', groupId: 26, }, - mocks: { - $apollo, - $route, - }, + apolloProvider: fakeApollo, + mocks: { $route }, }); }; + beforeEach(() => { + fakeApollo = createMockApollo([ + [getGroupContactsQuery, jest.fn().mockResolvedValue(getGroupContactsQueryResponse)], + [getGroupOrganizationsQuery, jest.fn().mockResolvedValue(getGroupOrganizationsQueryResponse)], + ]); + }); + afterEach(() => { wrapper.destroy(); + fakeApollo = null; }); - describe('in edit mode', () => { - it('should render contact form with correct props', () => { - mountComponent({ isEditMode: true }); + describe.each` + mode | title | successMessage | mutation | existingId + ${'edit'} | ${'Edit contact'} | ${'Contact has been updated.'} | ${updateContactMutation} | ${contacts[0].id} + ${'create'} | ${'New contact'} | ${'Contact has been added.'} | ${createContactMutation} | ${null} + `('in $mode mode', ({ mode, title, successMessage, mutation, existingId }) => { + beforeEach(() => { + const isEditMode = mode === 'edit'; + mountComponent({ isEditMode }); - 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', - }); + return waitForPromises(); + }); + + it('renders correct getQuery prop', () => { + expect(findContactForm().props('getQueryNodePath')).toBe('group.contacts'); }); - }); - describe('in create mode', () => { - it('should render contact form with correct props', () => { - mountComponent(); + it('renders correct mutation prop', () => { + expect(findContactForm().props('mutation')).toBe(mutation); + }); - 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({ + it('renders correct additionalCreateParams prop', () => { + expect(findContactForm().props('additionalCreateParams')).toMatchObject({ groupId: 'gid://gitlab/Group/26', }); }); + + it('renders correct existingId prop', () => { + expect(findContactForm().props('existingId')).toBe(existingId); + }); + + it('renders correct fields prop', () => { + expect(findContactForm().props('fields')).toEqual([ + { name: 'firstName', label: 'First name', required: true }, + { name: 'lastName', label: 'Last name', required: true }, + { name: 'email', label: 'Email', required: true }, + { name: 'phone', label: 'Phone' }, + { + name: 'organizationId', + label: 'Organization', + values: [ + { text: 'No organization', value: null }, + { text: 'ABC Company', value: 'gid://gitlab/CustomerRelations::Organization/2' }, + { text: 'GitLab', value: 'gid://gitlab/CustomerRelations::Organization/3' }, + { text: 'Test Inc', value: 'gid://gitlab/CustomerRelations::Organization/1' }, + ], + }, + { name: 'description', label: 'Description' }, + ]); + }); + + it('renders correct title prop', () => { + expect(findContactForm().props('title')).toBe(title); + }); + + it('renders correct successMessage prop', () => { + expect(findContactForm().props('successMessage')).toBe(successMessage); + }); }); }); diff --git a/spec/frontend/crm/contacts_root_spec.js b/spec/frontend/crm/contacts_root_spec.js index b02d94e9cb1..3a6989a00f1 100644 --- a/spec/frontend/crm/contacts_root_spec.js +++ b/spec/frontend/crm/contacts_root_spec.js @@ -105,7 +105,7 @@ describe('Customer relations contacts root app', () => { const issueLink = findIssuesLinks().at(0); expect(issueLink.exists()).toBe(true); - expect(issueLink.attributes('href')).toBe('/issues?scope=all&state=opened&crm_contact_id=16'); + expect(issueLink.attributes('href')).toBe('/issues?crm_contact_id=16'); }); }); }); diff --git a/spec/frontend/crm/form_spec.js b/spec/frontend/crm/form_spec.js index 5c349b24ea1..d39f0795f5f 100644 --- a/spec/frontend/crm/form_spec.js +++ b/spec/frontend/crm/form_spec.js @@ -1,4 +1,4 @@ -import { GlAlert } from '@gitlab/ui'; +import { GlAlert, GlFormInput, GlFormSelect, GlFormGroup } from '@gitlab/ui'; import Vue from 'vue'; import VueApollo from 'vue-apollo'; import VueRouter from 'vue-router'; @@ -100,6 +100,14 @@ describe('Reusable form component', () => { { name: 'email', label: 'Email', required: true }, { name: 'phone', label: 'Phone' }, { name: 'description', label: 'Description' }, + { + name: 'organizationId', + label: 'Organization', + values: [ + { key: 'gid://gitlab/CustomerRelations::Organization/1', value: 'GitLab' }, + { key: 'gid://gitlab/CustomerRelations::Organization/2', value: 'ABC Corp' }, + ], + }, ], getQuery: { query: getGroupContactsQuery, @@ -270,4 +278,51 @@ describe('Reusable form component', () => { }); }, ); + + describe('edit form', () => { + beforeEach(() => { + mountContactUpdate(); + }); + + it.each` + index | id | componentName | value + ${0} | ${'firstName'} | ${'GlFormInput'} | ${'Marty'} + ${1} | ${'lastName'} | ${'GlFormInput'} | ${'McFly'} + ${2} | ${'email'} | ${'GlFormInput'} | ${'example@gitlab.com'} + ${4} | ${'description'} | ${'GlFormInput'} | ${undefined} + ${3} | ${'phone'} | ${'GlFormInput'} | ${undefined} + ${5} | ${'organizationId'} | ${'GlFormSelect'} | ${'gid://gitlab/CustomerRelations::Organization/2'} + `( + 'should render a $componentName for #$id with the value "$value"', + ({ index, id, componentName, value }) => { + const component = componentName === 'GlFormInput' ? GlFormInput : GlFormSelect; + const findFormGroup = (at) => wrapper.findAllComponents(GlFormGroup).at(at); + const findFormElement = () => findFormGroup(index).find(component); + + expect(findFormElement().attributes('id')).toBe(id); + expect(findFormElement().attributes('value')).toBe(value); + }, + ); + + it('should include updated values in update mutation', () => { + wrapper.find('#firstName').vm.$emit('input', 'Michael'); + wrapper + .find('#organizationId') + .vm.$emit('input', 'gid://gitlab/CustomerRelations::Organization/1'); + + findForm().trigger('submit'); + + expect(handler).toHaveBeenCalledWith('updateContact', { + input: { + description: null, + email: 'example@gitlab.com', + firstName: 'Michael', + id: 'gid://gitlab/CustomerRelations::Contact/12', + lastName: 'McFly', + organizationId: 'gid://gitlab/CustomerRelations::Organization/1', + phone: null, + }, + }); + }); + }); }); diff --git a/spec/frontend/crm/organizations_root_spec.js b/spec/frontend/crm/organizations_root_spec.js index 231208d938e..1780a5945a6 100644 --- a/spec/frontend/crm/organizations_root_spec.js +++ b/spec/frontend/crm/organizations_root_spec.js @@ -102,9 +102,7 @@ describe('Customer relations organizations root app', () => { const issueLink = findIssuesLinks().at(0); expect(issueLink.exists()).toBe(true); - expect(issueLink.attributes('href')).toBe( - '/issues?scope=all&state=opened&crm_organization_id=2', - ); + expect(issueLink.attributes('href')).toBe('/issues?crm_organization_id=2'); }); }); }); |