Updated tests for components/clusters.vue

Refactored api data for javascripts/clusters_list/
Updated clusters_list jest tests to match new logic

app/assets/javascripts/clusters_list/components/clusters.vue

@@ -15,13 +15,16 @@ export default {
   directives: {
     tooltip,
   },
-  fields: [
+  computed: {
+    ...mapState(['clusters', 'loading']),
+    fields() {
+      return [
         {
           key: 'name',
           label: __('Kubernetes cluster'),
         },
         {
-      key: 'environmentScope',
+          key: 'environment_scope',
           label: __('Environment scope'),
         },
         // Wait for backend to send these fields
@@ -38,13 +41,12 @@ export default {
         //  label: __('Total memory (GB)'),
         // },
         {
-      key: 'clusterType',
+          key: 'cluster_type',
           label: __('Cluster level'),
           formatter: value => CLUSTER_TYPES[value],
         },
-  ],
-  computed: {
-    ...mapState(['clusters', 'loading']),
+      ];
+    },
   },
   mounted() {
     this.fetchClusters();
@@ -65,14 +67,7 @@ export default {
 
 <template>
   <gl-loading-icon v-if="loading" size="md" class="mt-3" />
-  <gl-table
-    v-else
-    :items="clusters"
-    :fields="$options.fields"
-    stacked="md"
-    variant="light"
-    class="qa-clusters-table"
-  >
+  <gl-table v-else :items="clusters" :fields="fields" stacked="md" class="qa-clusters-table">
     <template #cell(name)="{ item }">
       <div class="d-flex flex-row-reverse flex-md-row js-status">
         <gl-link data-qa-selector="cluster" :data-qa-cluster-name="item.name" :href="item.path">
@@ -95,7 +90,7 @@ export default {
         ></div>
       </div>
     </template>
-    <template #cell(clusterType)="{value}">
+    <template #cell(cluster_type)="{value}">
       <gl-badge variant="light">
         {{ value }}
       </gl-badge>

app/assets/javascripts/clusters_list/store/actions.js

-import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 import Poll from '~/lib/utils/poll';
 import axios from '~/lib/utils/axios_utils';
 import flash from '~/flash';
@@ -14,7 +13,7 @@ export const fetchClusters = ({ state, commit }) => {
     method: 'fetchClusters',
     successCallback: ({ data }) => {
       if (data.clusters) {
-        commit(types.SET_CLUSTERS_DATA, convertObjectPropsToCamelCase(data, { deep: true }));
+        commit(types.SET_CLUSTERS_DATA, data);
         commit(types.SET_LOADING_STATE, false);
         poll.stop();
       }

app/assets/javascripts/clusters_list/store/mutations.js

@@ -7,7 +7,7 @@ export default {
   [types.SET_CLUSTERS_DATA](state, data) {
     Object.assign(state, {
       clusters: data.clusters,
-      hasAncestorClusters: data.hasAncestorClusters,
+      hasAncestorClusters: data.has_ancestor_clusters,
     });
   },
 };

spec/frontend/clusters_list/components/clusters_spec.js

-import Vuex from 'vuex';
-import { createLocalVue, mount } from '@vue/test-utils';
-import { GlTable, GlLoadingIcon } from '@gitlab/ui';
+import axios from '~/lib/utils/axios_utils';
 import Clusters from '~/clusters_list/components/clusters.vue';
-import mockData from '../mock_data';
-
-const localVue = createLocalVue();
-localVue.use(Vuex);
+import ClusterStore from '~/clusters_list/store';
+import MockAdapter from 'axios-mock-adapter';
+import { apiData } from '../mock_data';
+import { mount } from '@vue/test-utils';
+import { GlTable, GlLoadingIcon } from '@gitlab/ui';
 
 describe('Clusters', () => {
+  let mock;
+  let store;
   let wrapper;
 
-  const findTable = () => wrapper.find(GlTable);
+  const endpoint = 'some/endpoint';
+
   const findLoader = () => wrapper.find(GlLoadingIcon);
+  const findTable = () => wrapper.find(GlTable);
   const findStatuses = () => findTable().findAll('.js-status');
 
-  const mountComponent = _state => {
-    const state = { clusters: mockData, endpoint: 'some/endpoint', ..._state };
-    const store = new Vuex.Store({
-      state,
-    });
+  const mockPollingApi = (response, body, header) => {
+    mock.onGet(endpoint).reply(response, body, header);
+  };
 
-    wrapper = mount(Clusters, { localVue, store });
+  const mountWrapper = () => {
+    store = ClusterStore({ endpoint });
+    wrapper = mount(Clusters, { store });
+    return axios.waitForAll();
   };
 
   beforeEach(() => {
-    mountComponent({ loading: false });
+    mock = new MockAdapter(axios);
+    mockPollingApi(200, apiData, {});
+
+    return mountWrapper();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+    mock.restore();
   });
 
   describe('clusters table', () => {
+    describe('when data is loading', () => {
+      beforeEach(() => {
+        wrapper.vm.$store.state.loading = true;
+        return wrapper.vm.$nextTick();
+      });
+
       it('displays a loader instead of the table while loading', () => {
-      mountComponent({ loading: true });
         expect(findLoader().exists()).toBe(true);
         expect(findTable().exists()).toBe(false);
       });
+    });
 
     it('displays a table component', () => {
       expect(findTable().exists()).toBe(true);
-      expect(findTable().exists()).toBe(true);
     });
 
     it('renders the correct table headers', () => {
-      const tableHeaders = wrapper.vm.$options.fields;
+      const tableHeaders = wrapper.vm.fields;
       const headers = findTable().findAll('th');
 
       expect(headers.length).toBe(tableHeaders.length);
@@ -62,7 +79,7 @@ describe('Clusters', () => {
       ${'unreachable'}            | ${'bg-danger'}  | ${1}
       ${'authentication_failure'} | ${'bg-warning'} | ${2}
       ${'deleting'}               | ${null}         | ${3}
-      ${'connected'}              | ${'bg-success'} | ${4}
+      ${'created'}                | ${'bg-success'} | ${4}
     `('renders a status for each cluster', ({ statusName, className, lineNumber }) => {
       const statuses = findStatuses();
       const status = statuses.at(lineNumber);

spec/frontend/clusters_list/mock_data.js

-export default [
+export const clusterList = [
   {
     name: 'My Cluster 1',
     environmentScope: '*',
@@ -40,8 +40,13 @@ export default [
     environmentScope: 'development',
     size: '12',
     clusterType: 'project_type',
-    status: 'connected',
+    status: 'created',
     cpu: '6 (100% free)',
     memory: '20.12 (35% free)',
   },
 ];
+
+export const apiData = {
+  clusters: clusterList,
+  has_ancestor_clusters: false,
+};

spec/frontend/clusters_list/store/actions_spec.js

@@ -2,6 +2,7 @@ import MockAdapter from 'axios-mock-adapter';
 import flashError from '~/flash';
 import testAction from 'helpers/vuex_action_helper';
 import axios from '~/lib/utils/axios_utils';
+import { apiData } from '../mock_data';
 import * as types from '~/clusters_list/store/mutation_types';
 import * as actions from '~/clusters_list/store/actions';
 
@@ -10,8 +11,6 @@ jest.mock('~/flash.js');
 describe('Clusters store actions', () => {
   describe('fetchClusters', () => {
     let mock;
-    const endpoint = '/clusters';
-    const clusters = [{ name: 'test' }];
 
     beforeEach(() => {
       mock = new MockAdapter(axios);
@@ -20,14 +19,14 @@ describe('Clusters store actions', () => {
     afterEach(() => mock.restore());
 
     it('should commit SET_CLUSTERS_DATA with received response', done => {
-      mock.onGet().reply(200, clusters);
+      mock.onGet().reply(200, apiData);
 
       testAction(
         actions.fetchClusters,
-        { endpoint },
+        { endpoint: apiData.endpoint },
         {},
         [
-          { type: types.SET_CLUSTERS_DATA, payload: clusters },
+          { type: types.SET_CLUSTERS_DATA, payload: apiData },
           { type: types.SET_LOADING_STATE, payload: false },
         ],
         [],
@@ -38,7 +37,7 @@ describe('Clusters store actions', () => {
     it('should show flash on API error', done => {
       mock.onGet().reply(400, 'Not Found');
 
-      testAction(actions.fetchClusters, { endpoint }, {}, [], [], () => {
+      testAction(actions.fetchClusters, { endpoint: apiData.endpoint }, {}, [], [], () => {
         expect(flashError).toHaveBeenCalledWith(expect.stringMatching('error'));
         done();
       });