From 212e8bd119d56edf72b4daffdbd5f14b11121535 Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Sun, 30 Jun 2019 11:34:32 +0200
Subject: [PATCH] [styles] Add test for removing styles via `overrides`
 (#16420)

---
 .../src/makeStyles/makeStyles.test.js         | 103 ++++++++++++------
 1 file changed, 69 insertions(+), 34 deletions(-)

diff --git a/packages/material-ui-styles/src/makeStyles/makeStyles.test.js b/packages/material-ui-styles/src/makeStyles/makeStyles.test.js
index 64bf12710e41d1..be2b0740e2d6f5 100644
--- a/packages/material-ui-styles/src/makeStyles/makeStyles.test.js
+++ b/packages/material-ui-styles/src/makeStyles/makeStyles.test.js
@@ -244,45 +244,80 @@ describe('makeStyles', () => {
       assert.deepEqual(sheetsRegistry.registry[0].classes, { root: 'MuiTextField-root' });
     });
 
-    it('should support the overrides key', () => {
-      const useStyles = makeStyles(
-        {
-          root: {
-            padding: 8,
-            margin: [1, 3],
+    describe('overrides', () => {
+      it('should support the overrides key', () => {
+        const useStyles = makeStyles(
+          {
+            root: {
+              padding: 8,
+              margin: [1, 3],
+            },
           },
-        },
-        {
-          name: 'MuiTextField',
-        },
-      );
-      const StyledComponent = () => {
-        useStyles();
-        return <div />;
-      };
-
-      mount(
-        <ThemeProvider
-          theme={createMuiTheme({
-            overrides: {
-              MuiTextField: {
-                root: {
-                  padding: 9,
-                  margin: [2, 2, 3],
+          {
+            name: 'MuiTextField',
+          },
+        );
+        const StyledComponent = () => {
+          useStyles();
+          return <div />;
+        };
+
+        mount(
+          <ThemeProvider
+            theme={createMuiTheme({
+              overrides: {
+                MuiTextField: {
+                  root: {
+                    padding: 9,
+                    margin: [2, 2, 3],
+                  },
                 },
               },
+            })}
+          >
+            <StylesProvider sheetsRegistry={sheetsRegistry} sheetsCache={new Map()}>
+              <StyledComponent />
+            </StylesProvider>
+          </ThemeProvider>,
+        );
+
+        assert.strictEqual(sheetsRegistry.registry.length, 1);
+        assert.deepEqual(sheetsRegistry.registry[0].rules.raw, {
+          root: { padding: 9, margin: [2, 2, 3] },
+        });
+      });
+
+      it('can be used to remove styles', () => {
+        const theme = {
+          overrides: {
+            Test: {
+              root: {
+                margin: null,
+              },
             },
-          })}
-        >
-          <StylesProvider sheetsRegistry={sheetsRegistry} sheetsCache={new Map()}>
-            <StyledComponent />
-          </StylesProvider>
-        </ThemeProvider>,
-      );
+          },
+        };
 
-      assert.strictEqual(sheetsRegistry.registry.length, 1);
-      assert.deepEqual(sheetsRegistry.registry[0].rules.raw, {
-        root: { padding: 9, margin: [2, 2, 3] },
+        const useStyles = makeStyles({ root: { margin: 5, padding: 3 } }, { name: 'Test' });
+        function Test() {
+          const classes = useStyles();
+          return <div className={classes.root} />;
+        }
+
+        const wrapper = mount(
+          <ThemeProvider theme={theme}>
+            <StylesProvider sheetsRegistry={sheetsRegistry} sheetsCache={new Map()}>
+              <Test />
+            </StylesProvider>
+          </ThemeProvider>,
+        );
+
+        const div = wrapper.find('div').instance();
+
+        assert.strictEqual(sheetsRegistry.registry.length, 1);
+        assert.deepEqual(sheetsRegistry.registry[0].rules.raw, {
+          root: { margin: null, padding: 3 },
+        });
       });
     });