Merge branch 'main' into test/forms-1114-cypress-workflow

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

@@ -87,7 +87,9 @@ export default {
     },
   },
   async mounted() {
-    await this.readFormSubscriptionData(this.form.id);
+    if (this.canEditForm) {
+      await this.readFormSubscriptionData(this.form.id);
+    }
   },
   methods: {
     ...mapActions(useFormStore, [
@@ -134,9 +136,13 @@ export default {
 </script>
 
 <template>
-  <div :class="{ 'dir-rtl': isRTL }">
-    <v-expansion-panels v-model="settingsPanel" class="nrmc-expand-collapse">
-      <v-expansion-panel v-if="canEditForm" flat>
+  <div :class="{ 'dir-rtl': isRTL }" class="mt-2">
+    <v-expansion-panels
+      v-if="canEditForm"
+      v-model="settingsPanel"
+      class="nrmc-expand-collapse"
+    >
+      <v-expansion-panel flat>
         <!-- Form Settings -->
         <v-expansion-panel-title>
           <div class="header" :lang="lang">
@@ -190,8 +196,9 @@ export default {
       </v-expansion-panel>
     </v-expansion-panels>
 
+    <!-- Event Subscription -->
     <v-expansion-panels
-      v-if="isSubscribed"
+      v-if="isSubscribed && canEditForm"
       v-model="subscription"
       class="nrmc-expand-collapse"
     >
@@ -254,8 +261,12 @@ export default {
     </v-expansion-panels>
 
     <!-- CDOGS Template -->
-    <v-expansion-panels v-model="cdogsPanel" class="nrmc-expand-collapse">
-      <v-expansion-panel v-if="canEditForm" flat>
+    <v-expansion-panels
+      v-if="canEditForm"
+      v-model="cdogsPanel"
+      class="nrmc-expand-collapse"
+    >
+      <v-expansion-panel flat>
         <v-expansion-panel-title>
           <div class="header" :lang="lang">
             <strong>{{ $t('trans.manageForm.cdogsTemplate') }}</strong>

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

@@ -0,0 +1,68 @@
+import ManageForm from "~/components/forms/manage/ManageForm.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";
+import { FormPermissions } from '~/utils/constants';
+
+describe("ManageForm.vue", () => {
+
+    const pinia = createTestingPinia();
+    const router = createRouter({
+        history: createWebHistory(),
+        routes: getRouter().getRoutes(),
+    });
+
+    setActivePinia(pinia);
+    const formStore = useFormStore(pinia);
+
+    beforeEach(() => {
+        formStore.$reset();
+    });
+
+    it("does not call readFormSubscriptionData without permission", () => {
+        const readFormSpy = vi.spyOn(formStore, "readFormSubscriptionData");
+        formStore.permissions = [];
+        const wrapper = mount(ManageForm, {
+        global: {
+            plugins: [router, pinia],
+            mocks: {
+                $filters: {
+                  formatDate: vi.fn().mockReturnValue("formatted date")
+                }
+              },
+            provide: {
+                formDesigner: false,
+                draftId: '123-456',
+                formId: '123-456',
+            },
+        },
+        });
+        expect(readFormSpy).not.toHaveBeenCalled();
+     });
+
+     it("calls readFormSubscriptionData with correct permissions", () => {
+        const readFormSpy = vi.spyOn(formStore, "readFormSubscriptionData");
+        formStore.permissions = [FormPermissions.FORM_UPDATE];
+        const wrapper = mount(ManageForm, {
+        global: {
+            plugins: [router, pinia],
+            mocks: {
+                $filters: {
+                  formatDate: vi.fn().mockReturnValue("formatted date")
+                }
+              },
+            provide: {
+                formDesigner: false,
+                draftId: '123-456',
+                formId: '123-456',
+            },
+        },
+        });
+        expect(readFormSpy).toBeCalledTimes(1);
+     });
+
+});