Skip to content

Commit fdf8c9d

Browse files
git-nandorbalzss
git-nandor
authored and
balzss
committed
test(emotion): migrate old emotion tests
1 parent 4e393db commit fdf8c9d

15 files changed

+896
-462
lines changed

‎cypress/component/Emotion-useStyle.cy.tsx‎

Lines changed: 157 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,157 @@
1+
/*
2+
* The MIT License (MIT)
3+
*
4+
* Copyright (c) 2015 - present Instructure, Inc.
5+
*
6+
* Permission is hereby granted, free of charge, to any person obtaining a copy
7+
* of this software and associated documentation files (the "Software"), to deal
8+
* in the Software without restriction, including without limitation the rights
9+
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
10+
* copies of the Software, and to permit persons to whom the Software is
11+
* furnished to do so, subject to the following conditions:
12+
*
13+
* The above copyright notice and this permission notice shall be included in all
14+
* copies or substantial portions of the Software.
15+
*
16+
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
17+
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
18+
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
19+
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
20+
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
21+
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
22+
* SOFTWARE.
23+
*/
24+
25+
import { useState } from 'react'
26+
import { expect } from 'chai'
27+
import {
28+
InstUISettingsProvider,
29+
WithStyleProps,
30+
useStyle
31+
} from '@instructure/emotion/src/index'
32+
33+
import '../support/component'
34+
import 'cypress-real-events'
35+
36+
type Props = {
37+
inverse?: boolean
38+
} & WithStyleProps<ComponentTheme>
39+
40+
type Theme = {
41+
key: string
42+
colors: {
43+
contrasts: {
44+
grey1111: string
45+
green4570: string
46+
blue4570: string
47+
}
48+
}
49+
}
50+
51+
type ComponentTheme = {
52+
textColor: string
53+
textColorInverse: string
54+
backgroundColor: string
55+
}
56+
57+
const grey1111 = 'rgb(0, 128, 0)'
58+
const green4570 = 'rgb(10, 10, 10)'
59+
const blue4570 = 'rgb(255, 255, 0)'
60+
const exampleTheme: Theme = {
61+
key: 'exampleTheme',
62+
colors: {
63+
contrasts: {
64+
grey1111,
65+
green4570,
66+
blue4570
67+
}
68+
}
69+
}
70+
71+
const generateComponentTheme = function (theme: Theme): ComponentTheme {
72+
const { colors } = theme
73+
return {
74+
textColor: colors.contrasts.grey1111,
75+
textColorInverse: colors.contrasts.green4570,
76+
backgroundColor: colors.contrasts.blue4570
77+
}
78+
}
79+
80+
type StyleParams = {
81+
inverse: boolean
82+
clearBackground: boolean
83+
themeOverride: Props['themeOverride']
84+
}
85+
86+
const generateStyle = function (
87+
componentTheme: ComponentTheme,
88+
params: StyleParams
89+
) {
90+
const { inverse, clearBackground } = params
91+
92+
return {
93+
exampleComponent: {
94+
label: 'exampleComponent',
95+
color: componentTheme.textColor,
96+
background: componentTheme.backgroundColor,
97+
insetInlineStart: '8px',
98+
...(inverse && { color: componentTheme.textColorInverse }),
99+
...(clearBackground && { background: 'transparent' })
100+
}
101+
}
102+
}
103+
104+
const ThemedComponent = ({ inverse = false, themeOverride }: Props) => {
105+
const [clearBackground, setClearBackground] = useState(false)
106+
107+
const styles = useStyle({
108+
generateStyle,
109+
generateComponentTheme,
110+
componentId: 'ThemedComponent',
111+
params: { inverse, clearBackground, themeOverride }
112+
})
113+
114+
const handleClick = () => {
115+
setClearBackground(true)
116+
}
117+
118+
return (
119+
<div data-testid="useStyle-testComp" css={styles!.exampleComponent}>
120+
<p>Hello World</p>
121+
<button onClick={handleClick}>Button</button>
122+
</div>
123+
)
124+
}
125+
126+
describe('useStyle should apply bi-directional polyfill on styles object', () => {
127+
it('in default "ltr" mode', async () => {
128+
cy.mount(
129+
<InstUISettingsProvider theme={exampleTheme}>
130+
<ThemedComponent />
131+
</InstUISettingsProvider>
132+
)
133+
134+
cy.get('[data-testid="useStyle-testComp"]').then(($el) => {
135+
const computedStyle = getComputedStyle($el[0])
136+
137+
// `inset-inline-start` becomes 'left' in LTR mode
138+
expect(computedStyle.left).to.equal('8px')
139+
expect(computedStyle.right).to.equal('auto')
140+
})
141+
})
142+
143+
it('in "rtl" mode', async () => {
144+
cy.mount(
145+
<InstUISettingsProvider theme={exampleTheme} dir="rtl">
146+
<ThemedComponent />
147+
</InstUISettingsProvider>
148+
)
149+
cy.get('[data-testid="useStyle-testComp"]').then(($el) => {
150+
const computedStyle = getComputedStyle($el[0])
151+
152+
// `inset-inline-start` should be transformed to 'right' in 'rtl' mode
153+
expect(computedStyle.left).to.equal('auto')
154+
expect(computedStyle.right).to.equal('8px')
155+
})
156+
})
157+
})

‎cypress/component/Emotion-withStyle.cy.tsx‎

Lines changed: 174 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,174 @@
1+
/*
2+
* The MIT License (MIT)
3+
*
4+
* Copyright (c) 2015 - present Instructure, Inc.
5+
*
6+
* Permission is hereby granted, free of charge, to any person obtaining a copy
7+
* of this software and associated documentation files (the "Software"), to deal
8+
* in the Software without restriction, including without limitation the rights
9+
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
10+
* copies of the Software, and to permit persons to whom the Software is
11+
* furnished to do so, subject to the following conditions:
12+
*
13+
* The above copyright notice and this permission notice shall be included in all
14+
* copies or substantial portions of the Software.
15+
*
16+
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
17+
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
18+
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
19+
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
20+
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
21+
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
22+
* SOFTWARE.
23+
*/
24+
25+
import { Component } from 'react'
26+
import { expect } from 'chai'
27+
import {
28+
InstUISettingsProvider,
29+
WithStyleProps,
30+
withStyle
31+
} from '@instructure/emotion/src/index'
32+
import PropTypes from 'prop-types'
33+
34+
import '../support/component'
35+
import 'cypress-real-events'
36+
37+
type Props = {
38+
inverse?: boolean
39+
} & WithStyleProps<ComponentTheme>
40+
41+
type State = { clearBackground?: boolean }
42+
43+
type Theme = {
44+
key: string
45+
colors: {
46+
contrasts: {
47+
grey1111: string
48+
green4570: string
49+
blue4570: string
50+
}
51+
}
52+
}
53+
54+
type ComponentTheme = {
55+
textColor: string
56+
textColorInverse: string
57+
backgroundColor: string
58+
}
59+
60+
const grey1111 = 'rgb(0, 128, 0)'
61+
const green4570 = 'rgb(10, 10, 10)'
62+
const blue4570 = 'rgb(255, 255, 0)'
63+
const exampleTheme: Theme = {
64+
key: 'exampleTheme',
65+
colors: {
66+
contrasts: {
67+
grey1111,
68+
green4570,
69+
blue4570
70+
}
71+
}
72+
}
73+
74+
const generateComponentTheme = function (theme: Theme): ComponentTheme {
75+
const { colors } = theme
76+
return {
77+
textColor: colors.contrasts.grey1111,
78+
textColorInverse: colors.contrasts.green4570,
79+
backgroundColor: colors.contrasts.blue4570
80+
}
81+
}
82+
83+
const generateStyle = function (
84+
componentTheme: ComponentTheme,
85+
props: Props,
86+
state: State
87+
) {
88+
const { inverse } = props
89+
const { clearBackground } = state
90+
91+
return {
92+
exampleComponent: {
93+
label: 'exampleComponent',
94+
color: componentTheme.textColor,
95+
background: componentTheme.backgroundColor,
96+
insetInlineStart: '8px',
97+
...(inverse && { color: componentTheme.textColorInverse }),
98+
...(clearBackground && { background: 'transparent' })
99+
}
100+
}
101+
}
102+
103+
@withStyle(generateStyle, generateComponentTheme)
104+
class ThemeableComponent extends Component<Props, State> {
105+
static propTypes = {
106+
inverse: PropTypes.bool
107+
}
108+
109+
static defaultTypes = {
110+
inverse: false
111+
}
112+
113+
state = {
114+
clearBackground: false
115+
}
116+
117+
componentDidMount() {
118+
this.props.makeStyles!({ clearBackground: this.state.clearBackground })
119+
}
120+
121+
componentDidUpdate() {
122+
this.props.makeStyles!({ clearBackground: this.state.clearBackground })
123+
}
124+
125+
handleClick = () => {
126+
this.setState({
127+
clearBackground: true
128+
})
129+
}
130+
131+
render() {
132+
const { styles } = this.props
133+
return (
134+
<div data-testId="withStyle-testComp" css={styles!.exampleComponent}>
135+
<p>Hello World</p>
136+
<button onClick={this.handleClick}>Button</button>
137+
</div>
138+
)
139+
}
140+
}
141+
142+
describe('withStyle should apply bi-directional polyfill on styles object', () => {
143+
it('in default "ltr" mode', () => {
144+
cy.mount(
145+
<InstUISettingsProvider theme={exampleTheme}>
146+
<ThemeableComponent />
147+
</InstUISettingsProvider>
148+
)
149+
150+
cy.get('[data-testid="withStyle-testComp"]').then(($el) => {
151+
const computedStyle = getComputedStyle($el[0])
152+
153+
// `inset-inline-start` should be transformed to 'left' in 'ltr' mode
154+
expect(computedStyle.left).to.equal('8px')
155+
expect(computedStyle.right).to.equal('auto')
156+
})
157+
})
158+
159+
it('in "rtl" mode', () => {
160+
cy.mount(
161+
<InstUISettingsProvider theme={exampleTheme} dir="rtl">
162+
<ThemeableComponent />
163+
</InstUISettingsProvider>
164+
)
165+
166+
cy.get('[data-testid="withStyle-testComp"]').then(($el) => {
167+
const computedStyle = getComputedStyle($el[0])
168+
169+
// `inset-inline-start` should be transformed to 'right' in 'rtl' mode
170+
expect(computedStyle.left).to.equal('auto')
171+
expect(computedStyle.right).to.equal('8px')
172+
})
173+
})
174+
})

