From 2e9754f107ad3138158e34aac476e4d920a4a2cf Mon Sep 17 00:00:00 2001
From: Jaya Singh <jaya@catalytic.com>
Date: Fri, 3 May 2024 16:05:44 -0500
Subject: [PATCH 1/9] added unit test for date time picker

---
 .../activity/tests/dateTimePicker.spec.ts     | 83 +++++++++++++++++++
 1 file changed, 83 insertions(+)
 create mode 100644 rundeckapp/grails-spa/packages/ui-trellis/src/app/components/activity/tests/dateTimePicker.spec.ts

diff --git a/rundeckapp/grails-spa/packages/ui-trellis/src/app/components/activity/tests/dateTimePicker.spec.ts b/rundeckapp/grails-spa/packages/ui-trellis/src/app/components/activity/tests/dateTimePicker.spec.ts
new file mode 100644
index 00000000000..31d7f27176a
--- /dev/null
+++ b/rundeckapp/grails-spa/packages/ui-trellis/src/app/components/activity/tests/dateTimePicker.spec.ts
@@ -0,0 +1,83 @@
+import { shallowMount } from "@vue/test-utils";
+import DateTimePicker from "../dateTimePicker.vue";
+import moment from "moment";
+
+describe("DateTimePicker.vue", () => {
+  let wrapper;
+  let now;
+
+  beforeEach(() => {
+    now = moment();
+    wrapper = shallowMount(DateTimePicker, {
+      propsData: {
+        modelValue: moment().format(),
+        dateClass: "date-class",
+        timeClass: "time-class",
+      },
+    });
+  });
+  it("sets initial data correctly", () => {
+    expect(wrapper.vm.dateString).toBe(now.format("YYYY-MM-DD"));
+    expect(wrapper.vm.time).toBeInstanceOf(Date);
+  });
+
+  // it("emits update:modelValue when time changes", async () => {
+  //   const newTime = new Date();
+  //   const newTimeFormatted = moment(newTime).format();
+  //   await wrapper.setData({ time: newTime });
+  //
+  //   expect(wrapper.emitted("update:modelValue")).toBeTruthy();
+  //   expect(wrapper.emitted("update:modelValue")[0]).toEqual([newTimeFormatted]);
+  // });
+  it("renders date-picker and time-picker", () => {
+    expect(wrapper.find(".bs-date-picker").exists()).toBe(true);
+    expect(wrapper.find(".time-class").exists()).toBe(true);
+  });
+
+  it("sets initial data correctly", () => {
+    expect(wrapper.vm.dateString).toBe(moment().format("YYYY-MM-DD"));
+    expect(wrapper.vm.time).toBeInstanceOf(Date);
+  });
+
+  it("emits update:modelValue when time changes", async () => {
+    const newTime = new Date();
+    await wrapper.setData({ time: newTime });
+
+    expect(wrapper.emitted("update:modelValue")).toBeTruthy();
+    expect(wrapper.emitted("update:modelValue")[0]).toEqual([
+      moment(newTime).format(),
+    ]);
+  });
+
+  it("updates time and dateString when modelValue changes", async () => {
+    const newModelValue = moment().add(1, "days").format();
+    await wrapper.setProps({ modelValue: newModelValue });
+
+    expect(wrapper.vm.dateString).toBe(
+      moment(newModelValue).format("YYYY-MM-DD"),
+    );
+    expect(wrapper.vm.time).toEqual(moment(newModelValue).toDate());
+  });
+  it("recalculates date when dateString changes", async () => {
+    const newDateString = moment().add(1, "days").format("YYYY-MM-DD");
+    await wrapper.setData({ dateString: newDateString });
+
+    expect(moment(wrapper.vm.time).format("YYYY-MM-DD")).toBe(newDateString);
+  });
+
+  it("sets time and dateString from modelValue when modelValue changes", async () => {
+    const newModelValue = moment().add(1, "days").format();
+    await wrapper.setProps({ modelValue: newModelValue });
+
+    expect(wrapper.vm.time).toEqual(moment(newModelValue).toDate());
+    expect(wrapper.vm.dateString).toBe(
+      moment(newModelValue).format("YYYY-MM-DD"),
+    );
+  });
+  it("binds v-model and class correctly to date-picker and time-picker", () => {
+    expect(typeof wrapper.vm.dateString).toBe("string");
+    expect(wrapper.vm.time).toBeInstanceOf(Date);
+    expect(wrapper.vm.dateClass).toBe("date-class");
+    expect(wrapper.vm.timeClass).toBe("time-class");
+  });
+});

From d735221c5b314fd51f4f940a5aa41e49ed6db73e Mon Sep 17 00:00:00 2001
From: Jaya Singh <jaya@catalytic.com>
Date: Mon, 13 May 2024 18:16:20 -0500
Subject: [PATCH 2/9] Refactor: Clean up DateTimePicker tests and add new cases

---
 .../activity/tests/dateTimePicker.spec.ts     | 162 +++++++++++++-----
 1 file changed, 121 insertions(+), 41 deletions(-)

diff --git a/rundeckapp/grails-spa/packages/ui-trellis/src/app/components/activity/tests/dateTimePicker.spec.ts b/rundeckapp/grails-spa/packages/ui-trellis/src/app/components/activity/tests/dateTimePicker.spec.ts
index 31d7f27176a..78193238d0a 100644
--- a/rundeckapp/grails-spa/packages/ui-trellis/src/app/components/activity/tests/dateTimePicker.spec.ts
+++ b/rundeckapp/grails-spa/packages/ui-trellis/src/app/components/activity/tests/dateTimePicker.spec.ts
@@ -1,83 +1,163 @@
-import { shallowMount } from "@vue/test-utils";
+import { mount } from "@vue/test-utils";
 import DateTimePicker from "../dateTimePicker.vue";
 import moment from "moment";
 
