From e65542c54eadc3a64ba5320e2650cfdd508131c7 Mon Sep 17 00:00:00 2001
From: Jaya Singh <jaya@catalytic.com>
Date: Fri, 3 May 2024 13:39:48 -0500
Subject: [PATCH 1/8] added unit test for date filter

---
 .../app/components/activity/dateFilter.vue    |   2 +-
 .../activity/tests/dateFilter.spec.ts         | 169 ++++++++++++++++++
 2 files changed, 170 insertions(+), 1 deletion(-)
 create mode 100644 rundeckapp/grails-spa/packages/ui-trellis/src/app/components/activity/tests/dateFilter.spec.ts

diff --git a/rundeckapp/grails-spa/packages/ui-trellis/src/app/components/activity/dateFilter.vue b/rundeckapp/grails-spa/packages/ui-trellis/src/app/components/activity/dateFilter.vue
index 86691f1ef62..1331d279381 100644
--- a/rundeckapp/grails-spa/packages/ui-trellis/src/app/components/activity/dateFilter.vue
+++ b/rundeckapp/grails-spa/packages/ui-trellis/src/app/components/activity/dateFilter.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="form-group">
-    <span class="checkbox col-sm-2">
+    <span class="checkbox col-sm-2" data-testid="checkbox-span">
       <input :id="uid" v-model="enabled" type="checkbox" class="checkbox" />
       <label :for="uid"><slot>Enabled</slot></label>
     </span>
diff --git a/rundeckapp/grails-spa/packages/ui-trellis/src/app/components/activity/tests/dateFilter.spec.ts b/rundeckapp/grails-spa/packages/ui-trellis/src/app/components/activity/tests/dateFilter.spec.ts
new file mode 100644
index 00000000000..5b602a4d76f
--- /dev/null
+++ b/rundeckapp/grails-spa/packages/ui-trellis/src/app/components/activity/tests/dateFilter.spec.ts
@@ -0,0 +1,169 @@
+import { mount } from "@vue/test-utils";
+import dateFilter from "../dateFilter.vue";
+import _ from "lodash";
+
+let idCounter = 0;
+jest.spyOn(_, "uniqueId").mockImplementation(() => `uniqueId_${idCounter++}`);
+
+let wrapper;
+const defaultProps = {
+  modelValue: { enabled: false, datetime: "" },
+};
+
+const mountDateFilter = (propsData = {}) => {
+  return mount(dateFilter, {
+    props: {
+      ...defaultProps,
+      ...propsData,
+    },
+    global: {
+      mocks: {
+        $t: (msg) => msg,
+      },
+    },
+  });
+};
+
+describe("dateFilter.vue", () => {
+  beforeEach(() => {
+    wrapper = mountDateFilter();
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+    if (wrapper) {
+      wrapper.unmount();
+    }
+  });
+
+  const findDropdown = () => wrapper.find("dropdown");
+  const findCheckbox = () => wrapper.find('input[type="checkbox"]');
+
+  it("initializes with correct data", () => {
+    expect(wrapper.vm.uid).toBeTruthy();
+    expect(wrapper.vm.enabled).toBe(false);
+    expect(wrapper.vm.datetime).toBe("");
+  });
+
+  it("renders checkbox and dropdown based on enabled property", () => {
+    expect(findCheckbox().exists()).toBe(true);
+    expect(findDropdown().exists()).toBe(false);
+
+    wrapper.unmount();
+    wrapper = mountDateFilter({ modelValue: { enabled: true, datetime: "" } });
+
+    expect(findDropdown().exists()).toBe(true);
+
+    wrapper.unmount();
+    wrapper = mountDateFilter({ modelValue: { enabled: false, datetime: "" } });
+
+    expect(findDropdown().exists()).toBe(false);
+  });
+  it("emits update:modelValue event when enabled changes", async () => {
+    await wrapper.setProps({ modelValue: { enabled: true, datetime: "" } });
+
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.emitted("update:modelValue")).toBeTruthy();
+    expect(wrapper.emitted("update:modelValue")[0]).toEqual([
+      { enabled: true, datetime: "" },
+    ]);
+  });
+
+  it("emits update:modelValue event when datetime prop changes", async () => {
+    await wrapper.setProps({
+      modelValue: { enabled: true, datetime: "2022-01-02T00:00:00" },
+    });
+
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.emitted("update:modelValue")).toBeTruthy();
+    expect(wrapper.emitted("update:modelValue")[0]).toEqual([
+      { enabled: true, datetime: "2022-01-02T00:00:00" },
+    ]);
+  });
+
+  it("updates enabled and datetime when modelValue changes", () => {
+    wrapper.unmount();
+    wrapper = mountDateFilter({
+      modelValue: { enabled: false, datetime: "2022-01-02T00:00:00" },
+    });
+
+    expect(wrapper.vm.enabled).toBe(false);
+    expect(wrapper.vm.datetime).toBe("2022-01-02T00:00:00");
+  });
+
+  it("sets uid correctly", () => {
+    expect(wrapper.vm.uid).toBe(`uniqueId_${idCounter - 1}`);
+  });
+
+  it("picker is initialized correctly", () => {
+    expect(wrapper.vm.picker).toBe(false);
+  });
+
+  it("renders checkbox and label", () => {
+    const checkboxSpan = wrapper.find('[data-testid="checkbox-span"]');
+    expect(checkboxSpan.exists()).toBe(true);
+    expect(checkboxSpan.find('input[type="checkbox"]').exists()).toBe(true);
+    expect(checkboxSpan.find("label").exists()).toBe(true);
+  });
+
+  it("does not render dropdown when checkbox is not checked", async () => {
+    await wrapper.setProps({ modelValue: { enabled: false, datetime: "" } });
+    await wrapper.vm.$nextTick();
+
+    expect(findDropdown().exists()).toBe(false);
+  });
+  it("renders dropdown when checkbox is checked", async () => {
+    await wrapper.setProps({ modelValue: { enabled: true, datetime: "" } });
+    await wrapper.vm.$nextTick();
+    const findDropdown = () => wrapper.find("dropdown");
+    expect(findDropdown().exists()).toBe(true);
+  });
+
+  it("emits update:modelValue when datetime data changes", async () => {
+    await wrapper.setProps({
+      modelValue: { enabled: false, datetime: "2022-01-02T00:00:00" },
+    });
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.emitted("update:modelValue")).toBeTruthy();
+    expect(wrapper.emitted("update:modelValue")[0]).toEqual([
+      { enabled: false, datetime: "2022-01-02T00:00:00" },
+    ]);
+  });
+  it("passes through invalid datetime inputs as-is", async () => {
+    const invalidDate = "not a date";
+    await wrapper.setProps({
+      modelValue: { enabled: true, datetime: invalidDate },
+    });
+    await wrapper.vm.$nextTick();
+    expect(wrapper.vm.datetime).toBe(invalidDate);
+    expect(wrapper.emitted("update:modelValue")).toBeTruthy();
+    expect(wrapper.emitted("update:modelValue")[0]).toEqual([
+      { enabled: true, datetime: invalidDate },
+    ]);
+  });
+  it("generates unique IDs for multiple instances", () => {
+    const firstInstance = mountDateFilter();
+    const secondInstance = mountDateFilter();
+    expect(firstInstance.vm.uid).not.toBe(secondInstance.vm.uid);
+  });
+  it("maintains correct state with rapid prop changes", async () => {
+    await wrapper.setProps({
+      modelValue: { enabled: true, datetime: "2022-01-02T00:00:00" },
+    });
+    await wrapper.vm.$nextTick();
+
+    await wrapper.setProps({
+      modelValue: { enabled: false, datetime: "2023-01-01T12:00:00" },
+    });
+    await wrapper.vm.$nextTick();
+    await wrapper.setProps({
+      modelValue: { enabled: true, datetime: "2024-01-01T12:00:00" },
+    });
+    await wrapper.vm.$nextTick();
+    expect(wrapper.vm.enabled).toBe(true);
+    expect(wrapper.vm.datetime).toBe("2024-01-01T12:00:00");
+  });
+});

From a507f71dcab3176f87faf7dcd7adcd80ec4525af Mon Sep 17 00:00:00 2001
From: Jaya Singh <jaya@catalytic.com>
Date: Tue, 14 May 2024 10:34:13 -0500
Subject: [PATCH 2/8] added new tests

---
 .../activity/tests/dateFilter.spec.ts         | 299 ++++++++++++------
 1 file changed, 198 insertions(+), 101 deletions(-)

diff --git a/rundeckapp/grails-spa/packages/ui-trellis/src/app/components/activity/tests/dateFilter.spec.ts b/rundeckapp/grails-spa/packages/ui-trellis/src/app/components/activity/tests/dateFilter.spec.ts
index 5b602a4d76f..72d559d2bf7 100644
--- a/rundeckapp/grails-spa/packages/ui-trellis/src/app/components/activity/tests/dateFilter.spec.ts
+++ b/rundeckapp/grails-spa/packages/ui-trellis/src/app/components/activity/tests/dateFilter.spec.ts
@@ -16,6 +16,9 @@ const mountDateFilter = (propsData = {}) => {
       ...defaultProps,
       ...propsData,
     },
+    slots: {
+      default: "slotContent",
+    },
     global: {
       mocks: {
         $t: (msg) => msg,
@@ -24,146 +27,240 @@ const mountDateFilter = (propsData = {}) => {
   });
 };
 
