handle pages with no wrapping html tag when building up final page HTML

ProjectEvergreen · Dec 28, 2024 · e564367 · e564367
1 parent dee1bd4
commit e564367
Show file tree

Hide file tree

Showing 6 changed files with 68 additions and 13 deletions.
diff --git a/packages/cli/src/lib/layout-utils.js b/packages/cli/src/lib/layout-utils.js
@@ -218,9 +218,9 @@ async function getAppLayout(pageLayoutContents, compilation, customImports = [],
             : matchingRoute.label;
     }
 
-    const mergedHtml = pageRoot && pageRoot.querySelector('html').rawAttrs !== ''
+    const mergedHtml = pageRoot && pageRoot.querySelector('html') && pageRoot.querySelector('html')?.rawAttrs !== ''
       ? `<html ${pageRoot.querySelector('html').rawAttrs}>`
-      : appRoot.querySelector('html').rawAttrs !== ''
+      : appRoot && appRoot.querySelector('html') && appRoot.querySelector('html')?.rawAttrs !== ''
         ? `<html ${appRoot.querySelector('html').rawAttrs}>`
         : '<html>';
 

diff --git a/...layouts-page-and-app-dynamic/build.default.workspace-layouts-page-and-app-dynamic.spec.js b/...layouts-page-and-app-dynamic/build.default.workspace-layouts-page-and-app-dynamic.spec.js
@@ -14,7 +14,8 @@
  * User Workspace
  * src/
  *   pages/
- *     index.md
+ *     about.md
+ *     index.html
  *   layouts/
  *     app.js
  *     page.js
@@ -50,7 +51,7 @@ describe('Build Greenwood With: ', function() {
 
     runSmokeTest(['public'], LABEL);
 
-    describe('Custom App and Page Layout', function() {
+    describe('Custom App and page with no <html> wrapping element', function() {
       let dom;
 
       before(async function() {
@@ -71,6 +72,53 @@ describe('Build Greenwood With: ', function() {
         expect(heading[0].textContent).to.equal('App Layout');
       });
 
+      it('should not have the expected <h2> tag from the dynamic page layout', function() {
+        const heading = dom.window.document.querySelectorAll('h2');
+
+        expect(heading.length).to.equal(0);
+      });
+
+      it('should have the expected content from the index.md', function() {
+        const heading = dom.window.document.querySelectorAll('h3');
+        const paragraph = dom.window.document.querySelectorAll('p');
+
+        expect(heading.length).to.equal(1);
+        expect(heading[0].textContent).to.equal('Home Page');
+
+        expect(paragraph.length).to.equal(1);
+        expect(paragraph[0].textContent).to.equal('Coffey was here');
+      });
+
+      it('should have the expected <footer> tag from the dynamic app layout', function() {
+        const year = new Date().getFullYear();
+        const footer = dom.window.document.querySelectorAll('footer');
+
+        expect(footer.length).to.equal(1);
+        expect(footer[0].textContent).to.equal(`${year}`);
+      });
+    });
+
+    describe('Custom App and Page Layout', function() {
+      let dom;
+
+      before(async function() {
+        dom = await JSDOM.fromFile(path.resolve(this.context.publicDir, 'about/index.html'));
+      });
+
+      it('should have the expected <title> tag from the dynamic app layout', function() {
+        const title = dom.window.document.querySelectorAll('head title');
+
+        expect(title.length).to.equal(1);
+        expect(title[0].textContent).to.equal('App Layout');
+      });
+
+      it('should have the expected <h1> tag from the dynamic app layout', function() {
+        const heading = dom.window.document.querySelectorAll('h1');
+
+        expect(heading.length).to.equal(1);
+        expect(heading[0].textContent).to.equal('App Layout');
+      });
+
       it('should have the expected <h2> tag from the dynamic page layout', function() {
         const heading = dom.window.document.querySelectorAll('h2');
 
@@ -83,10 +131,10 @@ describe('Build Greenwood With: ', function() {
         const paragraph = dom.window.document.querySelectorAll('p');
 
         expect(heading.length).to.equal(1);
-        expect(heading[0].textContent).to.equal('Home Page');
+        expect(heading[0].textContent).to.equal('About Page');
 
         expect(paragraph.length).to.equal(1);
-        expect(paragraph[0].textContent).to.equal('Coffey was here');
+        expect(paragraph[0].textContent).to.equal('Learn more about us');
       });
 
       it('should have the expected <footer> tag from the dynamic app layout', function() {

diff --git a/...s/cli/test/cases/build.default.workspace-layouts-page-and-app-dynamic/src/layouts/page.js b/...s/cli/test/cases/build.default.workspace-layouts-page-and-app-dynamic/src/layouts/page.js
@@ -1,10 +1,12 @@
 export default class PageLayout extends HTMLElement {
   async connectedCallback() {
     this.innerHTML = `
-      <body>
-        <h2>Page Layout</h2>
-        <content-outlet></content-outlet>
-      </body>
+      <html>
+        <body>
+          <h2>Page Layout</h2>
+          <content-outlet></content-outlet>
+        </body>
+      </html>
     `;
   }
 }
diff --git a/...t/cases/build.default.workspace-layouts-page-and-app-dynamic/src/pages/about.md b/...t/cases/build.default.workspace-layouts-page-and-app-dynamic/src/pages/about.md
@@ -0,0 +1,3 @@
+### About Page
+
+Learn more about us
diff --git a/.../cli/test/cases/build.default.workspace-layouts-page-and-app-dynamic/src/pages/index.html b/.../cli/test/cases/build.default.workspace-layouts-page-and-app-dynamic/src/pages/index.html
@@ -0,0 +1,5 @@
+
+<body>
+  <h3>Home Page</h3>
+  <p>Coffey was here</p>
+</body>
diff --git a/...t/cases/build.default.workspace-layouts-page-and-app-dynamic/src/pages/index.md b/...t/cases/build.default.workspace-layouts-page-and-app-dynamic/src/pages/index.md