Merge branch 'fix-create-flash-fixtures' into 'master'

Fix older flash message checks in specs

See merge request gitlab-org/gitlab!64614

ee/spec/frontend/analytics/cycle_analytics/components/base_spec.js

@@ -17,6 +17,7 @@ import { toYmd } from 'ee/analytics/shared/utils';
 import waitForPromises from 'helpers/wait_for_promises';
 import PathNavigation from '~/cycle_analytics/components/path_navigation.vue';
 import { OVERVIEW_STAGE_ID } from '~/cycle_analytics/constants';
+import createFlash from '~/flash';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import * as commonUtils from '~/lib/utils/common_utils';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
@@ -33,6 +34,7 @@ const stage = null;
 
 const localVue = createLocalVue();
 localVue.use(Vuex);
+jest.mock('~/flash');
 
 const defaultStubs = {
   'stage-event-list': true,
@@ -364,8 +366,6 @@ describe('EE Value Stream Analytics component', () => {
 
   describe('with failed requests while loading', () => {
     beforeEach(async () => {
-      setFixtures('<div class="flash-container"></div>');
-
       mock = new MockAdapter(axios);
       mockRequiredRoutes(mock);
       wrapper = await createComponent();
@@ -377,25 +377,21 @@ describe('EE Value Stream Analytics component', () => {
       wrapper = null;
     });
 
-    const findFlashError = () => document.querySelector('.flash-container .flash-text');
-    const findError = async (msg) => {
-      await waitForPromises();
-      expect(findFlashError().innerText.trim()).toEqual(msg);
-    };
-
     it('will display an error if the fetchGroupStagesAndEvents request fails', async () => {
-      expect(await findFlashError()).toBeNull();
+      expect(createFlash).not.toHaveBeenCalled();
 
       mock
         .onGet(mockData.endpoints.baseStagesEndpoint)
         .reply(httpStatusCodes.NOT_FOUND, { response: { status: httpStatusCodes.NOT_FOUND } });
       wrapper = await createComponent();
 
-      await findError('There was an error fetching value stream analytics stages.');
+      expect(createFlash).toHaveBeenCalledWith({
+        message: 'There was an error fetching value stream analytics stages.',
+      });
     });
 
     it('will display an error if the fetchStageData request fails', async () => {
-      expect(await findFlashError()).toBeNull();
+      expect(createFlash).not.toHaveBeenCalled();
 
       mock
         .onGet(mockData.endpoints.stageData)
@@ -403,33 +399,41 @@ describe('EE Value Stream Analytics component', () => {
 
       await createComponent({ selectedStage: mockData.issueStage });
 
-      await findError('There was an error fetching data for the selected stage');
+      expect(createFlash).toHaveBeenCalledWith({
+        message: 'There was an error fetching data for the selected stage',
+      });
     });
 
     it('will display an error if the fetchTopRankedGroupLabels request fails', async () => {
-      expect(await findFlashError()).toBeNull();
+      expect(createFlash).not.toHaveBeenCalled();
 
       mock
         .onGet(mockData.endpoints.tasksByTypeTopLabelsData)
         .reply(httpStatusCodes.NOT_FOUND, { response: { status: httpStatusCodes.NOT_FOUND } });
       await createComponent();
+      await waitForPromises();
 
-      await findError('There was an error fetching the top labels for the selected group');
+      expect(createFlash).toHaveBeenCalledWith({
+        message: 'There was an error fetching the top labels for the selected group',
+      });
     });
 
     it('will display an error if the fetchTasksByTypeData request fails', async () => {
-      expect(await findFlashError()).toBeNull();
+      expect(createFlash).not.toHaveBeenCalled();
 
       mock
         .onGet(mockData.endpoints.tasksByTypeData)
         .reply(httpStatusCodes.NOT_FOUND, { response: { status: httpStatusCodes.NOT_FOUND } });
       await createComponent();
+      await waitForPromises();
 
-      await findError('There was an error fetching data for the tasks by type chart');
+      expect(createFlash).toHaveBeenCalledWith({
+        message: 'There was an error fetching data for the tasks by type chart',
+      });
     });
 
     it('will display an error if the fetchStageMedian request fails', async () => {
-      expect(await findFlashError()).toBeNull();
+      expect(createFlash).not.toHaveBeenCalled();
 
       mock
         .onGet(mockData.endpoints.stageMedian)
@@ -437,9 +441,9 @@ describe('EE Value Stream Analytics component', () => {
       await createComponent();
 
       await waitForPromises();
-      expect(await findFlashError().innerText.trim()).toEqual(
-        'There was an error fetching median data for stages',
-      );
+      expect(createFlash).toHaveBeenCalledWith({
+        message: 'There was an error fetching median data for stages',
+      });
     });
   });
 

ee/spec/frontend/analytics/cycle_analytics/components/labels_selector_spec.js

@@ -7,8 +7,11 @@ import LabelsSelector from 'ee/analytics/cycle_analytics/components/labels_selec
 import createStore from 'ee/analytics/cycle_analytics/store';
 import * as getters from 'ee/analytics/cycle_analytics/store/getters';
 import waitForPromises from 'helpers/wait_for_promises';
+import createFlash from '~/flash';
 import { groupLabels } from '../mock_data';
 
+jest.mock('~/flash');
+
 const selectedLabel = groupLabels[groupLabels.length - 1];
 const findActiveItem = (wrapper) =>
   wrapper
@@ -16,8 +19,6 @@ const findActiveItem = (wrapper) =>
     .filter((d) => d.attributes('active'))
     .at(0);
 
-const findFlashError = () => document.querySelector('.flash-container .flash-text');
-
 const mockGroupLabelsRequest = (status = 200) =>
   new MockAdapter(axios).onGet().reply(status, groupLabels);
 
@@ -79,7 +80,6 @@ describe('Value Stream Analytics LabelsSelector', () => {
 
     describe('with a failed request', () => {
       beforeEach(() => {
-        setFixtures('<div class="flash-container"></div>');
         mock = mockGroupLabelsRequest(404);
         wrapper = createComponent({});
 
@@ -87,9 +87,9 @@ describe('Value Stream Analytics LabelsSelector', () => {
       });
 
       it('should flash an error message', () => {
-        expect(findFlashError().innerText.trim()).toEqual(
-          'There was an error fetching label data for the selected group',
-        );
+        expect(createFlash).toHaveBeenCalledWith({
+          message: 'There was an error fetching label data for the selected group',
+        });
       });
     });
 

ee/spec/frontend/analytics/cycle_analytics/helpers.js

@@ -16,9 +16,6 @@ export function renderTotalTime(selector, element, totalTime = {}) {
   }
 }
 
-export const shouldFlashAMessage = (msg = '') =>
-  expect(document.querySelector('.flash-container .flash-text').innerText.trim()).toBe(msg);
-
 export const findDropdownItems = (wrapper) => wrapper.findAllComponents(GlDropdownItem);
 
 export const findDropdownItemText = (wrapper) =>
@@ -26,7 +23,6 @@ export const findDropdownItemText = (wrapper) =>
 
 export default {
   renderTotalTime,
-  shouldFlashAMessage,
   findDropdownItems,
   findDropdownItemText,
 };

ee/spec/frontend/analytics/cycle_analytics/store/modules/duration_chart/actions_spec.js

@@ -5,8 +5,8 @@ import * as actions from 'ee/analytics/cycle_analytics/store/modules/duration_ch
 import * as getters from 'ee/analytics/cycle_analytics/store/modules/duration_chart/getters';
 import * as types from 'ee/analytics/cycle_analytics/store/modules/duration_chart/mutation_types';
 import testAction from 'helpers/vuex_action_helper';
+import createFlash from '~/flash';
 import httpStatusCodes from '~/lib/utils/http_status';
-import { shouldFlashAMessage } from '../../../helpers';
 import {
   group,
   allowedStages as stages,
@@ -18,6 +18,7 @@ import {
   valueStreams,
 } from '../../../mock_data';
 
+jest.mock('~/flash');
 const selectedGroup = { fullPath: group.path };
 const [stage1, stage2] = stages;
 const hiddenStage = { ...stage1, hidden: true, id: 3, slug: 3 };
@@ -165,10 +166,6 @@ describe('DurationChart actions', () => {
   });
 
   describe('receiveDurationDataError', () => {
-    beforeEach(() => {
-      setFixtures('<div class="flash-container"></div>');
-    });
-
     it("commits the 'RECEIVE_DURATION_DATA_ERROR' mutation", () => {
       testAction(
         actions.receiveDurationDataError,
@@ -189,9 +186,9 @@ describe('DurationChart actions', () => {
         commit: () => {},
       });
 
-      shouldFlashAMessage(
-        'There was an error while fetching value stream analytics duration data.',
-      );
+      expect(createFlash).toHaveBeenCalledWith({
+        message: 'There was an error while fetching value stream analytics duration data.',
+      });
     });
   });
 

ee/spec/frontend/boards/components/board_list_selector/board_list_selector_spec.js

 import MockAdapter from 'axios-mock-adapter';
 import BoardListSelector from 'ee/boards/components/boards_list_selector/';
-
 import mountComponent from 'helpers/vue_mount_component_helper';
-
 import { mockAssigneesList } from 'jest/boards/mock_data';
 import { TEST_HOST } from 'spec/test_constants';
 import { createStore } from '~/boards/stores';
 import boardsStore from '~/boards/stores/boards_store';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 
+jest.mock('~/flash');
+
 describe('BoardListSelector', () => {
   global.gon.features = {
     ...(global.gon.features || {}),
@@ -32,7 +33,6 @@ describe('BoardListSelector', () => {
   beforeEach(() => {
     mock = new MockAdapter(axios);
 
-    setFixtures('<div class="flash-container"></div>');
     vm = createComponent();
     vm.vuexStore = createStore();
   });
@@ -83,9 +83,9 @@ describe('BoardListSelector', () => {
         vm.loadList()
           .then(() => {
             expect(vm.loading).toBe(false);
-            expect(document.querySelector('.flash-text').innerText.trim()).toBe(
-              'Something went wrong while fetching assignees list',
-            );
+            expect(createFlash).toHaveBeenCalledWith({
+              message: 'Something went wrong while fetching assignees list',
+            });
           })
           .then(done)
           .catch(done.fail);

ee/spec/frontend/epic/store/actions_spec.js

@@ -6,11 +6,14 @@ import defaultState from 'ee/epic/store/state';
 import epicUtils from 'ee/epic/utils/epic_utils';
 
 import testAction from 'helpers/vuex_action_helper';
+import createFlash from '~/flash';
 import { EVENT_ISSUABLE_VUE_APP_CHANGE } from '~/issuable/constants';
 import axios from '~/lib/utils/axios_utils';
 
 import { mockEpicMeta, mockEpicData } from '../mock_data';
 
+jest.mock('~/flash');
+
 describe('Epic Store Actions', () => {
   let state;
 
@@ -141,10 +144,6 @@ describe('Epic Store Actions', () => {
   });
 
   describe('requestEpicParticipantsFailure', () => {
-    beforeEach(() => {
-      setFixtures('<div class="flash-container"></div>');
-    });
-
     it('does not invoke any mutations or actions', (done) => {
       testAction(actions.requestEpicParticipantsFailure, {}, state, [], [], done);
     });
@@ -152,9 +151,9 @@ describe('Epic Store Actions', () => {
     it('shows flash error', () => {
       actions.requestEpicParticipantsFailure({ commit: () => {} });
 
-      expect(document.querySelector('.flash-container .flash-text').innerText.trim()).toBe(
-        'There was an error getting the epic participants.',
-      );
+      expect(createFlash).toHaveBeenCalledWith({
+        message: 'There was an error getting the epic participants.',
+      });
     });
   });
 
@@ -185,10 +184,6 @@ describe('Epic Store Actions', () => {
   });
 
   describe('requestEpicStatusChangeFailure', () => {
-    beforeEach(() => {
-      setFixtures('<div class="flash-container"></div>');
-    });
-
     it('should set status change flag', (done) => {
       testAction(
         actions.requestEpicStatusChangeFailure,
@@ -203,9 +198,9 @@ describe('Epic Store Actions', () => {
     it('should show flash error', () => {
       actions.requestEpicStatusChangeFailure({ commit: () => {} });
 
-      expect(document.querySelector('.flash-container .flash-text').innerText.trim()).toBe(
-        'Unable to update this epic at this time.',
-      );
+      expect(createFlash).toHaveBeenCalledWith({
+        message: 'Unable to update this epic at this time.',
+      });
     });
   });
 
@@ -384,10 +379,6 @@ describe('Epic Store Actions', () => {
   });
 
   describe('requestEpicTodoToggleFailure', () => {
-    beforeEach(() => {
-      setFixtures('<div class="flash-container"></div>');
-    });
-
     it('Should set `state.epicTodoToggleInProgress` flag to `false`', (done) => {
       testAction(
         actions.requestEpicTodoToggleFailure,
@@ -408,9 +399,9 @@ describe('Epic Store Actions', () => {
         {},
       );
 
-      expect(document.querySelector('.flash-container .flash-text').innerText.trim()).toBe(
-        'There was an error deleting the To Do.',
-      );
+      expect(createFlash).toHaveBeenCalledWith({
+        message: 'There was an error deleting the To Do.',
+      });
     });
 
     it('Should show flash error with message "There was an error adding a To Do." when `state.todoExists` is `false`', () => {
@@ -422,9 +413,7 @@ describe('Epic Store Actions', () => {
         {},
       );
 
-      expect(document.querySelector('.flash-container .flash-text').innerText.trim()).toBe(
-        'There was an error adding a To Do.',
-      );
+      expect(createFlash).toHaveBeenCalledWith({ message: 'There was an error adding a To Do.' });
     });
   });
 
@@ -645,10 +634,6 @@ describe('Epic Store Actions', () => {
   });
 
   describe('requestEpicDateSaveFailure', () => {
-    beforeEach(() => {
-      setFixtures('<div class="flash-container"></div>');
-    });
-
     it('should set `state.epicStartDateSaveInProgress` flag to `false` and set value of `startDateIsFixed` to that of param `dateTypeIsFixed` when called with `dateType` as `start`', (done) => {
       const data = {
         dateType: dateTypes.start,
@@ -699,9 +684,9 @@ describe('Epic Store Actions', () => {
         { dateType: dateTypes.start },
       );
 
-      expect(document.querySelector('.flash-container .flash-text').innerText.trim()).toBe(
-        'An error occurred while saving the start date',
-      );
+      expect(createFlash).toHaveBeenCalledWith({
+        message: 'An error occurred while saving the start date',
+      });
     });
 
     it('should show flash error with message "An error occurred while saving the due date" when called with `dateType` as `due`', () => {
@@ -712,9 +697,9 @@ describe('Epic Store Actions', () => {
         { dateType: dateTypes.due },
       );
 
-      expect(document.querySelector('.flash-container .flash-text').innerText.trim()).toBe(
-        'An error occurred while saving the due date',
-      );
+      expect(createFlash).toHaveBeenCalledWith({
+        message: 'An error occurred while saving the due date',
+      });
     });
   });
 
@@ -839,10 +824,6 @@ describe('Epic Store Actions', () => {
   });
 
   describe('receiveEpicLabelsSelectFailure', () => {
-    beforeEach(() => {
-      setFixtures('<div class="flash-container"></div>');
-    });
-
     it('should set `state.epicLabelsSelectInProgress` flag to `false`', (done) => {
       testAction(
         actions.receiveEpicLabelsSelectFailure,
@@ -862,9 +843,9 @@ describe('Epic Store Actions', () => {
         {},
       );
 
-      expect(document.querySelector('.flash-container .flash-text').innerText.trim()).toBe(
-        'An error occurred while updating labels.',
-      );
+      expect(createFlash).toHaveBeenCalledWith({
+        message: 'An error occurred while updating labels.',
+      });
     });
   });
 
@@ -968,10 +949,6 @@ describe('Epic Store Actions', () => {
   });
 
   describe('requestEpicSubscriptionToggleFailure', () => {
-    beforeEach(() => {
-      setFixtures('<div class="flash-container"></div>');
-    });
-
     it('should set `state.requestEpicSubscriptionToggleFailure` flag to `false`', (done) => {
       testAction(
         actions.requestEpicSubscriptionToggleFailure,
@@ -992,9 +969,9 @@ describe('Epic Store Actions', () => {
         {},
       );
 
-      expect(document.querySelector('.flash-container .flash-text').innerText.trim()).toBe(
-        'An error occurred while subscribing to notifications.',
-      );
+      expect(createFlash).toHaveBeenCalledWith({
+        message: 'An error occurred while subscribing to notifications.',
+      });
     });
 
     it('should show flash error with message "An error occurred while unsubscribing to notifications." when `state.subscribed` is `true`', () => {
@@ -1006,9 +983,9 @@ describe('Epic Store Actions', () => {
         {},
       );
 
-      expect(document.querySelector('.flash-container .flash-text').innerText.trim()).toBe(
-        'An error occurred while unsubscribing to notifications.',
-      );
+      expect(createFlash).toHaveBeenCalledWith({
+        message: 'An error occurred while unsubscribing to notifications.',
+      });
     });
   });
 
@@ -1160,10 +1137,6 @@ describe('Epic Store Actions', () => {
   });
 
   describe('requestEpicCreateFailure', () => {
-    beforeEach(() => {
-      setFixtures('<div class="flash-container"></div>');
-    });
-
     it('should set `state.epicCreateInProgress` flag to `false`', (done) => {
       testAction(
         actions.requestEpicCreateFailure,
@@ -1180,9 +1153,7 @@ describe('Epic Store Actions', () => {
         commit: () => {},
       });
 
-      expect(document.querySelector('.flash-container .flash-text').innerText.trim()).toBe(
-        'Error creating epic',
-      );
+      expect(createFlash).toHaveBeenCalledWith({ message: 'Error creating epic' });
     });
   });
 

ee/spec/frontend/related_items_tree/store/actions_spec.js

@@ -663,10 +663,6 @@ describe('RelatedItemTree', () => {
       });
 
       describe('receiveRemoveItemFailure', () => {
-        beforeEach(() => {
-          setFixtures('<div class="flash-container"></div>');
-        });
-
         it('should set `state.childrenFlags[ref].itemRemoveInProgress` to false', () => {
           testAction(
             actions.receiveRemoveItemFailure,

ee/spec/frontend/vue_shared/components/sidebar/epics_select/base_spec.js

@@ -18,7 +18,6 @@ describe('EpicsSelect', () => {
     const storeStandalone = createDefaultStore();
 
     beforeEach(() => {
-      setFixtures('<div class="flash-container"></div>');
       const props = {
         canEdit: true,
         initialEpic: mockEpic1,

ee/spec/frontend/vue_shared/components/sidebar/epics_select/store/actions_spec.js

 import Api from 'ee/api';
-
 import * as actions from 'ee/vue_shared/components/sidebar/epics_select/store/actions';
 import * as types from 'ee/vue_shared/components/sidebar/epics_select/store/mutation_types';
 import createDefaultState from 'ee/vue_shared/components/sidebar/epics_select/store/state';
 import { noneEpic } from 'ee/vue_shared/constants';
 import testAction from 'helpers/vuex_action_helper';
 import boardsStore from '~/boards/stores/boards_store';
+import createFlash from '~/flash';
 
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 
 import { mockEpic1, mockIssue, mockEpics, mockAssignRemoveRes } from '../../mock_data';
 
+jest.mock('~/flash');
+
 describe('EpicsSelect', () => {
   describe('store', () => {
     describe('actions', () => {
@@ -123,18 +125,14 @@ describe('EpicsSelect', () => {
       });
 
       describe('receiveEpicsFailure', () => {
-        beforeEach(() => {
-          setFixtures('<div class="flash-container"></div>');
-        });
-
         it('should show flash error message', () => {
           actions.receiveEpicsFailure({
             commit: () => {},
           });
 
-          expect(document.querySelector('.flash-container .flash-text').innerText.trim()).toBe(
-            'Something went wrong while fetching group epics.',
-          );
+          expect(createFlash).toHaveBeenCalledWith({
+            message: 'Something went wrong while fetching group epics.',
+          });
         });
 
         it('should set `state.epicsFetchInProgress` to false', (done) => {
@@ -331,10 +329,6 @@ describe('EpicsSelect', () => {
       });
 
       describe('receiveIssueUpdateFailure', () => {
-        beforeEach(() => {
-          setFixtures('<div class="flash-container"></div>');
-        });
-
         it('should show flash error message', () => {
           const message = 'Something went wrong.';
           actions.receiveIssueUpdateFailure(
@@ -344,9 +338,7 @@ describe('EpicsSelect', () => {
             message,
           );
 
-          expect(document.querySelector('.flash-container .flash-text').innerText.trim()).toBe(
-            message,
-          );
+          expect(createFlash).toHaveBeenCalledWith({ message });
         });
 
         it('should set `state.epicSelectInProgress` to false', (done) => {

spec/frontend/logs/stores/actions_spec.js

 import MockAdapter from 'axios-mock-adapter';
 import testAction from 'helpers/vuex_action_helper';
-import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { convertToFixedRange } from '~/lib/utils/datetime_range';
 import { TOKEN_TYPE_POD_NAME } from '~/logs/constants';
@@ -32,7 +31,6 @@ import {
   mockNextCursor,
 } from '../mock_data';
 
-jest.mock('~/flash');
 jest.mock('~/lib/utils/datetime_range');
 jest.mock('~/logs/utils');
 
@@ -75,10 +73,6 @@ describe('Logs Store actions', () => {
     state = logsPageState();
   });
 
-  afterEach(() => {
-    createFlash.mockClear();
-  });
-
   describe('setInitData', () => {
     it('should commit environment and pod name mutation', () =>
       testAction(

spec/frontend/profile/preferences/components/profile_preferences_spec.js

@@ -2,6 +2,7 @@ import { GlButton } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import { nextTick } from 'vue';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+import createFlash from '~/flash';
 import IntegrationView from '~/profile/preferences/components/integration_view.vue';
 import ProfilePreferences from '~/profile/preferences/components/profile_preferences.vue';
 import { i18n } from '~/profile/preferences/constants';
@@ -15,6 +16,7 @@ import {
   lightModeThemeId2,
 } from '../mock_data';
 
+jest.mock('~/flash');
 const expectedUrl = '/foo';
 
 describe('ProfilePreferences component', () => {
@@ -54,10 +56,6 @@ describe('ProfilePreferences component', () => {
     return wrapper.findComponent(GlButton);
   }
 
-  function findFlashError() {
-    return document.querySelector('.flash-container .flash-text');
-  }
-
   function createThemeInput(themeId = lightModeThemeId1) {
     const input = document.createElement('input');
     input.setAttribute('name', 'user[theme_id]');
@@ -82,10 +80,6 @@ describe('ProfilePreferences component', () => {
     document.body.classList.add('content-wrapper');
   }
 
-  beforeEach(() => {
-    setFixtures('<div class="flash-container"></div>');
-  });
-
   afterEach(() => {
     wrapper.destroy();
     wrapper = null;
@@ -152,7 +146,7 @@ describe('ProfilePreferences component', () => {
       const successEvent = new CustomEvent('ajax:success');
       form.dispatchEvent(successEvent);
 
-      expect(findFlashError().innerText.trim()).toEqual(i18n.defaultSuccess);
+      expect(createFlash).toHaveBeenCalledWith({ message: i18n.defaultSuccess, type: 'notice' });
     });
 
     it('displays the custom success message', () => {
@@ -160,14 +154,14 @@ describe('ProfilePreferences component', () => {
       const successEvent = new CustomEvent('ajax:success', { detail: [{ message }] });
       form.dispatchEvent(successEvent);
 
-      expect(findFlashError().innerText.trim()).toEqual(message);
+      expect(createFlash).toHaveBeenCalledWith({ message, type: 'notice' });
     });
 
     it('displays the default error message', () => {
       const errorEvent = new CustomEvent('ajax:error');
       form.dispatchEvent(errorEvent);
 
-      expect(findFlashError().innerText.trim()).toEqual(i18n.defaultError);
+      expect(createFlash).toHaveBeenCalledWith({ message: i18n.defaultError, type: 'alert' });
     });
 
     it('displays the custom error message', () => {
@@ -175,7 +169,7 @@ describe('ProfilePreferences component', () => {
       const errorEvent = new CustomEvent('ajax:error', { detail: [{ message }] });
       form.dispatchEvent(errorEvent);
 
-      expect(findFlashError().innerText.trim()).toEqual(message);
+      expect(createFlash).toHaveBeenCalledWith({ message, type: 'alert' });
     });
   });
 

spec/frontend/vue_shared/components/sidebar/labels_select_vue/store/actions_spec.js

 import MockAdapter from 'axios-mock-adapter';
 
 import testAction from 'helpers/vuex_action_helper';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import * as actions from '~/vue_shared/components/sidebar/labels_select_vue/store/actions';
 import * as types from '~/vue_shared/components/sidebar/labels_select_vue/store/mutation_types';
 import defaultState from '~/vue_shared/components/sidebar/labels_select_vue/store/state';
 
+jest.mock('~/flash');
+
 describe('LabelsSelect Actions', () => {
   let state;
   const mockInitialState = {
@@ -91,10 +94,6 @@ describe('LabelsSelect Actions', () => {
   });
 
   describe('receiveLabelsFailure', () => {
-    beforeEach(() => {
-      setFixtures('<div class="flash-container"></div>');
-    });
-
     it('sets value `state.labelsFetchInProgress` to `false`', (done) => {
       testAction(
         actions.receiveLabelsFailure,
@@ -109,9 +108,7 @@ describe('LabelsSelect Actions', () => {
     it('shows flash error', () => {
       actions.receiveLabelsFailure({ commit: () => {} });
 
-      expect(document.querySelector('.flash-container .flash-text').innerText.trim()).toBe(
-        'Error fetching labels.',
-      );
+      expect(createFlash).toHaveBeenCalledWith({ message: 'Error fetching labels.' });
     });
   });
 
@@ -186,10 +183,6 @@ describe('LabelsSelect Actions', () => {
   });
 
   describe('receiveCreateLabelFailure', () => {
-    beforeEach(() => {
-      setFixtures('<div class="flash-container"></div>');
-    });
-
     it('sets value `state.labelCreateInProgress` to `false`', (done) => {
       testAction(
         actions.receiveCreateLabelFailure,
@@ -204,9 +197,7 @@ describe('LabelsSelect Actions', () => {
     it('shows flash error', () => {
       actions.receiveCreateLabelFailure({ commit: () => {} });
 
-      expect(document.querySelector('.flash-container .flash-text').innerText.trim()).toBe(
-        'Error creating label.',
-      );
+      expect(createFlash).toHaveBeenCalledWith({ message: 'Error creating label.' });
     });
   });
 

spec/frontend/vue_shared/components/sidebar/labels_select_widget/store/actions_spec.js

 import MockAdapter from 'axios-mock-adapter';
 
 import testAction from 'helpers/vuex_action_helper';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import * as actions from '~/vue_shared/components/sidebar/labels_select_widget/store/actions';
 import * as types from '~/vue_shared/components/sidebar/labels_select_widget/store/mutation_types';
 import defaultState from '~/vue_shared/components/sidebar/labels_select_widget/store/state';
 
+jest.mock('~/flash');
+
 describe('LabelsSelect Actions', () => {
   let state;
   const mockInitialState = {
@@ -91,10 +94,6 @@ describe('LabelsSelect Actions', () => {
   });
 
   describe('receiveLabelsFailure', () => {
-    beforeEach(() => {
-      setFixtures('<div class="flash-container"></div>');
-    });
-
     it('sets value `state.labelsFetchInProgress` to `false`', (done) => {
       testAction(
         actions.receiveLabelsFailure,
@@ -109,9 +108,7 @@ describe('LabelsSelect Actions', () => {
     it('shows flash error', () => {
       actions.receiveLabelsFailure({ commit: () => {} });
 
-      expect(document.querySelector('.flash-container .flash-text').innerText.trim()).toBe(
-        'Error fetching labels.',
-      );
+      expect(createFlash).toHaveBeenCalledWith({ message: 'Error fetching labels.' });
     });
   });