1 files changed, 24 insertions, 26 deletions

diff --git a/spec/frontend/runner/group_runners/group_runners_app_spec.js b/spec/frontend/runner/group_runners/group_runners_app_spec.js
index 4451100de19..034b7848f35 100644
--- a/spec/frontend/runner/group_runners/group_runners_app_spec.js
+++ b/spec/frontend/runner/group_runners/group_runners_app_spec.js
@@ -6,12 +6,13 @@ import createMockApollo from 'helpers/mock_apollo_helper';
 import setWindowLocation from 'helpers/set_window_location_helper';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { updateHistory } from '~/lib/utils/url_utility';
 
 import RunnerFilteredSearchBar from '~/runner/components/runner_filtered_search_bar.vue';
 import RunnerList from '~/runner/components/runner_list.vue';
+import RunnerStats from '~/runner/components/stat/runner_stats.vue';
 import RegistrationDropdown from '~/runner/components/registration/registration_dropdown.vue';
 import RunnerPagination from '~/runner/components/runner_pagination.vue';
 
@@ -26,10 +27,11 @@ import {
   RUNNER_PAGE_SIZE,
 } from '~/runner/constants';
 import getGroupRunnersQuery from '~/runner/graphql/get_group_runners.query.graphql';
+import getGroupRunnersCountQuery from '~/runner/graphql/get_group_runners_count.query.graphql';
 import GroupRunnersApp from '~/runner/group_runners/group_runners_app.vue';
 import { captureException } from '~/runner/sentry_utils';
 import FilteredSearch from '~/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue';
-import { groupRunnersData, groupRunnersDataPaginated } from '../mock_data';
+import { groupRunnersData, groupRunnersDataPaginated, groupRunnersCountData } from '../mock_data';
 
 const localVue = createLocalVue();
 localVue.use(VueApollo);
@@ -48,7 +50,9 @@ jest.mock('~/lib/utils/url_utility', () => ({
 describe('GroupRunnersApp', () => {
   let wrapper;
   let mockGroupRunnersQuery;
+  let mockGroupRunnersCountQuery;
 
+  const findRunnerStats = () => wrapper.findComponent(RunnerStats);
   const findRegistrationDropdown = () => wrapper.findComponent(RegistrationDropdown);
   const findRunnerList = () => wrapper.findComponent(RunnerList);
   const findRunnerPagination = () => extendedWrapper(wrapper.findComponent(RunnerPagination));
@@ -59,7 +63,10 @@ describe('GroupRunnersApp', () => {
   const findFilteredSearch = () => wrapper.findComponent(FilteredSearch);
 
   const createComponent = ({ props = {}, mountFn = shallowMount } = {}) => {
-    const handlers = [[getGroupRunnersQuery, mockGroupRunnersQuery]];
+    const handlers = [
+      [getGroupRunnersQuery, mockGroupRunnersQuery],
+      [getGroupRunnersCountQuery, mockGroupRunnersCountQuery],
+    ];
 
     wrapper = mountFn(GroupRunnersApp, {
       localVue,
@@ -77,11 +84,24 @@ describe('GroupRunnersApp', () => {
     setWindowLocation(`/groups/${mockGroupFullPath}/-/runners`);
 
     mockGroupRunnersQuery = jest.fn().mockResolvedValue(groupRunnersData);
+    mockGroupRunnersCountQuery = jest.fn().mockResolvedValue(groupRunnersCountData);
 
     createComponent();
     await waitForPromises();
   });
 
+  it('shows total runner counts', async () => {
+    createComponent({ mountFn: mount });
+
+    await waitForPromises();
+
+    const stats = findRunnerStats().text();
+
+    expect(stats).toMatch('Online runners 2');
+    expect(stats).toMatch('Offline runners 2');
+    expect(stats).toMatch('Stale runners 2');
+  });
+
   it('shows the runner setup instructions', () => {
     expect(findRegistrationDropdown().props('registrationToken')).toBe(mockRegistrationToken);
     expect(findRegistrationDropdown().props('type')).toBe(GROUP_TYPE);
@@ -129,28 +149,6 @@ describe('GroupRunnersApp', () => {
     );
   });
 
-  describe('shows the active runner count', () => {
-    const expectedOnlineCount = (count) => new RegExp(`Online Runners ${count}`);
-
-    it('with a regular value', () => {
-      createComponent({ mountFn: mount });
-
-      expect(wrapper.text()).toMatch(expectedOnlineCount(mockGroupRunnersLimitedCount));
-    });
-
-    it('at the limit', () => {
-      createComponent({ props: { groupRunnersLimitedCount: 1000 }, mountFn: mount });
-
-      expect(wrapper.text()).toMatch(expectedOnlineCount('1,000'));
-    });
-
-    it('over the limit', () => {
-      createComponent({ props: { groupRunnersLimitedCount: 1001 }, mountFn: mount });
-
-      expect(wrapper.text()).toMatch(expectedOnlineCount('1,000\\+'));
-    });
-  });
-
   describe('when a filter is preselected', () => {
     beforeEach(async () => {
       setWindowLocation(`?status[]=${STATUS_ACTIVE}&runner_type[]=${INSTANCE_TYPE}`);
@@ -236,7 +234,7 @@ describe('GroupRunnersApp', () => {
     });
 
     it('error is shown to the user', async () => {
-      expect(createFlash).toHaveBeenCalledTimes(1);
+      expect(createAlert).toHaveBeenCalledTimes(1);
     });
 
     it('error is reported to sentry', async () => {