diff options
Diffstat (limited to 'spec/frontend/vue_shared/issuable/list/components/issuable_tabs_spec.js')
-rw-r--r-- | spec/frontend/vue_shared/issuable/list/components/issuable_tabs_spec.js | 86 |
1 files changed, 49 insertions, 37 deletions
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']]); }); }); }); |