[Material You] Update Button test & add active class name (#35497)

mui · Dec 23, 2022 · c166d8b · c166d8b
1 parent b533db2
commit c166d8b
Show file tree

Hide file tree

Showing 5 changed files with 153 additions and 223 deletions.
diff --git a/packages/mui-material-next/src/Button/Button.test.js b/packages/mui-material-next/src/Button/Button.test.js
@@ -1,263 +1,116 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { describeConformance, createRenderer } from 'test/utils';
-import Button, { buttonClasses as classes } from '@mui/material/Button';
-import ButtonBase from '@mui/material/ButtonBase';
+import { describeConformance, createRenderer, fireEvent } from 'test/utils';
+import Button, { buttonClasses as classes } from '@mui/material-next/Button';
+import { CssVarsProvider, extendTheme } from '@mui/material-next/styles';
 
 describe('<Button />', () => {
   const { render, renderToString } = createRenderer();
 
   describeConformance(<Button startIcon="icon">Conformance?</Button>, () => ({
     classes,
-    inheritComponent: ButtonBase,
     render,
+    inheritComponent: 'button',
     refInstanceof: window.HTMLButtonElement,
     muiName: 'MuiButton',
     testDeepOverrides: { slotName: 'startIcon', slotClassName: classes.startIcon },
     testVariantProps: { variant: 'contained', fullWidth: true },
     testStateOverrides: { prop: 'size', value: 'small', styleKey: 'sizeSmall' },
+    ThemeProvider: CssVarsProvider,
+    createTheme: extendTheme,
     skip: ['componentsProp'],
   }));
 
-  it('should render with the root, text, and textPrimary classes but no others', () => {
+  it('should render with the root, text and colorPrimary classes but no others', () => {
     const { getByRole } = render(<Button>Hello World</Button>);
     const button = getByRole('button');
 
     expect(button).to.have.class(classes.root);
     expect(button).to.have.class(classes.text);
-    expect(button).to.have.class(classes.textPrimary);
-    expect(button).not.to.have.class(classes.textSecondary);
+    expect(button).to.have.class(classes.colorPrimary);
+    expect(button).not.to.have.class(classes.filled);
+    expect(button).not.to.have.class(classes.filledTonal);
     expect(button).not.to.have.class(classes.outlined);
-    expect(button).not.to.have.class(classes.outlinedPrimary);
-    expect(button).not.to.have.class(classes.outlinedSecondary);
-    expect(button).not.to.have.class(classes.contained);
-    expect(button).not.to.have.class(classes.containedPrimary);
-    expect(button).not.to.have.class(classes.containedSecondary);
-    expect(button).not.to.have.class(classes.textSizeSmall);
-    expect(button).not.to.have.class(classes.textSizeLarge);
-    expect(button).not.to.have.class(classes.outlinedSizeSmall);
-    expect(button).not.to.have.class(classes.outlinedSizeLarge);
-    expect(button).not.to.have.class(classes.containedSizeSmall);
-    expect(button).not.to.have.class(classes.containedSizeLarge);
-  });
-
-  it('can render a text primary button', () => {
-    const { getByRole } = render(<Button color="primary">Hello World</Button>);
-    const button = getByRole('button');
-
-    expect(button).to.have.class(classes.root);
-    expect(button).not.to.have.class(classes.contained);
-    expect(button).to.have.class(classes.textPrimary);
-    expect(button).not.to.have.class(classes.textSecondary);
+    expect(button).not.to.have.class(classes.elevated);
+    expect(button).not.to.have.class(classes.colorSecondary);
+    expect(button).not.to.have.class(classes.colorTertiary);
+    expect(button).not.to.have.class(classes.sizeSmall);
+    expect(button).not.to.have.class(classes.sizeLarge);
   });
 
   it('should render a text secondary button', () => {
     const { getByRole } = render(<Button color="secondary">Hello World</Button>);
     const button = getByRole('button');
 
     expect(button).to.have.class(classes.root);
-    expect(button).not.to.have.class(classes.contained);
-    expect(button).not.to.have.class(classes.textPrimary);
-    expect(button).to.have.class(classes.textSecondary);
-  });
-
-  it('should render an outlined button', () => {
-    const { getByRole } = render(<Button variant="outlined">Hello World</Button>);
-    const button = getByRole('button');
-
-    expect(button).to.have.class(classes.root);
-    expect(button).to.have.class(classes.outlined);
-    expect(button).not.to.have.class(classes.contained);
-    expect(button).not.to.have.class(classes.text);
-  });
-
-  it('should render a primary outlined button', () => {
-    const { getByRole } = render(
-      <Button variant="outlined" color="primary">
-        Hello World
-      </Button>,
-    );
-    const button = getByRole('button');
-
-    expect(button).to.have.class(classes.root);
-    expect(button).to.have.class(classes.outlined);
-    expect(button).to.have.class(classes.outlinedPrimary);
-    expect(button).not.to.have.class(classes.text);
-    expect(button).not.to.have.class(classes.textPrimary);
-    expect(button).not.to.have.class(classes.contained);
-  });
-
-  it('should render a secondary outlined button', () => {
-    const { getByRole } = render(
-      <Button variant="outlined" color="secondary">
-        Hello World
-      </Button>,
-    );
-    const button = getByRole('button');
-
-    expect(button).to.have.class(classes.root);
-    expect(button).to.have.class(classes.outlined);
-    expect(button).to.have.class(classes.outlinedSecondary);
-    expect(button).not.to.have.class(classes.text);
-    expect(button).not.to.have.class(classes.textSecondary);
-    expect(button).not.to.have.class(classes.contained);
-  });
-
-  it('should render an inherit outlined button', () => {
-    const { getByRole } = render(
-      <Button variant="outlined" color="inherit">
-        Hello World
-      </Button>,
-    );
-    const button = getByRole('button');
-
-    expect(button).to.have.class(classes.root);
-    expect(button).to.have.class(classes.outlined);
-    expect(button).to.have.class(classes.colorInherit);
-    expect(button).not.to.have.class(classes.text);
-    expect(button).not.to.have.class(classes.textSecondary);
-    expect(button).not.to.have.class(classes.contained);
-  });
-
-  it('should render a contained button', () => {
-    const { getByRole } = render(<Button variant="contained">Hello World</Button>);
-    const button = getByRole('button');
-
-    expect(button).to.have.class(classes.root);
-    expect(button).not.to.have.class(classes.text);
-    expect(button).not.to.have.class(classes.textPrimary);
-    expect(button).not.to.have.class(classes.textSecondary);
-    expect(button).to.have.class(classes.contained);
-  });
-
-  it('should render a contained primary button', () => {
-    const { getByRole } = render(
-      <Button variant="contained" color="primary">
-        Hello World
-      </Button>,
-    );
-    const button = getByRole('button');
-
-    expect(button).to.have.class(classes.root);
-    expect(button).not.to.have.class(classes.text);
-    expect(button).to.have.class(classes.contained);
-    expect(button).to.have.class(classes.containedPrimary);
-    expect(button).not.to.have.class(classes.containedSecondary);
+    expect(button).to.have.class(classes.text);
+    expect(button).to.have.class(classes.colorSecondary);
+    expect(button).not.to.have.class(classes.colorPrimary);
   });
 
-  it('should render a contained secondary button', () => {
-    const { getByRole } = render(
-      <Button variant="contained" color="secondary">
-        Hello World
-      </Button>,
-    );
-    const button = getByRole('button');
+  ['filled', 'filledTonal', 'outlined', 'elevated'].forEach((variant) => {
+    it(`should render an ${variant} button`, () => {
+      const { getByRole } = render(<Button variant={variant}>Hello World</Button>);
+      const button = getByRole('button');
 
-    expect(button).to.have.class(classes.root);
-    expect(button).not.to.have.class(classes.text);
-    expect(button).to.have.class(classes.contained);
-    expect(button).not.to.have.class(classes.containedPrimary);
-    expect(button).to.have.class(classes.containedSecondary);
-  });
+      expect(button).to.have.class(classes.root);
+      expect(button).to.have.class(classes[variant]);
+      expect(button).to.have.class(classes.colorPrimary);
+      expect(button).not.to.have.class(classes.text);
+    });
 
-  it('should render a small text button', () => {
+    // these two variants do not support different colors
+    if (variant !== 'elevated' && variant !== 'filledTonal') {
+      it(`should render an ${variant} secondary button`, () => {
+        const { getByRole } = render(
+          <Button variant={variant} color="secondary">
+            Hello World
+          </Button>,
+        );
+        const button = getByRole('button');
+
+        expect(button).to.have.class(classes.root);
+        expect(button).to.have.class(classes[variant]);
+        expect(button).to.have.class(classes.colorSecondary);
+        expect(button).not.to.have.class(classes.text);
+        expect(button).not.to.have.class(classes.colorPrimary);
+      });
+
+      it(`should render an ${variant} tertiary button`, () => {
+        const { getByRole } = render(
+          <Button variant={variant} color="tertiary">
+            Hello World
+          </Button>,
+        );
+        const button = getByRole('button');
+
+        expect(button).to.have.class(classes.root);
+        expect(button).to.have.class(classes[variant]);
+        expect(button).to.have.class(classes.colorTertiary);
+        expect(button).not.to.have.class(classes.text);
+        expect(button).not.to.have.class(classes.colorPrimary);
+      });
+    }
+  });
+
+  it('should render a small button', () => {
     const { getByRole } = render(<Button size="small">Hello World</Button>);
     const button = getByRole('button');
 
     expect(button).to.have.class(classes.root);
-    expect(button).to.have.class(classes.text);
-    expect(button).to.have.class(classes.textSizeSmall);
-    expect(button).not.to.have.class(classes.textSizeLarge);
-    expect(button).not.to.have.class(classes.outlinedSizeSmall);
-    expect(button).not.to.have.class(classes.outlinedSizeLarge);
-    expect(button).not.to.have.class(classes.containedSizeSmall);
-    expect(button).not.to.have.class(classes.containedSizeLarge);
+    expect(button).to.have.class(classes.sizeSmall);
+    expect(button).not.to.have.class(classes.sizeMedium);
+    expect(button).not.to.have.class(classes.sizeLarge);
   });
 
-  it('should render a large text button', () => {
+  it('should render a large button', () => {
     const { getByRole } = render(<Button size="large">Hello World</Button>);
     const button = getByRole('button');
 
     expect(button).to.have.class(classes.root);
-    expect(button).to.have.class(classes.text);
-    expect(button).not.to.have.class(classes.textSizeSmall);
-    expect(button).to.have.class(classes.textSizeLarge);
-    expect(button).not.to.have.class(classes.outlinedSizeSmall);
-    expect(button).not.to.have.class(classes.outlinedSizeLarge);
-    expect(button).not.to.have.class(classes.containedSizeSmall);
-    expect(button).not.to.have.class(classes.containedSizeLarge);
-  });
-
-  it('should render a small outlined button', () => {
-    const { getByRole } = render(
-      <Button variant="outlined" size="small">
-        Hello World
-      </Button>,
-    );
-    const button = getByRole('button');
-
-    expect(button).to.have.class(classes.root);
-    expect(button).to.have.class(classes.outlined);
-    expect(button).not.to.have.class(classes.textSizeSmall);
-    expect(button).not.to.have.class(classes.textSizeLarge);
-    expect(button).to.have.class(classes.outlinedSizeSmall);
-    expect(button).not.to.have.class(classes.outlinedSizeLarge);
-    expect(button).not.to.have.class(classes.containedSizeSmall);
-    expect(button).not.to.have.class(classes.containedSizeLarge);
-  });
-
-  it('should render a large outlined button', () => {
-    const { getByRole } = render(
-      <Button variant="outlined" size="large">
-        Hello World
-      </Button>,
-    );
-    const button = getByRole('button');
-
-    expect(button).to.have.class(classes.root);
-    expect(button).to.have.class(classes.outlined);
-    expect(button).not.to.have.class(classes.textSizeSmall);
-    expect(button).not.to.have.class(classes.textSizeLarge);
-    expect(button).not.to.have.class(classes.outlinedSizeSmall);
-    expect(button).to.have.class(classes.outlinedSizeLarge);
-    expect(button).not.to.have.class(classes.containedSizeSmall);
-    expect(button).not.to.have.class(classes.containedSizeLarge);
-  });
-
-  it('should render a small contained button', () => {
-    const { getByRole } = render(
-      <Button variant="contained" size="small">
-        Hello World
-      </Button>,
-    );
-    const button = getByRole('button');
-
-    expect(button).to.have.class(classes.root);
-    expect(button).to.have.class(classes.contained);
-    expect(button).not.to.have.class(classes.textSizeSmall);
-    expect(button).not.to.have.class(classes.textSizeLarge);
-    expect(button).not.to.have.class(classes.outlinedSizeSmall);
-    expect(button).not.to.have.class(classes.outlinedSizeLarge);
-    expect(button).to.have.class(classes.containedSizeSmall);
-    expect(button).not.to.have.class(classes.containedSizeLarge);
-  });
-
-  it('should render a large contained button', () => {
-    const { getByRole } = render(
-      <Button variant="contained" size="large">
-        Hello World
-      </Button>,
-    );
-    const button = getByRole('button');
-
-    expect(button).to.have.class(classes.root);
-    expect(button).to.have.class(classes.contained);
-    expect(button).not.to.have.class(classes.textSizeSmall);
-    expect(button).not.to.have.class(classes.textSizeLarge);
-    expect(button).not.to.have.class(classes.outlinedSizeSmall);
-    expect(button).not.to.have.class(classes.outlinedSizeLarge);
-    expect(button).not.to.have.class(classes.containedSizeSmall);
-    expect(button).to.have.class(classes.containedSizeLarge);
+    expect(button).to.have.class(classes.sizeLarge);
+    expect(button).not.to.have.class(classes.sizeMedium);
+    expect(button).not.to.have.class(classes.sizeSmall);
   });
 
   it('should render a button with startIcon', () => {
@@ -317,4 +170,13 @@ describe('<Button />', () => {
 
     expect(container.querySelector('button')).to.have.class(disabledClassName);
   });
+
+  it('should render active class', () => {
+    const { container } = render(<Button />);
+
+    const button = container.querySelector('button');
+    fireEvent.mouseDown(button);
+
+    expect(button).to.have.class(classes.active);
+  });
 });