Skip to content

Commit e8900c2

Browse files
git-nandorgit-nandor
committed
test(ui-responsive): migrate old Responsive tests
1 parent 6b3701c commit e8900c2

File tree

5 files changed

+150
-91
lines changed

5 files changed

+150
-91
lines changed

‎cypress/component/Responsive.cy.tsx‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
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+
import React from 'react'
25+
import { Responsive } from '@instructure/ui'
26+
import { deepEqual } from '@instructure/ui-utils'
27+
import '../support/component'
28+
29+
describe('<Responsive/>', () => {
30+
it('should merge props correctly when more than one breakpoint is applied', async () => {
31+
const renderSpy = cy.spy()
32+
const props = {
33+
small: { withBorder: true, background: 'transparent' },
34+
medium: { options: [1, 2, 3], icons: { edit: true, flag: false } },
35+
large: { margin: 'small', label: 'hello world', describedBy: 'fakeId' }
36+
}
37+
cy.mount(
38+
<Responsive
39+
props={props}
40+
query={{
41+
small: { maxWidth: 300 },
42+
medium: { minWidth: 300 },
43+
large: { minWidth: 300 }
44+
}}
45+
render={(props, matches) => {
46+
renderSpy(props, matches)
47+
return <div>hello</div>
48+
}}
49+
/>
50+
)
51+
52+
cy.wrap(renderSpy)
53+
.should('have.been.called')
54+
.then(() => {
55+
const expectedProps = Object.assign(
56+
{ ...props.medium },
57+
{ ...props.large }
58+
)
59+
60+
expect(deepEqual(renderSpy.lastCall.args[0], expectedProps)).to.equal(
61+
true
62+
)
63+
})
64+
})
65+
66+
it('should provide correct props in case of multiple breakpoints in query', async () => {
67+
const renderSpy = cy.spy()
68+
const props = {
69+
small: { withBorder: true, background: 'transparent' },
70+
medium: { options: [1, 2, 3], icons: { edit: true, flag: false } },
71+
large: { margin: 'small', label: 'hello world', describedBy: 'fakeId' }
72+
}
73+
cy.mount(
74+
<div style={{ width: 800, height: 400 }}>
75+
<Responsive
76+
props={props}
77+
query={{
78+
small: { maxWidth: 300 },
79+
medium: { maxWidth: 800 },
80+
large: {
81+
minWidth: 800,
82+
maxWidth: 1000
83+
}
84+
}}
85+
render={(props, matches) => {
86+
renderSpy(props, matches)
87+
return <div>hello</div>
88+
}}
89+
/>
90+
</div>
91+
)
92+
93+
cy.wrap(renderSpy)
94+
.should('have.been.called')
95+
.then(() => {
96+
const expectedProps = { ...props.medium, ...props.large }
97+
98+
expect(deepEqual(renderSpy.lastCall.args[0], expectedProps)).to.equal(
99+
true
100+
)
101+
})
102+
})
103+
})

‎package-lock.json‎

