diff --git a/packages/theme/package.json b/packages/theme/package.json index 5f49b904a7..bf78a5d167 100644 --- a/packages/theme/package.json +++ b/packages/theme/package.json @@ -45,6 +45,9 @@ }, "devDependencies": { "@backstage/cli": "workspace:^", + "@mui/styles": "^5.14.18", + "@testing-library/jest-dom": "^6.0.0", + "@testing-library/react": "^14.0.0", "@types/react": "^16.13.1 || ^17.0.0" }, "files": [ diff --git a/packages/theme/src/setupTests.ts b/packages/theme/src/setupTests.ts new file mode 100644 index 0000000000..963c0f188b --- /dev/null +++ b/packages/theme/src/setupTests.ts @@ -0,0 +1,17 @@ +/* + * Copyright 2020 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import '@testing-library/jest-dom'; diff --git a/packages/theme/src/unified/UnifiedThemeProvider.test.tsx b/packages/theme/src/unified/UnifiedThemeProvider.test.tsx new file mode 100644 index 0000000000..da4af5abab --- /dev/null +++ b/packages/theme/src/unified/UnifiedThemeProvider.test.tsx @@ -0,0 +1,86 @@ +/* + * Copyright 2022 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { + useTheme as useV4Theme, + makeStyles as makeV4Styles, +} from '@material-ui/core/styles'; +import { useTheme as useV5Theme } from '@mui/material/styles'; +import { makeStyles as makeV5Styles } from '@mui/styles'; +import { render, screen } from '@testing-library/react'; +import React from 'react'; +import './MuiClassNameSetup'; +import { UnifiedThemeProvider } from './UnifiedThemeProvider'; +import { themes } from './themes'; + +describe('UnifiedThemeProvider', () => { + it('provides a themes for v4 and v5 directly', () => { + function MyV4Component() { + const theme = useV4Theme(); + return v4-grey: {theme.palette.grey[500]}; + } + function MyV5Component() { + const theme = useV5Theme(); + return v5-grey: {theme.palette.grey[500]}; + } + + render( + + + + , + ); + + expect(screen.getByText('v4-grey: #9e9e9e')).toBeInTheDocument(); + expect(screen.getByText('v5-grey: #9e9e9e')).toBeInTheDocument(); + }); + + it('provides a themes for v4 and v5 through makeStyles', () => { + const useV4Styles = makeV4Styles(theme => ({ + root: { + color: theme.palette.grey[500], + }, + })); + const useV5Styles = makeV5Styles(theme => ({ + root: { + color: theme.palette.grey[500], + }, + })); + + function MyV4Component() { + const classes = useV4Styles(); + return v4; + } + function MyV5Component() { + const classes = useV5Styles(); + return v5; + } + + render( + + + + , + ); + + expect(window.getComputedStyle(screen.getByText('v4')).color).toBe( + 'rgb(158, 158, 158)', + ); + expect(window.getComputedStyle(screen.getByText('v5')).color).toBe( + 'rgb(158, 158, 158)', + ); + }); +}); diff --git a/yarn.lock b/yarn.lock index dbce09e785..6c071cceaa 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9809,6 +9809,9 @@ __metadata: "@emotion/react": ^11.10.5 "@emotion/styled": ^11.10.5 "@mui/material": ^5.12.2 + "@mui/styles": ^5.14.18 + "@testing-library/jest-dom": ^6.0.0 + "@testing-library/react": ^14.0.0 "@types/react": ^16.13.1 || ^17.0.0 peerDependencies: "@material-ui/core": ^4.12.2 @@ -12956,6 +12959,37 @@ __metadata: languageName: node linkType: hard +"@mui/styles@npm:^5.14.18": + version: 5.14.18 + resolution: "@mui/styles@npm:5.14.18" + dependencies: + "@babel/runtime": ^7.23.2 + "@emotion/hash": ^0.9.1 + "@mui/private-theming": ^5.14.18 + "@mui/types": ^7.2.9 + "@mui/utils": ^5.14.18 + clsx: ^2.0.0 + csstype: ^3.1.2 + hoist-non-react-statics: ^3.3.2 + jss: ^10.10.0 + jss-plugin-camel-case: ^10.10.0 + jss-plugin-default-unit: ^10.10.0 + jss-plugin-global: ^10.10.0 + jss-plugin-nested: ^10.10.0 + jss-plugin-props-sort: ^10.10.0 + jss-plugin-rule-value-function: ^10.10.0 + jss-plugin-vendor-prefixer: ^10.10.0 + prop-types: ^15.8.1 + peerDependencies: + "@types/react": ^17.0.0 || ^18.0.0 + react: ^17.0.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: c3a50ff3ab96e931f1506431de70c173af49c7a7d9410a2d132f65ef789f38f4cc742f456cfc16b24ecb7cb492b30dc1afb653cf31318b7059fd52fa790983b5 + languageName: node + linkType: hard + "@mui/system@npm:^5.14.18": version: 5.14.18 resolution: "@mui/system@npm:5.14.18" @@ -31639,77 +31673,77 @@ __metadata: languageName: node linkType: hard -"jss-plugin-camel-case@npm:^10.5.1": - version: 10.9.2 - resolution: "jss-plugin-camel-case@npm:10.9.2" +"jss-plugin-camel-case@npm:^10.10.0, jss-plugin-camel-case@npm:^10.5.1": + version: 10.10.0 + resolution: "jss-plugin-camel-case@npm:10.10.0" dependencies: "@babel/runtime": ^7.3.1 hyphenate-style-name: ^1.0.3 - jss: 10.9.2 - checksum: 5fa617b23ce9718244691c59ace6a0d1271dbcb4430ce3e13b851ee1879c1db8ecab7e941c33802bea763a0f0e2b609d004b8a975b2063f213cdd639cdd384d2 + jss: 10.10.0 + checksum: 693485b86f7a0e0bd0c16b8ddd057ca02a993fc088558c96501f9131e7e6261cc9f4b08047879a68441c688c40dceeb5219b1f15ade9043935aade4f37f5ca85 languageName: node linkType: hard -"jss-plugin-default-unit@npm:^10.5.1": - version: 10.9.2 - resolution: "jss-plugin-default-unit@npm:10.9.2" +"jss-plugin-default-unit@npm:^10.10.0, jss-plugin-default-unit@npm:^10.5.1": + version: 10.10.0 + resolution: "jss-plugin-default-unit@npm:10.10.0" dependencies: "@babel/runtime": ^7.3.1 - jss: 10.9.2 - checksum: 48d8d836d36dd15513d98de11fba6be373ac29e6fd5702eb2edd143c815fb9e2f9969b2af6b1b964e9b8a052828690887042f6bcb34836836d5c359e52702d0f + jss: 10.10.0 + checksum: 6e56213830753ad80bca3824973a667106defaef698d5996d45d03a0e2a3e035b33cd257aa8015040c41bd6669e7598dce72c36099d7ae69db758a7b2ca453fa languageName: node linkType: hard -"jss-plugin-global@npm:^10.5.1": - version: 10.9.2 - resolution: "jss-plugin-global@npm:10.9.2" +"jss-plugin-global@npm:^10.10.0, jss-plugin-global@npm:^10.5.1": + version: 10.10.0 + resolution: "jss-plugin-global@npm:10.10.0" dependencies: "@babel/runtime": ^7.3.1 - jss: 10.9.2 - checksum: 9b29b0c1f169d5a1033890875df072d76364a902d0f6470f448544669a388612a9a4d51844fb2bcb6d25a1c43d67c1637f11a162c2cdd9f4b6b0a8f9c94f6090 + jss: 10.10.0 + checksum: f3af4f40358e96cf89e0c7c84b6e441dc9b4d543cd6109fdf9314a9818fd780d252035f46cc526c3d3fb4393bc29effc6993cc22e04f4e67ec3c889ab760d580 languageName: node linkType: hard -"jss-plugin-nested@npm:^10.5.1": - version: 10.9.2 - resolution: "jss-plugin-nested@npm:10.9.2" +"jss-plugin-nested@npm:^10.10.0, jss-plugin-nested@npm:^10.5.1": + version: 10.10.0 + resolution: "jss-plugin-nested@npm:10.10.0" dependencies: "@babel/runtime": ^7.3.1 - jss: 10.9.2 + jss: 10.10.0 tiny-warning: ^1.0.2 - checksum: ee08df07f3d553931b48037674842a8314bbc7857cc954a52f962a516bfc4b2d4e9871578b06b8fa3981edf5a927cea00021fd368d4ce315870065b7647f7b57 + checksum: 190094375972b68eb8f683387c74e97dc8347e7cc4f2fbfd40b3baf077dfde83d70e57be56744690d22537c0390e0a398714d86736df820c64e498df95f937de languageName: node linkType: hard -"jss-plugin-props-sort@npm:^10.5.1": - version: 10.9.2 - resolution: "jss-plugin-props-sort@npm:10.9.2" +"jss-plugin-props-sort@npm:^10.10.0, jss-plugin-props-sort@npm:^10.5.1": + version: 10.10.0 + resolution: "jss-plugin-props-sort@npm:10.10.0" dependencies: "@babel/runtime": ^7.3.1 - jss: 10.9.2 - checksum: 70bd181a458a6078f19ad4d7350570c78d26b9aabc25a1fbde673839edcc19825af7b636861b208a38aa17e551e68d0ea38599480716b4aec08e353bbe737222 + jss: 10.10.0 + checksum: 274483444b6733bd58d229ebdcdb32b3c24172bc83cb2f6f8364926de19acd872758bcf06c7b3af11cf75504a67a7d67abba62b25081d144585a56b4df9512ba languageName: node linkType: hard -"jss-plugin-rule-value-function@npm:^10.5.1": - version: 10.9.2 - resolution: "jss-plugin-rule-value-function@npm:10.9.2" +"jss-plugin-rule-value-function@npm:^10.10.0, jss-plugin-rule-value-function@npm:^10.5.1": + version: 10.10.0 + resolution: "jss-plugin-rule-value-function@npm:10.10.0" dependencies: "@babel/runtime": ^7.3.1 - jss: 10.9.2 + jss: 10.10.0 tiny-warning: ^1.0.2 - checksum: b1a03209d0249f13ea6de766d3ee14c1769cd1f67d8c543c7d1ce6178c32cf15507c021ecb3e3b7585a8a7a2425dddbe0bdae02f4135c4598725a4152bebfc99 + checksum: 009c9593b9be8b9f1030b797e58e3c233d90e034e5c68b0cabd25bffc7da965c69dc1ccb1bb6a542d72bb824df89036b2264fe564e8538320ef99febaf2882ee languageName: node linkType: hard -"jss-plugin-vendor-prefixer@npm:^10.5.1": - version: 10.9.2 - resolution: "jss-plugin-vendor-prefixer@npm:10.9.2" +"jss-plugin-vendor-prefixer@npm:^10.10.0, jss-plugin-vendor-prefixer@npm:^10.5.1": + version: 10.10.0 + resolution: "jss-plugin-vendor-prefixer@npm:10.10.0" dependencies: "@babel/runtime": ^7.3.1 css-vendor: ^2.0.8 - jss: 10.9.2 - checksum: a5c352a500fea82e8a782a090cc9815f6331259f1a331158ed74ed77c750fb45750f5ae95f07d27922742830b45d4c3592cfaab194b3ba4a50591acbdeab04d8 + jss: 10.10.0 + checksum: 879b7233f9b0b571074dc2b88d97a05dbb949012ba2405f1481bbedd521167dc835133632adb3f2d8ffceddd337c8c13e3e8b1931590516c0664039598752dff languageName: node linkType: hard @@ -31733,19 +31767,7 @@ __metadata: languageName: node linkType: hard -"jss@npm:10.9.2": - version: 10.9.2 - resolution: "jss@npm:10.9.2" - dependencies: - "@babel/runtime": ^7.3.1 - csstype: ^3.0.2 - is-in-browser: ^1.1.3 - tiny-warning: ^1.0.2 - checksum: 7ae5cd2f8602bf197ec90251d774b9f10d55eb2db0854ac78dc7fb6983828c202e8eb0d5c8c59c73b2f64718ebd33d6063afa799d625a995986a22dc1cc27230 - languageName: node - linkType: hard - -"jss@npm:^10.5.1, jss@npm:~10.10.0": +"jss@npm:10.10.0, jss@npm:^10.10.0, jss@npm:^10.5.1, jss@npm:~10.10.0": version: 10.10.0 resolution: "jss@npm:10.10.0" dependencies: