Add latest changes from gitlab-org/gitlab@master

2 files changed, 167 insertions, 0 deletions

diff --git a/spec/frontend/pages/admin/jobs/components/table/admin_job_table_app_spec.js b/spec/frontend/pages/admin/jobs/components/table/admin_job_table_app_spec.js
new file mode 100644
index 00000000000..e7ac2576b6f
--- /dev/null
+++ b/spec/frontend/pages/admin/jobs/components/table/admin_job_table_app_spec.js
@@ -0,0 +1,61 @@
+import { GlSkeletonLoader, GlLoadingIcon } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import waitForPromises from 'helpers/wait_for_promises';
+import JobsTable from '~/jobs/components/table/jobs_table.vue';
+import getJobsQuery from '~/pages/admin/jobs/components/table/graphql/queries/get_all_jobs.query.graphql';
+import AdminJobsTableApp from '~/pages/admin/jobs/components/table/admin_jobs_table_app.vue';
+
+import { mockAllJobsResponsePaginated, statuses } from '../../../../../jobs/mock_data';
+
+Vue.use(VueApollo);
+
+describe('Job table app', () => {
+  let wrapper;
+
+  const successHandler = jest.fn().mockResolvedValue(mockAllJobsResponsePaginated);
+
+  const findSkeletonLoader = () => wrapper.findComponent(GlSkeletonLoader);
+  const findLoadingSpinner = () => wrapper.findComponent(GlLoadingIcon);
+  const findTable = () => wrapper.findComponent(JobsTable);
+
+  const createMockApolloProvider = (handler) => {
+    const requestHandlers = [[getJobsQuery, handler]];
+
+    return createMockApollo(requestHandlers);
+  };
+
+  const createComponent = ({
+    handler = successHandler,
+    mountFn = shallowMount,
+    data = {},
+  } = {}) => {
+    wrapper = mountFn(AdminJobsTableApp, {
+      data() {
+        return {
+          ...data,
+        };
+      },
+      provide: {
+        jobStatuses: statuses,
+      },
+      apolloProvider: createMockApolloProvider(handler),
+    });
+  };
+
+  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);
+      expect(findLoadingSpinner().exists()).toBe(false);
+    });
+  });
+});
diff --git a/spec/frontend/pages/admin/jobs/components/table/graphql/cache_config_spec.js b/spec/frontend/pages/admin/jobs/components/table/graphql/cache_config_spec.js
new file mode 100644
index 00000000000..59e9eda6343
--- /dev/null
+++ b/spec/frontend/pages/admin/jobs/components/table/graphql/cache_config_spec.js
@@ -0,0 +1,106 @@
+import cacheConfig from '~/pages/admin/jobs/components/table/graphql/cache_config';
+import {
+  CIJobConnectionExistingCache,
+  CIJobConnectionIncomingCache,
+  CIJobConnectionIncomingCacheRunningStatus,
+} from '../../../../../../jobs/mock_data';
+
+const firstLoadArgs = { first: 3, statuses: 'PENDING' };
+const runningArgs = { first: 3, statuses: 'RUNNING' };
+
+describe('jobs/components/table/graphql/cache_config', () => {
+  describe('when fetching data with the same statuses', () => {
+    it('should contain cache nodes and a status when merging caches on first load', () => {
+      const res = cacheConfig.typePolicies.CiJobConnection.merge({}, CIJobConnectionIncomingCache, {
+        args: firstLoadArgs,
+      });
+
+      expect(res.nodes).toHaveLength(CIJobConnectionIncomingCache.nodes.length);
+      expect(res.statuses).toBe('PENDING');
+    });
+
+    it('should add to existing caches when merging caches after first load', () => {
+      const res = cacheConfig.typePolicies.CiJobConnection.merge(
+        CIJobConnectionExistingCache,
+        CIJobConnectionIncomingCache,
+        {
+          args: firstLoadArgs,
+        },
+      );
+
+      expect(res.nodes).toHaveLength(
+        CIJobConnectionIncomingCache.nodes.length + CIJobConnectionExistingCache.nodes.length,
+      );
+    });
+
+    it('should not add to existing cache if the incoming elements are the same', () => {
+      // simulate that this is the last page
+      const finalExistingCache = {
+        ...CIJobConnectionExistingCache,
+        pageInfo: {
+          hasNextPage: false,
+        },
+      };
+
+      const res = cacheConfig.typePolicies.CiJobConnection.merge(
+        CIJobConnectionExistingCache,
+        finalExistingCache,
+        {
+          args: firstLoadArgs,
+        },
+      );
+
+      expect(res.nodes).toHaveLength(CIJobConnectionExistingCache.nodes.length);
+    });
+
+    it('should contain the pageInfo key as part of the result', () => {
+      const res = cacheConfig.typePolicies.CiJobConnection.merge({}, CIJobConnectionIncomingCache, {
+        args: firstLoadArgs,
+      });
+
+      expect(res.pageInfo).toEqual(
+        expect.objectContaining({
+          __typename: 'PageInfo',
+          endCursor: 'eyJpZCI6IjIwNTEifQ',
+          hasNextPage: true,
+          hasPreviousPage: false,
+          startCursor: 'eyJpZCI6IjIxNzMifQ',
+        }),
+      );
+    });
+  });
+
+  describe('when fetching data with different statuses', () => {
+    it('should reset cache when a cache already exists', () => {
+      const res = cacheConfig.typePolicies.CiJobConnection.merge(
+        CIJobConnectionExistingCache,
+        CIJobConnectionIncomingCacheRunningStatus,
+        {
+          args: runningArgs,
+        },
+      );
+
+      expect(res.nodes).not.toEqual(CIJobConnectionExistingCache.nodes);
+      expect(res.nodes).toHaveLength(CIJobConnectionIncomingCacheRunningStatus.nodes.length);
+    });
+  });
+
+  describe('when incoming data has no nodes', () => {
+    it('should return existing cache', () => {
+      const res = cacheConfig.typePolicies.CiJobConnection.merge(
+        CIJobConnectionExistingCache,
+        { __typename: 'CiJobConnection', count: 500 },
+        {
+          args: { statuses: 'SUCCESS' },
+        },
+      );
+
+      const expectedResponse = {
+        ...CIJobConnectionExistingCache,
+        statuses: 'SUCCESS',
+      };
+
+      expect(res).toEqual(expectedResponse);
+    });
+  });
+});