Implement getCategories store getter

components/category-select-table.vue

@@ -2,7 +2,6 @@
 
     <div>
 
-        <!-- Category selection table -->
         <b-row class="no-padding-row">
 
             <b-col cols="12" class="no-padding-col">
@@ -30,6 +29,8 @@
 
     export default {
 
+        name: "CategorySelectTable",
+
         props: {
 
             selectedCategory: { type: String, required: true }
@@ -39,14 +40,14 @@
 
             ...mapGetters([
 
-                "categories",
+                "getCategoryNames",
                 "categoryClasses"
             ]),
 
             categoryTable() {
 
                 // Return a list of dicts for each category in the table
-                return this.categories.map((name) => ({ category: name }));
+                return this.getCategoryNames.map((name) => ({ category: name }));
             }
         },
 

cypress/component/category-select-table.cy.js

@@ -1,15 +1,12 @@
 import CategorySelectTable from "~/components/category-select-table.vue";
 
-// Documentation for testing Vue events of components
-// https://docs.cypress.io/guides/component-testing/events-vue
 
 // Mocks
-
 const state = {
 
     getters: {
 
-        categories: () => {
+        getCategoryNames: () => {
 
             return [
 
@@ -55,16 +52,16 @@ describe("Table for selecting categories to linking to table columns on the cate
         });
 
         // Test each row in the category select table
-        for ( let index = 0; index < state.getters.categories().length; index++ ) {
+        for ( let index = 0; index < state.getters.getCategoryNames().length; index++ ) {
 
             // 2. Act
             cy.get("td")
-                .contains(state.getters.categories()[index])
+                .contains(state.getters.getCategoryNames()[index])
                 .click();
 
             // 3. Assert
             cy.get("@onCategorySelectSpy")
-                .should("have.been.calledWith", { category: state.getters.categories()[index] });
+                .should("have.been.calledWith", { category: state.getters.getCategoryNames()[index] });
         }
     });
 });

cypress/unit/store-getter-getCategoryNames.cy.js

@@ -0,0 +1,19 @@
+import { getters } from "~/store/index-refactor";
+
+describe('getCategoryNames', () => {
+    it('returns an array of existing category names', () => {
+        const state = {
+            categories : {
+                category1: {},
+                category2: {},
+                myCatIsCool: {}
+            }
+        };
+        const result = getters.getCategoryNames(state);
+        expect(result).to.be.deep.equal([
+            "category1",
+            "category2",
+            "myCatIsCool"
+        ]);
+    });
+});

store/index-refactor.js

@@ -2,24 +2,30 @@
 import Vue from "vue";
 
 export const state = () => ({
+    categories: {},
     columnToCategoryMapping: {}
+
 });
 
 export const getters = {
 
+    getCategoryNames (p_state) {
+        return Object.keys(p_state.categories);
+    }
+
 };
 
 
 export const mutations = {
 
 
     /**
-     * Change the mapping between a column and a category.
-     * If the two are already mapped, the column should be unlinked.
-     * Otherwise the column is mapped to a different category.
+     * Change the mapping between a column and a category
+     * If the two are already mapped, the column should be unlinked
+     * Otherwise the column is mapped to a different category
      *
-     * @param {string} targetCategory Category the column should be mapped to.
-     * @param {string} columnName Column that will be mapped to the category.
+     * @param {string} targetCategory Category the column should be mapped to
+     * @param {string} columnName Column that will be mapped to the category
      */
     alterColumnCategoryMapping(p_state, targetCategory, columnName) {
         if (p_state.columnToCategoryMapping[columnName] === targetCategory) {