diff options
Diffstat (limited to 'spec/frontend/whats_new/components/app_spec.js')
-rw-r--r-- | spec/frontend/whats_new/components/app_spec.js | 201 |
1 files changed, 133 insertions, 68 deletions
diff --git a/spec/frontend/whats_new/components/app_spec.js b/spec/frontend/whats_new/components/app_spec.js index cba550b19db..7a9340da87a 100644 --- a/spec/frontend/whats_new/components/app_spec.js +++ b/spec/frontend/whats_new/components/app_spec.js @@ -1,6 +1,6 @@ import { createLocalVue, mount } from '@vue/test-utils'; import Vuex from 'vuex'; -import { GlDrawer, GlInfiniteScroll } from '@gitlab/ui'; +import { GlDrawer, GlInfiniteScroll, GlTabs } from '@gitlab/ui'; import { mockTracking, unmockTracking, triggerEvent } from 'helpers/tracking_helper'; import { createMockDirective, getBinding } from 'helpers/vue_mock_directive'; import App from '~/whats_new/components/app.vue'; @@ -16,12 +16,18 @@ const localVue = createLocalVue(); localVue.use(Vuex); describe('App', () => { - const propsData = { storageKey: 'storage-key' }; let wrapper; let store; let actions; let state; let trackingSpy; + let gitlabDotCom = true; + + const buildProps = () => ({ + storageKey: 'storage-key', + versions: ['3.11', '3.10'], + gitlabDotCom, + }); const buildWrapper = () => { actions = { @@ -45,7 +51,7 @@ describe('App', () => { wrapper = mount(App, { localVue, store, - propsData, + propsData: buildProps(), directives: { GlResizeObserver: createMockDirective(), }, @@ -53,112 +59,171 @@ describe('App', () => { }; const findInfiniteScroll = () => wrapper.find(GlInfiniteScroll); - const emitBottomReached = () => findInfiniteScroll().vm.$emit('bottomReached'); - beforeEach(async () => { + const setup = async () => { document.body.dataset.page = 'test-page'; document.body.dataset.namespaceId = 'namespace-840'; trackingSpy = mockTracking('_category_', null, jest.spyOn); buildWrapper(); - wrapper.vm.$store.state.features = [{ title: 'Whats New Drawer', url: 'www.url.com' }]; + wrapper.vm.$store.state.features = [ + { title: 'Whats New Drawer', url: 'www.url.com', release: 3.11 }, + ]; wrapper.vm.$store.state.drawerBodyHeight = MOCK_DRAWER_BODY_HEIGHT; await wrapper.vm.$nextTick(); - }); + }; afterEach(() => { wrapper.destroy(); unmockTracking(); }); - const getDrawer = () => wrapper.find(GlDrawer); + describe('gitlab.com', () => { + beforeEach(() => { + setup(); + }); - it('contains a drawer', () => { - expect(getDrawer().exists()).toBe(true); - }); + const getDrawer = () => wrapper.find(GlDrawer); - it('dispatches openDrawer and tracking calls when mounted', () => { - expect(actions.openDrawer).toHaveBeenCalledWith(expect.any(Object), 'storage-key'); - expect(trackingSpy).toHaveBeenCalledWith(undefined, 'click_whats_new_drawer', { - label: 'namespace_id', - value: 'namespace-840', + it('contains a drawer', () => { + expect(getDrawer().exists()).toBe(true); }); - }); - it('dispatches closeDrawer when clicking close', () => { - getDrawer().vm.$emit('close'); - expect(actions.closeDrawer).toHaveBeenCalled(); - }); + it('dispatches openDrawer and tracking calls when mounted', () => { + expect(actions.openDrawer).toHaveBeenCalledWith(expect.any(Object), 'storage-key'); + expect(trackingSpy).toHaveBeenCalledWith(undefined, 'click_whats_new_drawer', { + label: 'namespace_id', + value: 'namespace-840', + }); + }); - it.each([true, false])('passes open property', async openState => { - wrapper.vm.$store.state.open = openState; + it('dispatches closeDrawer when clicking close', () => { + getDrawer().vm.$emit('close'); + expect(actions.closeDrawer).toHaveBeenCalled(); + }); - await wrapper.vm.$nextTick(); + it.each([true, false])('passes open property', async openState => { + wrapper.vm.$store.state.open = openState; - expect(getDrawer().props('open')).toBe(openState); - }); + await wrapper.vm.$nextTick(); - it('renders features when provided via ajax', () => { - expect(actions.fetchItems).toHaveBeenCalled(); - expect(wrapper.find('h5').text()).toBe('Whats New Drawer'); - }); + expect(getDrawer().props('open')).toBe(openState); + }); - it('send an event when feature item is clicked', () => { - trackingSpy = mockTracking('_category_', wrapper.element, jest.spyOn); + it('renders features when provided via ajax', () => { + expect(actions.fetchItems).toHaveBeenCalled(); + expect(wrapper.find('[data-test-id="feature-title"]').text()).toBe('Whats New Drawer'); + }); - const link = wrapper.find('.whats-new-item-title-link'); - triggerEvent(link.element); + it('send an event when feature item is clicked', () => { + trackingSpy = mockTracking('_category_', wrapper.element, jest.spyOn); - expect(trackingSpy.mock.calls[1]).toMatchObject([ - '_category_', - 'click_whats_new_item', - { - label: 'Whats New Drawer', - property: 'www.url.com', - }, - ]); - }); + const link = wrapper.find('.whats-new-item-title-link'); + triggerEvent(link.element); + + expect(trackingSpy.mock.calls[1]).toMatchObject([ + '_category_', + 'click_whats_new_item', + { + label: 'Whats New Drawer', + property: 'www.url.com', + }, + ]); + }); + + it('renders infinite scroll', () => { + const scroll = findInfiniteScroll(); + + expect(scroll.props()).toMatchObject({ + fetchedItems: wrapper.vm.$store.state.features.length, + maxListHeight: MOCK_DRAWER_BODY_HEIGHT, + }); + }); + + describe('bottomReached', () => { + const emitBottomReached = () => findInfiniteScroll().vm.$emit('bottomReached'); - it('renders infinite scroll', () => { - const scroll = findInfiniteScroll(); + beforeEach(() => { + actions.fetchItems.mockClear(); + }); - expect(scroll.props()).toMatchObject({ - fetchedItems: wrapper.vm.$store.state.features.length, - maxListHeight: MOCK_DRAWER_BODY_HEIGHT, + it('when nextPage exists it calls fetchItems', () => { + wrapper.vm.$store.state.pageInfo = { nextPage: 840 }; + emitBottomReached(); + + expect(actions.fetchItems).toHaveBeenCalledWith(expect.anything(), { page: 840 }); + }); + + it('when nextPage does not exist it does not call fetchItems', () => { + wrapper.vm.$store.state.pageInfo = { nextPage: null }; + emitBottomReached(); + + expect(actions.fetchItems).not.toHaveBeenCalled(); + }); + }); + + it('calls getDrawerBodyHeight and setDrawerBodyHeight when resize directive is triggered', () => { + const { value } = getBinding(getDrawer().element, 'gl-resize-observer'); + + value(); + + expect(getDrawerBodyHeight).toHaveBeenCalledWith(wrapper.find(GlDrawer).element); + + expect(actions.setDrawerBodyHeight).toHaveBeenCalledWith( + expect.any(Object), + MOCK_DRAWER_BODY_HEIGHT, + ); }); }); - describe('bottomReached', () => { + describe('self managed', () => { + const findTabs = () => wrapper.find(GlTabs); + + const clickSecondTab = async () => { + const secondTab = wrapper.findAll('.nav-link').at(1); + await secondTab.trigger('click'); + await new Promise(resolve => requestAnimationFrame(resolve)); + }; + beforeEach(() => { - actions.fetchItems.mockClear(); + gitlabDotCom = false; + setup(); }); - it('when nextPage exists it calls fetchItems', () => { - wrapper.vm.$store.state.pageInfo = { nextPage: 840 }; - emitBottomReached(); + it('renders tabs with drawer body height and content', () => { + const scroll = findInfiniteScroll(); + const tabs = findTabs(); - expect(actions.fetchItems).toHaveBeenCalledWith(expect.anything(), 840); + expect(scroll.exists()).toBe(false); + expect(tabs.attributes().style).toBe(`height: ${MOCK_DRAWER_BODY_HEIGHT}px;`); + expect(wrapper.find('h5').text()).toBe('Whats New Drawer'); }); - it('when nextPage does not exist it does not call fetchItems', () => { - wrapper.vm.$store.state.pageInfo = { nextPage: null }; - emitBottomReached(); + describe('fetchVersion', () => { + beforeEach(() => { + actions.fetchItems.mockClear(); + }); - expect(actions.fetchItems).not.toHaveBeenCalled(); - }); - }); + it('when version isnt fetched, clicking a tab calls fetchItems', async () => { + const fetchVersionSpy = jest.spyOn(wrapper.vm, 'fetchVersion'); + await clickSecondTab(); - it('calls getDrawerBodyHeight and setDrawerBodyHeight when resize directive is triggered', () => { - const { value } = getBinding(getDrawer().element, 'gl-resize-observer'); + expect(fetchVersionSpy).toHaveBeenCalledWith('3.10'); + expect(actions.fetchItems).toHaveBeenCalledWith(expect.anything(), { version: '3.10' }); + }); - value(); + it('when version has been fetched, clicking a tab calls fetchItems', async () => { + wrapper.vm.$store.state.features.push({ title: 'GitLab Stories', release: 3.1 }); + await wrapper.vm.$nextTick(); - expect(getDrawerBodyHeight).toHaveBeenCalledWith(wrapper.find(GlDrawer).element); + const fetchVersionSpy = jest.spyOn(wrapper.vm, 'fetchVersion'); + await clickSecondTab(); - expect(actions.setDrawerBodyHeight).toHaveBeenCalledWith( - expect.any(Object), - MOCK_DRAWER_BODY_HEIGHT, - ); + expect(fetchVersionSpy).toHaveBeenCalledWith('3.10'); + expect(actions.fetchItems).not.toHaveBeenCalled(); + expect(wrapper.find('.tab-pane.active h5').text()).toBe('GitLab Stories'); + }); + }); }); }); |