Add latest changes from gitlab-org/gitlab@master

3 files changed, 226 insertions, 12 deletions

diff --git a/spec/frontend/crm/mock_data.js b/spec/frontend/crm/mock_data.js
index 3abbc488081..f7af2ccdb72 100644
--- a/spec/frontend/crm/mock_data.js
+++ b/spec/frontend/crm/mock_data.js
@@ -134,3 +134,28 @@ export const updateContactMutationErrorResponse = {
     },
   },
 };
+
+export const createOrganizationMutationResponse = {
+  data: {
+    customerRelationsOrganizationCreate: {
+      __typeName: 'CustomerRelationsOrganizationCreatePayload',
+      organization: {
+        __typename: 'CustomerRelationsOrganization',
+        id: 'gid://gitlab/CustomerRelations::Organization/2',
+        name: 'A',
+        defaultRate: null,
+        description: null,
+      },
+      errors: [],
+    },
+  },
+};
+
+export const createOrganizationMutationErrorResponse = {
+  data: {
+    customerRelationsOrganizationCreate: {
+      organization: null,
+      errors: ['Name cannot be blank.'],
+    },
+  },
+};
diff --git a/spec/frontend/crm/new_organization_form_spec.js b/spec/frontend/crm/new_organization_form_spec.js
new file mode 100644
index 00000000000..976b626f35f
--- /dev/null
+++ b/spec/frontend/crm/new_organization_form_spec.js
@@ -0,0 +1,109 @@
+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('Name cannot be blank.');
+    });
+  });
+});
diff --git a/spec/frontend/crm/organizations_root_spec.js b/spec/frontend/crm/organizations_root_spec.js
index cfaeb8ae7e3..aef417964f4 100644
--- a/spec/frontend/crm/organizations_root_spec.js
+++ b/spec/frontend/crm/organizations_root_spec.js
@@ -1,38 +1,59 @@
 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 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 { getGroupOrganizationsQueryResponse } from './mock_data';
 
 describe('Customer relations organizations 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 findNewOrganizationButton = () => wrapper.findByTestId('new-organization-button');
+  const findNewOrganizationForm = () => wrapper.findComponent(NewOrganizationForm);
   const findError = () => wrapper.findComponent(GlAlert);
   const successQueryHandler = jest.fn().mockResolvedValue(getGroupOrganizationsQueryResponse);
 
+  const basePath = '/groups/flightjs/-/crm/organizations';
+
   const mountComponent = ({
     queryHandler = successQueryHandler,
     mountFunction = shallowMountExtended,
+    canAdminCrmOrganization = true,
   } = {}) => {
     fakeApollo = createMockApollo([[getGroupOrganizationsQuery, queryHandler]]);
     wrapper = mountFunction(OrganizationsRoot, {
-      provide: { groupFullPath: 'flightjs', groupIssuesPath: '/issues' },
+      router,
+      provide: { canAdminCrmOrganization, groupFullPath: 'flightjs', groupIssuesPath: '/issues' },
       apolloProvider: fakeApollo,
     });
   };
 
+  beforeEach(() => {
+    router = new VueRouter({
+      base: basePath,
+      mode: 'history',
+      routes,
+    });
+  });
+
   afterEach(() => {
     wrapper.destroy();
     fakeApollo = null;
+    router = null;
   });
 
   it('should render loading spinner', () => {
@@ -41,6 +62,56 @@ describe('Customer relations organizations root app', () => {
     expect(findLoadingIcon().exists()).toBe(true);
   });
 
+  describe('new organization button', () => {
+    it('should exist when user has permission', () => {
+      mountComponent();
+
+      expect(findNewOrganizationButton().exists()).toBe(true);
+    });
+
+    it('should not exist when user has no permission', () => {
+      mountComponent({ canAdminCrmOrganization: false });
+
+      expect(findNewOrganizationButton().exists()).toBe(false);
+    });
+  });
+
+  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();
@@ -48,18 +119,27 @@ describe('Customer relations organizations root app', () => {
     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(/Test Inc/i)).toHaveLength(1);
-    expect(findRowByName(/VIP/i)).toHaveLength(1);
-    expect(findRowByName(/120/i)).toHaveLength(1);
+      expect(findError().exists()).toBe(false);
+    });
 
-    const issueLink = findIssuesLinks().at(0);
-    expect(issueLink.exists()).toBe(true);
-    expect(issueLink.attributes('href')).toBe(
-      '/issues?scope=all&state=opened&crm_organization_id=2',
-    );
+    it('renders correct results', async () => {
+      mountComponent({ mountFunction: mountExtended });
+      await waitForPromises();
+
+      expect(findRowByName(/Test Inc/i)).toHaveLength(1);
+      expect(findRowByName(/VIP/i)).toHaveLength(1);
+      expect(findRowByName(/120/i)).toHaveLength(1);
+
+      const issueLink = findIssuesLinks().at(0);
+      expect(issueLink.exists()).toBe(true);
+      expect(issueLink.attributes('href')).toBe(
+        '/issues?scope=all&state=opened&crm_organization_id=2',
+      );
+    });
   });
 });