Write job table app spec

Add test coverage for the
job table app component.

app/assets/javascripts/jobs/components/table/jobs_table_app.vue

@@ -29,7 +29,7 @@ export default {
         };
       },
       update({ project }) {
-        return project?.jobs;
+        return project?.jobs?.nodes || [];
       },
       error() {
         this.hasError = true;
@@ -80,6 +80,6 @@ export default {
       />
     </div>
 
-    <jobs-table v-else :jobs="jobs.nodes" />
+    <jobs-table v-else :jobs="jobs" />
   </div>
 </template>

spec/frontend/jobs/components/table/job_table_app_spec.js

+import { GlSkeletonLoader, GlAlert } from '@gitlab/ui';
+import { createLocalVue, shallowMount } from '@vue/test-utils';
+import VueApollo from 'vue-apollo';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import waitForPromises from 'helpers/wait_for_promises';
+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 } from '../../mock_data';
+
+const projectPath = 'gitlab-org/gitlab';
+const localVue = createLocalVue();
+localVue.use(VueApollo);
+
+describe('Job table app', () => {
+  let wrapper;
+
+  const successHandler = jest.fn().mockResolvedValue(mockJobsQueryResponse);
+  const failedHandler = jest.fn().mockRejectedValue(new Error('GraphQL error'));
+
+  const findSkeletonLoader = () => wrapper.findComponent(GlSkeletonLoader);
+  const findTable = () => wrapper.findComponent(JobsTable);
+  const findTabs = () => wrapper.findComponent(JobsTableTabs);
+  const findAlert = () => wrapper.findComponent(GlAlert);
+
+  const createMockApolloProvider = (handler) => {
+    const requestHandlers = [[getJobsQuery, handler]];
+
+    return createMockApollo(requestHandlers);
+  };
+
+  const createComponent = (handler = successHandler) => {
+    wrapper = shallowMount(JobsTableApp, {
+      provide: {
+        projectPath,
+      },
+      localVue,
+      apolloProvider: createMockApolloProvider(handler),
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('loading state', () => {
+    it('should display skeleton loader when loading', () => {
+      createComponent();
+
+      expect(findSkeletonLoader().exists()).toBe(true);
+      expect(findTable().exists()).toBe(false);
+    });
+  });
+
+  describe('loaded state', () => {
+    beforeEach(async () => {
+      createComponent();
+
+      await waitForPromises();
+    });
+
+    it('should display the jobs table with data', () => {
+      expect(findTable().exists()).toBe(true);
+      expect(findSkeletonLoader().exists()).toBe(false);
+    });
+
+    it('should retfech jobs query on fetchJobsByStatus event', async () => {
+      jest.spyOn(wrapper.vm.$apollo.queries.jobs, 'refetch').mockImplementation(jest.fn());
+
+      expect(wrapper.vm.$apollo.queries.jobs.refetch).toHaveBeenCalledTimes(0);
+
+      await findTabs().vm.$emit('fetchJobsByStatus');
+
+      expect(wrapper.vm.$apollo.queries.jobs.refetch).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('error state', () => {
+    it('should show an alert if there is an error fetching the data', async () => {
+      createComponent(failedHandler);
+
+      await waitForPromises();
+
+      expect(findAlert().exists()).toBe(true);
+    });
+  });
+});

spec/frontend/jobs/mock_data.js

@@ -1408,3 +1408,96 @@ export const mockJobsInTable = [
     __typename: 'CiJob',
   },
 ];
+
+export const mockJobsQueryResponse = {
+  data: {
+    project: {
+      jobs: {
+        pageInfo: {
+          endCursor: 'eyJpZCI6IjIzMTcifQ',
+          hasNextPage: true,
+          hasPreviousPage: false,
+          startCursor: 'eyJpZCI6IjIzMzYifQ',
+          __typename: 'PageInfo',
+        },
+        nodes: [
+          {
+            artifacts: {
+              nodes: [
+                {
+                  downloadPath: '/root/ci-project/-/jobs/2336/artifacts/download?file_type=trace',
+                  __typename: 'CiJobArtifact',
+                },
+                {
+                  downloadPath:
+                    '/root/ci-project/-/jobs/2336/artifacts/download?file_type=metadata',
+                  __typename: 'CiJobArtifact',
+                },
+                {
+                  downloadPath: '/root/ci-project/-/jobs/2336/artifacts/download?file_type=archive',
+                  __typename: 'CiJobArtifact',
+                },
+              ],
+              __typename: 'CiJobArtifactConnection',
+            },
+            allowFailure: false,
+            status: 'SUCCESS',
+            scheduledAt: null,
+            manualJob: false,
+            triggered: null,
+            createdByTag: false,
+            detailedStatus: {
+              detailsPath: '/root/ci-project/-/jobs/2336',
+              group: 'success',
+              icon: 'status_success',
+              label: 'passed',
+              text: 'passed',
+              tooltip: 'passed',
+              action: {
+                buttonTitle: 'Retry this job',
+                icon: 'retry',
+                method: 'post',
+                path: '/root/ci-project/-/jobs/2336/retry',
+                title: 'Retry',
+                __typename: 'StatusAction',
+              },
+              __typename: 'DetailedStatus',
+            },
+            id: 'gid://gitlab/Ci::Build/2336',
+            refName: 'master',
+            refPath: '/root/ci-project/-/commits/master',
+            tags: [],
+            shortSha: '4408fa2a',
+            commitPath: '/root/ci-project/-/commit/4408fa2a27aaadfdf42d8dda3d6a9c01ce6cad78',
+            pipeline: {
+              id: 'gid://gitlab/Ci::Pipeline/473',
+              path: '/root/ci-project/-/pipelines/473',
+              user: {
+                webPath: '/root',
+                avatarUrl:
+                  'https://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon',
+                __typename: 'UserCore',
+              },
+              __typename: 'Pipeline',
+            },
+            stage: {
+              name: 'deploy',
+              __typename: 'CiStage',
+            },
+            name: 'artifact_job',
+            duration: 3,
+            finishedAt: '2021-04-29T14:19:50Z',
+            coverage: null,
+            retryable: true,
+            playable: false,
+            cancelable: false,
+            active: false,
+            __typename: 'CiJob',
+          },
+        ],
+        __typename: 'CiJobConnection',
+      },
+      __typename: 'Project',
+    },
+  },
+};