empty case

Author: paula-stacho

packages/compass-components/src/components/breadcrumb.spec.tsx

@@ -12,7 +12,7 @@ import sinon from 'sinon';
 describe('Breadcrumbs Component', function () {
   afterEach(cleanup);
 
-  it('renders nothing when list is empty', function () {
+  it('renders empty when list is empty', function () {
     render(<Breadcrumbs items={[]} />);
     expect(screen.getByTestId('breadcrumbs').children.length).to.equal(0);
   });

packages/compass-components/src/components/breadcrumb.tsx

@@ -61,6 +61,14 @@ export const Breadcrumbs = ({
   className?: string;
 }) => {
   const darkMode = useDarkMode();
+  if (items.length === 0) {
+    return (
+      <div
+        className={cx(breadcrumbStyles, className)}
+        data-testid="breadcrumbs"
+      />
+    );
+  }
   const lastItem = items[items.length - 1];
   const clickableItems = items.slice(0, -1) as BreadcrumbItem[];
   return (