diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-12-04 18:09:36 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-12-04 18:09:36 +0300 |
commit | e0655935eb32ba057b6ced978940076681d71177 (patch) | |
tree | b931975665fc002f346bdd3c5242fe644316f86c /spec/frontend/whats_new | |
parent | 8322f051740fba113c5c1f6fba96b9c943240746 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'spec/frontend/whats_new')
-rw-r--r-- | spec/frontend/whats_new/components/app_spec.js | 201 | ||||
-rw-r--r-- | spec/frontend/whats_new/store/actions_spec.js | 17 |
2 files changed, 68 insertions, 150 deletions
diff --git a/spec/frontend/whats_new/components/app_spec.js b/spec/frontend/whats_new/components/app_spec.js index 7a9340da87a..cba550b19db 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, GlTabs } from '@gitlab/ui'; +import { GlDrawer, GlInfiniteScroll } 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,18 +16,12 @@ 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 = { @@ -51,7 +45,7 @@ describe('App', () => { wrapper = mount(App, { localVue, store, - propsData: buildProps(), + propsData, directives: { GlResizeObserver: createMockDirective(), }, @@ -59,171 +53,112 @@ describe('App', () => { }; const findInfiniteScroll = () => wrapper.find(GlInfiniteScroll); + const emitBottomReached = () => findInfiniteScroll().vm.$emit('bottomReached'); - const setup = async () => { + beforeEach(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', release: 3.11 }, - ]; + wrapper.vm.$store.state.features = [{ title: 'Whats New Drawer', url: 'www.url.com' }]; wrapper.vm.$store.state.drawerBodyHeight = MOCK_DRAWER_BODY_HEIGHT; await wrapper.vm.$nextTick(); - }; + }); afterEach(() => { wrapper.destroy(); unmockTracking(); }); - describe('gitlab.com', () => { - beforeEach(() => { - setup(); - }); - - const getDrawer = () => wrapper.find(GlDrawer); - - it('contains a drawer', () => { - expect(getDrawer().exists()).toBe(true); - }); - - 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('dispatches closeDrawer when clicking close', () => { - getDrawer().vm.$emit('close'); - expect(actions.closeDrawer).toHaveBeenCalled(); - }); - - it.each([true, false])('passes open property', async openState => { - wrapper.vm.$store.state.open = openState; - - await wrapper.vm.$nextTick(); - - expect(getDrawer().props('open')).toBe(openState); - }); - - it('renders features when provided via ajax', () => { - expect(actions.fetchItems).toHaveBeenCalled(); - expect(wrapper.find('[data-test-id="feature-title"]').text()).toBe('Whats New Drawer'); - }); - - it('send an event when feature item is clicked', () => { - trackingSpy = mockTracking('_category_', wrapper.element, jest.spyOn); + const getDrawer = () => wrapper.find(GlDrawer); - const link = wrapper.find('.whats-new-item-title-link'); - triggerEvent(link.element); + it('contains a drawer', () => { + expect(getDrawer().exists()).toBe(true); + }); - expect(trackingSpy.mock.calls[1]).toMatchObject([ - '_category_', - 'click_whats_new_item', - { - label: 'Whats New Drawer', - property: 'www.url.com', - }, - ]); + 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('renders infinite scroll', () => { - const scroll = findInfiniteScroll(); - - expect(scroll.props()).toMatchObject({ - fetchedItems: wrapper.vm.$store.state.features.length, - maxListHeight: MOCK_DRAWER_BODY_HEIGHT, - }); - }); + it('dispatches closeDrawer when clicking close', () => { + getDrawer().vm.$emit('close'); + expect(actions.closeDrawer).toHaveBeenCalled(); + }); - describe('bottomReached', () => { - const emitBottomReached = () => findInfiniteScroll().vm.$emit('bottomReached'); + it.each([true, false])('passes open property', async openState => { + wrapper.vm.$store.state.open = openState; - beforeEach(() => { - actions.fetchItems.mockClear(); - }); + await wrapper.vm.$nextTick(); - it('when nextPage exists it calls fetchItems', () => { - wrapper.vm.$store.state.pageInfo = { nextPage: 840 }; - emitBottomReached(); + expect(getDrawer().props('open')).toBe(openState); + }); - expect(actions.fetchItems).toHaveBeenCalledWith(expect.anything(), { page: 840 }); - }); + it('renders features when provided via ajax', () => { + expect(actions.fetchItems).toHaveBeenCalled(); + 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(); + it('send an event when feature item is clicked', () => { + trackingSpy = mockTracking('_category_', wrapper.element, jest.spyOn); - expect(actions.fetchItems).not.toHaveBeenCalled(); - }); - }); + const link = wrapper.find('.whats-new-item-title-link'); + triggerEvent(link.element); - it('calls getDrawerBodyHeight and setDrawerBodyHeight when resize directive is triggered', () => { - const { value } = getBinding(getDrawer().element, 'gl-resize-observer'); - - value(); + expect(trackingSpy.mock.calls[1]).toMatchObject([ + '_category_', + 'click_whats_new_item', + { + label: 'Whats New Drawer', + property: 'www.url.com', + }, + ]); + }); - expect(getDrawerBodyHeight).toHaveBeenCalledWith(wrapper.find(GlDrawer).element); + it('renders infinite scroll', () => { + const scroll = findInfiniteScroll(); - expect(actions.setDrawerBodyHeight).toHaveBeenCalledWith( - expect.any(Object), - MOCK_DRAWER_BODY_HEIGHT, - ); + expect(scroll.props()).toMatchObject({ + fetchedItems: wrapper.vm.$store.state.features.length, + maxListHeight: MOCK_DRAWER_BODY_HEIGHT, }); }); - 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)); - }; - + describe('bottomReached', () => { beforeEach(() => { - gitlabDotCom = false; - setup(); + actions.fetchItems.mockClear(); }); - it('renders tabs with drawer body height and content', () => { - const scroll = findInfiniteScroll(); - const tabs = findTabs(); + it('when nextPage exists it calls fetchItems', () => { + wrapper.vm.$store.state.pageInfo = { nextPage: 840 }; + emitBottomReached(); - 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'); + expect(actions.fetchItems).toHaveBeenCalledWith(expect.anything(), 840); }); - describe('fetchVersion', () => { - beforeEach(() => { - actions.fetchItems.mockClear(); - }); + it('when nextPage does not exist it does not call fetchItems', () => { + wrapper.vm.$store.state.pageInfo = { nextPage: null }; + emitBottomReached(); - it('when version isnt fetched, clicking a tab calls fetchItems', async () => { - const fetchVersionSpy = jest.spyOn(wrapper.vm, 'fetchVersion'); - await clickSecondTab(); + expect(actions.fetchItems).not.toHaveBeenCalled(); + }); + }); - expect(fetchVersionSpy).toHaveBeenCalledWith('3.10'); - expect(actions.fetchItems).toHaveBeenCalledWith(expect.anything(), { version: '3.10' }); - }); + it('calls getDrawerBodyHeight and setDrawerBodyHeight when resize directive is triggered', () => { + const { value } = getBinding(getDrawer().element, 'gl-resize-observer'); - 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(); + value(); - const fetchVersionSpy = jest.spyOn(wrapper.vm, 'fetchVersion'); - await clickSecondTab(); + expect(getDrawerBodyHeight).toHaveBeenCalledWith(wrapper.find(GlDrawer).element); - expect(fetchVersionSpy).toHaveBeenCalledWith('3.10'); - expect(actions.fetchItems).not.toHaveBeenCalled(); - expect(wrapper.find('.tab-pane.active h5').text()).toBe('GitLab Stories'); - }); - }); + expect(actions.setDrawerBodyHeight).toHaveBeenCalledWith( + expect.any(Object), + MOCK_DRAWER_BODY_HEIGHT, + ); }); }); diff --git a/spec/frontend/whats_new/store/actions_spec.js b/spec/frontend/whats_new/store/actions_spec.js index 82f17a2726f..12722b1b3b1 100644 --- a/spec/frontend/whats_new/store/actions_spec.js +++ b/spec/frontend/whats_new/store/actions_spec.js @@ -41,23 +41,6 @@ describe('whats new actions', () => { axiosMock.restore(); }); - it('passes arguments', () => { - axiosMock.reset(); - - axiosMock - .onGet('/-/whats_new', { params: { page: 8, version: 40 } }) - .replyOnce(200, [{ title: 'GitLab Stories' }]); - - testAction( - actions.fetchItems, - { page: 8, version: 40 }, - {}, - expect.arrayContaining([ - { type: types.ADD_FEATURES, payload: [{ title: 'GitLab Stories' }] }, - ]), - ); - }); - it('if already fetching, does not fetch', () => { testAction(actions.fetchItems, {}, { fetching: true }, []); }); |