1 files changed, 102 insertions, 3 deletions

diff --git a/spec/frontend/jobs/components/table/job_table_app_spec.js b/spec/frontend/jobs/components/table/job_table_app_spec.js
index 4d51624dfff..986fba21fb9 100644
--- a/spec/frontend/jobs/components/table/job_table_app_spec.js
+++ b/spec/frontend/jobs/components/table/job_table_app_spec.js
@@ -1,30 +1,48 @@
-import { GlSkeletonLoader, GlAlert, GlEmptyState, GlIntersectionObserver } from '@gitlab/ui';
+import {
+  GlSkeletonLoader,
+  GlAlert,
+  GlEmptyState,
+  GlIntersectionObserver,
+  GlLoadingIcon,
+} from '@gitlab/ui';
 import { mount, shallowMount } from '@vue/test-utils';
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
+import { s__ } from '~/locale';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
+import createFlash from '~/flash';
 import getJobsQuery from '~/jobs/components/table/graphql/queries/get_jobs.query.graphql';
 import JobsTable from '~/jobs/components/table/jobs_table.vue';
 import JobsTableApp from '~/jobs/components/table/jobs_table_app.vue';
 import JobsTableTabs from '~/jobs/components/table/jobs_table_tabs.vue';
-import { mockJobsQueryResponse, mockJobsQueryEmptyResponse } from '../../mock_data';
+import JobsFilteredSearch from '~/jobs/components/filtered_search/jobs_filtered_search.vue';
+import {
+  mockJobsQueryResponse,
+  mockJobsQueryEmptyResponse,
+  mockFailedSearchToken,
+} from '../../mock_data';
 
 const projectPath = 'gitlab-org/gitlab';
 Vue.use(VueApollo);
 
+jest.mock('~/flash');
+
 describe('Job table app', () => {
   let wrapper;
+  let jobsTableVueSearch = true;
 
   const successHandler = jest.fn().mockResolvedValue(mockJobsQueryResponse);
   const failedHandler = jest.fn().mockRejectedValue(new Error('GraphQL error'));
   const emptyHandler = jest.fn().mockResolvedValue(mockJobsQueryEmptyResponse);
 
   const findSkeletonLoader = () => wrapper.findComponent(GlSkeletonLoader);
+  const findLoadingSpinner = () => wrapper.findComponent(GlLoadingIcon);
   const findTable = () => wrapper.findComponent(JobsTable);
   const findTabs = () => wrapper.findComponent(JobsTableTabs);
   const findAlert = () => wrapper.findComponent(GlAlert);
   const findEmptyState = () => wrapper.findComponent(GlEmptyState);
+  const findFilteredSearch = () => wrapper.findComponent(JobsFilteredSearch);
 
   const triggerInfiniteScroll = () =>
     wrapper.findComponent(GlIntersectionObserver).vm.$emit('appear');
@@ -48,6 +66,7 @@ describe('Job table app', () => {
       },
       provide: {
         fullPath: projectPath,
+        glFeatures: { jobsTableVueSearch },
       },
       apolloProvider: createMockApolloProvider(handler),
     });
@@ -58,11 +77,21 @@ describe('Job table app', () => {
   });
 
   describe('loading state', () => {
-    it('should display skeleton loader when loading', () => {
+    beforeEach(() => {
       createComponent();
+    });
 
+    it('should display skeleton loader when loading', () => {
       expect(findSkeletonLoader().exists()).toBe(true);
       expect(findTable().exists()).toBe(false);
+      expect(findLoadingSpinner().exists()).toBe(false);
+    });
+
+    it('when switching tabs only the skeleton loader should show', () => {
+      findTabs().vm.$emit('fetchJobsByStatus', null);
+
+      expect(findSkeletonLoader().exists()).toBe(true);
+      expect(findLoadingSpinner().exists()).toBe(false);
     });
   });
 
@@ -76,6 +105,7 @@ describe('Job table app', () => {
     it('should display the jobs table with data', () => {
       expect(findTable().exists()).toBe(true);
       expect(findSkeletonLoader().exists()).toBe(false);
+      expect(findLoadingSpinner().exists()).toBe(false);
     });
 
     it('should refetch jobs query on fetchJobsByStatus event', async () => {
@@ -98,8 +128,12 @@ describe('Job table app', () => {
       });
 
       it('handles infinite scrolling by calling fetch more', async () => {
+        expect(findLoadingSpinner().exists()).toBe(true);
+
         await waitForPromises();
 
+        expect(findLoadingSpinner().exists()).toBe(false);
+
         expect(successHandler).toHaveBeenCalledWith({
           after: 'eyJpZCI6IjIzMTcifQ',
           fullPath: 'gitlab-org/gitlab',
@@ -137,4 +171,69 @@ describe('Job table app', () => {
       expect(findTable().exists()).toBe(true);
     });
   });
+
+  describe('filtered search', () => {
+    it('should display filtered search', () => {
+      createComponent();
+
+      expect(findFilteredSearch().exists()).toBe(true);
+    });
+
+    // this test should be updated once BE supports tab and filtered search filtering
+    // https://gitlab.com/gitlab-org/gitlab/-/issues/356210
+    it.each`
+      scope                                | shouldDisplay
+      ${null}                              | ${true}
+      ${['FAILED', 'SUCCESS', 'CANCELED']} | ${false}
+    `(
+      'with tab scope $scope the filtered search displays $shouldDisplay',
+      async ({ scope, shouldDisplay }) => {
+        createComponent();
+
+        await waitForPromises();
+
+        await findTabs().vm.$emit('fetchJobsByStatus', scope);
+
+        expect(findFilteredSearch().exists()).toBe(shouldDisplay);
+      },
+    );
+
+    it('refetches jobs query when filtering', async () => {
+      createComponent();
+
+      jest.spyOn(wrapper.vm.$apollo.queries.jobs, 'refetch').mockImplementation(jest.fn());
+
+      expect(wrapper.vm.$apollo.queries.jobs.refetch).toHaveBeenCalledTimes(0);
+
+      await findFilteredSearch().vm.$emit('filterJobsBySearch', [mockFailedSearchToken]);
+
+      expect(wrapper.vm.$apollo.queries.jobs.refetch).toHaveBeenCalledTimes(1);
+    });
+
+    it('shows raw text warning when user inputs raw text', async () => {
+      const expectedWarning = {
+        message: s__(
+          'Jobs|Raw text search is not currently supported for the jobs filtered search feature. Please use the available search tokens.',
+        ),
+        type: 'warning',
+      };
+
+      createComponent();
+
+      jest.spyOn(wrapper.vm.$apollo.queries.jobs, 'refetch').mockImplementation(jest.fn());
+
+      await findFilteredSearch().vm.$emit('filterJobsBySearch', ['raw text']);
+
+      expect(createFlash).toHaveBeenCalledWith(expectedWarning);
+      expect(wrapper.vm.$apollo.queries.jobs.refetch).toHaveBeenCalledTimes(0);
+    });
+
+    it('should not display filtered search', () => {
+      jobsTableVueSearch = false;
+
+      createComponent();
+
+      expect(findFilteredSearch().exists()).toBe(false);
+    });
+  });
 });