1 files changed, 114 insertions, 6 deletions

diff --git a/spec/frontend/invite_members/components/invite_modal_base_spec.js b/spec/frontend/invite_members/components/invite_modal_base_spec.js
index 8355ae67f20..010f7b999fc 100644
--- a/spec/frontend/invite_members/components/invite_modal_base_spec.js
+++ b/spec/frontend/invite_members/components/invite_modal_base_spec.js
@@ -6,18 +6,30 @@ import {
   GlSprintf,
   GlLink,
   GlModal,
+  GlIcon,
 } from '@gitlab/ui';
 import { stubComponent } from 'helpers/stub_component';
+import { mockTracking, unmockTracking } from 'helpers/tracking_helper';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import InviteModalBase from '~/invite_members/components/invite_modal_base.vue';
 import ContentTransition from '~/vue_shared/components/content_transition.vue';
-import { CANCEL_BUTTON_TEXT, INVITE_BUTTON_TEXT } from '~/invite_members/constants';
-import { propsData } from '../mock_data/modal_base';
+
+import {
+  CANCEL_BUTTON_TEXT,
+  INVITE_BUTTON_TEXT_DISABLED,
+  INVITE_BUTTON_TEXT,
+  CANCEL_BUTTON_TEXT_DISABLED,
+  ON_SHOW_TRACK_LABEL,
+  ON_CLOSE_TRACK_LABEL,
+  ON_SUBMIT_TRACK_LABEL,
+} from '~/invite_members/constants';
+
+import { propsData, membersPath, purchasePath } from '../mock_data/modal_base';
 
 describe('InviteModalBase', () => {
   let wrapper;
 
-  const createComponent = (props = {}) => {
+  const createComponent = (props = {}, stubs = {}) => {
     wrapper = shallowMountExtended(InviteModalBase, {
       propsData: {
         ...propsData,
@@ -33,8 +45,9 @@ describe('InviteModalBase', () => {
         GlDropdownItem: true,
         GlSprintf,
         GlFormGroup: stubComponent(GlFormGroup, {
-          props: ['state', 'invalidFeedback', 'description'],
+          props: ['state', 'invalidFeedback'],
         }),
+        ...stubs,
       },
     });
   };
@@ -48,8 +61,12 @@ describe('InviteModalBase', () => {
   const findDropdownItems = () => findDropdown().findAllComponents(GlDropdownItem);
   const findDatepicker = () => wrapper.findComponent(GlDatepicker);
   const findLink = () => wrapper.findComponent(GlLink);
+  const findIcon = () => wrapper.findComponent(GlIcon);
   const findIntroText = () => wrapper.findByTestId('modal-base-intro-text').text();
   const findMembersFormGroup = () => wrapper.findByTestId('members-form-group');
+  const findDisabledInput = () => wrapper.findByTestId('disabled-input');
+  const findCancelButton = () => wrapper.find('.js-modal-action-cancel');
+  const findActionButton = () => wrapper.find('.js-modal-action-primary');
 
   describe('rendering the modal', () => {
     beforeEach(() => {
@@ -106,11 +123,103 @@ describe('InviteModalBase', () => {
 
     it('renders the members form group', () => {
       expect(findMembersFormGroup().props()).toEqual({
-        description: propsData.formGroupDescription,
         invalidFeedback: '',
         state: null,
       });
     });
+
+    it('renders description', () => {
+      createComponent({}, { GlFormGroup });
+
+      expect(findMembersFormGroup().text()).toContain(propsData.formGroupDescription);
+    });
+
+    describe('when users limit is reached', () => {
+      let trackingSpy;
+
+      const expectTracking = (action, label) =>
+        expect(trackingSpy).toHaveBeenCalledWith('default', action, {
+          label,
+          category: 'default',
+        });
+
+      beforeEach(() => {
+        createComponent(
+          { usersLimitDataset: { membersPath, purchasePath }, reachedLimit: true },
+          { GlModal, GlFormGroup },
+        );
+      });
+
+      it('renders correct blocks', () => {
+        expect(findIcon().exists()).toBe(true);
+        expect(findDisabledInput().exists()).toBe(true);
+        expect(findDropdown().exists()).toBe(false);
+        expect(findDatepicker().exists()).toBe(false);
+      });
+
+      it('renders correct buttons', () => {
+        const cancelButton = findCancelButton();
+        const actionButton = findActionButton();
+
+        expect(cancelButton.attributes('href')).toBe(purchasePath);
+        expect(cancelButton.text()).toBe(CANCEL_BUTTON_TEXT_DISABLED);
+        expect(actionButton.attributes('href')).toBe(membersPath);
+        expect(actionButton.text()).toBe(INVITE_BUTTON_TEXT_DISABLED);
+      });
+
+      it('tracks actions', () => {
+        createComponent({ reachedLimit: true }, { GlFormGroup, GlModal });
+        trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn);
+
+        const modal = wrapper.findComponent(GlModal);
+
+        modal.vm.$emit('shown');
+        expectTracking('render', ON_SHOW_TRACK_LABEL);
+
+        modal.vm.$emit('cancel', { preventDefault: jest.fn() });
+        expectTracking('click_button', ON_CLOSE_TRACK_LABEL);
+
+        modal.vm.$emit('primary', { preventDefault: jest.fn() });
+        expectTracking('click_button', ON_SUBMIT_TRACK_LABEL);
+
+        unmockTracking();
+      });
+
+      describe('when free user namespace', () => {
+        it('hides cancel button', () => {
+          createComponent(
+            {
+              usersLimitDataset: { membersPath, purchasePath, userNamespace: true },
+              reachedLimit: true,
+            },
+            { GlModal, GlFormGroup },
+          );
+
+          expect(findCancelButton().exists()).toBe(false);
+        });
+      });
+    });
+
+    describe('when users limit is not reached', () => {
+      const textRegex = /Select a role.+Read more about role permissions Access expiration date \(optional\)/;
+
+      beforeEach(() => {
+        createComponent({ reachedLimit: false }, { GlModal, GlFormGroup });
+      });
+
+      it('renders correct blocks', () => {
+        expect(findIcon().exists()).toBe(false);
+        expect(findDisabledInput().exists()).toBe(false);
+        expect(findDropdown().exists()).toBe(true);
+        expect(findDatepicker().exists()).toBe(true);
+        expect(wrapper.findComponent(GlModal).text()).toMatch(textRegex);
+      });
+
+      it('renders correct buttons', () => {
+        expect(findCancelButton().text()).toBe(CANCEL_BUTTON_TEXT);
+        expect(findActionButton().text()).toBe(INVITE_BUTTON_TEXT);
+      });
+    });
   });
 
   it('with isLoading, shows loading for invite button', () => {
@@ -127,7 +236,6 @@ describe('InviteModalBase', () => {
     });
 
     expect(findMembersFormGroup().props()).toEqual({
-      description: propsData.formGroupDescription,
       invalidFeedback: 'invalid message!',
       state: false,
     });