escape special characters in mpa content (#743)

* escape special characters in mpa content with replace * add MPA HTML replace regex test case
ProjectEvergreen · Oct 1, 2021 · b9bb298 · b9bb298
1 parent 94435da
commit b9bb298
Show file tree

Hide file tree

Showing 3 changed files with 335 additions and 3 deletions.
diff --git a/packages/cli/src/plugins/resource/plugin-optimization-mpa.js b/packages/cli/src/plugins/resource/plugin-optimization-mpa.js
@@ -81,7 +81,7 @@ class OptimizationMPAResource extends ResourceInterface {
           <body>\n
             
             <router-outlet>
-              ${bodyContents}\n
+              ${bodyContents.replace(/\$/g, '$$$')}\n
             </router-outlet>
             
             ${routeTags.join('\n')}

diff --git a/packages/cli/test/cases/build.config.mode-mpa/build.config.mode-mpa.spec.js b/packages/cli/test/cases/build.config.mode-mpa/build.config.mode-mpa.spec.js
@@ -101,7 +101,7 @@ describe('Build Greenwood With: ', function() {
       it('should have two <greenwood-route> tags in the <body> for the content', function() {
         const routeTags = dom.window.document.querySelectorAll('body > greenwood-route');
 
-        expect(routeTags.length).to.be.equal(2);
+        expect(routeTags.length).to.be.equal(3);
       });
 
       it('should have the expected properties for each <greenwood-route> tag for the about page', function() {
@@ -127,7 +127,7 @@ describe('Build Greenwood With: ', function() {
       });
 
       it('should have the expected number of _route partials in the output directory for each page', function() {
-        expect(partials.length).to.be.equal(2);
+        expect(partials.length).to.be.equal(3);
       });
 
       it('should have the expected partial output to match the contents of the home page in the <router-outlet> tag in the <body>', function() {
@@ -146,6 +146,33 @@ describe('Build Greenwood With: ', function() {
 
     });
 
+    // https://github.com/ProjectEvergreen/greenwood/pull/743
+    describe('MPA (Multi Page Application) Regex <body> Test', function() {
+      let dom;
+
+      before(async function() {
+        dom = await JSDOM.fromFile(path.resolve(this.context.publicDir, 'regex-test/index.html'));
+      });
+
+      it('should not have duplicate <app-footer> custom elements', function() {
+        const footer = dom.window.document.querySelectorAll('body footer');
+
+        expect(footer.length).to.be.equal(1);
+      });
+
+      it('should not have duplicate <app-header> custom elements', function() {
+        const header = dom.window.document.querySelectorAll('body header');
+
+        expect(header.length).to.be.equal(1);
+      });
+
+      it('should only have three cards', function() {
+        const cards = dom.window.document.querySelectorAll('body app-card');
+
+        expect(cards.length).to.be.equal(3);
+      });
+    });
+
   });
 
   after(function() {