diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-11-18 18:10:19 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-11-18 18:10:19 +0300 |
commit | bf0d6692fc4c16205cc49b8b87b7b7e0daa97c63 (patch) | |
tree | d44cb105682b2b39318c01a37f201b278b474663 /spec/frontend | |
parent | 9796aa22cd601f03101402540f41a05ad71828e5 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'spec/frontend')
6 files changed, 253 insertions, 131 deletions
diff --git a/spec/frontend/experimentation/utils_spec.js b/spec/frontend/experimentation/utils_spec.js index 6ed7aa6665c..0d663fd055e 100644 --- a/spec/frontend/experimentation/utils_spec.js +++ b/spec/frontend/experimentation/utils_spec.js @@ -99,12 +99,13 @@ describe('experiment Utilities', () => { describe('isExperimentVariant', () => { describe.each` - experiment | variant | input | output - ${ABC_KEY} | ${DEFAULT_VARIANT} | ${[ABC_KEY, DEFAULT_VARIANT]} | ${true} - ${ABC_KEY} | ${'_variant_name'} | ${[ABC_KEY, '_variant_name']} | ${true} - ${ABC_KEY} | ${'_variant_name'} | ${[ABC_KEY, '_bogus_name']} | ${false} - ${ABC_KEY} | ${'_variant_name'} | ${['boguskey', '_variant_name']} | ${false} - ${undefined} | ${undefined} | ${[ABC_KEY, '_variant_name']} | ${false} + experiment | variant | input | output + ${ABC_KEY} | ${CANDIDATE_VARIANT} | ${[ABC_KEY]} | ${true} + ${ABC_KEY} | ${DEFAULT_VARIANT} | ${[ABC_KEY, DEFAULT_VARIANT]} | ${true} + ${ABC_KEY} | ${'_variant_name'} | ${[ABC_KEY, '_variant_name']} | ${true} + ${ABC_KEY} | ${'_variant_name'} | ${[ABC_KEY, '_bogus_name']} | ${false} + ${ABC_KEY} | ${'_variant_name'} | ${['boguskey', '_variant_name']} | ${false} + ${undefined} | ${undefined} | ${[ABC_KEY, '_variant_name']} | ${false} `( 'with input=$input, experiment=$experiment, variant=$variant', ({ experiment, variant, input, output }) => { 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 5be79004640..24df424b40b 100644 --- a/spec/frontend/invite_members/components/invite_members_modal_spec.js +++ b/spec/frontend/invite_members/components/invite_members_modal_spec.js @@ -28,6 +28,7 @@ import { MEMBERS_MODAL_DEFAULT_TITLE, MEMBERS_PLACEHOLDER, MEMBERS_TO_PROJECT_CELEBRATE_INTRO_TEXT, + LEARN_GITLAB, } from '~/invite_members/constants'; import eventHub from '~/invite_members/event_hub'; import axios from '~/lib/utils/axios_utils'; @@ -268,6 +269,14 @@ describe('InviteMembersModal', () => { expect(findTasksToBeDone().exists()).toBe(false); }); + + describe('when opened from the Learn GitLab page', () => { + it('does render the tasks to be done', () => { + setupComponent({ source: LEARN_GITLAB }, {}, []); + + expect(findTasksToBeDone().exists()).toBe(true); + }); + }); }); describe('rendering the tasks', () => { @@ -465,7 +474,6 @@ describe('InviteMembersModal', () => { wrapper.vm.$toast = { show: jest.fn() }; jest.spyOn(Api, 'addGroupMembersByUserId').mockResolvedValue({ data: postData }); - jest.spyOn(wrapper.vm, 'showToastMessageSuccess'); }); it('includes the non-default selected areas of focus', () => { @@ -492,7 +500,23 @@ describe('InviteMembersModal', () => { }); it('displays the successful toastMessage', () => { - expect(wrapper.vm.showToastMessageSuccess).toHaveBeenCalled(); + expect(wrapper.vm.$toast.show).toHaveBeenCalledWith('Members were successfully added', { + onComplete: expect.any(Function), + }); + }); + }); + + describe('when opened from a Learn GitLab page', () => { + it('emits the `showSuccessfulInvitationsAlert` event', async () => { + eventHub.$emit('openModal', { inviteeType: 'members', source: LEARN_GITLAB }); + + jest.spyOn(eventHub, '$emit').mockImplementation(); + + clickInviteButton(); + + await waitForPromises(); + + expect(eventHub.$emit).toHaveBeenCalledWith('showSuccessfulInvitationsAlert'); }); }); }); @@ -649,7 +673,6 @@ describe('InviteMembersModal', () => { wrapper.vm.$toast = { show: jest.fn() }; jest.spyOn(Api, 'inviteGroupMembersByEmail').mockResolvedValue({ data: postData }); - jest.spyOn(wrapper.vm, 'showToastMessageSuccess'); }); it('includes the non-default selected areas of focus', () => { @@ -672,7 +695,9 @@ describe('InviteMembersModal', () => { }); it('displays the successful toastMessage', () => { - expect(wrapper.vm.showToastMessageSuccess).toHaveBeenCalled(); + expect(wrapper.vm.$toast.show).toHaveBeenCalledWith('Members were successfully added', { + onComplete: expect.any(Function), + }); }); }); }); @@ -711,13 +736,14 @@ describe('InviteMembersModal', () => { it('displays the successful toast message when email has already been invited', async () => { mockInvitationsApi(httpStatus.CREATED, invitationsApiResponse.EMAIL_TAKEN); wrapper.vm.$toast = { show: jest.fn() }; - jest.spyOn(wrapper.vm, 'showToastMessageSuccess'); clickInviteButton(); await waitForPromises(); - expect(wrapper.vm.showToastMessageSuccess).toHaveBeenCalled(); + expect(wrapper.vm.$toast.show).toHaveBeenCalledWith('Members were successfully added', { + onComplete: expect.any(Function), + }); expect(findMembersSelect().props('validationState')).toBe(null); }); @@ -782,7 +808,6 @@ describe('InviteMembersModal', () => { wrapper.vm.$toast = { show: jest.fn() }; jest.spyOn(Api, 'inviteGroupMembersByEmail').mockResolvedValue({ data: postData }); jest.spyOn(Api, 'addGroupMembersByUserId').mockResolvedValue({ data: postData }); - jest.spyOn(wrapper.vm, 'showToastMessageSuccess'); jest.spyOn(wrapper.vm, 'trackInvite'); }); @@ -800,7 +825,9 @@ describe('InviteMembersModal', () => { }); it('displays the successful toastMessage', () => { - expect(wrapper.vm.showToastMessageSuccess).toHaveBeenCalled(); + expect(wrapper.vm.$toast.show).toHaveBeenCalledWith('Members were successfully added', { + onComplete: expect.any(Function), + }); }); }); @@ -855,7 +882,6 @@ describe('InviteMembersModal', () => { wrapper.setData({ inviteeType: 'group' }); wrapper.vm.$toast = { show: jest.fn() }; jest.spyOn(Api, 'groupShareWithGroup').mockResolvedValue({ data: groupPostData }); - jest.spyOn(wrapper.vm, 'showToastMessageSuccess'); clickInviteButton(); }); @@ -865,7 +891,9 @@ describe('InviteMembersModal', () => { }); it('displays the successful toastMessage', () => { - expect(wrapper.vm.showToastMessageSuccess).toHaveBeenCalled(); + expect(wrapper.vm.$toast.show).toHaveBeenCalledWith('Members were successfully added', { + onComplete: expect.any(Function), + }); }); }); @@ -930,6 +958,13 @@ describe('InviteMembersModal', () => { expect(ExperimentTracking.prototype.event).toHaveBeenCalledWith(MEMBER_AREAS_OF_FOCUS.view); }); + it('tracks the view for learn_gitlab source', () => { + eventHub.$emit('openModal', { inviteeType: 'members', source: LEARN_GITLAB }); + + expect(ExperimentTracking).toHaveBeenCalledWith(INVITE_MEMBERS_FOR_TASK.name); + expect(ExperimentTracking.prototype.event).toHaveBeenCalledWith(LEARN_GITLAB); + }); + it('tracks the invite for areas_of_focus', () => { eventHub.$emit('openModal', { inviteeType: 'members' }); diff --git a/spec/frontend/pages/projects/learn_gitlab/components/__snapshots__/learn_gitlab_spec.js.snap b/spec/frontend/pages/projects/learn_gitlab/components/__snapshots__/learn_gitlab_spec.js.snap index 3e371a8765f..1586aded6e6 100644 --- a/spec/frontend/pages/projects/learn_gitlab/components/__snapshots__/learn_gitlab_spec.js.snap +++ b/spec/frontend/pages/projects/learn_gitlab/components/__snapshots__/learn_gitlab_spec.js.snap @@ -2,6 +2,8 @@ exports[`Learn GitLab renders correctly 1`] = ` <div> + <!----> + <div class="row" > @@ -131,66 +133,60 @@ exports[`Learn GitLab renders correctly 1`] = ` <div class="gl-mb-4" > - <span> - <a - class="gl-link" - data-track-action="click_link" - data-track-experiment="change_continuous_onboarding_link_urls" - data-track-label="Set up CI/CD" - data-track-property="Growth::Conversion::Experiment::LearnGitLab" - href="http://example.com/" - rel="noopener noreferrer" - target="_blank" - > - - Set up CI/CD - - </a> - </span> + <a + class="gl-link" + data-track-action="click_link" + data-track-experiment="change_continuous_onboarding_link_urls" + data-track-label="Set up CI/CD" + data-track-property="Growth::Conversion::Experiment::LearnGitLab" + href="http://example.com/" + rel="noopener noreferrer" + target="_blank" + > + + Set up CI/CD + + </a> <!----> </div> <div class="gl-mb-4" > - <span> - <a - class="gl-link" - data-track-action="click_link" - data-track-experiment="change_continuous_onboarding_link_urls" - data-track-label="Start a free Ultimate trial" - data-track-property="Growth::Conversion::Experiment::LearnGitLab" - href="http://example.com/" - rel="noopener noreferrer" - target="_blank" - > - - Start a free Ultimate trial - - </a> - </span> + <a + class="gl-link" + data-track-action="click_link" + data-track-experiment="change_continuous_onboarding_link_urls" + data-track-label="Start a free Ultimate trial" + data-track-property="Growth::Conversion::Experiment::LearnGitLab" + href="http://example.com/" + rel="noopener noreferrer" + target="_blank" + > + + Start a free Ultimate trial + + </a> <!----> </div> <div class="gl-mb-4" > - <span> - <a - class="gl-link" - data-track-action="click_link" - data-track-experiment="change_continuous_onboarding_link_urls" - data-track-label="Add code owners" - data-track-property="Growth::Conversion::Experiment::LearnGitLab" - href="http://example.com/" - rel="noopener noreferrer" - target="_blank" - > - - Add code owners - - </a> - </span> + <a + class="gl-link" + data-track-action="click_link" + data-track-experiment="change_continuous_onboarding_link_urls" + data-track-label="Add code owners" + data-track-property="Growth::Conversion::Experiment::LearnGitLab" + href="http://example.com/" + rel="noopener noreferrer" + target="_blank" + > + + Add code owners + + </a> <span class="gl-font-style-italic gl-text-gray-500" @@ -204,22 +200,20 @@ exports[`Learn GitLab renders correctly 1`] = ` <div class="gl-mb-4" > - <span> - <a - class="gl-link" - data-track-action="click_link" - data-track-experiment="change_continuous_onboarding_link_urls" - data-track-label="Add merge request approval" - data-track-property="Growth::Conversion::Experiment::LearnGitLab" - href="http://example.com/" - rel="noopener noreferrer" - target="_blank" - > - - Add merge request approval - - </a> - </span> + <a + class="gl-link" + data-track-action="click_link" + data-track-experiment="change_continuous_onboarding_link_urls" + data-track-label="Add merge request approval" + data-track-property="Growth::Conversion::Experiment::LearnGitLab" + href="http://example.com/" + rel="noopener noreferrer" + target="_blank" + > + + Add merge request approval + + </a> <span class="gl-font-style-italic gl-text-gray-500" @@ -269,44 +263,40 @@ exports[`Learn GitLab renders correctly 1`] = ` <div class="gl-mb-4" > - <span> - <a - class="gl-link" - data-track-action="click_link" - data-track-experiment="change_continuous_onboarding_link_urls" - data-track-label="Create an issue" - data-track-property="Growth::Conversion::Experiment::LearnGitLab" - href="http://example.com/" - rel="noopener noreferrer" - target="_blank" - > - - Create an issue - - </a> - </span> + <a + class="gl-link" + data-track-action="click_link" + data-track-experiment="change_continuous_onboarding_link_urls" + data-track-label="Create an issue" + data-track-property="Growth::Conversion::Experiment::LearnGitLab" + href="http://example.com/" + rel="noopener noreferrer" + target="_blank" + > + + Create an issue + + </a> <!----> </div> <div class="gl-mb-4" > - <span> - <a - class="gl-link" - data-track-action="click_link" - data-track-experiment="change_continuous_onboarding_link_urls" - data-track-label="Submit a merge request" - data-track-property="Growth::Conversion::Experiment::LearnGitLab" - href="http://example.com/" - rel="noopener noreferrer" - target="_blank" - > - - Submit a merge request - - </a> - </span> + <a + class="gl-link" + data-track-action="click_link" + data-track-experiment="change_continuous_onboarding_link_urls" + data-track-label="Submit a merge request" + data-track-property="Growth::Conversion::Experiment::LearnGitLab" + href="http://example.com/" + rel="noopener noreferrer" + target="_blank" + > + + Submit a merge request + + </a> <!----> </div> @@ -349,22 +339,20 @@ exports[`Learn GitLab renders correctly 1`] = ` <div class="gl-mb-4" > - <span> - <a - class="gl-link" - data-track-action="click_link" - data-track-experiment="change_continuous_onboarding_link_urls" - data-track-label="Run a Security scan using CI/CD" - data-track-property="Growth::Conversion::Experiment::LearnGitLab" - href="http://example.com/" - rel="noopener noreferrer" - target="_blank" - > - - Run a Security scan using CI/CD - - </a> - </span> + <a + class="gl-link" + data-track-action="click_link" + data-track-experiment="change_continuous_onboarding_link_urls" + data-track-label="Run a Security scan using CI/CD" + data-track-property="Growth::Conversion::Experiment::LearnGitLab" + href="http://example.com/" + rel="noopener noreferrer" + target="_blank" + > + + Run a Security scan using CI/CD + + </a> <!----> </div> diff --git a/spec/frontend/pages/projects/learn_gitlab/components/learn_gitlab_section_link_spec.js b/spec/frontend/pages/projects/learn_gitlab/components/learn_gitlab_section_link_spec.js index 882d233a239..f7b2154a935 100644 --- a/spec/frontend/pages/projects/learn_gitlab/components/learn_gitlab_section_link_spec.js +++ b/spec/frontend/pages/projects/learn_gitlab/components/learn_gitlab_section_link_spec.js @@ -1,4 +1,7 @@ import { shallowMount } from '@vue/test-utils'; +import { stubExperiments } from 'helpers/experimentation_helper'; +import { mockTracking, triggerEvent, unmockTracking } from 'helpers/tracking_helper'; +import eventHub from '~/invite_members/event_hub'; import LearnGitlabSectionLink from '~/pages/projects/learn_gitlab/components/learn_gitlab_section_link.vue'; const defaultAction = 'gitWrite'; @@ -23,6 +26,9 @@ describe('Learn GitLab Section Link', () => { }); }; + const openInviteMembesrModalLink = () => + wrapper.find('[data-testid="invite-for-help-continuous-onboarding-experiment-link"]'); + it('renders no icon when not completed', () => { createWrapper(undefined, { completed: false }); @@ -46,4 +52,54 @@ describe('Learn GitLab Section Link', () => { expect(wrapper.find('[data-testid="trial-only"]').exists()).toBe(true); }); + + describe('rendering a link to open the invite_members modal instead of a regular link', () => { + it.each` + action | experimentVariant | showModal + ${'userAdded'} | ${'candidate'} | ${true} + ${'userAdded'} | ${'control'} | ${false} + ${defaultAction} | ${'candidate'} | ${false} + ${defaultAction} | ${'control'} | ${false} + `( + 'when the invite_for_help_continuous_onboarding experiment has variant: $experimentVariant and action is $action, the modal link is shown: $showModal', + ({ action, experimentVariant, showModal }) => { + stubExperiments({ invite_for_help_continuous_onboarding: experimentVariant }); + createWrapper(action); + + expect(openInviteMembesrModalLink().exists()).toBe(showModal); + }, + ); + }); + + describe('clicking the link to open the invite_members modal', () => { + beforeEach(() => { + jest.spyOn(eventHub, '$emit').mockImplementation(); + + stubExperiments({ invite_for_help_continuous_onboarding: 'candidate' }); + createWrapper('userAdded'); + }); + + it('calls the eventHub', () => { + openInviteMembesrModalLink().vm.$emit('click'); + + expect(eventHub.$emit).toHaveBeenCalledWith('openModal', { + inviteeType: 'members', + source: 'learn_gitlab', + tasksToBeDoneEnabled: true, + }); + }); + + it('tracks the click', async () => { + const trackingSpy = mockTracking('_category_', wrapper.element, jest.spyOn); + + triggerEvent(openInviteMembesrModalLink().element); + + expect(trackingSpy).toHaveBeenCalledWith('_category_', 'click_link', { + label: 'Invite your colleagues', + property: 'Growth::Activation::Experiment::InviteForHelpContinuousOnboarding', + }); + + unmockTracking(); + }); + }); }); diff --git a/spec/frontend/pages/projects/learn_gitlab/components/learn_gitlab_spec.js b/spec/frontend/pages/projects/learn_gitlab/components/learn_gitlab_spec.js index 7e97a539a99..7e71622770f 100644 --- a/spec/frontend/pages/projects/learn_gitlab/components/learn_gitlab_spec.js +++ b/spec/frontend/pages/projects/learn_gitlab/components/learn_gitlab_spec.js @@ -1,20 +1,35 @@ -import { GlProgressBar } from '@gitlab/ui'; +import { GlProgressBar, GlAlert } from '@gitlab/ui'; import { mount } from '@vue/test-utils'; import LearnGitlab from '~/pages/projects/learn_gitlab/components/learn_gitlab.vue'; import eventHub from '~/invite_members/event_hub'; -import { testActions, testSections } from './mock_data'; +import { testActions, testSections, testProject } from './mock_data'; describe('Learn GitLab', () => { let wrapper; + let sidebar; let inviteMembersOpen = false; const createWrapper = () => { wrapper = mount(LearnGitlab, { - propsData: { actions: testActions, sections: testSections, inviteMembersOpen }, + propsData: { + actions: testActions, + sections: testSections, + project: testProject, + inviteMembersOpen, + }, }); }; beforeEach(() => { + sidebar = document.createElement('div'); + sidebar.innerHTML = ` + <div class="sidebar-top-level-items"> + <div class="active"> + <div class="count"></div> + </div> + </div> + `; + document.body.appendChild(sidebar); createWrapper(); }); @@ -22,6 +37,7 @@ describe('Learn GitLab', () => { wrapper.destroy(); wrapper = null; inviteMembersOpen = false; + sidebar.remove(); }); it('renders correctly', () => { @@ -66,4 +82,26 @@ describe('Learn GitLab', () => { expect(spy).not.toHaveBeenCalled(); }); }); + + describe('when the showSuccessfulInvitationsAlert event is fired', () => { + const findAlert = () => wrapper.findComponent(GlAlert); + + beforeEach(() => { + eventHub.$emit('showSuccessfulInvitationsAlert'); + }); + + it('displays the successful invitations alert', () => { + expect(findAlert().exists()).toBe(true); + }); + + it('displays a message with the project name', () => { + expect(findAlert().text()).toBe( + "Your team is growing! You've successfully invited new team members to the test-project project.", + ); + }); + + it('modifies the sidebar percentage', () => { + expect(sidebar.textContent.trim()).toBe('22%'); + }); + }); }); diff --git a/spec/frontend/pages/projects/learn_gitlab/components/mock_data.js b/spec/frontend/pages/projects/learn_gitlab/components/mock_data.js index 8d6ac737db8..1e633cb7cf5 100644 --- a/spec/frontend/pages/projects/learn_gitlab/components/mock_data.js +++ b/spec/frontend/pages/projects/learn_gitlab/components/mock_data.js @@ -57,3 +57,7 @@ export const testSections = { svg: 'plan.svg', }, }; + +export const testProject = { + name: 'test-project', +}; |