Issuable empty state
`, }, + stubs: { + IssuableTabs, + }, }); describe('IssuableListRoot', () => { let wrapper; - beforeEach(() => { - wrapper = createComponent(); - }); + const findFilteredSearchBar = () => wrapper.findComponent(FilteredSearchBar); + const findGlPagination = () => wrapper.findComponent(GlPagination); + const findIssuableTabs = () => wrapper.findComponent(IssuableTabs); + const findVueDraggable = () => wrapper.findComponent(VueDraggable); afterEach(() => { wrapper.destroy(); }); describe('computed', () => { + beforeEach(() => { + wrapper = createComponent(); + }); + const mockCheckedIssuables = { [mockIssuables[0].iid]: { checked: true, issuable: mockIssuables[0] }, [mockIssuables[1].iid]: { checked: true, issuable: mockIssuables[1] }, @@ -108,6 +117,10 @@ describe('IssuableListRoot', () => { }); describe('watch', () => { + beforeEach(() => { + wrapper = createComponent(); + }); + describe('issuables', () => { it('populates `checkedIssuables` prop with all issuables', async () => { wrapper.setProps({ @@ -147,6 +160,10 @@ describe('IssuableListRoot', () => { }); describe('methods', () => { + beforeEach(() => { + wrapper = createComponent(); + }); + describe('issuableId', () => { it('returns id value from provided issuable object', () => { expect(wrapper.vm.issuableId({ id: 1 })).toBe(1); @@ -171,12 +188,16 @@ describe('IssuableListRoot', () => { }); describe('template', () => { + beforeEach(() => { + wrapper = createComponent(); + }); + it('renders component container element with class "issuable-list-container"', () => { expect(wrapper.classes()).toContain('issuable-list-container'); }); it('renders issuable-tabs component', () => { - const tabsEl = wrapper.find(IssuableTabs); + const tabsEl = findIssuableTabs(); expect(tabsEl.exists()).toBe(true); expect(tabsEl.props()).toMatchObject({ @@ -187,14 +208,14 @@ describe('IssuableListRoot', () => { }); it('renders contents for slot "nav-actions" within issuable-tab component', () => { - const buttonEl = wrapper.find(IssuableTabs).find('button.js-new-issuable'); + const buttonEl = findIssuableTabs().find('button.js-new-issuable'); expect(buttonEl.exists()).toBe(true); expect(buttonEl.text()).toBe('New issuable'); }); it('renders filtered-search-bar component', () => { - const searchEl = wrapper.find(FilteredSearchBar); + const searchEl = findFilteredSearchBar(); const { namespace, recentSearchesStorageKey, @@ -224,11 +245,13 @@ describe('IssuableListRoot', () => { await wrapper.vm.$nextTick(); - expect(wrapper.findAll(GlSkeletonLoading)).toHaveLength(wrapper.vm.skeletonItemCount); + expect(wrapper.findAllComponents(GlSkeletonLoading)).toHaveLength( + wrapper.vm.skeletonItemCount, + ); }); it('renders issuable-item component for each item within `issuables` array', () => { - const itemsEl = wrapper.findAll(IssuableItem); + const itemsEl = wrapper.findAllComponents(IssuableItem); const mockIssuable = mockIssuableListProps.issuables[0]; expect(itemsEl).toHaveLength(mockIssuableListProps.issuables.length); @@ -257,7 +280,7 @@ describe('IssuableListRoot', () => { await wrapper.vm.$nextTick(); - const paginationEl = wrapper.find(GlPagination); + const paginationEl = findGlPagination(); expect(paginationEl.exists()).toBe(true); expect(paginationEl.props()).toMatchObject({ perPage: 20, @@ -271,10 +294,8 @@ describe('IssuableListRoot', () => { }); describe('events', () => { - let wrapperChecked; - beforeEach(() => { - wrapperChecked = createComponent({ + wrapper = createComponent({ data: { checkedIssuables: { [mockIssuables[0].iid]: { checked: true, issuable: mockIssuables[0] }, @@ -283,34 +304,30 @@ describe('IssuableListRoot', () => { }); }); - afterEach(() => { - wrapperChecked.destroy(); - }); - it('issuable-tabs component emits `click-tab` event on `click-tab` event', () => { - wrapper.find(IssuableTabs).vm.$emit('click'); + findIssuableTabs().vm.$emit('click'); expect(wrapper.emitted('click-tab')).toBeTruthy(); }); it('sets all issuables as checked when filtered-search-bar component emits `checked-input` event', async () => { - const searchEl = wrapperChecked.find(FilteredSearchBar); + const searchEl = findFilteredSearchBar(); searchEl.vm.$emit('checked-input', true); - await wrapperChecked.vm.$nextTick(); + await wrapper.vm.$nextTick(); expect(searchEl.emitted('checked-input')).toBeTruthy(); expect(searchEl.emitted('checked-input').length).toBe(1); - expect(wrapperChecked.vm.checkedIssuables[mockIssuables[0].iid]).toEqual({ + expect(wrapper.vm.checkedIssuables[mockIssuables[0].iid]).toEqual({ checked: true, issuable: mockIssuables[0], }); }); it('filtered-search-bar component emits `filter` event on `onFilter` & `sort` event on `onSort` events', () => { - const searchEl = wrapper.find(FilteredSearchBar); + const searchEl = findFilteredSearchBar(); searchEl.vm.$emit('onFilter'); expect(wrapper.emitted('filter')).toBeTruthy(); @@ -319,16 +336,16 @@ describe('IssuableListRoot', () => { }); it('sets an issuable as checked when issuable-item component emits `checked-input` event', async () => { - const issuableItem = wrapperChecked.findAll(IssuableItem).at(0); + const issuableItem = wrapper.findAllComponents(IssuableItem).at(0); issuableItem.vm.$emit('checked-input', true); - await wrapperChecked.vm.$nextTick(); + await wrapper.vm.$nextTick(); expect(issuableItem.emitted('checked-input')).toBeTruthy(); expect(issuableItem.emitted('checked-input').length).toBe(1); - expect(wrapperChecked.vm.checkedIssuables[mockIssuables[0].iid]).toEqual({ + expect(wrapper.vm.checkedIssuables[mockIssuables[0].iid]).toEqual({ checked: true, issuable: mockIssuables[0], }); @@ -341,8 +358,48 @@ describe('IssuableListRoot', () => { await wrapper.vm.$nextTick(); - wrapper.find(GlPagination).vm.$emit('input'); + findGlPagination().vm.$emit('input'); expect(wrapper.emitted('page-change')).toBeTruthy(); }); }); + + describe('manual sorting', () => { + describe('when enabled', () => { + beforeEach(() => { + wrapper = createComponent({ + props: { + ...mockIssuableListProps, + isManualOrdering: true, + }, + }); + }); + + it('renders VueDraggable component', () => { + expect(findVueDraggable().exists()).toBe(true); + }); + + it('IssuableItem has grab cursor', () => { + expect(wrapper.findComponent(IssuableItem).classes()).toContain('gl-cursor-grab'); + }); + + it('emits a "reorder" event when user updates the issue order', () => { + const oldIndex = 4; + const newIndex = 6; + + findVueDraggable().vm.$emit('update', { oldIndex, newIndex }); + + expect(wrapper.emitted('reorder')).toEqual([[{ oldIndex, newIndex }]]); + }); + }); + + describe('when disabled', () => { + beforeEach(() => { + wrapper = createComponent(); + }); + + it('does not render VueDraggable component', () => { + expect(findVueDraggable().exists()).toBe(false); + }); + }); + }); }); diff --git a/spec/frontend/issues_list/components/issues_list_app_spec.js b/spec/frontend/issues_list/components/issues_list_app_spec.js index 1053e8934c97e59ed087a796a39ce2f0421266d5..0a445973c14a10e23475f322c21ff84d7a52bca1 100644 --- a/spec/frontend/issues_list/components/issues_list_app_spec.js +++ b/spec/frontend/issues_list/components/issues_list_app_spec.js @@ -1,16 +1,31 @@ import { shallowMount } from '@vue/test-utils'; import AxiosMockAdapter from 'axios-mock-adapter'; +import { TEST_HOST } from 'helpers/test_constants'; import waitForPromises from 'helpers/wait_for_promises'; +import createFlash from '~/flash'; import IssuableList from '~/issuable_list/components/issuable_list_root.vue'; import IssuesListApp from '~/issues_list/components/issues_list_app.vue'; +import { + CREATED_DESC, + PAGE_SIZE, + PAGE_SIZE_MANUAL, + RELATIVE_POSITION_ASC, + sortOptions, + sortParams, +} from '~/issues_list/constants'; import axios from '~/lib/utils/axios_utils'; +import { setUrlParams } from '~/lib/utils/url_utility'; + +jest.mock('~/flash'); describe('IssuesListApp component', () => { + const originalWindowLocation = window.location; let axiosMock; let wrapper; const fullPath = 'path/to/project'; const endpoint = 'api/endpoint'; + const issuesPath = `${fullPath}/-/issues`; const state = 'opened'; const xPage = 1; const xTotal = 25; @@ -29,37 +44,64 @@ describe('IssuesListApp component', () => { provide: { endpoint, fullPath, + issuesPath, }, }); - beforeEach(async () => { + beforeEach(() => { axiosMock = new AxiosMockAdapter(axios); axiosMock.onGet(endpoint).reply(200, fetchIssuesResponse.data, fetchIssuesResponse.headers); - wrapper = mountComponent(); - await waitForPromises(); }); afterEach(() => { + window.location = originalWindowLocation; axiosMock.reset(); wrapper.destroy(); }); - it('renders IssuableList', () => { - expect(findIssuableList().props()).toMatchObject({ - namespace: fullPath, - recentSearchesStorageKey: 'issues', - searchInputPlaceholder: 'Search or filter results…', - showPaginationControls: true, - issuables: [], - totalItems: xTotal, - currentPage: xPage, - previousPage: xPage - 1, - nextPage: xPage + 1, - urlParams: { page: xPage, state }, + describe('IssuableList', () => { + beforeEach(async () => { + wrapper = mountComponent(); + await waitForPromises(); + }); + + it('renders', () => { + expect(findIssuableList().props()).toMatchObject({ + namespace: fullPath, + recentSearchesStorageKey: 'issues', + searchInputPlaceholder: 'Search or filter results…', + sortOptions, + initialSortBy: CREATED_DESC, + showPaginationControls: true, + issuables: [], + totalItems: xTotal, + currentPage: xPage, + previousPage: xPage - 1, + nextPage: xPage + 1, + urlParams: { page: xPage, state }, + }); }); }); - describe('when "page-change" event is emitted', () => { + describe('initial sort', () => { + it.each(Object.keys(sortParams))('is set as %s when the url query matches', (sortKey) => { + Object.defineProperty(window, 'location', { + writable: true, + value: { + href: setUrlParams(sortParams[sortKey], TEST_HOST), + }, + }); + + wrapper = mountComponent(); + + expect(findIssuableList().props()).toMatchObject({ + initialSortBy: sortKey, + urlParams: sortParams[sortKey], + }); + }); + }); + + describe('when "page-change" event is emitted by IssuableList', () => { const data = [{ id: 10, title: 'title', state }]; const page = 2; const totalItems = 21; @@ -70,6 +112,8 @@ describe('IssuesListApp component', () => { 'x-total': totalItems, }); + wrapper = mountComponent(); + findIssuableList().vm.$emit('page-change', page); await waitForPromises(); @@ -78,7 +122,7 @@ describe('IssuesListApp component', () => { it('fetches issues with expected params', async () => { expect(axiosMock.history.get[1].params).toEqual({ page, - per_page: 20, + per_page: PAGE_SIZE, state, with_labels_details: true, }); @@ -95,4 +139,75 @@ describe('IssuesListApp component', () => { }); }); }); + + describe('when "reorder" event is emitted by IssuableList', () => { + const issueOne = { id: 1, iid: 101, title: 'Issue one' }; + const issueTwo = { id: 2, iid: 102, title: 'Issue two' }; + const issueThree = { id: 3, iid: 103, title: 'Issue three' }; + const issueFour = { id: 4, iid: 104, title: 'Issue four' }; + const issues = [issueOne, issueTwo, issueThree, issueFour]; + + beforeEach(async () => { + axiosMock.onGet(endpoint).reply(200, issues, fetchIssuesResponse.headers); + wrapper = mountComponent(); + await waitForPromises(); + }); + + describe('when successful', () => { + describe.each` + description | issueToMove | oldIndex | newIndex | moveBeforeId | moveAfterId + ${'to the beginning of the list'} | ${issueThree} | ${2} | ${0} | ${null} | ${issueOne.id} + ${'down the list'} | ${issueOne} | ${0} | ${1} | ${issueTwo.id} | ${issueThree.id} + ${'up the list'} | ${issueThree} | ${2} | ${1} | ${issueOne.id} | ${issueTwo.id} + ${'to the end of the list'} | ${issueTwo} | ${1} | ${3} | ${issueFour.id} | ${null} + `( + 'when moving issue $description', + ({ issueToMove, oldIndex, newIndex, moveBeforeId, moveAfterId }) => { + it('makes API call to reorder the issue', async () => { + findIssuableList().vm.$emit('reorder', { oldIndex, newIndex }); + + await waitForPromises(); + + expect(axiosMock.history.put[0]).toMatchObject({ + url: `${issuesPath}/${issueToMove.iid}/reorder`, + data: JSON.stringify({ move_before_id: moveBeforeId, move_after_id: moveAfterId }), + }); + }); + }, + ); + }); + + describe('when unsuccessful', () => { + it('displays an error message', async () => { + axiosMock.onPut(`${issuesPath}/${issueOne.iid}/reorder`).reply(500); + + findIssuableList().vm.$emit('reorder', { oldIndex: 0, newIndex: 1 }); + + await waitForPromises(); + + expect(createFlash).toHaveBeenCalledWith({ message: IssuesListApp.i18n.reorderError }); + }); + }); + }); + + describe('when "sort" event is emitted by IssuableList', () => { + it.each(Object.keys(sortParams))( + 'fetches issues with correct params for "sort" payload %s', + async (sortKey) => { + wrapper = mountComponent(); + + findIssuableList().vm.$emit('sort', sortKey); + + await waitForPromises(); + + expect(axiosMock.history.get[1].params).toEqual({ + page: xPage, + per_page: sortKey === RELATIVE_POSITION_ASC ? PAGE_SIZE_MANUAL : PAGE_SIZE, + state, + with_labels_details: true, + ...sortParams[sortKey], + }); + }, + ); + }); });