diff options
Diffstat (limited to 'spec/frontend/whats_new')
-rw-r--r-- | spec/frontend/whats_new/components/app_spec.js | 67 | ||||
-rw-r--r-- | spec/frontend/whats_new/store/actions_spec.js | 21 | ||||
-rw-r--r-- | spec/frontend/whats_new/store/mutations_spec.js | 35 | ||||
-rw-r--r-- | spec/frontend/whats_new/utils/get_drawer_body_height_spec.js | 38 |
4 files changed, 150 insertions, 11 deletions
diff --git a/spec/frontend/whats_new/components/app_spec.js b/spec/frontend/whats_new/components/app_spec.js index 77c2ae19d1f..cba550b19db 100644 --- a/spec/frontend/whats_new/components/app_spec.js +++ b/spec/frontend/whats_new/components/app_spec.js @@ -1,8 +1,16 @@ import { createLocalVue, mount } from '@vue/test-utils'; import Vuex from 'vuex'; -import { GlDrawer } 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'; +import { getDrawerBodyHeight } from '~/whats_new/utils/get_drawer_body_height'; + +const MOCK_DRAWER_BODY_HEIGHT = 42; + +jest.mock('~/whats_new/utils/get_drawer_body_height', () => ({ + getDrawerBodyHeight: jest.fn().mockImplementation(() => MOCK_DRAWER_BODY_HEIGHT), +})); const localVue = createLocalVue(); localVue.use(Vuex); @@ -20,11 +28,13 @@ describe('App', () => { openDrawer: jest.fn(), closeDrawer: jest.fn(), fetchItems: jest.fn(), + setDrawerBodyHeight: jest.fn(), }; state = { open: true, - features: null, + features: [], + drawerBodyHeight: null, }; store = new Vuex.Store({ @@ -36,9 +46,15 @@ describe('App', () => { localVue, store, propsData, + directives: { + GlResizeObserver: createMockDirective(), + }, }); }; + const findInfiniteScroll = () => wrapper.find(GlInfiniteScroll); + const emitBottomReached = () => findInfiniteScroll().vm.$emit('bottomReached'); + beforeEach(async () => { document.body.dataset.page = 'test-page'; document.body.dataset.namespaceId = 'namespace-840'; @@ -47,6 +63,7 @@ describe('App', () => { buildWrapper(); 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(); }); @@ -61,7 +78,7 @@ describe('App', () => { expect(getDrawer().exists()).toBe(true); }); - it('dispatches openDrawer when mounted', () => { + 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', @@ -90,7 +107,7 @@ describe('App', () => { it('send an event when feature item is clicked', () => { trackingSpy = mockTracking('_category_', wrapper.element, jest.spyOn); - const link = wrapper.find('[data-testid="whats-new-title-link"]'); + const link = wrapper.find('.whats-new-item-title-link'); triggerEvent(link.element); expect(trackingSpy.mock.calls[1]).toMatchObject([ @@ -102,4 +119,46 @@ describe('App', () => { }, ]); }); + + 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', () => { + beforeEach(() => { + actions.fetchItems.mockClear(); + }); + + it('when nextPage exists it calls fetchItems', () => { + wrapper.vm.$store.state.pageInfo = { nextPage: 840 }; + emitBottomReached(); + + expect(actions.fetchItems).toHaveBeenCalledWith(expect.anything(), 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, + ); + }); }); diff --git a/spec/frontend/whats_new/store/actions_spec.js b/spec/frontend/whats_new/store/actions_spec.js index 95ab667d611..12722b1b3b1 100644 --- a/spec/frontend/whats_new/store/actions_spec.js +++ b/spec/frontend/whats_new/store/actions_spec.js @@ -30,7 +30,9 @@ describe('whats new actions', () => { axiosMock = new MockAdapter(axios); axiosMock .onGet('/-/whats_new') - .replyOnce(200, [{ title: 'Whats New Drawer', url: 'www.url.com' }]); + .replyOnce(200, [{ title: 'Whats New Drawer', url: 'www.url.com' }], { + 'x-next-page': '2', + }); await waitForPromises(); }); @@ -39,10 +41,23 @@ describe('whats new actions', () => { axiosMock.restore(); }); - it('should commit setFeatures', () => { + it('if already fetching, does not fetch', () => { + testAction(actions.fetchItems, {}, { fetching: true }, []); + }); + + it('should commit fetching, setFeatures and setPagination', () => { testAction(actions.fetchItems, {}, {}, [ - { type: types.SET_FEATURES, payload: [{ title: 'Whats New Drawer', url: 'www.url.com' }] }, + { type: types.SET_FETCHING, payload: true }, + { type: types.ADD_FEATURES, payload: [{ title: 'Whats New Drawer', url: 'www.url.com' }] }, + { type: types.SET_PAGE_INFO, payload: { nextPage: 2 } }, + { type: types.SET_FETCHING, payload: false }, ]); }); }); + + describe('setDrawerBodyHeight', () => { + testAction(actions.setDrawerBodyHeight, 42, {}, [ + { type: types.SET_DRAWER_BODY_HEIGHT, payload: 42 }, + ]); + }); }); diff --git a/spec/frontend/whats_new/store/mutations_spec.js b/spec/frontend/whats_new/store/mutations_spec.js index feaa1dd2a3b..4967fb51d2b 100644 --- a/spec/frontend/whats_new/store/mutations_spec.js +++ b/spec/frontend/whats_new/store/mutations_spec.js @@ -23,10 +23,37 @@ describe('whats new mutations', () => { }); }); - describe('setFeatures', () => { - it('sets features to data', () => { - mutations[types.SET_FEATURES](state, 'bells and whistles'); - expect(state.features).toBe('bells and whistles'); + describe('addFeatures', () => { + it('adds features from data', () => { + mutations[types.ADD_FEATURES](state, ['bells and whistles']); + expect(state.features).toEqual(['bells and whistles']); + }); + + it('when there are already items, it adds items', () => { + state.features = ['shiny things']; + mutations[types.ADD_FEATURES](state, ['bells and whistles']); + expect(state.features).toEqual(['shiny things', 'bells and whistles']); + }); + }); + + describe('setPageInfo', () => { + it('sets page info', () => { + mutations[types.SET_PAGE_INFO](state, { nextPage: 8 }); + expect(state.pageInfo).toEqual({ nextPage: 8 }); + }); + }); + + describe('setFetching', () => { + it('sets fetching', () => { + mutations[types.SET_FETCHING](state, true); + expect(state.fetching).toBe(true); + }); + }); + + describe('setDrawerBodyHeight', () => { + it('sets drawerBodyHeight', () => { + mutations[types.SET_DRAWER_BODY_HEIGHT](state, 840); + expect(state.drawerBodyHeight).toBe(840); }); }); }); diff --git a/spec/frontend/whats_new/utils/get_drawer_body_height_spec.js b/spec/frontend/whats_new/utils/get_drawer_body_height_spec.js new file mode 100644 index 00000000000..d096a3cbdc6 --- /dev/null +++ b/spec/frontend/whats_new/utils/get_drawer_body_height_spec.js @@ -0,0 +1,38 @@ +import { mount } from '@vue/test-utils'; +import { GlDrawer } from '@gitlab/ui'; +import { getDrawerBodyHeight } from '~/whats_new/utils/get_drawer_body_height'; + +describe('~/whats_new/utils/get_drawer_body_height', () => { + let drawerWrapper; + + beforeEach(() => { + drawerWrapper = mount(GlDrawer, { + propsData: { open: true }, + }); + }); + + afterEach(() => { + drawerWrapper.destroy(); + }); + + const setClientHeight = (el, height) => { + Object.defineProperty(el, 'clientHeight', { + get() { + return height; + }, + }); + }; + const setDrawerDimensions = ({ height, top, headerHeight }) => { + const drawer = drawerWrapper.element; + + setClientHeight(drawer, height); + jest.spyOn(drawer, 'getBoundingClientRect').mockReturnValue({ top }); + setClientHeight(drawer.querySelector('.gl-drawer-header'), headerHeight); + }; + + it('calculates height of drawer body', () => { + setDrawerDimensions({ height: 100, top: 5, headerHeight: 40 }); + + expect(getDrawerBodyHeight(drawerWrapper.element)).toBe(55); + }); +}); |