diff --git a/packages/mui-material/src/Stack/Stack.test.js b/packages/mui-material/src/Stack/Stack.test.js index f7e97dc702e848..4aff95e028b591 100644 --- a/packages/mui-material/src/Stack/Stack.test.js +++ b/packages/mui-material/src/Stack/Stack.test.js @@ -222,7 +222,7 @@ describe('', () => { }); }); - 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('', () => { }, 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', + }); }); });