‎cypress/component/InstUISettingsProvider.cy.tsx‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
/*
2+
* The MIT License (MIT)
3+
*
4+
* Copyright (c) 2015 - present Instructure, Inc.
5+
*
6+
* Permission is hereby granted, free of charge, to any person obtaining a copy
7+
* of this software and associated documentation files (the "Software"), to deal
8+
* in the Software without restriction, including without limitation the rights
9+
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
10+
* copies of the Software, and to permit persons to whom the Software is
11+
* furnished to do so, subject to the following conditions:
12+
*
13+
* The above copyright notice and this permission notice shall be included in all
14+
* copies or substantial portions of the Software.
15+
*
16+
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
17+
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
18+
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
19+
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
20+
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
21+
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
22+
* SOFTWARE.
23+
*/
24+
25+
import canvas from '@instructure/ui-themes/src/index'
26+
import { InstUISettingsProvider } from '@instructure/emotion/src/index'
27+
import '../support/component'
28+
import 'cypress-real-events'
29+
30+
describe('<InstUISettingsProvider />', () => {
31+
it('can handle nested text direction setting changes', () => {
32+
cy.mount(
33+
<InstUISettingsProvider theme={canvas} dir="rtl">
34+
<InstUISettingsProvider>
35+
<div data-testid="textDirAwareElement">hello world</div>
36+
</InstUISettingsProvider>
37+
</InstUISettingsProvider>
38+
)
39+
40+
cy.get('[data-testid="textDirAwareElement"]').then(($el) => {
41+
const direction = getComputedStyle($el[0]).direction
42+
expect(direction).to.equal('rtl')
43+
})
44+
45+
// Set prop: dir
46+
cy.mount(
47+
<InstUISettingsProvider theme={canvas} dir="ltr">
48+
<InstUISettingsProvider>
49+
<div data-testid="textDirAwareElement">hello world</div>
50+
</InstUISettingsProvider>
51+
</InstUISettingsProvider>
52+
)
53+
54+
cy.get('[data-testid="textDirAwareElement"]').then(($el) => {
55+
const direction = getComputedStyle($el[0]).direction
56+
expect(direction).to.equal('ltr')
57+
})
58+
})
59+
})

0 commit comments

Comments
 (0)