Add cy Test for Navbar, StyledBlockHelp & StyledBlockInfo

webapp/cypress/component/NavbarTest.cy.jsx

@@ -0,0 +1,159 @@
+import Navbar from "@/components/Navbar.vue";
+import { createRouter, createWebHistory } from "vue-router";
+import { createStore } from "vuex";
+import LoginDetails from "@/components/LoginDetails.vue";
+
+describe("Navbar", () => {
+  let store;
+  let router;
+
+  beforeEach(() => {
+    store = createStore({
+      state: {
+        currentUserDisplayName: null,
+      },
+    });
+
+    router = createRouter({
+      history: createWebHistory(),
+      routes: [
+        { path: "/about", name: "About" },
+        { path: "/samples", name: "Samples" },
+        { path: "/collections", name: "Collections" },
+        { path: "/starting-materials", name: "Inventory" },
+        { path: "/equipment", name: "Equipment" },
+        { path: "/item-graph", name: "GraphView" },
+      ],
+    });
+  });
+
+  it("renders logo image when logo_url is provided", () => {
+    cy.mount(Navbar, {
+      global: {
+        plugins: [store, router],
+      },
+      data() {
+        return {
+          logo_url: "https://example.com/logo.png",
+          homepage_url: "https://example.com",
+        };
+      },
+    });
+
+    cy.get(".logo-banner").should("exist");
+    cy.get(".logo-banner").should("have.attr", "src", "https://example.com/logo.png");
+  });
+
+  it("renders logo image without link when homepage_url is not provided", () => {
+    cy.mount(Navbar, {
+      global: {
+        plugins: [store, router],
+      },
+      data() {
+        return {
+          logo_url: "https://example.com/logo.png",
+          homepage_url: null,
+        };
+      },
+    });
+
+    cy.get(".logo-banner").should("exist");
+    cy.get(".logo-banner.a").should("not.exist");
+  });
+
+  it("renders LoginDetails component", () => {
+    cy.mount(Navbar, {
+      global: {
+        plugins: [store, router],
+        components: {
+          LoginDetails,
+        },
+      },
+    });
+
+    cy.get(".row")
+      .should("exist")
+      .within(() => {
+        cy.contains("Login").should("exist");
+        cy.contains("Register").should("exist");
+      });
+  });
+
+  it("renders all navigation links with correct URLs", () => {
+    cy.mount(Navbar, {
+      global: {
+        plugins: [store, router],
+      },
+    });
+
+    cy.get("#nav").within(() => {
+      cy.contains("About").should("have.attr", "href", "/about");
+      cy.contains("Samples").should("have.attr", "href", "/samples");
+      cy.contains("Collections").should("have.attr", "href", "/collections");
+      cy.contains("Inventory").should("have.attr", "href", "/starting-materials");
+      cy.contains("Equipment").should("have.attr", "href", "/equipment");
+      cy.contains("Graph View").should("have.attr", "href", "/item-graph");
+    });
+  });
+
+  it("navigates to the correct route on link click", () => {
+    cy.mount(Navbar, {
+      global: {
+        plugins: [store, router],
+      },
+    });
+
+    cy.contains("About").click();
+    cy.url().should("include", "/about");
+
+    cy.contains("Samples").click();
+    cy.url().should("include", "/samples");
+
+    cy.contains("Collections").click();
+    cy.url().should("include", "/collections");
+
+    cy.contains("Inventory").click();
+    cy.url().should("include", "/starting-materials");
+
+    cy.contains("Equipment").click();
+    cy.url().should("include", "/equipment");
+
+    cy.contains("Graph View").click();
+    cy.url().should("include", "/item-graph");
+  });
+
+  it("shows login message when user is not logged in", () => {
+    cy.mount(Navbar, {
+      global: {
+        plugins: [store, router],
+      },
+      data() {
+        return {
+          logo_url: "https://example.com/logo.png",
+          homepage_url: "https://example.com",
+        };
+      },
+    });
+
+    cy.get(".alert-info").should("exist");
+    cy.get(".alert-info").should("contain.text", "Please login to view or create items.");
+  });
+
+  it("does not show login message when user is logged in", () => {
+    store.state.currentUserDisplayName = "Test User";
+
+    cy.mount(Navbar, {
+      global: {
+        plugins: [store, router],
+      },
+      data() {
+        return {
+          logo_url: "https://example.com/logo.png",
+          homepage_url: "https://example.com",
+        };
+      },
+    });
+
+    cy.get(".alert-info").should("not.exist");
+  });
+});

