paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 36 Packages Projects Releases Wiki Activity

theme: added tests for UnifiedThemeProvider

Browse Source 
Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
This commit is contained in:
Patrik Oldsberg
2023-11-20 11:41:35 +01:00
parent 297e9a5d80
commit 143b40a4b4
4 changed files with 176 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/theme/package.json
+3
View File
@@ -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": [
packages/theme/src/setupTests.ts
+17
View File
@@ -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';
packages/theme/src/unified/UnifiedThemeProvider.test.tsx
+86
View File
@@ -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 <span>v4-grey: {theme.palette.grey[500]}</span>;
}
function MyV5Component() {
const theme = useV5Theme();
return <span>v5-grey: {theme.palette.grey[500]}</span>;
}
render(
<UnifiedThemeProvider theme={themes.light}>
<MyV4Component />
<MyV5Component />
</UnifiedThemeProvider>,
);
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 <span className={classes.root}>v4</span>;
}
function MyV5Component() {
const classes = useV5Styles();
return <span className={classes.root}>v5</span>;
}
render(
<UnifiedThemeProvider theme={themes.light}>
<MyV4Component />
<MyV5Component />
</UnifiedThemeProvider>,
);
expect(window.getComputedStyle(screen.getByText('v4')).color).toBe(
'rgb(158, 158, 158)',
);
expect(window.getComputedStyle(screen.getByText('v5')).color).toBe(
'rgb(158, 158, 158)',
);
});
});
yarn.lock
+70 -48
View File
@@ -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: