diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-11-17 11:33:21 +0000 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-11-17 11:33:21 +0000 |
commit | 7021455bd1ed7b125c55eb1b33c5a01f2bc55ee0 (patch) | |
tree | 5bdc2229f5198d516781f8d24eace62fc7e589e9 /spec/frontend/invite_members/components | |
parent | 185b095e93520f96e9cfc31d9c3e69b498cdab7c (diff) | |
download | gitlab-ce-7021455bd1ed7b125c55eb1b33c5a01f2bc55ee0.tar.gz |
Add latest changes from gitlab-org/gitlab@15-6-stable-eev15.6.0-rc42
Diffstat (limited to 'spec/frontend/invite_members/components')
3 files changed, 77 insertions, 116 deletions
diff --git a/spec/frontend/invite_members/components/invite_members_modal_spec.js b/spec/frontend/invite_members/components/invite_members_modal_spec.js index e9e1fbad07b..47be1933ed7 100644 --- a/spec/frontend/invite_members/components/invite_members_modal_spec.js +++ b/spec/frontend/invite_members/components/invite_members_modal_spec.js @@ -10,12 +10,12 @@ import InviteMembersModal from '~/invite_members/components/invite_members_modal import InviteModalBase from '~/invite_members/components/invite_modal_base.vue'; import ModalConfetti from '~/invite_members/components/confetti.vue'; import MembersTokenSelect from '~/invite_members/components/members_token_select.vue'; +import UserLimitNotification from '~/invite_members/components/user_limit_notification.vue'; import { INVITE_MEMBERS_FOR_TASK, MEMBERS_MODAL_CELEBRATE_INTRO, MEMBERS_MODAL_CELEBRATE_TITLE, MEMBERS_PLACEHOLDER, - MEMBERS_PLACEHOLDER_DISABLED, MEMBERS_TO_PROJECT_CELEBRATE_INTRO_TEXT, LEARN_GITLAB, EXPANDED_ERRORS, @@ -31,8 +31,6 @@ import { propsData, inviteSource, newProjectPath, - freeUsersLimit, - membersCount, user1, user2, user3, @@ -99,6 +97,7 @@ describe('InviteMembersModal', () => { const findIntroText = () => wrapper.findByTestId('modal-base-intro-text').text(); const findMemberErrorAlert = () => wrapper.findByTestId('alert-member-error'); const findMoreInviteErrorsButton = () => wrapper.findByTestId('accordion-button'); + const findUserLimitAlert = () => wrapper.findComponent(UserLimitNotification); const findAccordion = () => wrapper.findComponent(GlCollapse); const findErrorsIcon = () => wrapper.findComponent(GlIcon); const findMemberErrorMessage = (element) => @@ -112,7 +111,7 @@ describe('InviteMembersModal', () => { const findMembersFormGroup = () => wrapper.findByTestId('members-form-group'); const membersFormGroupInvalidFeedback = () => findMembersFormGroup().attributes('invalid-feedback'); - const membersFormGroupText = () => findMembersFormGroup().text(); + const membersFormGroupDescription = () => findMembersFormGroup().attributes('description'); const findMembersSelect = () => wrapper.findComponent(MembersTokenSelect); const findTasksToBeDone = () => wrapper.findByTestId('invite-members-modal-tasks-to-be-done'); const findTasks = () => wrapper.findByTestId('invite-members-modal-tasks'); @@ -299,19 +298,8 @@ describe('InviteMembersModal', () => { describe('members form group description', () => { it('renders correct description', () => { - createInviteMembersToProjectWrapper({ freeUsersLimit, membersCount }, { GlFormGroup }); - expect(membersFormGroupText()).toContain(MEMBERS_PLACEHOLDER); - }); - - describe('when reached user limit', () => { - it('renders correct description', () => { - createInviteMembersToProjectWrapper( - { freeUsersLimit, membersCount: 5 }, - { GlFormGroup }, - ); - - expect(membersFormGroupText()).toContain(MEMBERS_PLACEHOLDER_DISABLED); - }); + createInviteMembersToProjectWrapper({ GlFormGroup }); + expect(membersFormGroupDescription()).toContain(MEMBERS_PLACEHOLDER); }); }); }); @@ -339,23 +327,10 @@ describe('InviteMembersModal', () => { describe('members form group description', () => { it('renders correct description', async () => { - createInviteMembersToProjectWrapper({ freeUsersLimit, membersCount }, { GlFormGroup }); + createInviteMembersToProjectWrapper({ GlFormGroup }); await triggerOpenModal({ mode: 'celebrate' }); - expect(membersFormGroupText()).toContain(MEMBERS_PLACEHOLDER); - }); - - describe('when reached user limit', () => { - it('renders correct description', async () => { - createInviteMembersToProjectWrapper( - { freeUsersLimit, membersCount: 5 }, - { GlFormGroup }, - ); - - await triggerOpenModal({ mode: 'celebrate' }); - - expect(membersFormGroupText()).toContain(MEMBERS_PLACEHOLDER_DISABLED); - }); + expect(membersFormGroupDescription()).toContain(MEMBERS_PLACEHOLDER); }); }); }); @@ -370,20 +345,39 @@ describe('InviteMembersModal', () => { describe('members form group description', () => { it('renders correct description', () => { - createInviteMembersToGroupWrapper({ freeUsersLimit, membersCount }, { GlFormGroup }); - expect(membersFormGroupText()).toContain(MEMBERS_PLACEHOLDER); - }); - - describe('when reached user limit', () => { - it('renders correct description', () => { - createInviteMembersToGroupWrapper({ freeUsersLimit, membersCount: 5 }, { GlFormGroup }); - expect(membersFormGroupText()).toContain(MEMBERS_PLACEHOLDER_DISABLED); - }); + createInviteMembersToGroupWrapper({ GlFormGroup }); + expect(membersFormGroupDescription()).toContain(MEMBERS_PLACEHOLDER); }); }); }); }); + describe('rendering the user limit notification', () => { + it('shows the user limit notification alert when reached limit', () => { + const usersLimitDataset = { reachedLimit: true }; + + createInviteMembersToProjectWrapper(usersLimitDataset); + + expect(findUserLimitAlert().exists()).toBe(true); + }); + + it('shows the user limit notification alert when close to dashboard limit', () => { + const usersLimitDataset = { closeToDashboardLimit: true }; + + createInviteMembersToProjectWrapper(usersLimitDataset); + + expect(findUserLimitAlert().exists()).toBe(true); + }); + + it('does not show the user limit notification alert', () => { + const usersLimitDataset = {}; + + createInviteMembersToProjectWrapper(usersLimitDataset); + + expect(findUserLimitAlert().exists()).toBe(false); + }); + }); + describe('submitting the invite form', () => { const mockInvitationsApi = (code, data) => { mock.onPost(GROUPS_INVITATIONS_PATH).reply(code, data); 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 b55eeb72471..aeead8809fd 100644 --- a/spec/frontend/invite_members/components/invite_modal_base_spec.js +++ b/spec/frontend/invite_members/components/invite_modal_base_spec.js @@ -18,10 +18,7 @@ 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'; @@ -131,7 +128,9 @@ describe('InviteModalBase', () => { it('renders description', () => { createComponent({}, { GlFormGroup }); - expect(findMembersFormGroup().text()).toContain(propsData.formGroupDescription); + expect(findMembersFormGroup().attributes('description')).toContain( + propsData.formGroupDescription, + ); }); describe('when users limit is reached', () => { @@ -145,30 +144,13 @@ describe('InviteModalBase', () => { beforeEach(() => { createComponent( - { usersLimitDataset: { membersPath, purchasePath }, reachedLimit: true }, + { 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 }); + createComponent({ usersLimitDataset: { reachedLimit: true } }, { GlFormGroup, GlModal }); trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn); const modal = wrapper.findComponent(GlModal); @@ -176,37 +158,20 @@ describe('InviteModalBase', () => { 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 user limit is close on a personal namespace', () => { beforeEach(() => { createComponent( { - closeToLimit: true, - reachedLimit: false, - usersLimitDataset: { membersPath, userNamespace: true }, + usersLimitDataset: { + membersPath, + userNamespace: true, + closeToDashboardLimit: true, + reachedLimit: false, + }, }, { GlModal, GlFormGroup }, ); diff --git a/spec/frontend/invite_members/components/user_limit_notification_spec.js b/spec/frontend/invite_members/components/user_limit_notification_spec.js index 1ff2e86412f..2a780490468 100644 --- a/spec/frontend/invite_members/components/user_limit_notification_spec.js +++ b/spec/frontend/invite_members/components/user_limit_notification_spec.js @@ -1,8 +1,8 @@ import { GlAlert, GlSprintf } from '@gitlab/ui'; import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; import UserLimitNotification from '~/invite_members/components/user_limit_notification.vue'; -import { REACHED_LIMIT_UPGRADE_SUGGESTION_MESSAGE } from '~/invite_members/constants'; -import { freeUsersLimit, membersCount } from '../mock_data/member_modal'; +import { REACHED_LIMIT_VARIANT, CLOSE_TO_LIMIT_VARIANT } from '~/invite_members/constants'; +import { freeUsersLimit, remainingSeats } from '../mock_data/member_modal'; const WARNING_ALERT_TITLE = 'You only have space for 2 more members in name'; @@ -10,20 +10,16 @@ describe('UserLimitNotification', () => { let wrapper; const findAlert = () => wrapper.findComponent(GlAlert); + const findTrialLink = () => wrapper.findByTestId('trial-link'); + const findUpgradeLink = () => wrapper.findByTestId('upgrade-link'); - const createComponent = ( - closeToLimit = false, - reachedLimit = false, - usersLimitDataset = {}, - props = {}, - ) => { + const createComponent = (limitVariant, usersLimitDataset = {}, props = {}) => { wrapper = shallowMountExtended(UserLimitNotification, { propsData: { - closeToLimit, - reachedLimit, + limitVariant, usersLimitDataset: { + remainingSeats, freeUsersLimit, - membersCount, newTrialRegistrationPath: 'newTrialRegistrationPath', purchasePath: 'purchasePath', ...usersLimitDataset, @@ -35,40 +31,46 @@ describe('UserLimitNotification', () => { }); }; - afterEach(() => { - wrapper.destroy(); - }); - - describe('when limit is not reached', () => { - it('renders empty block', () => { - createComponent(); - - expect(findAlert().exists()).toBe(false); - }); - }); - describe('when close to limit within a group', () => { it("renders user's limit notification", () => { - createComponent(true, false, { membersCount: 3 }); + createComponent(CLOSE_TO_LIMIT_VARIANT); const alert = findAlert(); expect(alert.attributes('title')).toEqual(WARNING_ALERT_TITLE); - expect(alert.text()).toEqual( - 'To get more members an owner of the group can start a trial or upgrade to a paid tier.', - ); + expect(alert.text()).toContain('To get more members an owner of the group can'); }); }); describe('when limit is reached', () => { it("renders user's limit notification", () => { - createComponent(true, true); + createComponent(REACHED_LIMIT_VARIANT); const alert = findAlert(); expect(alert.attributes('title')).toEqual("You've reached your 5 members limit for name"); - expect(alert.text()).toEqual(REACHED_LIMIT_UPGRADE_SUGGESTION_MESSAGE); + expect(alert.text()).toContain( + 'To invite new users to this namespace, you must remove existing users.', + ); }); }); + + describe('tracking', () => { + it.each([CLOSE_TO_LIMIT_VARIANT, REACHED_LIMIT_VARIANT])( + `has tracking attributes for %j variant`, + (variant) => { + createComponent(variant); + + expect(findTrialLink().attributes('data-track-action')).toBe('click_link'); + expect(findTrialLink().attributes('data-track-label')).toBe( + `start_trial_user_limit_notification_${variant}`, + ); + expect(findUpgradeLink().attributes('data-track-action')).toBe('click_link'); + expect(findUpgradeLink().attributes('data-track-label')).toBe( + `upgrade_user_limit_notification_${variant}`, + ); + }, + ); + }); }); |