Added a test for defining replace_fields as prop & attribute to Composer

components/composer/src/index.html

@@ -13,6 +13,9 @@
     <script>
       document.addEventListener("DOMContentLoaded", function () {
         const composer = document.querySelector("nylas-composer");
+        composer.replace_fields = [{ from: "[hi]", to: "hello" }];
+        // This is same as setting below, attribute with strigified value
+        // composer.setAttribute("replace_fields", JSON.stringify([{ "from": "[hi]", "to": "hello" }]));
         composer.addEventListener("composerMinimized", function (event) {
           console.log("Composer Minimized", event.detail);
         });
@@ -49,7 +52,6 @@
     <nylas-composer
       id="demo-composer"
       theme="dark"
-      replace_fields='[{"from": "[hi]", "to": "hello"}]'
       template="Hey what up!<br/>
       <br/>
       <br/>

components/composer/src/init.spec.js

@@ -418,6 +418,55 @@ describe("Composer html", () => {
           cy.get(".nylas-composer").should("not.exist");
         });
     });
+
+    it("Replaces merge fields as defined in replace_fields when passed as a strinigfied version", () => {
+      element.value.body = `[hi] what up!<br />
+      <br />
+      <br />
+      Thanks,
+      -Phil`;
+      cy.get("nylas-composer")
+        .as("composer")
+        .then((el) => {
+          const component = el[0];
+          component.setAttribute(
+            "replace_fields",
+            '[{"from": "[hi]", "to": "Hello"}]',
+          );
+          console.log(component);
+          cy.get(".html-editor[contenteditable=true]")
+            .invoke("prop", "innerHTML")
+            .then((html) => {
+              console.log(html);
+              expect(html).to.include(
+                "Hello what up!<br>\n      <br>\n      <br>\n      Thanks,\n      -Phil",
+              );
+            });
+        });
+    });
+
+    it("Replaces merge fields as defined in replace_fields when passed a prop", () => {
+      element.value.body = `[hi] what up!<br />
+      <br />
+      <br />
+      Thanks,
+      -Phil`;
+      cy.get("nylas-composer")
+        .as("composer")
+        .then((el) => {
+          const component = el[0];
+          component.replace_fields = [{ from: "[hi]", to: "Hello" }];
+          console.log(component);
+          cy.get(".html-editor[contenteditable=true]")
+            .invoke("prop", "innerHTML")
+            .then((html) => {
+              console.log(html);
+              expect(html).to.include(
+                "Hello what up!<br>\n      <br>\n      <br>\n      Thanks,\n      -Phil",
+              );
+            });
+        });
+    });
   });
 
   describe("File upload", () => {