1 files changed, 109 insertions, 0 deletions
diff --git a/spec/frontend/runner/components/runner_type_tabs_spec.js b/spec/frontend/runner/components/runner_type_tabs_spec.js
new file mode 100644
index 00000000000..4871d9c470a
--- /dev/null
+++ b/spec/frontend/runner/components/runner_type_tabs_spec.js
@@ -0,0 +1,109 @@
+import { GlTab } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import RunnerTypeTabs from '~/runner/components/runner_type_tabs.vue';
+import { INSTANCE_TYPE, GROUP_TYPE } from '~/runner/constants';
+
+const mockSearch = { runnerType: null, filters: [], pagination: { page: 1 }, sort: 'CREATED_DESC' };
+
+describe('RunnerTypeTabs', () => {
+  let wrapper;
+
+  const findTabs = () => wrapper.findAll(GlTab);
+  const findActiveTab = () =>
+    findTabs()
+      .filter((tab) => tab.attributes('active') === 'true')
+      .at(0);
+
+  const createComponent = ({ props, ...options } = {}) => {
+    wrapper = shallowMount(RunnerTypeTabs, {
+      propsData: {
+        value: mockSearch,
+        ...props,
+      },
+      stubs: {
+        GlTab,
+      },
+      ...options,
+    });
+  };
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('Renders options to filter runners', () => {
+    expect(findTabs().wrappers.map((tab) => tab.text())).toEqual([
+      'All',
+      'Instance',
+      'Group',
+      'Project',
+    ]);
+  });
+
+  it('"All" is selected by default', () => {
+    expect(findActiveTab().text()).toBe('All');
+  });
+
+  it('Another tab can be preselected by the user', () => {
+    createComponent({
+      props: {
+        value: {
+          ...mockSearch,
+          runnerType: INSTANCE_TYPE,
+        },
+      },
+    });
+
+    expect(findActiveTab().text()).toBe('Instance');
+  });
+
+  describe('When the user selects a tab', () => {
+    const emittedValue = () => wrapper.emitted('input')[0][0];
+
+    beforeEach(() => {
+      findTabs().at(2).vm.$emit('click');
+    });
+
+    it(`Runner type is emitted`, () => {
+      expect(emittedValue()).toEqual({
+        ...mockSearch,
+        runnerType: GROUP_TYPE,
+      });
+    });
+
+    it('Runner type is selected', async () => {
+      const newValue = emittedValue();
+      await wrapper.setProps({ value: newValue });
+
+      expect(findActiveTab().text()).toBe('Group');
+    });
+  });
+
+  describe('When using a custom slot', () => {
+    const mockContent = 'content';
+
+    beforeEach(() => {
+      createComponent({
+        scopedSlots: {
+          title: `
+          <span>
+            {{props.tab.title}} ${mockContent}
+          </span>`,
+        },
+      });
+    });
+
+    it('Renders tabs with additional information', () => {
+      expect(findTabs().wrappers.map((tab) => tab.text())).toEqual([
+        `All ${mockContent}`,
+        `Instance ${mockContent}`,
+        `Group ${mockContent}`,
+        `Project ${mockContent}`,
+      ]);
+    });
+  });
+});