From bd626938db74e1d7b45b89a62acde2d109f9fd99 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sun, 11 Dec 2022 13:57:50 +0100 Subject: [PATCH 1/3] [test] Fix broken master branch --- packages/mui-joy/src/Box/Box.test.js | 55 ++++++++++++++++------------ 1 file changed, 31 insertions(+), 24 deletions(-) diff --git a/packages/mui-joy/src/Box/Box.test.js b/packages/mui-joy/src/Box/Box.test.js index b99f66c0393e17..b86364db92de40 100644 --- a/packages/mui-joy/src/Box/Box.test.js +++ b/packages/mui-joy/src/Box/Box.test.js @@ -23,13 +23,7 @@ describe('Joy ', () => { refInstanceof: window.HTMLDivElement, })); - it('respects theme from context', function test() { - const isJSDOM = /jsdom/.test(window.navigator.userAgent); - - if (isJSDOM) { - this.skip(); - } - + it('respects theme from context', () => { const { container } = render( ', () => { }); }); - it('letterSpacing', function test() { + it('lineHeight', function test() { const isJSDOM = /jsdom/.test(window.navigator.userAgent); if (isJSDOM) { @@ -223,31 +217,44 @@ describe('Joy ', () => { const { container } = render( - + , ); expect(container.firstChild).toHaveComputedStyle({ - letterSpacing: '1.328px', + lineHeight: '24px', }); }); + }); +}); - it('lineHeight', function test() { - const isJSDOM = /jsdom/.test(window.navigator.userAgent); - - if (isJSDOM) { - this.skip(); - } +// eslint-disable-next-line mocha/max-top-level-suites +describe('theme.unstable_sx', () => { + const theme = extendTheme({ + colorSchemes: { + light: { + palette: { + primary: { + 500: 'rgb(0, 0, 255)', + }, + }, + }, + }, + }); - const { container } = render( - - - , - ); + it('bgcolor', () => { + expect(theme.unstable_sx({ bgcolor: 'primary.500' })).to.deep.equal({ + // TODO fixme + // backgroundColor: 'var(--joy-palette-primary-500)', + backgroundColor: 'primary.500', + }); + }); - expect(container.firstChild).toHaveComputedStyle({ - lineHeight: '24px', - }); + it('borderRadius', () => { + expect(theme.unstable_sx({ borderRadius: 'md' })).to.deep.equal({ + // TODO fixme + // borderRadius: 'var(--joy-radius-md)', + borderRadius: '12px', }); }); }); From 19d42605ec7e94f379a968354d34d6980c74a631 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Tue, 13 Dec 2022 17:32:16 +0100 Subject: [PATCH 2/3] Update tests --- packages/mui-joy/src/Box/Box.test.js | 31 ------- .../mui-joy/src/styles/extendTheme.test.js | 81 ++++++++++++++++++- 2 files changed, 80 insertions(+), 32 deletions(-) diff --git a/packages/mui-joy/src/Box/Box.test.js b/packages/mui-joy/src/Box/Box.test.js index b86364db92de40..94868c0cb761bd 100644 --- a/packages/mui-joy/src/Box/Box.test.js +++ b/packages/mui-joy/src/Box/Box.test.js @@ -227,34 +227,3 @@ describe('Joy ', () => { }); }); }); - -// eslint-disable-next-line mocha/max-top-level-suites -describe('theme.unstable_sx', () => { - const theme = extendTheme({ - colorSchemes: { - light: { - palette: { - primary: { - 500: 'rgb(0, 0, 255)', - }, - }, - }, - }, - }); - - it('bgcolor', () => { - expect(theme.unstable_sx({ bgcolor: 'primary.500' })).to.deep.equal({ - // TODO fixme - // backgroundColor: 'var(--joy-palette-primary-500)', - backgroundColor: 'primary.500', - }); - }); - - it('borderRadius', () => { - expect(theme.unstable_sx({ borderRadius: 'md' })).to.deep.equal({ - // TODO fixme - // borderRadius: 'var(--joy-radius-md)', - borderRadius: '12px', - }); - }); -}); diff --git a/packages/mui-joy/src/styles/extendTheme.test.js b/packages/mui-joy/src/styles/extendTheme.test.js index cf39c5667968c9..9d8ac515a3ea54 100644 --- a/packages/mui-joy/src/styles/extendTheme.test.js +++ b/packages/mui-joy/src/styles/extendTheme.test.js @@ -1,5 +1,6 @@ import { expect } from 'chai'; -import extendTheme from './extendTheme'; +import { createRenderer } from 'test/utils'; +import { extendTheme, useTheme, CssVarsProvider } from '@mui/joy/styles'; describe('extendTheme', () => { it('the output contains required fields', () => { @@ -46,4 +47,82 @@ describe('extendTheme', () => { expect(theme.cssVarPrefix).to.equal(''); expect(theme.typography.body1.fontSize).to.equal('var(--fontSize-md)'); }); + + describe('theme.unstable_sx', () => { + let originalMatchmedia; + const { render } = createRenderer(); + const storage = {}; + beforeEach(() => { + originalMatchmedia = window.matchMedia; + // Create mocks of localStorage getItem and setItem functions + Object.defineProperty(global, 'localStorage', { + value: { + getItem: (key) => storage[key], + setItem: (key, value) => { + storage[key] = value; + }, + }, + configurable: true, + }); + window.matchMedia = () => ({ + addListener: () => {}, + removeListener: () => {}, + }); + }); + afterEach(() => { + window.matchMedia = originalMatchmedia; + }); + + const theme = extendTheme({ + colorSchemes: { + light: { + palette: { + primary: { + 500: 'rgb(0, 0, 255)', + }, + }, + }, + }, + }); + + it('bgcolor', () => { + let styles = {}; + + const Test = () => { + const theme = useTheme(); + styles = theme.unstable_sx({ bgcolor: 'primary.500' }); + return null; + }; + + const { container } = render( + + + , + ); + + expect(styles).to.deep.equal({ + backgroundColor: 'var(--joy-palette-primary-500)', + }); + }); + + it('borderRadius', () => { + let styles = {}; + + const Test = () => { + const theme = useTheme(); + styles = theme.unstable_sx({ borderRadius: 'md' }); + return null; + }; + + const { container } = render( + + + , + ); + + expect(styles).to.deep.equal({ + borderRadius: 'var(--joy-radius-md)', + }); + }); + }); }); From d204d4e3c5fe7e1561e4366e0df7a7c9c603413a Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 14 Dec 2022 11:27:35 +0100 Subject: [PATCH 3/3] lint & prettier --- .../mui-joy/src/styles/extendTheme.test.js | 24 ++++++++++--------- 1 file changed, 13 insertions(+), 11 deletions(-) diff --git a/packages/mui-joy/src/styles/extendTheme.test.js b/packages/mui-joy/src/styles/extendTheme.test.js index 9d8ac515a3ea54..e72cf9f195005e 100644 --- a/packages/mui-joy/src/styles/extendTheme.test.js +++ b/packages/mui-joy/src/styles/extendTheme.test.js @@ -1,3 +1,4 @@ +import * as React from 'react'; import { expect } from 'chai'; import { createRenderer } from 'test/utils'; import { extendTheme, useTheme, CssVarsProvider } from '@mui/joy/styles'; @@ -49,8 +50,9 @@ describe('extendTheme', () => { }); describe('theme.unstable_sx', () => { - let originalMatchmedia; const { render } = createRenderer(); + + let originalMatchmedia; const storage = {}; beforeEach(() => { originalMatchmedia = window.matchMedia; @@ -72,8 +74,8 @@ describe('extendTheme', () => { afterEach(() => { window.matchMedia = originalMatchmedia; }); - - const theme = extendTheme({ + + const customTheme = extendTheme({ colorSchemes: { light: { palette: { @@ -88,14 +90,14 @@ describe('extendTheme', () => { it('bgcolor', () => { let styles = {}; - const Test = () => { + function Test() { const theme = useTheme(); styles = theme.unstable_sx({ bgcolor: 'primary.500' }); return null; - }; + } - const { container } = render( - + render( + , ); @@ -108,14 +110,14 @@ describe('extendTheme', () => { it('borderRadius', () => { let styles = {}; - const Test = () => { + function Test() { const theme = useTheme(); styles = theme.unstable_sx({ borderRadius: 'md' }); return null; - }; + } - const { container } = render( - + render( + , );