breadcrumb component now accepts an object array with name and href information needed. Allows path with multiple slashes to be applied to a href

Author: RhysMAdey

src/components/Breadcrumbs.stories.tsx

@@ -12,31 +12,48 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {
-    path: "/first/second/third/last/",
+    path: [
+      { name: "first", href: "first" },
+      { name: "second", href: "second/could/be/here" },
+      { name: "third", href: "third" },
+      { name: "last", href: "/" },
+    ],
   },
 };
 
 export const ShortPath: Story = {
   args: {
-    path: "just one",
+    path: [{ name: "just one", href: "/" }],
   },
 };
 
 export const LongPath: Story = {
   args: {
-    path: "/first/the second/third/fourth/almost last/last one/",
+    path: [
+      { name: "first", href: "first" },
+      { name: "the second", href: "the/second" },
+      { name: "third", href: "third" },
+      { name: "fourth", href: "fourth/could/be/here" },
+      { name: "almost last", href: "almost last" },
+      { name: "last one", href: "/" },
+    ],
   },
 };
 
 export const Empty: Story = {
   args: {
-    path: "",
+    path: [],
   },
 };
 
 export const ColorChange: Story = {
   args: {
-    path: ["first", "second", "third", "last"],
+    path: [
+      { name: "first", href: "first" },
+      { name: "second", href: "second/could/be/here" },
+      { name: "third", href: "third" },
+      { name: "last", href: "/" },
+    ],
     rootProps: {
       sx: { backgroundColor: "blue" },
     },

src/components/Breadcrumbs.test.tsx

@@ -2,16 +2,12 @@ import { render, RenderResult } from "@testing-library/react";
 import { Breadcrumbs, getCrumbs } from "./Breadcrumbs";
 import "@testing-library/jest-dom";
 
+const defaultArrayObject = [
+  { name: "first", href: "first/is/this" },
+  { name: "second", href: "second" },
+  { name: "last one", href: "last one" },
+];
 describe("Breadcrumbs", () => {
-  const crumbFirst = "first",
-    crumbFirstTitle = "First",
-    crumbSecond = "second",
-    crumbSecondTitle = "Second",
-    crumbLast = "last one",
-    crumbLastTitle = "Last one",
-    defaultStringPath = `/${crumbFirst}/${crumbSecond}/${crumbLast}`,
-    defaultArrayPath = [crumbFirst, crumbSecond, crumbLast];
-
   function testHomeExists(renderResult: RenderResult) {
     const { getByTestId } = renderResult;
     const homeIcon = getByTestId("HomeIcon");
@@ -20,48 +16,12 @@ describe("Breadcrumbs", () => {
     expect(homeIcon.parentElement).toHaveAttribute("href", "/");
   }
 
-  function testCrumbsExist(renderResult: RenderResult) {
-    const { getAllByRole, getByRole, getByText, queryByRole } = renderResult;
-
-    expect(getAllByRole("link")).toHaveLength(3);
-
-    testHomeExists(renderResult);
-
-    let crumb = getByRole("link", { name: crumbFirstTitle });
-    expect(crumb).toBeInTheDocument();
-    expect(crumb).toHaveAttribute("href", `/${crumbFirst}`);
-
-    crumb = getByRole("link", { name: crumbSecondTitle });
-    expect(crumb).toBeInTheDocument();
-    expect(crumb).toHaveAttribute("href", `/${crumbFirst}/${crumbSecond}`);
-
-    expect(
-      queryByRole("link", { name: crumbLastTitle }),
-    ).not.toBeInTheDocument();
-    expect(getByText(crumbLastTitle)).toBeInTheDocument();
-  }
-
   it("should render without errors", () => {
-    render(<Breadcrumbs path={defaultStringPath} />);
-  });
-
-  it("should use a path as string", () => {
-    testCrumbsExist(render(<Breadcrumbs path={defaultStringPath} />));
-  });
-
-  it("should use a path as array", () => {
-    testCrumbsExist(render(<Breadcrumbs path={defaultArrayPath} />));
+    render(<Breadcrumbs path={defaultArrayObject} />);
   });
 
   it("should show just home when an empty string", () => {
-    const renderResult = render(<Breadcrumbs path={""} />);
-    testHomeExists(renderResult);
-    expect(renderResult.getAllByRole("link")).toHaveLength(1);
-  });
-
-  it("should show just home when an empty array", () => {
     const renderResult = render(<Breadcrumbs path={[]} />);
-
     testHomeExists(renderResult);
     expect(renderResult.getAllByRole("link")).toHaveLength(1);
   });
@@ -83,56 +43,23 @@ describe("getCrumbs", () => {
     },
   ];
 
-  it("should match if path string", () => {
-    expect(getCrumbs("/first/second/last one")).toStrictEqual(correctCrumbs);
-  });
-
-  it("should match if last slash included", () => {
-    expect(getCrumbs("/first/second/last one/")).toStrictEqual(correctCrumbs);
-  });
-
-  it("should match if first slash excluded", () => {
-    expect(getCrumbs("first/second/last one")).toStrictEqual(correctCrumbs);
-  });
-
-  it("should match if first slash excluded and last slash included", () => {
-    expect(getCrumbs("first/second/last one")).toStrictEqual(correctCrumbs);
-  });
-
-  it("should match path string with multi separators", () => {
-    expect(getCrumbs("///first//second/last one")).toStrictEqual(correctCrumbs);
-  });
-
-  it("should return an empty array when an empty string is passed", () => {
-    expect(getCrumbs("")).toStrictEqual([]);
-  });
-
-  it("should return an empty array when spaces are passed", () => {
-    expect(getCrumbs("  ")).toStrictEqual([]);
-  });
-
-  it("should match if path array", () => {
-    expect(getCrumbs(["first", "second", "last one"])).toStrictEqual(
-      correctCrumbs,
-    );
-  });
-
-  it("should match if path array with empty", () => {
-    expect(getCrumbs(["first", "second", "last one", ""])).toStrictEqual(
-      correctCrumbs,
-    );
-  });
-
-  it("should match by removing empty item", () => {
-    expect(getCrumbs(["first", "second", "last one", ""])).toStrictEqual(
-      correctCrumbs,
-    );
-  });
-
-  it("should match by removing spaces only", () => {
-    expect(getCrumbs(["first", "second", "last one", "   "])).toStrictEqual(
-      correctCrumbs,
-    );
+  it("should match with correct array object passed", () => {
+    expect(
+      getCrumbs([
+        {
+          name: "first",
+          href: "/first",
+        },
+        {
+          name: "second",
+          href: "/first/second",
+        },
+        {
+          name: "last one",
+          href: "/first/second/last one",
+        },
+      ])
+    ).toStrictEqual(correctCrumbs);
   });
 
   it("should return an empty array when an empty array is passed", () => {

src/components/Breadcrumbs.tsx

@@ -13,32 +13,26 @@ import {
 import HomeIcon from "@mui/icons-material/Home";
 import NavigateNextIcon from "@mui/icons-material/NavigateNext";
 
-interface BreadcrumbsProps {
-  path: string | string[];
-  rootProps?: PaperProps;
-  muiBreadcrumbsProps?: Mui_BreadcrumbsProps;
-}
-
 type CrumbData = {
   name: string;
   href: string;
 };
 
+interface BreadcrumbsProps {
+  path: Array<CrumbData>;
+  rootProps?: PaperProps;
+  muiBreadcrumbsProps?: Mui_BreadcrumbsProps;
+}
+
 /**
  * Create CrumbData from crumb parts with links
- * @param path A single string path, or an array of string parts
+ * @param pathData An array object that take in crumb names and hrefs
  */
-export function getCrumbs(path: string | string[]): CrumbData[] {
-  if (typeof path === "string") {
-    path = path.split("/");
-  }
-
-  const crumbs = path.filter((item) => item.trim() !== "");
-
-  return crumbs.map((crumb, i) => {
+export function getCrumbs(pathData: Array<CrumbData>): CrumbData[] {
+  return pathData.map((obj, i) => {
     return {
-      name: crumb.charAt(0).toUpperCase() + crumb.slice(1),
-      href: "/" + crumbs.slice(0, i + 1).join("/"),
+      name: obj.name.charAt(0).toUpperCase() + obj.name.slice(1),
+      href: obj.href,
     };
   });
 }