From 54de90278c671530e5dfb8adbb43188be884d25f Mon Sep 17 00:00:00 2001 From: Vijaivir Dhaliwal <91633223+vijaivir@users.noreply.github.com> Date: Tue, 14 May 2024 17:12:56 -0700 Subject: [PATCH] Bug Fix: Error When Choosing Not to Unpublish a Form (#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 <101672465+jasonchung1871@users.noreply.github.com> --- .../forms/manage/ManageVersions.vue | 31 +++--- .../forms/manage/ManageVersions.spec.js | 99 +++++++++++++++++++ 2 files changed, 113 insertions(+), 17 deletions(-) create mode 100644 app/frontend/tests/unit/components/forms/manage/ManageVersions.spec.js diff --git a/app/frontend/src/components/forms/manage/ManageVersions.vue b/app/frontend/src/components/forms/manage/ManageVersions.vue index 2b478aa8c..94be9d18e 100644 --- a/app/frontend/src/components/forms/manage/ManageVersions.vue +++ b/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; } diff --git a/app/frontend/tests/unit/components/forms/manage/ManageVersions.spec.js b/app/frontend/tests/unit/components/forms/manage/ManageVersions.spec.js new file mode 100644 index 000000000..ef8617522 --- /dev/null +++ b/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(); + }); + + +});