2 files changed, 106 insertions, 0 deletions
diff --git a/spec/frontend/jobs/components/filtered_search/jobs_filtered_search_spec.js b/spec/frontend/jobs/components/filtered_search/jobs_filtered_search_spec.js
new file mode 100644
index 00000000000..322cfa3ba1f
--- /dev/null
+++ b/spec/frontend/jobs/components/filtered_search/jobs_filtered_search_spec.js
@@ -0,0 +1,49 @@
+import { GlFilteredSearch } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import { OPERATOR_IS_ONLY } from '~/vue_shared/components/filtered_search_bar/constants';
+import JobsFilteredSearch from '~/jobs/components/filtered_search/jobs_filtered_search.vue';
+import { mockFailedSearchToken } from '../../mock_data';
+
+describe('Jobs filtered search', () => {
+  let wrapper;
+
+  const findFilteredSearch = () => wrapper.findComponent(GlFilteredSearch);
+  const getSearchToken = (type) =>
+    findFilteredSearch()
+      .props('availableTokens')
+      .find((token) => token.type === type);
+
+  const findStatusToken = () => getSearchToken('status');
+
+  const createComponent = () => {
+    wrapper = shallowMount(JobsFilteredSearch);
+  };
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('displays filtered search', () => {
+    expect(findFilteredSearch().exists()).toBe(true);
+  });
+
+  it('displays status token', () => {
+    expect(findStatusToken()).toMatchObject({
+      type: 'status',
+      icon: 'status',
+      title: 'Status',
+      unique: true,
+      operators: OPERATOR_IS_ONLY,
+    });
+  });
+
+  it('emits filter token to parent component', () => {
+    findFilteredSearch().vm.$emit('submit', mockFailedSearchToken);
+
+    expect(wrapper.emitted('filterJobsBySearch')).toEqual([[mockFailedSearchToken]]);
+  });
+});
diff --git a/spec/frontend/jobs/components/filtered_search/tokens/job_status_token_spec.js b/spec/frontend/jobs/components/filtered_search/tokens/job_status_token_spec.js
new file mode 100644
index 00000000000..ce8e482cc16
--- /dev/null
+++ b/spec/frontend/jobs/components/filtered_search/tokens/job_status_token_spec.js
@@ -0,0 +1,57 @@
+import { GlFilteredSearchToken, GlFilteredSearchSuggestion, GlIcon } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import { stubComponent } from 'helpers/stub_component';
+import JobStatusToken from '~/jobs/components/filtered_search/tokens/job_status_token.vue';
+
+describe('Job Status Token', () => {
+  let wrapper;
+
+  const findFilteredSearchToken = () => wrapper.findComponent(GlFilteredSearchToken);
+  const findAllFilteredSearchSuggestions = () =>
+    wrapper.findAllComponents(GlFilteredSearchSuggestion);
+  const findAllGlIcons = () => wrapper.findAllComponents(GlIcon);
+
+  const defaultProps = {
+    config: {
+      type: 'status',
+      icon: 'status',
+      title: 'Status',
+      unique: true,
+    },
+    value: {
+      data: '',
+    },
+  };
+
+  const createComponent = () => {
+    wrapper = shallowMount(JobStatusToken, {
+      propsData: {
+        ...defaultProps,
+      },
+      stubs: {
+        GlFilteredSearchToken: stubComponent(GlFilteredSearchToken, {
+          template: `<div><slot name="suggestions"></slot></div>`,
+        }),
+      },
+    });
+  };
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('passes config correctly', () => {
+    expect(findFilteredSearchToken().props('config')).toEqual(defaultProps.config);
+  });
+
+  it('renders all job statuses available', () => {
+    const expectedLength = 11;
+
+    expect(findAllFilteredSearchSuggestions()).toHaveLength(expectedLength);
+    expect(findAllGlIcons()).toHaveLength(expectedLength);
+  });
+});