1 files changed, 103 insertions, 0 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
new file mode 100644
index 00000000000..4b183bfd670
--- /dev/null
+++ b/spec/frontend/invite_members/components/invite_modal_base_spec.js
@@ -0,0 +1,103 @@
+import {
+  GlDropdown,
+  GlDropdownItem,
+  GlDatepicker,
+  GlFormGroup,
+  GlSprintf,
+  GlLink,
+  GlModal,
+} from '@gitlab/ui';
+import { stubComponent } from 'helpers/stub_component';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import InviteModalBase from '~/invite_members/components/invite_modal_base.vue';
+import { CANCEL_BUTTON_TEXT, INVITE_BUTTON_TEXT } from '~/invite_members/constants';
+import { propsData } from '../mock_data/modal_base';
+
+describe('InviteModalBase', () => {
+  let wrapper;
+
+  const createComponent = (data = {}, props = {}) => {
+    wrapper = shallowMountExtended(InviteModalBase, {
+      propsData: {
+        ...propsData,
+        ...props,
+      },
+      data() {
+        return data;
+      },
+      stubs: {
+        GlModal: stubComponent(GlModal, {
+          template:
+            '<div><slot name="modal-title"></slot><slot></slot><slot name="modal-footer"></slot></div>',
+        }),
+        GlDropdown: true,
+        GlDropdownItem: true,
+        GlSprintf,
+        GlFormGroup: stubComponent(GlFormGroup, {
+          props: ['state', 'invalidFeedback', 'description'],
+        }),
+      },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  const findDropdown = () => wrapper.findComponent(GlDropdown);
+  const findDropdownItems = () => findDropdown().findAllComponents(GlDropdownItem);
+  const findDatepicker = () => wrapper.findComponent(GlDatepicker);
+  const findLink = () => wrapper.findComponent(GlLink);
+  const findIntroText = () => wrapper.findByTestId('modal-base-intro-text').text();
+  const findCancelButton = () => wrapper.findByTestId('cancel-button');
+  const findInviteButton = () => wrapper.findByTestId('invite-button');
+
+  describe('rendering the modal', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('renders the modal with the correct title', () => {
+      expect(wrapper.findComponent(GlModal).props('title')).toBe(propsData.modalTitle);
+    });
+
+    it('displays the introText', () => {
+      expect(findIntroText()).toBe(propsData.labelIntroText);
+    });
+
+    it('renders the Cancel button text correctly', () => {
+      expect(findCancelButton().text()).toBe(CANCEL_BUTTON_TEXT);
+    });
+
+    it('renders the Invite button text correctly', () => {
+      expect(findInviteButton().text()).toBe(INVITE_BUTTON_TEXT);
+    });
+
+    it('renders the Invite button modal without isLoading', () => {
+      expect(findInviteButton().props('loading')).toBe(false);
+    });
+
+    describe('rendering the access levels dropdown', () => {
+      it('sets the default dropdown text to the default access level name', () => {
+        expect(findDropdown().attributes('text')).toBe('Guest');
+      });
+
+      it('renders dropdown items for each accessLevel', () => {
+        expect(findDropdownItems()).toHaveLength(5);
+      });
+    });
+
+    describe('rendering the help link', () => {
+      it('renders the correct link', () => {
+        expect(findLink().attributes('href')).toBe(propsData.helpLink);
+      });
+    });
+
+    describe('rendering the access expiration date field', () => {
+      it('renders the datepicker', () => {
+        expect(findDatepicker().exists()).toBe(true);
+      });
+    });
+  });
+});