add bread crumb test

Author: tigawanna

e2e-tests/dashboard/dashboard-layout-sidebar.spec.ts

@@ -6,6 +6,10 @@ async function checkLinkNameAndNavigateToIt(page: Page, locator: Locator,mobile=
     await expect(await locator.nth(index).textContent()).toBe(link.name);
     await locator.nth(index).click();
     await expect(page).toHaveTitle(`Dashboard - ${link.name}`);
+    const breadCrumbs = await page.locator('[data-test="OneTSRBreadCrumb"]');
+    await expect(await breadCrumbs.count()).toBeGreaterThan(0)
+    const breadCrumbName = link.href.split("/").pop();
+    await expect(await breadCrumbs.first().textContent()).toBe(breadCrumbName);
     await page.goBack();
     if(mobile){
       // open the mobile sidebar again
@@ -70,3 +74,5 @@ test("test mobile dashboard sidebar", async ({ page }) => {
   await expect(await mobileSidebarLinks.count()).toBe(dashboard_routes.length);
   await checkLinkNameAndNavigateToIt(page, mobileSidebarLinks,true);
 });
+
+

src/lib/tanstack/router/TSRBreadCrumbs.tsx

@@ -22,7 +22,10 @@ export function TSRBreadCrumbs({}: TSRBreadCrumbsProps) {
   const { breadcrumb_routes } = useTSRBreadCrumbs();
   if (breadcrumb_routes.length < 2) return null;
   return (
-    <div className="gap-0.1 flex  flex-wrap p-1 px-3 md:justify-end">
+    <div
+      data-test="TSRBreadCrumbs"
+      className="gap-0.1 flex flex-wrap p-1 px-3 md:justify-end"
+    >
       <Breadcrumb>
         <BreadcrumbList>
           {breadcrumb_routes.map((crumb) => {
@@ -32,7 +35,10 @@ export function TSRBreadCrumbs({}: TSRBreadCrumbsProps) {
             ) {
               return (
                 <BreadcrumbItem key={crumb.path}>
-                  <BreadcrumbPage className="hover:text-accent-text line-clamp-1 cursor-pointer text-xs hover:max-w-fit hover:duration-300 hover:animate-in hover:fade-in">
+                  <BreadcrumbPage
+                    data-test="OneTSRBreadCrumb"
+                    className="hover:text-accent-text line-clamp-1 cursor-pointer text-xs hover:max-w-fit hover:duration-300 hover:animate-in hover:fade-in"
+                  >
                     {crumb.name}
                   </BreadcrumbPage>
                 </BreadcrumbItem>