summaryrefslogtreecommitdiff
path: root/spec/frontend/crm
diff options
context:
space:
mode:
Diffstat (limited to 'spec/frontend/crm')
-rw-r--r--spec/frontend/crm/contact_form_spec.js157
-rw-r--r--spec/frontend/crm/contact_form_wrapper_spec.js88
-rw-r--r--spec/frontend/crm/contacts_root_spec.js77
-rw-r--r--spec/frontend/crm/form_spec.js51
-rw-r--r--spec/frontend/crm/mock_data.js25
-rw-r--r--spec/frontend/crm/new_organization_form_spec.js109
-rw-r--r--spec/frontend/crm/organization_form_wrapper_spec.js88
-rw-r--r--spec/frontend/crm/organizations_root_spec.js51
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();
View Lorry Controller Status