From 8fb4cd39119edcb29934181c5378e477fc12015f Mon Sep 17 00:00:00 2001
From: rmanaem <rmanaem@protonmail.ch>
Date: Thu, 12 Oct 2023 16:48:32 -0400
Subject: [PATCH] Added tool group dropdown and assessment tool table

updated the component test
---
 components/category-toolgroup.vue          | 51 ++++++++++++++++++----
 cypress/component/category-toolgroup.cy.js | 32 ++++++++++++++
 2 files changed, 74 insertions(+), 9 deletions(-)

diff --git a/components/category-toolgroup.vue b/components/category-toolgroup.vue
index 1301272a..297cc6ba 100644
--- a/components/category-toolgroup.vue
+++ b/components/category-toolgroup.vue
@@ -1,13 +1,33 @@
 <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>
@@ -15,6 +35,13 @@
     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>
\ No newline at end of file
diff --git a/cypress/component/category-toolgroup.cy.js b/cypress/component/category-toolgroup.cy.js
index f1f5556f..33bf645f 100644
--- 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");
+
+
+    });
+
+
 });