Add latest changes from gitlab-org/gitlab@master

3 files changed, 247 insertions, 19 deletions

diff --git a/spec/frontend/crm/contacts_root_spec.js b/spec/frontend/crm/contacts_root_spec.js
index fec1e924da3..c7410d13365 100644
--- a/spec/frontend/crm/contacts_root_spec.js
+++ b/spec/frontend/crm/contacts_root_spec.js
@@ -1,40 +1,62 @@
-import { GlLoadingIcon } from '@gitlab/ui';
+import { GlAlert, GlLoadingIcon } from '@gitlab/ui';
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
+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 createFlash from '~/flash';
 import ContactsRoot from '~/crm/components/contacts_root.vue';
+import NewContactForm from '~/crm/components/new_contact_form.vue';
 import getGroupContactsQuery from '~/crm/components/queries/get_group_contacts.query.graphql';
 import { getGroupContactsQueryResponse } from './mock_data';
 
-jest.mock('~/flash');
-
 describe('Customer relations contacts root app', () => {
   Vue.use(VueApollo);
+  Vue.use(VueRouter);
   let wrapper;
   let fakeApollo;
+  let router;
 
   const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
   const findRowByName = (rowName) => wrapper.findAllByRole('row', { name: rowName });
   const findIssuesLinks = () => wrapper.findAllByTestId('issues-link');
+  const findNewContactButton = () => wrapper.findByTestId('new-contact-button');
+  const findNewContactForm = () => wrapper.findComponent(NewContactForm);
+  const findError = () => wrapper.findComponent(GlAlert);
   const successQueryHandler = jest.fn().mockResolvedValue(getGroupContactsQueryResponse);
 
+  const basePath = '/groups/flightjs/-/crm/contacts';
+
   const mountComponent = ({
     queryHandler = successQueryHandler,
     mountFunction = shallowMountExtended,
+    canAdminCrmContact = true,
   } = {}) => {
     fakeApollo = createMockApollo([[getGroupContactsQuery, queryHandler]]);
     wrapper = mountFunction(ContactsRoot, {
-      provide: { groupFullPath: 'flightjs', groupIssuesPath: '/issues' },
+      router,
+      provide: {
+        groupFullPath: 'flightjs',
+        groupIssuesPath: '/issues',
+        groupId: 26,
+        canAdminCrmContact,
+      },
       apolloProvider: fakeApollo,
     });
   };
 
+  beforeEach(() => {
+    router = new VueRouter({
+      base: basePath,
+      mode: 'history',
+      routes: [],
+    });
+  });
+
   afterEach(() => {
     wrapper.destroy();
     fakeApollo = null;
+    router = null;
   });
 
   it('should render loading spinner', () => {
@@ -43,23 +65,94 @@ describe('Customer relations contacts root app', () => {
     expect(findLoadingIcon().exists()).toBe(true);
   });
 
-  it('should render error message on reject', async () => {
-    mountComponent({ queryHandler: jest.fn().mockRejectedValue('ERROR') });
-    await waitForPromises();
+  describe('new contact button', () => {
+    it('should exist when user has permission', () => {
+      mountComponent();
+
+      expect(findNewContactButton().exists()).toBe(true);
+    });
+
+    it('should not exist when user has no permission', () => {
+      mountComponent({ canAdminCrmContact: false });
+
+      expect(findNewContactButton().exists()).toBe(false);
+    });
+  });
+
+  describe('new contact form', () => {
+    it('should not exist by default', async () => {
+      mountComponent();
+      await waitForPromises();
+
+      expect(findNewContactForm().exists()).toBe(false);
+    });
+
+    it('should exist when user clicks new contact button', async () => {
+      mountComponent();
+
+      findNewContactButton().vm.$emit('click');
+      await waitForPromises();
+
+      expect(findNewContactForm().exists()).toBe(true);
+    });
+
+    it('should exist when user navigates directly to /new', async () => {
+      router.replace({ path: '/new' });
+      mountComponent();
+      await waitForPromises();
+
+      expect(findNewContactForm().exists()).toBe(true);
+    });
+
+    it('should not exist when form emits close', async () => {
+      router.replace({ path: '/new' });
+      mountComponent();
+
+      findNewContactForm().vm.$emit('close');
+      await waitForPromises();
+
+      expect(findNewContactForm().exists()).toBe(false);
+    });
+  });
+
+  describe('error', () => {
+    it('should exist on reject', async () => {
+      mountComponent({ queryHandler: jest.fn().mockRejectedValue('ERROR') });
+      await waitForPromises();
 
-    expect(createFlash).toHaveBeenCalled();
+      expect(findError().exists()).toBe(true);
+    });
+
+    it('should exist when new contact form emits error', async () => {
+      router.replace({ path: '/new' });
+      mountComponent();
+
+      findNewContactForm().vm.$emit('error');
+      await waitForPromises();
+
+      expect(findError().exists()).toBe(true);
+    });
   });
 
-  it('renders correct results', async () => {
-    mountComponent({ mountFunction: mountExtended });
-    await waitForPromises();
+  describe('on successful load', () => {
+    it('should not render error', async () => {
+      mountComponent();
+      await waitForPromises();
 
-    expect(findRowByName(/Marty/i)).toHaveLength(1);
-    expect(findRowByName(/George/i)).toHaveLength(1);
-    expect(findRowByName(/jd@gitlab.com/i)).toHaveLength(1);
+      expect(findError().exists()).toBe(false);
+    });
+
+    it('renders correct results', async () => {
+      mountComponent({ mountFunction: mountExtended });
+      await waitForPromises();
 
-    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(findRowByName(/Marty/i)).toHaveLength(1);
+      expect(findRowByName(/George/i)).toHaveLength(1);
+      expect(findRowByName(/jd@gitlab.com/i)).toHaveLength(1);
+
+      const issueLink = findIssuesLinks().at(0);
+      expect(issueLink.exists()).toBe(true);
+      expect(issueLink.attributes('href')).toBe('/issues?scope=all&state=opened&crm_contact_id=16');
+    });
   });
 });
diff --git a/spec/frontend/crm/mock_data.js b/spec/frontend/crm/mock_data.js
index 4197621aaa6..e784ac3764d 100644
--- a/spec/frontend/crm/mock_data.js
+++ b/spec/frontend/crm/mock_data.js
@@ -40,7 +40,6 @@ export const getGroupContactsQueryResponse = {
             organization: null,
           },
         ],
-        __typename: 'CustomerRelationsContactConnection',
       },
     },
   },
@@ -79,3 +78,31 @@ export const getGroupOrganizationsQueryResponse = {
     },
   },
 };
