[ListItemButton] Respect LinkComponent (#34159)

mui · Mar 21, 2023 · 81784a0 · 81784a0
1 parent 5dbdc4b
commit 81784a0
Show file tree

Hide file tree

Showing 2 changed files with 110 additions and 1 deletion.
diff --git a/packages/mui-material/src/ListItemButton/ListItemButton.js b/packages/mui-material/src/ListItemButton/ListItemButton.js
@@ -181,7 +181,8 @@ const ListItemButton = React.forwardRef(function ListItemButton(inProps, ref) {
       <ListItemButtonRoot
         ref={handleRef}
         href={other.href || other.to}
-        component={(other.href || other.to) && component === 'div' ? 'a' : component}
+        // `ButtonBase` processes `href` or `to` if `component` is set to 'button'
+        component={(other.href || other.to) && component === 'div' ? 'button' : component}
         focusVisibleClassName={clsx(classes.focusVisible, focusVisibleClassName)}
         ownerState={ownerState}
         className={clsx(classes.root, className)}

diff --git a/packages/mui-material/src/ListItemButton/ListItemButton.test.js b/packages/mui-material/src/ListItemButton/ListItemButton.test.js
@@ -3,6 +3,7 @@ import { expect } from 'chai';
 import { describeConformance, act, createRenderer, fireEvent } from 'test/utils';
 import ListItemButton, { listItemButtonClasses as classes } from '@mui/material/ListItemButton';
 import ButtonBase from '@mui/material/ButtonBase';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
 import ListContext from '../List/ListContext';
 
 describe('<ListItemButton />', () => {
@@ -140,4 +141,111 @@ describe('<ListItemButton />', () => {
       expect(!!heading).to.equal(true);
     });
   });
+
+  describe('prop: LinkComponent', () => {
+    const href = 'example.com';
+    const customLinkId = 'customLink';
+    const CustomLink = React.forwardRef((props, ref) => {
+      // eslint-disable-next-line jsx-a11y/anchor-has-content
+      return <a data-testid={customLinkId} ref={ref} {...props} />;
+    });
+
+    it('should rendered as LinkComponent when href is provided', () => {
+      const { container, getByTestId } = render(
+        <ListItemButton href={href} LinkComponent={CustomLink} />,
+      );
+      const button = container.firstChild;
+
+      expect(getByTestId(customLinkId)).not.to.equal(null);
+      expect(button).to.have.property('nodeName', 'A');
+      expect(button).to.have.attribute('href', href);
+    });
+
+    it('should ignore LinkComponent is component is provided', () => {
+      const { container, queryByTestId } = render(
+        <ListItemButton href={href} LinkComponent={CustomLink} component="h1" />,
+      );
+      const button = container.firstChild;
+
+      expect(queryByTestId(customLinkId)).to.equal(null);
+      expect(button).to.have.property('nodeName', 'H1');
+      expect(button).to.have.attribute('href', href);
+    });
+
+    it('should rendered as LinkComponent (from theme) when href is provided', () => {
+      const theme = createTheme({
+        components: {
+          MuiListItemButton: {
+            defaultProps: {
+              LinkComponent: CustomLink,
+            },
+          },
+        },
+      });
+      const { container, getByTestId } = render(
+        <ThemeProvider theme={theme}>
+          <ListItemButton href={href} />,
+        </ThemeProvider>,
+      );
+      const button = container.firstChild;
+
+      expect(getByTestId(customLinkId)).not.to.equal(null);
+      expect(button).to.have.property('nodeName', 'A');
+      expect(button).to.have.attribute('href', href);
+    });
+
+    it('should rendered as LinkComponent (from theme MuiButtonBase) when href is provided', () => {
+      const theme = createTheme({
+        components: {
+          MuiButtonBase: {
+            defaultProps: {
+              LinkComponent: CustomLink,
+            },
+          },
+        },
+      });
+      const { container, getByTestId } = render(
+        <ThemeProvider theme={theme}>
+          <ListItemButton href={href} />,
+        </ThemeProvider>,
+      );
+      const button = container.firstChild;
+
+      expect(getByTestId(customLinkId)).not.to.equal(null);
+      expect(button).to.have.property('nodeName', 'A');
+      expect(button).to.have.attribute('href', href);
+    });
+
+    it('should prefer LinkComponent from MuiListItemButton over MuiButtonBase', () => {
+      const WrongCustomLink = React.forwardRef((props, ref) => {
+        // eslint-disable-next-line jsx-a11y/anchor-has-content
+        return <a data-testid="wrong-link" ref={ref} {...props} />;
+      });
+
+      const theme = createTheme({
+        components: {
+          MuiListItemButton: {
+            defaultProps: {
+              LinkComponent: CustomLink,
+            },
+          },
+          MuiButtonBase: {
+            defaultProps: {
+              LinkComponent: WrongCustomLink,
+            },
+          },
+        },
+      });
+      const { container, getByTestId } = render(
+        <ThemeProvider theme={theme}>
+          <ListItemButton href={href} />,
+        </ThemeProvider>,
+      );
+      const button = container.firstChild;
+
+      expect(getByTestId(customLinkId)).not.to.equal(null);
+      expect(button).to.have.property('nodeName', 'A');
+      expect(button).to.have.attribute('href', href);
+    });
+  });
 });