diff options
Diffstat (limited to 'spec/frontend/pages/projects/learn_gitlab/components')
3 files changed, 317 insertions, 225 deletions
diff --git a/spec/frontend/pages/projects/learn_gitlab/components/__snapshots__/learn_gitlab_section_card_spec.js.snap b/spec/frontend/pages/projects/learn_gitlab/components/__snapshots__/learn_gitlab_section_card_spec.js.snap index 9e00ace761c..83feb621478 100644 --- a/spec/frontend/pages/projects/learn_gitlab/components/__snapshots__/learn_gitlab_section_card_spec.js.snap +++ b/spec/frontend/pages/projects/learn_gitlab/components/__snapshots__/learn_gitlab_section_card_spec.js.snap @@ -2,31 +2,26 @@ exports[`Learn GitLab Section Card renders correctly 1`] = ` <gl-card-stub - bodyclass="" - class="gl-pt-0 learn-gitlab-section-card" + bodyclass="gl-pt-0" + class="gl-pt-0 h-100" footerclass="" - headerclass="" + headerclass="gl-bg-white gl-border-0 gl-pb-0" > - <div - class="learn-gitlab-section-card-header" + <img + src="workspace.svg" + /> + + <h2 + class="gl-font-lg gl-mb-3" > - <img - src="workspace.svg" - /> - - <h2 - class="gl-font-lg gl-mb-3" - > - Set up your workspace - </h2> - - <p - class="gl-text-gray-700 gl-mb-6" - > - Complete these tasks first so you can enjoy GitLab's features to their fullest: - </p> - </div> + Set up your workspace + </h2> + <p + class="gl-text-gray-700 gl-mb-6" + > + Complete these tasks first so you can enjoy GitLab's features to their fullest: + </p> <learn-gitlab-section-link-stub action="userAdded" value="[object Object]" 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 62cf769cffd..269c7467c8b 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 @@ -51,170 +51,204 @@ exports[`Learn GitLab renders correctly 1`] = ` </div> <div - class="row row-cols-1 row-cols-md-3 gl-mt-5" + class="row" > <div - class="col gl-mb-6" + class="gl-mt-5 col-sm-12 col-mb-6 col-lg-4" > <div - class="gl-card gl-pt-0 learn-gitlab-section-card" + class="gl-card gl-pt-0 h-100" > - <!----> - <div - class="gl-card-body" + class="gl-card-header gl-bg-white gl-border-0 gl-pb-0" > - <div - class="learn-gitlab-section-card-header" + <img + src="workspace.svg" + /> + + <h2 + class="gl-font-lg gl-mb-3" > - <img - src="workspace.svg" - /> - - <h2 - class="gl-font-lg gl-mb-3" - > - Set up your workspace - </h2> - - <p - class="gl-text-gray-700 gl-mb-6" - > - Complete these tasks first so you can enjoy GitLab's features to their fullest: - </p> - </div> + Set up your workspace + </h2> + <p + class="gl-text-gray-700 gl-mb-6" + > + Complete these tasks first so you can enjoy GitLab's features to their fullest: + </p> + </div> + + <div + class="gl-card-body gl-pt-0" + > <div class="gl-mb-4" > - <span - class="gl-text-green-500" + <!----> + + <div + class="flex align-items-center" > - <svg - aria-hidden="true" - class="gl-icon s16" - data-testid="completed-icon" - role="img" + <span + class="gl-text-green-500" > - <use - href="#check-circle-filled" - /> - </svg> - - Invite your colleagues - - </span> - - <!----> + <svg + aria-hidden="true" + class="gl-icon s16" + data-testid="completed-icon" + role="img" + > + <use + href="#check-circle-filled" + /> + </svg> + + Invite your colleagues + + </span> + + <!----> + </div> </div> <div class="gl-mb-4" > - <span - class="gl-text-green-500" + <!----> + + <div + class="flex align-items-center" > - <svg - aria-hidden="true" - class="gl-icon s16" - data-testid="completed-icon" - role="img" + <span + class="gl-text-green-500" > - <use - href="#check-circle-filled" - /> - </svg> - - Create or import a repository - - </span> - - <!----> + <svg + aria-hidden="true" + class="gl-icon s16" + data-testid="completed-icon" + role="img" + > + <use + href="#check-circle-filled" + /> + </svg> + + Create or import a repository + + </span> + + <!----> + </div> </div> <div class="gl-mb-4" > - <a - class="gl-link" - data-testid="uncompleted-learn-gitlab-link" - data-track-action="click_link" - data-track-label="Set up CI/CD" - href="http://example.com/" - target="_self" - > - - Set up CI/CD - - </a> - <!----> + + <div + class="flex align-items-center" + > + <a + class="gl-link" + data-testid="uncompleted-learn-gitlab-link" + data-track-action="click_link" + data-track-label="Set up CI/CD" + href="http://example.com/" + target="_self" + > + + Set up CI/CD + + </a> + + <!----> + </div> </div> <div class="gl-mb-4" > - <a - class="gl-link" - data-testid="uncompleted-learn-gitlab-link" - data-track-action="click_link" - data-track-label="Start a free Ultimate trial" - href="http://example.com/" - target="_self" - > - - Start a free Ultimate trial - - </a> - <!----> + + <div + class="flex align-items-center" + > + <a + class="gl-link" + data-testid="uncompleted-learn-gitlab-link" + data-track-action="click_link" + data-track-label="Start a free Ultimate trial" + href="http://example.com/" + target="_self" + > + + Start a free Ultimate trial + + </a> + + <!----> + </div> </div> <div class="gl-mb-4" > - <a - class="gl-link" - data-testid="uncompleted-learn-gitlab-link" - data-track-action="click_link" - data-track-label="Add code owners" - href="http://example.com/" - target="_self" - > - - Add code owners - - </a> - - <span + <div class="gl-font-style-italic gl-text-gray-500" data-testid="trial-only" > - - Trial only + Trial only - </span> + </div> + + <div + class="flex align-items-center" + > + <a + class="gl-link" + data-testid="uncompleted-learn-gitlab-link" + data-track-action="click_link" + data-track-label="Add code owners" + href="http://example.com/" + target="_self" + > + + Add code owners + + </a> + + <!----> + </div> </div> <div class="gl-mb-4" > - <a - class="gl-link" - data-testid="uncompleted-learn-gitlab-link" - data-track-action="click_link" - data-track-label="Add merge request approval" - href="http://example.com/" - target="_self" - > - - Add merge request approval - - </a> - - <span + <div class="gl-font-style-italic gl-text-gray-500" data-testid="trial-only" > - - Trial only + Trial only - </span> + </div> + + <div + class="flex align-items-center" + > + <a + class="gl-link" + data-testid="uncompleted-learn-gitlab-link" + data-track-action="click_link" + data-track-label="Add merge request approval" + href="http://example.com/" + target="_self" + > + + Add merge request approval + + </a> + + <!----> + </div> </div> </div> @@ -222,71 +256,81 @@ exports[`Learn GitLab renders correctly 1`] = ` </div> </div> <div - class="col gl-mb-6" + class="gl-mt-5 col-sm-12 col-mb-6 col-lg-4" > <div - class="gl-card gl-pt-0 learn-gitlab-section-card" + class="gl-card gl-pt-0 h-100" > - <!----> - <div - class="gl-card-body" + class="gl-card-header gl-bg-white gl-border-0 gl-pb-0" > - <div - class="learn-gitlab-section-card-header" + <img + src="plan.svg" + /> + + <h2 + class="gl-font-lg gl-mb-3" > - <img - src="plan.svg" - /> - - <h2 - class="gl-font-lg gl-mb-3" - > - Plan and execute - </h2> - - <p - class="gl-text-gray-700 gl-mb-6" - > - Create a workflow for your new workspace, and learn how GitLab features work together: - </p> - </div> + Plan and execute + </h2> + <p + class="gl-text-gray-700 gl-mb-6" + > + Create a workflow for your new workspace, and learn how GitLab features work together: + </p> + </div> + + <div + class="gl-card-body gl-pt-0" + > <div class="gl-mb-4" > - <a - class="gl-link" - data-testid="uncompleted-learn-gitlab-link" - data-track-action="click_link" - data-track-label="Create an issue" - href="http://example.com/" - target="_self" - > - - Create an issue - - </a> - <!----> + + <div + class="flex align-items-center" + > + <a + class="gl-link" + data-testid="uncompleted-learn-gitlab-link" + data-track-action="click_link" + data-track-label="Create an issue" + href="http://example.com/" + target="_self" + > + + Create an issue + + </a> + + <!----> + </div> </div> <div class="gl-mb-4" > - <a - class="gl-link" - data-testid="uncompleted-learn-gitlab-link" - data-track-action="click_link" - data-track-label="Submit a merge request" - href="http://example.com/" - target="_self" - > - - Submit a merge request - - </a> - <!----> + + <div + class="flex align-items-center" + > + <a + class="gl-link" + data-testid="uncompleted-learn-gitlab-link" + data-track-action="click_link" + data-track-label="Submit a merge request" + href="http://example.com/" + target="_self" + > + + Submit a merge request + + </a> + + <!----> + </div> </div> </div> @@ -294,54 +338,58 @@ exports[`Learn GitLab renders correctly 1`] = ` </div> </div> <div - class="col gl-mb-6" + class="gl-mt-5 col-sm-12 col-mb-6 col-lg-4" > <div - class="gl-card gl-pt-0 learn-gitlab-section-card" + class="gl-card gl-pt-0 h-100" > - <!----> - <div - class="gl-card-body" + class="gl-card-header gl-bg-white gl-border-0 gl-pb-0" > - <div - class="learn-gitlab-section-card-header" + <img + src="deploy.svg" + /> + + <h2 + class="gl-font-lg gl-mb-3" > - <img - src="deploy.svg" - /> - - <h2 - class="gl-font-lg gl-mb-3" - > - Deploy - </h2> - - <p - class="gl-text-gray-700 gl-mb-6" - > - Use your new GitLab workflow to deploy your application, monitor its health, and keep it secure: - </p> - </div> + Deploy + </h2> + <p + class="gl-text-gray-700 gl-mb-6" + > + Use your new GitLab workflow to deploy your application, monitor its health, and keep it secure: + </p> + </div> + + <div + class="gl-card-body gl-pt-0" + > <div class="gl-mb-4" > - <a - class="gl-link" - data-testid="uncompleted-learn-gitlab-link" - data-track-action="click_link" - data-track-label="Run a Security scan using CI/CD" - href="https://docs.gitlab.com/ee/foobar/" - rel="noopener noreferrer" - target="_blank" - > - - Run a Security scan using CI/CD - - </a> - <!----> + + <div + class="flex align-items-center" + > + <a + class="gl-link" + data-testid="uncompleted-learn-gitlab-link" + data-track-action="click_link" + data-track-label="Run a Security scan using CI/CD" + href="https://docs.gitlab.com/ee/foobar/" + rel="noopener noreferrer" + target="_blank" + > + + Run a Security scan using CI/CD + + </a> + + <!----> + </div> </div> </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 e21371123e8..b8ebf2a1430 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,4 @@ -import { shallowMount } from '@vue/test-utils'; +import { mount } 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'; @@ -26,7 +26,7 @@ describe('Learn GitLab Section Link', () => { }); const createWrapper = (action = defaultAction, props = {}) => { - wrapper = shallowMount(LearnGitlabSectionLink, { + wrapper = mount(LearnGitlabSectionLink, { propsData: { action, value: { ...defaultProps, ...props } }, }); }; @@ -36,6 +36,8 @@ describe('Learn GitLab Section Link', () => { const findUncompletedLink = () => wrapper.find('[data-testid="uncompleted-learn-gitlab-link"]'); + const videoTutorialLink = () => wrapper.find('[data-testid="video-tutorial-link"]'); + it('renders no icon when not completed', () => { createWrapper(undefined, { completed: false }); @@ -130,4 +132,51 @@ describe('Learn GitLab Section Link', () => { unmockTracking(); }); }); + + describe('video_tutorials_continuous_onboarding experiment', () => { + describe('when control', () => { + beforeEach(() => { + stubExperiments({ video_tutorials_continuous_onboarding: 'control' }); + createWrapper('codeOwnersEnabled'); + }); + + it('renders no video link', () => { + expect(videoTutorialLink().exists()).toBe(false); + }); + }); + + describe('when candidate', () => { + beforeEach(() => { + stubExperiments({ video_tutorials_continuous_onboarding: 'candidate' }); + createWrapper('codeOwnersEnabled'); + }); + + it('renders video link with blank target', () => { + const videoLinkElement = videoTutorialLink(); + + expect(videoLinkElement.exists()).toBe(true); + expect(videoLinkElement.attributes('target')).toEqual('_blank'); + }); + + it('tracks the click', () => { + const trackingSpy = mockTracking('_category_', wrapper.element, jest.spyOn); + + videoTutorialLink().trigger('click'); + + expect(trackingSpy).toHaveBeenCalledWith('_category_', 'click_video_link', { + label: 'Add code owners', + property: 'Growth::Conversion::Experiment::LearnGitLab', + context: { + data: { + experiment: 'video_tutorials_continuous_onboarding', + variant: 'candidate', + }, + schema: 'iglu:com.gitlab/gitlab_experiment/jsonschema/1-0-0', + }, + }); + + unmockTracking(); + }); + }); + }); }); |