diff options
Diffstat (limited to 'spec/frontend/vue_mr_widget/components')
7 files changed, 159 insertions, 208 deletions
diff --git a/spec/frontend/vue_mr_widget/components/mr_widget_header_spec.js b/spec/frontend/vue_mr_widget/components/mr_widget_header_spec.js index f44f0b98207..a09269e869c 100644 --- a/spec/frontend/vue_mr_widget/components/mr_widget_header_spec.js +++ b/spec/frontend/vue_mr_widget/components/mr_widget_header_spec.js @@ -1,6 +1,7 @@ import { shallowMount, mount } from '@vue/test-utils'; import { nextTick } from 'vue'; import Header from '~/vue_merge_request_widget/components/mr_widget_header.vue'; +import WebIdeLink from '~/vue_shared/components/web_ide_link.vue'; describe('MRWidgetHeader', () => { let wrapper; @@ -35,6 +36,8 @@ describe('MRWidgetHeader', () => { statusPath: 'abc', }; + const findWebIdeButton = () => wrapper.findComponent(WebIdeLink); + describe('computed', () => { describe('shouldShowCommitsBehindText', () => { it('return true when there are divergedCommitsCount', () => { @@ -147,73 +150,81 @@ describe('MRWidgetHeader', () => { statusPath: 'abc', sourceProjectFullPath: 'root/gitlab-ce', targetProjectFullPath: 'gitlab-org/gitlab-ce', + gitpodEnabled: true, + showGitpodButton: true, + gitpodUrl: 'http://gitpod.localhost', }; - beforeEach(() => { + it('renders checkout branch button with modal trigger', () => { createComponent({ mr: { ...mrDefaultOptions }, }); - }); - it('renders checkout branch button with modal trigger', () => { const button = wrapper.find('.js-check-out-branch'); expect(button.text().trim()).toBe('Check out branch'); }); - it('renders web ide button', async () => { - const button = wrapper.find('.js-web-ide'); - - await nextTick(); - - expect(button.text().trim()).toBe('Open in Web IDE'); - expect(button.classes('disabled')).toBe(false); - expect(button.attributes('href')).toBe( - '/-/ide/project/root/gitlab-ce/merge_requests/1?target_project=gitlab-org%2Fgitlab-ce', - ); - }); - - it('renders web ide button in disabled state with no href', async () => { - const mr = { ...mrDefaultOptions, canPushToSourceBranch: false }; - createComponent({ mr }); - - await nextTick(); - - const link = wrapper.find('.js-web-ide'); - - expect(link.attributes('disabled')).toBe('true'); - expect(link.attributes('href')).toBeUndefined(); - }); - - it('renders web ide button with blank query string if target & source project branch', async () => { - createComponent({ mr: { ...mrDefaultOptions, targetProjectFullPath: 'root/gitlab-ce' } }); + it.each([ + [ + 'renders web ide button', + { + mrProps: {}, + relativeUrl: '', + webIdeUrl: + '/-/ide/project/root/gitlab-ce/merge_requests/1?target_project=gitlab-org%2Fgitlab-ce', + }, + ], + [ + 'renders web ide button with blank target_project, when mr has same target project', + { + mrProps: { targetProjectFullPath: 'root/gitlab-ce' }, + relativeUrl: '', + webIdeUrl: '/-/ide/project/root/gitlab-ce/merge_requests/1?target_project=', + }, + ], + [ + 'renders web ide button with relative url', + { + mrProps: { iid: 2 }, + relativeUrl: '/gitlab', + webIdeUrl: + '/gitlab/-/ide/project/root/gitlab-ce/merge_requests/2?target_project=gitlab-org%2Fgitlab-ce', + }, + ], + ])('%s', async (_, { mrProps, relativeUrl, webIdeUrl }) => { + gon.relative_url_root = relativeUrl; + createComponent({ + mr: { ...mrDefaultOptions, ...mrProps }, + }); await nextTick(); - const button = wrapper.find('.js-web-ide'); - - expect(button.text().trim()).toBe('Open in Web IDE'); - expect(button.attributes('href')).toBe( - '/-/ide/project/root/gitlab-ce/merge_requests/1?target_project=', - ); + expect(findWebIdeButton().props()).toMatchObject({ + showEditButton: false, + showWebIdeButton: true, + webIdeText: 'Open in Web IDE', + gitpodText: 'Open in Gitpod', + gitpodEnabled: true, + showGitpodButton: true, + gitpodUrl: 'http://gitpod.localhost', + webIdeUrl, + }); }); - it('renders web ide button with relative URL', async () => { - gon.relative_url_root = '/gitlab'; - - createComponent({ mr: { ...mrDefaultOptions, iid: 2 } }); + it('does not render web ide button if source branch is removed', async () => { + createComponent({ mr: { ...mrDefaultOptions, sourceBranchRemoved: true } }); await nextTick(); - const button = wrapper.find('.js-web-ide'); - - expect(button.text().trim()).toBe('Open in Web IDE'); - expect(button.attributes('href')).toBe( - '/gitlab/-/ide/project/root/gitlab-ce/merge_requests/2?target_project=gitlab-org%2Fgitlab-ce', - ); + expect(findWebIdeButton().exists()).toBe(false); }); it('renders download dropdown with links', () => { + createComponent({ + mr: { ...mrDefaultOptions }, + }); + expectDownloadDropdownItems(); }); }); diff --git a/spec/frontend/vue_mr_widget/components/mr_widget_related_links_spec.js b/spec/frontend/vue_mr_widget/components/mr_widget_related_links_spec.js index a879b06e858..6ea8ca10c02 100644 --- a/spec/frontend/vue_mr_widget/components/mr_widget_related_links_spec.js +++ b/spec/frontend/vue_mr_widget/components/mr_widget_related_links_spec.js @@ -17,7 +17,7 @@ describe('MRWidgetRelatedLinks', () => { it('returns Closes text for open merge request', () => { createComponent({ state: 'open', relatedLinks: {} }); - expect(wrapper.vm.closesText).toBe('Closes'); + expect(wrapper.vm.closesText).toBe('Closes issues'); }); it('returns correct text for closed merge request', () => { @@ -38,6 +38,7 @@ describe('MRWidgetRelatedLinks', () => { createComponent({ relatedLinks: { closing: '<a href="#">#23</a> and <a>#42</a>', + closingCount: 2, }, }); const content = wrapper @@ -45,7 +46,7 @@ describe('MRWidgetRelatedLinks', () => { .replace(/\n(\s)+/g, ' ') .trim(); - expect(content).toContain('Closes #23 and #42'); + expect(content).toContain('Closes issues #23 and #42'); expect(content).not.toContain('Mentions'); }); @@ -53,11 +54,17 @@ describe('MRWidgetRelatedLinks', () => { createComponent({ relatedLinks: { mentioned: '<a href="#">#7</a>', + mentionedCount: 1, }, }); - expect(wrapper.text().trim()).toContain('Mentions #7'); - expect(wrapper.text().trim()).not.toContain('Closes'); + const content = wrapper + .text() + .replace(/\n(\s)+/g, ' ') + .trim(); + + expect(content).toContain('Mentions issue #7'); + expect(content).not.toContain('Closes issues'); }); it('should have closing and mentioned issues at the same time', () => { @@ -65,6 +72,8 @@ describe('MRWidgetRelatedLinks', () => { relatedLinks: { closing: '<a href="#">#7</a>', mentioned: '<a href="#">#23</a> and <a>#42</a>', + closingCount: 1, + mentionedCount: 2, }, }); const content = wrapper @@ -72,8 +81,8 @@ describe('MRWidgetRelatedLinks', () => { .replace(/\n(\s)+/g, ' ') .trim(); - expect(content).toContain('Closes #7'); - expect(content).toContain('Mentions #23 and #42'); + expect(content).toContain('Closes issue #7'); + expect(content).toContain('Mentions issues #23 and #42'); }); it('should have assing issues link', () => { diff --git a/spec/frontend/vue_mr_widget/components/states/__snapshots__/mr_widget_auto_merge_enabled_spec.js.snap b/spec/frontend/vue_mr_widget/components/states/__snapshots__/mr_widget_auto_merge_enabled_spec.js.snap index ac20487c55f..5981d2d7849 100644 --- a/spec/frontend/vue_mr_widget/components/states/__snapshots__/mr_widget_auto_merge_enabled_spec.js.snap +++ b/spec/frontend/vue_mr_widget/components/states/__snapshots__/mr_widget_auto_merge_enabled_spec.js.snap @@ -4,8 +4,10 @@ exports[`MRWidgetAutoMergeEnabled when graphql is disabled template should have <div class="mr-widget-body media" > - <status-icon-stub - status="success" + <gl-icon-stub + class="gl-text-blue-500 gl-mr-3 gl-mt-1" + name="status_scheduled" + size="24" /> <div @@ -17,55 +19,31 @@ exports[`MRWidgetAutoMergeEnabled when graphql is disabled template should have <span class="gl-mr-3" > - <span - class="js-status-text-before-author" - data-testid="beforeStatusText" - > - Set by - </span> - - <mr-widget-author-stub - author="[object Object]" - showauthorname="true" + <gl-sprintf-stub + data-testid="statusText" + message="Set by %{merge_author} to be merged automatically when the pipeline succeeds" /> - - <span - class="js-status-text-after-author" - data-testid="afterStatusText" - > - to be merged automatically when the pipeline succeeds - </span> </span> - <a - class="btn btn-sm btn-default js-cancel-auto-merge" + <gl-button-stub + buttontextclasses="" + category="primary" + class="js-cancel-auto-merge" data-qa-selector="cancel_auto_merge_button" data-testid="cancelAutomaticMergeButton" - href="#" - role="button" + icon="" + size="small" + variant="default" > - <!----> - Cancel + Cancel auto-merge - </a> + </gl-button-stub> </h4> <section class="mr-info-list" > - <p> - - The changes will be merged into - - <a - class="label-branch" - href="/foo/bar" - > - foo - </a> - </p> - <p class="gl-display-flex" > @@ -75,17 +53,19 @@ exports[`MRWidgetAutoMergeEnabled when graphql is disabled template should have The source branch will not be deleted </span> - <a - class="btn btn-sm btn-default js-remove-source-branch" + <gl-button-stub + buttontextclasses="" + category="primary" + class="js-remove-source-branch" data-testid="removeSourceBranchButton" - href="#" - role="button" + icon="" + size="small" + variant="default" > - <!----> Delete source branch - </a> + </gl-button-stub> </p> </section> </div> @@ -96,8 +76,10 @@ exports[`MRWidgetAutoMergeEnabled when graphql is enabled template should have c <div class="mr-widget-body media" > - <status-icon-stub - status="success" + <gl-icon-stub + class="gl-text-blue-500 gl-mr-3 gl-mt-1" + name="status_scheduled" + size="24" /> <div @@ -109,55 +91,31 @@ exports[`MRWidgetAutoMergeEnabled when graphql is enabled template should have c <span class="gl-mr-3" > - <span - class="js-status-text-before-author" - data-testid="beforeStatusText" - > - Set by - </span> - - <mr-widget-author-stub - author="[object Object]" - showauthorname="true" + <gl-sprintf-stub + data-testid="statusText" + message="Set by %{merge_author} to be merged automatically when the pipeline succeeds" /> - - <span - class="js-status-text-after-author" - data-testid="afterStatusText" - > - to be merged automatically when the pipeline succeeds - </span> </span> - <a - class="btn btn-sm btn-default js-cancel-auto-merge" + <gl-button-stub + buttontextclasses="" + category="primary" + class="js-cancel-auto-merge" data-qa-selector="cancel_auto_merge_button" data-testid="cancelAutomaticMergeButton" - href="#" - role="button" + icon="" + size="small" + variant="default" > - <!----> - Cancel + Cancel auto-merge - </a> + </gl-button-stub> </h4> <section class="mr-info-list" > - <p> - - The changes will be merged into - - <a - class="label-branch" - href="/foo/bar" - > - foo - </a> - </p> - <p class="gl-display-flex" > @@ -167,17 +125,19 @@ exports[`MRWidgetAutoMergeEnabled when graphql is enabled template should have c The source branch will not be deleted </span> - <a - class="btn btn-sm btn-default js-remove-source-branch" + <gl-button-stub + buttontextclasses="" + category="primary" + class="js-remove-source-branch" data-testid="removeSourceBranchButton" - href="#" - role="button" + icon="" + size="small" + variant="default" > - <!----> Delete source branch - </a> + </gl-button-stub> </p> </section> </div> diff --git a/spec/frontend/vue_mr_widget/components/states/__snapshots__/mr_widget_ready_to_merge_spec.js.snap b/spec/frontend/vue_mr_widget/components/states/__snapshots__/mr_widget_ready_to_merge_spec.js.snap deleted file mode 100644 index cef1dff3335..00000000000 --- a/spec/frontend/vue_mr_widget/components/states/__snapshots__/mr_widget_ready_to_merge_spec.js.snap +++ /dev/null @@ -1,3 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`ReadyToMerge with a mismatched SHA warns the user to refresh to review 1`] = `"<gl-sprintf-stub message=\\"New changes were added. %{linkStart}Reload the page to review them%{linkEnd}\\"></gl-sprintf-stub>"`; diff --git a/spec/frontend/vue_mr_widget/components/states/mr_widget_auto_merge_enabled_spec.js b/spec/frontend/vue_mr_widget/components/states/mr_widget_auto_merge_enabled_spec.js index 0110a76e722..4c1534574f5 100644 --- a/spec/frontend/vue_mr_widget/components/states/mr_widget_auto_merge_enabled_spec.js +++ b/spec/frontend/vue_mr_widget/components/states/mr_widget_auto_merge_enabled_spec.js @@ -72,6 +72,8 @@ const defaultMrProps = () => ({ autoMergeStrategy: MWPS_MERGE_STRATEGY, }); +const getStatusText = () => wrapper.findByTestId('statusText').attributes('message'); + describe('MRWidgetAutoMergeEnabled', () => { let oldWindowGl; @@ -167,30 +169,6 @@ describe('MRWidgetAutoMergeEnabled', () => { }); }); - describe('statusTextBeforeAuthor', () => { - it('should return "Set by" if the MWPS is selected', () => { - factory({ - ...defaultMrProps(), - autoMergeStrategy: MWPS_MERGE_STRATEGY, - }); - - expect(wrapper.findByTestId('beforeStatusText').text()).toBe('Set by'); - }); - }); - - describe('statusTextAfterAuthor', () => { - it('should return "to be merged automatically..." if MWPS is selected', () => { - factory({ - ...defaultMrProps(), - autoMergeStrategy: MWPS_MERGE_STRATEGY, - }); - - expect(wrapper.findByTestId('afterStatusText').text()).toBe( - 'to be merged automatically when the pipeline succeeds', - ); - }); - }); - describe('cancelButtonText', () => { it('should return "Cancel" if MWPS is selected', () => { factory({ @@ -198,7 +176,9 @@ describe('MRWidgetAutoMergeEnabled', () => { autoMergeStrategy: MWPS_MERGE_STRATEGY, }); - expect(wrapper.findByTestId('cancelAutomaticMergeButton').text()).toBe('Cancel'); + expect(wrapper.findByTestId('cancelAutomaticMergeButton').text()).toBe( + 'Cancel auto-merge', + ); }); }); }); @@ -279,7 +259,7 @@ describe('MRWidgetAutoMergeEnabled', () => { await nextTick(); - expect(wrapper.find('.js-cancel-auto-merge').attributes('disabled')).toBe('disabled'); + expect(wrapper.find('.js-cancel-auto-merge').props('loading')).toBe(true); }); it('should show source branch will be deleted text when it source branch set to remove', () => { @@ -313,7 +293,7 @@ describe('MRWidgetAutoMergeEnabled', () => { await nextTick(); - expect(wrapper.find('.js-remove-source-branch').attributes('disabled')).toBe('disabled'); + expect(wrapper.find('.js-remove-source-branch').props('loading')).toBe(true); }); it('should render the status text as "...to merged automatically" if MWPS is selected', () => { @@ -322,9 +302,9 @@ describe('MRWidgetAutoMergeEnabled', () => { autoMergeStrategy: MWPS_MERGE_STRATEGY, }); - const statusText = trimText(wrapper.find('.js-status-text-after-author').text()); - - expect(statusText).toBe('to be merged automatically when the pipeline succeeds'); + expect(getStatusText()).toBe( + 'Set by %{merge_author} to be merged automatically when the pipeline succeeds', + ); }); it('should render the cancel button as "Cancel" if MWPS is selected', () => { @@ -335,7 +315,7 @@ describe('MRWidgetAutoMergeEnabled', () => { const cancelButtonText = trimText(wrapper.find('.js-cancel-auto-merge').text()); - expect(cancelButtonText).toBe('Cancel'); + expect(cancelButtonText).toBe('Cancel auto-merge'); }); }); }); diff --git a/spec/frontend/vue_mr_widget/components/states/mr_widget_ready_to_merge_spec.js b/spec/frontend/vue_mr_widget/components/states/mr_widget_ready_to_merge_spec.js index cd77d442cbf..e41fb815c8d 100644 --- a/spec/frontend/vue_mr_widget/components/states/mr_widget_ready_to_merge_spec.js +++ b/spec/frontend/vue_mr_widget/components/states/mr_widget_ready_to_merge_spec.js @@ -1,4 +1,3 @@ -import { GlSprintf } from '@gitlab/ui'; import { shallowMount } from '@vue/test-utils'; import Vue from 'vue'; import simplePoll from '~/lib/utils/simple_poll'; @@ -782,26 +781,4 @@ describe('ReadyToMerge', () => { }); }); }); - - describe('with a mismatched SHA', () => { - const findMismatchShaBlock = () => wrapper.find('.js-sha-mismatch'); - const findMismatchShaTextBlock = () => findMismatchShaBlock().find(GlSprintf); - - beforeEach(() => { - createComponent({ - mr: { - isSHAMismatch: true, - mergeRequestDiffsPath: '/merge_requests/1/diffs', - }, - }); - }); - - it('displays a warning message', () => { - expect(findMismatchShaBlock().exists()).toBe(true); - }); - - it('warns the user to refresh to review', () => { - expect(findMismatchShaTextBlock().element.outerHTML).toMatchSnapshot(); - }); - }); }); diff --git a/spec/frontend/vue_mr_widget/components/states/mr_widget_sha_mismatch_spec.js b/spec/frontend/vue_mr_widget/components/states/mr_widget_sha_mismatch_spec.js index ef6a9b1e8fc..2a343997cf5 100644 --- a/spec/frontend/vue_mr_widget/components/states/mr_widget_sha_mismatch_spec.js +++ b/spec/frontend/vue_mr_widget/components/states/mr_widget_sha_mismatch_spec.js @@ -1,25 +1,42 @@ -import Vue from 'vue'; -import { removeBreakLine } from 'helpers/text_helper'; -import mountComponent from 'helpers/vue_mount_component_helper'; +import { mount } from '@vue/test-utils'; import ShaMismatch from '~/vue_merge_request_widget/components/states/sha_mismatch.vue'; +import { I18N_SHA_MISMATCH } from '~/vue_merge_request_widget/i18n'; + +function createComponent({ path = '' } = {}) { + return mount(ShaMismatch, { + propsData: { + mr: { + mergeRequestDiffsPath: path, + }, + }, + }); +} describe('ShaMismatch', () => { - let vm; + let wrapper; + const findActionButton = () => wrapper.find('[data-testid="action-button"]'); beforeEach(() => { - const Component = Vue.extend(ShaMismatch); - vm = mountComponent(Component); + wrapper = createComponent(); }); afterEach(() => { - vm.$destroy(); + wrapper.destroy(); + }); + + it('should render warning message', () => { + expect(wrapper.element.innerText).toContain(I18N_SHA_MISMATCH.warningMessage); }); - it('should render information message', () => { - expect(vm.$el.querySelector('button').disabled).toEqual(true); + it('action button should have correct label', () => { + expect(findActionButton().text()).toBe(I18N_SHA_MISMATCH.actionButtonLabel); + }); + + it('action button should link to the diff path', () => { + const DIFF_PATH = '/gitlab-org/gitlab-test/-/merge_requests/6/diffs'; + + wrapper = createComponent({ path: DIFF_PATH }); - expect(removeBreakLine(vm.$el.textContent).trim()).toContain( - 'The source branch HEAD has recently changed. Please reload the page and review the changes before merging', - ); + expect(findActionButton().attributes('href')).toBe(DIFF_PATH); }); }); |