navbar tests

cypress/component/themeToggle.cy.tsx

@@ -1,27 +1,30 @@
-import React from 'react';
+import React from "react";
 import ThemeSwitcher from "../../components/ThemeSwitcher";
 import Home from "@/app/page";
-import useDarkMode from '@/hooks/useDarkMode';
-import '../../app/globals.css';
+import "@/css/theme-toggle.css";
 
-describe('ThemeSwitcher component', () => {
-  it('should toggle between light and dark mode', () => {
+describe("ThemeSwitcher component", () => {
+  it("should toggle between light and dark mode", () => {
     cy.mount(<Home />);
     cy.mount(<ThemeSwitcher />);
     cy.wait(100);
 
     // checking that the toggle is there and light mode is active
-    cy.get('.toggle').should('exist');
-    cy.get('.toggle').should(($toggle) => {
-        const backgroundImage = $toggle.css('background-image');
-        expect(backgroundImage).to.include('linear-gradient(rgb(0, 255, 255), rgb(135, 206, 235)');
+    cy.get(".toggle").should("exist");
+    cy.get(".toggle").should(($toggle) => {
+      const backgroundImage = $toggle.css("background-image");
+      expect(backgroundImage).to.include(
+        "linear-gradient(rgb(0, 255, 255), rgb(135, 206, 235)"
+      );
     });
     // checking that the toggle is clickable and dark mode is active
-    cy.get('.toggle').click();
-    cy.get('.toggle-dark').should('exist');
-    cy.get('.toggle-dark').should(($toggle) => {
-        const backgroundImage = $toggle.css('background-image');
-        expect(backgroundImage).to.include('linear-gradient(rgb(25, 25, 112), rgb(102, 51, 153)');
+    cy.get(".toggle").click();
+    cy.get(".toggle-dark").should("exist");
+    cy.get(".toggle-dark").should(($toggle) => {
+      const backgroundImage = $toggle.css("background-image");
+      expect(backgroundImage).to.include(
+        "linear-gradient(rgb(25, 25, 112), rgb(102, 51, 153)"
+      );
     });
   });
-});
+});

cypress/e2e/links.cy.ts

@@ -6,8 +6,10 @@ describe("Test all links", () => {
   };
 
   it("Check navbar links point to correct pathname as a slug", () => {
+    cy.viewport(600, 600);
     cy.visit("/");
     pages.forEach((page) => {
+      cy.get(".hamburger-button").click();
       cy.contains(page, { matchCase: false }).click();
       cy.location("pathname").should("eq", `/${navLinkToSlug(page)}`); // url path matches link name, replacing whitespace with hyphens
       cy.go("back");

cypress/e2e/navbar.cy.tsx

@@ -0,0 +1,31 @@
+describe("Mobile Navbar", () => {
+  beforeEach(() => {
+    cy.viewport(600, 600);
+    cy.visit("/");
+  });
+
+  it("hamburger menu on mobile screens", () => {
+    cy.get(".mobile-menu").should("be.not.hidden");
+    cy.get(".desktop-menu").should("be.hidden");
+  });
+
+  it("hamburger button available", () => {
+    cy.get(".hamburger-button").should("be.visible");
+  });
+});
+
+describe("Desktop Navbar", () => {
+  beforeEach(() => {
+    cy.viewport("macbook-15");
+    cy.visit("/");
+  });
+
+  it("desktop menu on larger screens", () => {
+    cy.get(".mobile-menu").should("be.hidden");
+    cy.get(".desktop-menu").should("be.not.hidden");
+  });
+
+  it("hamburger button hidden", () => {
+    cy.get(".hamburger-button").should("be.not.visible");
+  });
+});