diff options
Diffstat (limited to 'spec/frontend/vue_shared/issuable')
10 files changed, 94 insertions, 82 deletions
diff --git a/spec/frontend/vue_shared/issuable/list/components/issuable_bulk_edit_sidebar_spec.js b/spec/frontend/vue_shared/issuable/list/components/issuable_bulk_edit_sidebar_spec.js index 0f33a3d1122..7dfeced571a 100644 --- a/spec/frontend/vue_shared/issuable/list/components/issuable_bulk_edit_sidebar_spec.js +++ b/spec/frontend/vue_shared/issuable/list/components/issuable_bulk_edit_sidebar_spec.js @@ -1,5 +1,6 @@ import { shallowMount } from '@vue/test-utils'; +import { nextTick } from 'vue'; import IssuableBulkEditSidebar from '~/vue_shared/issuable/list/components/issuable_bulk_edit_sidebar.vue'; const createComponent = ({ expanded = true } = {}) => @@ -48,7 +49,7 @@ describe('IssuableBulkEditSidebar', () => { expanded, }); - await wrappeCustom.vm.$nextTick(); + await nextTick(); expect(document.querySelector('.layout-page').classList.contains(layoutPageClass)).toBe( true, @@ -78,7 +79,7 @@ describe('IssuableBulkEditSidebar', () => { expanded, }); - await wrappeCustom.vm.$nextTick(); + await nextTick(); expect(wrappeCustom.classes()).toContain(layoutPageClass); diff --git a/spec/frontend/vue_shared/issuable/list/components/issuable_item_spec.js b/spec/frontend/vue_shared/issuable/list/components/issuable_item_spec.js index e38a80e7734..65eb42ef053 100644 --- a/spec/frontend/vue_shared/issuable/list/components/issuable_item_spec.js +++ b/spec/frontend/vue_shared/issuable/list/components/issuable_item_spec.js @@ -1,4 +1,5 @@ import { GlLink, GlLabel, GlIcon, GlFormCheckbox, GlSprintf } from '@gitlab/ui'; +import { nextTick } from 'vue'; import { useFakeDate } from 'helpers/fake_date'; import { shallowMountExtended as shallowMount } from 'helpers/vue_test_utils_helper'; import IssuableItem from '~/vue_shared/issuable/list/components/issuable_item.vue'; @@ -9,7 +10,6 @@ import { mockIssuable, mockRegularLabel, mockScopedLabel } from '../mock_data'; const createComponent = ({ issuableSymbol = '#', issuable = mockIssuable, - enableLabelPermalinks = true, showCheckbox = true, slots = {}, } = {}) => @@ -17,7 +17,6 @@ const createComponent = ({ propsData: { issuableSymbol, issuable, - enableLabelPermalinks, showDiscussions: true, showCheckbox, }, @@ -76,7 +75,7 @@ describe('IssuableItem', () => { }, }); - await wrapper.vm.$nextTick(); + await nextTick(); expect(wrapper.vm.authorId).toBe(returnValue); }, @@ -100,7 +99,7 @@ describe('IssuableItem', () => { }, }); - await wrapper.vm.$nextTick(); + await nextTick(); expect(wrapper.vm.isIssuableUrlExternal).toBe(returnValue); }, @@ -122,7 +121,7 @@ describe('IssuableItem', () => { }, }); - await wrapper.vm.$nextTick(); + await nextTick(); expect(wrapper.vm.labels).toEqual(mockLabels); }); @@ -135,7 +134,7 @@ describe('IssuableItem', () => { }, }); - await wrapper.vm.$nextTick(); + await nextTick(); expect(wrapper.vm.labels).toEqual([]); }); @@ -211,23 +210,13 @@ describe('IssuableItem', () => { }); describe('labelTarget', () => { - it('returns target string for a provided label param when `enableLabelPermalinks` is true', () => { + it('returns target string for a provided label param', () => { wrapper = createComponent(); expect(wrapper.vm.labelTarget(mockRegularLabel)).toBe( '?label_name[]=Documentation%20Update', ); }); - - it('returns string "#" for a provided label param when `enableLabelPermalinks` is false', async () => { - wrapper = createComponent({ - enableLabelPermalinks: false, - }); - - await wrapper.vm.$nextTick(); - - expect(wrapper.vm.labelTarget(mockRegularLabel)).toBe('#'); - }); }); }); @@ -248,7 +237,7 @@ describe('IssuableItem', () => { }, }); - await wrapper.vm.$nextTick(); + await nextTick(); const titleEl = wrapper.find('[data-testid="issuable-title"]'); @@ -264,7 +253,7 @@ describe('IssuableItem', () => { showCheckbox: true, }); - await wrapper.vm.$nextTick(); + await nextTick(); expect(wrapper.find(GlFormCheckbox).exists()).toBe(true); expect(wrapper.find(GlFormCheckbox).attributes('checked')).not.toBeDefined(); @@ -273,7 +262,7 @@ describe('IssuableItem', () => { checked: true, }); - await wrapper.vm.$nextTick(); + await nextTick(); expect(wrapper.find(GlFormCheckbox).attributes('checked')).toBe('true'); }); @@ -286,7 +275,7 @@ describe('IssuableItem', () => { }, }); - await wrapper.vm.$nextTick(); + await nextTick(); expect(wrapper.find('[data-testid="issuable-title"]').find(GlLink).attributes('target')).toBe( '_blank', @@ -301,7 +290,7 @@ describe('IssuableItem', () => { }, }); - await wrapper.vm.$nextTick(); + await nextTick(); const confidentialEl = wrapper.find('[data-testid="issuable-title"]').find(GlIcon); diff --git a/spec/frontend/vue_shared/issuable/list/components/issuable_list_root_spec.js b/spec/frontend/vue_shared/issuable/list/components/issuable_list_root_spec.js index 14e93108447..64823cd4c6c 100644 --- a/spec/frontend/vue_shared/issuable/list/components/issuable_list_root_spec.js +++ b/spec/frontend/vue_shared/issuable/list/components/issuable_list_root_spec.js @@ -2,6 +2,7 @@ import { GlAlert, GlKeysetPagination, GlSkeletonLoading, GlPagination } from '@g import { shallowMount } from '@vue/test-utils'; import VueDraggable from 'vuedraggable'; +import { nextTick } from 'vue'; import { TEST_HOST } from 'helpers/test_constants'; import IssuableItem from '~/vue_shared/issuable/list/components/issuable_item.vue'; @@ -77,7 +78,7 @@ describe('IssuableListRoot', () => { currentPage, }); - await wrapper.vm.$nextTick(); + await nextTick(); expect(wrapper.vm.skeletonItemCount).toBe(returnValue); }, @@ -96,7 +97,7 @@ describe('IssuableListRoot', () => { issuables, }); - await wrapper.vm.$nextTick(); + await nextTick(); // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details // eslint-disable-next-line no-restricted-syntax @@ -104,7 +105,7 @@ describe('IssuableListRoot', () => { checkedIssuables, }); - await wrapper.vm.$nextTick(); + await nextTick(); expect(wrapper.vm.allIssuablesChecked).toBe(returnValue); }, @@ -119,7 +120,7 @@ describe('IssuableListRoot', () => { checkedIssuables: mockCheckedIssuables, }); - await wrapper.vm.$nextTick(); + await nextTick(); expect(wrapper.vm.bulkEditIssuables).toHaveLength(mIssuables.length); }); @@ -137,7 +138,7 @@ describe('IssuableListRoot', () => { issuables: [mockIssuables[0]], }); - await wrapper.vm.$nextTick(); + await nextTick(); expect(Object.keys(wrapper.vm.checkedIssuables)).toHaveLength(1); expect(wrapper.vm.checkedIssuables[mockIssuables[0].iid]).toEqual({ @@ -160,7 +161,7 @@ describe('IssuableListRoot', () => { urlParams, }); - await wrapper.vm.$nextTick(); + await nextTick(); expect(global.window.location.href).toBe( `${TEST_HOST}/?state=${urlParams.state}&sort=${urlParams.sort}&page=${urlParams.page}&search=${urlParams.search}`, @@ -192,7 +193,7 @@ describe('IssuableListRoot', () => { }, }); - await wrapper.vm.$nextTick(); + await nextTick(); expect(wrapper.vm.issuableChecked(mockIssuables[0])).toBe(true); }); diff --git a/spec/frontend/vue_shared/issuable/list/components/issuable_tabs_spec.js b/spec/frontend/vue_shared/issuable/list/components/issuable_tabs_spec.js index 5723e2da586..27985895c62 100644 --- a/spec/frontend/vue_shared/issuable/list/components/issuable_tabs_spec.js +++ b/spec/frontend/vue_shared/issuable/list/components/issuable_tabs_spec.js @@ -1,5 +1,6 @@ import { GlTab, GlBadge } from '@gitlab/ui'; -import { mount } from '@vue/test-utils'; +import { nextTick } from 'vue'; +import { mount, shallowMount } from '@vue/test-utils'; import { setLanguage } from 'helpers/locale_helper'; import IssuableTabs from '~/vue_shared/issuable/list/components/issuable_tabs.vue'; @@ -10,17 +11,18 @@ const createComponent = ({ tabs = mockIssuableListProps.tabs, tabCounts = mockIssuableListProps.tabCounts, currentTab = mockIssuableListProps.currentTab, + truncateCounts = false, + mountFn = shallowMount, } = {}) => - mount(IssuableTabs, { + mountFn(IssuableTabs, { propsData: { tabs, tabCounts, currentTab, + truncateCounts, }, slots: { - 'nav-actions': ` - <button class="js-new-issuable">New issuable</button> - `, + 'nav-actions': `<button class="js-new-issuable">New issuable</button>`, }, }); @@ -29,7 +31,6 @@ describe('IssuableTabs', () => { beforeEach(() => { setLanguage('en'); - wrapper = createComponent(); }); afterEach(() => { @@ -40,60 +41,71 @@ describe('IssuableTabs', () => { const findAllGlBadges = () => wrapper.findAllComponents(GlBadge); const findAllGlTabs = () => wrapper.findAllComponents(GlTab); - describe('methods', () => { - describe('isTabActive', () => { - it.each` - tabName | currentTab | returnValue - ${'opened'} | ${'opened'} | ${true} - ${'opened'} | ${'closed'} | ${false} - `( - 'returns $returnValue when tab name is "$tabName" is current tab is "$currentTab"', - async ({ tabName, currentTab, returnValue }) => { - wrapper.setProps({ - currentTab, - }); - - await wrapper.vm.$nextTick(); - - expect(wrapper.vm.isTabActive(tabName)).toBe(returnValue); - }, - ); - }); + describe('tabs', () => { + it.each` + currentTab | returnValue + ${'opened'} | ${'true'} + ${'closed'} | ${undefined} + `( + 'when "$currentTab" is the selected tab, the Open tab is active=$returnValue', + ({ currentTab, returnValue }) => { + wrapper = createComponent({ currentTab }); + + const openTab = findAllGlTabs().at(0); + + expect(openTab.attributes('active')).toBe(returnValue); + }, + ); }); describe('template', () => { it('renders gl-tab for each tab within `tabs` array', () => { - const tabsEl = findAllGlTabs(); + wrapper = createComponent(); + + const tabs = findAllGlTabs(); - expect(tabsEl.exists()).toBe(true); - expect(tabsEl).toHaveLength(mockIssuableListProps.tabs.length); + expect(tabs).toHaveLength(mockIssuableListProps.tabs.length); }); - it('renders gl-badge component within a tab', () => { + it('renders gl-badge component within a tab', async () => { + wrapper = createComponent({ mountFn: mount }); + await nextTick(); + const badges = findAllGlBadges(); // Does not render `All` badge since it has an undefined count expect(badges).toHaveLength(2); - expect(badges.at(0).text()).toBe('5,000'); + expect(badges.at(0).text()).toBe('5,678'); expect(badges.at(1).text()).toBe(`${mockIssuableListProps.tabCounts.closed}`); }); it('renders contents for slot "nav-actions"', () => { - const buttonEl = wrapper.find('button.js-new-issuable'); + wrapper = createComponent(); - expect(buttonEl.exists()).toBe(true); - expect(buttonEl.text()).toBe('New issuable'); + const button = wrapper.find('button.js-new-issuable'); + + expect(button.text()).toBe('New issuable'); + }); + }); + + describe('counts', () => { + it('can display as truncated', async () => { + wrapper = createComponent({ truncateCounts: true, mountFn: mount }); + await nextTick(); + + expect(findAllGlBadges().at(0).text()).toBe('5.7k'); }); }); describe('events', () => { it('gl-tab component emits `click` event on `click` event', () => { - const tabEl = findAllGlTabs().at(0); + wrapper = createComponent(); + + const openTab = findAllGlTabs().at(0); - tabEl.vm.$emit('click', 'opened'); + openTab.vm.$emit('click', 'opened'); - expect(wrapper.emitted('click')).toBeTruthy(); - expect(wrapper.emitted('click')[0]).toEqual(['opened']); + expect(wrapper.emitted('click')).toEqual([['opened']]); }); }); }); diff --git a/spec/frontend/vue_shared/issuable/list/mock_data.js b/spec/frontend/vue_shared/issuable/list/mock_data.js index cfc7937b412..8640f4a2cd5 100644 --- a/spec/frontend/vue_shared/issuable/list/mock_data.js +++ b/spec/frontend/vue_shared/issuable/list/mock_data.js @@ -133,7 +133,7 @@ export const mockTabs = [ ]; export const mockTabCounts = { - opened: 5000, + opened: 5678, closed: 0, all: undefined, }; diff --git a/spec/frontend/vue_shared/issuable/show/components/issuable_body_spec.js b/spec/frontend/vue_shared/issuable/show/components/issuable_body_spec.js index 41bacf18a68..1a93838b03f 100644 --- a/spec/frontend/vue_shared/issuable/show/components/issuable_body_spec.js +++ b/spec/frontend/vue_shared/issuable/show/components/issuable_body_spec.js @@ -1,4 +1,5 @@ import { shallowMount } from '@vue/test-utils'; +import { nextTick } from 'vue'; import { useFakeDate } from 'helpers/fake_date'; import IssuableBody from '~/vue_shared/issuable/show/components/issuable_body.vue'; @@ -68,7 +69,7 @@ describe('IssuableBody', () => { }, }); - await wrapper.vm.$nextTick(); + await nextTick(); expect(wrapper.vm.isUpdated).toBe(returnValue); }, @@ -90,13 +91,13 @@ describe('IssuableBody', () => { editFormVisible: true, }); - await wrapper.vm.$nextTick(); + await nextTick(); wrapper.setProps({ editFormVisible: false, }); - await wrapper.vm.$nextTick(); + await nextTick(); expect(wrapper.vm.initTaskList).toHaveBeenCalled(); }); @@ -182,7 +183,7 @@ describe('IssuableBody', () => { editFormVisible: true, }); - await wrapper.vm.$nextTick(); + await nextTick(); const editFormEl = wrapper.find(IssuableEditForm); expect(editFormEl.exists()).toBe(true); @@ -221,7 +222,7 @@ describe('IssuableBody', () => { editFormVisible: true, }); - await wrapper.vm.$nextTick(); + await nextTick(); const issuableEditForm = wrapper.find(IssuableEditForm); diff --git a/spec/frontend/vue_shared/issuable/show/components/issuable_edit_form_spec.js b/spec/frontend/vue_shared/issuable/show/components/issuable_edit_form_spec.js index 051ffd27af4..b79dc0bf976 100644 --- a/spec/frontend/vue_shared/issuable/show/components/issuable_edit_form_spec.js +++ b/spec/frontend/vue_shared/issuable/show/components/issuable_edit_form_spec.js @@ -1,6 +1,7 @@ import { GlFormInput } from '@gitlab/ui'; import { shallowMount } from '@vue/test-utils'; +import { nextTick } from 'vue'; import IssuableEditForm from '~/vue_shared/issuable/show/components/issuable_edit_form.vue'; import IssuableEventHub from '~/vue_shared/issuable/show/event_hub'; import MarkdownField from '~/vue_shared/components/markdown/field.vue'; @@ -35,6 +36,7 @@ describe('IssuableEditForm', () => { beforeEach(() => { wrapper = createComponent(); + gon.features = { markdownContinueLists: true }; }); afterEach(() => { @@ -52,7 +54,7 @@ describe('IssuableEditForm', () => { }, }); - await wrapper.vm.$nextTick(); + await nextTick(); expect(wrapper.vm.title).toBe('Foo'); expect(wrapper.vm.description).toBe('Foobar'); @@ -67,7 +69,7 @@ describe('IssuableEditForm', () => { }, }); - await wrapper.vm.$nextTick(); + await nextTick(); expect(wrapper.vm.title).toBe(''); expect(wrapper.vm.description).toBe(''); diff --git a/spec/frontend/vue_shared/issuable/show/components/issuable_header_spec.js b/spec/frontend/vue_shared/issuable/show/components/issuable_header_spec.js index 41735923957..1cdd709159f 100644 --- a/spec/frontend/vue_shared/issuable/show/components/issuable_header_spec.js +++ b/spec/frontend/vue_shared/issuable/show/components/issuable_header_spec.js @@ -1,5 +1,6 @@ import { GlIcon, GlAvatarLabeled } from '@gitlab/ui'; import { shallowMount } from '@vue/test-utils'; +import { nextTick } from 'vue'; import { extendedWrapper } from 'helpers/vue_test_utils_helper'; import IssuableHeader from '~/vue_shared/issuable/show/components/issuable_header.vue'; @@ -78,7 +79,7 @@ describe('IssuableHeader', () => { blocked: true, }); - await wrapper.vm.$nextTick(); + await nextTick(); const blockedEl = wrapper.findByTestId('blocked'); @@ -91,7 +92,7 @@ describe('IssuableHeader', () => { confidential: true, }); - await wrapper.vm.$nextTick(); + await nextTick(); const confidentialEl = wrapper.findByTestId('confidential'); diff --git a/spec/frontend/vue_shared/issuable/show/components/issuable_title_spec.js b/spec/frontend/vue_shared/issuable/show/components/issuable_title_spec.js index cb418371760..93de6dbe306 100644 --- a/spec/frontend/vue_shared/issuable/show/components/issuable_title_spec.js +++ b/spec/frontend/vue_shared/issuable/show/components/issuable_title_spec.js @@ -1,5 +1,6 @@ import { GlIcon, GlButton, GlIntersectionObserver } from '@gitlab/ui'; import { shallowMount } from '@vue/test-utils'; +import { nextTick } from 'vue'; import { createMockDirective, getBinding } from 'helpers/vue_mock_directive'; import IssuableTitle from '~/vue_shared/issuable/show/components/issuable_title.vue'; @@ -64,7 +65,7 @@ describe('IssuableTitle', () => { }, }); - await wrapperWithTitle.vm.$nextTick(); + await nextTick(); const titleEl = wrapperWithTitle.find('h2'); expect(titleEl.exists()).toBe(true); @@ -90,7 +91,7 @@ describe('IssuableTitle', () => { stickyTitleVisible: true, }); - await wrapper.vm.$nextTick(); + await nextTick(); const stickyHeaderEl = wrapper.find('[data-testid="header"]'); expect(stickyHeaderEl.exists()).toBe(true); diff --git a/spec/frontend/vue_shared/issuable/sidebar/components/issuable_sidebar_root_spec.js b/spec/frontend/vue_shared/issuable/sidebar/components/issuable_sidebar_root_spec.js index 788ba70ddc0..47bf3c8ed83 100644 --- a/spec/frontend/vue_shared/issuable/sidebar/components/issuable_sidebar_root_spec.js +++ b/spec/frontend/vue_shared/issuable/sidebar/components/issuable_sidebar_root_spec.js @@ -1,5 +1,6 @@ import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils'; import Cookies from 'js-cookie'; +import { nextTick } from 'vue'; import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; import IssuableSidebarRoot from '~/vue_shared/issuable/sidebar/components/issuable_sidebar_root.vue'; @@ -69,7 +70,10 @@ describe('IssuableSidebarRoot', () => { it('updates "collapsed_gutter" cookie value and layout classes', async () => { await findToggleSidebarButton().trigger('click'); - expect(Cookies.set).toHaveBeenCalledWith(USER_COLLAPSED_GUTTER_COOKIE, true); + expect(Cookies.set).toHaveBeenCalledWith(USER_COLLAPSED_GUTTER_COOKIE, true, { + expires: 365, + secure: false, + }); assertPageLayoutClasses({ isExpanded: false }); }); }); @@ -88,7 +92,7 @@ describe('IssuableSidebarRoot', () => { jest.spyOn(bp, 'isDesktop').mockReturnValue(breakpoint === 'lg' || breakpoint === 'xl'); window.dispatchEvent(new Event('resize')); - await wrapper.vm.$nextTick(); + await nextTick(); assertPageLayoutClasses({ isExpanded: isExpandedValue }); }, |