FOUR-18303 | Write Tests for Screen Templates Section

src/App.vue

@@ -52,6 +52,7 @@
             <screen-toolbar
               @undo="$refs.builder.undo()"
               @redo="$refs.builder.redo()"
+              @open-templates="openTemplatesPanel"
               @open-calc="openComputedProperties"
               @open-customCss="openCustomCSS"
               @open-watchers="openWatchersPopup"
@@ -111,6 +112,8 @@
           :screen="screen"
           title="Default"
           :render-controls="displayBuilder"
+          :show-templates-panel="showTemplatesPanel"
+          :reshow-templates-panel="reshowTemplatesPanel"
           @change="updateConfig"
         >
           <default-loading-spinner />
@@ -443,7 +446,11 @@ export default {
         minimap: {
           enabled: false
         }
-      }
+      },
+      showTemplatesPanel: false,
+      reshowTemplatesPanel: false,
+      myTemplatesData: null,
+      sharedTemplatesData: null,
     };
   },
   computed: {
@@ -696,6 +703,12 @@ export default {
     openWatchersPopup() {
       this.$refs.watchersPopup.show();
     },
+    openTemplatesPanel() {
+      this.showTemplatesPanel = true;
+      this.reshowTemplatesPanel = true;
+      this.$emit('update-templates-panel', this.showTemplatesPanel);
+      window.ProcessMaker.EventBus.$emit("open-templates-panel");
+    },
     openComputedProperties() {
       this.$refs.computedProperties.show();
     },

src/components/ScreenTemplates.vue

@@ -1,12 +1,32 @@
 <template>
-  <div>
+  <div data-cy="screen-templates-section">
     <div class="d-flex justify-content-between">
       <h6 class="pt-2">Select a Template</h6>
-      <button class="panel-close-btn" @click="$emit('close-templates-panel')"><i class="fas fa-times"></i></button>
+      <button
+        class="panel-close-btn"
+        @click="$emit('close-templates-panel')"
+        data-cy="close-templates-section"
+      >
+        <i class="fas fa-times"></i>
+      </button>
     </div>
     <div class="d-flex m-2 template-tabs justify-content-center">
-      <b-button @click="showMyTemplates" class="d-inline default-template-btn px-1" :class="{ 'my-templates-selected': myTemplatesSelected }">My Templates</b-button>
-      <b-button @click="showSharedTemplates" class="d-inline default-template-btn" :class="{ 'shared-templates-selected': sharedTemplatesSelected }">Shared Templates</b-button>
+      <b-button
+        @click="showMyTemplates"
+        class="d-inline default-template-btn px-1"
+        :class="{ 'my-templates-selected': myTemplatesSelected }"
+        data-cy="my-templates-tab"
+      >
+        My Templates
+      </b-button>
+      <b-button
+        @click="showSharedTemplates"
+        class="d-inline default-template-btn"
+        :class="{ 'shared-templates-selected': sharedTemplatesSelected }"
+        data-cy="shared-templates-tab"
+      >
+        Shared Templates
+      </b-button>
     </div>
     <div class="d-flex justify-content-center">
       <div v-if="myTemplatesSelected" class="d-flex justify-content-center p-0">

src/components/ScreenToolbar.vue

@@ -21,6 +21,15 @@
         <i class="fas fa-redo" />
         {{ $t("Redo") }}
       </b-button>
+      <b-button
+        class="screen-toolbar-button"
+        variant="link"
+        data-cy="screen-templates"
+        @click="$emit('open-templates')"
+      >
+        <i class="fas fa-palette" />
+        {{ $t("Templates") }}
+      </b-button>
       <b-button
         type="button"
         class="screen-toolbar-button"

src/components/vue-form-builder.vue

@@ -296,14 +296,15 @@
         no-body
         class="p-0 h-100 border-top-0 border-bottom-0 border-right-0 rounded-0"
       >
-        <div v-if="myTemplatesData && showTemplatesPanel">
+        <!--ADD NO TEMPLATES TO SHOW OPTION AND LOADING OPTION-->
+        <div v-if="showTemplatesPanel & !hideTemplatesPanel">
+        <!--{{ templatesPanelComp }}-->
           <b-card-body class="p-2 h-100 overflow-auto">
             <screen-templates
               ref="screenTemplates"
-              v-model="templates"
               :my-templates-data="myTemplatesData"
               :shared-templates-data="sharedTemplatesData"
-              @close-templates-panel="$emit('close-templates-panel')"
+              @close-templates-panel="closeTemplatesPanel"
               @show-shared-templates="$emit('show-shared-templates')"
             />
           </b-card-body>
@@ -657,9 +658,14 @@ export default {
       collapse: {},
       groupOrder: {},
       searchProperties: ['name'],
+      hideTemplatesPanel: false,
     };
   },
   computed: {
+  // templatesPanelComp() {
+  //   console.log('SHOWTEMPLATESPANEL =', this.showTemplatesPanel);
+  //   console.log('HIDETEMPLATESPANEL =', this.hideTemplatesPanel);
+  // },
     sortedPages() {
       return [...this.config].sort((a, b) => a.order - b.order);
     },
@@ -1291,7 +1297,7 @@ export default {
       });
     },
     inspect(element = {}) {
-      this.$emit('close-templates-panel');
+      this.closeTemplatesPanel();
       this.inspection = element;
       this.selected = element;
       const defaultAccordion = this.accordions.find(
@@ -1425,7 +1431,10 @@ export default {
       this.updateState();
       this.inspect(clone);
     },
-
+    closeTemplatesPanel() {
+      this.hideTemplatesPanel = true;
+      window.ProcessMaker.EventBus.$emit("close-templates-panel");
+    },
   }
 };
 </script>

tests/e2e/specs/ScreenTemplateSection.js

@@ -0,0 +1,84 @@
+describe('Screen Template Section', () => {
+  it('Opens the screen template panel when Templates button is clicked', () => {
+    cy.visit("/");
+    cy.get("[data-cy=screen-templates]").click();
+    cy.get("[data-cy=screen-templates-section]").should(
+      "be.visible"
+    );
+  })
+});
+
+it("Closes the screen template panel when X button is clicked", () => {
+  cy.visit("/");
+  cy.get("[data-cy=screen-templates]").click();
+  cy.get("[data-cy=screen-templates-section]").should(
+    "be.visible"
+  );
+  cy.get("[data-cy=close-templates-section]").click();
+  cy.get("[data-cy=screen-templates-section]").should(
+    "not.exist"
+  );
+});
+
+it("Displays My Templates when My Templates button is clicked", () => {
+  cy.visit("/");
+  cy.get("[data-cy=screen-templates]").click();
+  cy.get("[data-cy=screen-templates-section]").should(
+    "be.visible"
+  );
+  cy.get("[data-cy=screen-templates]").click();
+  cy.get("[data-cy=my-templates-tab]").click();
+
+  // CHECK REQUEST DATA FOR is_public = 0
+
+  cy.intercept(
+    "POST",
+    "/api/1.0/scripts/execute/1",
+    JSON.stringify({
+      output: [
+        {
+          value: "Jobs",
+          content: "Steve Jobs"
+        },
+        {
+          value: "Musk",
+          content: "Elon Musk"
+        }
+      ]
+    })
+  );
+
+});
+
+it("Displays Shared Templates when Shared Templates button is clicked", () => {
+  cy.visit("/");
+  cy.get("[data-cy=screen-templates]").click();
+  cy.get("[data-cy=screen-templates-section]").should(
+    "be.visible"
+  );
+  cy.get("[data-cy=screen-templates]").click();
+  cy.get("[data-cy=shared-templates-tab]").click();
+
+  // CHECK REQUEST DATA FOR is_public = 1
+
+});
+
+it("Is hidden when an Inspector Panel should open", () => {
+  cy.visit("/");
+
+  cy.get("[data-cy=screen-templates]").click();
+  cy.get("[data-cy=screen-templates-section]").should(
+    "be.visible"
+  );
+
+  cy.setPreviewDataInput({ name: "" });
+  cy.openAcordeon("collapse-1");
+  cy.get("[data-cy=controls-FormInput]").drag("[data-cy=screen-drop-zone]", {
+    position: "bottom"
+  });
+  cy.get("[data-cy=screen-element-container]").click();
+
+  cy.get("[data-cy=screen-templates-section]").should(
+    "not.exist"
+  );
+});