diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-05-19 10:33:21 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-05-19 10:33:21 +0300 |
commit | 36a59d088eca61b834191dacea009677a96c052f (patch) | |
tree | e4f33972dab5d8ef79e3944a9f403035fceea43f /spec/frontend/invite_members/components/invite_modal_base_spec.js | |
parent | a1761f15ec2cae7c7f7bbda39a75494add0dfd6f (diff) |
Add latest changes from gitlab-org/gitlab@15-0-stable-eev15.0.0-rc42
Diffstat (limited to 'spec/frontend/invite_members/components/invite_modal_base_spec.js')
-rw-r--r-- | spec/frontend/invite_members/components/invite_modal_base_spec.js | 120 |
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, }); |