add test cases for the header

ProjectEvergreen · May 17, 2024 · 620f6c3 · 620f6c3
1 parent 69e8829
commit 620f6c3
Show file tree

Hide file tree

Showing 2 changed files with 110 additions and 18 deletions.
diff --git a/src/components/header/header.js b/src/components/header/header.js
@@ -16,10 +16,10 @@ export default class Header extends HTMLElement {
       this.shadowRoot.innerHTML = `
         <header>
           <div class="logo-bar">
-            <img class="greenwood-logo" src="/assets/greenwood-logo.svg" alt="Logo">
+            <img class="greenwood-logo" src="/assets/greenwood-logo.svg" alt="Greenwood Logo">
           </div>
 
-          <div class="nav-bar">
+          <nav class="nav-bar">
             <ul class="nav-bar-menu">
               <li class="nav-bar-menu-item">
                 <a href="/docs/" title="Documentation">Docs</a>
@@ -55,20 +55,21 @@ export default class Header extends HTMLElement {
             <div class="mobile-menu">
               ${mobileMenuIcon}
             </div>
-
-            <ul class="mobile-menu-items">
-              <li class="nav-bar-menu-item">
-                <a href="/docs/" title="Documentation">Docs</a>
-              </li>
-              <li class="nav-bar-menu-item">
-                <a href="/guides/" title="Guides">Guides</a>
-              </li>
-              <li class="nav-bar-menu-item">
-                <a href="/blog/" title="Blog">Blog</a>
-              </li>
-            </ul>
-                  
-          </div>
+            
+            <nav class="nav-bar-mobile">
+              <ul class="mobile-menu-items">
+                <li class="nav-bar-menu-item">
+                  <a href="/docs/" title="Documentation">Docs</a>
+                </li>
+                <li class="nav-bar-menu-item">
+                  <a href="/guides/" title="Guides">Guides</a>
+                </li>
+                <li class="nav-bar-menu-item">
+                  <a href="/blog/" title="Blog">Blog</a>
+                </li>
+              </ul>
+            </nav>
+          </nav>
         </header>
 
         <!-- Mobile menu Overlay -->

diff --git a/src/components/header/header.spec.js b/src/components/header/header.spec.js
@@ -2,6 +2,35 @@ import { expect } from "@esm-bundle/chai";
 import "./header.js";
 
 describe("Components/Header", () => {
+  const NAV = [
+    {
+      title: "Documentation",
+      label: "Docs",
+    },
+    {
+      title: "Guides",
+      label: "Guides",
+    },
+    {
+      title: "Blog",
+      label: "Blog",
+    },
+  ];
+  const ICONS = [
+    {
+      link: "https://github.com/ProjectEvergreen/greenwood",
+      title: "GitHub",
+    },
+    {
+      link: "https://discord.gg/bsy9jvWh",
+      title: "Discord",
+    },
+    {
+      link: "https://twitter.com/PrjEvergreen",
+      title: "Twitter",
+    },
+  ];
+
   let header;
 
   before(async () => {
@@ -14,10 +43,72 @@ describe("Components/Header", () => {
   describe("Default Behavior", () => {
     it("should not be null", () => {
       expect(header).not.equal(undefined);
-      expect(header.shadowRoot.querySelectorAll(".logo-bar").length).equal(1);
+      expect(header.shadowRoot.querySelectorAll("header").length).equal(1);
+    });
+
+    it("should have the Greenwood logo", () => {
+      const logo = header.shadowRoot.querySelectorAll("img[alt='Greenwood Logo'");
+
+      expect(logo.length).equal(1);
+      expect(logo[0]).not.equal(undefined);
+    });
+
+    it("should have the expected desktop navigation links", () => {
+      const links = header.shadowRoot.querySelectorAll("nav ul:not(.mobile-menu-items) li a");
+
+      Array.from(links).forEach((link) => {
+        const navItem = NAV.find(
+          (nav) => `/${nav.label.toLowerCase()}/` === link.getAttribute("href"),
+        );
+
+        expect(navItem).to.not.equal(undefined);
+        expect(link.textContent).to.equal(navItem.label);
+        expect(link.getAttribute("title")).to.equal(navItem.title);
+      });
     });
 
-    // TODO navigation item test
+    it("should have the expected social link icons", () => {
+      const links = header.shadowRoot.querySelectorAll(".social-tray li a");
+      const icons = header.shadowRoot.querySelectorAll(".social-tray li a svg");
+
+      expect(links.length).to.equal(3);
+      expect(icons.length).to.equal(3);
+
+      Array.from(links).forEach((link) => {
+        const iconItem = ICONS.find((icon) => icon.title === link.getAttribute("title"));
+
+        expect(iconItem).to.not.equal(undefined);
+        expect(link.getAttribute("href")).to.equal(iconItem.link);
+      });
+    });
+  });
+
+  describe("Mobile Menu", () => {
+    it("should have the expected mobile navigation links", () => {
+      const links = header.shadowRoot.querySelectorAll("nav.nav-bar-mobile ul li a");
+
+      Array.from(links).forEach((link) => {
+        const navItem = NAV.find(
+          (nav) => `/${nav.label.toLowerCase()}/` === link.getAttribute("href"),
+        );
+
+        expect(navItem).to.not.equal(undefined);
+        expect(link.textContent).to.equal(navItem.label);
+        expect(link.getAttribute("title")).to.equal(navItem.title);
+      });
+    });
+
+    it("should have the expected overlay container", () => {
+      const overlay = header.shadowRoot.querySelectorAll(".overlay");
+
+      expect(overlay.length).to.equal(1);
+    });
+
+    it("should have the expected close button", () => {
+      const button = header.shadowRoot.querySelectorAll("button");
+
+      expect(button.length).to.equal(1);
+    });
   });
 
   after(() => {