Added tool group dropdown and assessment tool table

updated the component test
neurobagel · Oct 12, 2023 · 8fb4cd3 · 8fb4cd3
1 parent 0a37a10
commit 8fb4cd3
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 9 deletions.
diff --git a/components/category-toolgroup.vue b/components/category-toolgroup.vue
@@ -1,20 +1,47 @@
 <template>
-    <b-table
-        data-cy="assessment-column-table"
-        outlined
-        selectable
-        head-variant="dark"
-        :items="tableRows"
-        select-mode="single"
-        selected-variant=""
-        thead-class="hidden" />
+    <div>
+        <b-table
+            data-cy="assessment-column-table"
+            outlined
+            selectable
+            head-variant="dark"
+            :items="tableRows"
+            select-mode="single"
+            selected-variant=""
+            thead-class="hidden" />
+
+        <v-select
+            data-cy="toolgroup-select"
+            label="Select a tool"
+            :options="toolGroups"
+            outlined
+            @input="selectTool" />
+
+        <b-table
+            v-if="selectedTools.length > 0"
+            data-cy="assessment-tool-table"
+            outlined
+            selectable
+            head-variant="dark"
+            :items="selectedTools"
+            select-mode="single"
+            selected-variant=""
+            thead-class="hidden" />
+    </div>
 </template>
 
 <script>
 
     import { mapGetters } from 'vuex';
 
     export default {
+        data() {
+            return {
+                toolGroups: ["MOCA", "UPDRSIII", "SomeOtherThing", "AnotherThing"],
+                selectedTools: []
+            };
+
+        },
 
         computed: {
             ...mapGetters([
@@ -25,6 +52,12 @@
                     column: column
                 }));
             }
+        },
+        methods: {
+            selectTool(selectedTool) {
+                this.selectedTools.push({ tool: selectedTool});
+
+            }
         }
     };
 </script>
diff --git a/cypress/component/category-toolgroup.cy.js b/cypress/component/category-toolgroup.cy.js
@@ -79,4 +79,36 @@ describe("Tool Group component", () => {
         cy.get("[data-cy='assessment-column-table']").contains("column3");
     });
 
+    it("has a dropdown with different assessment tools", () => {
+        cy.mount(categoryToolGroup, {
+            mocks: {
+
+                $store: store
+            }
+        });
+
+        cy.get("[data-cy='toolgroup-select']").should("be.visible");
+        cy.get("[data-cy='toolgroup-select']").click();
+        // 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");
+    });
+
+    it("checks tool table functionality", () => {
+        cy.mount(categoryToolGroup, {
+            mocks: {
+                $store: store
+            }
+        });
+        cy.get("[data-cy='assessment-tool-table']").should("not.exist");
+        cy.get("[data-cy='toolgroup-select']").click();
+        cy.get("[data-cy='toolgroup-select']").type("MOCA{enter}");
+        cy.get("[data-cy='toolgroup-select']").should("contain", "MOCA");
+        cy.get("[data-cy='assessment-tool-table']").should("be.visible");
+        cy.get("[data-cy='assessment-tool-table']").contains("MOCA");
+
+
+    });
+
+
 });