diff options
Diffstat (limited to 'spec/frontend/boards/components/sidebar')
7 files changed, 52 insertions, 26 deletions
diff --git a/spec/frontend/boards/components/sidebar/board_editable_item_spec.js b/spec/frontend/boards/components/sidebar/board_editable_item_spec.js index de414bb929e..12e9a9ba365 100644 --- a/spec/frontend/boards/components/sidebar/board_editable_item_spec.js +++ b/spec/frontend/boards/components/sidebar/board_editable_item_spec.js @@ -1,5 +1,5 @@ -import { shallowMount } from '@vue/test-utils'; import { GlLoadingIcon } from '@gitlab/ui'; +import { shallowMount } from '@vue/test-utils'; import BoardSidebarItem from '~/boards/components/sidebar/board_editable_item.vue'; describe('boards sidebar remove issue', () => { diff --git a/spec/frontend/boards/components/sidebar/board_sidebar_due_date_spec.js b/spec/frontend/boards/components/sidebar/board_sidebar_due_date_spec.js index b034c8cb11d..7838b5a0b2f 100644 --- a/spec/frontend/boards/components/sidebar/board_sidebar_due_date_spec.js +++ b/spec/frontend/boards/components/sidebar/board_sidebar_due_date_spec.js @@ -1,7 +1,7 @@ -import { shallowMount } from '@vue/test-utils'; import { GlDatepicker } from '@gitlab/ui'; -import BoardSidebarDueDate from '~/boards/components/sidebar/board_sidebar_due_date.vue'; +import { shallowMount } from '@vue/test-utils'; import BoardEditableItem from '~/boards/components/sidebar/board_editable_item.vue'; +import BoardSidebarDueDate from '~/boards/components/sidebar/board_sidebar_due_date.vue'; import { createStore } from '~/boards/stores'; import createFlash from '~/flash'; diff --git a/spec/frontend/boards/components/sidebar/board_sidebar_issue_title_spec.js b/spec/frontend/boards/components/sidebar/board_sidebar_issue_title_spec.js index 86895c648a4..bc7df1c76c6 100644 --- a/spec/frontend/boards/components/sidebar/board_sidebar_issue_title_spec.js +++ b/spec/frontend/boards/components/sidebar/board_sidebar_issue_title_spec.js @@ -1,9 +1,9 @@ -import { shallowMount } from '@vue/test-utils'; import { GlAlert, GlFormInput, GlForm } from '@gitlab/ui'; -import BoardSidebarIssueTitle from '~/boards/components/sidebar/board_sidebar_issue_title.vue'; +import { shallowMount } from '@vue/test-utils'; import BoardEditableItem from '~/boards/components/sidebar/board_editable_item.vue'; -import createFlash from '~/flash'; +import BoardSidebarIssueTitle from '~/boards/components/sidebar/board_sidebar_issue_title.vue'; import { createStore } from '~/boards/stores'; +import createFlash from '~/flash'; const TEST_TITLE = 'New issue title'; const TEST_ISSUE_A = { diff --git a/spec/frontend/boards/components/sidebar/board_sidebar_labels_select_spec.js b/spec/frontend/boards/components/sidebar/board_sidebar_labels_select_spec.js index 2342caa9dfd..12b873ba7d8 100644 --- a/spec/frontend/boards/components/sidebar/board_sidebar_labels_select_spec.js +++ b/spec/frontend/boards/components/sidebar/board_sidebar_labels_select_spec.js @@ -1,12 +1,12 @@ -import { shallowMount } from '@vue/test-utils'; import { GlLabel } from '@gitlab/ui'; +import { shallowMount } from '@vue/test-utils'; import { TEST_HOST } from 'helpers/test_constants'; import { labels as TEST_LABELS, mockIssue as TEST_ISSUE } from 'jest/boards/mock_data'; -import BoardSidebarLabelsSelect from '~/boards/components/sidebar/board_sidebar_labels_select.vue'; import BoardEditableItem from '~/boards/components/sidebar/board_editable_item.vue'; -import { getIdFromGraphQLId } from '~/graphql_shared/utils'; +import BoardSidebarLabelsSelect from '~/boards/components/sidebar/board_sidebar_labels_select.vue'; import { createStore } from '~/boards/stores'; import createFlash from '~/flash'; +import { getIdFromGraphQLId } from '~/graphql_shared/utils'; jest.mock('~/flash'); diff --git a/spec/frontend/boards/components/sidebar/board_sidebar_milestone_select_spec.js b/spec/frontend/boards/components/sidebar/board_sidebar_milestone_select_spec.js index 74d88d9f34c..8820ec7ae63 100644 --- a/spec/frontend/boards/components/sidebar/board_sidebar_milestone_select_spec.js +++ b/spec/frontend/boards/components/sidebar/board_sidebar_milestone_select_spec.js @@ -1,8 +1,8 @@ +import { GlLoadingIcon, GlDropdown } from '@gitlab/ui'; import { shallowMount } from '@vue/test-utils'; -import { GlLoadingIcon } from '@gitlab/ui'; import { mockMilestone as TEST_MILESTONE } from 'jest/boards/mock_data'; -import BoardSidebarMilestoneSelect from '~/boards/components/sidebar/board_sidebar_milestone_select.vue'; import BoardEditableItem from '~/boards/components/sidebar/board_editable_item.vue'; +import BoardSidebarMilestoneSelect from '~/boards/components/sidebar/board_sidebar_milestone_select.vue'; import { createStore } from '~/boards/stores'; import createFlash from '~/flash'; @@ -20,7 +20,7 @@ describe('~/boards/components/sidebar/board_sidebar_milestone_select.vue', () => wrapper = null; }); - const createWrapper = ({ milestone = null } = {}) => { + const createWrapper = ({ milestone = null, loading = false } = {}) => { store = createStore(); store.state.issues = { [TEST_ISSUE.id]: { ...TEST_ISSUE, milestone } }; store.state.activeId = TEST_ISSUE.id; @@ -38,7 +38,7 @@ describe('~/boards/components/sidebar/board_sidebar_milestone_select.vue', () => }, mocks: { $apollo: { - loading: false, + loading, }, }, }); @@ -46,10 +46,42 @@ describe('~/boards/components/sidebar/board_sidebar_milestone_select.vue', () => const findCollapsed = () => wrapper.find('[data-testid="collapsed-content"]'); const findLoader = () => wrapper.find(GlLoadingIcon); + const findDropdown = () => wrapper.find(GlDropdown); + const findBoardEditableItem = () => wrapper.find(BoardEditableItem); const findDropdownItem = () => wrapper.find('[data-testid="milestone-item"]'); const findUnsetMilestoneItem = () => wrapper.find('[data-testid="no-milestone-item"]'); const findNoMilestonesFoundItem = () => wrapper.find('[data-testid="no-milestones-found"]'); + describe('when not editing', () => { + it('opens the milestone dropdown on clicking edit', async () => { + createWrapper(); + wrapper.vm.$refs.dropdown.show = jest.fn(); + + await findBoardEditableItem().vm.$emit('open'); + + expect(wrapper.vm.$refs.dropdown.show).toHaveBeenCalledTimes(1); + }); + }); + + describe('when editing', () => { + beforeEach(() => { + createWrapper(); + jest.spyOn(wrapper.vm.$refs.sidebarItem, 'collapse'); + }); + + it('collapses BoardEditableItem on clicking edit', async () => { + await findBoardEditableItem().vm.$emit('close'); + + expect(wrapper.vm.$refs.sidebarItem.collapse).toHaveBeenCalledTimes(1); + }); + + it('collapses BoardEditableItem on hiding dropdown', async () => { + await findDropdown().vm.$emit('hide'); + + expect(wrapper.vm.$refs.sidebarItem.collapse).toHaveBeenCalledTimes(1); + }); + }); + it('renders "None" when no milestone is selected', () => { createWrapper(); @@ -63,12 +95,7 @@ describe('~/boards/components/sidebar/board_sidebar_milestone_select.vue', () => }); it('shows loader while Apollo is loading', async () => { - createWrapper({ milestone: TEST_MILESTONE }); - - expect(findLoader().exists()).toBe(false); - - wrapper.vm.$apollo.loading = true; - await wrapper.vm.$nextTick(); + createWrapper({ milestone: TEST_MILESTONE, loading: true }); expect(findLoader().exists()).toBe(true); }); @@ -76,8 +103,7 @@ describe('~/boards/components/sidebar/board_sidebar_milestone_select.vue', () => it('shows message when error or no milestones found', async () => { createWrapper(); - wrapper.setData({ milestones: [] }); - await wrapper.vm.$nextTick(); + await wrapper.setData({ milestones: [] }); expect(findNoMilestonesFoundItem().text()).toBe('No milestones found'); }); diff --git a/spec/frontend/boards/components/sidebar/board_sidebar_subscription_spec.js b/spec/frontend/boards/components/sidebar/board_sidebar_subscription_spec.js index b1df0f2d771..3e6b0be0267 100644 --- a/spec/frontend/boards/components/sidebar/board_sidebar_subscription_spec.js +++ b/spec/frontend/boards/components/sidebar/board_sidebar_subscription_spec.js @@ -1,11 +1,11 @@ -import Vuex from 'vuex'; -import { mount, createLocalVue } from '@vue/test-utils'; import { GlToggle, GlLoadingIcon } from '@gitlab/ui'; +import { mount, createLocalVue } from '@vue/test-utils'; +import Vuex from 'vuex'; import BoardSidebarSubscription from '~/boards/components/sidebar/board_sidebar_subscription.vue'; -import * as types from '~/boards/stores/mutation_types'; import { createStore } from '~/boards/stores'; -import { mockActiveIssue } from '../../mock_data'; +import * as types from '~/boards/stores/mutation_types'; import createFlash from '~/flash'; +import { mockActiveIssue } from '../../mock_data'; jest.mock('~/flash.js'); diff --git a/spec/frontend/boards/components/sidebar/remove_issue_spec.js b/spec/frontend/boards/components/sidebar/remove_issue_spec.js index 1b7a78e6e58..1f740c10106 100644 --- a/spec/frontend/boards/components/sidebar/remove_issue_spec.js +++ b/spec/frontend/boards/components/sidebar/remove_issue_spec.js @@ -1,5 +1,5 @@ -import { shallowMount } from '@vue/test-utils'; import { GlButton } from '@gitlab/ui'; +import { shallowMount } from '@vue/test-utils'; import RemoveIssue from '~/boards/components/sidebar/remove_issue.vue'; |