fix(tests): Fixed the breadcrumb failing tests due to update's on how the first item is rendered [C9S-98] (#2338)

app/react/components/PageHeader/Breadcrumbs/Breadcrumbs.test.tsx

@@ -1,16 +1,56 @@
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+
+import { withTestRouter } from '@/react/test-utils/withRouter';
 
 import { Breadcrumbs } from './Breadcrumbs';
 
-test('should display a Breadcrumbs, breadcrumbs should be separated by >', async () => {
-  const breadcrumbs = [
-    { label: 'bread1' },
-    { label: 'bread2' },
-    { label: 'bread3' },
-  ];
-  const { container } = render(<Breadcrumbs breadcrumbs={breadcrumbs} />);
+function renderBreadcrumbs(
+  breadcrumbs: React.ComponentProps<typeof Breadcrumbs>['breadcrumbs']
+) {
+  const Wrapped = withTestRouter(() => (
+    <Breadcrumbs breadcrumbs={breadcrumbs} />
+  ));
+  return render(<Wrapped />);
+}
 
-  expect(container.firstChild?.textContent).toEqual(
-    breadcrumbs.map((b) => b.label).join('>')
-  );
+describe('Breadcrumbs', () => {
+  it('should render a home link', () => {
+    renderBreadcrumbs([{ label: 'Settings' }]);
+
+    expect(screen.getByTestId('breadcrumb-home')).toBeInTheDocument();
+  });
+
+  it('should render each breadcrumb label', () => {
+    renderBreadcrumbs([
+      { label: 'Settings' },
+      { label: 'Environment Groups' },
+      { label: 'Production' },
+    ]);
+
+    expect(screen.getByText('Settings')).toBeVisible();
+    expect(screen.getByText('Environment Groups')).toBeVisible();
+    expect(screen.getByText('Production')).toBeVisible();
+  });
+
+  it('should render string breadcrumbs', () => {
+    renderBreadcrumbs(['Settings', 'Tags']);
+
+    expect(screen.getByText('Settings')).toBeVisible();
+    expect(screen.getByText('Tags')).toBeVisible();
+  });
+
+  it('should render a single string breadcrumb', () => {
+    renderBreadcrumbs('Environments');
+
+    expect(screen.getByText('Environments')).toBeVisible();
+  });
+
+  it('should render linked breadcrumbs with data-cy', () => {
+    renderBreadcrumbs([
+      { label: 'Settings', link: 'portainer.settings' },
+      { label: 'Groups' },
+    ]);
+
+    expect(screen.getByTestId('breadcrumb-Settings')).toBeInTheDocument();
+  });
 });