+
+export const createContactMutationResponse = {
+  data: {
+    customerRelationsContactCreate: {
+      __typeName: 'CustomerRelationsContactCreatePayload',
+      contact: {
+        __typename: 'CustomerRelationsContact',
+        id: 'gid://gitlab/CustomerRelations::Contact/1',
+        firstName: 'A',
+        lastName: 'B',
+        email: 'C',
+        phone: null,
+        description: null,
+        organization: null,
+      },
+      errors: [],
+    },
+  },
+};
+
+export const createContactMutationErrorResponse = {
+  data: {
+    customerRelationsContactCreate: {
+      contact: null,
+      errors: ['Phone is invalid.'],
+    },
+  },
+};
diff --git a/spec/frontend/crm/new_contact_form_spec.js b/spec/frontend/crm/new_contact_form_spec.js
new file mode 100644
index 00000000000..681c0539536
--- /dev/null
+++ b/spec/frontend/crm/new_contact_form_spec.js
@@ -0,0 +1,108 @@
+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 NewContactForm from '~/crm/components/new_contact_form.vue';
+import createContactMutation from '~/crm/components/queries/create_contact.mutation.graphql';
+import getGroupContactsQuery from '~/crm/components/queries/get_group_contacts.query.graphql';
+import {
+  createContactMutationErrorResponse,
+  createContactMutationResponse,
+  getGroupContactsQueryResponse,
+} from './mock_data';
+
+describe('Customer relations contacts root app', () => {
+  Vue.use(VueApollo);
+  let wrapper;
+  let fakeApollo;
+  let queryHandler;
+
+  const findCreateNewContactButton = () => wrapper.findByTestId('create-new-contact-button');
+  const findCancelButton = () => wrapper.findByTestId('cancel-button');
+  const findForm = () => wrapper.find('form');
+
+  const mountComponent = ({ mountFunction = shallowMountExtended } = {}) => {
+    fakeApollo = createMockApollo([[createContactMutation, queryHandler]]);
+    fakeApollo.clients.defaultClient.cache.writeQuery({
+      query: getGroupContactsQuery,
+      variables: { groupFullPath: 'flightjs' },
+      data: getGroupContactsQueryResponse.data,
+    });
+    wrapper = mountFunction(NewContactForm, {
+      provide: { groupId: 26, groupFullPath: 'flightjs' },
+      apolloProvider: fakeApollo,
+    });
+  };
+
+  beforeEach(() => {
+    queryHandler = jest.fn().mockResolvedValue(createContactMutationResponse);
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+    fakeApollo = null;
+  });
+
+  describe('Create new contact button', () => {
+    it('should be disabled by default', () => {
+      mountComponent();
+
+      expect(findCreateNewContactButton().attributes('disabled')).toBeTruthy();
+    });
+
+    it('should not be disabled when first, last and email 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(findCreateNewContactButton().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 emit error on reject', async () => {
+      queryHandler = jest.fn().mockRejectedValue('ERROR');
+      mountComponent();
+
+      findForm().trigger('submit');
+      await waitForPromises();
+
+      expect(wrapper.emitted().error).toBeTruthy();
+    });
+
+    it('should emit error on error response', async () => {
+      queryHandler = jest.fn().mockResolvedValue(createContactMutationErrorResponse);
+      mountComponent();
+
+      findForm().trigger('submit');
+      await waitForPromises();
+
+      expect(wrapper.emitted().error[0][0]).toEqual(
+        createContactMutationErrorResponse.data.customerRelationsContactCreate.errors,
+      );
+    });
+  });
+});