1 files changed, 24 insertions, 2 deletions

diff --git a/spec/frontend/runner/admin_runners/admin_runners_app_spec.js b/spec/frontend/runner/admin_runners/admin_runners_app_spec.js
index 405813be4e3..3d25ad075de 100644
--- a/spec/frontend/runner/admin_runners/admin_runners_app_spec.js
+++ b/spec/frontend/runner/admin_runners/admin_runners_app_spec.js
@@ -18,6 +18,7 @@ import AdminRunnersApp from '~/runner/admin_runners/admin_runners_app.vue';
 import RunnerTypeTabs from '~/runner/components/runner_type_tabs.vue';
 import RunnerFilteredSearchBar from '~/runner/components/runner_filtered_search_bar.vue';
 import RunnerList from '~/runner/components/runner_list.vue';
+import RunnerListEmptyState from '~/runner/components/runner_list_empty_state.vue';
 import RunnerStats from '~/runner/components/stat/runner_stats.vue';
 import RunnerActionsCell from '~/runner/components/cells/runner_actions_cell.vue';
 import RegistrationDropdown from '~/runner/components/registration/registration_dropdown.vue';
@@ -50,6 +51,8 @@ import {
   runnersDataPaginated,
   onlineContactTimeoutSecs,
   staleTimeoutSecs,
+  emptyStateSvgPath,
+  emptyStateFilteredSvgPath,
 } from '../mock_data';
 
 const mockRegistrationToken = 'MOCK_REGISTRATION_TOKEN';
@@ -78,6 +81,7 @@ describe('AdminRunnersApp', () => {
   const findRegistrationDropdown = () => wrapper.findComponent(RegistrationDropdown);
   const findRunnerTypeTabs = () => wrapper.findComponent(RunnerTypeTabs);
   const findRunnerList = () => wrapper.findComponent(RunnerList);
+  const findRunnerListEmptyState = () => wrapper.findComponent(RunnerListEmptyState);
   const findRunnerPagination = () => extendedWrapper(wrapper.findComponent(RunnerPagination));
   const findRunnerPaginationNext = () => findRunnerPagination().findByLabelText('Go to next page');
   const findRunnerFilteredSearchBar = () => wrapper.findComponent(RunnerFilteredSearchBar);
@@ -106,6 +110,8 @@ describe('AdminRunnersApp', () => {
         localMutations,
         onlineContactTimeoutSecs,
         staleTimeoutSecs,
+        emptyStateSvgPath,
+        emptyStateFilteredSvgPath,
         ...provide,
       },
       ...options,
@@ -457,12 +463,28 @@ describe('AdminRunnersApp', () => {
           runners: { nodes: [] },
         },
       });
+
       createComponent();
       await waitForPromises();
     });
 
-    it('shows a message for no results', async () => {
-      expect(wrapper.text()).toContain('No runners found');
+    it('shows an empty state', () => {
+      expect(findRunnerListEmptyState().props('isSearchFiltered')).toBe(false);
+    });
+
+    describe('when a filter is selected by the user', () => {
+      beforeEach(async () => {
+        findRunnerFilteredSearchBar().vm.$emit('input', {
+          runnerType: null,
+          filters: [{ type: PARAM_KEY_STATUS, value: { data: STATUS_ONLINE, operator: '=' } }],
+          sort: CREATED_ASC,
+        });
+        await waitForPromises();
+      });
+
+      it('shows an empty state for a filtered search', () => {
+        expect(findRunnerListEmptyState().props('isSearchFiltered')).toBe(true);
+      });
     });
   });