Bug Fix: Error When Choosing Not to Unpublish a Form (bcgov#1331)

* removed routing

* disable toggle if navigating from form designer and click cancel

* rewrite cancel logic

* added some test cases

* updated tests

* fixed unpublish issue

* fixed unpublish issue

---------

Co-authored-by: jasonchung1871 <[email protected]>

app/frontend/src/components/forms/manage/ManageVersions.vue

@@ -127,29 +127,21 @@ export default {
     cancelPublish() {
       this.showPublishDialog = false;
       document.documentElement.style.overflow = 'auto';
-      if (this.draftId) {
-        this.$router
-          .replace({
-            name: 'FormDesigner',
-            query: {
-              f: this.formId,
-              d: this.draftId,
-              saved: true,
-            },
-          })
-          .catch(() => {});
-      }
-
       if (this.hasDraft) {
         const idx = this.drafts.map((d) => d.id).indexOf(this.publishOpts.id);
-        this.drafts[idx].published = !this.drafts[idx].published;
-      } else {
+        if (idx !== -1) {
+          this.drafts[idx].published = !this.drafts[idx].published;
+        }
+      }
+      if (this.form.versions) {
         const idx = this.form.versions
           .map((d) => d.id)
           .indexOf(this.publishOpts.id);
-        this.form.versions[idx].published = !this.form.versions[idx].published;
+        if (idx !== -1) {
+          this.form.versions[idx].published =
+            !this.form.versions[idx].published;
+        }
       }
-
       this.rerenderTable += 1;
     },
     togglePublish(value, id, version, isDraft) {
@@ -172,6 +164,11 @@ export default {
               id: item.id,
               isDraft: item.isDraft,
             };
+            // toggle switch state in data table
+            const idx = this.drafts.map((d) => d.id).indexOf(item.id);
+            if (idx !== -1) {
+              this.drafts[idx].published = true;
+            }
             document.documentElement.style.overflow = 'hidden';
             this.showPublishDialog = true;
           }

app/frontend/tests/unit/components/forms/manage/ManageVersions.spec.js

@@ -0,0 +1,99 @@
+import ManageVersions from '~/components/forms/manage/ManageVersions.vue';
+import { useFormStore } from "~/store/form";
+import { mount } from "@vue/test-utils";
+import { createTestingPinia } from "@pinia/testing";
+import { setActivePinia } from "pinia";
+import { createRouter, createWebHistory } from "vue-router";
+import { beforeEach, expect, vi } from "vitest";
+import getRouter from "~/router";
+
+describe("ManageVersions.vue", () => {
+  const pinia = createTestingPinia();
+  const router = createRouter({
+      history: createWebHistory(),
+      routes: getRouter().getRoutes(),
+  });
+
+  setActivePinia(pinia);
+  const formStore = useFormStore(pinia);
+
+  beforeEach(() => {
+      formStore.$reset();
+  });
+
+  it("publishes a draft when the status is toggled and continue is clicked", () => {
+    // spy on updatePublish method
+    const publishSpy = vi.spyOn(ManageVersions.methods, "updatePublish");
+    // mock a draft
+    formStore.drafts = [
+      {
+        id: '123-456',
+        version: '1',
+        published: false,
+      },
+    ];
+    const wrapper = mount(ManageVersions, {
+      global: {
+          plugins: [router, pinia],
+          mocks: {
+              $filters: {
+                formatDateLong: vi.fn().mockReturnValue("formatted date")
+              }
+            },
+          provide: {
+              formDesigner: false,
+              draftId: '123-456',
+              formId: '123-456',
+          },
+      },
+      });
+      // Call the togglePublish method (simulates user clicking the status toggle)
+      wrapper.vm.togglePublish(true, '123-456', '1', true);
+      // Find the BaseDialog with v-model="showPublishDialog"
+      const baseDialog = wrapper.findAllComponents({ name: 'BaseDialog' })
+      .find(w => w.props('type') === 'CONTINUE');
+      // Emit the continue-dialog event (simulate clicking continue in the dialog)
+      baseDialog.vm.$emit('continue-dialog');
+
+      expect(publishSpy).toHaveBeenCalled();
+  });
+
+  it("does not publish a draft when the status is toggled and cancel is clicked", () => {
+    // spy on updatePublish method
+    const publishSpy = vi.spyOn(ManageVersions.methods, "updatePublish");
+    // mock a draft
+    formStore.drafts = [
+      {
+        id: '123-456',
+        version: '1',
+        published: false,
+      },
+    ];
+    const wrapper = mount(ManageVersions, {
+      global: {
+          plugins: [router, pinia],
+          mocks: {
+              $filters: {
+                formatDateLong: vi.fn().mockReturnValue("formatted date")
+              }
+            },
+          provide: {
+              formDesigner: false,
+              draftId: '123-456',
+              formId: '123-456',
+          },
+      },
+      });
+      // Call the togglePublish method (simulates user clicking the status toggle)
+      wrapper.vm.togglePublish(true, '123-456', '2', true);
+      // Find the BaseDialog with v-model="showPublishDialog"
+      const baseDialog = wrapper.findAllComponents({ name: 'BaseDialog' })
+      .find(w => w.props('type') === 'CONTINUE');
+      // Emit the close-dialog event (simulate clicking cancel in the dialog)
+      baseDialog.vm.$emit('close-dialog');
+
+      expect(publishSpy).not.toHaveBeenCalled();
+  });
+
+
+});