diff options
Diffstat (limited to 'spec/frontend/pages/projects/learn_gitlab/components')
4 files changed, 59 insertions, 8 deletions
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 269c7467c8b..005b8968383 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 @@ -178,7 +178,8 @@ exports[`Learn GitLab renders correctly 1`] = ` data-track-action="click_link" data-track-label="Start a free Ultimate trial" href="http://example.com/" - target="_self" + rel="noopener noreferrer" + target="_blank" > Start a free Ultimate trial @@ -209,7 +210,8 @@ exports[`Learn GitLab renders correctly 1`] = ` data-track-action="click_link" data-track-label="Add code owners" href="http://example.com/" - target="_self" + rel="noopener noreferrer" + target="_blank" > Add code owners @@ -240,7 +242,8 @@ exports[`Learn GitLab renders correctly 1`] = ` data-track-action="click_link" data-track-label="Add merge request approval" href="http://example.com/" - target="_self" + rel="noopener noreferrer" + target="_blank" > Add merge request approval 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 b8ebf2a1430..d9aff37f703 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,8 +1,11 @@ +import { GlPopover, GlLink } from '@gitlab/ui'; import { mount } from '@vue/test-utils'; +import { extendedWrapper } from 'helpers/vue_test_utils_helper'; 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'; +import { ACTION_LABELS } from '~/pages/projects/learn_gitlab/constants'; const defaultAction = 'gitWrite'; const defaultProps = { @@ -10,6 +13,7 @@ const defaultProps = { description: 'Some description', url: 'https://example.com', completed: false, + enabled: true, }; const openInNewTabProps = { @@ -26,16 +30,21 @@ describe('Learn GitLab Section Link', () => { }); const createWrapper = (action = defaultAction, props = {}) => { - wrapper = mount(LearnGitlabSectionLink, { - propsData: { action, value: { ...defaultProps, ...props } }, - }); + wrapper = extendedWrapper( + mount(LearnGitlabSectionLink, { + propsData: { action, value: { ...defaultProps, ...props } }, + }), + ); }; const openInviteMembesrModalLink = () => wrapper.find('[data-testid="invite-for-help-continuous-onboarding-experiment-link"]'); const findUncompletedLink = () => wrapper.find('[data-testid="uncompleted-learn-gitlab-link"]'); - + const findDisabledLink = () => wrapper.findByTestId('disabled-learn-gitlab-link'); + const findPopoverTrigger = () => wrapper.findByTestId('contact-admin-popover-trigger'); + const findPopover = () => wrapper.findComponent(GlPopover); + const findPopoverLink = () => findPopover().findComponent(GlLink); const videoTutorialLink = () => wrapper.find('[data-testid="video-tutorial-link"]'); it('renders no icon when not completed', () => { @@ -62,6 +71,36 @@ describe('Learn GitLab Section Link', () => { expect(wrapper.find('[data-testid="trial-only"]').exists()).toBe(true); }); + describe('disabled links', () => { + beforeEach(() => { + createWrapper('trialStarted', { enabled: false }); + }); + + it('renders text without a link', () => { + expect(findDisabledLink().exists()).toBe(true); + expect(findDisabledLink().text()).toBe(ACTION_LABELS.trialStarted.title); + expect(findDisabledLink().attributes('href')).toBeUndefined(); + }); + + it('renders a popover trigger with question icon', () => { + expect(findPopoverTrigger().exists()).toBe(true); + expect(findPopoverTrigger().props('icon')).toBe('question-o'); + }); + + it('renders a popover', () => { + expect(findPopoverTrigger().attributes('id')).toBe(findPopover().props('target')); + expect(findPopover().props()).toMatchObject({ + placement: 'top', + triggers: 'hover focus', + }); + }); + + it('renders a link inside the popover', () => { + expect(findPopoverLink().exists()).toBe(true); + expect(findPopoverLink().attributes('href')).toBe(defaultProps.url); + }); + }); + describe('links marked with openInNewTab', () => { beforeEach(() => { createWrapper('securityScanEnabled', openInNewTabProps); 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 5f1aff99578..0f63c243342 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,6 +1,6 @@ import { GlProgressBar, GlAlert } from '@gitlab/ui'; import { mount } from '@vue/test-utils'; -import Cookies from 'js-cookie'; +import Cookies from '~/lib/utils/cookies'; import LearnGitlab from '~/pages/projects/learn_gitlab/components/learn_gitlab.vue'; import eventHub from '~/invite_members/event_hub'; import { INVITE_MODAL_OPEN_COOKIE } from '~/pages/projects/learn_gitlab/constants'; 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 5dc64097d81..1c29c68d2a9 100644 --- a/spec/frontend/pages/projects/learn_gitlab/components/mock_data.js +++ b/spec/frontend/pages/projects/learn_gitlab/components/mock_data.js @@ -3,47 +3,56 @@ export const testActions = { url: 'http://example.com/', completed: true, svg: 'http://example.com/images/illustration.svg', + enabled: true, }, userAdded: { url: 'http://example.com/', completed: true, svg: 'http://example.com/images/illustration.svg', + enabled: true, }, pipelineCreated: { url: 'http://example.com/', completed: false, svg: 'http://example.com/images/illustration.svg', + enabled: true, }, trialStarted: { url: 'http://example.com/', completed: false, svg: 'http://example.com/images/illustration.svg', + enabled: true, }, codeOwnersEnabled: { url: 'http://example.com/', completed: false, svg: 'http://example.com/images/illustration.svg', + enabled: true, }, requiredMrApprovalsEnabled: { url: 'http://example.com/', completed: false, svg: 'http://example.com/images/illustration.svg', + enabled: true, }, mergeRequestCreated: { url: 'http://example.com/', completed: false, svg: 'http://example.com/images/illustration.svg', + enabled: true, }, securityScanEnabled: { url: 'https://docs.gitlab.com/ee/foobar/', completed: false, svg: 'http://example.com/images/illustration.svg', + enabled: true, openInNewTab: true, }, issueCreated: { url: 'http://example.com/', completed: false, svg: 'http://example.com/images/illustration.svg', + enabled: true, }, }; |