Lines changed: 3 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/ui-responsive/package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,9 @@
3636
"devDependencies": {
3737
"@instructure/ui-babel-preset": "10.14.0",
3838
"@instructure/ui-color-utils": "10.14.0",
39-
"@instructure/ui-test-utils": "10.14.0"
39+
"@testing-library/jest-dom": "^6.6.3",
40+
"@testing-library/react": "^16.0.1",
41+
"vitest": "^2.1.8"
4042
},
4143
"peerDependencies": {
4244
"react": ">=16.14 <=18"

packages/ui-responsive/src/Responsive/__tests__/Responsive.test.tsx renamed to packages/ui-responsive/src/Responsive/__new-tests__/Responsive.test.tsx

Lines changed: 40 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -23,16 +23,31 @@
2323
*/
2424

2525
import React from 'react'
26+
import { render } from '@testing-library/react'
27+
import { vi, expect } from 'vitest'
28+
import type { MockInstance } from 'vitest'
29+
import '@testing-library/jest-dom'
2630

27-
import { expect, mount, spy, stub } from '@instructure/ui-test-utils'
2831
import { deepEqual } from '@instructure/ui-utils'
29-
3032
import { Responsive } from '../index'
3133

32-
describe('<Responsive />', async () => {
34+
describe('<Responsive />', () => {
35+
let consoleWarningMock: ReturnType<typeof vi.spyOn>
36+
37+
beforeEach(() => {
38+
// Mocking console to prevent test output pollution and expect for messages
39+
consoleWarningMock = vi
40+
.spyOn(console, 'warn')
41+
.mockImplementation(() => {}) as MockInstance
42+
})
43+
44+
afterEach(() => {
45+
consoleWarningMock.mockRestore()
46+
})
47+
3348
it('should call render with the correct matches', async () => {
34-
const renderSpy = spy()
35-
await mount(
49+
const renderSpy = vi.fn()
50+
render(
3651
<div style={{ width: 200 }}>
3752
<Responsive
3853
query={{
@@ -48,21 +63,17 @@ describe('<Responsive />', async () => {
4863
</div>
4964
)
5065

51-
expect(renderSpy).to.have.been.calledWith(null, [
52-
'small',
53-
'medium',
54-
'large'
55-
])
66+
expect(renderSpy).toHaveBeenCalledWith(null, ['small', 'medium', 'large'])
5667
})
5768

5869
it('should provide correct props for a given breakpoint', async () => {
59-
const renderSpy = spy()
70+
const renderSpy = vi.fn()
6071
const props = {
6172
small: { withBorder: true, background: 'transparent' },
6273
medium: { options: [1, 2, 3], icons: { edit: true, flag: false } },
6374
large: { margin: 'small', label: 'hello world', describedBy: 'fakeId' }
6475
}
65-
await mount(
76+
render(
6677
<div style={{ width: 200 }}>
6778
<Responsive
6879
props={props}
@@ -79,42 +90,12 @@ describe('<Responsive />', async () => {
7990
</div>
8091
)
8192

82-
expect(deepEqual(renderSpy.lastCall.args[0], props.small)).to.be.true()
83-
})
84-
85-
it('should merge props correctly when more than one breakpoint is applied', async () => {
86-
const renderSpy = spy()
87-
const props = {
88-
small: { withBorder: true, background: 'transparent' },
89-
medium: { options: [1, 2, 3], icons: { edit: true, flag: false } },
90-
large: { margin: 'small', label: 'hello world', describedBy: 'fakeId' }
91-
}
92-
await mount(
93-
<Responsive
94-
props={props}
95-
query={{
96-
small: { maxWidth: 300 },
97-
medium: { minWidth: 300 },
98-
large: { minWidth: 300 }
99-
}}
100-
render={(props, matches) => {
101-
renderSpy(props, matches)
102-
return <div>hello</div>
103-
}}
104-
/>
105-
)
106-
107-
expect(
108-
deepEqual(
109-
renderSpy.lastCall.args[0],
110-
Object.assign({ ...props.medium }, { ...props.large })
111-
)
112-
).to.be.true()
93+
expect(renderSpy).toHaveBeenCalledOnce()
94+
expect(deepEqual(renderSpy.mock.calls[0][0], props.small)).toBe(true)
11395
})
11496

11597
it('should warn when more than one breakpoint is applied and a prop value is overwritten', async () => {
116-
const consoleError = stub(console, 'warn')
117-
await mount(
98+
render(
11899
<div style={{ width: 200 }}>
119100
<Responsive
120101
props={{
@@ -136,18 +117,22 @@ describe('<Responsive />', async () => {
136117
/>
137118
</div>
138119
)
139-
const warning = [
120+
const expectedWarningMessage = [
140121
'Warning: [Responsive]',
141122
'The prop `background` is defined at 2 or more breakpoints',
142123
'which are currently applied at the same time. Its current value, `transparent`,',
143124
'will be overwritten as `solid`.'
144125
].join(' ')
145-
expect(consoleError).to.be.calledWith(warning)
126+
127+
expect(consoleWarningMock).toHaveBeenCalledWith(
128+
expect.stringContaining(expectedWarningMessage),
129+
expect.any(String)
130+
)
146131
})
147132

148133
it('should call render prop only once', async () => {
149-
const renderSpy = spy()
150-
await mount(
134+
const renderSpy = vi.fn()
135+
render(
151136
<div style={{ width: 200 }}>
152137
<Responsive
153138
query={{
@@ -163,12 +148,12 @@ describe('<Responsive />', async () => {
163148
</div>
164149
)
165150

166-
expect(renderSpy).to.have.been.called()
151+
expect(renderSpy).toHaveBeenCalledOnce()
167152
})
168153

169154
it('should apply the `display` prop', async () => {
170-
const renderSpy = spy()
171-
await mount(
155+
const renderSpy = vi.fn()
156+
const { container } = render(
172157
<div style={{ width: 200 }} id="testContainer">
173158
<Responsive
174159
query={{
@@ -184,41 +169,9 @@ describe('<Responsive />', async () => {
184169
/>
185170
</div>
186171
)
172+
const responsiveContainer = container.querySelector('[id="testContainer"]')
173+
const responsiveDiv = responsiveContainer?.firstChild
187174

188-
const responsiveDiv = document.querySelector('#testContainer')
189-
?.firstChild as HTMLDivElement
190-
191-
expect(responsiveDiv.style.display).to.equal('inline-flex')
192-
})
193-
194-
it('should provide correct props in case of multiple breakpoints in query', async () => {
195-
const renderSpy = spy()
196-
const props = {
197-
small: { withBorder: true, background: 'transparent' },
198-
medium: { options: [1, 2, 3], icons: { edit: true, flag: false } },
199-
large: { margin: 'small', label: 'hello world', describedBy: 'fakeId' }
200-
}
201-
await mount(
202-
<div style={{ width: 800, height: 400 }}>
203-
<Responsive
204-
props={props}
205-
query={{
206-
small: { maxWidth: 300 },
207-
medium: { maxWidth: 800 },
208-
large: {
209-
minWidth: 800,
210-
maxWidth: 1000
211-
}
212-
}}
213-
render={(props, matches) => {
214-
renderSpy(props, matches)
215-
return <div>hello</div>
216-
}}
217-
/>
218-
</div>
219-
)
220-
expect(
221-
deepEqual(renderSpy.lastCall.args[0], { ...props.medium, ...props.large })
222-
).to.be.true()
175+
expect(responsiveDiv).toHaveStyle('display: inline-flex')
223176
})
224177
})

‎packages/ui-responsive/tsconfig.build.json‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@
1515
{ "path": "../ui-testable/tsconfig.build.json" },
1616
{ "path": "../ui-utils/tsconfig.build.json" },
1717
{ "path": "../ui-babel-preset/tsconfig.build.json" },
18-
{ "path": "../ui-color-utils/tsconfig.build.json" },
19-
{ "path": "../ui-test-utils/tsconfig.build.json" }
18+
{ "path": "../ui-color-utils/tsconfig.build.json" }
2019
]
2120
}

0 commit comments

Comments
 (0)