1 files changed, 36 insertions, 2 deletions

diff --git a/spec/frontend/boards/components/board_app_spec.js b/spec/frontend/boards/components/board_app_spec.js
index 148e696b57b..77ba6cdc9c0 100644
--- a/spec/frontend/boards/components/board_app_spec.js
+++ b/spec/frontend/boards/components/board_app_spec.js
@@ -1,14 +1,20 @@
 import { shallowMount } from '@vue/test-utils';
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
+import VueApollo from 'vue-apollo';
 import Vuex from 'vuex';
 
+import createMockApollo from 'helpers/mock_apollo_helper';
 import BoardApp from '~/boards/components/board_app.vue';
+import activeBoardItemQuery from 'ee_else_ce/boards/graphql/client/active_board_item.query.graphql';
+import { rawIssue } from '../mock_data';
 
 describe('BoardApp', () => {
   let wrapper;
   let store;
+  const mockApollo = createMockApollo();
 
   Vue.use(Vuex);
+  Vue.use(VueApollo);
 
   const createStore = ({ mockGetters = {} } = {}) => {
     store = new Vuex.Store({
@@ -23,12 +29,22 @@ describe('BoardApp', () => {
     });
   };
 
-  const createComponent = () => {
+  const createComponent = ({ isApolloBoard = false, issue = rawIssue } = {}) => {
+    mockApollo.clients.defaultClient.cache.writeQuery({
+      query: activeBoardItemQuery,
+      data: {
+        activeBoardItem: issue,
+      },
+    });
+
     wrapper = shallowMount(BoardApp, {
+      apolloProvider: mockApollo,
       store,
       provide: {
         initialBoardId: 'gid://gitlab/Board/1',
         initialFilterParams: {},
+        isIssueBoard: true,
+        isApolloBoard,
       },
     });
   };
@@ -50,4 +66,22 @@ describe('BoardApp', () => {
 
     expect(wrapper.classes()).not.toContain('is-compact');
   });
+
+  describe('Apollo boards', () => {
+    beforeEach(async () => {
+      createComponent({ isApolloBoard: true });
+      await nextTick();
+    });
+
+    it('should have is-compact class when a card is selected', () => {
+      expect(wrapper.classes()).toContain('is-compact');
+    });
+
+    it('should not have is-compact class when no card is selected', async () => {
+      createComponent({ isApolloBoard: true, issue: {} });
+      await nextTick();
+
+      expect(wrapper.classes()).not.toContain('is-compact');
+    });
+  });
 });