[Joy] Add tests / classes for Breadcrumbs component

packages/mui-joy/src/Breadcrumbs/Breadcrumbs.spec.tsx

@@ -0,0 +1,16 @@
+import Breadcrumbs from '@mui/joy/Breadcrumbs';
+import * as React from 'react';
+
+<Breadcrumbs />;
+
+<Breadcrumbs component="div" />;
+
+// `size`
+<Breadcrumbs size="sm" />;
+<Breadcrumbs size="md" />;
+<Breadcrumbs size="lg" />;
+
+// @ts-expect-error there is no size `xs`
+<Breadcrumbs size="xs" />;
+// @ts-expect-error there is no size `xl`
+<Breadcrumbs size="xl" />;

packages/mui-joy/src/Breadcrumbs/Breadcrumbs.test.js

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { expect } from 'chai';
+import { createRenderer, describeConformance } from 'test/utils';
+import { ThemeProvider } from '@mui/joy/styles';
+import Breadcrumbs, { breadcrumbsClasses as classes } from '@mui/joy/Breadcrumbs';
+import { unstable_capitalize as capitalize } from '@mui/utils';
+
+describe('<Breadcrumbs />', () => {
+  const { render } = createRenderer();
+
+  describeConformance(<Breadcrumbs />, () => ({
+    classes,
+    inheritComponent: 'nav',
+    render,
+    ThemeProvider,
+    muiName: 'JoyBreadcrumbs',
+    refInstanceof: window.HTMLElement,
+    testVariantProps: { variant: 'solid' },
+    skip: ['classesRoot', 'componentsProp'],
+  }));
+
+  describe('prop: size', () => {
+    it('md by default', () => {
+      const { getByRole } = render(<Breadcrumbs />);
+
+      expect(getByRole('navigation')).to.have.class(classes.sizeMd);
+    });
+    ['sm', 'md', 'lg'].forEach((size) => {
+      it(`should render ${size}`, () => {
+        const { getByRole } = render(<Breadcrumbs size={size} />);
+
+        expect(getByRole('navigation')).to.have.class(classes[`size${capitalize(size)}`]);
+      });
+    });
+  });
+});

packages/mui-joy/src/Breadcrumbs/breadcrumbsClasses.ts

@@ -9,6 +9,12 @@ export interface BreadcrumbsClasses {
   li: string;
   /** Styles applied to the separator element. */
   separator: string;
+  /** Styles applied to the root element if `size="sm"`. */
+  sizeSm: string;
+  /** Styles applied to the root element if `size="md"`. */
+  sizeMd: string;
+  /** Styles applied to the root element if `size="lg"`. */
+  sizeLg: string;
 }
 
 export type BreadcrumbsClassKey = keyof BreadcrumbsClasses;
@@ -22,6 +28,9 @@ const breadcrumbsClasses: BreadcrumbsClasses = generateUtilityClasses('MuiBreadc
   'ol',
   'li',
   'separator',
+  'sizeSm',
+  'sizeMd',
+  'sizeLg',
 ]);
 
 export default breadcrumbsClasses;