diff options
Diffstat (limited to 'spec/frontend/sidebar')
4 files changed, 154 insertions, 12 deletions
diff --git a/spec/frontend/sidebar/__snapshots__/confidential_issue_sidebar_spec.js.snap b/spec/frontend/sidebar/__snapshots__/confidential_issue_sidebar_spec.js.snap index cf7832f3948..da571af3a0d 100644 --- a/spec/frontend/sidebar/__snapshots__/confidential_issue_sidebar_spec.js.snap +++ b/spec/frontend/sidebar/__snapshots__/confidential_issue_sidebar_spec.js.snap @@ -3,6 +3,7 @@ exports[`Confidential Issue Sidebar Block renders for confidential = false and isEditable = false 1`] = ` <div class="block issuable-sidebar-item confidentiality" + iid="" > <div class="sidebar-collapsed-icon" @@ -35,6 +36,7 @@ exports[`Confidential Issue Sidebar Block renders for confidential = false and i <div class="no-value sidebar-item-value" + data-testid="not-confidential" > <icon-stub aria-hidden="true" @@ -55,6 +57,7 @@ exports[`Confidential Issue Sidebar Block renders for confidential = false and i exports[`Confidential Issue Sidebar Block renders for confidential = false and isEditable = true 1`] = ` <div class="block issuable-sidebar-item confidentiality" + iid="" > <div class="sidebar-collapsed-icon" @@ -95,6 +98,7 @@ exports[`Confidential Issue Sidebar Block renders for confidential = false and i <div class="no-value sidebar-item-value" + data-testid="not-confidential" > <icon-stub aria-hidden="true" @@ -115,6 +119,7 @@ exports[`Confidential Issue Sidebar Block renders for confidential = false and i exports[`Confidential Issue Sidebar Block renders for confidential = true and isEditable = false 1`] = ` <div class="block issuable-sidebar-item confidentiality" + iid="" > <div class="sidebar-collapsed-icon" @@ -167,6 +172,7 @@ exports[`Confidential Issue Sidebar Block renders for confidential = true and is exports[`Confidential Issue Sidebar Block renders for confidential = true and isEditable = true 1`] = ` <div class="block issuable-sidebar-item confidentiality" + iid="" > <div class="sidebar-collapsed-icon" diff --git a/spec/frontend/sidebar/confidential/edit_form_buttons_spec.js b/spec/frontend/sidebar/confidential/edit_form_buttons_spec.js index acdfb5139bf..15493d3087f 100644 --- a/spec/frontend/sidebar/confidential/edit_form_buttons_spec.js +++ b/spec/frontend/sidebar/confidential/edit_form_buttons_spec.js @@ -1,16 +1,49 @@ import { shallowMount } from '@vue/test-utils'; +import { GlLoadingIcon } from '@gitlab/ui'; import EditFormButtons from '~/sidebar/components/confidential/edit_form_buttons.vue'; +import eventHub from '~/sidebar/event_hub'; +import createStore from '~/notes/stores'; +import waitForPromises from 'helpers/wait_for_promises'; +import flash from '~/flash'; + +jest.mock('~/sidebar/event_hub', () => ({ $emit: jest.fn() })); +jest.mock('~/flash'); describe('Edit Form Buttons', () => { let wrapper; + let store; const findConfidentialToggle = () => wrapper.find('[data-testid="confidential-toggle"]'); - const createComponent = props => { + const createComponent = ({ + props = {}, + data = {}, + confidentialApolloSidebar = false, + resolved = true, + }) => { + store = createStore(); + if (resolved) { + jest.spyOn(store, 'dispatch').mockResolvedValue(); + } else { + jest.spyOn(store, 'dispatch').mockRejectedValue(); + } + wrapper = shallowMount(EditFormButtons, { propsData: { - updateConfidentialAttribute: () => {}, + fullPath: '', ...props, }, + data() { + return { + isLoading: true, + ...data, + }; + }, + provide: { + glFeatures: { + confidentialApolloSidebar, + }, + }, + store, }); }; @@ -19,10 +52,32 @@ describe('Edit Form Buttons', () => { wrapper = null; }); + describe('when isLoading', () => { + beforeEach(() => { + createComponent({}); + + wrapper.vm.$store.state.noteableData.confidential = false; + }); + + it('renders "Applying" in the toggle button', () => { + expect(findConfidentialToggle().text()).toBe('Applying'); + }); + + it('disables the toggle button', () => { + expect(findConfidentialToggle().attributes('disabled')).toBe('disabled'); + }); + + it('finds the GlLoadingIcon', () => { + expect(wrapper.find(GlLoadingIcon).exists()).toBe(true); + }); + }); + describe('when not confidential', () => { - it('renders Turn On in the ', () => { + it('renders Turn On in the toggle button', () => { createComponent({ - isConfidential: false, + data: { + isLoading: false, + }, }); expect(findConfidentialToggle().text()).toBe('Turn On'); @@ -30,12 +85,75 @@ describe('Edit Form Buttons', () => { }); describe('when confidential', () => { - it('renders on or off text based on confidentiality', () => { + beforeEach(() => { createComponent({ - isConfidential: true, + data: { + isLoading: false, + }, }); + wrapper.vm.$store.state.noteableData.confidential = true; + }); + + it('renders on or off text based on confidentiality', () => { expect(findConfidentialToggle().text()).toBe('Turn Off'); }); + + describe('when clicking on the confidential toggle', () => { + it('emits updateConfidentialAttribute', () => { + findConfidentialToggle().trigger('click'); + + expect(eventHub.$emit).toHaveBeenCalledWith('updateConfidentialAttribute'); + }); + }); + }); + + describe('when confidentialApolloSidebar is turned on', () => { + const isConfidential = true; + + describe('when succeeds', () => { + beforeEach(() => { + createComponent({ data: { isLoading: false }, confidentialApolloSidebar: true }); + wrapper.vm.$store.state.noteableData.confidential = isConfidential; + findConfidentialToggle().trigger('click'); + }); + + it('dispatches the correct action', () => { + expect(store.dispatch).toHaveBeenCalledWith('updateConfidentialityOnIssue', { + confidential: !isConfidential, + fullPath: '', + }); + }); + + it('resets loading', () => { + return waitForPromises().then(() => { + expect(wrapper.find(GlLoadingIcon).exists()).toBe(false); + }); + }); + + it('emits close form', () => { + return waitForPromises().then(() => { + expect(eventHub.$emit).toHaveBeenCalledWith('closeConfidentialityForm'); + }); + }); + }); + + describe('when fails', () => { + beforeEach(() => { + createComponent({ + data: { isLoading: false }, + confidentialApolloSidebar: true, + resolved: false, + }); + wrapper.vm.$store.state.noteableData.confidential = isConfidential; + findConfidentialToggle().trigger('click'); + }); + + it('calls flash with the correct message', () => { + expect(flash).toHaveBeenCalledWith( + 'Something went wrong trying to change the confidentiality of this issue', + ); + }); + }); }); }); diff --git a/spec/frontend/sidebar/confidential/edit_form_spec.js b/spec/frontend/sidebar/confidential/edit_form_spec.js index 137019a1e1b..a22bbe5ae0d 100644 --- a/spec/frontend/sidebar/confidential/edit_form_spec.js +++ b/spec/frontend/sidebar/confidential/edit_form_spec.js @@ -10,6 +10,8 @@ describe('Edit Form Dropdown', () => { wrapper = shallowMount(EditForm, { propsData: { ...props, + isLoading: false, + fullPath: '', }, }); }; diff --git a/spec/frontend/sidebar/confidential_issue_sidebar_spec.js b/spec/frontend/sidebar/confidential_issue_sidebar_spec.js index fe7c3aadeeb..06cf1e6166c 100644 --- a/spec/frontend/sidebar/confidential_issue_sidebar_spec.js +++ b/spec/frontend/sidebar/confidential_issue_sidebar_spec.js @@ -7,6 +7,7 @@ import createFlash from '~/flash'; import RecaptchaModal from '~/vue_shared/components/recaptcha_modal.vue'; import createStore from '~/notes/stores'; import { useMockLocationHelper } from 'helpers/mock_window_location_helper'; +import eventHub from '~/sidebar/event_hub'; jest.mock('~/flash'); jest.mock('~/sidebar/services/sidebar_service'); @@ -15,6 +16,9 @@ describe('Confidential Issue Sidebar Block', () => { useMockLocationHelper(); let wrapper; + const mutate = jest + .fn() + .mockResolvedValue({ data: { issueSetConfidential: { issue: { confidential: true } } } }); const findRecaptchaModal = () => wrapper.find(RecaptchaModal); @@ -25,24 +29,32 @@ describe('Confidential Issue Sidebar Block', () => { wrapper.vm .$nextTick() .then(() => { - const editForm = wrapper.find(EditForm); - const { updateConfidentialAttribute } = editForm.props(); - updateConfidentialAttribute(); + eventHub.$emit('updateConfidentialAttribute'); }) // wait for reCAPTCHA modal to render .then(() => wrapper.vm.$nextTick()) ); }; - const createComponent = propsData => { + const createComponent = ({ propsData, data = {} }) => { const store = createStore(); const service = new SidebarService(); wrapper = shallowMount(ConfidentialIssueSidebar, { store, + data() { + return data; + }, propsData: { service, + iid: '', + fullPath: '', ...propsData, }, + mocks: { + $apollo: { + mutate, + }, + }, }); }; @@ -60,7 +72,9 @@ describe('Confidential Issue Sidebar Block', () => { 'renders for confidential = $confidential and isEditable = $isEditable', ({ confidential, isEditable }) => { createComponent({ - isEditable, + propsData: { + isEditable, + }, }); wrapper.vm.$store.state.noteableData.confidential = confidential; @@ -73,7 +87,9 @@ describe('Confidential Issue Sidebar Block', () => { describe('if editable', () => { beforeEach(() => { createComponent({ - isEditable: true, + propsData: { + isEditable: true, + }, }); wrapper.vm.$store.state.noteableData.confidential = true; }); |