test: move breadcrumb rendering to client (#67986)

Co-authored-by: sembauke <sembauke@users.noreply.github.com>

client/src/templates/Challenges/components/bread-crumb.test.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { describe, expect, test, vi } from 'vitest';
+
+import BreadCrumb from './bread-crumb';
+
+vi.mock('i18next', () => ({
+  default: {
+    t: (key: string) => key
+  }
+}));
+
+describe('<BreadCrumb />', () => {
+  test('renders superblock and block links', () => {
+    render(
+      <BreadCrumb
+        block='workshop-cat-photo-app'
+        superBlock='responsive-web-design-v9'
+      />
+    );
+
+    expect(
+      screen.getByRole('navigation', { name: 'aria.breadcrumb-nav' })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('link', {
+        name: 'intro:responsive-web-design-v9.title'
+      })
+    ).toHaveAttribute('href', '/learn/responsive-web-design-v9');
+    expect(
+      screen.getByRole('link', {
+        name: 'intro:responsive-web-design-v9.blocks.workshop-cat-photo-app.title'
+      })
+    ).toHaveAttribute(
+      'href',
+      '/learn/responsive-web-design-v9/#workshop-cat-photo-app'
+    );
+  });
+});

e2e/bread-crumb.spec.ts

@@ -12,7 +12,8 @@ test.beforeEach(async ({ page }) => {
 
 test.describe('Challenge Breadcrumb Tests', () => {
   test('should display correctly', async ({ page, isMobile }) => {
-    const breadcrumbTest = async (testId: string) => {
+    const mobileBreadcrumb = async () => {
+      const testId = 'breadcrumb-mobile';
       const superBlock = page.getByTestId(testId).getByRole('listitem').first();
       await expect(superBlock).toBeVisible();
 
@@ -40,7 +41,7 @@ test.describe('Challenge Breadcrumb Tests', () => {
 
     if (!isMobile) {
       await expect(page.getByTestId('breadcrumb-mobile')).toBeHidden();
-      await breadcrumbTest('breadcrumb-desktop');
+      await expect(page.getByTestId('breadcrumb-desktop')).toBeVisible();
 
       await page.setViewportSize({
         width: 766,
@@ -49,6 +50,6 @@ test.describe('Challenge Breadcrumb Tests', () => {
     }
 
     await expect(page.getByTestId('breadcrumb-desktop')).toBeHidden();
-    await breadcrumbTest('breadcrumb-mobile');
+    await mobileBreadcrumb();
   });
 });