+const mountDateTimePicker = async (props = {}) => {
+  return mount(DateTimePicker, {
+    props: {
+      modelValue: moment().format(),
+      dateClass: "date-class",
+      timeClass: "time-class",
+      ...props,
+    },
+    global: {
+      stubs: {
+        "date-picker": true,
+        "time-picker": true,
+      },
+    },
+  });
+};
+
 describe("DateTimePicker.vue", () => {
-  let wrapper;
   let now;
 
   beforeEach(() => {
     now = moment();
-    wrapper = shallowMount(DateTimePicker, {
-      propsData: {
-        modelValue: moment().format(),
-        dateClass: "date-class",
-        timeClass: "time-class",
-      },
-    });
   });
-  it("sets initial data correctly", () => {
-    expect(wrapper.vm.dateString).toBe(now.format("YYYY-MM-DD"));
-    expect(wrapper.vm.time).toBeInstanceOf(Date);
+  afterEach(() => {
+    jest.clearAllMocks();
   });
 
-  // it("emits update:modelValue when time changes", async () => {
-  //   const newTime = new Date();
-  //   const newTimeFormatted = moment(newTime).format();
-  //   await wrapper.setData({ time: newTime });
-  //
-  //   expect(wrapper.emitted("update:modelValue")).toBeTruthy();
-  //   expect(wrapper.emitted("update:modelValue")[0]).toEqual([newTimeFormatted]);
-  // });
-  it("renders date-picker and time-picker", () => {
-    expect(wrapper.find(".bs-date-picker").exists()).toBe(true);
-    expect(wrapper.find(".time-class").exists()).toBe(true);
-  });
-
-  it("sets initial data correctly", () => {
-    expect(wrapper.vm.dateString).toBe(moment().format("YYYY-MM-DD"));
+  it("sets initial data correctly", async () => {
+    const wrapper = await mountDateTimePicker();
+    expect(wrapper.vm.dateString).toBe(now.format("YYYY-MM-DD"));
     expect(wrapper.vm.time).toBeInstanceOf(Date);
   });
 
   it("emits update:modelValue when time changes", async () => {
+    const wrapper = await mountDateTimePicker();
     const newTime = new Date();
+    const newTimeFormatted = moment(newTime).format();
     await wrapper.setData({ time: newTime });
 
     expect(wrapper.emitted("update:modelValue")).toBeTruthy();
-    expect(wrapper.emitted("update:modelValue")[0]).toEqual([
-      moment(newTime).format(),
-    ]);
+    expect(wrapper.emitted("update:modelValue")[0]).toEqual([newTimeFormatted]);
+  });
+
+  it("renders date-picker and time-picker", async () => {
+    const wrapper = await mountDateTimePicker();
+    expect(wrapper.find(".bs-date-picker").exists()).toBe(true);
+    expect(wrapper.find(".time-class").exists()).toBe(true);
   });
 
   it("updates time and dateString when modelValue changes", async () => {
+    const wrapper = await mountDateTimePicker();
     const newModelValue = moment().add(1, "days").format();
     await wrapper.setProps({ modelValue: newModelValue });
 
     expect(wrapper.vm.dateString).toBe(
-      moment(newModelValue).format("YYYY-MM-DD"),
+      moment(newModelValue).format("YYYY-MM-DD")
     );
     expect(wrapper.vm.time).toEqual(moment(newModelValue).toDate());
   });
+
   it("recalculates date when dateString changes", async () => {
+    const wrapper = await mountDateTimePicker();
     const newDateString = moment().add(1, "days").format("YYYY-MM-DD");
     await wrapper.setData({ dateString: newDateString });
 
     expect(moment(wrapper.vm.time).format("YYYY-MM-DD")).toBe(newDateString);
   });
 
-  it("sets time and dateString from modelValue when modelValue changes", async () => {
-    const newModelValue = moment().add(1, "days").format();
-    await wrapper.setProps({ modelValue: newModelValue });
-
-    expect(wrapper.vm.time).toEqual(moment(newModelValue).toDate());
-    expect(wrapper.vm.dateString).toBe(
-      moment(newModelValue).format("YYYY-MM-DD"),
-    );
-  });
-  it("binds v-model and class correctly to date-picker and time-picker", () => {
+  it("binds v-model and class correctly to date-picker and time-picker", async () => {
+    const wrapper = await mountDateTimePicker();
     expect(typeof wrapper.vm.dateString).toBe("string");
     expect(wrapper.vm.time).toBeInstanceOf(Date);
     expect(wrapper.vm.dateClass).toBe("date-class");
     expect(wrapper.vm.timeClass).toBe("time-class");
   });
+
+  it("applies dateClass and timeClass props correctly", async () => {
+    const wrapper = await mountDateTimePicker();
+    expect(wrapper.find(".date-class").exists()).toBe(true);
+    expect(wrapper.find(".time-class").exists()).toBe(true);
+  });
+
+  it("passes clear-btn prop correctly to date-picker", async () => {
+    const wrapper = await mountDateTimePicker();
+    const datePicker = wrapper.find(".bs-date-picker");
+
+    expect(datePicker.attributes("clear-btn")).toBe("false");
+  });
+
+  it("computes datetime correctly", async () => {
+    const wrapper = await mountDateTimePicker();
+    expect(wrapper.vm.datetime).toBe(moment(wrapper.vm.time).format());
+  });
+
+  it("applies CSS classes correctly", async () => {
+    const wrapper = await mountDateTimePicker();
+    expect(wrapper.find(".bs-date-picker").exists()).toBe(true);
+  });
+
+  it("renders date-picker and time-picker", async () => {
+    const wrapper = await mountDateTimePicker();
+    const datePicker = wrapper.findComponent({ name: "date-picker" });
+    const timePicker = wrapper.findComponent({ name: "time-picker" });
+
+    expect(datePicker.exists()).toBe(true);
+    expect(timePicker.exists()).toBe(true);
+  });
+
+  it("passes correct props to date-picker and time-picker", async () => {
+    const wrapper = await mountDateTimePicker();
+    const datePicker = wrapper.findComponent({ name: "date-picker" });
+    const timePicker = wrapper.findComponent({ name: "time-picker" });
+
+    expect(datePicker.attributes("modelvalue")).toBe(wrapper.vm.dateString);
+    expect(datePicker.attributes("class")).toContain(wrapper.vm.dateClass);
+    expect(datePicker.attributes("clear-btn")).toBe("false");
+
+    // Convert both values to ISO string format before comparing them
+    const receivedTime = new Date(
+      timePicker.attributes("modelvalue")
+    ).toISOString();
+    const expectedTime = new Date(wrapper.vm.time).toISOString();
+
+    expect(receivedTime).toBe(expectedTime);
+    expect(timePicker.attributes("class")).toContain(wrapper.vm.timeClass);
+  });
+
+  it("emits update:modelValue when time changes", async () => {
+    const wrapper = await mountDateTimePicker();
+    wrapper.vm.time = new Date();
+
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.emitted("update:modelValue")).toBeTruthy();
+  });
+
+  it("recalculates date when dateString changes", async () => {
+    const wrapper = await mountDateTimePicker();
+    const originalTime = wrapper.vm.time;
+    wrapper.vm.dateString = "2022-01-01";
+
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.vm.time).not.toEqual(originalTime);
+  });
+
+  it("sets time and dateString from modelValue", async () => {
+    const wrapper = await mountDateTimePicker();
+    const newModelValue = moment().format();
+    wrapper.setProps({ modelValue: newModelValue });
+
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.vm.time).toEqual(moment(newModelValue).toDate());
+    expect(wrapper.vm.dateString).toEqual(
+      moment(newModelValue).format("YYYY-MM-DD")
+    );
+  });
 });

From 044ce2b4b8c6dabe3a4efe1df1c0aef8b44e15e2 Mon Sep 17 00:00:00 2001
From: Jaya Singh <jaya@catalytic.com>
Date: Wed, 15 May 2024 10:45:54 -0500
Subject: [PATCH 3/9] cleaned and added more tests

---
 .../components/activity/dateTimePicker.vue    | 18 ++++++-
 .../activity/tests/dateTimePicker.spec.ts     | 52 ++++++++-----------
 2 files changed, 39 insertions(+), 31 deletions(-)

diff --git a/rundeckapp/grails-spa/packages/ui-trellis/src/app/components/activity/dateTimePicker.vue b/rundeckapp/grails-spa/packages/ui-trellis/src/app/components/activity/dateTimePicker.vue
index c0e56c86e6a..3094d639687 100644
--- a/rundeckapp/grails-spa/packages/ui-trellis/src/app/components/activity/dateTimePicker.vue
+++ b/rundeckapp/grails-spa/packages/ui-trellis/src/app/components/activity/dateTimePicker.vue
@@ -5,8 +5,9 @@
       :class="dateClass"
       :clear-btn="false"
       class="bs-date-picker"
+      role="combobox"
     />
-    <time-picker v-model="time" :class="timeClass" />
+    <time-picker v-model="time" :class="timeClass" role="combobox" />
   </div>
 </template>
 <script>
@@ -14,7 +15,20 @@ import { defineComponent } from "vue";
 import moment from "moment";
 
 export default defineComponent({
-  props: ["modelValue", "dateClass", "timeClass"],
+  props: {
+    modelValue: {
+      type: [String, Date],
+      required: true,
+    },
+    dateClass: {
+      type: String,
+      default: "",
+    },
+    timeClass: {
+      type: String,
+      default: "",
+    },
+  },
   emits: ["update:modelValue"],
   data() {
     return {
diff --git a/rundeckapp/grails-spa/packages/ui-trellis/src/app/components/activity/tests/dateTimePicker.spec.ts b/rundeckapp/grails-spa/packages/ui-trellis/src/app/components/activity/tests/dateTimePicker.spec.ts
index 78193238d0a..86e77267b8d 100644
--- a/rundeckapp/grails-spa/packages/ui-trellis/src/app/components/activity/tests/dateTimePicker.spec.ts
+++ b/rundeckapp/grails-spa/packages/ui-trellis/src/app/components/activity/tests/dateTimePicker.spec.ts
@@ -34,21 +34,17 @@ describe("DateTimePicker.vue", () => {
     expect(wrapper.vm.dateString).toBe(now.format("YYYY-MM-DD"));
     expect(wrapper.vm.time).toBeInstanceOf(Date);
   });
-
   it("emits update:modelValue when time changes", async () => {
     const wrapper = await mountDateTimePicker();
     const newTime = new Date();
     const newTimeFormatted = moment(newTime).format();
     await wrapper.setData({ time: newTime });
 
-    expect(wrapper.emitted("update:modelValue")).toBeTruthy();
-    expect(wrapper.emitted("update:modelValue")[0]).toEqual([newTimeFormatted]);
-  });
-
-  it("renders date-picker and time-picker", async () => {
-    const wrapper = await mountDateTimePicker();
-    expect(wrapper.find(".bs-date-picker").exists()).toBe(true);
-    expect(wrapper.find(".time-class").exists()).toBe(true);
+    const emitted = wrapper.emitted("update:modelValue");
+    expect(emitted).toBeTruthy();
+    if (emitted) {
+      expect(emitted[0]).toEqual([newTimeFormatted]);
+    }
   });
 
   it("updates time and dateString when modelValue changes", async () => {
@@ -110,7 +106,7 @@ describe("DateTimePicker.vue", () => {
     expect(timePicker.exists()).toBe(true);
   });
 
-  it("passes correct props to date-picker and time-picker", async () => {
+  it("sets correct attributes on date-picker and time-picker", async () => {
     const wrapper = await mountDateTimePicker();
     const datePicker = wrapper.findComponent({ name: "date-picker" });
     const timePicker = wrapper.findComponent({ name: "time-picker" });
@@ -129,25 +125,6 @@ describe("DateTimePicker.vue", () => {
     expect(timePicker.attributes("class")).toContain(wrapper.vm.timeClass);
   });
 
-  it("emits update:modelValue when time changes", async () => {
-    const wrapper = await mountDateTimePicker();
-    wrapper.vm.time = new Date();
-
-    await wrapper.vm.$nextTick();
-
-    expect(wrapper.emitted("update:modelValue")).toBeTruthy();
-  });
-
-  it("recalculates date when dateString changes", async () => {
-    const wrapper = await mountDateTimePicker();
-    const originalTime = wrapper.vm.time;
-    wrapper.vm.dateString = "2022-01-01";
-
-    await wrapper.vm.$nextTick();
-
-    expect(wrapper.vm.time).not.toEqual(originalTime);
-  });
-
   it("sets time and dateString from modelValue", async () => {
     const wrapper = await mountDateTimePicker();
     const newModelValue = moment().format();
@@ -160,4 +137,21 @@ describe("DateTimePicker.vue", () => {
       moment(newModelValue).format("YYYY-MM-DD")
     );
   });
+
+  it("handles edge cases", async () => {
+    const leapYear = "2024-02-29";
+    const wrapper = await mountDateTimePicker({ modelValue: leapYear });
+    // Check that the component correctly handles leap years
+    expect(wrapper.vm.dateString).toBe(leapYear);
+    expect(wrapper.vm.time).toBeInstanceOf(Date);
+  });
+
+  it("is accessible", async () => {
+    const wrapper = await mountDateTimePicker();
+    // Check that all interactive elements have appropriate ARIA roles and labels
+    const datePicker = wrapper.findComponent({ name: "date-picker" });
+    const timePicker = wrapper.findComponent({ name: "time-picker" });
+    expect(datePicker.attributes("role")).toBe("combobox");
+    expect(timePicker.attributes("role")).toBe("combobox");
+  });
 });

From 3edbf988f9ee12cc2b5c81c39ba05b9ca496e68f Mon Sep 17 00:00:00 2001
From: Jaya Singh <jaya@catalytic.com>
Date: Sat, 18 May 2024 13:35:13 -0500
Subject: [PATCH 4/9] Refactored test

---
 .../activity/tests/dateTimePicker.spec.ts     | 74 +++++--------------
 1 file changed, 20 insertions(+), 54 deletions(-)

diff --git a/rundeckapp/grails-spa/packages/ui-trellis/src/app/components/activity/tests/dateTimePicker.spec.ts b/rundeckapp/grails-spa/packages/ui-trellis/src/app/components/activity/tests/dateTimePicker.spec.ts
index 86e77267b8d..2809e18f121 100644
--- a/rundeckapp/grails-spa/packages/ui-trellis/src/app/components/activity/tests/dateTimePicker.spec.ts
+++ b/rundeckapp/grails-spa/packages/ui-trellis/src/app/components/activity/tests/dateTimePicker.spec.ts
@@ -1,7 +1,6 @@
 import { mount } from "@vue/test-utils";
 import DateTimePicker from "../dateTimePicker.vue";
 import moment from "moment";
-
 const mountDateTimePicker = async (props = {}) => {
   return mount(DateTimePicker, {
     props: {
@@ -18,17 +17,14 @@ const mountDateTimePicker = async (props = {}) => {
     },
   });
 };
-
 describe("DateTimePicker.vue", () => {
   let now;
-
   beforeEach(() => {
     now = moment();
   });
   afterEach(() => {
     jest.clearAllMocks();
   });
-
   it("sets initial data correctly", async () => {
     const wrapper = await mountDateTimePicker();
     expect(wrapper.vm.dateString).toBe(now.format("YYYY-MM-DD"));
@@ -39,33 +35,27 @@ describe("DateTimePicker.vue", () => {
     const newTime = new Date();
     const newTimeFormatted = moment(newTime).format();
     await wrapper.setData({ time: newTime });
-
     const emitted = wrapper.emitted("update:modelValue");
     expect(emitted).toBeTruthy();
     if (emitted) {
       expect(emitted[0]).toEqual([newTimeFormatted]);
     }
   });
-
   it("updates time and dateString when modelValue changes", async () => {
     const wrapper = await mountDateTimePicker();
     const newModelValue = moment().add(1, "days").format();
     await wrapper.setProps({ modelValue: newModelValue });
-
     expect(wrapper.vm.dateString).toBe(
       moment(newModelValue).format("YYYY-MM-DD")
     );
     expect(wrapper.vm.time).toEqual(moment(newModelValue).toDate());
   });
-
   it("recalculates date when dateString changes", async () => {
     const wrapper = await mountDateTimePicker();
     const newDateString = moment().add(1, "days").format("YYYY-MM-DD");
     await wrapper.setData({ dateString: newDateString });
-
     expect(moment(wrapper.vm.time).format("YYYY-MM-DD")).toBe(newDateString);
   });
-
   it("binds v-model and class correctly to date-picker and time-picker", async () => {
     const wrapper = await mountDateTimePicker();
     expect(typeof wrapper.vm.dateString).toBe("string");
@@ -73,71 +63,43 @@ describe("DateTimePicker.vue", () => {
     expect(wrapper.vm.dateClass).toBe("date-class");
     expect(wrapper.vm.timeClass).toBe("time-class");
   });
-
-  it("applies dateClass and timeClass props correctly", async () => {
+  it("applies CSS classes and props correctly", async () => {
     const wrapper = await mountDateTimePicker();
     expect(wrapper.find(".date-class").exists()).toBe(true);
     expect(wrapper.find(".time-class").exists()).toBe(true);
-  });
-
-  it("passes clear-btn prop correctly to date-picker", async () => {
-    const wrapper = await mountDateTimePicker();
-    const datePicker = wrapper.find(".bs-date-picker");
-
-    expect(datePicker.attributes("clear-btn")).toBe("false");
-  });
-
-  it("computes datetime correctly", async () => {
-    const wrapper = await mountDateTimePicker();
-    expect(wrapper.vm.datetime).toBe(moment(wrapper.vm.time).format());
-  });
-
-  it("applies CSS classes correctly", async () => {
-    const wrapper = await mountDateTimePicker();
     expect(wrapper.find(".bs-date-picker").exists()).toBe(true);
   });
-
-  it("renders date-picker and time-picker", async () => {
+  it("sets correct attributes on date-picker", async () => {
     const wrapper = await mountDateTimePicker();
     const datePicker = wrapper.findComponent({ name: "date-picker" });
-    const timePicker = wrapper.findComponent({ name: "time-picker" });
-
-    expect(datePicker.exists()).toBe(true);
-    expect(timePicker.exists()).toBe(true);
-  });
-
-  it("sets correct attributes on date-picker and time-picker", async () => {
-    const wrapper = await mountDateTimePicker();
-    const datePicker = wrapper.findComponent({ name: "date-picker" });
-    const timePicker = wrapper.findComponent({ name: "time-picker" });
-
     expect(datePicker.attributes("modelvalue")).toBe(wrapper.vm.dateString);
     expect(datePicker.attributes("class")).toContain(wrapper.vm.dateClass);
     expect(datePicker.attributes("clear-btn")).toBe("false");
-
+  });
+  it("sets correct attributes on time-picker", async () => {
+    const wrapper = await mountDateTimePicker();
+    const timePicker = wrapper.findComponent({ name: "time-picker" });
     // Convert both values to ISO string format before comparing them
     const receivedTime = new Date(
       timePicker.attributes("modelvalue")
     ).toISOString();
     const expectedTime = new Date(wrapper.vm.time).toISOString();
-
     expect(receivedTime).toBe(expectedTime);
     expect(timePicker.attributes("class")).toContain(wrapper.vm.timeClass);
   });
-
-  it("sets time and dateString from modelValue", async () => {
+  it("sets and updates modelValue correctly", async () => {
     const wrapper = await mountDateTimePicker();
-    const newModelValue = moment().format();
-    wrapper.setProps({ modelValue: newModelValue });
-
-    await wrapper.vm.$nextTick();
-
-    expect(wrapper.vm.time).toEqual(moment(newModelValue).toDate());
-    expect(wrapper.vm.dateString).toEqual(
+    const newModelValue = moment().add(1, "days").format();
+    await wrapper.setProps({ modelValue: newModelValue });
+    expect(wrapper.vm.dateString).toBe(
       moment(newModelValue).format("YYYY-MM-DD")
     );
+    expect(wrapper.vm.time).toEqual(moment(newModelValue).toDate());
+  });
+  it("computes datetime correctly", async () => {
+    const wrapper = await mountDateTimePicker();
+    expect(wrapper.vm.datetime).toBe(moment(wrapper.vm.time).format());
   });
-
   it("handles edge cases", async () => {
     const leapYear = "2024-02-29";
     const wrapper = await mountDateTimePicker({ modelValue: leapYear });
@@ -145,7 +107,6 @@ describe("DateTimePicker.vue", () => {
     expect(wrapper.vm.dateString).toBe(leapYear);
     expect(wrapper.vm.time).toBeInstanceOf(Date);
   });
-
   it("is accessible", async () => {
     const wrapper = await mountDateTimePicker();
     // Check that all interactive elements have appropriate ARIA roles and labels
@@ -154,4 +115,9 @@ describe("DateTimePicker.vue", () => {
     expect(datePicker.attributes("role")).toBe("combobox");
     expect(timePicker.attributes("role")).toBe("combobox");
   });
+  it("renders correctly when mounted", async () => {
+    const wrapper = await mountDateTimePicker();
+    expect(wrapper.vm.dateString).toBe(moment().format("YYYY-MM-DD"));
+    expect(wrapper.vm.time).toBeInstanceOf(Date);
+  });
 });

From a8fde582bee522bf10dfbda1f8a4a9d837b71f92 Mon Sep 17 00:00:00 2001
From: Jaya Singh <jaya@catalytic.com>
Date: Fri, 31 May 2024 16:18:37 -0500
Subject: [PATCH 5/9] fixed test according to feedback

---
 .../activity/tests/dateTimePicker.spec.ts     | 49 ++++++++++---------
 1 file changed, 25 insertions(+), 24 deletions(-)

diff --git a/rundeckapp/grails-spa/packages/ui-trellis/src/app/components/activity/tests/dateTimePicker.spec.ts b/rundeckapp/grails-spa/packages/ui-trellis/src/app/components/activity/tests/dateTimePicker.spec.ts
index 2809e18f121..369ae87c0ba 100644
--- a/rundeckapp/grails-spa/packages/ui-trellis/src/app/components/activity/tests/dateTimePicker.spec.ts
+++ b/rundeckapp/grails-spa/packages/ui-trellis/src/app/components/activity/tests/dateTimePicker.spec.ts
@@ -18,18 +18,14 @@ const mountDateTimePicker = async (props = {}) => {
   });
 };
 describe("DateTimePicker.vue", () => {
-  let now;
-  beforeEach(() => {
-    now = moment();
-  });
+  // let now: moment.Moment;
+  // beforeEach(() => {
+  //   now = moment();
+  // });
   afterEach(() => {
     jest.clearAllMocks();
   });
-  it("sets initial data correctly", async () => {
-    const wrapper = await mountDateTimePicker();
-    expect(wrapper.vm.dateString).toBe(now.format("YYYY-MM-DD"));
-    expect(wrapper.vm.time).toBeInstanceOf(Date);
-  });
+
   it("emits update:modelValue when time changes", async () => {
     const wrapper = await mountDateTimePicker();
     const newTime = new Date();
@@ -58,17 +54,16 @@ describe("DateTimePicker.vue", () => {
   });
   it("binds v-model and class correctly to date-picker and time-picker", async () => {
     const wrapper = await mountDateTimePicker();
-    expect(typeof wrapper.vm.dateString).toBe("string");
-    expect(wrapper.vm.time).toBeInstanceOf(Date);
-    expect(wrapper.vm.dateClass).toBe("date-class");
-    expect(wrapper.vm.timeClass).toBe("time-class");
-  });
-  it("applies CSS classes and props correctly", async () => {
-    const wrapper = await mountDateTimePicker();
-    expect(wrapper.find(".date-class").exists()).toBe(true);
-    expect(wrapper.find(".time-class").exists()).toBe(true);
-    expect(wrapper.find(".bs-date-picker").exists()).toBe(true);
+    const datePicker = wrapper.findComponent({ name: "date-picker" });
+    const timePicker = wrapper.findComponent({ name: "time-picker" });
+  
+    expect(datePicker.attributes("modelvalue")).toBe(wrapper.vm.dateString);
+    // Convert the received value to ISO string format before comparing
+    expect(new Date(timePicker.attributes("modelvalue")).toISOString()).toBe(wrapper.vm.time.toISOString());
+    expect(datePicker.attributes("class")).toContain(wrapper.vm.dateClass);
+    expect(timePicker.attributes("class")).toContain(wrapper.vm.timeClass);
   });
+  
   it("sets correct attributes on date-picker", async () => {
     const wrapper = await mountDateTimePicker();
     const datePicker = wrapper.findComponent({ name: "date-picker" });
@@ -87,6 +82,17 @@ describe("DateTimePicker.vue", () => {
     expect(receivedTime).toBe(expectedTime);
     expect(timePicker.attributes("class")).toContain(wrapper.vm.timeClass);
   });
+  it("emits update:modelValue when time changes", async () => {
+    const wrapper = await mountDateTimePicker();
+    const newTime = new Date();
+    const newTimeFormatted = moment(newTime).format();
+    await wrapper.setData({ time: newTime });
+    const emitted = wrapper.emitted("update:modelValue");
+    expect(emitted).toBeTruthy();
+    if (emitted) {
+      expect(emitted[0]).toEqual([newTimeFormatted]);
+    }
+  });
   it("sets and updates modelValue correctly", async () => {
     const wrapper = await mountDateTimePicker();
     const newModelValue = moment().add(1, "days").format();
@@ -115,9 +121,4 @@ describe("DateTimePicker.vue", () => {
     expect(datePicker.attributes("role")).toBe("combobox");
     expect(timePicker.attributes("role")).toBe("combobox");
   });
-  it("renders correctly when mounted", async () => {
-    const wrapper = await mountDateTimePicker();
-    expect(wrapper.vm.dateString).toBe(moment().format("YYYY-MM-DD"));
-    expect(wrapper.vm.time).toBeInstanceOf(Date);
-  });
 });

From ae9af35d592a10f439d5e532da3418c3eaa6e8dc Mon Sep 17 00:00:00 2001
From: Jaya Singh <jaya@catalytic.com>
Date: Fri, 31 May 2024 16:53:07 -0500
Subject: [PATCH 6/9] added few tests in one test

---
 .../activity/tests/dateTimePicker.spec.ts     | 40 ++++++++++---------
 1 file changed, 22 insertions(+), 18 deletions(-)

diff --git a/rundeckapp/grails-spa/packages/ui-trellis/src/app/components/activity/tests/dateTimePicker.spec.ts b/rundeckapp/grails-spa/packages/ui-trellis/src/app/components/activity/tests/dateTimePicker.spec.ts
index 369ae87c0ba..f5a53a5814a 100644
--- a/rundeckapp/grails-spa/packages/ui-trellis/src/app/components/activity/tests/dateTimePicker.spec.ts
+++ b/rundeckapp/grails-spa/packages/ui-trellis/src/app/components/activity/tests/dateTimePicker.spec.ts
@@ -64,24 +64,7 @@ describe("DateTimePicker.vue", () => {
     expect(timePicker.attributes("class")).toContain(wrapper.vm.timeClass);
   });
   
-  it("sets correct attributes on date-picker", async () => {
-    const wrapper = await mountDateTimePicker();
-    const datePicker = wrapper.findComponent({ name: "date-picker" });
-    expect(datePicker.attributes("modelvalue")).toBe(wrapper.vm.dateString);
-    expect(datePicker.attributes("class")).toContain(wrapper.vm.dateClass);
-    expect(datePicker.attributes("clear-btn")).toBe("false");
-  });
-  it("sets correct attributes on time-picker", async () => {
-    const wrapper = await mountDateTimePicker();
-    const timePicker = wrapper.findComponent({ name: "time-picker" });
-    // Convert both values to ISO string format before comparing them
-    const receivedTime = new Date(
-      timePicker.attributes("modelvalue")
-    ).toISOString();
-    const expectedTime = new Date(wrapper.vm.time).toISOString();
-    expect(receivedTime).toBe(expectedTime);
-    expect(timePicker.attributes("class")).toContain(wrapper.vm.timeClass);
-  });
+  
   it("emits update:modelValue when time changes", async () => {
     const wrapper = await mountDateTimePicker();
     const newTime = new Date();
@@ -121,4 +104,25 @@ describe("DateTimePicker.vue", () => {
     expect(datePicker.attributes("role")).toBe("combobox");
     expect(timePicker.attributes("role")).toBe("combobox");
   });
+  it("binds v-model, class correctly and sets correct attributes on date-picker and time-picker", async () => {
+    const wrapper = await mountDateTimePicker();
+    const datePicker = wrapper.findComponent({ name: "date-picker" });
+    const timePicker = wrapper.findComponent({ name: "time-picker" });
+  
+    // Check v-model and class for date-picker
+    expect(datePicker.attributes("modelvalue")).toBe(wrapper.vm.dateString);
+    expect(datePicker.attributes("class")).toContain(wrapper.vm.dateClass);
+    expect(datePicker.attributes("clear-btn")).toBe("false");
+  
+    // Check v-model and class for time-picker
+    const receivedTime = new Date(timePicker.attributes("modelvalue")).toISOString();
+    const expectedTime = new Date(wrapper.vm.time).toISOString();
+    expect(receivedTime).toBe(expectedTime);
+    expect(timePicker.attributes("class")).toContain(wrapper.vm.timeClass);
+  
+    // Check CSS classes and props
+    expect(wrapper.find(".date-class").exists()).toBe(true);
+    expect(wrapper.find(".time-class").exists()).toBe(true);
+    expect(wrapper.find(".bs-date-picker").exists()).toBe(true);
+  });
 });

From 1d27117bac6b700a3832f74f0ec1798b9d24601e Mon Sep 17 00:00:00 2001
From: Jaya Singh <jaya@catalytic.com>
Date: Wed, 5 Jun 2024 09:53:56 -0500
Subject: [PATCH 7/9] Follow feedback and improve tests

---
 .../activity/tests/dateTimePicker.spec.ts     | 75 ++++---------------
 1 file changed, 16 insertions(+), 59 deletions(-)

diff --git a/rundeckapp/grails-spa/packages/ui-trellis/src/app/components/activity/tests/dateTimePicker.spec.ts b/rundeckapp/grails-spa/packages/ui-trellis/src/app/components/activity/tests/dateTimePicker.spec.ts
index f5a53a5814a..3776f626da8 100644
--- a/rundeckapp/grails-spa/packages/ui-trellis/src/app/components/activity/tests/dateTimePicker.spec.ts
+++ b/rundeckapp/grails-spa/packages/ui-trellis/src/app/components/activity/tests/dateTimePicker.spec.ts
@@ -18,24 +18,17 @@ const mountDateTimePicker = async (props = {}) => {
   });
 };
 describe("DateTimePicker.vue", () => {
-  // let now: moment.Moment;
-  // beforeEach(() => {
-  //   now = moment();
-  // });
   afterEach(() => {
     jest.clearAllMocks();
   });
-
   it("emits update:modelValue when time changes", async () => {
     const wrapper = await mountDateTimePicker();
     const newTime = new Date();
     const newTimeFormatted = moment(newTime).format();
-    await wrapper.setData({ time: newTime });
+    const timePicker = wrapper.findComponent({ name: "time-picker" });
+    timePicker.vm.$emit("update:modelValue", newTime);
     const emitted = wrapper.emitted("update:modelValue");
-    expect(emitted).toBeTruthy();
-    if (emitted) {
-      expect(emitted[0]).toEqual([newTimeFormatted]);
-    }
+    expect(emitted[0]).toEqual([newTimeFormatted]);
   });
   it("updates time and dateString when modelValue changes", async () => {
     const wrapper = await mountDateTimePicker();
@@ -52,38 +45,25 @@ describe("DateTimePicker.vue", () => {
     await wrapper.setData({ dateString: newDateString });
     expect(moment(wrapper.vm.time).format("YYYY-MM-DD")).toBe(newDateString);
   });
-  it("binds v-model and class correctly to date-picker and time-picker", async () => {
+  it("binds v-model, class correctly and sets correct attributes on date-picker and time-picker", async () => {
     const wrapper = await mountDateTimePicker();
     const datePicker = wrapper.findComponent({ name: "date-picker" });
     const timePicker = wrapper.findComponent({ name: "time-picker" });
-  
+    // Check v-model and class for date-picker
     expect(datePicker.attributes("modelvalue")).toBe(wrapper.vm.dateString);
-    // Convert the received value to ISO string format before comparing
-    expect(new Date(timePicker.attributes("modelvalue")).toISOString()).toBe(wrapper.vm.time.toISOString());
     expect(datePicker.attributes("class")).toContain(wrapper.vm.dateClass);
+    expect(datePicker.attributes("clear-btn")).toBe("false");
+    // Check v-model and class for time-picker
+    const receivedTime = new Date(
+      timePicker.attributes("modelvalue")
+    ).toISOString();
+    const expectedTime = new Date(wrapper.vm.time).toISOString();
+    expect(receivedTime).toBe(expectedTime);
     expect(timePicker.attributes("class")).toContain(wrapper.vm.timeClass);
-  });
-  
-  
-  it("emits update:modelValue when time changes", async () => {
-    const wrapper = await mountDateTimePicker();
-    const newTime = new Date();
-    const newTimeFormatted = moment(newTime).format();
-    await wrapper.setData({ time: newTime });
-    const emitted = wrapper.emitted("update:modelValue");
-    expect(emitted).toBeTruthy();
-    if (emitted) {
-      expect(emitted[0]).toEqual([newTimeFormatted]);
-    }
-  });
-  it("sets and updates modelValue correctly", async () => {
-    const wrapper = await mountDateTimePicker();
-    const newModelValue = moment().add(1, "days").format();
-    await wrapper.setProps({ modelValue: newModelValue });
-    expect(wrapper.vm.dateString).toBe(
-      moment(newModelValue).format("YYYY-MM-DD")
-    );
-    expect(wrapper.vm.time).toEqual(moment(newModelValue).toDate());
+    // Check CSS classes and props
+    expect(wrapper.find(".date-class").exists()).toBe(true);
+    expect(wrapper.find(".time-class").exists()).toBe(true);
+    expect(wrapper.find(".bs-date-picker").exists()).toBe(true);
   });
   it("computes datetime correctly", async () => {
     const wrapper = await mountDateTimePicker();
@@ -92,37 +72,14 @@ describe("DateTimePicker.vue", () => {
   it("handles edge cases", async () => {
     const leapYear = "2024-02-29";
     const wrapper = await mountDateTimePicker({ modelValue: leapYear });
-    // Check that the component correctly handles leap years
     expect(wrapper.vm.dateString).toBe(leapYear);
     expect(wrapper.vm.time).toBeInstanceOf(Date);
   });
   it("is accessible", async () => {
     const wrapper = await mountDateTimePicker();
-    // Check that all interactive elements have appropriate ARIA roles and labels
     const datePicker = wrapper.findComponent({ name: "date-picker" });
     const timePicker = wrapper.findComponent({ name: "time-picker" });
     expect(datePicker.attributes("role")).toBe("combobox");
     expect(timePicker.attributes("role")).toBe("combobox");
   });
-  it("binds v-model, class correctly and sets correct attributes on date-picker and time-picker", async () => {
-    const wrapper = await mountDateTimePicker();
-    const datePicker = wrapper.findComponent({ name: "date-picker" });
-    const timePicker = wrapper.findComponent({ name: "time-picker" });
-  
-    // Check v-model and class for date-picker
-    expect(datePicker.attributes("modelvalue")).toBe(wrapper.vm.dateString);
-    expect(datePicker.attributes("class")).toContain(wrapper.vm.dateClass);
-    expect(datePicker.attributes("clear-btn")).toBe("false");
-  
-    // Check v-model and class for time-picker
-    const receivedTime = new Date(timePicker.attributes("modelvalue")).toISOString();
-    const expectedTime = new Date(wrapper.vm.time).toISOString();
-    expect(receivedTime).toBe(expectedTime);
-    expect(timePicker.attributes("class")).toContain(wrapper.vm.timeClass);
-  
-    // Check CSS classes and props
-    expect(wrapper.find(".date-class").exists()).toBe(true);
-    expect(wrapper.find(".time-class").exists()).toBe(true);
-    expect(wrapper.find(".bs-date-picker").exists()).toBe(true);
-  });
 });

From 3c193834f61f628e6eb42f2943165d07edc63805 Mon Sep 17 00:00:00 2001
From: Jaya Singh <jaya@catalytic.com>
Date: Thu, 6 Jun 2024 12:29:40 -0500
Subject: [PATCH 8/9] used class for timepicker and datepicker

---
 .../app/components/activity/tests/dateTimePicker.spec.ts | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/rundeckapp/grails-spa/packages/ui-trellis/src/app/components/activity/tests/dateTimePicker.spec.ts b/rundeckapp/grails-spa/packages/ui-trellis/src/app/components/activity/tests/dateTimePicker.spec.ts
index 3776f626da8..62b34cdb12b 100644
--- a/rundeckapp/grails-spa/packages/ui-trellis/src/app/components/activity/tests/dateTimePicker.spec.ts
+++ b/rundeckapp/grails-spa/packages/ui-trellis/src/app/components/activity/tests/dateTimePicker.spec.ts
@@ -51,19 +51,14 @@ describe("DateTimePicker.vue", () => {
     const timePicker = wrapper.findComponent({ name: "time-picker" });
     // Check v-model and class for date-picker
     expect(datePicker.attributes("modelvalue")).toBe(wrapper.vm.dateString);
-    expect(datePicker.attributes("class")).toContain(wrapper.vm.dateClass);
+    expect(datePicker.attributes("class")).toContain("date-class");
     expect(datePicker.attributes("clear-btn")).toBe("false");
-    // Check v-model and class for time-picker
     const receivedTime = new Date(
       timePicker.attributes("modelvalue")
     ).toISOString();
     const expectedTime = new Date(wrapper.vm.time).toISOString();
     expect(receivedTime).toBe(expectedTime);
-    expect(timePicker.attributes("class")).toContain(wrapper.vm.timeClass);
-    // Check CSS classes and props
-    expect(wrapper.find(".date-class").exists()).toBe(true);
-    expect(wrapper.find(".time-class").exists()).toBe(true);
-    expect(wrapper.find(".bs-date-picker").exists()).toBe(true);
+    expect(timePicker.attributes("class")).toContain("time-class");
   });
   it("computes datetime correctly", async () => {
     const wrapper = await mountDateTimePicker();

From 955ad9309a505f246f80e15a3db77d5d15352c04 Mon Sep 17 00:00:00 2001
From: Jaya Singh <jaya@catalytic.com>
Date: Tue, 11 Jun 2024 10:58:01 -0500
Subject: [PATCH 9/9] fixed typescript errors

---
 .../activity/tests/dateTimePicker.spec.ts     | 28 +++++++++++++++----
 1 file changed, 23 insertions(+), 5 deletions(-)

diff --git a/rundeckapp/grails-spa/packages/ui-trellis/src/app/components/activity/tests/dateTimePicker.spec.ts b/rundeckapp/grails-spa/packages/ui-trellis/src/app/components/activity/tests/dateTimePicker.spec.ts
index 62b34cdb12b..198372f3c80 100644
--- a/rundeckapp/grails-spa/packages/ui-trellis/src/app/components/activity/tests/dateTimePicker.spec.ts
+++ b/rundeckapp/grails-spa/packages/ui-trellis/src/app/components/activity/tests/dateTimePicker.spec.ts
@@ -1,10 +1,29 @@
-import { mount } from "@vue/test-utils";
+import { mount, VueWrapper } from "@vue/test-utils";
 import DateTimePicker from "../dateTimePicker.vue";
 import moment from "moment";
-const mountDateTimePicker = async (props = {}) => {
+import { ComponentPublicInstance } from "vue";
+interface DateTimePickerProps {
+  modelValue: string | Date;
+  dateClass?: string;
+  timeClass?: string;
+}
+interface DateTimePickerInstance extends ComponentPublicInstance {
+  dateString: string;
+  time: Date;
+  datetime: string;
+  setFromValue: () => void;
+  recalcDate: () => void;
+}
+const mountDateTimePicker = async (
+  props: Partial<DateTimePickerProps> = {}
+) => {
+  const modelValue =
+    typeof props.modelValue === "string"
+      ? moment(props.modelValue).format()
+      : props.modelValue || moment().format();
   return mount(DateTimePicker, {
     props: {
-      modelValue: moment().format(),
+      modelValue,
       dateClass: "date-class",
       timeClass: "time-class",
       ...props,
@@ -15,7 +34,7 @@ const mountDateTimePicker = async (props = {}) => {
         "time-picker": true,
       },
     },
-  });
+  }) as unknown as VueWrapper<DateTimePickerInstance>;
 };
 describe("DateTimePicker.vue", () => {
   afterEach(() => {
@@ -49,7 +68,6 @@ describe("DateTimePicker.vue", () => {
     const wrapper = await mountDateTimePicker();
     const datePicker = wrapper.findComponent({ name: "date-picker" });
     const timePicker = wrapper.findComponent({ name: "time-picker" });
-    // Check v-model and class for date-picker
     expect(datePicker.attributes("modelvalue")).toBe(wrapper.vm.dateString);
     expect(datePicker.attributes("class")).toContain("date-class");
     expect(datePicker.attributes("clear-btn")).toBe("false");