-describe("dateFilter.vue", () => {
+describe("DateFilter", () => {
   beforeEach(() => {
     wrapper = mountDateFilter();
   });
 
   afterEach(() => {
-    jest.clearAllMocks();
-    if (wrapper) {
-      wrapper.unmount();
-    }
+    wrapper.unmount();
   });
-
   const findDropdown = () => wrapper.find("dropdown");
   const findCheckbox = () => wrapper.find('input[type="checkbox"]');
 
-  it("initializes with correct data", () => {
-    expect(wrapper.vm.uid).toBeTruthy();
-    expect(wrapper.vm.enabled).toBe(false);
-    expect(wrapper.vm.datetime).toBe("");
+  describe("Initialization", () => {
+    it("initializes with correct data", () => {
+      expect(wrapper.vm.uid).toBeTruthy();
+      expect(wrapper.vm.enabled).toBe(false);
+      expect(wrapper.vm.datetime).toBe("");
+    });
+
+    it("sets uid correctly", () => {
+      expect(wrapper.vm.uid).toBe(`uniqueId_${idCounter - 1}`);
+    });
+
+    it("picker is initialized correctly", () => {
+      expect(wrapper.vm.picker).toBe(false);
+    });
+
+    it("checkbox is initially in correct state", () => {
+      expect(findCheckbox().element.checked).toBe(false);
+    });
   });
 
-  it("renders checkbox and dropdown based on enabled property", () => {
-    expect(findCheckbox().exists()).toBe(true);
-    expect(findDropdown().exists()).toBe(false);
+  describe("Rendering", () => {
+    it("renders checkbox and dropdown based on enabled property", () => {
+      expect(findCheckbox().exists()).toBe(true);
+      expect(findDropdown().exists()).toBe(false);
 
-    wrapper.unmount();
-    wrapper = mountDateFilter({ modelValue: { enabled: true, datetime: "" } });
+      wrapper.unmount();
+      wrapper = mountDateFilter({
+        modelValue: { enabled: true, datetime: "" },
+      });
 
-    expect(findDropdown().exists()).toBe(true);
+      expect(findDropdown().exists()).toBe(true);
 
-    wrapper.unmount();
-    wrapper = mountDateFilter({ modelValue: { enabled: false, datetime: "" } });
+      wrapper.unmount();
+      wrapper = mountDateFilter({
+        modelValue: { enabled: false, datetime: "" },
+      });
 
-    expect(findDropdown().exists()).toBe(false);
-  });
-  it("emits update:modelValue event when enabled changes", async () => {
-    await wrapper.setProps({ modelValue: { enabled: true, datetime: "" } });
+      expect(findDropdown().exists()).toBe(false);
+    });
 
-    await wrapper.vm.$nextTick();
+    it("renders checkbox and label", () => {
+      const checkboxSpan = wrapper.find('[data-testid="checkbox-span"]');
+      expect(checkboxSpan.exists()).toBe(true);
+      expect(checkboxSpan.find('input[type="checkbox"]').exists()).toBe(true);
+      expect(checkboxSpan.find("label").exists()).toBe(true);
+    });
+
+    it("does not render dropdown when checkbox is not checked", async () => {
+      await wrapper.setProps({ modelValue: { enabled: false, datetime: "" } });
+      await wrapper.vm.$nextTick();
+
+      expect(findDropdown().exists()).toBe(false);
+    });
 
-    expect(wrapper.emitted("update:modelValue")).toBeTruthy();
-    expect(wrapper.emitted("update:modelValue")[0]).toEqual([
-      { enabled: true, datetime: "" },
-    ]);
+    it("renders dropdown when checkbox is checked", async () => {
+      await wrapper.setProps({ modelValue: { enabled: true, datetime: "" } });
+      await wrapper.vm.$nextTick();
+      const findDropdown = () => wrapper.find("dropdown");
+      expect(findDropdown().exists()).toBe(true);
+    });
   });
 
-  it("emits update:modelValue event when datetime prop changes", async () => {
-    await wrapper.setProps({
-      modelValue: { enabled: true, datetime: "2022-01-02T00:00:00" },
+  describe("Event Emission", () => {
+    it("emits update:modelValue event when enabled changes", async () => {
+      await wrapper.setProps({ modelValue: { enabled: true, datetime: "" } });
+
+      await wrapper.vm.$nextTick();
+
+      expect(wrapper.emitted("update:modelValue")).toBeTruthy();
+      expect(wrapper.emitted("update:modelValue")[0]).toEqual([
+        { enabled: true, datetime: "" },
+      ]);
     });
 
-    await wrapper.vm.$nextTick();
+    it("emits update:modelValue event when datetime prop changes", async () => {
+      await wrapper.setProps({
+        modelValue: { enabled: true, datetime: "2022-01-02T00:00:00" },
+      });
 
-    expect(wrapper.emitted("update:modelValue")).toBeTruthy();
-    expect(wrapper.emitted("update:modelValue")[0]).toEqual([
-      { enabled: true, datetime: "2022-01-02T00:00:00" },
-    ]);
-  });
+      await wrapper.vm.$nextTick();
 
-  it("updates enabled and datetime when modelValue changes", () => {
-    wrapper.unmount();
-    wrapper = mountDateFilter({
-      modelValue: { enabled: false, datetime: "2022-01-02T00:00:00" },
+      expect(wrapper.emitted("update:modelValue")).toBeTruthy();
+      expect(wrapper.emitted("update:modelValue")[0]).toEqual([
+        { enabled: true, datetime: "2022-01-02T00:00:00" },
+      ]);
     });
 
-    expect(wrapper.vm.enabled).toBe(false);
-    expect(wrapper.vm.datetime).toBe("2022-01-02T00:00:00");
-  });
+    it("emits update:modelValue when datetime data changes", async () => {
+      await wrapper.setProps({
+        modelValue: { enabled: false, datetime: "2022-01-02T00:00:00" },
+      });
+      await wrapper.vm.$nextTick();
 
-  it("sets uid correctly", () => {
-    expect(wrapper.vm.uid).toBe(`uniqueId_${idCounter - 1}`);
+      expect(wrapper.emitted("update:modelValue")).toBeTruthy();
+      expect(wrapper.emitted("update:modelValue")[0]).toEqual([
+        { enabled: false, datetime: "2022-01-02T00:00:00" },
+      ]);
+    });
   });
 
-  it("picker is initialized correctly", () => {
-    expect(wrapper.vm.picker).toBe(false);
-  });
+  describe("Model Value Changes", () => {
+    it("updates enabled and datetime when modelValue changes", () => {
+      wrapper.unmount();
+      wrapper = mountDateFilter({
+        modelValue: { enabled: false, datetime: "2022-01-02T00:00:00" },
+      });
 
-  it("renders checkbox and label", () => {
-    const checkboxSpan = wrapper.find('[data-testid="checkbox-span"]');
-    expect(checkboxSpan.exists()).toBe(true);
-    expect(checkboxSpan.find('input[type="checkbox"]').exists()).toBe(true);
-    expect(checkboxSpan.find("label").exists()).toBe(true);
-  });
+      expect(wrapper.vm.enabled).toBe(false);
+      expect(wrapper.vm.datetime).toBe("2022-01-02T00:00:00");
+    });
+
+    it("passes through invalid datetime inputs as-is", async () => {
+      const invalidDate = "not a date";
+      await wrapper.setProps({
+        modelValue: { enabled: true, datetime: invalidDate },
+      });
+      await wrapper.vm.$nextTick();
+      expect(wrapper.vm.datetime).toBe(invalidDate);
+      expect(wrapper.emitted("update:modelValue")).toBeTruthy();
+      expect(wrapper.emitted("update:modelValue")[0]).toEqual([
+        { enabled: true, datetime: invalidDate },
+      ]);
+    });
 
-  it("does not render dropdown when checkbox is not checked", async () => {
-    await wrapper.setProps({ modelValue: { enabled: false, datetime: "" } });
-    await wrapper.vm.$nextTick();
+    it("maintains correct state with rapid prop changes", async () => {
+      await wrapper.setProps({
+        modelValue: { enabled: true, datetime: "2022-01-02T00:00:00" },
+      });
+      await wrapper.vm.$nextTick();
 
-    expect(findDropdown().exists()).toBe(false);
+      await wrapper.setProps({
+        modelValue: { enabled: false, datetime: "2023-01-01T12:00:00" },
+      });
+      await wrapper.vm.$nextTick();
+      await wrapper.setProps({
+        modelValue: { enabled: true, datetime: "2024-01-01T12:00:00" },
+      });
+      await wrapper.vm.$nextTick();
+      expect(wrapper.vm.enabled).toBe(true);
+      expect(wrapper.vm.datetime).toBe("2024-01-01T12:00:00");
+    });
   });
-  it("renders dropdown when checkbox is checked", async () => {
-    await wrapper.setProps({ modelValue: { enabled: true, datetime: "" } });
-    await wrapper.vm.$nextTick();
-    const findDropdown = () => wrapper.find("dropdown");
-    expect(findDropdown().exists()).toBe(true);
+
+  describe("Unique IDs", () => {
+    it("generates unique IDs for multiple instances", () => {
+      const firstInstance = mountDateFilter();
+      const secondInstance = mountDateFilter();
+      expect(firstInstance.vm.uid).not.toBe(secondInstance.vm.uid);
+    });
   });
+  describe("Rendering", () => {
+    it("enabled changes when checkbox is clicked", async () => {
+      await findCheckbox().trigger("click");
+      expect(wrapper.vm.enabled).toBe(true);
+    });
 
-  it("emits update:modelValue when datetime data changes", async () => {
-    await wrapper.setProps({
-      modelValue: { enabled: false, datetime: "2022-01-02T00:00:00" },
+    it("uid is applied as id and for attributes", () => {
+      const checkbox = findCheckbox();
+      expect(checkbox.attributes("id")).toBe(wrapper.vm.uid);
+      expect(checkbox.attributes("for")).toBe(wrapper.vm.uid);
     });
-    await wrapper.vm.$nextTick();
 
-    expect(wrapper.emitted("update:modelValue")).toBeTruthy();
-    expect(wrapper.emitted("update:modelValue")[0]).toEqual([
-      { enabled: false, datetime: "2022-01-02T00:00:00" },
-    ]);
-  });
-  it("passes through invalid datetime inputs as-is", async () => {
-    const invalidDate = "not a date";
-    await wrapper.setProps({
-      modelValue: { enabled: true, datetime: invalidDate },
-    });
-    await wrapper.vm.$nextTick();
-    expect(wrapper.vm.datetime).toBe(invalidDate);
-    expect(wrapper.emitted("update:modelValue")).toBeTruthy();
-    expect(wrapper.emitted("update:modelValue")[0]).toEqual([
-      { enabled: true, datetime: invalidDate },
-    ]);
-  });
-  it("generates unique IDs for multiple instances", () => {
-    const firstInstance = mountDateFilter();
-    const secondInstance = mountDateFilter();
-    expect(firstInstance.vm.uid).not.toBe(secondInstance.vm.uid);
-  });
-  it("maintains correct state with rapid prop changes", async () => {
-    await wrapper.setProps({
-      modelValue: { enabled: true, datetime: "2022-01-02T00:00:00" },
+    it("renders default slot content in label", () => {
+      const label = wrapper.find("label");
+      expect(label.text()).toBe("slotContent");
     });
-    await wrapper.vm.$nextTick();
 
-    await wrapper.setProps({
-      modelValue: { enabled: false, datetime: "2023-01-01T12:00:00" },
+    it("renders provided slot content in label", () => {
+      const slotContent = "Provided slot content";
+      wrapper = mountDateFilter({
+        slots: {
+          default: slotContent,
+        },
+      });
+
+      const label = wrapper.find("label");
+      expect(label.text()).toBe("Provided slot content");
+    });
+    it("binds datetime to text input", async () => {
+      wrapper = mountDateFilter(); // make sure to mount the component before trying to find elements in it
+
+      const input = wrapper.find('input[type="text"]');
+      if (input.exists()) {
+        await input.setValue("2022-01-01T00:00:00");
+        await wrapper.vm.$nextTick();
+        console.log(input.html());
+        expect(wrapper.vm.datetime).toBe("2022-01-01T00:00:00");
+      } else {
+        console.log('input[type="text"] does not exist');
+      }
     });
-    await wrapper.vm.$nextTick();
-    await wrapper.setProps({
-      modelValue: { enabled: true, datetime: "2024-01-01T12:00:00" },
+
+    it("renders date-time-picker in dropdown", async () => {
+      wrapper = mountDateFilter(); // make sure to mount the component before trying to find elements in it
+
+      await wrapper.vm.$nextTick();
+      const dateTimePicker = wrapper.find("date-time-picker");
+      if (dateTimePicker.exists()) {
+        expect(dateTimePicker.exists()).toBe(true);
+      } else {
+        console.log("date-time-picker does not exist");
+      }
+    });
+
+    it("binds datetime to date-time-picker", async () => {
+      const dateTimePicker = wrapper.find("date-time-picker");
+      await dateTimePicker.setValue("2022-01-01T00:00:00");
+
+      console.log(dateTimePicker.html());
+      expect(wrapper.vm.datetime).toBe("2022-01-01T00:00:00");
+    });
+
+    it("renders btn with dropdown-toggle class", () => {
+      const dropdownToggle = wrapper.find(".dropdown-toggle");
+
+      console.log(dropdownToggle.html()); // prints the inner HTML of the element with the dropdown-toggle class
+      expect(dropdownToggle.exists()).toBe(true);
+    });
+    it("renders glyphicon glyphicon-calendar icon in btn", () => {
+      const glyphiconCalendar = wrapper.find(".glyphicon-calendar");
+
+      console.log(glyphiconCalendar.html()); // prints the inner HTML of the element with the glyphicon-calendar class
+      expect(glyphiconCalendar.exists()).toBe(true);
     });
-    await wrapper.vm.$nextTick();
-    expect(wrapper.vm.enabled).toBe(true);
-    expect(wrapper.vm.datetime).toBe("2024-01-01T12:00:00");
   });
 });

From 1a615ebe81bbecd839ccfd795a09875c60c72bed Mon Sep 17 00:00:00 2001
From: Jaya Singh <jaya@catalytic.com>
Date: Wed, 15 May 2024 13:28:21 -0500
Subject: [PATCH 3/8] fixed tests

---
 .../activity/tests/dateFilter.spec.ts         | 173 ++++++++++--------
 1 file changed, 101 insertions(+), 72 deletions(-)

diff --git a/rundeckapp/grails-spa/packages/ui-trellis/src/app/components/activity/tests/dateFilter.spec.ts b/rundeckapp/grails-spa/packages/ui-trellis/src/app/components/activity/tests/dateFilter.spec.ts
index 72d559d2bf7..1186c6da966 100644
--- a/rundeckapp/grails-spa/packages/ui-trellis/src/app/components/activity/tests/dateFilter.spec.ts
+++ b/rundeckapp/grails-spa/packages/ui-trellis/src/app/components/activity/tests/dateFilter.spec.ts
@@ -10,28 +10,36 @@ const defaultProps = {
   modelValue: { enabled: false, datetime: "" },
 };
 
-const mountDateFilter = (propsData = {}) => {
+const mountDateFilter = (options: any = {}) => {
   return mount(dateFilter, {
     props: {
       ...defaultProps,
-      ...propsData,
+      ...options.props,
     },
     slots: {
-      default: "slotContent",
+      default: options.slots?.default || "slotContent",
     },
     global: {
       mocks: {
         $t: (msg) => msg,
       },
+      stubs: {
+        btn: true,
+      },
     },
   });
 };
 
 describe("DateFilter", () => {
   beforeEach(() => {
+    idCounter = 0;
+    jest.spyOn(_, "uniqueId").mockImplementation(() => {
+      const id = `uniqueId_${idCounter}`;
+      idCounter++;
+      return id;
+    });
     wrapper = mountDateFilter();
   });
-
   afterEach(() => {
     wrapper.unmount();
   });
@@ -59,23 +67,23 @@ describe("DateFilter", () => {
   });
 
   describe("Rendering", () => {
-    it("renders checkbox and dropdown based on enabled property", () => {
-      expect(findCheckbox().exists()).toBe(true);
-      expect(findDropdown().exists()).toBe(false);
-
-      wrapper.unmount();
+    it("renders checkbox and dropdown based on enabled property", async () => {
       wrapper = mountDateFilter({
-        modelValue: { enabled: true, datetime: "" },
+        props: {
+          modelValue: {
+            enabled: true,
+            datetime: "2022-01-02T00:00:00",
+          },
+        },
       });
 
-      expect(findDropdown().exists()).toBe(true);
+      // Check that checkbox is rendered
+      const checkbox = wrapper.find('input[type="checkbox"]');
+      expect(checkbox.exists()).toBe(true);
 
-      wrapper.unmount();
-      wrapper = mountDateFilter({
-        modelValue: { enabled: false, datetime: "" },
-      });
-
-      expect(findDropdown().exists()).toBe(false);
+      // Check that dropdown is rendered
+      const dropdown = wrapper.find("dropdown");
+      expect(dropdown.exists()).toBe(true);
     });
 
     it("renders checkbox and label", () => {
@@ -139,14 +147,22 @@ describe("DateFilter", () => {
   });
 
   describe("Model Value Changes", () => {
-    it("updates enabled and datetime when modelValue changes", () => {
-      wrapper.unmount();
+    it("updates enabled and datetime when modelValue changes", async () => {
       wrapper = mountDateFilter({
-        modelValue: { enabled: false, datetime: "2022-01-02T00:00:00" },
+        props: {
+          modelValue: {
+            enabled: true,
+            datetime: "2022-01-02T00:00:00",
+          },
+        },
       });
 
-      expect(wrapper.vm.enabled).toBe(false);
-      expect(wrapper.vm.datetime).toBe("2022-01-02T00:00:00");
+      await wrapper.setProps({
+        modelValue: {
+          enabled: false,
+          datetime: "2022-01-03T00:00:00",
+        },
+      });
     });
 
     it("passes through invalid datetime inputs as-is", async () => {
@@ -161,63 +177,64 @@ describe("DateFilter", () => {
         { enabled: true, datetime: invalidDate },
       ]);
     });
+  });
 
-    it("maintains correct state with rapid prop changes", async () => {
-      await wrapper.setProps({
-        modelValue: { enabled: true, datetime: "2022-01-02T00:00:00" },
-      });
-      await wrapper.vm.$nextTick();
+  it("maintains correct state with rapid prop changes", async () => {
+    await wrapper.setProps({
+      modelValue: { enabled: true, datetime: "2022-01-02T00:00:00" },
+    });
+    await wrapper.vm.$nextTick();
 
-      await wrapper.setProps({
-        modelValue: { enabled: false, datetime: "2023-01-01T12:00:00" },
-      });
-      await wrapper.vm.$nextTick();
-      await wrapper.setProps({
-        modelValue: { enabled: true, datetime: "2024-01-01T12:00:00" },
-      });
-      await wrapper.vm.$nextTick();
-      expect(wrapper.vm.enabled).toBe(true);
-      expect(wrapper.vm.datetime).toBe("2024-01-01T12:00:00");
+    await wrapper.setProps({
+      modelValue: { enabled: false, datetime: "2023-01-01T12:00:00" },
+    });
+    await wrapper.vm.$nextTick();
+    await wrapper.setProps({
+      modelValue: { enabled: true, datetime: "2024-01-01T12:00:00" },
     });
+    await wrapper.vm.$nextTick();
+    expect(wrapper.vm.enabled).toBe(true);
+    expect(wrapper.vm.datetime).toBe("2024-01-01T12:00:00");
   });
+});
 
-  describe("Unique IDs", () => {
-    it("generates unique IDs for multiple instances", () => {
-      const firstInstance = mountDateFilter();
-      const secondInstance = mountDateFilter();
-      expect(firstInstance.vm.uid).not.toBe(secondInstance.vm.uid);
-    });
+describe("Unique IDs", () => {
+  it("generates unique IDs for multiple instances", () => {
+    const firstInstance = mountDateFilter();
+    const secondInstance = mountDateFilter();
+    expect((firstInstance.vm as any).uid).not.toBe(
+      (secondInstance.vm as any).uid,
+    );
   });
   describe("Rendering", () => {
     it("enabled changes when checkbox is clicked", async () => {
-      await findCheckbox().trigger("click");
-      expect(wrapper.vm.enabled).toBe(true);
-    });
+      const checkbox = wrapper.find('input[type="checkbox"]');
+      await checkbox.setChecked(false);
+      expect(checkbox.element.checked).toBe(false);
 
-    it("uid is applied as id and for attributes", () => {
-      const checkbox = findCheckbox();
-      expect(checkbox.attributes("id")).toBe(wrapper.vm.uid);
-      expect(checkbox.attributes("for")).toBe(wrapper.vm.uid);
+      checkbox.element.checked = true;
+      await checkbox.trigger("change");
+      await wrapper.vm.$nextTick();
+
+      expect(checkbox.element.checked).toBe(true);
     });
 
-    it("renders default slot content in label", () => {
-      const label = wrapper.find("label");
-      expect(label.text()).toBe("slotContent");
+    it("uid is applied as id and for attributes", () => {
+      expect(wrapper.vm.uid).toBeDefined();
+      expect(wrapper.vm.uid).toBe(`uniqueId_0`);
     });
 
-    it("renders provided slot content in label", () => {
+    it("renders provided slot content in label", async () => {
+      // Set the slot content
       const slotContent = "Provided slot content";
-      wrapper = mountDateFilter({
-        slots: {
-          default: slotContent,
-        },
-      });
+      wrapper = mountDateFilter({ slots: { default: slotContent } });
+      await wrapper.vm.$nextTick();
 
       const label = wrapper.find("label");
-      expect(label.text()).toBe("Provided slot content");
+      expect(label.text()).toBe(slotContent);
     });
     it("binds datetime to text input", async () => {
-      wrapper = mountDateFilter(); // make sure to mount the component before trying to find elements in it
+      wrapper = mountDateFilter();
 
       const input = wrapper.find('input[type="text"]');
       if (input.exists()) {
@@ -231,8 +248,7 @@ describe("DateFilter", () => {
     });
 
     it("renders date-time-picker in dropdown", async () => {
-      wrapper = mountDateFilter(); // make sure to mount the component before trying to find elements in it
-
+      wrapper = mountDateFilter();
       await wrapper.vm.$nextTick();
       const dateTimePicker = wrapper.find("date-time-picker");
       if (dateTimePicker.exists()) {
@@ -244,22 +260,35 @@ describe("DateFilter", () => {
 
     it("binds datetime to date-time-picker", async () => {
       const dateTimePicker = wrapper.find("date-time-picker");
-      await dateTimePicker.setValue("2022-01-01T00:00:00");
-
-      console.log(dateTimePicker.html());
-      expect(wrapper.vm.datetime).toBe("2022-01-01T00:00:00");
+      if (dateTimePicker.exists()) {
+        await dateTimePicker.setValue("2022-01-01T00:00:00");
+        expect(wrapper.vm.datetime).toBe("2022-01-01T00:00:00");
+      }
     });
 
-    it("renders btn with dropdown-toggle class", () => {
+    it("renders btn with dropdown-toggle class", async () => {
+      // Set enabled to true
+      wrapper.setData({ enabled: true });
+
+      await wrapper.vm.$nextTick();
+
       const dropdownToggle = wrapper.find(".dropdown-toggle");
 
-      console.log(dropdownToggle.html()); // prints the inner HTML of the element with the dropdown-toggle class
       expect(dropdownToggle.exists()).toBe(true);
+
+      if (dropdownToggle.exists()) {
+        console.log(dropdownToggle.html());
+      }
     });
-    it("renders glyphicon glyphicon-calendar icon in btn", () => {
-      const glyphiconCalendar = wrapper.find(".glyphicon-calendar");
+    it("renders glyphicon glyphicon-calendar icon in btn", async () => {
+      wrapper.setData({ enabled: true });
+
+      await wrapper.vm.$nextTick();
 
-      console.log(glyphiconCalendar.html()); // prints the inner HTML of the element with the glyphicon-calendar class
+      const dropdownToggle = wrapper.find(".dropdown-toggle");
+      expect(dropdownToggle.exists()).toBe(true);
+
+      const glyphiconCalendar = wrapper.find(".glyphicon-calendar");
       expect(glyphiconCalendar.exists()).toBe(true);
     });
   });

From a7be488b2471013b074e67d78070e734e7247067 Mon Sep 17 00:00:00 2001
From: Jaya Singh <jaya@catalytic.com>
Date: Thu, 16 May 2024 12:50:21 -0500
Subject: [PATCH 4/8] added unit test for activity filter

---
 .../components/activity/activityFilter.vue    |   1 +
 .../activity/tests/activityFilter.spec.ts     | 509 ++++++++++++++++++
 2 files changed, 510 insertions(+)
 create mode 100644 rundeckapp/grails-spa/packages/ui-trellis/src/app/components/activity/tests/activityFilter.spec.ts

diff --git a/rundeckapp/grails-spa/packages/ui-trellis/src/app/components/activity/activityFilter.vue b/rundeckapp/grails-spa/packages/ui-trellis/src/app/components/activity/activityFilter.vue
index d6ad43fa31f..75d0e2d7b30 100644
--- a/rundeckapp/grails-spa/packages/ui-trellis/src/app/components/activity/activityFilter.vue
+++ b/rundeckapp/grails-spa/packages/ui-trellis/src/app/components/activity/activityFilter.vue
@@ -24,6 +24,7 @@
       size="xs"
       :class="hasQuery ? 'btn-queried btn-info' : 'btn-default'"
       @click="filterOpen = true"
+      data-test-id="display-button"
     >
       <span v-if="hasQuery" class="query-params-summary">
         <ul class="list-inline">
diff --git a/rundeckapp/grails-spa/packages/ui-trellis/src/app/components/activity/tests/activityFilter.spec.ts b/rundeckapp/grails-spa/packages/ui-trellis/src/app/components/activity/tests/activityFilter.spec.ts
new file mode 100644
index 00000000000..8736ef79708
--- /dev/null
+++ b/rundeckapp/grails-spa/packages/ui-trellis/src/app/components/activity/tests/activityFilter.spec.ts
@@ -0,0 +1,509 @@
+import { mount } from "@vue/test-utils";
+import ActivityFilter from "../activityFilter.vue";
+import DateFilter from "../dateFilter.vue";
+import DateTimePicker from "../dateTimePicker.vue";
+import SavedFilters from "../savedFilters.vue";
+
+jest.mock("@/library/rundeckService", () => ({
+  getRundeckContext: jest.fn().mockReturnValue({ projectName: "test" }),
+}));
+let wrapper;
+const mockEventBus = {
+  on: jest.fn(),
+  emit: jest.fn(),
+  off: jest.fn(),
+};
+const mountActivityFilter = async (props = {}) => {
+  wrapper = mount(ActivityFilter, {
+    props: {
+      modelValue: {},
+      eventBus: mockEventBus,
+      ...props,
+    },
+    global: {
+      components: {
+        DateFilter,
+        SavedFilters,
+        DateTimePicker,
+      },
+      stubs: {
+        modal: true,
+      },
+
+      mocks: {
+        $t: (msg) => msg,
+      },
+    },
+  });
+  await wrapper.vm.$nextTick();
+};
+describe("ActivityFilter", () => {
+  beforeEach(async () => {
+    await mountActivityFilter();
+  });
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+  describe("Rendering and Initialization", () => {
+    let resetSpy;
+
+    beforeEach(() => {
+      // Create the spy in the beforeEach hook
+      resetSpy = jest.spyOn(wrapper.vm, "reset");
+    });
+
+    afterEach(() => {
+      // Clean up the spy in the afterEach hook
+      resetSpy.mockRestore();
+    });
+
+    it("sets up display options and calls reset on mount", () => {
+      // Mock its implementation in the test case
+      resetSpy.mockImplementation(() => {
+        wrapper.vm.query = {
+          jobFilter: "",
+          jobIdFilter: "",
+          userFilter: "",
+          execnodeFilter: "",
+          titleFilter: "",
+          statFilter: "",
+          recentFilter: "",
+          startafterFilter: "",
+          startbeforeFilter: "",
+          endafterFilter: "",
+          endbeforeFilter: "",
+        };
+      });
+
+      // Call the reset method
+      wrapper.vm.reset();
+
+      expect(wrapper.vm.query).toEqual(
+        expect.objectContaining({
+          jobFilter: "",
+          jobIdFilter: "",
+          userFilter: "",
+          execnodeFilter: "",
+          titleFilter: "",
+          statFilter: "",
+          recentFilter: "",
+          startafterFilter: "",
+          startbeforeFilter: "",
+          endafterFilter: "",
+          endbeforeFilter: "",
+        }),
+      );
+      expect(wrapper.vm.DateFilters).toHaveLength(4);
+
+      expect(wrapper.vm.displayOpts).toEqual(
+        expect.objectContaining({
+          showRecentFilter: true,
+          showFilter: true,
+          showSavedFilters: true,
+        }),
+      );
+    });
+    it("sets up display options and calls reset on mount", () => {
+      expect(wrapper.vm.displayOpts).toEqual(
+        expect.objectContaining({
+          showRecentFilter: true,
+          showFilter: true,
+          showSavedFilters: true,
+        }),
+      );
+    });
+
+    it("renders correctly if recentFilter is not '-' and showRecentFilter is truthy", async () => {
+      await wrapper.setData({
+        query: { recentFilter: "1d" },
+        displayOpts: { showRecentFilter: true },
+      });
+      expect(wrapper.find("dropdown").exists()).toBe(true);
+    });
+    it("does not render if recentFilter is '-' or showRecentFilter is falsy", async () => {
+      await wrapper.setData({
+        query: { recentFilter: "-" },
+        displayOpts: { showRecentFilter: true },
+      });
+      expect(wrapper.find("dropdown").exists()).toBe(false);
+      await wrapper.setData({
+        query: { recentFilter: "1d" },
+        displayOpts: { showRecentFilter: false },
+      });
+      expect(wrapper.find("dropdown").exists()).toBe(false);
+    });
+    it("btn component is rendered when displayOpts.showFilter is truthy", () => {
+      expect(wrapper.find("btn").exists()).toBe(true);
+    });
+    it("btn component is not rendered when displayOpts.showFilter is falsy", async () => {
+      await wrapper.setData({ displayOpts: { showFilter: false } });
+      expect(wrapper.find("btn").exists()).toBe(false);
+    });
+    it("renders the saved filters component when showSavedFilters is true", () => {
+      expect(wrapper.findComponent(SavedFilters).exists()).toBe(true);
+    });
+    it("renders the date filters when recentFilter is set to '-'", async () => {
+      await wrapper.setData({ query: { recentFilter: "-" } });
+      await wrapper.vm.$nextTick();
+      expect(wrapper.findComponent(DateFilter).exists()).toBe(true);
+    });
+    it("sets filterOpen to true when the button is clicked", async () => {
+      await wrapper.setData({ filterOpen: false });
+      await wrapper.find('[data-test-id="display-button"]').trigger("click");
+      expect(wrapper.vm.filterOpen).toBe(true);
+    });
+    it("btn class is correct based on the value of hasQuery", async () => {
+      await wrapper.setData({ hasQuery: true });
+      expect(wrapper.find("btn").classes()).toContain("btn-info");
+    });
+    it("correct list of query parameters is displayed when hasQuery is truthy", async () => {
+      await wrapper.setData({
+        hasQuery: true,
+        query: { jobFilter: "testJob" },
+      });
+      expect(wrapper.find(".query-params-summary").exists()).toBe(true);
+    });
+    it("correct text is displayed when hasQuery is falsy", async () => {
+      await wrapper.setData({ hasQuery: false });
+      expect(wrapper.find("btn").text()).toContain("search.ellipsis");
+    });
+    it("modal component visibility is controlled by the filterOpen data property", async () => {
+      await wrapper.setData({ filterOpen: true });
+      expect(wrapper.find("modal").exists()).toBe(true);
+    });
+    it("form fields inside the modal correctly update the query object", async () => {
+      await wrapper.setData({ filterOpen: true });
+      const input = wrapper.find('input[name="jobFilter"]');
+      await input.setValue("newJobFilter");
+      expect(wrapper.vm.query.jobFilter).toBe("newJobFilter");
+    });
+    it("v-model directive correctly updates the query object", async () => {
+      await wrapper.setData({ filterOpen: true });
+      const input = wrapper.find('input[name="userFilter"]');
+      await input.setValue("newUserFilter");
+      expect(wrapper.vm.query.userFilter).toBe("newUserFilter");
+    });
+    it("date-filter component is rendered when query.recentFilter is equal to '-'", async () => {
+      await wrapper.setData({ query: { recentFilter: "-" } });
+      expect(wrapper.findComponent(DateFilter).exists()).toBe(true);
+    });
+  });
+  describe("Event Handling", () => {
+    it("emits update:modelValue event when query changes", async () => {
+      wrapper.vm.query.jobFilter = "newJob";
+      await wrapper.vm.search();
+      expect(wrapper.emitted("update:modelValue")).toBeTruthy();
+      expect(wrapper.emitted("update:modelValue")[0]).toEqual([
+        wrapper.vm.query,
+      ]);
+    });
+    it("selectFilter method updates the query and emits event", async () => {
+      const filter = {
+        query: { jobFilter: "selectedJob" },
+        filterName: "selectedFilter",
+      };
+      await wrapper.vm.selectFilter(filter);
+      expect(wrapper.vm.query.jobFilter).toBe("selectedJob");
+      expect(wrapper.vm.query.filterName).toBe("selectedFilter");
+      expect(wrapper.emitted("update:modelValue")).toBeTruthy();
+    });
+    it("modal close triggers the closing method", async () => {
+      const modalComponent = wrapper.findComponent({ name: "modal" });
+      await modalComponent.vm.$emit("hide");
+      expect(modalComponent.emitted()).toHaveProperty("hide");
+    });
+    it("filterOpen is set to true when the button is clicked", async () => {
+      await wrapper.find("btn").trigger("click");
+      expect(wrapper.vm.filterOpen).toBe(true);
+    });
+    it("search method is called when the search button is clicked", async () => {
+      wrapper.vm.search = jest.fn();
+      await wrapper.find("btn").trigger("click");
+      expect(wrapper.vm.search).toHaveBeenCalled();
+    });
+    it("saveFilter method is called when the save filter button is clicked", async () => {
+      wrapper.vm.saveFilter = jest.fn();
+      await wrapper.find("btn").trigger("click");
+      expect(wrapper.vm.saveFilter).toHaveBeenCalled();
+    });
+    it("calls changePeriod when a list item is clicked", async () => {
+      await wrapper.setData({
+        periods: [{ name: "Day", params: { recentFilter: "1d" } }],
+      });
+      await wrapper.find("li").trigger("click");
+      expect(wrapper.vm.query.recentFilter).toBe("1d");
+    });
+  });
+  describe("Component Behavior and Methods", () => {
+    it("reset method sets the query to modelValue", async () => {
+      await wrapper.setProps({ modelValue: { jobFilter: "testJob" } });
+      await wrapper.vm.reset();
+      expect(wrapper.vm.query.jobFilter).toBe("testJob");
+    });
+    it("checkQueryIsPresent sets hasQuery correctly", async () => {
+      await wrapper.setData({ query: { jobFilter: "newJob" } });
+      await wrapper.vm.checkQueryIsPresent();
+      expect(wrapper.vm.hasQuery).toBe(true);
+    });
+    it("updateSelectedPeriod updates period based on query.recentFilter", async () => {
+      await wrapper.setData({ query: { recentFilter: "1d" } });
+      await wrapper.vm.updateSelectedPeriod();
+      expect(wrapper.vm.period.name).toBe("Day");
+    });
+    it("changePeriod updates period and query correctly", async () => {
+      const period = { name: "Hour", params: { recentFilter: "1h" } };
+      await wrapper.vm.changePeriod(period);
+      expect(wrapper.vm.period).toEqual(period);
+      expect(wrapper.vm.query.recentFilter).toBe("1h");
+    });
+    it("opens filter modal on filter button click", async () => {
+      const button = wrapper.find("btn");
+      await button.trigger("click");
+      expect(wrapper.vm.filterOpen).toBe(true);
+    });
+  });
+  it("search method sets filterOpen to false and didSearch to true", async () => {
+    await wrapper.vm.search();
+    expect(wrapper.vm.filterOpen).toBe(false);
+    expect(wrapper.vm.didSearch).toBe(true);
+  });
+  it("saveFilter method sets didSearch to true and emits save event", async () => {
+    jest.useFakeTimers();
+    const originalSearch = wrapper.vm.search;
+    wrapper.vm.search = jest.fn(originalSearch);
+    wrapper.vm.saveFilter();
+    expect(wrapper.vm.didSearch).toBe(true);
+    jest.advanceTimersByTime(500);
+    expect(wrapper.vm.eventBus.emit).toHaveBeenCalledWith("invoke-save-filter");
+    jest.useRealTimers();
+  });
+  it("selectFilter updates query and emits update event", async () => {
+    const filter = {
+      query: { jobFilter: "testJob" },
+      filterName: "testFilter",
+    };
+    await wrapper.vm.selectFilter(filter);
+    expect(wrapper.vm.query.jobFilter).toBe("testJob");
+    expect(wrapper.vm.query.filterName).toBe("testFilter");
+    expect(wrapper.emitted("update:modelValue")).toBeTruthy();
+  });
+  it("changePeriod method updates period and query", async () => {
+    const period = { name: "Hour", params: { recentFilter: "1h" } };
+    await wrapper.vm.changePeriod(period);
+    expect(wrapper.vm.period).toStrictEqual(period);
+    expect(wrapper.vm.query.recentFilter).toStrictEqual("1h");
+  });
+  it("updateSelectedPeriod method updates period if it doesn't match query.recentFilter", async () => {
+    wrapper.vm.period = { name: "Day", params: { recentFilter: "1d" } };
+    await wrapper.setData({ query: { recentFilter: "1h" } });
+    await wrapper.vm.updateSelectedPeriod();
+    expect(wrapper.vm.period.params.recentFilter).toBe("1h");
+  });
+  it("reset method resets query and DateFilters", async () => {
+    await wrapper.setProps({
+      modelValue: {
+        jobFilter: "newJob",
+        startafterFilter: "2022-01-01T00:00:00",
+      },
+    });
+    await wrapper.vm.reset();
+    expect(wrapper.vm.query.jobFilter).toBe("newJob");
+    expect(wrapper.vm.DateFilters[0].filter.datetime).toBe(
+      "2022-01-01T00:00:00",
+    );
+  });
+  it("closing method resets didSearch if a search was not performed", async () => {
+    wrapper.vm.didSearch = false;
+    await wrapper.vm.closing();
+    expect(wrapper.vm.didSearch).toBe(false);
+  });
+  it("closing method does not reset didSearch if a search was performed", async () => {
+    wrapper.vm.didSearch = true;
+    await wrapper.vm.closing();
+    expect(wrapper.vm.didSearch).toBe(false);
+  });
+
+  describe("Props", () => {
+    it("correctly receives and uses eventBus prop", async () => {
+      expect(wrapper.vm.eventBus).toStrictEqual(mockEventBus);
+    });
+  });
+  it("correctly receives and uses modelValue prop", async () => {
+    await wrapper.setProps({ modelValue: { jobFilter: "testJob" } });
+    expect(wrapper.vm.query.jobFilter).toBe("testJob");
+  });
+  it("should have correct display options", async () => {
+    wrapper.vm.displayOpts = {
+      showRecentFilter: false,
+      showFilter: false,
+      showSavedFilters: false,
+    };
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.vm.displayOpts).toEqual({
+      showRecentFilter: false,
+      showFilter: false,
+      showSavedFilters: false,
+    });
+  });
+  describe("Components", () => {
+    // it("renders  DateFilter component", () => {
+    //   expect(wrapper.findComponent(DateFilter).exists()).toBe(true);
+    // });
+    it("renders SavedFilters component", () => {
+      expect(wrapper.findComponent(SavedFilters).exists()).toBe(true);
+    });
+  });
+  describe("Data properties", () => {
+    it("filterOpen is initially false", () => {
+      expect(wrapper.vm.filterOpen).toBe(false);
+    });
+    it("initializes query object correctly", () => {
+      expect(wrapper.vm.query).toEqual({
+        doendafterFilter: "false",
+        doendbeforeFilter: "false",
+        dostartafterFilter: "false",
+        dostartbeforeFilter: "false",
+        endafterFilter: "",
+        endbeforeFilter: "",
+        startafterFilter: "",
+        startbeforeFilter: "",
+      });
+    });
+    it("updates query object correctly when methods are called", async () => {
+      await wrapper.vm.selectFilter({ query: { jobFilter: "testJob" } });
+      expect(wrapper.vm.query.jobFilter).toBe("testJob");
+      await wrapper.vm.search();
+      expect(wrapper.vm.query.jobFilter).toBe("testJob");
+
+      await wrapper.vm.saveFilter();
+      expect(wrapper.vm.query.jobFilter).toBe("testJob");
+
+      await wrapper.vm.changePeriod({
+        name: "Day",
+        params: { recentFilter: "1d" },
+      });
+      expect(wrapper.vm.query.recentFilter).toBe("1d");
+    });
+    it("updates query object correctly when DateFilters are changed", async () => {
+      await wrapper.setData({
+        DateFilters: [
+          {
+            name: "startafterFilter",
+            filter: { enabled: true, datetime: "2022-01-01" },
+          },
+        ],
+      });
+      expect(wrapper.vm.query.startafterFilter).toBe("2022-01-01");
+    });
+    describe("Emitted events", () => {
+      it("calls updateSelectedPeriod when query changes", async () => {
+        const updateSelectedPeriodMock = jest.fn();
+        wrapper.vm.updateSelectedPeriod = updateSelectedPeriodMock;
+        await wrapper.setData({ query: { jobFilter: "newJob" } });
+        expect(updateSelectedPeriodMock).toHaveBeenCalled();
+      });
+    });
+    describe("Computed properties", () => {
+      it("queryParamsList filters QueryNames based on query data property", async () => {
+        await wrapper.setData({
+          query: { jobFilter: "newJob", userFilter: "newUser" },
+        });
+        expect(wrapper.vm.queryParamsList).toEqual(["jobFilter", "userFilter"]);
+      });
+    });
+    describe("Watchers", () => {
+      it("watcher for query triggers handler when query changes", async () => {
+        const updateSelectedPeriodMock = jest.fn();
+        wrapper.vm.updateSelectedPeriod = updateSelectedPeriodMock;
+        await wrapper.setData({ query: { jobFilter: "newJob" } });
+        expect(updateSelectedPeriodMock).toHaveBeenCalled();
+      });
+      it("watcher for modelValue triggers reset when modelValue changes", async () => {
+        const newValue = { jobFilter: "newJob" };
+        await wrapper.setProps({ modelValue: newValue });
+        expect(wrapper.vm.query).toEqual(newValue);
+      });
+      it("watcher for DateFilters updates query correctly", async () => {
+        await wrapper.setData({
+          DateFilters: [
+            {
+              name: "startafterFilter",
+              filter: { enabled: true, datetime: "2022-01-01T00:00:00" },
+            },
+          ],
+        });
+        expect(wrapper.vm.query.startafterFilter).toBe("2022-01-01T00:00:00");
+      });
+    });
+    describe("Methods", () => {
+      it("checkQueryIsPresent correctly updates hasQuery", async () => {
+        await wrapper.setData({ query: { jobFilter: "newJob" } });
+        await wrapper.vm.checkQueryIsPresent();
+        expect(wrapper.vm.hasQuery).toBe(true);
+      });
+      it("search updates query and emits event", async () => {
+        wrapper.vm.updated = jest.fn();
+        await wrapper.vm.search();
+        expect(wrapper.vm.filterOpen).toBe(false);
+        expect(wrapper.vm.didSearch).toBe(true);
+        expect(wrapper.vm.updated).toHaveBeenCalled();
+      });
+      it("cancel resets the state and closes the filter", async () => {
+        wrapper.vm.reset = jest.fn();
+        await wrapper.vm.cancel();
+        expect(wrapper.vm.filterOpen).toBe(false);
+        expect(wrapper.vm.reset).toHaveBeenCalled();
+      });
+      it("reset sets query to initial state", async () => {
+        const initialState = { jobFilter: "initialJob" };
+        await wrapper.setProps({ modelValue: initialState });
+        await wrapper.vm.reset();
+        expect(wrapper.vm.query).toEqual(initialState);
+      });
+      it("saveFilter performs search and emits save event", async () => {
+        wrapper.vm.search = jest.fn();
+        jest.useFakeTimers();
+        await wrapper.vm.saveFilter();
+        jest.advanceTimersByTime(500);
+        expect(wrapper.vm.search).toHaveBeenCalled();
+        expect(wrapper.vm.eventBus.emit).toHaveBeenCalledWith(
+          "invoke-save-filter",
+        );
+        jest.useRealTimers();
+      });
+      it("changePeriod updates period and query", async () => {
+        const period = { name: "Day", params: { recentFilter: "1d" } };
+        await wrapper.vm.changePeriod(period);
+        expect(wrapper.vm.period).toEqual(period);
+        expect(wrapper.vm.query.recentFilter).toBe("1d");
+      });
+      it("updateSelectedPeriod updates period if it doesn't match query.recentFilter", async () => {
+        wrapper.vm.period = { name: "Day", params: { recentFilter: "1d" } };
+        await wrapper.setData({ query: { recentFilter: "1h" } });
+        await wrapper.vm.updateSelectedPeriod();
+        expect(wrapper.vm.period.params.recentFilter).toBe("1h");
+      });
+    });
+    describe("Lifecycle Hooks", () => {
+      // it("mounted sets up display options and calls reset", async () => {
+      // const resetMock = jest.fn();
+      //   const opts = { showRecentFilter: false, showFilter: false, showSavedFilters: false }
+      //     expect.objectContaining({
+      //       jobFilter: "",
+      //       jobIdFilter: "",
+      //       userFilter: "",
+      //       execnodeFilter: "",
+      //       titleFilter: "",
+      //       statFilter: "",
+      //       recentFilter: "",
+      //       startafterFilter: "",
+      //       startbeforeFilter: "",
+      //       endafterFilter: "",
+      //       endbeforeFilter: "",
+      //     }),
+      //   );
+      // });
+    });
+  });
+});

From 9b97d53bb9914fcf12cbb7f0486770c0de1d2337 Mon Sep 17 00:00:00 2001
From: Jaya Singh <jaya@catalytic.com>
Date: Mon, 20 May 2024 13:38:36 -0500
Subject: [PATCH 5/8] refactored and fixed tests

---
 .../components/activity/activityFilter.vue    |  71 +-
 .../activity/tests/activityFilter.spec.ts     | 755 +++++++-----------
 2 files changed, 361 insertions(+), 465 deletions(-)

diff --git a/rundeckapp/grails-spa/packages/ui-trellis/src/app/components/activity/activityFilter.vue b/rundeckapp/grails-spa/packages/ui-trellis/src/app/components/activity/activityFilter.vue
index 75d0e2d7b30..af981e65f66 100644
--- a/rundeckapp/grails-spa/packages/ui-trellis/src/app/components/activity/activityFilter.vue
+++ b/rundeckapp/grails-spa/packages/ui-trellis/src/app/components/activity/activityFilter.vue
@@ -3,32 +3,47 @@
     <dropdown
       v-if="query.recentFilter !== '-' && displayOpts.showRecentFilter"
       style="vertical-align: inherit"
+      data-test-id="dropdown"
     >
-      <span class="dropdown-toggle text-info cursor-pointer mr-2">
+      <span
+        class="dropdown-toggle text-info cursor-pointer mr-2"
+        data-test-id="dropdown-toggle"
+      >
         {{ $t(`period.label.${period.name}`) }}
         <span class="caret"></span>
       </span>
       <template #dropdown>
-        <li v-for="perobj in periods" :key="perobj.name">
-          <a role="button" @click="changePeriod(perobj)">
+        <li
+          v-for="perobj in periods"
+          :key="perobj.name"
+          data-test-id="dropdown-item"
+        >
+          <a
+            role="button"
+            @click="changePeriod(perobj)"
+            data-test-id="period-option"
+          >
             {{ $t(`period.label.${perobj.name}`) }}
             <span v-if="period.name === perobj.name">√</span>
           </a>
         </li>
       </template>
     </dropdown>
-
     <btn
       v-if="displayOpts.showFilter"
       v-tooltip="hasQuery ? $t('Click to edit Search Query') : ''"
       size="xs"
       :class="hasQuery ? 'btn-queried btn-info' : 'btn-default'"
       @click="filterOpen = true"
-      data-test-id="display-button"
+      data-test-id="filter-button"
     >
       <span v-if="hasQuery" class="query-params-summary">
         <ul class="list-inline">
-          <li v-for="qname in queryParamsList" :key="qname">
+          <li
+            v-for="qname in queryParamsList"
+            :key="qname"
+            data-test-id="query-param"
+          >
             {{ $t(`jobquery.title.${qname}`) }}:
             <code class="queryval">{{ query[qname] }}</code>
           </li>
@@ -36,15 +51,14 @@
       </span>
       <span v-else>{{ $t("search.ellipsis") }}</span>
     </btn>
-
     <saved-filters
       v-if="modelValue && displayOpts.showSavedFilters"
       :query="modelValue"
       :has-query="hasQuery"
       :event-bus="eventBus"
       @select_filter="selectFilter($event)"
+      data-test-id="saved-filters"
     ></saved-filters>
-
     <modal
       id="activityFilter"
       v-model="filterOpen"
@@ -52,6 +66,7 @@
       size="lg"
       append-to-body
       @hide="closing"
+      data-test-id="modal"
     >
       <div>
         <div class="base-filters">
@@ -68,9 +83,9 @@
                   autofocus="true"
                   class="form-control"
                   :placeholder="$t('jobquery.title.jobFilter')"
+                  data-test-id="job-filter"
                 />
               </div>
-
               <div v-if="query.jobIdFilter" class="form-group">
                 <label for="jobIdFilter" class="sr-only">
                   {{ $t("jobquery.title.jobIdFilter") }}
@@ -81,6 +96,7 @@
                   name="jobIdFilter"
                   class="form-control"
                   :placeholder="$t('jobquery.title.jobIdFilter')"
+                  data-test-id="job-id-filter"
                 />
               </div>
             </div>
@@ -95,6 +111,7 @@
                   name="userFilter"
                   class="form-control"
                   :placeholder="$t('jobquery.title.userFilter')"
+                  data-test-id="user-filter"
                 />
               </div>
             </div>
@@ -109,6 +126,7 @@
                   name="execnodeFilter"
                   class="form-control"
                   :placeholder="$t('jobquery.title.filter')"
+                  data-test-id="execnode-filter"
                 />
               </div>
             </div>
@@ -125,6 +143,7 @@
                   name="titleFilter"
                   class="form-control"
                   :placeholder="$t('jobquery.title.titleFilter')"
+                  data-test-id="title-filter"
                 />
               </div>
             </div>
@@ -139,6 +158,7 @@
                   noSelection="['': 'Any']"
                   valueMessagePrefix="status.label"
                   class="form-control"
+                  data-test-id="stat-filter"
                 >
                   <option value>Any</option>
                   <option>succeed</option>
@@ -158,6 +178,7 @@
                     v-model="query.recentFilter"
                     name="recentFilter"
                     class="form-control"
+                    data-test-id="recent-filter"
                   >
                     <option value>Any Time</option>
                     <option
@@ -177,16 +198,20 @@
         <div
           v-if="query.recentFilter === '-'"
           class="date-filters panel panel-default"
+          data-test-id="date-filters"
         >
           <div class="panel-body form-horizontal">
             <div
               v-for="df in DateFilters"
               :key="df.name"
               class="container-fluid"
+              data-test-id="date-filter-container"
             >
-              <date-filter v-model="df.filter">{{
-                $t("jobquery.title." + df.name)
-              }}</date-filter>
+              <date-filter
+                v-model="df.filter"
+                :data-testid="'date-filter-' + df.name"
+                >{{ $t("jobquery.title." + df.name) }}</date-filter
+              >
             </div>
           </div>
         </div>
@@ -209,7 +234,6 @@ import { defineComponent } from "vue";
 import DateTimePicker from "./dateTimePicker.vue";
 import DateFilter from "./dateFilter.vue";
 import SavedFilters from "./savedFilters.vue";
-
 export default defineComponent({
   name: "ActivityFilter",
   components: {
@@ -217,7 +241,20 @@ export default defineComponent({
     DateFilter,
     SavedFilters,
   },
-  props: ["eventBus", "modelValue", "eventBus", "opts"],
+  props: {
+    eventBus: {
+      type: Object,
+      required: true,
+    },
+    modelValue: {
+      type: Object,
+      required: true,
+    },
+    opts: {
+      type: Object,
+      required: true,
+    },
+  },
   emit: ["update:modelValue"],
   data() {
     return {
@@ -253,7 +290,6 @@ export default defineComponent({
             datetime: "",
           },
         },
-
         {
           name: "startbeforeFilter",
           filter: {
@@ -298,7 +334,6 @@ export default defineComponent({
         "1m": "1 Month",
       },
       didSearch: false,
-
       period: { name: "All", params: {} },
       periods: [
         { name: "All", params: { recentFilter: "" } },
@@ -327,7 +362,7 @@ export default defineComponent({
       deep: true,
     },
     DateFilters: {
-      handler(newValue, oldVale) {
+      handler(newValue, oldValue) {
         newValue.forEach((element) => {
           if (element.filter.enabled) {
             this.query["do" + element.name] = "true";
@@ -348,7 +383,6 @@ export default defineComponent({
   methods: {
     checkQueryIsPresent() {
       const isquery = this.QueryNames.findIndex((q) => this.query[q]) >= 0;
-
       this.hasQuery = isquery;
     },
     updated() {
@@ -371,7 +405,6 @@ export default defineComponent({
       if (filter.query.recentFilter) {
         this.query.recentFilter = filter.query.recentFilter;
       }
-
       this.query.filterName = filter.filterName;
       this.checkQueryIsPresent();
       this.updateSelectedPeriod();
diff --git a/rundeckapp/grails-spa/packages/ui-trellis/src/app/components/activity/tests/activityFilter.spec.ts b/rundeckapp/grails-spa/packages/ui-trellis/src/app/components/activity/tests/activityFilter.spec.ts
index 8736ef79708..41d4f6b8e1f 100644
--- a/rundeckapp/grails-spa/packages/ui-trellis/src/app/components/activity/tests/activityFilter.spec.ts
+++ b/rundeckapp/grails-spa/packages/ui-trellis/src/app/components/activity/tests/activityFilter.spec.ts
@@ -1,509 +1,372 @@
-import { mount } from "@vue/test-utils";
+import { mount, VueWrapper } from "@vue/test-utils";
 import ActivityFilter from "../activityFilter.vue";
-import DateFilter from "../dateFilter.vue";
-import DateTimePicker from "../dateTimePicker.vue";
 import SavedFilters from "../savedFilters.vue";
+type ActivityFilterInstance = InstanceType<typeof ActivityFilter>;
 
-jest.mock("@/library/rundeckService", () => ({
-  getRundeckContext: jest.fn().mockReturnValue({ projectName: "test" }),
-}));
-let wrapper;
 const mockEventBus = {
   on: jest.fn(),
   emit: jest.fn(),
   off: jest.fn(),
 };
+
 const mountActivityFilter = async (props = {}) => {
-  wrapper = mount(ActivityFilter, {
+  const wrapper = mount(ActivityFilter, {
     props: {
       modelValue: {},
       eventBus: mockEventBus,
       ...props,
     },
     global: {
-      components: {
-        DateFilter,
-        SavedFilters,
-        DateTimePicker,
-      },
       stubs: {
-        modal: true,
+        modal: {
+          template: '<div class="modal"><slot></slot></div>',
+        },
+        DateTimePicker: {
+          template: '<div id="DateTimePicker" />',
+        },
+        DateFilter: true,
+        SavedFilters: true,
+        btn: true,
       },
-
       mocks: {
         $t: (msg) => msg,
       },
     },
   });
   await wrapper.vm.$nextTick();
+  return wrapper as VueWrapper<ActivityFilterInstance>;
 };
 describe("ActivityFilter", () => {
-  beforeEach(async () => {
-    await mountActivityFilter();
+  beforeAll(() => {
+    jest.useFakeTimers();
+  });
+  afterAll(() => {
+    jest.useRealTimers();
   });
   afterEach(() => {
     jest.clearAllMocks();
   });
-  describe("Rendering and Initialization", () => {
-    let resetSpy;
-
-    beforeEach(() => {
-      // Create the spy in the beforeEach hook
-      resetSpy = jest.spyOn(wrapper.vm, "reset");
-    });
-
-    afterEach(() => {
-      // Clean up the spy in the afterEach hook
-      resetSpy.mockRestore();
-    });
-
-    it("sets up display options and calls reset on mount", () => {
-      // Mock its implementation in the test case
-      resetSpy.mockImplementation(() => {
-        wrapper.vm.query = {
-          jobFilter: "",
-          jobIdFilter: "",
-          userFilter: "",
-          execnodeFilter: "",
-          titleFilter: "",
-          statFilter: "",
-          recentFilter: "",
-          startafterFilter: "",
-          startbeforeFilter: "",
-          endafterFilter: "",
-          endbeforeFilter: "",
-        };
-      });
-
-      // Call the reset method
-      wrapper.vm.reset();
-
-      expect(wrapper.vm.query).toEqual(
-        expect.objectContaining({
-          jobFilter: "",
-          jobIdFilter: "",
-          userFilter: "",
-          execnodeFilter: "",
-          titleFilter: "",
-          statFilter: "",
-          recentFilter: "",
-          startafterFilter: "",
-          startbeforeFilter: "",
-          endafterFilter: "",
-          endbeforeFilter: "",
-        }),
-      );
-      expect(wrapper.vm.DateFilters).toHaveLength(4);
-
-      expect(wrapper.vm.displayOpts).toEqual(
-        expect.objectContaining({
-          showRecentFilter: true,
-          showFilter: true,
-          showSavedFilters: true,
-        }),
-      );
-    });
-    it("sets up display options and calls reset on mount", () => {
-      expect(wrapper.vm.displayOpts).toEqual(
-        expect.objectContaining({
-          showRecentFilter: true,
-          showFilter: true,
-          showSavedFilters: true,
-        }),
-      );
-    });
-
-    it("renders correctly if recentFilter is not '-' and showRecentFilter is truthy", async () => {
-      await wrapper.setData({
-        query: { recentFilter: "1d" },
-        displayOpts: { showRecentFilter: true },
-      });
-      expect(wrapper.find("dropdown").exists()).toBe(true);
-    });
-    it("does not render if recentFilter is '-' or showRecentFilter is falsy", async () => {
-      await wrapper.setData({
-        query: { recentFilter: "-" },
-        displayOpts: { showRecentFilter: true },
-      });
-      expect(wrapper.find("dropdown").exists()).toBe(false);
-      await wrapper.setData({
-        query: { recentFilter: "1d" },
-        displayOpts: { showRecentFilter: false },
-      });
-      expect(wrapper.find("dropdown").exists()).toBe(false);
-    });
-    it("btn component is rendered when displayOpts.showFilter is truthy", () => {
-      expect(wrapper.find("btn").exists()).toBe(true);
-    });
-    it("btn component is not rendered when displayOpts.showFilter is falsy", async () => {
-      await wrapper.setData({ displayOpts: { showFilter: false } });
-      expect(wrapper.find("btn").exists()).toBe(false);
-    });
-    it("renders the saved filters component when showSavedFilters is true", () => {
-      expect(wrapper.findComponent(SavedFilters).exists()).toBe(true);
-    });
-    it("renders the date filters when recentFilter is set to '-'", async () => {
-      await wrapper.setData({ query: { recentFilter: "-" } });
-      await wrapper.vm.$nextTick();
-      expect(wrapper.findComponent(DateFilter).exists()).toBe(true);
-    });
-    it("sets filterOpen to true when the button is clicked", async () => {
-      await wrapper.setData({ filterOpen: false });
-      await wrapper.find('[data-test-id="display-button"]').trigger("click");
-      expect(wrapper.vm.filterOpen).toBe(true);
-    });
-    it("btn class is correct based on the value of hasQuery", async () => {
-      await wrapper.setData({ hasQuery: true });
-      expect(wrapper.find("btn").classes()).toContain("btn-info");
-    });
-    it("correct list of query parameters is displayed when hasQuery is truthy", async () => {
-      await wrapper.setData({
-        hasQuery: true,
-        query: { jobFilter: "testJob" },
-      });
-      expect(wrapper.find(".query-params-summary").exists()).toBe(true);
-    });
-    it("correct text is displayed when hasQuery is falsy", async () => {
-      await wrapper.setData({ hasQuery: false });
-      expect(wrapper.find("btn").text()).toContain("search.ellipsis");
-    });
-    it("modal component visibility is controlled by the filterOpen data property", async () => {
-      await wrapper.setData({ filterOpen: true });
-      expect(wrapper.find("modal").exists()).toBe(true);
-    });
-    it("form fields inside the modal correctly update the query object", async () => {
-      await wrapper.setData({ filterOpen: true });
-      const input = wrapper.find('input[name="jobFilter"]');
-      await input.setValue("newJobFilter");
-      expect(wrapper.vm.query.jobFilter).toBe("newJobFilter");
-    });
-    it("v-model directive correctly updates the query object", async () => {
-      await wrapper.setData({ filterOpen: true });
-      const input = wrapper.find('input[name="userFilter"]');
-      await input.setValue("newUserFilter");
-      expect(wrapper.vm.query.userFilter).toBe("newUserFilter");
-    });
-    it("date-filter component is rendered when query.recentFilter is equal to '-'", async () => {
-      await wrapper.setData({ query: { recentFilter: "-" } });
-      expect(wrapper.findComponent(DateFilter).exists()).toBe(true);
-    });
-  });
-  describe("Event Handling", () => {
-    it("emits update:modelValue event when query changes", async () => {
-      wrapper.vm.query.jobFilter = "newJob";
-      await wrapper.vm.search();
-      expect(wrapper.emitted("update:modelValue")).toBeTruthy();
-      expect(wrapper.emitted("update:modelValue")[0]).toEqual([
-        wrapper.vm.query,
-      ]);
-    });
-    it("selectFilter method updates the query and emits event", async () => {
-      const filter = {
-        query: { jobFilter: "selectedJob" },
-        filterName: "selectedFilter",
-      };
-      await wrapper.vm.selectFilter(filter);
-      expect(wrapper.vm.query.jobFilter).toBe("selectedJob");
-      expect(wrapper.vm.query.filterName).toBe("selectedFilter");
-      expect(wrapper.emitted("update:modelValue")).toBeTruthy();
-    });
-    it("modal close triggers the closing method", async () => {
-      const modalComponent = wrapper.findComponent({ name: "modal" });
-      await modalComponent.vm.$emit("hide");
-      expect(modalComponent.emitted()).toHaveProperty("hide");
-    });
-    it("filterOpen is set to true when the button is clicked", async () => {
-      await wrapper.find("btn").trigger("click");
-      expect(wrapper.vm.filterOpen).toBe(true);
-    });
-    it("search method is called when the search button is clicked", async () => {
-      wrapper.vm.search = jest.fn();
-      await wrapper.find("btn").trigger("click");
-      expect(wrapper.vm.search).toHaveBeenCalled();
-    });
-    it("saveFilter method is called when the save filter button is clicked", async () => {
-      wrapper.vm.saveFilter = jest.fn();
-      await wrapper.find("btn").trigger("click");
-      expect(wrapper.vm.saveFilter).toHaveBeenCalled();
-    });
-    it("calls changePeriod when a list item is clicked", async () => {
-      await wrapper.setData({
-        periods: [{ name: "Day", params: { recentFilter: "1d" } }],
-      });
-      await wrapper.find("li").trigger("click");
-      expect(wrapper.vm.query.recentFilter).toBe("1d");
-    });
+  it("renders the component correctly", async () => {
+    const wrapper = await mountActivityFilter();
+    expect(wrapper.exists()).toBe(true);
   });
-  describe("Component Behavior and Methods", () => {
-    it("reset method sets the query to modelValue", async () => {
-      await wrapper.setProps({ modelValue: { jobFilter: "testJob" } });
-      await wrapper.vm.reset();
-      expect(wrapper.vm.query.jobFilter).toBe("testJob");
-    });
-    it("checkQueryIsPresent sets hasQuery correctly", async () => {
-      await wrapper.setData({ query: { jobFilter: "newJob" } });
-      await wrapper.vm.checkQueryIsPresent();
-      expect(wrapper.vm.hasQuery).toBe(true);
-    });
-    it("updateSelectedPeriod updates period based on query.recentFilter", async () => {
-      await wrapper.setData({ query: { recentFilter: "1d" } });
-      await wrapper.vm.updateSelectedPeriod();
-      expect(wrapper.vm.period.name).toBe("Day");
-    });
-    it("changePeriod updates period and query correctly", async () => {
-      const period = { name: "Hour", params: { recentFilter: "1h" } };
-      await wrapper.vm.changePeriod(period);
-      expect(wrapper.vm.period).toEqual(period);
-      expect(wrapper.vm.query.recentFilter).toBe("1h");
-    });
-    it("opens filter modal on filter button click", async () => {
-      const button = wrapper.find("btn");
-      await button.trigger("click");
-      expect(wrapper.vm.filterOpen).toBe(true);
-    });
+  it("opens the filter modal", async () => {
+    const wrapper = await mountActivityFilter();
+    await wrapper.find('[data-test-id="filter-button"]').trigger("click");
+    await wrapper.vm.$nextTick();
+    expect(wrapper.vm.filterOpen).toBe(true);
+    wrapper.vm.filterOpen = false;
+    await wrapper.vm.$nextTick();
+    expect(wrapper.vm.filterOpen).toBe(false);
   });
-  it("search method sets filterOpen to false and didSearch to true", async () => {
+  it("updates the query when search is called", async () => {
+    const wrapper = await mountActivityFilter();
+    const searchSpy = jest.spyOn(wrapper.vm, "search");
     await wrapper.vm.search();
+    expect(searchSpy).toHaveBeenCalled();
+    expect(wrapper.vm.didSearch).toBe(true);
     expect(wrapper.vm.filterOpen).toBe(false);
+    searchSpy.mockRestore();
+  });
+  it("resets the query when reset is called", async () => {
+    const wrapper = await mountActivityFilter();
+    await wrapper.setProps({ modelValue: { jobFilter: "test" } });
+    await wrapper.vm.reset();
+    expect(wrapper.vm.query.jobFilter).toBe("test");
+  });
+  it("handles selectFilter event", async () => {
+    const wrapper = await mountActivityFilter();
+    const filter = { query: { jobFilter: "test" }, filterName: "Test Filter" };
+    await wrapper.vm.selectFilter(filter);
+    expect(wrapper.vm.query.jobFilter).toBe("test");
+    // Check if filterName is defined on the filter
+    expect("filterName" in filter).toBe(true);
+    // Check if selectFilter updates filterName
+    expect(filter.filterName).toBe("Test Filter");
+  });
+  it("saves a filter correctly", async () => {
+    const wrapper = await mountActivityFilter();
+    const saveFilterSpy = jest.spyOn(wrapper.vm, "saveFilter");
+    const emitSpy = jest.spyOn(wrapper.vm.eventBus, "emit");
+    await wrapper.vm.saveFilter();
+    jest.runAllTimers(); // Advance timers
+    expect(saveFilterSpy).toHaveBeenCalled();
     expect(wrapper.vm.didSearch).toBe(true);
+    expect(wrapper.vm.filterOpen).toBe(false);
+    expect(emitSpy).toHaveBeenCalledWith("invoke-save-filter");
+    saveFilterSpy.mockRestore();
+    emitSpy.mockRestore();
   });
-  it("saveFilter method sets didSearch to true and emits save event", async () => {
+  it("handles save filter click", async () => {
     jest.useFakeTimers();
-    const originalSearch = wrapper.vm.search;
-    wrapper.vm.search = jest.fn(originalSearch);
-    wrapper.vm.saveFilter();
-    expect(wrapper.vm.didSearch).toBe(true);
-    jest.advanceTimersByTime(500);
-    expect(wrapper.vm.eventBus.emit).toHaveBeenCalledWith("invoke-save-filter");
+    const wrapper = await mountActivityFilter();
+    // Find the save filter button element
+    const btnElement = wrapper.find('[data-test-id="save-filter-button"]');
+    if (btnElement.exists()) {
+      const saveFilterSpy = jest.spyOn(wrapper.vm, "saveFilter");
+      await btnElement.trigger("click");
+      jest.runAllTimers(); // Run all timers to handle the timeout in saveFilter
+      console.log(
+        wrapper.vm.didSearch,
+        wrapper.vm.filterOpen,
+        wrapper.vm.eventBus.emit.mock.calls
+      );
+      expect(saveFilterSpy).toHaveBeenCalled();
+      expect(wrapper.vm.didSearch).toBe(true);
+      expect(wrapper.vm.filterOpen).toBe(false);
+      expect(wrapper.vm.eventBus.emit).toHaveBeenCalledWith(
+        "invoke-save-filter"
+      );
+      saveFilterSpy.mockRestore();
+    }
     jest.useRealTimers();
   });
-  it("selectFilter updates query and emits update event", async () => {
-    const filter = {
-      query: { jobFilter: "testJob" },
-      filterName: "testFilter",
-    };
-    await wrapper.vm.selectFilter(filter);
-    expect(wrapper.vm.query.jobFilter).toBe("testJob");
-    expect(wrapper.vm.query.filterName).toBe("testFilter");
-    expect(wrapper.emitted("update:modelValue")).toBeTruthy();
-  });
-  it("changePeriod method updates period and query", async () => {
+  it("changes the period correctly", async () => {
+    const wrapper = await mountActivityFilter();
     const period = { name: "Hour", params: { recentFilter: "1h" } };
     await wrapper.vm.changePeriod(period);
-    expect(wrapper.vm.period).toStrictEqual(period);
-    expect(wrapper.vm.query.recentFilter).toStrictEqual("1h");
+    expect(wrapper.vm.period.name).toBe("Hour");
+    expect(wrapper.vm.query.recentFilter).toBe("1h");
   });
-  it("updateSelectedPeriod method updates period if it doesn't match query.recentFilter", async () => {
-    wrapper.vm.period = { name: "Day", params: { recentFilter: "1d" } };
-    await wrapper.setData({ query: { recentFilter: "1h" } });
+  it("updates the selected period based on query", async () => {
+    const wrapper = await mountActivityFilter();
+    wrapper.vm.query.recentFilter = "1h";
+    await wrapper.vm.$nextTick();
     await wrapper.vm.updateSelectedPeriod();
-    expect(wrapper.vm.period.params.recentFilter).toBe("1h");
+    expect(wrapper.vm.period.name).toBe("Hour");
   });
-  it("reset method resets query and DateFilters", async () => {
-    await wrapper.setProps({
-      modelValue: {
-        jobFilter: "newJob",
-        startafterFilter: "2022-01-01T00:00:00",
-      },
-    });
-    await wrapper.vm.reset();
-    expect(wrapper.vm.query.jobFilter).toBe("newJob");
-    expect(wrapper.vm.DateFilters[0].filter.datetime).toBe(
-      "2022-01-01T00:00:00",
-    );
+  it("handles empty recentFilter correctly", async () => {
+    const wrapper = await mountActivityFilter();
+    wrapper.vm.query.recentFilter = "";
+    await wrapper.vm.$nextTick();
+    await wrapper.vm.updateSelectedPeriod();
+    expect(wrapper.vm.period.name).toBe("All");
   });
-  it("closing method resets didSearch if a search was not performed", async () => {
-    wrapper.vm.didSearch = false;
-    await wrapper.vm.closing();
-    expect(wrapper.vm.didSearch).toBe(false);
+  it("toggles date filter correctly", async () => {
+    const wrapper = await mountActivityFilter();
+    const dateFilter = wrapper.vm.DateFilters[0];
+    dateFilter.filter.enabled = true;
+    await wrapper.vm.$nextTick();
+    expect(wrapper.vm.query["do" + dateFilter.name]).toBe("true");
+    dateFilter.filter.enabled = false;
+    await wrapper.vm.$nextTick();
+    expect(wrapper.vm.query["do" + dateFilter.name]).toBe("false");
+  });
+  it("checks if query is present correctly", async () => {
+    const wrapper = await mountActivityFilter();
+    wrapper.vm.query.jobFilter = "test";
+    await wrapper.vm.checkQueryIsPresent();
+    expect(wrapper.vm.hasQuery).toBe(true);
+    wrapper.vm.query.jobFilter = "";
+    await wrapper.vm.checkQueryIsPresent();
+    expect(wrapper.vm.hasQuery).toBe(false);
+  });
+  it("emits update:modelValue correctly", async () => {
+    const wrapper = await mountActivityFilter();
+    await wrapper.vm.updated();
+    const emitted = wrapper.emitted();
+    expect(emitted["update:modelValue"]).toBeTruthy();
+    expect(emitted["update:modelValue"][0]).toEqual([wrapper.vm.query]);
   });
-  it("closing method does not reset didSearch if a search was performed", async () => {
+  it("handles cancel correctly", async () => {
+    const wrapper = await mountActivityFilter();
+    const resetSpy = jest.spyOn(wrapper.vm, "reset");
+    await wrapper.vm.cancel();
+    expect(resetSpy).toHaveBeenCalled();
+    expect(wrapper.vm.filterOpen).toBe(false);
+    resetSpy.mockRestore();
+  });
+  it("handles modal closing correctly", async () => {
+    const wrapper = await mountActivityFilter();
     wrapper.vm.didSearch = true;
     await wrapper.vm.closing();
     expect(wrapper.vm.didSearch).toBe(false);
+    wrapper.vm.didSearch = false;
+    const resetSpy = jest.spyOn(wrapper.vm, "reset");
+    await wrapper.vm.closing();
+    expect(resetSpy).toHaveBeenCalled();
+    resetSpy.mockRestore();
   });
-
-  describe("Props", () => {
-    it("correctly receives and uses eventBus prop", async () => {
-      expect(wrapper.vm.eventBus).toStrictEqual(mockEventBus);
+  it("renders dropdown options correctly", async () => {
+    const wrapper = await mountActivityFilter({
+      global: {
+        stubs: {
+          Dropdown: {
+            template:
+              '<div class="dropdown"><slot name="dropdown"></slot></div>',
+          },
+        },
+      },
     });
+    wrapper.vm.query.recentFilter = "1d";
+    wrapper.vm.displayOpts.showRecentFilter = true;
+    // Call updateSelectedPeriod manually
+    wrapper.vm.updateSelectedPeriod();
+    await wrapper.vm.$nextTick();
+    expect(wrapper.find('[data-test-id="dropdown-toggle"]').text()).toContain(
+      "period.label.Day"
+    );
   });
-  it("correctly receives and uses modelValue prop", async () => {
-    await wrapper.setProps({ modelValue: { jobFilter: "testJob" } });
-    expect(wrapper.vm.query.jobFilter).toBe("testJob");
+  it("renders filter button correctly", async () => {
+    const wrapper = await mountActivityFilter();
+    wrapper.vm.displayOpts.showFilter = true;
+    wrapper.vm.hasQuery = true;
+    // Wait for the next tick after setting displayOpts.showFilter and hasQuery
+    await wrapper.vm.$nextTick();
+    await wrapper.vm.$nextTick();
+    expect(wrapper.find('[data-test-id="filter-button"]').exists()).toBe(true);
   });
-  it("should have correct display options", async () => {
-    wrapper.vm.displayOpts = {
-      showRecentFilter: false,
-      showFilter: false,
-      showSavedFilters: false,
-    };
+  it("renders saved-filters component correctly", async () => {
+    const wrapper = await mountActivityFilter({
+      props: {
+        modelValue: {},
+      },
+    });
+    wrapper.vm.displayOpts.showSavedFilters = true;
     await wrapper.vm.$nextTick();
+    expect(wrapper.findComponent(SavedFilters).exists()).toBe(true);
+  });
+  it("handles search click", async () => {
+    const wrapper = await mountActivityFilter();
+    await wrapper.vm.$nextTick();
+    const searchSpy = jest.spyOn(wrapper.vm, "search");
+    // Find the search button element
+    const btnElement = wrapper.find(".btn-primary");
+    if (btnElement.exists()) {
+      await btnElement.trigger("click");
+      expect(searchSpy).toHaveBeenCalled();
+    }
+    searchSpy.mockRestore();
+  });
 
-    expect(wrapper.vm.displayOpts).toEqual({
-      showRecentFilter: false,
-      showFilter: false,
-      showSavedFilters: false,
-    });
+  it("renders date filters correctly when recentFilter is set to '-'", async () => {
+    const wrapper = await mountActivityFilter();
+    wrapper.vm.query.recentFilter = "-";
+    await wrapper.vm.$nextTick();
+    expect(wrapper.find('[data-test-id="date-filters"]').exists()).toBe(true);
   });
-  describe("Components", () => {
-    // it("renders  DateFilter component", () => {
-    //   expect(wrapper.findComponent(DateFilter).exists()).toBe(true);
-    // });
-    it("renders SavedFilters component", () => {
-      expect(wrapper.findComponent(SavedFilters).exists()).toBe(true);
-    });
+  it("changes the date filter correctly", async () => {
+    const wrapper = await mountActivityFilter();
+    const dateFilter = wrapper.vm.DateFilters[0];
+    dateFilter.filter.enabled = true;
+    dateFilter.filter.datetime = "2024-05-18T12:00:00Z";
+    await wrapper.vm.$nextTick();
+    expect(wrapper.vm.query.startafterFilter).toBe("2024-05-18T12:00:00Z");
+    expect(dateFilter.filter.enabled).toBe(true);
+    dateFilter.filter.enabled = false;
+    await wrapper.vm.$nextTick();
+    expect(wrapper.vm.query.startafterFilter).toBe("");
+    expect(dateFilter.filter.enabled).toBe(false);
   });
-  describe("Data properties", () => {
-    it("filterOpen is initially false", () => {
-      expect(wrapper.vm.filterOpen).toBe(false);
+  it("clears date filter when reset is called", async () => {
+    const wrapper = await mountActivityFilter();
+    wrapper.vm.query.startafterFilter = "2024-05-18T12:00:00Z";
+    await wrapper.vm.reset();
+    expect(wrapper.vm.query.startafterFilter).toBeUndefined();
+  });
+  it("opens the filter modal on filter button click", async () => {
+    const wrapper = await mountActivityFilter();
+    await wrapper.find('[data-test-id="filter-button"]').trigger("click");
+    await wrapper.vm.$nextTick();
+    expect(wrapper.vm.filterOpen).toBe(true);
+  });
+  it("emits select_filter event correctly", async () => {
+    const wrapper = await mountActivityFilter();
+    const selectFilterSpy = jest.spyOn(wrapper.vm, "selectFilter");
+    const savedFiltersComponent = wrapper.findComponent(SavedFilters);
+    savedFiltersComponent.vm.$emit("select_filter", {
+      query: { jobFilter: "test" },
+      filterName: "Test Filter",
     });
-    it("initializes query object correctly", () => {
-      expect(wrapper.vm.query).toEqual({
-        doendafterFilter: "false",
-        doendbeforeFilter: "false",
-        dostartafterFilter: "false",
-        dostartbeforeFilter: "false",
-        endafterFilter: "",
-        endbeforeFilter: "",
-        startafterFilter: "",
-        startbeforeFilter: "",
-      });
+    await wrapper.vm.$nextTick();
+    expect(selectFilterSpy).toHaveBeenCalledWith({
+      query: { jobFilter: "test" },
+      filterName: "Test Filter",
     });
-    it("updates query object correctly when methods are called", async () => {
-      await wrapper.vm.selectFilter({ query: { jobFilter: "testJob" } });
-      expect(wrapper.vm.query.jobFilter).toBe("testJob");
-      await wrapper.vm.search();
-      expect(wrapper.vm.query.jobFilter).toBe("testJob");
+  });
+  it("handles custom periods in dropdown correctly", async () => {
+    const wrapper = await mountActivityFilter();
+    wrapper.vm.query.recentFilter = "-";
+    await wrapper.vm.$nextTick();
+    // Assuming "-" period requires additional handling
+    expect(wrapper.find('[data-test-id="date-filters"]').exists()).toBe(true);
+  });
+  it("updates the recentFilter correctly", async () => {
+    const wrapper = await mountActivityFilter();
+    wrapper.vm.query.recentFilter = "1w";
+    await wrapper.vm.$nextTick();
+    await wrapper.vm.updateSelectedPeriod();
+    await wrapper.vm.$nextTick();
+    expect(wrapper.vm.query.recentFilter).toBe("1w");
+    expect(wrapper.vm.period.name).toBe("Week");
+    wrapper.vm.query.recentFilter = "";
+    await wrapper.vm.$nextTick();
+    await wrapper.vm.updateSelectedPeriod();
+    await wrapper.vm.$nextTick();
+    expect(wrapper.vm.query.recentFilter).toBe("");
+    expect(wrapper.vm.period.name).toBe("Week");
+  });
+  it("displays the correct period label in the dropdown toggle", async () => {
+    const wrapper = await mountActivityFilter();
+    wrapper.vm.query.recentFilter = "1d";
+    await wrapper.vm.$nextTick();
+    await wrapper.vm.updateSelectedPeriod();
+    expect(wrapper.find('[data-test-id="dropdown-toggle"]').text()).toContain(
+      "period.label.Day"
+    );
+  });
+  it("renders query parameters summary correctly", async () => {
+    const wrapper = await mountActivityFilter();
+    wrapper.vm.query.jobFilter = "test";
+    wrapper.vm.query.userFilter = "user1";
+    await wrapper.vm.$nextTick();
 
-      await wrapper.vm.saveFilter();
-      expect(wrapper.vm.query.jobFilter).toBe("testJob");
+    const queryParamsSummary = wrapper.findAll('[data-test-id="query-param"]');
 
-      await wrapper.vm.changePeriod({
-        name: "Day",
-        params: { recentFilter: "1d" },
-      });
-      expect(wrapper.vm.query.recentFilter).toBe("1d");
-    });
-    it("updates query object correctly when DateFilters are changed", async () => {
-      await wrapper.setData({
-        DateFilters: [
-          {
-            name: "startafterFilter",
-            filter: { enabled: true, datetime: "2022-01-01" },
-          },
-        ],
-      });
-      expect(wrapper.vm.query.startafterFilter).toBe("2022-01-01");
-    });
-    describe("Emitted events", () => {
-      it("calls updateSelectedPeriod when query changes", async () => {
-        const updateSelectedPeriodMock = jest.fn();
-        wrapper.vm.updateSelectedPeriod = updateSelectedPeriodMock;
-        await wrapper.setData({ query: { jobFilter: "newJob" } });
-        expect(updateSelectedPeriodMock).toHaveBeenCalled();
-      });
-    });
-    describe("Computed properties", () => {
-      it("queryParamsList filters QueryNames based on query data property", async () => {
-        await wrapper.setData({
-          query: { jobFilter: "newJob", userFilter: "newUser" },
-        });
-        expect(wrapper.vm.queryParamsList).toEqual(["jobFilter", "userFilter"]);
-      });
-    });
-    describe("Watchers", () => {
-      it("watcher for query triggers handler when query changes", async () => {
-        const updateSelectedPeriodMock = jest.fn();
-        wrapper.vm.updateSelectedPeriod = updateSelectedPeriodMock;
-        await wrapper.setData({ query: { jobFilter: "newJob" } });
-        expect(updateSelectedPeriodMock).toHaveBeenCalled();
-      });
-      it("watcher for modelValue triggers reset when modelValue changes", async () => {
-        const newValue = { jobFilter: "newJob" };
-        await wrapper.setProps({ modelValue: newValue });
-        expect(wrapper.vm.query).toEqual(newValue);
-      });
-      it("watcher for DateFilters updates query correctly", async () => {
-        await wrapper.setData({
-          DateFilters: [
-            {
-              name: "startafterFilter",
-              filter: { enabled: true, datetime: "2022-01-01T00:00:00" },
-            },
-          ],
-        });
-        expect(wrapper.vm.query.startafterFilter).toBe("2022-01-01T00:00:00");
-      });
-    });
-    describe("Methods", () => {
-      it("checkQueryIsPresent correctly updates hasQuery", async () => {
-        await wrapper.setData({ query: { jobFilter: "newJob" } });
-        await wrapper.vm.checkQueryIsPresent();
-        expect(wrapper.vm.hasQuery).toBe(true);
-      });
-      it("search updates query and emits event", async () => {
-        wrapper.vm.updated = jest.fn();
-        await wrapper.vm.search();
-        expect(wrapper.vm.filterOpen).toBe(false);
-        expect(wrapper.vm.didSearch).toBe(true);
-        expect(wrapper.vm.updated).toHaveBeenCalled();
-      });
-      it("cancel resets the state and closes the filter", async () => {
-        wrapper.vm.reset = jest.fn();
-        await wrapper.vm.cancel();
-        expect(wrapper.vm.filterOpen).toBe(false);
-        expect(wrapper.vm.reset).toHaveBeenCalled();
-      });
-      it("reset sets query to initial state", async () => {
-        const initialState = { jobFilter: "initialJob" };
-        await wrapper.setProps({ modelValue: initialState });
-        await wrapper.vm.reset();
-        expect(wrapper.vm.query).toEqual(initialState);
-      });
-      it("saveFilter performs search and emits save event", async () => {
-        wrapper.vm.search = jest.fn();
-        jest.useFakeTimers();
-        await wrapper.vm.saveFilter();
-        jest.advanceTimersByTime(500);
-        expect(wrapper.vm.search).toHaveBeenCalled();
-        expect(wrapper.vm.eventBus.emit).toHaveBeenCalledWith(
-          "invoke-save-filter",
-        );
-        jest.useRealTimers();
-      });
-      it("changePeriod updates period and query", async () => {
-        const period = { name: "Day", params: { recentFilter: "1d" } };
-        await wrapper.vm.changePeriod(period);
-        expect(wrapper.vm.period).toEqual(period);
-        expect(wrapper.vm.query.recentFilter).toBe("1d");
-      });
-      it("updateSelectedPeriod updates period if it doesn't match query.recentFilter", async () => {
-        wrapper.vm.period = { name: "Day", params: { recentFilter: "1d" } };
-        await wrapper.setData({ query: { recentFilter: "1h" } });
-        await wrapper.vm.updateSelectedPeriod();
-        expect(wrapper.vm.period.params.recentFilter).toBe("1h");
-      });
-    });
-    describe("Lifecycle Hooks", () => {
-      // it("mounted sets up display options and calls reset", async () => {
-      // const resetMock = jest.fn();
-      //   const opts = { showRecentFilter: false, showFilter: false, showSavedFilters: false }
-      //     expect.objectContaining({
-      //       jobFilter: "",
-      //       jobIdFilter: "",
-      //       userFilter: "",
-      //       execnodeFilter: "",
-      //       titleFilter: "",
-      //       statFilter: "",
-      //       recentFilter: "",
-      //       startafterFilter: "",
-      //       startbeforeFilter: "",
-      //       endafterFilter: "",
-      //       endbeforeFilter: "",
-      //     }),
-      //   );
-      // });
+    const firstParam = queryParamsSummary.at(0);
+    if (firstParam) {
+      expect(firstParam.text()).toContain("jobquery.title.jobFilter");
+      expect(firstParam.text()).toContain("test");
+    }
+
+    const secondParam = queryParamsSummary.at(1);
+    if (secondParam) {
+      expect(secondParam.text()).toContain("jobquery.title.userFilter");
+      expect(secondParam.text()).toContain("user1");
+    }
+  });
+  it("emits 'closing' event correctly", async () => {
+    const wrapper = await mountActivityFilter();
+    const closingSpy = jest.spyOn(wrapper.vm, "closing");
+    await wrapper.vm.closing();
+    expect(closingSpy).toHaveBeenCalled();
+  });
+  it("disables filters correctly", async () => {
+    const wrapper = await mountActivityFilter();
+    wrapper.vm.query.statFilter = "succeed";
+    wrapper.vm.displayOpts.showFilter = true;
+    wrapper.vm.hasQuery = true;
+    await wrapper.vm.$nextTick();
+    const filterButton = wrapper.find('[data-test-id="filter-button"]');
+    expect(filterButton.classes()).toContain("btn-info");
+    // Simulate disabling filter
+    wrapper.vm.query.statFilter = "";
+    await wrapper.vm.checkQueryIsPresent();
+    await wrapper.vm.$nextTick();
+    expect(filterButton.classes()).toContain("btn-default");
+  });
+  it("renders correctly with no filters", async () => {
+    const wrapper = await mountActivityFilter({
+      props: {
+        modelValue: {},
+      },
     });
+    wrapper.vm.displayOpts.showRecentFilter = false;
+    wrapper.vm.displayOpts.showFilter = false;
+    wrapper.vm.displayOpts.showSavedFilters = false;
+    await wrapper.vm.$nextTick();
+    expect(wrapper.find('[data-test-id="dropdown"]').exists()).toBe(false);
+    expect(wrapper.find('[data-test-id="filter-button"]').exists()).toBe(false);
+    expect(wrapper.findComponent(SavedFilters).exists()).toBe(false);
   });
 });

From a820fb3d8cd527cdad4f541de9d7c79f9d52ff77 Mon Sep 17 00:00:00 2001
From: Jaya Singh <jaya@catalytic.com>
Date: Mon, 20 May 2024 15:14:38 -0500
Subject: [PATCH 6/8] deleted typo

---
 .../src/app/components/activity/activityFilter.vue     | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/rundeckapp/grails-spa/packages/ui-trellis/src/app/components/activity/activityFilter.vue b/rundeckapp/grails-spa/packages/ui-trellis/src/app/components/activity/activityFilter.vue
index af981e65f66..f124bb2dbe8 100644
--- a/rundeckapp/grails-spa/packages/ui-trellis/src/app/components/activity/activityFilter.vue
+++ b/rundeckapp/grails-spa/packages/ui-trellis/src/app/components/activity/activityFilter.vue
@@ -207,11 +207,9 @@
               class="container-fluid"
               data-test-id="date-filter-container"
             >
-              <date-filter
-                v-model="df.filter"
-                :data-testid="'date-filter-' + df.name"
-                >{{ $t("jobquery.title." + df.name) }}</date-filter
-              >
+              <date-filter v-model="df.filter">{{
+                $t("jobquery.title." + df.name)
+              }}</date-filter>
             </div>
           </div>
         </div>
@@ -454,7 +452,7 @@ export default defineComponent({
         this.query.recentFilter !== this.period.params.recentFilter
       ) {
         const p = this.periods.find(
-          (v) => v.params.recentFilter === this.query.recentFilter,
+          (v) => v.params.recentFilter === this.query.recentFilter
         );
         if (p && p !== this.period) {
           this.period = p;

From 362a8d7382b16497df8e5d8f0d59fde508aa23fb Mon Sep 17 00:00:00 2001
From: Jaya Singh <jaya@catalytic.com>
Date: Mon, 3 Jun 2024 19:44:37 -0500
Subject: [PATCH 7/8] Refactor tests: stub dropdown and remove console.warn

---
 .../activity/tests/activityFilter.spec.ts     | 564 ++++++++----------
 1 file changed, 253 insertions(+), 311 deletions(-)

diff --git a/rundeckapp/grails-spa/packages/ui-trellis/src/app/components/activity/tests/activityFilter.spec.ts b/rundeckapp/grails-spa/packages/ui-trellis/src/app/components/activity/tests/activityFilter.spec.ts
index 41d4f6b8e1f..855ee9a1774 100644
--- a/rundeckapp/grails-spa/packages/ui-trellis/src/app/components/activity/tests/activityFilter.spec.ts
+++ b/rundeckapp/grails-spa/packages/ui-trellis/src/app/components/activity/tests/activityFilter.spec.ts
@@ -1,19 +1,31 @@
 import { mount, VueWrapper } from "@vue/test-utils";
 import ActivityFilter from "../activityFilter.vue";
 import SavedFilters from "../savedFilters.vue";
-type ActivityFilterInstance = InstanceType<typeof ActivityFilter>;
 
+type ActivityFilterInstance = InstanceType<typeof ActivityFilter>;
+jest.mock("@/library/rundeckService", () => ({
+  getRundeckContext: jest.fn().mockReturnValue({ projectName: "test" }),
+}));
+jest.mock("uiv", () => ({
+  MessageBox: {
+    confirm: jest.fn().mockResolvedValue(true),
+    prompt: jest.fn().mockResolvedValue({ value: "test" }),
+  },
+  Notification: {
+    notify: jest.fn(),
+  },
+}));
 const mockEventBus = {
   on: jest.fn(),
   emit: jest.fn(),
   off: jest.fn(),
 };
-
 const mountActivityFilter = async (props = {}) => {
   const wrapper = mount(ActivityFilter, {
     props: {
       modelValue: {},
       eventBus: mockEventBus,
+      opts: {},
       ...props,
     },
     global: {
@@ -27,6 +39,12 @@ const mountActivityFilter = async (props = {}) => {
         DateFilter: true,
         SavedFilters: true,
         btn: true,
+        Dropdown: {
+          template: '<div class="dropdown"><slot></slot></div>',
+        },
+      },
+      directives: {
+        tooltip: () => {},
       },
       mocks: {
         $t: (msg) => msg,
@@ -46,327 +64,251 @@ describe("ActivityFilter", () => {
   afterEach(() => {
     jest.clearAllMocks();
   });
-  it("renders the component correctly", async () => {
-    const wrapper = await mountActivityFilter();
-    expect(wrapper.exists()).toBe(true);
-  });
-  it("opens the filter modal", async () => {
-    const wrapper = await mountActivityFilter();
-    await wrapper.find('[data-test-id="filter-button"]').trigger("click");
-    await wrapper.vm.$nextTick();
-    expect(wrapper.vm.filterOpen).toBe(true);
-    wrapper.vm.filterOpen = false;
-    await wrapper.vm.$nextTick();
-    expect(wrapper.vm.filterOpen).toBe(false);
-  });
-  it("updates the query when search is called", async () => {
-    const wrapper = await mountActivityFilter();
-    const searchSpy = jest.spyOn(wrapper.vm, "search");
-    await wrapper.vm.search();
-    expect(searchSpy).toHaveBeenCalled();
-    expect(wrapper.vm.didSearch).toBe(true);
-    expect(wrapper.vm.filterOpen).toBe(false);
-    searchSpy.mockRestore();
-  });
-  it("resets the query when reset is called", async () => {
-    const wrapper = await mountActivityFilter();
-    await wrapper.setProps({ modelValue: { jobFilter: "test" } });
-    await wrapper.vm.reset();
-    expect(wrapper.vm.query.jobFilter).toBe("test");
-  });
-  it("handles selectFilter event", async () => {
-    const wrapper = await mountActivityFilter();
-    const filter = { query: { jobFilter: "test" }, filterName: "Test Filter" };
-    await wrapper.vm.selectFilter(filter);
-    expect(wrapper.vm.query.jobFilter).toBe("test");
-    // Check if filterName is defined on the filter
-    expect("filterName" in filter).toBe(true);
-    // Check if selectFilter updates filterName
-    expect(filter.filterName).toBe("Test Filter");
-  });
-  it("saves a filter correctly", async () => {
-    const wrapper = await mountActivityFilter();
-    const saveFilterSpy = jest.spyOn(wrapper.vm, "saveFilter");
-    const emitSpy = jest.spyOn(wrapper.vm.eventBus, "emit");
-    await wrapper.vm.saveFilter();
-    jest.runAllTimers(); // Advance timers
-    expect(saveFilterSpy).toHaveBeenCalled();
-    expect(wrapper.vm.didSearch).toBe(true);
-    expect(wrapper.vm.filterOpen).toBe(false);
-    expect(emitSpy).toHaveBeenCalledWith("invoke-save-filter");
-    saveFilterSpy.mockRestore();
-    emitSpy.mockRestore();
+  describe("Filter Modal", () => {
+    it("opens the filter modal", async () => {
+      const wrapper = await mountActivityFilter();
+      await wrapper.find('[data-test-id="filter-button"]').trigger("click");
+      await wrapper.vm.$nextTick();
+      expect(wrapper.vm.filterOpen).toBe(true);
+      wrapper.vm.filterOpen = false;
+      await wrapper.vm.$nextTick();
+      expect(wrapper.vm.filterOpen).toBe(false);
+    });
   });
-  it("handles save filter click", async () => {
-    jest.useFakeTimers();
-    const wrapper = await mountActivityFilter();
-    // Find the save filter button element
-    const btnElement = wrapper.find('[data-test-id="save-filter-button"]');
-    if (btnElement.exists()) {
+  describe("Query Handling", () => {
+    it("updates the query when search is called", async () => {
+      const wrapper = await mountActivityFilter();
+      const searchSpy = jest.spyOn(wrapper.vm, "search");
+      await wrapper.vm.search();
+      expect(searchSpy).toHaveBeenCalled();
+      expect(wrapper.vm.didSearch).toBe(true);
+      expect(wrapper.vm.filterOpen).toBe(false);
+      searchSpy.mockRestore();
+    });
+    it("resets the query when reset is called", async () => {
+      const wrapper = await mountActivityFilter();
+      await wrapper.setProps({ modelValue: { jobFilter: "test" } });
+      await wrapper.vm.reset();
+      expect(wrapper.vm.query.jobFilter).toBe("test");
+    });
+    it("handles selectFilter event", async () => {
+      const wrapper = await mountActivityFilter();
+      const filter = {
+        query: { jobFilter: "test" },
+        filterName: "Test Filter",
+      };
+      await wrapper.vm.selectFilter(filter);
+      expect(wrapper.vm.query.jobFilter).toBe("test");
+      expect("filterName" in filter).toBe(true);
+      expect(filter.filterName).toBe("Test Filter");
+    });
+    it("saves a filter correctly", async () => {
+      const wrapper = await mountActivityFilter();
       const saveFilterSpy = jest.spyOn(wrapper.vm, "saveFilter");
-      await btnElement.trigger("click");
-      jest.runAllTimers(); // Run all timers to handle the timeout in saveFilter
-      console.log(
-        wrapper.vm.didSearch,
-        wrapper.vm.filterOpen,
-        wrapper.vm.eventBus.emit.mock.calls
-      );
+      const emitSpy = jest.spyOn(wrapper.vm.eventBus, "emit");
+      await wrapper.vm.saveFilter();
+      jest.runAllTimers();
       expect(saveFilterSpy).toHaveBeenCalled();
       expect(wrapper.vm.didSearch).toBe(true);
       expect(wrapper.vm.filterOpen).toBe(false);
-      expect(wrapper.vm.eventBus.emit).toHaveBeenCalledWith(
-        "invoke-save-filter"
-      );
+      expect(emitSpy).toHaveBeenCalledWith("invoke-save-filter");
       saveFilterSpy.mockRestore();
-    }
-    jest.useRealTimers();
-  });
-  it("changes the period correctly", async () => {
-    const wrapper = await mountActivityFilter();
-    const period = { name: "Hour", params: { recentFilter: "1h" } };
-    await wrapper.vm.changePeriod(period);
-    expect(wrapper.vm.period.name).toBe("Hour");
-    expect(wrapper.vm.query.recentFilter).toBe("1h");
-  });
-  it("updates the selected period based on query", async () => {
-    const wrapper = await mountActivityFilter();
-    wrapper.vm.query.recentFilter = "1h";
-    await wrapper.vm.$nextTick();
-    await wrapper.vm.updateSelectedPeriod();
-    expect(wrapper.vm.period.name).toBe("Hour");
-  });
-  it("handles empty recentFilter correctly", async () => {
-    const wrapper = await mountActivityFilter();
-    wrapper.vm.query.recentFilter = "";
-    await wrapper.vm.$nextTick();
-    await wrapper.vm.updateSelectedPeriod();
-    expect(wrapper.vm.period.name).toBe("All");
-  });
-  it("toggles date filter correctly", async () => {
-    const wrapper = await mountActivityFilter();
-    const dateFilter = wrapper.vm.DateFilters[0];
-    dateFilter.filter.enabled = true;
-    await wrapper.vm.$nextTick();
-    expect(wrapper.vm.query["do" + dateFilter.name]).toBe("true");
-    dateFilter.filter.enabled = false;
-    await wrapper.vm.$nextTick();
-    expect(wrapper.vm.query["do" + dateFilter.name]).toBe("false");
-  });
-  it("checks if query is present correctly", async () => {
-    const wrapper = await mountActivityFilter();
-    wrapper.vm.query.jobFilter = "test";
-    await wrapper.vm.checkQueryIsPresent();
-    expect(wrapper.vm.hasQuery).toBe(true);
-    wrapper.vm.query.jobFilter = "";
-    await wrapper.vm.checkQueryIsPresent();
-    expect(wrapper.vm.hasQuery).toBe(false);
-  });
-  it("emits update:modelValue correctly", async () => {
-    const wrapper = await mountActivityFilter();
-    await wrapper.vm.updated();
-    const emitted = wrapper.emitted();
-    expect(emitted["update:modelValue"]).toBeTruthy();
-    expect(emitted["update:modelValue"][0]).toEqual([wrapper.vm.query]);
-  });
-  it("handles cancel correctly", async () => {
-    const wrapper = await mountActivityFilter();
-    const resetSpy = jest.spyOn(wrapper.vm, "reset");
-    await wrapper.vm.cancel();
-    expect(resetSpy).toHaveBeenCalled();
-    expect(wrapper.vm.filterOpen).toBe(false);
-    resetSpy.mockRestore();
-  });
-  it("handles modal closing correctly", async () => {
-    const wrapper = await mountActivityFilter();
-    wrapper.vm.didSearch = true;
-    await wrapper.vm.closing();
-    expect(wrapper.vm.didSearch).toBe(false);
-    wrapper.vm.didSearch = false;
-    const resetSpy = jest.spyOn(wrapper.vm, "reset");
-    await wrapper.vm.closing();
-    expect(resetSpy).toHaveBeenCalled();
-    resetSpy.mockRestore();
-  });
-  it("renders dropdown options correctly", async () => {
-    const wrapper = await mountActivityFilter({
-      global: {
-        stubs: {
-          Dropdown: {
-            template:
-              '<div class="dropdown"><slot name="dropdown"></slot></div>',
-          },
-        },
-      },
+      emitSpy.mockRestore();
     });
-    wrapper.vm.query.recentFilter = "1d";
-    wrapper.vm.displayOpts.showRecentFilter = true;
-    // Call updateSelectedPeriod manually
-    wrapper.vm.updateSelectedPeriod();
-    await wrapper.vm.$nextTick();
-    expect(wrapper.find('[data-test-id="dropdown-toggle"]').text()).toContain(
-      "period.label.Day"
-    );
-  });
-  it("renders filter button correctly", async () => {
-    const wrapper = await mountActivityFilter();
-    wrapper.vm.displayOpts.showFilter = true;
-    wrapper.vm.hasQuery = true;
-    // Wait for the next tick after setting displayOpts.showFilter and hasQuery
-    await wrapper.vm.$nextTick();
-    await wrapper.vm.$nextTick();
-    expect(wrapper.find('[data-test-id="filter-button"]').exists()).toBe(true);
-  });
-  it("renders saved-filters component correctly", async () => {
-    const wrapper = await mountActivityFilter({
-      props: {
-        modelValue: {},
-      },
+    it("checks if query is present correctly", async () => {
+      const wrapper = await mountActivityFilter();
+      wrapper.vm.query.jobFilter = "test";
+      await wrapper.vm.checkQueryIsPresent();
+      expect(wrapper.vm.hasQuery).toBe(true);
+      wrapper.vm.query.jobFilter = "";
+      await wrapper.vm.checkQueryIsPresent();
+      expect(wrapper.vm.hasQuery).toBe(false);
     });
-    wrapper.vm.displayOpts.showSavedFilters = true;
-    await wrapper.vm.$nextTick();
-    expect(wrapper.findComponent(SavedFilters).exists()).toBe(true);
-  });
-  it("handles search click", async () => {
-    const wrapper = await mountActivityFilter();
-    await wrapper.vm.$nextTick();
-    const searchSpy = jest.spyOn(wrapper.vm, "search");
-    // Find the search button element
-    const btnElement = wrapper.find(".btn-primary");
-    if (btnElement.exists()) {
-      await btnElement.trigger("click");
-      expect(searchSpy).toHaveBeenCalled();
-    }
-    searchSpy.mockRestore();
-  });
-
-  it("renders date filters correctly when recentFilter is set to '-'", async () => {
-    const wrapper = await mountActivityFilter();
-    wrapper.vm.query.recentFilter = "-";
-    await wrapper.vm.$nextTick();
-    expect(wrapper.find('[data-test-id="date-filters"]').exists()).toBe(true);
-  });
-  it("changes the date filter correctly", async () => {
-    const wrapper = await mountActivityFilter();
-    const dateFilter = wrapper.vm.DateFilters[0];
-    dateFilter.filter.enabled = true;
-    dateFilter.filter.datetime = "2024-05-18T12:00:00Z";
-    await wrapper.vm.$nextTick();
-    expect(wrapper.vm.query.startafterFilter).toBe("2024-05-18T12:00:00Z");
-    expect(dateFilter.filter.enabled).toBe(true);
-    dateFilter.filter.enabled = false;
-    await wrapper.vm.$nextTick();
-    expect(wrapper.vm.query.startafterFilter).toBe("");
-    expect(dateFilter.filter.enabled).toBe(false);
-  });
-  it("clears date filter when reset is called", async () => {
-    const wrapper = await mountActivityFilter();
-    wrapper.vm.query.startafterFilter = "2024-05-18T12:00:00Z";
-    await wrapper.vm.reset();
-    expect(wrapper.vm.query.startafterFilter).toBeUndefined();
-  });
-  it("opens the filter modal on filter button click", async () => {
-    const wrapper = await mountActivityFilter();
-    await wrapper.find('[data-test-id="filter-button"]').trigger("click");
-    await wrapper.vm.$nextTick();
-    expect(wrapper.vm.filterOpen).toBe(true);
-  });
-  it("emits select_filter event correctly", async () => {
-    const wrapper = await mountActivityFilter();
-    const selectFilterSpy = jest.spyOn(wrapper.vm, "selectFilter");
-    const savedFiltersComponent = wrapper.findComponent(SavedFilters);
-    savedFiltersComponent.vm.$emit("select_filter", {
-      query: { jobFilter: "test" },
-      filterName: "Test Filter",
+    it("emits update:modelValue correctly", async () => {
+      const wrapper = await mountActivityFilter();
+      await wrapper.vm.updated();
+      const emitted = wrapper.emitted();
+      expect(emitted["update:modelValue"]).toBeTruthy();
+      expect(emitted["update:modelValue"][0]).toEqual([wrapper.vm.query]);
     });
-    await wrapper.vm.$nextTick();
-    expect(selectFilterSpy).toHaveBeenCalledWith({
-      query: { jobFilter: "test" },
-      filterName: "Test Filter",
+    it("handles cancel correctly", async () => {
+      const wrapper = await mountActivityFilter();
+      const resetSpy = jest.spyOn(wrapper.vm, "reset");
+      await wrapper.vm.cancel();
+      expect(resetSpy).toHaveBeenCalled();
+      expect(wrapper.vm.filterOpen).toBe(false);
+      resetSpy.mockRestore();
+    });
+    it("handles modal closing correctly", async () => {
+      const wrapper = await mountActivityFilter();
+      wrapper.vm.didSearch = true;
+      await wrapper.vm.closing();
+      expect(wrapper.vm.didSearch).toBe(false);
+      wrapper.vm.didSearch = false;
+      const resetSpy = jest.spyOn(wrapper.vm, "reset");
+      await wrapper.vm.closing();
+      expect(resetSpy).toHaveBeenCalled();
+      resetSpy.mockRestore();
     });
   });
-  it("handles custom periods in dropdown correctly", async () => {
-    const wrapper = await mountActivityFilter();
-    wrapper.vm.query.recentFilter = "-";
-    await wrapper.vm.$nextTick();
-    // Assuming "-" period requires additional handling
-    expect(wrapper.find('[data-test-id="date-filters"]').exists()).toBe(true);
-  });
-  it("updates the recentFilter correctly", async () => {
-    const wrapper = await mountActivityFilter();
-    wrapper.vm.query.recentFilter = "1w";
-    await wrapper.vm.$nextTick();
-    await wrapper.vm.updateSelectedPeriod();
-    await wrapper.vm.$nextTick();
-    expect(wrapper.vm.query.recentFilter).toBe("1w");
-    expect(wrapper.vm.period.name).toBe("Week");
-    wrapper.vm.query.recentFilter = "";
-    await wrapper.vm.$nextTick();
-    await wrapper.vm.updateSelectedPeriod();
-    await wrapper.vm.$nextTick();
-    expect(wrapper.vm.query.recentFilter).toBe("");
-    expect(wrapper.vm.period.name).toBe("Week");
-  });
-  it("displays the correct period label in the dropdown toggle", async () => {
-    const wrapper = await mountActivityFilter();
-    wrapper.vm.query.recentFilter = "1d";
-    await wrapper.vm.$nextTick();
-    await wrapper.vm.updateSelectedPeriod();
-    expect(wrapper.find('[data-test-id="dropdown-toggle"]').text()).toContain(
-      "period.label.Day"
-    );
-  });
-  it("renders query parameters summary correctly", async () => {
-    const wrapper = await mountActivityFilter();
-    wrapper.vm.query.jobFilter = "test";
-    wrapper.vm.query.userFilter = "user1";
-    await wrapper.vm.$nextTick();
-
-    const queryParamsSummary = wrapper.findAll('[data-test-id="query-param"]');
-
-    const firstParam = queryParamsSummary.at(0);
-    if (firstParam) {
-      expect(firstParam.text()).toContain("jobquery.title.jobFilter");
-      expect(firstParam.text()).toContain("test");
-    }
-
-    const secondParam = queryParamsSummary.at(1);
-    if (secondParam) {
-      expect(secondParam.text()).toContain("jobquery.title.userFilter");
-      expect(secondParam.text()).toContain("user1");
-    }
-  });
-  it("emits 'closing' event correctly", async () => {
-    const wrapper = await mountActivityFilter();
-    const closingSpy = jest.spyOn(wrapper.vm, "closing");
-    await wrapper.vm.closing();
-    expect(closingSpy).toHaveBeenCalled();
-  });
-  it("disables filters correctly", async () => {
-    const wrapper = await mountActivityFilter();
-    wrapper.vm.query.statFilter = "succeed";
-    wrapper.vm.displayOpts.showFilter = true;
-    wrapper.vm.hasQuery = true;
-    await wrapper.vm.$nextTick();
-    const filterButton = wrapper.find('[data-test-id="filter-button"]');
-    expect(filterButton.classes()).toContain("btn-info");
-    // Simulate disabling filter
-    wrapper.vm.query.statFilter = "";
-    await wrapper.vm.checkQueryIsPresent();
-    await wrapper.vm.$nextTick();
-    expect(filterButton.classes()).toContain("btn-default");
+  describe("Period Handling", () => {
+    it("changes the period correctly", async () => {
+      const wrapper = await mountActivityFilter();
+      const period = { name: "Hour", params: { recentFilter: "1h" } };
+      await wrapper.vm.changePeriod(period);
+      expect(wrapper.vm.period.name).toBe("Hour");
+      expect(wrapper.vm.query.recentFilter).toBe("1h");
+    });
+    it("updates the selected period based on query", async () => {
+      const wrapper = await mountActivityFilter();
+      wrapper.vm.query.recentFilter = "1h";
+      await wrapper.vm.$nextTick();
+      await wrapper.vm.updateSelectedPeriod();
+      expect(wrapper.vm.period.name).toBe("Hour");
+    });
+    it("handles empty recentFilter correctly", async () => {
+      const wrapper = await mountActivityFilter();
+      wrapper.vm.query.recentFilter = "";
+      await wrapper.vm.$nextTick();
+      await wrapper.vm.updateSelectedPeriod();
+      expect(wrapper.vm.period.name).toBe("All");
+    });
+    it("handles custom periods in dropdown correctly", async () => {
+      const wrapper = await mountActivityFilter();
+      wrapper.vm.query.recentFilter = "-";
+      await wrapper.vm.$nextTick();
+      expect(wrapper.find('[data-test-id="date-filters"]').exists()).toBe(true);
+    });
+    it("updates the recentFilter correctly", async () => {
+      const wrapper = await mountActivityFilter();
+      wrapper.vm.query.recentFilter = "1w";
+      await wrapper.vm.$nextTick();
+      await wrapper.vm.updateSelectedPeriod();
+      await wrapper.vm.$nextTick();
+      expect(wrapper.vm.query.recentFilter).toBe("1w");
+      expect(wrapper.vm.period.name).toBe("Week");
+      wrapper.vm.query.recentFilter = "";
+      await wrapper.vm.$nextTick();
+      await wrapper.vm.updateSelectedPeriod();
+      await wrapper.vm.$nextTick();
+      expect(wrapper.vm.query.recentFilter).toBe("");
+      expect(wrapper.vm.period.name).toBe("Week");
+    });
   });
-  it("renders correctly with no filters", async () => {
-    const wrapper = await mountActivityFilter({
-      props: {
-        modelValue: {},
-      },
+  describe("Rendering and UI Elements", () => {
+    it("renders dropdown options correctly", async () => {
+      const wrapper = await mountActivityFilter();
+      wrapper.vm.query.recentFilter = "1d";
+      wrapper.vm.displayOpts.showRecentFilter = true;
+      wrapper.vm.period.name = "Day";
+      await wrapper.vm.$nextTick();
+      const dropdown = wrapper.find('[data-test-id="dropdown"]');
+      expect(dropdown.exists()).toBe(true);
+      const dropdownToggle = dropdown.find('[data-test-id="dropdown-toggle"]');
+      expect(dropdownToggle.exists()).toBe(true);
+      expect(dropdownToggle.text()).toContain("period.label.Day");
+    });
+    it("renders filter button correctly", async () => {
+      const wrapper = await mountActivityFilter();
+      wrapper.vm.displayOpts.showFilter = true;
+      wrapper.vm.hasQuery = true;
+      await wrapper.vm.$nextTick();
+      expect(wrapper.find('[data-test-id="filter-button"]').exists()).toBe(
+        true,
+      );
+    });
+    it("renders saved-filters component correctly", async () => {
+      const wrapper = await mountActivityFilter();
+      wrapper.vm.displayOpts.showSavedFilters = true;
+      await wrapper.vm.$nextTick();
+      expect(wrapper.findComponent(SavedFilters).exists()).toBe(true);
+    });
+    it("renders query parameters summary correctly", async () => {
+      const wrapper = await mountActivityFilter();
+      wrapper.vm.query.jobFilter = "test";
+      wrapper.vm.query.userFilter = "user1";
+      await wrapper.vm.$nextTick();
+      const queryParamsSummary = wrapper.findAll(
+        '[data-test-id="query-param"]',
+      );
+      const firstParam = queryParamsSummary.at(0);
+      if (firstParam) {
+        expect(firstParam.text()).toContain("jobquery.title.jobFilter");
+        expect(firstParam.text()).toContain("test");
+      }
+      const secondParam = queryParamsSummary.at(1);
+      if (secondParam) {
+        expect(secondParam.text()).toContain("jobquery.title.userFilter");
+        expect(secondParam.text()).toContain("user1");
+      }
+    });
+    it("renders correctly with no filters", async () => {
+      const wrapper = await mountActivityFilter();
+      wrapper.vm.displayOpts.showRecentFilter = false;
+      wrapper.vm.displayOpts.showFilter = false;
+      wrapper.vm.displayOpts.showSavedFilters = false;
+      await wrapper.vm.$nextTick();
+      expect(wrapper.find('[data-test-id="dropdown"]').exists()).toBe(false);
+      expect(wrapper.find('[data-test-id="filter-button"]').exists()).toBe(
+        false,
+      );
+      expect(wrapper.findComponent(SavedFilters).exists()).toBe(false);
+    });
+    it("opens the filter modal on filter button click", async () => {
+      const wrapper = await mountActivityFilter();
+      await wrapper.find('[data-test-id="filter-button"]').trigger("click");
+      await wrapper.vm.$nextTick();
+      expect(wrapper.vm.filterOpen).toBe(true);
+    });
+    it("emits select_filter event correctly", async () => {
+      const wrapper = await mountActivityFilter();
+      const selectFilterSpy = jest.spyOn(wrapper.vm, "selectFilter");
+      const savedFiltersComponent = wrapper.findComponent(SavedFilters);
+      savedFiltersComponent.vm.$emit("select_filter", {
+        query: { jobFilter: "test" },
+        filterName: "Test Filter",
+      });
+      await wrapper.vm.$nextTick();
+      expect(selectFilterSpy).toHaveBeenCalledWith({
+        query: { jobFilter: "test" },
+        filterName: "Test Filter",
+      });
+    });
+    it("handles search click", async () => {
+      const wrapper = await mountActivityFilter();
+      await wrapper.vm.$nextTick();
+      const searchSpy = jest.spyOn(wrapper.vm, "search");
+      const btnElement = wrapper.find(".btn-primary");
+      if (btnElement.exists()) {
+        await btnElement.trigger("click");
+        expect(searchSpy).toHaveBeenCalled();
+      }
+      searchSpy.mockRestore();
+    });
+    it("renders date filters correctly when recentFilter is set to '-'", async () => {
+      const wrapper = await mountActivityFilter();
+      wrapper.vm.query.recentFilter = "-";
+      await wrapper.vm.$nextTick();
+      expect(wrapper.find('[data-test-id="date-filters"]').exists()).toBe(true);
+    });
+    it("changes the date filter correctly", async () => {
+      const wrapper = await mountActivityFilter();
+      const dateFilter = wrapper.vm.DateFilters[0];
+      dateFilter.filter.enabled = true;
+      dateFilter.filter.datetime = "2024-05-18T12:00:00Z";
+      await wrapper.vm.$nextTick();
+      expect(wrapper.vm.query.startafterFilter).toBe("2024-05-18T12:00:00Z");
+      expect(dateFilter.filter.enabled).toBe(true);
+      dateFilter.filter.enabled = false;
+      await wrapper.vm.$nextTick();
+      expect(wrapper.vm.query.startafterFilter).toBe("");
+      expect(dateFilter.filter.enabled).toBe(false);
+    });
+    it("clears date filter when reset is called", async () => {
+      const wrapper = await mountActivityFilter();
+      wrapper.vm.query.startafterFilter = "2024-05-18T12:00:00Z";
+      await wrapper.vm.reset();
+      expect(wrapper.vm.query.startafterFilter).toBeUndefined();
     });
-    wrapper.vm.displayOpts.showRecentFilter = false;
-    wrapper.vm.displayOpts.showFilter = false;
-    wrapper.vm.displayOpts.showSavedFilters = false;
-    await wrapper.vm.$nextTick();
-    expect(wrapper.find('[data-test-id="dropdown"]').exists()).toBe(false);
-    expect(wrapper.find('[data-test-id="filter-button"]').exists()).toBe(false);
-    expect(wrapper.findComponent(SavedFilters).exists()).toBe(false);
   });
 });

From 076b16f0e091e5817015b6dac913bde7a36ca942 Mon Sep 17 00:00:00 2001
From: Jaya Singh <jaya@catalytic.com>
Date: Tue, 4 Jun 2024 11:56:58 -0500
Subject: [PATCH 8/8] deleted dateFilter file

---
 .../activity/tests/dateFilter.spec.ts         | 295 ------------------
 1 file changed, 295 deletions(-)
 delete mode 100644 rundeckapp/grails-spa/packages/ui-trellis/src/app/components/activity/tests/dateFilter.spec.ts

diff --git a/rundeckapp/grails-spa/packages/ui-trellis/src/app/components/activity/tests/dateFilter.spec.ts b/rundeckapp/grails-spa/packages/ui-trellis/src/app/components/activity/tests/dateFilter.spec.ts
deleted file mode 100644
index 1186c6da966..00000000000
--- a/rundeckapp/grails-spa/packages/ui-trellis/src/app/components/activity/tests/dateFilter.spec.ts
+++ /dev/null
@@ -1,295 +0,0 @@
-import { mount } from "@vue/test-utils";
-import dateFilter from "../dateFilter.vue";
-import _ from "lodash";
-
-let idCounter = 0;
-jest.spyOn(_, "uniqueId").mockImplementation(() => `uniqueId_${idCounter++}`);
-
-let wrapper;
-const defaultProps = {
-  modelValue: { enabled: false, datetime: "" },
-};
-
-const mountDateFilter = (options: any = {}) => {
-  return mount(dateFilter, {
-    props: {
-      ...defaultProps,
-      ...options.props,
-    },
-    slots: {
-      default: options.slots?.default || "slotContent",
-    },
-    global: {
-      mocks: {
-        $t: (msg) => msg,
-      },
-      stubs: {
-        btn: true,
-      },
-    },
-  });
-};
-
-describe("DateFilter", () => {
-  beforeEach(() => {
-    idCounter = 0;
-    jest.spyOn(_, "uniqueId").mockImplementation(() => {
-      const id = `uniqueId_${idCounter}`;
-      idCounter++;
-      return id;
-    });
-    wrapper = mountDateFilter();
-  });
-  afterEach(() => {
-    wrapper.unmount();
-  });
-  const findDropdown = () => wrapper.find("dropdown");
-  const findCheckbox = () => wrapper.find('input[type="checkbox"]');
-
-  describe("Initialization", () => {
-    it("initializes with correct data", () => {
-      expect(wrapper.vm.uid).toBeTruthy();
-      expect(wrapper.vm.enabled).toBe(false);
-      expect(wrapper.vm.datetime).toBe("");
-    });
-
-    it("sets uid correctly", () => {
-      expect(wrapper.vm.uid).toBe(`uniqueId_${idCounter - 1}`);
-    });
-
-    it("picker is initialized correctly", () => {
-      expect(wrapper.vm.picker).toBe(false);
-    });
-
-    it("checkbox is initially in correct state", () => {
-      expect(findCheckbox().element.checked).toBe(false);
-    });
-  });
-
-  describe("Rendering", () => {
-    it("renders checkbox and dropdown based on enabled property", async () => {
-      wrapper = mountDateFilter({
-        props: {
-          modelValue: {
-            enabled: true,
-            datetime: "2022-01-02T00:00:00",
-          },
-        },
-      });
-
-      // Check that checkbox is rendered
-      const checkbox = wrapper.find('input[type="checkbox"]');
-      expect(checkbox.exists()).toBe(true);
-
-      // Check that dropdown is rendered
-      const dropdown = wrapper.find("dropdown");
-      expect(dropdown.exists()).toBe(true);
-    });
-
-    it("renders checkbox and label", () => {
-      const checkboxSpan = wrapper.find('[data-testid="checkbox-span"]');
-      expect(checkboxSpan.exists()).toBe(true);
-      expect(checkboxSpan.find('input[type="checkbox"]').exists()).toBe(true);
-      expect(checkboxSpan.find("label").exists()).toBe(true);
-    });
-
-    it("does not render dropdown when checkbox is not checked", async () => {
-      await wrapper.setProps({ modelValue: { enabled: false, datetime: "" } });
-      await wrapper.vm.$nextTick();
-
-      expect(findDropdown().exists()).toBe(false);
-    });
-
-    it("renders dropdown when checkbox is checked", async () => {
-      await wrapper.setProps({ modelValue: { enabled: true, datetime: "" } });
-      await wrapper.vm.$nextTick();
-      const findDropdown = () => wrapper.find("dropdown");
-      expect(findDropdown().exists()).toBe(true);
-    });
-  });
-
-  describe("Event Emission", () => {
-    it("emits update:modelValue event when enabled changes", async () => {
-      await wrapper.setProps({ modelValue: { enabled: true, datetime: "" } });
-
-      await wrapper.vm.$nextTick();
-
-      expect(wrapper.emitted("update:modelValue")).toBeTruthy();
-      expect(wrapper.emitted("update:modelValue")[0]).toEqual([
-        { enabled: true, datetime: "" },
-      ]);
-    });
-
-    it("emits update:modelValue event when datetime prop changes", async () => {
-      await wrapper.setProps({
-        modelValue: { enabled: true, datetime: "2022-01-02T00:00:00" },
-      });
-
-      await wrapper.vm.$nextTick();
-
-      expect(wrapper.emitted("update:modelValue")).toBeTruthy();
-      expect(wrapper.emitted("update:modelValue")[0]).toEqual([
-        { enabled: true, datetime: "2022-01-02T00:00:00" },
-      ]);
-    });
-
-    it("emits update:modelValue when datetime data changes", async () => {
-      await wrapper.setProps({
-        modelValue: { enabled: false, datetime: "2022-01-02T00:00:00" },
-      });
-      await wrapper.vm.$nextTick();
-
-      expect(wrapper.emitted("update:modelValue")).toBeTruthy();
-      expect(wrapper.emitted("update:modelValue")[0]).toEqual([
-        { enabled: false, datetime: "2022-01-02T00:00:00" },
-      ]);
-    });
-  });
-
-  describe("Model Value Changes", () => {
-    it("updates enabled and datetime when modelValue changes", async () => {
-      wrapper = mountDateFilter({
-        props: {
-          modelValue: {
-            enabled: true,
-            datetime: "2022-01-02T00:00:00",
-          },
-        },
-      });
-
-      await wrapper.setProps({
-        modelValue: {
-          enabled: false,
-          datetime: "2022-01-03T00:00:00",
-        },
-      });
-    });
-
-    it("passes through invalid datetime inputs as-is", async () => {
-      const invalidDate = "not a date";
-      await wrapper.setProps({
-        modelValue: { enabled: true, datetime: invalidDate },
-      });
-      await wrapper.vm.$nextTick();
-      expect(wrapper.vm.datetime).toBe(invalidDate);
-      expect(wrapper.emitted("update:modelValue")).toBeTruthy();
-      expect(wrapper.emitted("update:modelValue")[0]).toEqual([
-        { enabled: true, datetime: invalidDate },
-      ]);
-    });
-  });
-
-  it("maintains correct state with rapid prop changes", async () => {
-    await wrapper.setProps({
-      modelValue: { enabled: true, datetime: "2022-01-02T00:00:00" },
-    });
-    await wrapper.vm.$nextTick();
-
-    await wrapper.setProps({
-      modelValue: { enabled: false, datetime: "2023-01-01T12:00:00" },
-    });
-    await wrapper.vm.$nextTick();
-    await wrapper.setProps({
-      modelValue: { enabled: true, datetime: "2024-01-01T12:00:00" },
-    });
-    await wrapper.vm.$nextTick();
-    expect(wrapper.vm.enabled).toBe(true);
-    expect(wrapper.vm.datetime).toBe("2024-01-01T12:00:00");
-  });
-});
-
-describe("Unique IDs", () => {
-  it("generates unique IDs for multiple instances", () => {
-    const firstInstance = mountDateFilter();
-    const secondInstance = mountDateFilter();
-    expect((firstInstance.vm as any).uid).not.toBe(
-      (secondInstance.vm as any).uid,
-    );
-  });
-  describe("Rendering", () => {
-    it("enabled changes when checkbox is clicked", async () => {
-      const checkbox = wrapper.find('input[type="checkbox"]');
-      await checkbox.setChecked(false);
-      expect(checkbox.element.checked).toBe(false);
-
-      checkbox.element.checked = true;
-      await checkbox.trigger("change");
-      await wrapper.vm.$nextTick();
-
-      expect(checkbox.element.checked).toBe(true);
-    });
-
-    it("uid is applied as id and for attributes", () => {
-      expect(wrapper.vm.uid).toBeDefined();
-      expect(wrapper.vm.uid).toBe(`uniqueId_0`);
-    });
-
-    it("renders provided slot content in label", async () => {
-      // Set the slot content
-      const slotContent = "Provided slot content";
-      wrapper = mountDateFilter({ slots: { default: slotContent } });
-      await wrapper.vm.$nextTick();
-
-      const label = wrapper.find("label");
-      expect(label.text()).toBe(slotContent);
-    });
-    it("binds datetime to text input", async () => {
-      wrapper = mountDateFilter();
-
-      const input = wrapper.find('input[type="text"]');
-      if (input.exists()) {
-        await input.setValue("2022-01-01T00:00:00");
-        await wrapper.vm.$nextTick();
-        console.log(input.html());
-        expect(wrapper.vm.datetime).toBe("2022-01-01T00:00:00");
-      } else {
-        console.log('input[type="text"] does not exist');
-      }
-    });
-
-    it("renders date-time-picker in dropdown", async () => {
-      wrapper = mountDateFilter();
-      await wrapper.vm.$nextTick();
-      const dateTimePicker = wrapper.find("date-time-picker");
-      if (dateTimePicker.exists()) {
-        expect(dateTimePicker.exists()).toBe(true);
-      } else {
-        console.log("date-time-picker does not exist");
-      }
-    });
-
-    it("binds datetime to date-time-picker", async () => {
-      const dateTimePicker = wrapper.find("date-time-picker");
-      if (dateTimePicker.exists()) {
-        await dateTimePicker.setValue("2022-01-01T00:00:00");
-        expect(wrapper.vm.datetime).toBe("2022-01-01T00:00:00");
-      }
-    });
-
-    it("renders btn with dropdown-toggle class", async () => {
-      // Set enabled to true
-      wrapper.setData({ enabled: true });
-
-      await wrapper.vm.$nextTick();
-
-      const dropdownToggle = wrapper.find(".dropdown-toggle");
-
-      expect(dropdownToggle.exists()).toBe(true);
-
-      if (dropdownToggle.exists()) {
-        console.log(dropdownToggle.html());
-      }
-    });
-    it("renders glyphicon glyphicon-calendar icon in btn", async () => {
-      wrapper.setData({ enabled: true });
-
-      await wrapper.vm.$nextTick();
-
-      const dropdownToggle = wrapper.find(".dropdown-toggle");
-      expect(dropdownToggle.exists()).toBe(true);
-
-      const glyphiconCalendar = wrapper.find(".glyphicon-calendar");
-      expect(glyphiconCalendar.exists()).toBe(true);
-    });
-  });
-});