1 files changed, 61 insertions, 0 deletions
diff --git a/spec/frontend/ci/runner/components/stat/runner_single_stat_spec.js b/spec/frontend/ci/runner/components/stat/runner_single_stat_spec.js
new file mode 100644
index 00000000000..cad61f26012
--- /dev/null
+++ b/spec/frontend/ci/runner/components/stat/runner_single_stat_spec.js
@@ -0,0 +1,61 @@
+import { GlSingleStat } from '@gitlab/ui/dist/charts';
+import { shallowMount } from '@vue/test-utils';
+import RunnerSingleStat from '~/ci/runner/components/stat/runner_single_stat.vue';
+import RunnerCount from '~/ci/runner/components/stat/runner_count.vue';
+import { INSTANCE_TYPE, GROUP_TYPE } from '~/ci/runner/constants';
+
+describe('RunnerStats', () => {
+  let wrapper;
+
+  const findRunnerCount = () => wrapper.findComponent(RunnerCount);
+  const findGlSingleStat = () => wrapper.findComponent(GlSingleStat);
+
+  const createComponent = ({ props = {}, count, mountFn = shallowMount, ...options } = {}) => {
+    wrapper = mountFn(RunnerSingleStat, {
+      propsData: {
+        scope: INSTANCE_TYPE,
+        title: 'My title',
+        variables: {},
+        ...props,
+      },
+      stubs: {
+        RunnerCount: {
+          props: ['scope', 'variables', 'skip'],
+          render() {
+            return this.$scopedSlots.default({
+              count,
+            });
+          },
+        },
+      },
+      ...options,
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it.each`
+    case              | count   | value
+    ${'number'}       | ${99}   | ${'99'}
+    ${'long number'}  | ${1000} | ${'1,000'}
+    ${'empty number'} | ${null} | ${'-'}
+  `('formats $case', ({ count, value }) => {
+    createComponent({ count });
+
+    expect(findGlSingleStat().props('value')).toBe(value);
+  });
+
+  it('Passes runner count props', () => {
+    const props = {
+      scope: GROUP_TYPE,
+      variables: { paused: true },
+      skip: true,
+    };
+
+    createComponent({ props });
+
+    expect(findRunnerCount().props()).toEqual(props);
+  });
+});