Convert js to real vue component, and test

Also delete unnecessary getter - that is only needed
by localStorageSync

app/assets/javascripts/boards/stores/getters.js

@@ -2,7 +2,6 @@ import { find } from 'lodash';
 import { inactiveId } from '../constants';
 
 export default {
-  labelToggleState: state => (state.isShowingLabels ? 'on' : 'off'),
   isSidebarOpen: state => state.activeId !== inactiveId,
   isSwimlanesOn: () => false,
   getIssueById: state => id => {

ee/app/assets/javascripts/boards/components/toggle_labels.vue

+<script>
+import { mapState, mapActions } from 'vuex';
+import { GlToggle } from '@gitlab/ui';
+import { parseBoolean } from '~/lib/utils/common_utils';
+import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
+
+export default {
+  components: {
+    GlToggle,
+    LocalStorageSync,
+  },
+  computed: {
+    ...mapState(['isShowingLabels']),
+    trackProperty() {
+      return this.isShowingLabels ? 'on' : 'off';
+    },
+  },
+  methods: {
+    ...mapActions(['setShowLabels']),
+    onToggle(val) {
+      this.setShowLabels(val);
+    },
+    onStorageUpdate(val) {
+      this.setShowLabels(parseBoolean(val));
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="board-labels-toggle-wrapper gl-display-flex gl-align-items-center gl-ml-3">
+    <local-storage-sync
+      storage-key="gl-show-board-labels"
+      :value="JSON.stringify(isShowingLabels)"
+      @input="onStorageUpdate"
+    />
+    <gl-toggle
+      :value="isShowingLabels"
+      :label="__('Show labels')"
+      :data-track-property="trackProperty"
+      data-track-event="toggle"
+      data-track-label="show_labels"
+      label-position="left"
+      aria-describedby="board-labels-toggle-text"
+      data-qa-selector="show_labels_toggle"
+      @change="onToggle"
+    />
+  </div>
+</template>

ee/app/assets/javascripts/boards/toggle_labels.js

 import Vue from 'vue';
-import { mapState, mapGetters, mapActions } from 'vuex';
-import { GlToggle } from '@gitlab/ui';
-import Tracking from '~/tracking';
 import store from '~/boards/stores';
-import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
+import ToggleLabels from './components/toggle_labels.vue';
 
 export default () =>
   new Vue({
     el: document.getElementById('js-board-labels-toggle'),
     components: {
-      GlToggle,
-      LocalStorageSync,
+      ToggleLabels,
     },
     store,
-    computed: {
-      ...mapState(['isShowingLabels']),
-      ...mapGetters(['labelToggleState']),
-    },
-    methods: {
-      ...mapActions(['setShowLabels']),
-
-      onToggle(val) {
-        this.setShowLabels(val);
-
-        Tracking.event(document.body.dataset.page, 'toggle', {
-          label: 'show_labels',
-          property: this.labelToggleState,
-        });
-      },
-
-      onStorageUpdate(val) {
-        this.setShowLabels(JSON.parse(val));
-      },
-    },
-    template: `
-      <div class="board-labels-toggle-wrapper d-flex align-items-center gl-ml-3">
-        <local-storage-sync storage-key="gl-show-board-labels" :value="JSON.stringify(isShowingLabels)" @input="onStorageUpdate" />
-        <gl-toggle
-          :value="isShowingLabels"
-          label="Show labels"
-          label-position="left"
-          aria-describedby="board-labels-toggle-text"
-          data-qa-selector="show_labels_toggle"
-          @change="onToggle"
-        />
-      </div>
-    `,
+    render: createElement => createElement('toggle-labels'),
   });

ee/spec/frontend/boards/toggle_labels_spec.js

+import { GlToggle } from '@gitlab/ui';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import Vuex from 'vuex';
+import ToggleLabels from 'ee/boards/components/toggle_labels';
+import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+describe('ToggleLabels component', () => {
+  let wrapper;
+  let setShowLabels;
+
+  function createComponent(state = {}) {
+    setShowLabels = jest.fn();
+    return shallowMount(ToggleLabels, {
+      localVue,
+      store: new Vuex.Store({
+        state: {
+          isShowingLabels: true,
+          ...state,
+        },
+        actions: {
+          setShowLabels,
+        },
+      }),
+      stubs: {
+        LocalStorageSync,
+      },
+    });
+  }
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  it('onStorageUpdate parses empty value as false', async () => {
+    wrapper = createComponent();
+
+    const localStorageSync = wrapper.find(LocalStorageSync);
+    localStorageSync.vm.$emit('input', '');
+
+    await wrapper.vm.$nextTick();
+
+    expect(setShowLabels).toHaveBeenCalledWith(expect.any(Object), false);
+  });
+
+  it('sets GlToggle value from store.isShowingLabels', () => {
+    wrapper = createComponent({ isShowingLabels: true });
+
+    expect(wrapper.find(GlToggle).props('value')).toEqual(true);
+
+    wrapper = createComponent({ isShowingLabels: false });
+
+    expect(wrapper.find(GlToggle).props('value')).toEqual(false);
+  });
+});

locale/gitlab.pot

@@ -25177,6 +25177,9 @@ msgstr ""
 msgid "Show file contents"
 msgstr ""
 
+msgid "Show labels"
+msgstr ""
+
 msgid "Show latest version"
 msgstr ""
 

spec/frontend/boards/stores/getters_spec.js

@@ -10,24 +10,6 @@ import {
 } from '../mock_data';
 
 describe('Boards - Getters', () => {
-  describe('labelToggleState', () => {
-    it('should return "on" when isShowingLabels is true', () => {
-      const state = {
-        isShowingLabels: true,
-      };
-
-      expect(getters.labelToggleState(state)).toBe('on');
-    });
-
-    it('should return "off" when isShowingLabels is false', () => {
-      const state = {
-        isShowingLabels: false,
-      };
-
-      expect(getters.labelToggleState(state)).toBe('off');
-    });
-  });
-
   describe('isSidebarOpen', () => {
     it('returns true when activeId is not equal to 0', () => {
       const state = {