1 files changed, 49 insertions, 0 deletions
diff --git a/spec/frontend/ci/runner/components/cells/runner_summary_field_spec.js b/spec/frontend/ci/runner/components/cells/runner_summary_field_spec.js
new file mode 100644
index 00000000000..f536e0dcbcf
--- /dev/null
+++ b/spec/frontend/ci/runner/components/cells/runner_summary_field_spec.js
@@ -0,0 +1,49 @@
+import { GlIcon } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import RunnerSummaryField from '~/ci/runner/components/cells/runner_summary_field.vue';
+import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
+
+describe('RunnerSummaryField', () => {
+  let wrapper;
+
+  const findIcon = () => wrapper.findComponent(GlIcon);
+  const getTooltipValue = () => getBinding(wrapper.element, 'gl-tooltip').value;
+
+  const createComponent = ({ props, ...options } = {}) => {
+    wrapper = shallowMount(RunnerSummaryField, {
+      propsData: {
+        icon: '',
+        tooltip: '',
+        ...props,
+      },
+      directives: {
+        GlTooltip: createMockDirective(),
+      },
+      ...options,
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('shows content in slot', () => {
+    createComponent({
+      slots: { default: 'content' },
+    });
+
+    expect(wrapper.text()).toBe('content');
+  });
+
+  it('shows icon', () => {
+    createComponent({ props: { icon: 'git' } });
+
+    expect(findIcon().props('name')).toBe('git');
+  });
+
+  it('shows tooltip', () => {
+    createComponent({ props: { tooltip: 'tooltip' } });
+
+    expect(getTooltipValue()).toBe('tooltip');
+  });
+});