1 files changed, 79 insertions, 5 deletions

diff --git a/spec/frontend/boards/components/board_content_spec.js b/spec/frontend/boards/components/board_content_spec.js
index 97d9e08f5d4..b2138700602 100644
--- a/spec/frontend/boards/components/board_content_spec.js
+++ b/spec/frontend/boards/components/board_content_spec.js
@@ -1,15 +1,20 @@
 import { GlAlert } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
+import VueApollo from 'vue-apollo';
 import Draggable from 'vuedraggable';
 import Vuex from 'vuex';
+import waitForPromises from 'helpers/wait_for_promises';
+import createMockApollo from 'helpers/mock_apollo_helper';
 import EpicsSwimlanes from 'ee_component/boards/components/epics_swimlanes.vue';
 import getters from 'ee_else_ce/boards/stores/getters';
+import boardListsQuery from 'ee_else_ce/boards/graphql/board_lists.query.graphql';
 import BoardColumn from '~/boards/components/board_column.vue';
 import BoardContent from '~/boards/components/board_content.vue';
 import BoardContentSidebar from '~/boards/components/board_content_sidebar.vue';
-import { mockLists } from '../mock_data';
+import { mockLists, boardListsQueryResponse } from '../mock_data';
 
+Vue.use(VueApollo);
 Vue.use(Vuex);
 
 const actions = {
@@ -18,6 +23,7 @@ const actions = {
 
 describe('BoardContent', () => {
   let wrapper;
+  let fakeApollo;
   window.gon = {};
 
   const defaultState = {
@@ -35,26 +41,68 @@ describe('BoardContent', () => {
     });
   };
 
-  const createComponent = ({ state, props = {}, canAdminList = true } = {}) => {
+  const createComponent = ({
+    state,
+    props = {},
+    canAdminList = true,
+    isApolloBoard = false,
+    issuableType = 'issue',
+    isIssueBoard = true,
+    isEpicBoard = false,
+    boardListQueryHandler = jest.fn().mockResolvedValue(boardListsQueryResponse),
+  } = {}) => {
+    fakeApollo = createMockApollo([[boardListsQuery, boardListQueryHandler]]);
+
     const store = createStore({
       ...defaultState,
       ...state,
     });
     wrapper = shallowMount(BoardContent, {
+      apolloProvider: fakeApollo,
       propsData: {
-        lists: mockLists,
         disabled: false,
+        boardId: 'gid://gitlab/Board/1',
         ...props,
       },
       provide: {
         canAdminList,
+        boardType: 'group',
+        fullPath: 'gitlab-org/gitlab',
+        issuableType,
+        isIssueBoard,
+        isEpicBoard,
+        isApolloBoard,
       },
       store,
     });
   };
 
+  beforeAll(() => {
+    global.ResizeObserver = class MockResizeObserver {
+      constructor(callback) {
+        this.callback = callback;
+
+        this.entries = [];
+      }
+
+      observe(entry) {
+        this.entries.push(entry);
+      }
+
+      disconnect() {
+        this.entries = [];
+        this.callback = null;
+      }
+
+      trigger() {
+        this.callback(this.entries);
+      }
+    };
+  });
+
   afterEach(() => {
     wrapper.destroy();
+    fakeApollo = null;
   });
 
   describe('default', () => {
@@ -74,11 +122,22 @@ describe('BoardContent', () => {
       expect(wrapper.findComponent(EpicsSwimlanes).exists()).toBe(false);
       expect(wrapper.findComponent(GlAlert).exists()).toBe(false);
     });
+
+    it('resizes the list on resize', async () => {
+      window.innerHeight = 1000;
+      jest.spyOn(Element.prototype, 'getBoundingClientRect').mockReturnValue({ top: 100 });
+
+      wrapper.vm.resizeObserver.trigger();
+
+      await nextTick();
+
+      expect(wrapper.findComponent({ ref: 'list' }).attributes('style')).toBe('height: 900px;');
+    });
   });
 
   describe('when issuableType is not issue', () => {
     beforeEach(() => {
-      createComponent({ state: { issuableType: 'foo' } });
+      createComponent({ issuableType: 'foo', isIssueBoard: false });
     });
 
     it('does not render BoardContentSidebar', () => {
@@ -105,4 +164,19 @@ describe('BoardContent', () => {
       expect(wrapper.findComponent(Draggable).exists()).toBe(false);
     });
   });
+
+  describe('when Apollo boards FF is on', () => {
+    beforeEach(async () => {
+      createComponent({ isApolloBoard: true });
+      await waitForPromises();
+    });
+
+    it('renders a BoardColumn component per list', () => {
+      expect(wrapper.findAllComponents(BoardColumn)).toHaveLength(mockLists.length);
+    });
+
+    it('renders BoardContentSidebar', () => {
+      expect(wrapper.findComponent(BoardContentSidebar).exists()).toBe(true);
+    });
+  });
 });