From 41648e32b7481570a7b0e53208614d428ea881e1 Mon Sep 17 00:00:00 2001
From: Danny Koppenhagen <Danny.Koppenhagen@deutschebahn.com>
Date: Sun, 19 May 2024 21:10:48 +0200
Subject: [PATCH] test: add test for properties watching

---
 .../usePropsAsObjectProperties.spec.ts        | 36 ++++++++++++++++++-
 1 file changed, 35 insertions(+), 1 deletion(-)

diff --git a/src/composables/__tests__/usePropsAsObjectProperties.spec.ts b/src/composables/__tests__/usePropsAsObjectProperties.spec.ts
index 376e2bb..67d63c8 100644
--- a/src/composables/__tests__/usePropsAsObjectProperties.spec.ts
+++ b/src/composables/__tests__/usePropsAsObjectProperties.spec.ts
@@ -1,6 +1,7 @@
 import { describe, expect, it } from "vitest";
 import usePropsAsObjectProperties from "../usePropsAsObjectProperties";
-import { isReactive, isRef, reactive, ref } from "vue";
+import { defineComponent, isReactive, isRef, reactive, ref, watch } from "vue";
+import { flushPromises, mount, shallowMount } from "@vue/test-utils";
 
 describe("usePropsAsObjectProperties", () => {
   it("should return a reactive object", () => {
@@ -29,4 +30,37 @@ describe("usePropsAsObjectProperties", () => {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     expect((properties as any).styles).toBeUndefined();
   });
+
+  it("should update returning properties when input props are changing", () => {
+    const props = reactive({ foo: "bar" });
+    const properties = usePropsAsObjectProperties(props);
+
+    props.foo = "baz";
+
+    expect(properties.foo).toEqual("baz");
+  });
+
+  it("should be possible to watch resulting properties and register changes on the input props", async () => {
+    const WrapperComponent = defineComponent({
+      props: ["foo", "style"],
+      setup(props) {
+        const watchFired = ref(false);
+        const properties = usePropsAsObjectProperties(props);
+
+        watch(properties, () => {
+          watchFired.value = true;
+        });
+        return {
+          watchFired,
+        };
+      },
+    });
+
+    const wrapper = shallowMount(WrapperComponent, {
+      propsData: { foo: "initial" },
+    });
+    await wrapper.setProps({ foo: "updated" });
+
+    expect(wrapper.vm.watchFired).toEqual(true);
+  });
 });