Skip to content

Commit

Permalink
Toolgroup component can handle state and store
Browse files Browse the repository at this point in the history
  • Loading branch information
@surchs
surchs committed Oct 16, 2023
1 parent 98f9c79 commit 8e22338
Show file tree
Hide file tree
Showing 2 changed files with 84 additions and 47 deletions.
28 changes: 13 additions & 15 deletions components/category-toolgroup.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,21 +7,21 @@
:options="toolTerms"
outlined
@input="selectTool"
:selectable="(option) => !selectedTools.some(el => el.tool.includes(option.label))" />
:selectable="(option) => !getSelectedTools.some(el => el.id.includes(option.id))" />
</b-col>
</b-row>
<b-row>
<b-col>
<b-table
v-if="selectedTools.length > 0"
v-if="getSelectedTools.length > 0"
data-cy="assessment-tool-table"
outlined
selectable
head-variant="dark"
:items="selectedTools"
:items="getSelectedTools"
select-mode="single"
selected-variant=""
:fields="[{ key: 'tool' }]"
:fields="[{ key: 'label' }]"
@row-selected="highlightRow"
:tbody-tr-class="styleTableRow"
thead-class="hidden" />
Expand Down Expand Up @@ -49,29 +49,24 @@
export default {
data() {
return {
selectedTools: [],
selectedTool: {
tool: null,
identifier: null
},
//Todo: populate keys using columns that are coming from the store
column2ToolMap: {
column1: null,
column2: null,
column3: null
}
};
},
computed: {
...mapGetters([
'getColumnsForCategory'
'getColumnsForCategory',
'getSelectedTools'
]),
...mapState([
"toolTerms"
"toolTerms",
"column2ToolMap"
]),
tableRows() {
return this.getColumnsForCategory('Assessment Tool').map(column => ({
Expand All @@ -85,6 +80,7 @@
"createTool"
]),
selectTool(selectedTool) {
console.log('getter says', this.getSelectedTools);
this.createTool({
identifier: selectedTool.id,
Expand All @@ -96,10 +92,12 @@
if ( 0 !== rows.length ) {
this.selectedTool = rows[0];
}
console.log('selected is', this.selectedTool);
},
styleTableRow(p_row) {
if (p_row.identifier === this.selectedTool.identifier) {
console.log('row is', p_row, 'and selected is', this.selectedTool);
if (p_row.id === this.selectedTool.id) {
return "selected-tool";
}
return "";
Expand All @@ -112,7 +110,7 @@
}
},
styleRow(p_row) {
if (this.column2ToolMap[p_row.column] === this.selectedTool.identifier) {
if (this.column2ToolMap[p_row.column] === this.selectedTool.id) {
return "selected-tool";
} else {
return "";
Expand Down
103 changes: 71 additions & 32 deletions cypress/component/category-toolgroup.cy.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,14 @@ import { getters } from "~/store";
let store;
let state;

// TODO see if we can replace this by manipulating state and passing by reference
const makeGetters =(state) => {
return {
getColumnsForCategory: getters.getColumnsForCategory(state),
getSelectedTools: getters.getSelectedTools(state)
};
};

describe("Tool Group component", () => {

beforeEach(() => {
Expand All @@ -15,6 +23,12 @@ describe("Tool Group component", () => {
column3: "Assessment Tool"
},

column2ToolMap: {
column1: 'cogatlas:MOCA',
column2: null,
column3: 'cogatlas:UPDRSIII'
},

dataDictionary: {

annotated: {
Expand Down Expand Up @@ -44,10 +58,7 @@ describe("Tool Group component", () => {

commit: () => {},
state: state,
getters: {
getColumnsForCategory: getters.getColumnsForCategory(state),
getSelectedTools: getters.getSelectedTools(state)
}
getters: makeGetters(state)
};
});

Expand Down Expand Up @@ -97,7 +108,6 @@ describe("Tool Group component", () => {
});

cy.get("[data-cy='toolgroup-select']").should("be.visible");
// For now the tool groups come from inside the component and we know they will include MOCA
cy.get("[data-cy='toolgroup-select']").type("MOCA{enter}");
cy.get("[data-cy='toolgroup-select']").should("contain", "MOCA");
});
Expand All @@ -116,38 +126,62 @@ describe("Tool Group component", () => {

});

it("if I have already made a tool, I cannot make another one ", () => {
it("when a tool is selected in the store, it appears in the tool table", () => {
store.state.toolTerms[0]['selected'] = true;
store.getters = makeGetters(store.state);
cy.mount(categoryToolGroup, {
mocks: {
$store: store
}
});
// Do it the first time
cy.get("[data-cy='toolgroup-select']").type("MOCA{enter}");
cy.get("[data-cy='toolgroup-select']").type("SomeOtherThing{enter}");
// I hope nobody asks me to explain this
cy.get("[data-cy='assessment-tool-table']")
.find("tr:contains('MOCA')")
.filter((index, element) => Cypress.$(element).text() === "MOCA")
.should("have.length", 1);

// Do it again
// The reason this is expected to fail is because the dropdown will not permit the
// user to type and enter again. Maybe we should make the assert more explicit
cy.get("[data-cy='toolgroup-select']").type("MOCA{enter}");
cy.get("[data-cy='assessment-tool-table']")
.find("tr:contains('MOCA')")
.filter((index, element) => Cypress.$(element).text() === "MOCA")
.should("have.length", 1);

cy.get("[data-cy='assessment-tool-table']").contains('MOCA');
});

it("tools in the tool-table start unselected and become styled when clicked", () => {
store.state.toolTerms[0]['selected'] = true;
store.state.toolTerms[2]['selected'] = true;
store.getters = makeGetters(store.state);
cy.mount(categoryToolGroup, {
mocks: {
$store: store
}
});

cy.get("[data-cy='assessment-tool-table']").find("tr:contains('MOCA')")
.invoke("css", "background-color").then((InitialBackgroundColor) => {
cy.get("[data-cy='assessment-tool-table']")
.find("tr:contains('MOCA')").click();
// assert that element has different color after
cy.get("[data-cy='assessment-tool-table']").find("tr:contains('MOCA')").should("not.have.css", "background-color", InitialBackgroundColor);
});
});

it("if a tool is already created, trying to create it again has no effect", () => {
store.state.toolTerms[0]['selected'] = true;
store.getters = makeGetters(store.state);

cy.spy(store, "commit").as("commitSpy");

cy.mount(categoryToolGroup, {
mocks: {
$store: store
}
});
cy.get("[data-cy='assessment-tool-table']").contains("MOCA").click();
cy.get("@commitSpy").should("not.have.been.called");

});

it("when I click on a tool the tool gets highlighted", () => {
store.state.toolTerms[0]['selected'] = true;
store.getters = makeGetters(store.state);

cy.mount(categoryToolGroup, {
mocks: {
$store: store
}
});
cy.get("[data-cy='toolgroup-select']").type("MOCA{enter}");

// Grab the element background color before beiing
cy.get("[data-cy='assessment-tool-table']").find("tr:contains('MOCA')")
Expand All @@ -159,22 +193,27 @@ describe("Tool Group component", () => {
});
});

it("when a tool is selected and I click on a column, the column gets highlighted", () => {
it("when a column is mapped to a tool and the tool gets selected, the column gets highlighted", () => {
// MOCA
store.state.toolTerms[0]['selected'] = true;
// UPDRS
store.state.toolTerms[1]['selected'] = true;
store.getters = makeGetters(store.state);

cy.mount(categoryToolGroup, {
mocks: {
$store: store
}
});
cy.get("[data-cy='toolgroup-select']").type("MOCA{enter}");
// select the first tool
// Starting out with a different tool selected
cy.get("[data-cy='assessment-tool-table']").find("tr:contains('MOCA')").click();
// Then the column gets highlighted
cy.get("[data-cy='assessment-column-table']").find("tr:contains('column1')")
cy.get("[data-cy='assessment-column-table']").find("tr:contains('column3')")
.invoke("css", "background-color").then((InitialBackgroundColor) => {
cy.get("[data-cy='assessment-column-table']")
.find("tr:contains('column1')").click();
cy.get("[data-cy='assessment-tool-table']")
// Selecting the tool my column is mapped to should change my columns styling
.find("tr:contains('UPDRSIII')").click();
// assert that element has different color after
cy.get("[data-cy='assessment-column-table']").find("tr:contains('column1')").should("not.have.css", "background-color", InitialBackgroundColor);
cy.get("[data-cy='assessment-column-table']").find("tr:contains('column3')").should("not.have.css", "background-color", InitialBackgroundColor);
});
});
});

0 comments on commit 8e22338

Please sign in to comment.