Add latest changes from gitlab-org/gitlab@13-6-stable-eev13.6.0-rc42

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);
+  });
+});