webapp/cypress/component/StyledBlockHelpTest.cy.jsx

@@ -0,0 +1,48 @@
+import StyledBlockHelp from "@/components/StyledBlockHelp.vue";
+
+describe("StyledBlockHelp Component", () => {
+  const blockInfo = {
+    name: "Sample Block",
+    description: "This is a sample block description.",
+    accepted_file_extensions: [".jpg", ".png", ".gif"],
+  };
+
+  it("renders the tooltip with correct content on hover", () => {
+    cy.mount(StyledBlockHelp, {
+      propsData: { blockInfo },
+    });
+
+    cy.get("a.dropdown-item").trigger("mouseenter");
+
+    cy.get("#tooltip")
+      .should("be.visible")
+      .within(() => {
+        cy.contains(blockInfo.description).should("be.visible");
+        cy.contains("Accepted file extensions:").should("be.visible");
+        cy.contains(".jpg, .png, .gif").should("be.visible");
+      });
+  });
+
+  it("hides the tooltip on mouseleave", () => {
+    cy.mount(StyledBlockHelp, {
+      propsData: { blockInfo },
+    });
+
+    cy.get("a.dropdown-item").trigger("mouseenter");
+    cy.get("a.dropdown-item").trigger("mouseleave");
+
+    cy.get("#tooltip").should("not.have.attr", "data-show");
+  });
+
+  it("shows and hides tooltip on focus and blur", () => {
+    cy.mount(StyledBlockHelp, {
+      propsData: { blockInfo },
+    });
+
+    cy.get("a.dropdown-item").focus();
+    cy.get("#tooltip").should("be.visible");
+
+    cy.get("a.dropdown-item").blur();
+    cy.get("#tooltip").should("not.have.attr", "data-show");
+  });
+});

webapp/cypress/component/StyledBlockInfoTest.cy.jsx

@@ -0,0 +1,52 @@
+import StyledBlockInfo from "@/components/StyledBlockInfo.vue";
+
+describe("StyledBlockInfo Component", () => {
+  const blockInfo = {
+    attributes: {
+      name: "Example Block",
+      description: "This is an example block description.",
+      accepted_file_extensions: [".pdf", ".docx", ".xlsx"],
+    },
+  };
+
+  it("renders the tooltip with correct content on hover", () => {
+    cy.mount(StyledBlockInfo, {
+      propsData: { blockInfo },
+    });
+
+    cy.get("a").trigger("mouseenter", { force: true });
+
+    cy.get("#tooltip")
+      .should("be.visible")
+      .within(() => {
+        cy.contains(blockInfo.attributes.name).should("be.visible");
+        cy.contains(blockInfo.attributes.description).should("be.visible");
+        cy.contains(".pdf").should("be.visible");
+        cy.contains(".docx").should("be.visible");
+        cy.contains(".xlsx").should("be.visible");
+      });
+  });
+
+  it("hides the tooltip on mouseleave", () => {
+    cy.mount(StyledBlockInfo, {
+      propsData: { blockInfo },
+    });
+
+    cy.get("a").trigger("mouseenter", { force: true });
+    cy.get("a").trigger("mouseleave", { force: true });
+
+    cy.get("#tooltip").should("not.have.attr", "data-show");
+  });
+
+  it("shows and hides tooltip on focus and blur", () => {
+    cy.mount(StyledBlockInfo, {
+      propsData: { blockInfo },
+    });
+
+    cy.get("a").focus();
+    cy.get("#tooltip").should("be.visible");
+
+    cy.get("a").blur();
+    cy.get("#tooltip").should("not.have.attr", "data-show");
+  });
+});

webapp/src/components/StyledBlockHelp.vue

@@ -2,6 +2,7 @@
   <a
     ref="anchor"
     class="dropdown-item"
+    tabindex="0"
     @mouseenter="delayedShowTooltip"
     @mouseleave="hideTooltip"
     @focus="delayedShowTooltip"

webapp/src/components/StyledBlockInfo.vue

@@ -1,6 +1,7 @@
 <template>
   <a
     ref="anchor"
+    tabindex="0"
     @mouseenter="delayedShowTooltip"
     @mouseleave="hideTooltip"
     @focus="delayedShowTooltip"