Adds tests for new table component

Fixes eslint problems

app/assets/javascripts/registry/components/app.vue

@@ -37,7 +37,7 @@
     },
     mounted() {
       this.fetchRepos()
-        .catch(() => Flash(errorMessagesTypes.FETCH_REPOS));
+        .catch(() => Flash(errorMessages[errorMessagesTypes.FETCH_REPOS]));
     },
   };
 </script>

app/assets/javascripts/registry/components/collapsible_container.vue

 <script>
+  /* globals Flash */
   import { mapActions } from 'vuex';
-  import { n__, s__ } from '../../locale';
+  import '../../flash';
   import clipboardButton from '../../vue_shared/components/clipboard_button.vue';
   import loadingIcon from '../../vue_shared/components/loading_icon.vue';
   import tooltip from '../../vue_shared/directives/tooltip';
@@ -37,6 +38,7 @@
 
       toggleRepo() {
         this.isOpen = !this.isOpen;
+
         if (this.isOpen) {
           this.fetchList({ repo: this.repo })
           .catch(() => this.showError(errorMessagesTypes.FETCH_REGISTRY));

app/assets/javascripts/registry/components/table_registry.vue

 <script>
+  /* globals Flash */
   import { mapActions } from 'vuex';
-  import { n__, s__ } from '../../locale';
+  import { n__ } from '../../locale';
+  import '../../flash';
   import clipboardButton from '../../vue_shared/components/clipboard_button.vue';
   import tablePagination from '../../vue_shared/components/table_pagination.vue';
   import tooltip from '../../vue_shared/directives/tooltip';
@@ -39,6 +41,7 @@
         const pluralize = n__('layer', 'layers', item.layers);
         return `${item.layers} ${pluralize}`;
       },
+
       handleDeleteRegistry(registry) {
         this.deleteRegistry(registry)
           .then(() => this.fetchList({ repo: this.repo }))
@@ -46,7 +49,7 @@
       },
 
       onPageChange(pageNumber) {
-        this.fetchList({ repo: this.repo, page })
+        this.fetchList({ repo: this.repo, page: pageNumber })
           .catch(() => this.showError(errorMessagesTypes.FETCH_REGISTRY));
       },
 

spec/javascripts/registry/components/app_spec.js

 import Vue from 'vue';
 import registry from '~/registry/components/app.vue';
 import mountComponent from '../../helpers/vue_mount_component_helper';
-import { reposServerResponse } from '../stores/mock_data';
+import { reposServerResponse } from '../mock_data';
 
 describe('Registry List', () => {
   let vm;
@@ -59,7 +59,7 @@ describe('Registry List', () => {
       it('should open the container', (done) => {
         setTimeout(() => {
           Vue.nextTick(() => {
-            vm.$el.querySelector('.container-image a').click();
+            vm.$el.querySelector('.js-toggle-repo').click();
             Vue.nextTick(() => {
               expect(vm.$el.querySelector('.js-toggle-repo i').className).toEqual('fa fa-chevron-up');
               done();

spec/javascripts/registry/components/collapsible_container_spec.js

 import Vue from 'vue';
 import collapsibleComponent from '~/registry/components/collapsible_container.vue';
-import mountComponent from '../../helpers/vue_mount_component_helper';
+import store from '~/registry/stores';
+import { repoPropsData } from '../mock_data';
 
 describe('collapsible registry container', () => {
   let vm;
   let Component;
-  let mockData;
 
   beforeEach(() => {
     Component = Vue.extend(collapsibleComponent);
-    mockData = {
-      canDelete: true,
-      destroyPath: 'path',
-      id: '123',
-      isLoading: false,
-      list: [
-        {
-          tag: 'centos6',
-          revision: 'b118ab5b0e90b7cb5127db31d5321ac14961d097516a8e0e72084b6cdc783b43',
-          shortRevision: 'b118ab5b0',
-          size: 19,
-          layers: 10,
-          location: 'location',
-          createdAt: 1505828744434,
-          destroyPath: 'path',
-          canDelete: true,
+    vm = new Component({
+      store,
+      propsData: {
+        repo: repoPropsData,
       },
-      ],
-      location: 'location',
-      name: 'foo',
-      tagsPath: 'path',
-      pagination: {
-        perPage: 5,
-        page: 1,
-        total: 13,
-        totalPages: 1,
-        nextPage: null,
-        previousPage: null,
-      },
-    };
-    vm = mountComponent(Component, { repo: mockData });
+    }).$mount();
   });
 
   afterEach(() => {
@@ -80,52 +55,4 @@ describe('collapsible registry container', () => {
       expect(vm.$el.querySelector('.js-remove-repo')).toBeDefined();
     });
   });
-
-  describe('registry list', () => {
-    it('should render a table with the registry list', (done) => {
-      vm.$el.querySelector('.js-toggle-repo').click();
-
-      Vue.nextTick(() => {
-        expect(
-          vm.$el.querySelectorAll('table tbody tr').length,
-        ).toEqual(mockData.list.length);
-        done();
-      });
-    });
-
-    it('should render registry tag', (done) => {
-      vm.$el.querySelector('.js-toggle-repo').click();
-
-      Vue.nextTick(() => {
-        const textRendered = vm.$el.querySelector('.table tbody tr').textContent.trim().replace(/\s\s+/g, ' ');
-        expect(textRendered).toContain(mockData.list[0].tag);
-        expect(textRendered).toContain(mockData.list[0].shortRevision);
-        expect(textRendered).toContain(mockData.list[0].layers);
-        expect(textRendered).toContain(mockData.list[0].size);
-        done();
-      });
-    });
-
-    it('should be possible to delete a registry', (done) => {
-      vm.$el.querySelector('.js-toggle-repo').click();
-
-      Vue.nextTick(() => {
-        expect(
-          vm.$el.querySelector('.table tbody tr .js-delete-registry'),
-        ).toBeDefined();
-        done();
-      });
-    });
-
-    describe('pagination', () => {
-      it('should be possible to change the page', (done) => {
-        vm.$el.querySelector('.js-toggle-repo').click();
-
-        Vue.nextTick(() => {
-          expect(vm.$el.querySelector('.gl-pagination')).toBeDefined();
-          done();
-        });
-      });
-    });
-  });
 });

spec/javascripts/registry/components/table_registry_spec.js

+import Vue from 'vue';
+import tableRegistry from '~/registry/components/table_registry.vue';
+import store from '~/registry/stores';
+import { repoPropsData } from '../mock_data';
+
+describe('table registry', () => {
+  let vm;
+  let Component;
+
+  beforeEach(() => {
+    Component = Vue.extend(tableRegistry);
+    vm = new Component({
+      store,
+      propsData: {
+        repo: repoPropsData,
+      },
+    }).$mount();
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  it('should render a table with the registry list', () => {
+    expect(
+      vm.$el.querySelectorAll('table tbody tr').length,
+    ).toEqual(repoPropsData.list.length);
+  });
+
+  it('should render registry tag', () => {
+    const textRendered = vm.$el.querySelector('.table tbody tr').textContent.trim().replace(/\s\s+/g, ' ');
+    expect(textRendered).toContain(repoPropsData.list[0].tag);
+    expect(textRendered).toContain(repoPropsData.list[0].shortRevision);
+    expect(textRendered).toContain(repoPropsData.list[0].layers);
+    expect(textRendered).toContain(repoPropsData.list[0].size);
+  });
+
+  it('should be possible to delete a registry', () => {
+    expect(
+      vm.$el.querySelector('.table tbody tr .js-delete-registry'),
+    ).toBeDefined();
+  });
+
+  describe('pagination', () => {
+    it('should be possible to change the page', () => {
+      expect(vm.$el.querySelector('.gl-pagination')).toBeDefined();
+    });
+  });
+});

spec/javascripts/registry/stores/mock_data.js → spec/javascripts/registry/mock_data.js

@@ -89,3 +89,34 @@ export const parsedRegistryServerResponse = [
     canDelete: false,
   },
 ];
+
+export const repoPropsData = {
+  canDelete: true,
+  destroyPath: 'path',
+  id: '123',
+  isLoading: false,
+  list: [
+    {
+      tag: 'centos6',
+      revision: 'b118ab5b0e90b7cb5127db31d5321ac14961d097516a8e0e72084b6cdc783b43',
+      shortRevision: 'b118ab5b0',
+      size: 19,
+      layers: 10,
+      location: 'location',
+      createdAt: 1505828744434,
+      destroyPath: 'path',
+      canDelete: true,
+    },
+  ],
+  location: 'location',
+  name: 'foo',
+  tagsPath: 'path',
+  pagination: {
+    perPage: 5,
+    page: 1,
+    total: 13,
+    totalPages: 1,
+    nextPage: null,
+    previousPage: null,
+  },
+};

spec/javascripts/registry/stores/actions_spec.js

@@ -9,7 +9,7 @@ import {
   reposServerResponse,
   registryServerResponse,
   parsedReposServerResponse,
-} from './mock_data';
+} from '../mock_data';
 
 Vue.use(VueResource);
 

spec/javascripts/registry/stores/mutations_spec.js

@@ -6,7 +6,7 @@ import {
   registryServerResponse,
   parsedReposServerResponse,
   parsedRegistryServerResponse,
-} from './mock_data';
+} from '../mock_data';
 
 describe('Mutations Registry Store', () => {
   let mockState;