1 files changed, 52 insertions, 17 deletions

diff --git a/spec/frontend/runner/components/runner_list_spec.js b/spec/frontend/runner/components/runner_list_spec.js
index d88d7b3fbee..5fff3581e39 100644
--- a/spec/frontend/runner/components/runner_list_spec.js
+++ b/spec/frontend/runner/components/runner_list_spec.js
@@ -1,5 +1,6 @@
 import { GlLink, GlTable, GlSkeletonLoader } from '@gitlab/ui';
 import { mount, shallowMount } from '@vue/test-utils';
+import { cloneDeep } from 'lodash';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import RunnerList from '~/runner/components/runner_list.vue';
@@ -11,7 +12,6 @@ const mockActiveRunnersCount = mockRunners.length;
 describe('RunnerList', () => {
   let wrapper;
 
-  const findActiveRunnersMessage = () => wrapper.findByTestId('active-runners-message');
   const findSkeletonLoader = () => wrapper.findComponent(GlSkeletonLoader);
   const findTable = () => wrapper.findComponent(GlTable);
   const findHeaders = () => wrapper.findAll('th');
@@ -39,18 +39,6 @@ describe('RunnerList', () => {
     wrapper.destroy();
   });
 
-  it('Displays active runner count', () => {
-    expect(findActiveRunnersMessage().text()).toBe(
-      `Runners currently online: ${mockActiveRunnersCount}`,
-    );
-  });
-
-  it('Displays a large active runner count', () => {
-    createComponent({ props: { activeRunnersCount: 2000 } });
-
-    expect(findActiveRunnersMessage().text()).toBe('Runners currently online: 2,000');
-  });
-
   it('Displays headers', () => {
     const headerLabels = findHeaders().wrappers.map((w) => w.text());
 
@@ -85,12 +73,11 @@ describe('RunnerList', () => {
     );
     expect(findCell({ fieldKey: 'name' }).text()).toContain(description);
 
-    // Other fields: some cells are empty in the first iteration
-    // See https://gitlab.com/gitlab-org/gitlab/-/issues/329658#pending-features
+    // Other fields
     expect(findCell({ fieldKey: 'version' }).text()).toBe(version);
     expect(findCell({ fieldKey: 'ipAddress' }).text()).toBe(ipAddress);
-    expect(findCell({ fieldKey: 'projectCount' }).text()).toBe('');
-    expect(findCell({ fieldKey: 'jobCount' }).text()).toBe('');
+    expect(findCell({ fieldKey: 'projectCount' }).text()).toBe('1');
+    expect(findCell({ fieldKey: 'jobCount' }).text()).toBe('0');
     expect(findCell({ fieldKey: 'tagList' }).text()).toBe('');
     expect(findCell({ fieldKey: 'contactedAt' }).text()).toEqual(expect.any(String));
 
@@ -101,6 +88,54 @@ describe('RunnerList', () => {
     expect(actions.findByTestId('toggle-active-runner').exists()).toBe(true);
   });
 
+  describe('Table data formatting', () => {
+    let mockRunnersCopy;
+
+    beforeEach(() => {
+      mockRunnersCopy = cloneDeep(mockRunners);
+    });
+
+    it('Formats null project counts', () => {
+      mockRunnersCopy[0].projectCount = null;
+
+      createComponent({ props: { runners: mockRunnersCopy } }, mount);
+
+      expect(findCell({ fieldKey: 'projectCount' }).text()).toBe('n/a');
+    });
+
+    it('Formats 0 project counts', () => {
+      mockRunnersCopy[0].projectCount = 0;
+
+      createComponent({ props: { runners: mockRunnersCopy } }, mount);
+
+      expect(findCell({ fieldKey: 'projectCount' }).text()).toBe('0');
+    });
+
+    it('Formats big project counts', () => {
+      mockRunnersCopy[0].projectCount = 1000;
+
+      createComponent({ props: { runners: mockRunnersCopy } }, mount);
+
+      expect(findCell({ fieldKey: 'projectCount' }).text()).toBe('1,000');
+    });
+
+    it('Formats job counts', () => {
+      mockRunnersCopy[0].jobCount = 1000;
+
+      createComponent({ props: { runners: mockRunnersCopy } }, mount);
+
+      expect(findCell({ fieldKey: 'jobCount' }).text()).toBe('1,000');
+    });
+
+    it('Formats big job counts with a plus symbol', () => {
+      mockRunnersCopy[0].jobCount = 1001;
+
+      createComponent({ props: { runners: mockRunnersCopy } }, mount);
+
+      expect(findCell({ fieldKey: 'jobCount' }).text()).toBe('1,000+');
+    });
+  });
+
   it('Links to the runner page', () => {
     const { id } = mockRunners[0];