Add one more test with multiple breakpoint values passed to direction…

… prop
mui · Jul 19, 2022 · f4d3d6f · f4d3d6f
1 parent 1da1ffb
commit f4d3d6f
Showing 1 changed file with 45 additions and 1 deletion.
diff --git a/packages/mui-material/src/Stack/Stack.test.js b/packages/mui-material/src/Stack/Stack.test.js
@@ -222,7 +222,7 @@ describe('<Stack />', () => {
       });
     });
 
-    it('should place correct margin direction even though breakpoints are not fully provided', () => {
+    it.only('should place correct margin direction even though breakpoints are not fully provided', () => {
       expect(
         style({
           ownerState: {
@@ -259,6 +259,50 @@ describe('<Stack />', () => {
         },
         display: 'flex',
       });
+
+      expect(
+        style({
+          ownerState: {
+            direction: { lg: 'column', sm: 'row' },
+            spacing: { md: 2, xl: 4, xs: 0 },
+          },
+          theme,
+        }),
+      ).to.deep.equal({
+        [`@media (min-width:${defaultTheme.breakpoints.values.xs}px)`]: {
+          '& > :not(style) + :not(style)': {
+            margin: 0,
+            marginTop: '0px',
+          },
+        },
+        [`@media (min-width:${defaultTheme.breakpoints.values.sm}px)`]: {
+          '& > :not(style) + :not(style)': {
+            margin: 0,
+            marginLeft: '0px',
+          },
+          flexDirection: 'row',
+        },
+        [`@media (min-width:${defaultTheme.breakpoints.values.md}px)`]: {
+          '& > :not(style) + :not(style)': {
+            margin: 0,
+            marginLeft: '16px',
+          },
+        },
+        [`@media (min-width:${defaultTheme.breakpoints.values.lg}px)`]: {
+          '& > :not(style) + :not(style)': {
+            margin: 0,
+            marginTop: '16px',
+          },
+          flexDirection: 'column',
+        },
+        [`@media (min-width:${defaultTheme.breakpoints.values.xl}px)`]: {
+          '& > :not(style) + :not(style)': {
+            margin: 0,
+            marginTop: '32px',
+          },
+        },
+        display: 'flex',
+      });
     });
   });