diff options
Diffstat (limited to 'spec/frontend/vue_merge_request_widget/components/states')
11 files changed, 397 insertions, 280 deletions
diff --git a/spec/frontend/vue_merge_request_widget/components/states/__snapshots__/mr_widget_auto_merge_enabled_spec.js.snap b/spec/frontend/vue_merge_request_widget/components/states/__snapshots__/mr_widget_auto_merge_enabled_spec.js.snap index de25e2a0450..635ef0f6b0d 100644 --- a/spec/frontend/vue_merge_request_widget/components/states/__snapshots__/mr_widget_auto_merge_enabled_spec.js.snap +++ b/spec/frontend/vue_merge_request_widget/components/states/__snapshots__/mr_widget_auto_merge_enabled_spec.js.snap @@ -4,117 +4,171 @@ exports[`MRWidgetAutoMergeEnabled when graphql is disabled template should have <div class="mr-widget-body media" > - <svg - aria-hidden="true" - class="gl-text-blue-500 gl-mr-3 gl-mt-1 gl-icon s24" - data-testid="status_scheduled-icon" - role="img" - > - <use - href="#status_scheduled" - /> - </svg> - <div - class="media-body gl-display-flex" + class="gl-w-6 gl-h-6 gl-display-flex gl-align-self-start gl-mr-3" > - - <h4 - class="gl-mr-3" - data-testid="statusText" + <div + class="gl-display-flex gl-m-auto" > - Set by - <a - class="author-link inline" + <div + class="gl-mr-3 gl-p-2 gl-m-0! gl-text-blue-500 gl-w-6 gl-p-2" > - <img - class="avatar avatar-inline s16" - src="no_avatar.png" - /> - - <span - class="author" + <div + class="gl-rounded-full gl-relative gl-display-flex mr-widget-extension-icon" > - - </span> - </a> - to be merged automatically when the pipeline succeeds - </h4> - + <div + class="gl-absolute gl-top-half gl-left-50p gl-translate-x-n50 gl-display-flex gl-m-auto" + > + <div + class="gl-display-flex gl-m-auto gl-translate-y-n50" + > + <svg + aria-label="Scheduled " + class="gl-display-block gl-icon s12" + data-qa-selector="status_scheduled_icon" + data-testid="status-scheduled-icon" + role="img" + > + <use + href="#status-scheduled" + /> + </svg> + </div> + </div> + </div> + </div> + </div> + </div> + + <div + class="gl-display-flex gl-w-full" + > <div - class="gl-display-flex gl-md-display-block gl-font-size-0 gl-ml-auto gl-mt-1" + class="media-body gl-display-flex" > - <div> - <div - class="dropdown b-dropdown gl-new-dropdown gl-display-block gl-md-display-none! btn-group" - lazy="" - no-caret="" + + <h4 + class="gl-mr-3" + data-testid="statusText" + > + Set by + <a + class="author-link inline" > - <!----> + <img + class="avatar avatar-inline s16" + src="no_avatar.png" + /> + + <span + class="author" + > + + </span> + </a> + to be merged automatically when the pipeline succeeds + </h4> + + <div + class="gl-display-flex gl-md-display-block gl-font-size-0 gl-ml-auto" + > + <div> + <div + class="dropdown b-dropdown gl-new-dropdown gl-display-block gl-md-display-none! btn-group" + lazy="" + no-caret="" + > + <!----> + <button + aria-expanded="false" + aria-haspopup="true" + class="btn dropdown-toggle btn-default btn-sm gl-p-2! gl-button gl-dropdown-toggle btn-default-tertiary dropdown-icon-only dropdown-toggle-no-caret" + type="button" + > + <!----> + + <svg + aria-hidden="true" + class="dropdown-icon gl-icon s16" + data-testid="ellipsis_v-icon" + role="img" + > + <use + href="#ellipsis_v" + /> + </svg> + + <span + class="gl-new-dropdown-button-text gl-sr-only" + > + + </span> + + <svg + aria-hidden="true" + class="gl-button-icon dropdown-chevron gl-icon s16" + data-testid="chevron-down-icon" + role="img" + > + <use + href="#chevron-down" + /> + </svg> + </button> + <ul + class="dropdown-menu dropdown-menu-right" + role="menu" + tabindex="-1" + > + <!----> + </ul> + </div> + <button - aria-expanded="false" - aria-haspopup="true" - class="btn dropdown-toggle btn-default btn-sm gl-p-2! gl-button gl-dropdown-toggle btn-default-tertiary dropdown-icon-only dropdown-toggle-no-caret" + class="btn gl-display-none gl-md-display-block gl-float-left btn-confirm btn-sm gl-button btn-confirm-tertiary js-cancel-auto-merge" + data-qa-selector="cancel_auto_merge_button" + data-testid="cancelAutomaticMergeButton" type="button" > <!----> - <svg - aria-hidden="true" - class="dropdown-icon gl-icon s16" - data-testid="ellipsis_v-icon" - role="img" - > - <use - href="#ellipsis_v" - /> - </svg> - + <!----> + <span - class="gl-new-dropdown-button-text gl-sr-only" + class="gl-button-text" > + Cancel auto-merge + </span> - - <svg - aria-hidden="true" - class="gl-button-icon dropdown-chevron gl-icon s16" - data-testid="chevron-down-icon" - role="img" - > - <use - href="#chevron-down" - /> - </svg> </button> - <ul - class="dropdown-menu dropdown-menu-right" - role="menu" - tabindex="-1" - > - <!----> - </ul> </div> + </div> + </div> + + <div + class="gl-md-display-none gl-border-l-1 gl-border-l-solid gl-border-gray-100 gl-ml-3 gl-pl-3 gl-h-6 gl-mt-1" + > + <button + class="btn gl-vertical-align-top btn-default btn-sm gl-button btn-default-tertiary btn-icon" + title="Collapse merge details" + type="button" + > + <!----> - <button - class="btn gl-display-none gl-md-display-block gl-float-left btn-confirm btn-sm gl-button btn-confirm-tertiary js-cancel-auto-merge" - data-qa-selector="cancel_auto_merge_button" - data-testid="cancelAutomaticMergeButton" - type="button" + <svg + aria-hidden="true" + class="gl-button-icon gl-icon s16" + data-testid="chevron-lg-up-icon" + role="img" > - <!----> - - <!----> - - <span - class="gl-button-text" - > - - Cancel auto-merge - - </span> - </button> - </div> + <use + href="#chevron-lg-up" + /> + </svg> + + <!----> + </button> </div> </div> </div> @@ -124,117 +178,171 @@ exports[`MRWidgetAutoMergeEnabled when graphql is enabled template should have c <div class="mr-widget-body media" > - <svg - aria-hidden="true" - class="gl-text-blue-500 gl-mr-3 gl-mt-1 gl-icon s24" - data-testid="status_scheduled-icon" - role="img" - > - <use - href="#status_scheduled" - /> - </svg> - <div - class="media-body gl-display-flex" + class="gl-w-6 gl-h-6 gl-display-flex gl-align-self-start gl-mr-3" > - - <h4 - class="gl-mr-3" - data-testid="statusText" + <div + class="gl-display-flex gl-m-auto" > - Set by - <a - class="author-link inline" + <div + class="gl-mr-3 gl-p-2 gl-m-0! gl-text-blue-500 gl-w-6 gl-p-2" > - <img - class="avatar avatar-inline s16" - src="no_avatar.png" - /> - - <span - class="author" + <div + class="gl-rounded-full gl-relative gl-display-flex mr-widget-extension-icon" > - - </span> - </a> - to be merged automatically when the pipeline succeeds - </h4> - + <div + class="gl-absolute gl-top-half gl-left-50p gl-translate-x-n50 gl-display-flex gl-m-auto" + > + <div + class="gl-display-flex gl-m-auto gl-translate-y-n50" + > + <svg + aria-label="Scheduled " + class="gl-display-block gl-icon s12" + data-qa-selector="status_scheduled_icon" + data-testid="status-scheduled-icon" + role="img" + > + <use + href="#status-scheduled" + /> + </svg> + </div> + </div> + </div> + </div> + </div> + </div> + + <div + class="gl-display-flex gl-w-full" + > <div - class="gl-display-flex gl-md-display-block gl-font-size-0 gl-ml-auto gl-mt-1" + class="media-body gl-display-flex" > - <div> - <div - class="dropdown b-dropdown gl-new-dropdown gl-display-block gl-md-display-none! btn-group" - lazy="" - no-caret="" + + <h4 + class="gl-mr-3" + data-testid="statusText" + > + Set by + <a + class="author-link inline" > - <!----> + <img + class="avatar avatar-inline s16" + src="no_avatar.png" + /> + + <span + class="author" + > + + </span> + </a> + to be merged automatically when the pipeline succeeds + </h4> + + <div + class="gl-display-flex gl-md-display-block gl-font-size-0 gl-ml-auto" + > + <div> + <div + class="dropdown b-dropdown gl-new-dropdown gl-display-block gl-md-display-none! btn-group" + lazy="" + no-caret="" + > + <!----> + <button + aria-expanded="false" + aria-haspopup="true" + class="btn dropdown-toggle btn-default btn-sm gl-p-2! gl-button gl-dropdown-toggle btn-default-tertiary dropdown-icon-only dropdown-toggle-no-caret" + type="button" + > + <!----> + + <svg + aria-hidden="true" + class="dropdown-icon gl-icon s16" + data-testid="ellipsis_v-icon" + role="img" + > + <use + href="#ellipsis_v" + /> + </svg> + + <span + class="gl-new-dropdown-button-text gl-sr-only" + > + + </span> + + <svg + aria-hidden="true" + class="gl-button-icon dropdown-chevron gl-icon s16" + data-testid="chevron-down-icon" + role="img" + > + <use + href="#chevron-down" + /> + </svg> + </button> + <ul + class="dropdown-menu dropdown-menu-right" + role="menu" + tabindex="-1" + > + <!----> + </ul> + </div> + <button - aria-expanded="false" - aria-haspopup="true" - class="btn dropdown-toggle btn-default btn-sm gl-p-2! gl-button gl-dropdown-toggle btn-default-tertiary dropdown-icon-only dropdown-toggle-no-caret" + class="btn gl-display-none gl-md-display-block gl-float-left btn-confirm btn-sm gl-button btn-confirm-tertiary js-cancel-auto-merge" + data-qa-selector="cancel_auto_merge_button" + data-testid="cancelAutomaticMergeButton" type="button" > <!----> - <svg - aria-hidden="true" - class="dropdown-icon gl-icon s16" - data-testid="ellipsis_v-icon" - role="img" - > - <use - href="#ellipsis_v" - /> - </svg> - + <!----> + <span - class="gl-new-dropdown-button-text gl-sr-only" + class="gl-button-text" > + Cancel auto-merge + </span> - - <svg - aria-hidden="true" - class="gl-button-icon dropdown-chevron gl-icon s16" - data-testid="chevron-down-icon" - role="img" - > - <use - href="#chevron-down" - /> - </svg> </button> - <ul - class="dropdown-menu dropdown-menu-right" - role="menu" - tabindex="-1" - > - <!----> - </ul> </div> + </div> + </div> + + <div + class="gl-md-display-none gl-border-l-1 gl-border-l-solid gl-border-gray-100 gl-ml-3 gl-pl-3 gl-h-6 gl-mt-1" + > + <button + class="btn gl-vertical-align-top btn-default btn-sm gl-button btn-default-tertiary btn-icon" + title="Collapse merge details" + type="button" + > + <!----> - <button - class="btn gl-display-none gl-md-display-block gl-float-left btn-confirm btn-sm gl-button btn-confirm-tertiary js-cancel-auto-merge" - data-qa-selector="cancel_auto_merge_button" - data-testid="cancelAutomaticMergeButton" - type="button" + <svg + aria-hidden="true" + class="gl-button-icon gl-icon s16" + data-testid="chevron-lg-up-icon" + role="img" > - <!----> - - <!----> - - <span - class="gl-button-text" - > - - Cancel auto-merge - - </span> - </button> - </div> + <use + href="#chevron-lg-up" + /> + </svg> + + <!----> + </button> </div> </div> </div> diff --git a/spec/frontend/vue_merge_request_widget/components/states/__snapshots__/mr_widget_pipeline_failed_spec.js.snap b/spec/frontend/vue_merge_request_widget/components/states/__snapshots__/mr_widget_pipeline_failed_spec.js.snap deleted file mode 100644 index 7e741bf4660..00000000000 --- a/spec/frontend/vue_merge_request_widget/components/states/__snapshots__/mr_widget_pipeline_failed_spec.js.snap +++ /dev/null @@ -1,24 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`PipelineFailed should render error message with a disabled merge button 1`] = ` -<div - class="mr-widget-body media" -> - <status-icon-stub - show-disabled-button="true" - status="warning" - /> - - <div - class="media-body space-children" - > - <span - class="gl-ml-0! gl-text-body! bold" - > - <gl-sprintf-stub - message="Merge blocked: pipeline must succeed. Push a commit that fixes the failure, or %{linkStart}learn about other solutions.%{linkEnd}" - /> - </span> - </div> -</div> -`; diff --git a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_archived_spec.js b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_archived_spec.js index 9332b7e334a..5c07f4ce143 100644 --- a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_archived_spec.js +++ b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_archived_spec.js @@ -1,25 +1,26 @@ -import Vue from 'vue'; -import mountComponent from 'helpers/vue_mount_component_helper'; +import { shallowMount } from '@vue/test-utils'; import archivedComponent from '~/vue_merge_request_widget/components/states/mr_widget_archived.vue'; +import StateContainer from '~/vue_merge_request_widget/components/state_container.vue'; describe('MRWidgetArchived', () => { - let vm; + let wrapper; beforeEach(() => { - const Component = Vue.extend(archivedComponent); - vm = mountComponent(Component); + wrapper = shallowMount(archivedComponent, { propsData: { mr: {} } }); }); afterEach(() => { - vm.$destroy(); + wrapper.destroy(); + wrapper = null; }); - it('renders a ci status failed icon', () => { - expect(vm.$el.querySelector('.ci-status-icon')).not.toBeNull(); + it('renders error icon', () => { + expect(wrapper.findComponent(StateContainer).exists()).toBe(true); + expect(wrapper.findComponent(StateContainer).props().status).toBe('failed'); }); - it('renders information', () => { - expect(vm.$el.querySelector('.bold').textContent.trim()).toEqual( + it('renders information about merging', () => { + expect(wrapper.text()).toContain( 'Merge unavailable: merge requests are read-only on archived projects.', ); }); diff --git a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_checking_spec.js b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_checking_spec.js index 02de426204b..ac18ccf9e26 100644 --- a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_checking_spec.js +++ b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_checking_spec.js @@ -1,27 +1,25 @@ -import Vue from 'vue'; -import mountComponent from 'helpers/vue_mount_component_helper'; -import checkingComponent from '~/vue_merge_request_widget/components/states/mr_widget_checking.vue'; +import { shallowMount } from '@vue/test-utils'; +import CheckingComponent from '~/vue_merge_request_widget/components/states/mr_widget_checking.vue'; +import StateContainer from '~/vue_merge_request_widget/components/state_container.vue'; describe('MRWidgetChecking', () => { - let Component; - let vm; + let wrapper; beforeEach(() => { - Component = Vue.extend(checkingComponent); - vm = mountComponent(Component); + wrapper = shallowMount(CheckingComponent, { propsData: { mr: {} } }); }); afterEach(() => { - vm.$destroy(); + wrapper.destroy(); + wrapper = null; }); it('renders loading icon', () => { - expect(vm.$el.querySelector('.mr-widget-icon span').classList).toContain('gl-spinner'); + expect(wrapper.findComponent(StateContainer).exists()).toBe(true); + expect(wrapper.findComponent(StateContainer).props().status).toBe('loading'); }); it('renders information about merging', () => { - expect(vm.$el.querySelector('.media-body').textContent.trim()).toEqual( - 'Checking if merge request can be merged…', - ); + expect(wrapper.text()).toContain('Checking if merge request can be merged…'); }); }); diff --git a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_closed_spec.js b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_closed_spec.js index f7d046eb8f9..06ee017dee7 100644 --- a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_closed_spec.js +++ b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_closed_spec.js @@ -1,39 +1,54 @@ -import Vue from 'vue'; -import mountComponent from 'helpers/vue_mount_component_helper'; +import { shallowMount } from '@vue/test-utils'; import closedComponent from '~/vue_merge_request_widget/components/states/mr_widget_closed.vue'; +import MrWidgetAuthorTime from '~/vue_merge_request_widget/components/mr_widget_author_time.vue'; +import StateContainer from '~/vue_merge_request_widget/components/state_container.vue'; + +const MOCK_DATA = { + metrics: { + mergedBy: {}, + closedBy: { + name: 'Administrator', + username: 'root', + webUrl: 'http://localhost:3000/root', + avatarUrl: 'http://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon', + }, + mergedAt: 'Jan 24, 2018 1:02pm UTC', + closedAt: 'Jan 24, 2018 1:02pm UTC', + readableMergedAt: '', + readableClosedAt: 'less than a minute ago', + }, + targetBranchPath: '/twitter/flight/commits/so_long_jquery', + targetBranch: 'so_long_jquery', +}; describe('MRWidgetClosed', () => { - let vm; + let wrapper; beforeEach(() => { - const Component = Vue.extend(closedComponent); - vm = mountComponent(Component, { - mr: { - metrics: { - mergedBy: {}, - closedBy: { - name: 'Administrator', - username: 'root', - webUrl: 'http://localhost:3000/root', - avatarUrl: - 'http://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon', - }, - mergedAt: 'Jan 24, 2018 1:02pm UTC', - closedAt: 'Jan 24, 2018 1:02pm UTC', - readableMergedAt: '', - readableClosedAt: 'less than a minute ago', - }, - targetBranchPath: '/twitter/flight/commits/so_long_jquery', - targetBranch: 'so_long_jquery', + wrapper = shallowMount(closedComponent, { + propsData: { + mr: MOCK_DATA, }, }); }); afterEach(() => { - vm.$destroy(); + wrapper.destroy(); + wrapper = null; + }); + + it('renders closed icon', () => { + expect(wrapper.findComponent(StateContainer).exists()).toBe(true); + expect(wrapper.findComponent(StateContainer).props().status).toBe('closed'); }); - it('renders warning icon', () => { - expect(vm.$el.querySelector('.js-ci-status-icon-warning')).not.toBeNull(); + it('renders mr widget author time', () => { + expect(wrapper.findComponent(MrWidgetAuthorTime).exists()).toBe(true); + expect(wrapper.findComponent(MrWidgetAuthorTime).props()).toEqual({ + actionText: 'Closed by', + author: MOCK_DATA.metrics.closedBy, + dateTitle: MOCK_DATA.metrics.closedAt, + dateReadable: MOCK_DATA.metrics.readableClosedAt, + }); }); }); diff --git a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_commit_message_dropdown_spec.js b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_commit_message_dropdown_spec.js index 663fabb761c..5d2d1fdd6f1 100644 --- a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_commit_message_dropdown_spec.js +++ b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_commit_message_dropdown_spec.js @@ -40,7 +40,7 @@ describe('Commits message dropdown component', () => { wrapper.destroy(); }); - const findDropdownElements = () => wrapper.findAll(GlDropdownItem); + const findDropdownElements = () => wrapper.findAllComponents(GlDropdownItem); const findFirstDropdownElement = () => findDropdownElements().at(0); it('should have 3 elements in dropdown list', () => { diff --git a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_failed_to_merge_spec.js b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_failed_to_merge_spec.js index 989aa76f09b..833fa27d453 100644 --- a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_failed_to_merge_spec.js +++ b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_failed_to_merge_spec.js @@ -1,6 +1,7 @@ import { shallowMount } from '@vue/test-utils'; import { nextTick } from 'vue'; import MrWidgetFailedToMerge from '~/vue_merge_request_widget/components/states/mr_widget_failed_to_merge.vue'; +import StateContainer from '~/vue_merge_request_widget/components/state_container.vue'; import eventHub from '~/vue_merge_request_widget/event_hub'; describe('MRWidgetFailedToMerge', () => { @@ -39,7 +40,7 @@ describe('MRWidgetFailedToMerge', () => { expect(wrapper.vm.intervalId).toBe(dummyIntervalId); }); - it('clears interval when destroying ', () => { + it('clears interval when destroying', () => { createComponent(); wrapper.destroy(); @@ -128,7 +129,11 @@ describe('MRWidgetFailedToMerge', () => { await nextTick(); - expect(wrapper.find('.js-refresh-label').text().trim()).toBe('Refreshing now'); + const stateContainerWrapper = wrapper.findComponent(StateContainer); + + expect(stateContainerWrapper.exists()).toBe(true); + expect(stateContainerWrapper.props('status')).toBe('loading'); + expect(stateContainerWrapper.text().trim()).toBe('Refreshing now'); }); }); @@ -146,9 +151,9 @@ describe('MRWidgetFailedToMerge', () => { }); it('renders refresh button', () => { - expect( - wrapper.find('[data-testid="merge-request-failed-refresh-button"]').text().trim(), - ).toBe('Refresh now'); + expect(wrapper.findComponent(StateContainer).props('actions')).toMatchObject([ + { text: 'Refresh now', onClick: expect.any(Function) }, + ]); }); it('renders remaining time', () => { diff --git a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_not_allowed_spec.js b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_not_allowed_spec.js index 63e93074857..c6e7198c678 100644 --- a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_not_allowed_spec.js +++ b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_not_allowed_spec.js @@ -1,25 +1,27 @@ -import Vue from 'vue'; -import mountComponent from 'helpers/vue_mount_component_helper'; +import { shallowMount } from '@vue/test-utils'; import notAllowedComponent from '~/vue_merge_request_widget/components/states/mr_widget_not_allowed.vue'; +import StatusIcon from '~/vue_merge_request_widget/components/mr_widget_status_icon.vue'; describe('MRWidgetNotAllowed', () => { - let vm; + let wrapper; + beforeEach(() => { - const Component = Vue.extend(notAllowedComponent); - vm = mountComponent(Component); + wrapper = shallowMount(notAllowedComponent); }); afterEach(() => { - vm.$destroy(); + wrapper.destroy(); + wrapper = null; }); it('renders success icon', () => { - expect(vm.$el.querySelector('.ci-status-icon-success')).not.toBe(null); + expect(wrapper.findComponent(StatusIcon).exists()).toBe(true); + expect(wrapper.findComponent(StatusIcon).props().status).toBe('success'); }); it('renders informative text', () => { - expect(vm.$el.innerText).toContain('Ready to be merged automatically.'); - expect(vm.$el.innerText).toContain( + expect(wrapper.text()).toContain('Ready to be merged automatically.'); + expect(wrapper.text()).toContain( 'Ask someone with write access to this repository to merge this request', ); }); diff --git a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_pipeline_blocked_spec.js b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_pipeline_blocked_spec.js index 9b10b078e89..4219ad70b4c 100644 --- a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_pipeline_blocked_spec.js +++ b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_pipeline_blocked_spec.js @@ -1,26 +1,25 @@ -import { shallowMount, mount } from '@vue/test-utils'; +import { shallowMount } from '@vue/test-utils'; import PipelineBlockedComponent from '~/vue_merge_request_widget/components/states/mr_widget_pipeline_blocked.vue'; +import StatusIcon from '~/vue_merge_request_widget/components/mr_widget_status_icon.vue'; describe('MRWidgetPipelineBlocked', () => { let wrapper; - const createWrapper = (mountFn = shallowMount) => { - wrapper = mountFn(PipelineBlockedComponent); - }; + beforeEach(() => { + wrapper = shallowMount(PipelineBlockedComponent); + }); afterEach(() => { wrapper.destroy(); + wrapper = null; }); - it('renders warning icon', () => { - createWrapper(mount); - - expect(wrapper.find('.ci-status-icon-warning').exists()).toBe(true); + it('renders error icon', () => { + expect(wrapper.findComponent(StatusIcon).exists()).toBe(true); + expect(wrapper.findComponent(StatusIcon).props().status).toBe('failed'); }); it('renders information text', () => { - createWrapper(); - expect(wrapper.text()).toBe( "Merge blocked: pipeline must succeed. It's waiting for a manual action to continue.", ); diff --git a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_pipeline_failed_spec.js b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_pipeline_failed_spec.js index 4e44ac539f2..d5619d4996d 100644 --- a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_pipeline_failed_spec.js +++ b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_pipeline_failed_spec.js @@ -1,11 +1,17 @@ +import { GlSprintf, GlLink } from '@gitlab/ui'; import { shallowMount } from '@vue/test-utils'; import PipelineFailed from '~/vue_merge_request_widget/components/states/pipeline_failed.vue'; +import StatusIcon from '~/vue_merge_request_widget/components/mr_widget_status_icon.vue'; describe('PipelineFailed', () => { let wrapper; const createComponent = () => { - wrapper = shallowMount(PipelineFailed); + wrapper = shallowMount(PipelineFailed, { + stubs: { + GlSprintf, + }, + }); }; beforeEach(() => { @@ -17,7 +23,14 @@ describe('PipelineFailed', () => { wrapper = null; }); + it('should render error status icon', () => { + expect(wrapper.findComponent(StatusIcon).exists()).toBe(true); + expect(wrapper.findComponent(StatusIcon).props().status).toBe('failed'); + }); + it('should render error message with a disabled merge button', () => { - expect(wrapper.element).toMatchSnapshot(); + expect(wrapper.text()).toContain('Merge blocked: pipeline must succeed.'); + expect(wrapper.text()).toContain('Push a commit that fixes the failure'); + expect(wrapper.findComponent(GlLink).text()).toContain('learn about other solutions'); }); }); diff --git a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_ready_to_merge_spec.js b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_ready_to_merge_spec.js index 6e89cd41559..9a6bf66909e 100644 --- a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_ready_to_merge_spec.js +++ b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_ready_to_merge_spec.js @@ -111,7 +111,7 @@ const createComponent = ( }; const findCheckboxElement = () => wrapper.find(SquashBeforeMerge); -const findCommitEditElements = () => wrapper.findAll(CommitEdit); +const findCommitEditElements = () => wrapper.findAllComponents(CommitEdit); const findCommitDropdownElement = () => wrapper.find(CommitMessageDropdown); const findFirstCommitEditLabel = () => findCommitEditElements().at(0).props('label'); const findTipLink = () => wrapper.find(GlSprintf); @@ -549,7 +549,7 @@ describe('ReadyToMerge', () => { ${'squashIsSelected'} | ${'selected'} | ${'value'} | ${false} ${'squashIsSelected'} | ${'unselected'} | ${'value'} | ${false} `( - 'is $state when squashIsReadonly returns $expectation ', + 'is $state when squashIsReadonly returns $expectation', ({ squashState, prop, expectation }) => { createComponent({ mr: { commitsCount: 2, enableSquashBeforeMerge: true, [squashState]: expectation }, |