Code improvements

More specs

app/assets/javascripts/blob/xlsx/components/table.vue

@@ -33,8 +33,6 @@
 </template>
 <script>
-import 'vendor/jquery.scrollTo';
-
 export default {
   name: 'XLSXTable',
   props: {
@@ -50,8 +48,9 @@ export default {
   },
   methods: {
     linePath(index) {
-      let hash = location.hash.replace('#', '');
-      hash = hash.replace(/-?L(\d+)$/g, '');
+      const hash = location.hash
+        .replace('#', '')
+        .replace(/-?L(\d+)$/g, '');
       if (hash !== '') {
         return `#${hash}-L${index + 1}`;
@@ -63,10 +62,12 @@ export default {
       this.currentLineNumber = index + 1;
     },
     getCurrentLineNumberFromUrl() {
-      const hash = location.hash.replace('#', '').split('-');
-      const lineHash = hash[hash.length - 1];
-      this.currentLineNumber = parseInt(lineHash.replace('L', ''), 10);
+      const hash = location.hash
+        .replace('#', '')
+        .split('-')
+        .pop();
+      this.currentLineNumber = parseInt(hash.replace('L', ''), 10);
     },
   },
   watch: {

app/assets/javascripts/blob/xlsx/components/tabs.vue

@@ -3,10 +3,10 @@
     <li
       class="prepend-left-10"
       v-for="name in sheetNames"
-      :class="{ 'active': name === currentSheetName }">
+      :class="{ active: name === currentSheetName }">
       <a
-        href="#"
-        @click.prevent="changeSheet(name)">
+        :href="getTabPath(name)"
+        @click="changeSheet(name)">
         {{ name }}
       </a>
     </li>
@@ -30,10 +30,11 @@ export default {
   },
   methods: {
     changeSheet(name) {
-      location.hash = encodeURIComponent(name);
-
       eventHub.$emit('update-sheet', name);
     },
+    getTabPath(name) {
+      return `#${encodeURIComponent(name)}`;
+    },
   },
 };
 </script>

app/assets/javascripts/blob/xlsx/index.vue

@@ -55,13 +55,14 @@ export default {
       return this.sheetNames.find(sheet => sheet === hash) || this.sheetNames[0];
     },
+    updateSheetName(name) {
+      this.currentSheetName = name;
+    },
   },
   created() {
     this.service = new Service(this.endpoint);
-    eventHub.$on('update-sheet', (name) => {
-      this.currentSheetName = name;
-    });
+    eventHub.$on('update-sheet', this.updateSheetName);
   },
   mounted() {
     this.service.getData()
@@ -71,6 +72,9 @@ export default {
         this.loading = false;
       });
   },
+  beforeDestroy() {
+    eventHub.$off('update-sheet', this.updateSheetName);
+  },
   components: {
     xlsxTabs,
     xlsxTable,

changelogs/unreleased/xlsx-renderer.yml

+---
+title: XLSX files render in the browser
+merge_request:
+author:

spec/javascripts/blob/xlsx/components/table_spec.js

@@ -9,13 +9,23 @@ describe('XLSX table', () => {
     vm = new TableComponent({
       propsData: {
-        sheet: {},
+        sheet: {
+          columns: ['test', 'test 2'],
+          rows: [
+            ['test 3', 'test 4'],
+            ['test 6', 'test 5'],
+          ],
+        },
       },
     }).$mount();
     Vue.nextTick(done);
   });
+  afterEach(() => {
+    location.hash = '';
+  });
+
   describe('linePath', () => {
     it('returns linePath with just the number when hash is empty', () => {
       expect(
@@ -51,4 +61,48 @@ describe('XLSX table', () => {
       ).toBe(1);
     });
   });
+
+  it('renders column names', () => {
+    expect(
+      vm.$el.querySelector('th:nth-child(2)').textContent.trim(),
+    ).toBe('test');
+
+    expect(
+      vm.$el.querySelector('th:nth-child(3)').textContent.trim(),
+    ).toBe('test 2');
+  });
+
+  describe('row rendering', () => {
+    it('renders row numbers', () => {
+      expect(
+        vm.$el.querySelector('td:first-child').textContent.trim(),
+      ).toBe('1');
+    });
+
+    it('updates hash when clicking line number', (done) => {
+      vm.$el.querySelector('td:first-child a').click();
+
+      Vue.nextTick(() => {
+        expect(
+          location.hash,
+        ).toBe('#L1');
+
+        done();
+      });
+    });
+
+    it('calls updateCurrentLineNumber when clicking line number', (done) => {
+      spyOn(vm, 'updateCurrentLineNumber');
+
+      vm.$el.querySelector('td:first-child a').click();
+
+      Vue.nextTick(() => {
+        expect(
+          vm.updateCurrentLineNumber,
+        ).toHaveBeenCalledWith(0);
+
+        done();
+      });
+    });
+  });
 });

spec/javascripts/blob/xlsx/components/tabs_spec.js

 import Vue from 'vue';
 import tabs from '~/blob/xlsx/components/tabs.vue';
+import eventHub from '~/blob/xlsx/eventhub';
 describe('XLSX tabs', () => {
   let vm;
@@ -17,12 +18,16 @@ describe('XLSX tabs', () => {
     Vue.nextTick(done);
   });
-  it('changes hash to sheet name', () => {
-    vm.changeSheet('test 2');
-    expect(
-      location.hash,
-    ).toBe(`#${encodeURIComponent('test 2')}`);
+  it('changes hash to sheet name', (done) => {
+    eventHub.$on('update-sheet', (name) => {
+      expect(
+        name,
+      ).toBe('test 2');
+      done();
+    });
+
+    vm.changeSheet('test 2');
   });
   it('selects current sheet name', () => {
@@ -34,4 +39,10 @@ describe('XLSX tabs', () => {
       vm.$el.querySelector('li:nth-child(2)'),
     ).not.toHaveClass('active');
   });
+
+  it('getTabPath returns encoded path', () => {
+    expect(
+      vm.getTabPath('test 2'),
+    ).toBe(`#${encodeURIComponent('test 2')}`);
+  });
 });

spec/javascripts/blob/xlsx/index_spec.js

 import Vue from 'vue';
 import Service from '~/blob/xlsx/service';
 import component from '~/blob/xlsx/index.vue';
+import eventHub from '~/blob/xlsx/eventhub';
 describe('XLSX Renderer', () => {
   let vm;
@@ -10,13 +11,19 @@ describe('XLSX Renderer', () => {
     spyOn(Service.prototype, 'getData').and.callFake(() => new Promise((resolve) => {
       resolve({
-        test: {},
-        'test 1': {},
+        test: {
+          columns: 1,
+        },
+        'test 1': {
+          columns: 2,
+        },
       });
       setTimeout(done, 0);
     }));
+    spyOn(eventHub, '$off');
+
     vm = new RendererComponent({
       propsData: {
         endpoint: '/',
@@ -28,6 +35,20 @@ describe('XLSX Renderer', () => {
     location.hash = '';
   });
+  it('sheetNames returns array of sheet names', () => {
+    expect(
+      vm.sheetNames,
+    ).toEqual(['test', 'test 1']);
+  });
+
+  it('sheet returns currently selected sheet', () => {
+    expect(
+      vm.sheet,
+    ).toEqual({
+      columns: 1,
+    });
+  });
+
   describe('getInitialSheet', () => {
     it('defaults to first sheet', () => {
       expect(
@@ -51,4 +72,12 @@ describe('XLSX Renderer', () => {
       ).toBe('test');
     });
   });
+
+  it('removes eventHub listener on destroy', () => {
+    vm.$destroy();
+
+    expect(
+      eventHub.$off,
+    ).toHaveBeenCalledWith('update-sheet', vm.updateSheetName);
+  });
 });