From 52ee97a39a43a18c468c786ceb39dbdeb89a2209 Mon Sep 17 00:00:00 2001 From: Sebastian Urchs Date: Fri, 16 Dec 2022 16:53:26 -0500 Subject: [PATCH 1/4] getCategory getter passes --- cypress/unit/store-getter-getCategories.cy.js | 19 +++++++++++++++++++ store/index-refactor.js | 11 ++++++++++- 2 files changed, 29 insertions(+), 1 deletion(-) create mode 100644 cypress/unit/store-getter-getCategories.cy.js diff --git a/cypress/unit/store-getter-getCategories.cy.js b/cypress/unit/store-getter-getCategories.cy.js new file mode 100644 index 00000000..d4391cba --- /dev/null +++ b/cypress/unit/store-getter-getCategories.cy.js @@ -0,0 +1,19 @@ +import { getters } from "~/store/index-refactor"; + +describe('getCategories', () => { + it('returns an array of existing categories', () => { + const state = { + categories : { + category1: {}, + category2: {}, + myCatIsCool: {} + } + }; + const result = getters.getCategories(state); + expect(result).to.be.deep.equal([ + "category1", + "category2", + "myCatIsCool" + ]); + }); +}); diff --git a/store/index-refactor.js b/store/index-refactor.js index 13c461dd..a753e05e 100644 --- a/store/index-refactor.js +++ b/store/index-refactor.js @@ -2,11 +2,20 @@ import Vue from "vue"; export const state = () => ({ - columnToCategoryMapping: {} + columnToCategoryMapping: {}, + categories: {} }); export const getters = { + getCategories (p_state) { + return [ + "category1", + "category2", + "myCatIsCool" + ]; + } + }; From 359b9c0831479596bf508df83bcc621d7b0060c9 Mon Sep 17 00:00:00 2001 From: Sebastian Urchs Date: Fri, 16 Dec 2022 16:55:12 -0500 Subject: [PATCH 2/4] getCategory getter works --- store/index-refactor.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/store/index-refactor.js b/store/index-refactor.js index a753e05e..a1d18ab6 100644 --- a/store/index-refactor.js +++ b/store/index-refactor.js @@ -9,11 +9,7 @@ export const state = () => ({ export const getters = { getCategories (p_state) { - return [ - "category1", - "category2", - "myCatIsCool" - ]; + return Object.keys(p_state.categories); } }; From 4012d38a9850bc1a72ae3d46011382a8b31e411e Mon Sep 17 00:00:00 2001 From: Sebastian Urchs Date: Fri, 16 Dec 2022 17:03:06 -0500 Subject: [PATCH 3/4] Refactor category-select-table to use getCategory getter --- components/category-select-table.vue | 7 ++++--- cypress/component/category-select-table.cy.js | 11 ++++------- 2 files changed, 8 insertions(+), 10 deletions(-) diff --git a/components/category-select-table.vue b/components/category-select-table.vue index 8bae36f6..f61b9f47 100644 --- a/components/category-select-table.vue +++ b/components/category-select-table.vue @@ -2,7 +2,6 @@
- @@ -30,6 +29,8 @@ export default { + name: "CategorySelectTable", + props: { selectedCategory: { type: String, required: true } @@ -39,14 +40,14 @@ ...mapGetters([ - "categories", + "getCategories", "categoryClasses" ]), categoryTable() { // Return a list of dicts for each category in the table - return this.categories.map((name) => ({ category: name })); + return this.getCategories.map((name) => ({ category: name })); } }, diff --git a/cypress/component/category-select-table.cy.js b/cypress/component/category-select-table.cy.js index 2fc4b208..2d059fbd 100644 --- a/cypress/component/category-select-table.cy.js +++ b/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: () => { + getCategories: () => { 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.getCategories().length; index++ ) { // 2. Act cy.get("td") - .contains(state.getters.categories()[index]) + .contains(state.getters.getCategories()[index]) .click(); // 3. Assert cy.get("@onCategorySelectSpy") - .should("have.been.calledWith", { category: state.getters.categories()[index] }); + .should("have.been.calledWith", { category: state.getters.getCategories()[index] }); } }); }); \ No newline at end of file From 1b6558fe148d8a0f87992e399c27fff38b995c4b Mon Sep 17 00:00:00 2001 From: Sebastian Urchs Date: Wed, 21 Dec 2022 11:04:52 -0500 Subject: [PATCH 4/4] Change getter names to be consistent vuex getters should start with `get`. --- components/category-select-table.vue | 4 ++-- cypress/component/category-select-table.cy.js | 8 ++++---- ...y.js => store-getter-getCategoryNames.cy.js} | 6 +++--- store/index-refactor.js | 17 +++++++++-------- 4 files changed, 18 insertions(+), 17 deletions(-) rename cypress/unit/{store-getter-getCategories.cy.js => store-getter-getCategoryNames.cy.js} (70%) diff --git a/components/category-select-table.vue b/components/category-select-table.vue index f61b9f47..9ad3d263 100644 --- a/components/category-select-table.vue +++ b/components/category-select-table.vue @@ -40,14 +40,14 @@ ...mapGetters([ - "getCategories", + "getCategoryNames", "categoryClasses" ]), categoryTable() { // Return a list of dicts for each category in the table - return this.getCategories.map((name) => ({ category: name })); + return this.getCategoryNames.map((name) => ({ category: name })); } }, diff --git a/cypress/component/category-select-table.cy.js b/cypress/component/category-select-table.cy.js index 2d059fbd..1604534f 100644 --- a/cypress/component/category-select-table.cy.js +++ b/cypress/component/category-select-table.cy.js @@ -6,7 +6,7 @@ const state = { getters: { - getCategories: () => { + getCategoryNames: () => { return [ @@ -52,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.getCategories().length; index++ ) { + for ( let index = 0; index < state.getters.getCategoryNames().length; index++ ) { // 2. Act cy.get("td") - .contains(state.getters.getCategories()[index]) + .contains(state.getters.getCategoryNames()[index]) .click(); // 3. Assert cy.get("@onCategorySelectSpy") - .should("have.been.calledWith", { category: state.getters.getCategories()[index] }); + .should("have.been.calledWith", { category: state.getters.getCategoryNames()[index] }); } }); }); \ No newline at end of file diff --git a/cypress/unit/store-getter-getCategories.cy.js b/cypress/unit/store-getter-getCategoryNames.cy.js similarity index 70% rename from cypress/unit/store-getter-getCategories.cy.js rename to cypress/unit/store-getter-getCategoryNames.cy.js index d4391cba..b9b82076 100644 --- a/cypress/unit/store-getter-getCategories.cy.js +++ b/cypress/unit/store-getter-getCategoryNames.cy.js @@ -1,7 +1,7 @@ import { getters } from "~/store/index-refactor"; -describe('getCategories', () => { - it('returns an array of existing categories', () => { +describe('getCategoryNames', () => { + it('returns an array of existing category names', () => { const state = { categories : { category1: {}, @@ -9,7 +9,7 @@ describe('getCategories', () => { myCatIsCool: {} } }; - const result = getters.getCategories(state); + const result = getters.getCategoryNames(state); expect(result).to.be.deep.equal([ "category1", "category2", diff --git a/store/index-refactor.js b/store/index-refactor.js index a1d18ab6..ec4aea12 100644 --- a/store/index-refactor.js +++ b/store/index-refactor.js @@ -2,13 +2,14 @@ import Vue from "vue"; export const state = () => ({ - columnToCategoryMapping: {}, - categories: {} + categories: {}, + columnToCategoryMapping: {} + }); export const getters = { - getCategories (p_state) { + getCategoryNames (p_state) { return Object.keys(p_state.categories); } @@ -19,12 +20,12 @@ 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) {