1 files changed, 67 insertions, 0 deletions
diff --git a/spec/frontend/runner/components/stat/runner_status_stat_spec.js b/spec/frontend/runner/components/stat/runner_status_stat_spec.js
new file mode 100644
index 00000000000..3218272eac7
--- /dev/null
+++ b/spec/frontend/runner/components/stat/runner_status_stat_spec.js
@@ -0,0 +1,67 @@
+import { GlSingleStat } from '@gitlab/ui/dist/charts';
+import { shallowMount, mount } from '@vue/test-utils';
+import RunnerStatusStat from '~/runner/components/stat/runner_status_stat.vue';
+import { STATUS_ONLINE, STATUS_OFFLINE, STATUS_STALE } from '~/runner/constants';
+
+describe('RunnerStatusStat', () => {
+  let wrapper;
+
+  const findSingleStat = () => wrapper.findComponent(GlSingleStat);
+
+  const createComponent = ({ props = {} } = {}, mountFn = shallowMount) => {
+    wrapper = mountFn(RunnerStatusStat, {
+      propsData: {
+        status: STATUS_ONLINE,
+        value: 99,
+        ...props,
+      },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe.each`
+    status            | variant      | title                | badge
+    ${STATUS_ONLINE}  | ${'success'} | ${'Online runners'}  | ${'online'}
+    ${STATUS_OFFLINE} | ${'muted'}   | ${'Offline runners'} | ${'offline'}
+    ${STATUS_STALE}   | ${'warning'} | ${'Stale runners'}   | ${'stale'}
+  `('Renders a stat for status "$status"', ({ status, variant, title, badge }) => {
+    beforeEach(() => {
+      createComponent({ props: { status } }, mount);
+    });
+
+    it('Renders text', () => {
+      expect(wrapper.text()).toMatch(new RegExp(`${title} 99\\s+${badge}`));
+    });
+
+    it(`Uses variant ${variant}`, () => {
+      expect(findSingleStat().props('variant')).toBe(variant);
+    });
+  });
+
+  it('Formats stat number', () => {
+    createComponent({ props: { value: 1000 } }, mount);
+
+    expect(wrapper.text()).toMatch('Online runners 1,000');
+  });
+
+  it('Shows a null result', () => {
+    createComponent({ props: { value: null } }, mount);
+
+    expect(wrapper.text()).toMatch('Online runners -');
+  });
+
+  it('Shows an undefined result', () => {
+    createComponent({ props: { value: undefined } }, mount);
+
+    expect(wrapper.text()).toMatch('Online runners -');
+  });
+
+  it('Shows result for an unknown status', () => {
+    createComponent({ props: { status: 'UNKNOWN' } }, mount);
+
+    expect(wrapper.text()).toMatch('Runners 99');
+  });
+});