diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2023-03-01 03:08:20 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2023-03-01 03:08:20 +0300 |
commit | d40f85a4030015db726d2e1bea1f2ab1e16d1eb1 (patch) | |
tree | 3cd7025c5a8bb6c41a8de2e0004e63dd2d1b51f2 /spec/frontend | |
parent | 86ad1426d8a8f5d7f20bc5d8b536d3034d829d1f (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'spec/frontend')
3 files changed, 62 insertions, 48 deletions
diff --git a/spec/frontend/ci/pipeline_editor/components/header/validation_segment_spec.js b/spec/frontend/ci/pipeline_editor/components/header/validation_segment_spec.js index 0853a6f4ca4..a107a626c6d 100644 --- a/spec/frontend/ci/pipeline_editor/components/header/validation_segment_spec.js +++ b/spec/frontend/ci/pipeline_editor/components/header/validation_segment_spec.js @@ -1,11 +1,10 @@ import VueApollo from 'vue-apollo'; -import { GlIcon } from '@gitlab/ui'; -import { shallowMount } from '@vue/test-utils'; +import { GlIcon, GlLink, GlSprintf } from '@gitlab/ui'; import Vue from 'vue'; import { escape } from 'lodash'; -import { extendedWrapper } from 'helpers/vue_test_utils_helper'; -import createMockApollo from 'helpers/mock_apollo_helper'; import { sprintf } from '~/locale'; +import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; +import createMockApollo from 'helpers/mock_apollo_helper'; import ValidationSegment, { i18n, } from '~/ci/pipeline_editor/components/header/validation_segment.vue'; @@ -20,8 +19,8 @@ import { } from '~/ci/pipeline_editor/constants'; import { mergeUnwrappedCiConfig, + mockCiTroubleshootingPath, mockCiYml, - mockLintUnavailableHelpPagePath, mockYmlHelpPagePath, } from '../../mock_data'; @@ -43,29 +42,27 @@ describe('Validation segment component', () => { }, }); - wrapper = extendedWrapper( - shallowMount(ValidationSegment, { - apolloProvider: mockApollo, - provide: { - ymlHelpPagePath: mockYmlHelpPagePath, - lintUnavailableHelpPagePath: mockLintUnavailableHelpPagePath, - }, - propsData: { - ciConfig: mergeUnwrappedCiConfig(), - ciFileContent: mockCiYml, - ...props, - }, - }), - ); + wrapper = shallowMountExtended(ValidationSegment, { + apolloProvider: mockApollo, + provide: { + ymlHelpPagePath: mockYmlHelpPagePath, + ciTroubleshootingPath: mockCiTroubleshootingPath, + }, + propsData: { + ciConfig: mergeUnwrappedCiConfig(), + ciFileContent: mockCiYml, + ...props, + }, + stubs: { + GlSprintf, + }, + }); }; const findIcon = () => wrapper.findComponent(GlIcon); - const findLearnMoreLink = () => wrapper.findByTestId('learnMoreLink'); - const findValidationMsg = () => wrapper.findByTestId('validationMsg'); - - afterEach(() => { - wrapper.destroy(); - }); + const findHelpLink = () => wrapper.findComponent(GlLink); + const findValidationMsg = () => wrapper.findComponent(GlSprintf); + const findValidationSegment = () => wrapper.findByTestId('validation-segment'); it('shows the loading state', () => { createComponent({ appStatus: EDITOR_APP_STATUS_LOADING }); @@ -82,8 +79,12 @@ describe('Validation segment component', () => { expect(findIcon().props('name')).toBe('check'); }); + it('does not render a link', () => { + expect(findHelpLink().exists()).toBe(false); + }); + it('shows a message for empty state', () => { - expect(findValidationMsg().text()).toBe(i18n.empty); + expect(findValidationSegment().text()).toBe(i18n.empty); }); }); @@ -97,12 +98,15 @@ describe('Validation segment component', () => { }); it('shows a message for valid state', () => { - expect(findValidationMsg().text()).toContain(i18n.valid); + expect(findValidationSegment().text()).toBe( + sprintf(i18n.valid, { linkStart: '', linkEnd: '' }), + ); }); it('shows the learn more link', () => { - expect(findLearnMoreLink().attributes('href')).toBe(mockYmlHelpPagePath); - expect(findLearnMoreLink().text()).toBe(i18n.learnMore); + expect(findValidationMsg().exists()).toBe(true); + expect(findValidationMsg().text()).toBe('Learn more'); + expect(findHelpLink().attributes('href')).toBe(mockYmlHelpPagePath); }); }); @@ -117,13 +121,16 @@ describe('Validation segment component', () => { expect(findIcon().props('name')).toBe('warning-solid'); }); - it('has message for invalid state', () => { - expect(findValidationMsg().text()).toBe(i18n.invalid); + it('shows a message for invalid state', () => { + expect(findValidationSegment().text()).toBe( + sprintf(i18n.invalid, { linkStart: '', linkEnd: '' }), + ); }); it('shows the learn more link', () => { - expect(findLearnMoreLink().attributes('href')).toBe(mockYmlHelpPagePath); - expect(findLearnMoreLink().text()).toBe('Learn more'); + expect(findValidationMsg().exists()).toBe(true); + expect(findValidationMsg().text()).toBe('Learn more'); + expect(findHelpLink().attributes('href')).toBe(mockYmlHelpPagePath); }); describe('with multiple errors', () => { @@ -140,11 +147,16 @@ describe('Validation segment component', () => { }, }); }); + + it('shows the learn more link', () => { + expect(findValidationMsg().exists()).toBe(true); + expect(findValidationMsg().text()).toBe('Learn more'); + expect(findHelpLink().attributes('href')).toBe(mockYmlHelpPagePath); + }); + it('shows an invalid state with an error', () => { - // Test the error is shown _and_ the string matches - expect(findValidationMsg().text()).toContain(firstError); - expect(findValidationMsg().text()).toBe( - sprintf(i18n.invalidWithReason, { reason: firstError }), + expect(findValidationSegment().text()).toBe( + sprintf(i18n.invalidWithReason, { reason: firstError, linkStart: '', linkEnd: '' }), ); }); }); @@ -163,10 +175,8 @@ describe('Validation segment component', () => { }); }); it('shows an invalid state with an error while preventing XSS', () => { - const { innerHTML } = findValidationMsg().element; - - expect(innerHTML).not.toContain(evilError); - expect(innerHTML).toContain(escape(evilError)); + expect(findValidationSegment().html()).not.toContain(evilError); + expect(findValidationSegment().html()).toContain(escape(evilError)); }); }); }); @@ -182,16 +192,18 @@ describe('Validation segment component', () => { }); it('show a message that the service is unavailable', () => { - expect(findValidationMsg().text()).toBe(i18n.unavailableValidation); + expect(findValidationSegment().text()).toBe( + sprintf(i18n.unavailableValidation, { linkStart: '', linkEnd: '' }), + ); }); it('shows the time-out icon', () => { expect(findIcon().props('name')).toBe('time-out'); }); - it('shows the learn more link', () => { - expect(findLearnMoreLink().attributes('href')).toBe(mockLintUnavailableHelpPagePath); - expect(findLearnMoreLink().text()).toBe(i18n.learnMore); + it('shows the link to ci troubleshooting', () => { + expect(findValidationMsg().exists()).toBe(true); + expect(findHelpLink().attributes('href')).toBe(mockCiTroubleshootingPath); }); }); }); diff --git a/spec/frontend/ci/pipeline_editor/mock_data.js b/spec/frontend/ci/pipeline_editor/mock_data.js index 93208090d70..ecfc477184b 100644 --- a/spec/frontend/ci/pipeline_editor/mock_data.js +++ b/spec/frontend/ci/pipeline_editor/mock_data.js @@ -12,7 +12,7 @@ export const mockCommitSha = 'aabbccdd'; export const mockCommitNextSha = 'eeffgghh'; export const mockIncludesHelpPagePath = '/-/includes/help'; export const mockLintHelpPagePath = '/-/lint-help'; -export const mockLintUnavailableHelpPagePath = '/-/pipeline-editor/troubleshoot'; +export const mockCiTroubleshootingPath = '/-/pipeline-editor/troubleshoot'; export const mockSimulatePipelineHelpPagePath = '/-/simulate-pipeline-help'; export const mockYmlHelpPagePath = '/-/yml-help'; export const mockCommitMessage = 'My commit message'; diff --git a/spec/frontend/ci/pipeline_editor/pipeline_editor_app_spec.js b/spec/frontend/ci/pipeline_editor/pipeline_editor_app_spec.js index 5855b805fc9..eadf1f0a404 100644 --- a/spec/frontend/ci/pipeline_editor/pipeline_editor_app_spec.js +++ b/spec/frontend/ci/pipeline_editor/pipeline_editor_app_spec.js @@ -1,4 +1,4 @@ -import { GlAlert, GlButton, GlLoadingIcon } from '@gitlab/ui'; +import { GlAlert, GlButton, GlLoadingIcon, GlSprintf } from '@gitlab/ui'; import { shallowMount, createLocalVue } from '@vue/test-utils'; import VueApollo from 'vue-apollo'; import createMockApollo from 'helpers/mock_apollo_helper'; @@ -358,7 +358,9 @@ describe('Pipeline editor app component', () => { }); it('shows that the lint service is down', () => { - expect(findValidationSegment().text()).toContain( + const validationMessage = findValidationSegment().findComponent(GlSprintf); + + expect(validationMessage.attributes('message')).toContain( validationSegmenti18n.unavailableValidation, ); }); |