From 935277b7848409f8a0d5c5af49f9564c875f28a5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Eva=20Mill=C3=A1n?= <evamillan@bitergia.com>
Date: Tue, 10 Sep 2024 12:23:21 +0200
Subject: [PATCH] [ui] Update workspace when items are added
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Deep watch for changes to update the items in
the workspace.

Signed-off-by: Eva Millán <evamillan@bitergia.com>
---
 ui/src/components/WorkSpace.vue | 18 ++++---
 ui/tests/unit/workspace.spec.js | 94 +++++++++++++++++++++++++++++++++
 2 files changed, 106 insertions(+), 6 deletions(-)
 create mode 100644 ui/tests/unit/workspace.spec.js

diff --git a/ui/src/components/WorkSpace.vue b/ui/src/components/WorkSpace.vue
index e102a78d..acda37bc 100644
--- a/ui/src/components/WorkSpace.vue
+++ b/ui/src/components/WorkSpace.vue
@@ -330,13 +330,19 @@ export default {
     },
   },
   watch: {
-    individuals(value) {
-      this.savedIndividuals = value;
+    individuals: {
+      handler(value) {
+        this.savedIndividuals = value;
+      },
+      deep: true,
     },
-    savedIndividuals(value) {
-      if (value) {
-        this.$emit("updateStore", value);
-      }
+    savedIndividuals: {
+      handler(value) {
+        if (value) {
+          this.$emit("updateStore", value);
+        }
+      },
+      deep: true,
     },
   },
 };
diff --git a/ui/tests/unit/workspace.spec.js b/ui/tests/unit/workspace.spec.js
new file mode 100644
index 00000000..1e2584d2
--- /dev/null
+++ b/ui/tests/unit/workspace.spec.js
@@ -0,0 +1,94 @@
+import { shallowMount } from "@vue/test-utils";
+import vuetify from "@/plugins/vuetify";
+import Workspace from "@/components/WorkSpace";
+
+describe("Workspace", () => {
+  test("Updates the list of individuals", async () => {
+    const wrapper = shallowMount(Workspace, {
+      global: {
+        plugins: [vuetify],
+        renderStubDefaultSlot: true
+      },
+      props: {
+        individuals: [
+          {
+            name: "John Smith",
+            uuid: "0010a5211c03c46d340ada434b9f5b5072a8d491",
+            email: "jsmith@example.com",
+            isLocked: false,
+            sources: [{
+              icon: "mdi-slack",
+              name: "slack"
+            }],
+            identities: [{
+              name: "slack",
+              identities: [{
+                source: "slack",
+                email: "jsmith@example.com"
+              }]
+            }]
+          },
+          {
+            name: "J. Smith",
+            uuid: "005b3e8599cc6f64259b7210a5380f113cfd84d7",
+            email: "jsmith@example.com",
+            isLocked: false,
+            sources: [{
+              icon: "mdi-github",
+              name: "github"
+            }],
+            identities: [{
+              name: "github",
+              identities: [{
+                source: "github",
+                email: "jsmith@example.com"
+              }]
+            }
+            ]
+          }
+        ],
+        enroll: () => {},
+        mergeItems: () => {},
+        moveItem: () => {}
+      }
+    });
+
+    expect(wrapper.html()).toContain("John Smith");
+    expect(wrapper.html()).toContain("J. Smith");
+
+    await wrapper.setProps({
+      individuals: [
+        {
+          name: "Jane Doe",
+          uuid: "00327ebd3e7ea358f198a4218b508c55e5dbd488",
+          email: "jdoe@example.com",
+          isLocked: false,
+          sources: [{
+            icon: "mdi-git",
+            name: "git"
+          }],
+          identities: [{
+            name: "git",
+            identities: [{
+              source: "git",
+              email: "jdoe@example.com"
+            }]
+          }
+          ]
+        },
+      ]
+    });
+
+    expect(wrapper.html()).toContain("Jane Doe");
+    expect(wrapper.html()).not.toContain("John Smith");
+    expect(wrapper.html()).not.toContain("J. Smith");
+
+    await wrapper.setProps({
+      individuals: []
+    });
+
+    expect(wrapper.html()).not.toContain("John Smith");
+    expect(wrapper.html()).not.toContain("J. Smith");
+    expect(wrapper.html()).not.toContain("Jane Doe");
+  });
+});