From 59003b422e442d5126c4f612d174413c53f5da8e Mon Sep 17 00:00:00 2001 From: Pranshu Chittora Date: Sat, 9 May 2020 21:53:55 +0530 Subject: [PATCH 01/10] fix(react-jss): Media query styles applied only to the first element in function chore(react-jss): Snapshot update --- packages/react-jss/.size-snapshot.json | 24 ++--- packages/react-jss/src/createUseStyles.js | 125 ++++++++++++++-------- 2 files changed, 95 insertions(+), 54 deletions(-) diff --git a/packages/react-jss/.size-snapshot.json b/packages/react-jss/.size-snapshot.json index 699840457..978b5edeb 100644 --- a/packages/react-jss/.size-snapshot.json +++ b/packages/react-jss/.size-snapshot.json @@ -1,23 +1,23 @@ { "dist/react-jss.js": { - "bundled": 169946, - "minified": 58911, - "gzipped": 19311 + "bundled": 130189, + "minified": 46655, + "gzipped": 16051 }, "dist/react-jss.min.js": { - "bundled": 112923, - "minified": 42170, - "gzipped": 14335 + "bundled": 103803, + "minified": 38662, + "gzipped": 13692 }, "dist/react-jss.cjs.js": { - "bundled": 26398, - "minified": 11532, - "gzipped": 3759 + "bundled": 26922, + "minified": 11621, + "gzipped": 3848 }, "dist/react-jss.esm.js": { - "bundled": 24901, - "minified": 10301, - "gzipped": 3602, + "bundled": 25951, + "minified": 10777, + "gzipped": 3726, "treeshaked": { "rollup": { "code": 1838, diff --git a/packages/react-jss/src/createUseStyles.js b/packages/react-jss/src/createUseStyles.js index c9176ff90..ed0743a04 100644 --- a/packages/react-jss/src/createUseStyles.js +++ b/packages/react-jss/src/createUseStyles.js @@ -20,6 +20,13 @@ const useEffectOrLayoutEffect = isInBrowser ? React.useLayoutEffect : React.useE const noTheme = {} +const reducer = (prevState, action) => { + if (action.type === 'updateSheet') { + return action.payload + } + return prevState +} + const createUseStyles = (styles: Styles, options?: HookOptions = {}) => { const {index = getSheetIndex(), theming, name, ...sheetOptions} = options const ThemeContext = (theming && theming.context) || DefaultThemeContext @@ -35,67 +42,101 @@ const createUseStyles = (styles: Styles, options?: HookOptions const context = React.useContext(JssContext) const theme = useTheme() - const [sheet, dynamicRules] = React.useMemo( + const [state, dispatch] = React.useReducer(reducer, null, () => { + const sheet = createStyleSheet({ + context, + styles, + name, + theme, + index, + sheetOptions + }) + + let dynamicRules + let classes + if (sheet) { + if (context.registry) { + context.registry.add(sheet) + } + dynamicRules = addDynamicRules(sheet, data) + classes = getSheetClasses(sheet, dynamicRules) + } + + return { + sheet, + dynamicRules, + classes: classes || {} + } + }) + React.useMemo( + () => { + if (!isFirstMount.current) { + const newSheet = createStyleSheet({ + context, + styles, + name, + theme, + index, + sheetOptions + }) + const newDynamicRules = newSheet && addDynamicRules(newSheet, data) + const newClasses = newSheet ? getSheetClasses(newSheet, newDynamicRules) : {} + + dispatch({ + type: 'updateSheet', + payload: { + sheet: newSheet, + dynamicRules: newDynamicRules, + classes: newClasses + } + }) + } + }, + [theme, context] + ) + useEffectOrLayoutEffect( () => { - const newSheet = createStyleSheet({ - context, - styles, - name, - theme, - index, - sheetOptions - }) - - const newDynamicRules = newSheet ? addDynamicRules(newSheet, data) : null - - if (newSheet) { + if (state.sheet) { manageSheet({ index, context, - sheet: newSheet, + sheet: state.sheet, theme }) } - return [newSheet, newDynamicRules] + return () => { + const {sheet, dynamicRules} = state + + if (!sheet) return + + unmanageSheet({ + index, + context, + sheet, + theme + }) + + if (dynamicRules) { + removeDynamicRules(sheet, dynamicRules) + } + } }, - [context, theme] + [state.sheet] ) useEffectOrLayoutEffect( () => { // We only need to update the rules on a subsequent update and not in the first mount - if (sheet && dynamicRules && !isFirstMount.current) { - updateDynamicRules(data, sheet, dynamicRules) + if (state.sheet && state.dynamicRules && !isFirstMount.current) { + updateDynamicRules(data, state.sheet, state.dynamicRules) } }, [data] ) - useEffectOrLayoutEffect( - () => - // cleanup only - () => { - if (sheet) { - unmanageSheet({ - index, - context, - sheet, - theme - }) - } - - if (sheet && dynamicRules) { - removeDynamicRules(sheet, dynamicRules) - } - }, - [sheet] - ) - - const classes = sheet && dynamicRules ? getSheetClasses(sheet, dynamicRules) : {} - // $FlowFixMe - React.useDebugValue(classes) + React.useDebugValue(state.classes) // $FlowFixMe React.useDebugValue(theme === noTheme ? 'No theme' : theme) @@ -103,7 +144,7 @@ const createUseStyles = (styles: Styles, options?: HookOptions isFirstMount.current = false }) - return classes + return state.classes } } From c967ea65d32d197864a2624b2078fcebb9c3f7b5 Mon Sep 17 00:00:00 2001 From: Pranshu Chittora Date: Fri, 19 Jun 2020 00:12:03 +0530 Subject: [PATCH 02/10] tests(react-jss): added tests for createUseStyles --- packages/react-jss/.size-snapshot.json | 24 +++--- .../react-jss/src/createUseStyles.test.js | 76 ++++++++++++++++--- 2 files changed, 78 insertions(+), 22 deletions(-) diff --git a/packages/react-jss/.size-snapshot.json b/packages/react-jss/.size-snapshot.json index 978b5edeb..f1838936c 100644 --- a/packages/react-jss/.size-snapshot.json +++ b/packages/react-jss/.size-snapshot.json @@ -1,23 +1,23 @@ { "dist/react-jss.js": { - "bundled": 130189, - "minified": 46655, - "gzipped": 16051 + "bundled": 171071, + "minified": 59339, + "gzipped": 19438 }, "dist/react-jss.min.js": { - "bundled": 103803, - "minified": 38662, - "gzipped": 13692 + "bundled": 114048, + "minified": 42598, + "gzipped": 14460 }, "dist/react-jss.cjs.js": { - "bundled": 26922, - "minified": 11621, - "gzipped": 3848 + "bundled": 27447, + "minified": 12023, + "gzipped": 3885 }, "dist/react-jss.esm.js": { - "bundled": 25951, - "minified": 10777, - "gzipped": 3726, + "bundled": 25941, + "minified": 10783, + "gzipped": 3728, "treeshaked": { "rollup": { "code": 1838, diff --git a/packages/react-jss/src/createUseStyles.test.js b/packages/react-jss/src/createUseStyles.test.js index 803161fd9..7136ed404 100644 --- a/packages/react-jss/src/createUseStyles.test.js +++ b/packages/react-jss/src/createUseStyles.test.js @@ -1,16 +1,72 @@ /* eslint-disable react/prop-types */ -import createUseStyles from './createUseStyles' -import createBasicTests from '../test-utils/createBasicTests' -const createStyledComponent = (styles, options) => { - const useStyles = createUseStyles(styles, options) - const Comp = props => { - useStyles(props) - return null - } - return Comp +import expect from 'expect.js' +import React from 'react' +import TestRenderer from 'react-test-renderer' +import {stripIndent} from 'common-tags' + +import {SheetsRegistry, JssProvider, ThemeProvider, createUseStyles} from '.' + +const createGenerateId = () => { + let counter = 0 + return rule => `${rule.key}-${counter++}` +} + +const theme: Object = { + background: 'yellow', + background2: 'red' } describe('React-JSS: createUseStyles', () => { - createBasicTests({createStyledComponent}) + it('should render multiple elements with applied media query', () => { + const registry = new SheetsRegistry() + const useStyles = createUseStyles(themeObj => ({ + wrapper: () => ({ + padding: 40, + background: themeObj.background, + textAlign: 'left', + '@media (min-width: 1024px)': { + backgroundColor: themeObj.background2 + } + }) + })) + + const Comp = () => { + const classes = useStyles(theme) + return
+ } + + const a = [1, 2] + TestRenderer.create( + + + {a.map(item => ( + + ))} + + + ) + expect(registry.toString()).to.be(stripIndent` + .wrapper-0 {} + .wrapper-d0-1 { + padding: 40px; + background: yellow; + text-align: left; + } + @media (min-width: 1024px) { + .wrapper-d0-1 { + background-color: red; + } + } + .wrapper-d1-2 { + padding: 40px; + background: yellow; + text-align: left; + } + @media (min-width: 1024px) { + .wrapper-d1-2 { + background-color: red; + } + }`) + }) }) From 40dba278a6bcef1bc7e9ac1542c54b630917673f Mon Sep 17 00:00:00 2001 From: Matt Beaudry Date: Tue, 8 Dec 2020 16:32:19 -0500 Subject: [PATCH 03/10] added createBasicStyles call to createUseStyles test --- packages/react-jss/src/createUseStyles.test.js | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/packages/react-jss/src/createUseStyles.test.js b/packages/react-jss/src/createUseStyles.test.js index 7136ed404..08cb34f83 100644 --- a/packages/react-jss/src/createUseStyles.test.js +++ b/packages/react-jss/src/createUseStyles.test.js @@ -4,8 +4,8 @@ import expect from 'expect.js' import React from 'react' import TestRenderer from 'react-test-renderer' import {stripIndent} from 'common-tags' - import {SheetsRegistry, JssProvider, ThemeProvider, createUseStyles} from '.' +import createBasicTests from '../test-utils/createBasicTests' const createGenerateId = () => { let counter = 0 @@ -17,7 +17,18 @@ const theme: Object = { background2: 'red' } +const createStyledComponent = (styles, options) => { + const useStyles = createUseStyles(styles, options) + const Comp = props => { + useStyles(props) + return null + } + return Comp +} + describe('React-JSS: createUseStyles', () => { + createBasicTests({createStyledComponent}) + it('should render multiple elements with applied media query', () => { const registry = new SheetsRegistry() const useStyles = createUseStyles(themeObj => ({ From 7c3b288bac8337220897b3cd3372de64509b8f1e Mon Sep 17 00:00:00 2001 From: Matt Beaudry Date: Wed, 9 Dec 2020 13:21:47 -0500 Subject: [PATCH 04/10] added media query test to createBasicTests --- .../react-jss/test-utils/createBasicTests.js | 67 ++++++++++++++++++- 1 file changed, 66 insertions(+), 1 deletion(-) diff --git a/packages/react-jss/test-utils/createBasicTests.js b/packages/react-jss/test-utils/createBasicTests.js index e3323fd7d..43e5be2b0 100644 --- a/packages/react-jss/test-utils/createBasicTests.js +++ b/packages/react-jss/test-utils/createBasicTests.js @@ -6,7 +6,7 @@ import TestRenderer from 'react-test-renderer' import {renderToString} from 'react-dom/server' import {stripIndent} from 'common-tags' -import {JssProvider, SheetsRegistry} from '../src' +import {JssProvider, ThemeProvider, SheetsRegistry, createUseStyles} from '../src' export default ({createStyledComponent}) => { it('should work in StrictMode without error on React 16.3+', () => { @@ -226,4 +226,69 @@ export default ({createStyledComponent}) => { expect(classNamePrefix).to.be('Display-Name-Test-') }) }) + + describe('createUseStyles media queries', () => { + it('should render multiple elements with applied media query', () => { + const createGenerateId = () => { + let counter = 0 + return rule => `${rule.key}-${counter++}` + } + + const theme: Object = { + background: 'yellow', + background2: 'red' + } + + const registry = new SheetsRegistry() + + const useStyles = createUseStyles(themeObj => ({ + wrapper: () => ({ + padding: 40, + background: themeObj.background, + textAlign: 'left', + '@media (min-width: 1024px)': { + backgroundColor: themeObj.background2 + } + }) + })) + + const Comp = () => { + const classes = useStyles(theme) + return
+ } + + const a = [1, 2] + TestRenderer.create( + + + {a.map(item => ( + + ))} + + + ) + expect(registry.toString()).to.be(stripIndent` + .wrapper-0 {} + .wrapper-d0-1 { + padding: 40px; + background: yellow; + text-align: left; + } + @media (min-width: 1024px) { + .wrapper-d0-1 { + background-color: red; + } + } + .wrapper-d1-2 { + padding: 40px; + background: yellow; + text-align: left; + } + @media (min-width: 1024px) { + .wrapper-d1-2 { + background-color: red; + } + }`) + }) + }) } From a87700113376fc5717dc3fbc68e279f68be0eb8f Mon Sep 17 00:00:00 2001 From: Veikko Karsikko Date: Mon, 4 Jan 2021 14:04:33 +0200 Subject: [PATCH 05/10] feat: add px as default unit for text-decoration-thickness property (#1438) --- packages/css-jss/.size-snapshot.json | 12 ++++---- .../.size-snapshot.json | 28 +++++++++---------- .../src/defaultUnits.js | 1 + .../jss-preset-default/.size-snapshot.json | 12 ++++---- packages/jss-starter-kit/.size-snapshot.json | 12 ++++---- packages/react-jss/.size-snapshot.json | 12 ++++---- 6 files changed, 39 insertions(+), 38 deletions(-) diff --git a/packages/css-jss/.size-snapshot.json b/packages/css-jss/.size-snapshot.json index 3ddf245cd..4befa9145 100644 --- a/packages/css-jss/.size-snapshot.json +++ b/packages/css-jss/.size-snapshot.json @@ -1,13 +1,13 @@ { "css-jss.js": { - "bundled": 61072, - "minified": 21894, - "gzipped": 7360 + "bundled": 61109, + "minified": 21924, + "gzipped": 7375 }, "css-jss.min.js": { - "bundled": 59997, - "minified": 21271, - "gzipped": 7079 + "bundled": 60034, + "minified": 21301, + "gzipped": 7094 }, "css-jss.cjs.js": { "bundled": 3034, diff --git a/packages/jss-plugin-default-unit/.size-snapshot.json b/packages/jss-plugin-default-unit/.size-snapshot.json index 90e8ae452..0cfa39176 100644 --- a/packages/jss-plugin-default-unit/.size-snapshot.json +++ b/packages/jss-plugin-default-unit/.size-snapshot.json @@ -1,30 +1,30 @@ { "jss-plugin-default-unit.js": { - "bundled": 6857, - "minified": 3589, - "gzipped": 1219 + "bundled": 6894, + "minified": 3619, + "gzipped": 1234 }, "jss-plugin-default-unit.min.js": { - "bundled": 6857, - "minified": 3589, - "gzipped": 1219 + "bundled": 6894, + "minified": 3619, + "gzipped": 1234 }, "jss-plugin-default-unit.cjs.js": { - "bundled": 6038, - "minified": 3672, - "gzipped": 1169 + "bundled": 6073, + "minified": 3703, + "gzipped": 1183 }, "jss-plugin-default-unit.esm.js": { - "bundled": 5958, - "minified": 3606, - "gzipped": 1113, + "bundled": 5993, + "minified": 3637, + "gzipped": 1127, "treeshaked": { "rollup": { - "code": 2664, + "code": 2694, "import_statements": 39 }, "webpack": { - "code": 3685 + "code": 3715 } } } diff --git a/packages/jss-plugin-default-unit/src/defaultUnits.js b/packages/jss-plugin-default-unit/src/defaultUnits.js index a09cff72a..a0bedd6f6 100644 --- a/packages/jss-plugin-default-unit/src/defaultUnits.js +++ b/packages/jss-plugin-default-unit/src/defaultUnits.js @@ -121,6 +121,7 @@ export default { 'font-size': px, 'font-size-delta': px, 'letter-spacing': px, + 'text-decoration-thickness': px, 'text-indent': px, 'text-stroke': px, 'text-stroke-width': px, diff --git a/packages/jss-preset-default/.size-snapshot.json b/packages/jss-preset-default/.size-snapshot.json index 0785b5ed9..144722324 100644 --- a/packages/jss-preset-default/.size-snapshot.json +++ b/packages/jss-preset-default/.size-snapshot.json @@ -1,13 +1,13 @@ { "jss-preset-default.js": { - "bundled": 58272, - "minified": 21118, - "gzipped": 7011 + "bundled": 58309, + "minified": 21148, + "gzipped": 7027 }, "jss-preset-default.min.js": { - "bundled": 57197, - "minified": 20495, - "gzipped": 6731 + "bundled": 57234, + "minified": 20525, + "gzipped": 6746 }, "jss-preset-default.cjs.js": { "bundled": 2222, diff --git a/packages/jss-starter-kit/.size-snapshot.json b/packages/jss-starter-kit/.size-snapshot.json index d21b4ee8d..343eb4a96 100644 --- a/packages/jss-starter-kit/.size-snapshot.json +++ b/packages/jss-starter-kit/.size-snapshot.json @@ -1,13 +1,13 @@ { "jss-starter-kit.js": { - "bundled": 74415, - "minified": 31569, - "gzipped": 9645 + "bundled": 74452, + "minified": 31599, + "gzipped": 9657 }, "jss-starter-kit.min.js": { - "bundled": 73340, - "minified": 31381, - "gzipped": 9422 + "bundled": 73377, + "minified": 31411, + "gzipped": 9434 }, "jss-starter-kit.cjs.js": { "bundled": 5647, diff --git a/packages/react-jss/.size-snapshot.json b/packages/react-jss/.size-snapshot.json index 186d9a355..92752eb77 100644 --- a/packages/react-jss/.size-snapshot.json +++ b/packages/react-jss/.size-snapshot.json @@ -1,13 +1,13 @@ { "react-jss.js": { - "bundled": 169656, - "minified": 59534, - "gzipped": 19547 + "bundled": 169693, + "minified": 59565, + "gzipped": 19559 }, "react-jss.min.js": { - "bundled": 112296, - "minified": 42734, - "gzipped": 14502 + "bundled": 112333, + "minified": 42765, + "gzipped": 14514 }, "react-jss.cjs.js": { "bundled": 27701, From 38cc5e6699b9d2b456867bbded2b9a06831ec1ff Mon Sep 17 00:00:00 2001 From: Oleg Isonen Date: Mon, 18 Jan 2021 19:36:34 +0100 Subject: [PATCH 06/10] remove duplicate test --- .../react-jss/src/createUseStyles.test.js | 72 +------------------ 1 file changed, 3 insertions(+), 69 deletions(-) diff --git a/packages/react-jss/src/createUseStyles.test.js b/packages/react-jss/src/createUseStyles.test.js index 1d2e7f95c..c193f5002 100644 --- a/packages/react-jss/src/createUseStyles.test.js +++ b/packages/react-jss/src/createUseStyles.test.js @@ -1,21 +1,7 @@ /* eslint-disable react/prop-types */ -import expect from 'expect.js' -import React from 'react' -import TestRenderer from 'react-test-renderer' -import {stripIndent} from 'common-tags' -import {SheetsRegistry, JssProvider, ThemeProvider, createUseStyles} from '.' -import createBasicTests from '../test-utils/createBasicTests' - -const createGenerateId = () => { - let counter = 0 - return rule => `${rule.key}-${counter++}` -} - -const theme: Object = { - background: 'yellow', - background2: 'red' -} +import {createUseStyles} from '.' +import createCommonTests from '../test-utils/createCommonTests' const createStyledComponent = (styles, options) => { const useStyles = createUseStyles(styles, options) @@ -27,57 +13,5 @@ const createStyledComponent = (styles, options) => { } describe('React-JSS: createUseStyles', () => { - createBasicTests({createStyledComponent}) - - it('should render multiple elements with applied media query', () => { - const registry = new SheetsRegistry() - const useStyles = createUseStyles(themeObj => ({ - wrapper: () => ({ - padding: 40, - background: themeObj.background, - textAlign: 'left', - '@media (min-width: 1024px)': { - backgroundColor: themeObj.background2 - } - }) - })) - - const Comp = () => { - const classes = useStyles(theme) - return
- } - - const a = [1, 2] - TestRenderer.create( - - - {a.map(item => ( - - ))} - - - ) - expect(registry.toString()).to.be(stripIndent` - .wrapper-0 {} - .wrapper-d0-1 { - padding: 40px; - background: yellow; - text-align: left; - } - @media (min-width: 1024px) { - .wrapper-d0-1 { - background-color: red; - } - } - .wrapper-d1-2 { - padding: 40px; - background: yellow; - text-align: left; - } - @media (min-width: 1024px) { - .wrapper-d1-2 { - background-color: red; - } - }`) - }) + createCommonTests({createStyledComponent}) }) From 6cbb266194d5f4ed025cb6d058726cf9394af473 Mon Sep 17 00:00:00 2001 From: Oleg Isonen Date: Mon, 18 Jan 2021 19:38:27 +0100 Subject: [PATCH 07/10] rename basic to common --- packages/react-jss/src/withStyles.test.js | 4 ++-- .../test-utils/{createBasicTests.js => createCommonTests.js} | 4 ++++ 2 files changed, 6 insertions(+), 2 deletions(-) rename packages/react-jss/test-utils/{createBasicTests.js => createCommonTests.js} (98%) diff --git a/packages/react-jss/src/withStyles.test.js b/packages/react-jss/src/withStyles.test.js index 50b17bf1c..326670146 100644 --- a/packages/react-jss/src/withStyles.test.js +++ b/packages/react-jss/src/withStyles.test.js @@ -6,7 +6,7 @@ import {spy} from 'sinon' import TestRenderer from 'react-test-renderer' import {withStyles, JssProvider} from '.' -import createBasicTests from '../test-utils/createBasicTests' +import createCommonTests from '../test-utils/createCommonTests' const createGenerateId = () => { let counter = 0 @@ -20,7 +20,7 @@ const createStyledComponent = (styles, options = {}) => { } describe('React-JSS: withStyles', () => { - createBasicTests({createStyledComponent}) + createCommonTests({createStyledComponent}) describe('should merge the classes', () => { const styles = { diff --git a/packages/react-jss/test-utils/createBasicTests.js b/packages/react-jss/test-utils/createCommonTests.js similarity index 98% rename from packages/react-jss/test-utils/createBasicTests.js rename to packages/react-jss/test-utils/createCommonTests.js index d02b3750c..58d461804 100644 --- a/packages/react-jss/test-utils/createBasicTests.js +++ b/packages/react-jss/test-utils/createCommonTests.js @@ -1,4 +1,8 @@ /* eslint-disable global-require, react/prop-types, no-underscore-dangle */ +/** + * This tests are testing a common behavior between HOC and hooks interfaces. + */ + import expect from 'expect.js' import * as React from 'react' import {spy} from 'sinon' From 07d05f5fd2c369c288f5b1f515c60f8c54c1e0fd Mon Sep 17 00:00:00 2001 From: Oleg Isonen Date: Mon, 18 Jan 2021 19:41:17 +0100 Subject: [PATCH 08/10] rename test generator functions --- packages/react-jss/src/createUseStyles.test.js | 4 ++-- packages/react-jss/src/withStyles.test.js | 4 ++-- .../{createCommonTests.js => createCommonBaseTests.js} | 0 ...amicStylesTests.js => createCommonDynamicStylesTests.js} | 0 packages/react-jss/tests/dynamicStyles.js | 6 +++--- 5 files changed, 7 insertions(+), 7 deletions(-) rename packages/react-jss/test-utils/{createCommonTests.js => createCommonBaseTests.js} (100%) rename packages/react-jss/test-utils/{createDynamicStylesTests.js => createCommonDynamicStylesTests.js} (100%) diff --git a/packages/react-jss/src/createUseStyles.test.js b/packages/react-jss/src/createUseStyles.test.js index c193f5002..0c6a62220 100644 --- a/packages/react-jss/src/createUseStyles.test.js +++ b/packages/react-jss/src/createUseStyles.test.js @@ -1,7 +1,7 @@ /* eslint-disable react/prop-types */ import {createUseStyles} from '.' -import createCommonTests from '../test-utils/createCommonTests' +import createCommonBaseTests from '../test-utils/createCommonBaseTests' const createStyledComponent = (styles, options) => { const useStyles = createUseStyles(styles, options) @@ -13,5 +13,5 @@ const createStyledComponent = (styles, options) => { } describe('React-JSS: createUseStyles', () => { - createCommonTests({createStyledComponent}) + createCommonBaseTests({createStyledComponent}) }) diff --git a/packages/react-jss/src/withStyles.test.js b/packages/react-jss/src/withStyles.test.js index 326670146..8c651ba39 100644 --- a/packages/react-jss/src/withStyles.test.js +++ b/packages/react-jss/src/withStyles.test.js @@ -6,7 +6,7 @@ import {spy} from 'sinon' import TestRenderer from 'react-test-renderer' import {withStyles, JssProvider} from '.' -import createCommonTests from '../test-utils/createCommonTests' +import createCommonBaseTests from '../test-utils/createCommonBaseTests' const createGenerateId = () => { let counter = 0 @@ -20,7 +20,7 @@ const createStyledComponent = (styles, options = {}) => { } describe('React-JSS: withStyles', () => { - createCommonTests({createStyledComponent}) + createCommonBaseTests({createStyledComponent}) describe('should merge the classes', () => { const styles = { diff --git a/packages/react-jss/test-utils/createCommonTests.js b/packages/react-jss/test-utils/createCommonBaseTests.js similarity index 100% rename from packages/react-jss/test-utils/createCommonTests.js rename to packages/react-jss/test-utils/createCommonBaseTests.js diff --git a/packages/react-jss/test-utils/createDynamicStylesTests.js b/packages/react-jss/test-utils/createCommonDynamicStylesTests.js similarity index 100% rename from packages/react-jss/test-utils/createDynamicStylesTests.js rename to packages/react-jss/test-utils/createCommonDynamicStylesTests.js diff --git a/packages/react-jss/tests/dynamicStyles.js b/packages/react-jss/tests/dynamicStyles.js index 43662efd9..b8f2cc163 100644 --- a/packages/react-jss/tests/dynamicStyles.js +++ b/packages/react-jss/tests/dynamicStyles.js @@ -1,7 +1,7 @@ /* eslint-disable react/prop-types */ import {createUseStyles, withStyles} from '../src' -import createDynamicStylesTests from '../test-utils/createDynamicStylesTests' +import createCommonDynamicStylesTests from '../test-utils/createCommonDynamicStylesTests' describe('React-JSS: dynamic styles', () => { describe('using createUseStyles', () => { @@ -16,7 +16,7 @@ describe('React-JSS: dynamic styles', () => { return Comp } - createDynamicStylesTests({createStyledComponent}) + createCommonDynamicStylesTests({createStyledComponent}) }) describe('using withStyles', () => { @@ -29,6 +29,6 @@ describe('React-JSS: dynamic styles', () => { return withStyles(styles, options)(Comp) } - createDynamicStylesTests({createStyledComponent}) + createCommonDynamicStylesTests({createStyledComponent}) }) }) From d10dfb4c6d5bad38b24decc01909631f24ccb1e6 Mon Sep 17 00:00:00 2001 From: Oleg Isonen Date: Mon, 18 Jan 2021 20:30:28 +0100 Subject: [PATCH 09/10] move the test where it belongs --- .../test-utils/createCommonBaseTests.js | 67 +------------------ .../createCommonDynamicStylesTests.js | 56 +++++++++++++++- 2 files changed, 56 insertions(+), 67 deletions(-) diff --git a/packages/react-jss/test-utils/createCommonBaseTests.js b/packages/react-jss/test-utils/createCommonBaseTests.js index 58d461804..f4dac336f 100644 --- a/packages/react-jss/test-utils/createCommonBaseTests.js +++ b/packages/react-jss/test-utils/createCommonBaseTests.js @@ -10,7 +10,7 @@ import TestRenderer from 'react-test-renderer' import {renderToString} from 'react-dom/server' import {stripIndent} from 'common-tags' -import {JssProvider, ThemeProvider, SheetsRegistry, createUseStyles} from '../src' +import {JssProvider, SheetsRegistry} from '../src' export default ({createStyledComponent}) => { it('should work in StrictMode without error on React 16.3+', () => { @@ -230,69 +230,4 @@ export default ({createStyledComponent}) => { expect(classNamePrefix).to.be('Display-Name-Test-') }) }) - - describe('createUseStyles media queries', () => { - it('should render multiple elements with applied media query', () => { - const createGenerateId = () => { - let counter = 0 - return rule => `${rule.key}-${counter++}` - } - - const theme: Object = { - background: 'yellow', - background2: 'red' - } - - const registry = new SheetsRegistry() - - const useStyles = createUseStyles(themeObj => ({ - wrapper: () => ({ - padding: 40, - background: themeObj.background, - textAlign: 'left', - '@media (min-width: 1024px)': { - backgroundColor: themeObj.background2 - } - }) - })) - - const Comp = () => { - const classes = useStyles(theme) - return
- } - - const a = [1, 2] - TestRenderer.create( - - - {a.map(item => ( - - ))} - - - ) - expect(registry.toString()).to.be(stripIndent` - .wrapper-0 {} - .wrapper-d0-1 { - padding: 40px; - background: yellow; - text-align: left; - } - @media (min-width: 1024px) { - .wrapper-d0-1 { - background-color: red; - } - } - .wrapper-d1-2 { - padding: 40px; - background: yellow; - text-align: left; - } - @media (min-width: 1024px) { - .wrapper-d1-2 { - background-color: red; - } - }`) - }) - }) } diff --git a/packages/react-jss/test-utils/createCommonDynamicStylesTests.js b/packages/react-jss/test-utils/createCommonDynamicStylesTests.js index aa97bf8a5..248d00351 100644 --- a/packages/react-jss/test-utils/createCommonDynamicStylesTests.js +++ b/packages/react-jss/test-utils/createCommonDynamicStylesTests.js @@ -5,7 +5,7 @@ import * as React from 'react' import TestRenderer from 'react-test-renderer' import {stripIndent} from 'common-tags' -import {JssProvider, SheetsRegistry} from '../src' +import {JssProvider, SheetsRegistry, ThemeProvider} from '../src' const createGenerateId = () => { let counter = 0 @@ -562,5 +562,59 @@ export default ({createStyledComponent}) => { expect(passedProps.color).to.equal('rgb(255, 0, 0)') expect(passedProps.height).to.equal(20) }) + + it('should render multiple elements with applied media query and theme function', () => { + const theme: Object = { + background: 'yellow', + background2: 'red' + } + + const styles = themeObj => ({ + wrapper: () => ({ + padding: 40, + background: themeObj.background, + textAlign: 'left', + '@media (min-width: 1024px)': { + backgroundColor: themeObj.background2 + } + }) + }) + + MyComponent = createStyledComponent(styles) + + const a = [1, 2] + TestRenderer.create( + + + {a.map(item => ( + + ))} + + + ) + expect(registry.toString()).to.be(stripIndent` + .wrapper-0 {} + .wrapper-d0-1 { + padding: 40px; + background: yellow; + text-align: left; + } + @media (min-width: 1024px) { + .wrapper-d0-1 { + background-color: red; + } + } + .wrapper-d1-2 { + padding: 40px; + background: yellow; + text-align: left; + } + @media (min-width: 1024px) { + .wrapper-d1-2 { + background-color: red; + } + } + `) + }) }) } From cc62a6d23afac5a8821d40962e650a0ee9c24338 Mon Sep 17 00:00:00 2001 From: Oleg Isonen Date: Mon, 18 Jan 2021 20:38:05 +0100 Subject: [PATCH 10/10] better comments --- packages/react-jss/test-utils/createCommonBaseTests.js | 2 +- .../react-jss/test-utils/createCommonDynamicStylesTests.js | 4 +++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/react-jss/test-utils/createCommonBaseTests.js b/packages/react-jss/test-utils/createCommonBaseTests.js index f4dac336f..738f816b8 100644 --- a/packages/react-jss/test-utils/createCommonBaseTests.js +++ b/packages/react-jss/test-utils/createCommonBaseTests.js @@ -1,6 +1,6 @@ /* eslint-disable global-require, react/prop-types, no-underscore-dangle */ /** - * This tests are testing a common behavior between HOC and hooks interfaces. + * This tests are testing a base common behavior between HOC and hooks interfaces. */ import expect from 'expect.js' diff --git a/packages/react-jss/test-utils/createCommonDynamicStylesTests.js b/packages/react-jss/test-utils/createCommonDynamicStylesTests.js index 248d00351..28fe3c3cd 100644 --- a/packages/react-jss/test-utils/createCommonDynamicStylesTests.js +++ b/packages/react-jss/test-utils/createCommonDynamicStylesTests.js @@ -1,5 +1,7 @@ /* eslint-disable global-require, react/prop-types, react/no-find-dom-node, react/no-multi-comp, react/prefer-stateless-function */ - +/** + * This tests are testing a common behavior for dynamic styles between HOC and hooks interfaces. + */ import expect from 'expect.js' import * as React from 'react' import TestRenderer from 'react-test-renderer'