1 files changed, 34 insertions, 4 deletions

diff --git a/spec/frontend/boards/components/boards_selector_spec.js b/spec/frontend/boards/components/boards_selector_spec.js
index 13c017706ef..b17a5589c07 100644
--- a/spec/frontend/boards/components/boards_selector_spec.js
+++ b/spec/frontend/boards/components/boards_selector_spec.js
@@ -1,6 +1,7 @@
 import { GlDropdown, GlLoadingIcon, GlDropdownSectionHeader } from '@gitlab/ui';
 import Vue, { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
+// eslint-disable-next-line no-restricted-imports
 import Vuex from 'vuex';
 import waitForPromises from 'helpers/wait_for_promises';
 import { TEST_HOST } from 'spec/test_constants';
@@ -9,6 +10,7 @@ import groupBoardsQuery from '~/boards/graphql/group_boards.query.graphql';
 import projectBoardsQuery from '~/boards/graphql/project_boards.query.graphql';
 import groupRecentBoardsQuery from '~/boards/graphql/group_recent_boards.query.graphql';
 import projectRecentBoardsQuery from '~/boards/graphql/project_recent_boards.query.graphql';
+import * as cacheUpdates from '~/boards/graphql/cache_updates';
 import { WORKSPACE_GROUP, WORKSPACE_PROJECT } from '~/issues/constants';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
@@ -37,7 +39,6 @@ describe('BoardsSelector', () => {
   const createStore = () => {
     store = new Vuex.Store({
       actions: {
-        setError: jest.fn(),
         setBoardConfig: jest.fn(),
       },
       state: {
@@ -77,16 +78,19 @@ describe('BoardsSelector', () => {
     .fn()
     .mockResolvedValue(mockEmptyProjectRecentBoardsResponse);
 
+  const boardsHandlerFailure = jest.fn().mockRejectedValue(new Error('error'));
+
   const createComponent = ({
     projectBoardsQueryHandler = projectBoardsQueryHandlerSuccess,
     projectRecentBoardsQueryHandler = projectRecentBoardsQueryHandlerSuccess,
+    groupBoardsQueryHandler = groupBoardsQueryHandlerSuccess,
     isGroupBoard = false,
     isProjectBoard = false,
     provide = {},
   } = {}) => {
     fakeApollo = createMockApollo([
       [projectBoardsQuery, projectBoardsQueryHandler],
-      [groupBoardsQuery, groupBoardsQueryHandlerSuccess],
+      [groupBoardsQuery, groupBoardsQueryHandler],
       [projectRecentBoardsQuery, projectRecentBoardsQueryHandler],
       [groupRecentBoardsQuery, groupRecentBoardsQueryHandlerSuccess],
     ]);
@@ -115,6 +119,10 @@ describe('BoardsSelector', () => {
     });
   };
 
+  beforeEach(() => {
+    cacheUpdates.setError = jest.fn();
+  });
+
   afterEach(() => {
     fakeApollo = null;
   });
@@ -173,8 +181,7 @@ describe('BoardsSelector', () => {
 
         it('shows only matching boards when filtering', async () => {
           const filterTerm = 'board1';
-          const expectedCount = boards.filter((board) => board.node.name.includes(filterTerm))
-            .length;
+          const expectedCount = boards.filter((board) => board.name.includes(filterTerm)).length;
 
           fillSearchBox(filterTerm);
 
@@ -246,6 +253,29 @@ describe('BoardsSelector', () => {
       expect(queryHandler).toHaveBeenCalled();
       expect(notCalledHandler).not.toHaveBeenCalled();
     });
+
+    it.each`
+      boardType
+      ${WORKSPACE_GROUP}
+      ${WORKSPACE_PROJECT}
+    `('sets error when fetching $boardType boards fails', async ({ boardType }) => {
+      createStore();
+      createComponent({
+        isGroupBoard: boardType === WORKSPACE_GROUP,
+        isProjectBoard: boardType === WORKSPACE_PROJECT,
+        projectBoardsQueryHandler: boardsHandlerFailure,
+        groupBoardsQueryHandler: boardsHandlerFailure,
+      });
+
+      await nextTick();
+
+      // Emits gl-dropdown show event to simulate the dropdown is opened at initialization time
+      findDropdown().vm.$emit('show');
+
+      await waitForPromises();
+
+      expect(cacheUpdates.setError).toHaveBeenCalled();
+    });
   });
 
   describe('dropdown visibility', () => {