diff options
Diffstat (limited to 'spec/frontend/branches')
7 files changed, 97 insertions, 100 deletions
diff --git a/spec/frontend/branches/components/__snapshots__/delete_merged_branches_spec.js.snap b/spec/frontend/branches/components/__snapshots__/delete_merged_branches_spec.js.snap index 6aab3b51806..300b6f4a39a 100644 --- a/spec/frontend/branches/components/__snapshots__/delete_merged_branches_spec.js.snap +++ b/spec/frontend/branches/components/__snapshots__/delete_merged_branches_spec.js.snap @@ -2,25 +2,34 @@ exports[`Delete merged branches component Delete merged branches confirmation modal matches snapshot 1`] = ` <div> - <b-button-stub - class="gl-mr-3 gl-button btn-danger-secondary" - data-qa-selector="delete_merged_branches_button" - size="md" - tag="button" - type="button" - variant="danger" + <gl-base-dropdown-stub + category="tertiary" + class="gl-disclosure-dropdown" + data-qa-selector="delete_merged_branches_dropdown_button" + icon="ellipsis_v" + nocaret="true" + placement="right" + popperoptions="[object Object]" + size="medium" + textsronly="true" + toggleid="dropdown-toggle-btn-25" + toggletext="" + variant="default" > - <!----> - - <!----> - <span - class="gl-button-text" + <ul + aria-labelledby="dropdown-toggle-btn-25" + class="gl-new-dropdown-contents" + data-testid="disclosure-content" + id="disclosure-26" + tabindex="-1" > - Delete merged branches - - </span> - </b-button-stub> + <gl-disclosure-dropdown-item-stub + item="[object Object]" + /> + </ul> + + </gl-base-dropdown-stub> <div> <form diff --git a/spec/frontend/branches/components/delete_branch_button_spec.js b/spec/frontend/branches/components/delete_branch_button_spec.js index b029f34c3d7..5b2ec443c59 100644 --- a/spec/frontend/branches/components/delete_branch_button_spec.js +++ b/spec/frontend/branches/components/delete_branch_button_spec.js @@ -25,10 +25,6 @@ describe('Delete branch button', () => { eventHubSpy = jest.spyOn(eventHub, '$emit'); }); - afterEach(() => { - wrapper.destroy(); - }); - it('renders the button with default tooltip, style, and icon', () => { createComponent(); diff --git a/spec/frontend/branches/components/delete_branch_modal_spec.js b/spec/frontend/branches/components/delete_branch_modal_spec.js index c977868ca93..7851d86466f 100644 --- a/spec/frontend/branches/components/delete_branch_modal_spec.js +++ b/spec/frontend/branches/components/delete_branch_modal_spec.js @@ -7,6 +7,8 @@ import DeleteBranchModal from '~/branches/components/delete_branch_modal.vue'; import eventHub from '~/branches/event_hub'; let wrapper; +let showMock; +let hideMock; const branchName = 'test_modal'; const defaultBranchName = 'default'; @@ -14,23 +16,20 @@ const deletePath = '/path/to/branch'; const merged = false; const isProtectedBranch = false; -const createComponent = (data = {}) => { +const createComponent = () => { + showMock = jest.fn(); + hideMock = jest.fn(); + wrapper = extendedWrapper( shallowMount(DeleteBranchModal, { - data() { - return { - branchName, - deletePath, - defaultBranchName, - merged, - isProtectedBranch, - ...data, - }; - }, stubs: { GlModal: stubComponent(GlModal, { template: '<div><slot name="modal-title"></slot><slot></slot><slot name="modal-footer"></slot></div>', + methods: { + show: showMock, + hide: hideMock, + }, }), GlButton, GlFormInput, @@ -46,14 +45,29 @@ const findDeleteButton = () => wrapper.findByTestId('delete-branch-confirmation- const findCancelButton = () => wrapper.findByTestId('delete-branch-cancel-button'); const findFormInput = () => wrapper.findComponent(GlFormInput); const findForm = () => wrapper.find('form'); -const submitFormSpy = () => jest.spyOn(wrapper.vm.$refs.form, 'submit'); +const createSubmitFormSpy = () => jest.spyOn(findForm().element, 'submit'); + +const emitOpenModal = (data = {}) => + eventHub.$emit('openModal', { + isProtectedBranch, + branchName, + defaultBranchName, + deletePath, + merged, + ...data, + }); describe('Delete branch modal', () => { const expectedUnmergedWarning = "This branch hasn't been merged into default. To avoid data loss, consider merging this branch before deleting it."; - afterEach(() => { - wrapper.destroy(); + beforeEach(() => { + createComponent(); + + emitOpenModal(); + + showMock.mockClear(); + hideMock.mockClear(); }); describe('Deleting a regular branch', () => { @@ -61,10 +75,6 @@ describe('Delete branch modal', () => { const expectedWarning = "You're about to permanently delete the branch test_modal."; const expectedMessage = `${expectedWarning} ${expectedUnmergedWarning}`; - beforeEach(() => { - createComponent(); - }); - it('renders the modal correctly', () => { expect(findModal().props('title')).toBe(expectedTitle); expect(findModalMessage().text()).toMatchInterpolatedText(expectedMessage); @@ -74,32 +84,30 @@ describe('Delete branch modal', () => { }); it('submits the form when the delete button is clicked', () => { + const submitSpy = createSubmitFormSpy(); + + expect(submitSpy).not.toHaveBeenCalled(); + findDeleteButton().trigger('click'); expect(findForm().attributes('action')).toBe(deletePath); - expect(submitFormSpy()).toHaveBeenCalled(); + expect(submitSpy).toHaveBeenCalled(); }); - it('calls show on the modal when a `openModal` event is received through the event hub', async () => { - const showSpy = jest.spyOn(wrapper.vm.$refs.modal, 'show'); + it('calls show on the modal when a `openModal` event is received through the event hub', () => { + expect(showMock).not.toHaveBeenCalled(); - eventHub.$emit('openModal', { - isProtectedBranch, - branchName, - defaultBranchName, - deletePath, - merged, - }); + emitOpenModal(); - expect(showSpy).toHaveBeenCalled(); + expect(showMock).toHaveBeenCalled(); }); it('calls hide on the modal when cancel button is clicked', () => { - const closeModalSpy = jest.spyOn(wrapper.vm.$refs.modal, 'hide'); + expect(hideMock).not.toHaveBeenCalled(); findCancelButton().trigger('click'); - expect(closeModalSpy).toHaveBeenCalled(); + expect(hideMock).toHaveBeenCalled(); }); }); @@ -112,7 +120,9 @@ describe('Delete branch modal', () => { 'After you confirm and select Yes, delete protected branch, you cannot recover this branch. Please type the following to confirm: test_modal'; beforeEach(() => { - createComponent({ isProtectedBranch: true }); + emitOpenModal({ + isProtectedBranch: true, + }); }); describe('rendering the modal correctly for a protected branch', () => { @@ -142,8 +152,11 @@ describe('Delete branch modal', () => { await waitForPromises(); + const submitSpy = createSubmitFormSpy(); + findDeleteButton().trigger('click'); - expect(submitFormSpy()).not.toHaveBeenCalled(); + + expect(submitSpy).not.toHaveBeenCalled(); }); it('opens with the delete button disabled and enables it when branch name is confirmed and fires submit', async () => { @@ -155,16 +168,23 @@ describe('Delete branch modal', () => { expect(findDeleteButton().props('disabled')).not.toBe(true); + const submitSpy = createSubmitFormSpy(); + + expect(submitSpy).not.toHaveBeenCalled(); + findDeleteButton().trigger('click'); - expect(submitFormSpy()).toHaveBeenCalled(); + + expect(submitSpy).toHaveBeenCalled(); }); }); describe('Deleting a merged branch', () => { - it('does not include the unmerged branch warning when merged is true', () => { - createComponent({ merged: true }); + beforeEach(() => { + emitOpenModal({ merged: true }); + }); - expect(findModalMessage().html()).not.toContain(expectedUnmergedWarning); + it('does not include the unmerged branch warning when merged is true', () => { + expect(findModalMessage().text()).not.toContain(expectedUnmergedWarning); }); }); }); diff --git a/spec/frontend/branches/components/delete_merged_branches_spec.js b/spec/frontend/branches/components/delete_merged_branches_spec.js index 4f1e772f4a4..4d8b887efd3 100644 --- a/spec/frontend/branches/components/delete_merged_branches_spec.js +++ b/spec/frontend/branches/components/delete_merged_branches_spec.js @@ -1,21 +1,27 @@ -import { GlButton, GlModal, GlFormInput, GlSprintf } from '@gitlab/ui'; +import { GlDisclosureDropdown, GlButton, GlFormInput, GlModal, GlSprintf } from '@gitlab/ui'; import { mount } from '@vue/test-utils'; import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; import { stubComponent } from 'helpers/stub_component'; import waitForPromises from 'helpers/wait_for_promises'; -import { createMockDirective, getBinding } from 'helpers/vue_mock_directive'; import DeleteMergedBranches, { i18n } from '~/branches/components/delete_merged_branches.vue'; import { formPath, propsDataMock } from '../mock_data'; jest.mock('~/lib/utils/csrf', () => ({ token: 'mock-csrf-token' })); let wrapper; +const modalShowSpy = jest.fn(); +const modalHideSpy = jest.fn(); const stubsData = { GlModal: stubComponent(GlModal, { template: '<div><slot name="modal-title"></slot><slot></slot><slot name="modal-footer"></slot></div>', + methods: { + show: modalShowSpy, + hide: modalHideSpy, + }, }), + GlDisclosureDropdown, GlButton, GlFormInput, GlSprintf, @@ -26,14 +32,12 @@ const createComponent = (mountFn = shallowMountExtended, stubs = {}) => { propsData: { ...propsDataMock, }, - directives: { - GlTooltip: createMockDirective(), - }, stubs, }); }; -const findDeleteButton = () => wrapper.findComponent(GlButton); +const findDeleteButton = () => + wrapper.findComponent('[data-qa-selector="delete_merged_branches_button"]'); const findModal = () => wrapper.findComponent(GlModal); const findConfirmationButton = () => wrapper.findByTestId('delete-merged-branches-confirmation-button'); @@ -48,28 +52,16 @@ describe('Delete merged branches component', () => { }); describe('Delete merged branches button', () => { - it('has correct attributes, text and tooltip', () => { - expect(findDeleteButton().attributes()).toMatchObject({ - category: 'secondary', - variant: 'danger', - }); - + it('has correct text', () => { + createComponent(mount, stubsData); expect(findDeleteButton().text()).toBe(i18n.deleteButtonText); }); - it('displays a tooltip', () => { - const tooltip = getBinding(findDeleteButton().element, 'gl-tooltip'); - - expect(tooltip).toBeDefined(); - expect(tooltip.value).toBe(wrapper.vm.buttonTooltipText); - }); - it('opens modal when clicked', () => { - createComponent(mount); - jest.spyOn(wrapper.vm.$refs.modal, 'show'); + createComponent(mount, stubsData); findDeleteButton().trigger('click'); - expect(wrapper.vm.$refs.modal.show).toHaveBeenCalled(); + expect(modalShowSpy).toHaveBeenCalled(); }); }); @@ -78,10 +70,6 @@ describe('Delete merged branches component', () => { createComponent(shallowMountExtended, stubsData); }); - afterEach(() => { - wrapper.destroy(); - }); - it('renders correct modal title and text', () => { const modalText = findModal().text(); expect(findModal().props('title')).toBe(i18n.modalTitle); @@ -129,15 +117,13 @@ describe('Delete merged branches component', () => { it('submits form when correct amount is provided and the confirm button is clicked', async () => { findFormInput().vm.$emit('input', 'delete'); await waitForPromises(); - expect(findDeleteButton().props('disabled')).not.toBe(true); findConfirmationButton().trigger('click'); expect(submitFormSpy()).toHaveBeenCalled(); }); it('calls hide on the modal when cancel button is clicked', () => { - const closeModalSpy = jest.spyOn(wrapper.vm.$refs.modal, 'hide'); findCancelButton().trigger('click'); - expect(closeModalSpy).toHaveBeenCalled(); + expect(modalHideSpy).toHaveBeenCalled(); }); }); }); diff --git a/spec/frontend/branches/components/divergence_graph_spec.js b/spec/frontend/branches/components/divergence_graph_spec.js index 9429a6e982c..66193c2ebf0 100644 --- a/spec/frontend/branches/components/divergence_graph_spec.js +++ b/spec/frontend/branches/components/divergence_graph_spec.js @@ -9,10 +9,6 @@ function factory(propsData = {}) { } describe('Branch divergence graph component', () => { - afterEach(() => { - vm.destroy(); - }); - it('renders ahead and behind count', () => { factory({ defaultBranch: 'main', diff --git a/spec/frontend/branches/components/graph_bar_spec.js b/spec/frontend/branches/components/graph_bar_spec.js index 61c051b49c6..585b376081b 100644 --- a/spec/frontend/branches/components/graph_bar_spec.js +++ b/spec/frontend/branches/components/graph_bar_spec.js @@ -8,10 +8,6 @@ function factory(propsData = {}) { } describe('Branch divergence graph bar component', () => { - afterEach(() => { - vm.destroy(); - }); - it.each` position | positionClass ${'left'} | ${'position-right-0'} diff --git a/spec/frontend/branches/components/sort_dropdown_spec.js b/spec/frontend/branches/components/sort_dropdown_spec.js index bd41b0daaaa..64ef30bb8a8 100644 --- a/spec/frontend/branches/components/sort_dropdown_spec.js +++ b/spec/frontend/branches/components/sort_dropdown_spec.js @@ -29,12 +29,6 @@ describe('Branches Sort Dropdown', () => { const findSearchBox = () => wrapper.findComponent(GlSearchBoxByClick); const findBranchesDropdown = () => wrapper.findByTestId('branches-dropdown'); - afterEach(() => { - if (wrapper) { - wrapper.destroy(); - } - }); - describe('When in overview mode', () => { beforeEach(() => { wrapper = createWrapper(); |