Skip to content

Commit 970075c

Browse files
git-nandorgit-nandor
committed
test(ui-tray): migrate old Tray tests
1 parent 2787e07 commit 970075c

File tree

6 files changed

+109
-146
lines changed

6 files changed

+109
-146
lines changed

packages/ui-tray/src/Tray/TrayLocator.ts renamed to cypress/component/Tray.cy.tsx

Lines changed: 43 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,10 +21,49 @@
2121
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
2222
* SOFTWARE.
2323
*/
24+
import React from 'react'
25+
import { Tray } from '@instructure/ui'
2426

25-
import { locator } from '@instructure/ui-test-locator'
27+
import '../support/component'
28+
import 'cypress-real-events'
2629

27-
import { Tray } from './index'
30+
describe('<Tray />', () => {
31+
it('should apply theme overrides when open', async () => {
32+
cy.mount(
33+
<Tray
34+
label="Tray Example"
35+
open
36+
size="small"
37+
placement="start"
38+
themeOverride={{ smallWidth: '10em' }}
39+
>
40+
<div>Hello</div>
41+
</Tray>
42+
)
2843

29-
// @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
30-
export const TrayLocator = locator(Tray.selector)
44+
cy.get('[aria-label="Tray Example"]')
45+
.should('have.attr', 'role', 'dialog')
46+
.and('have.css', 'width', '160px')
47+
})
48+
49+
it('should call onDismiss prop when Esc key pressed', async () => {
50+
const onDismiss = cy.stub()
51+
cy.mount(
52+
<Tray
53+
open
54+
label="Tray Example"
55+
shouldCloseOnDocumentClick
56+
onDismiss={onDismiss}
57+
>
58+
Hello Tray
59+
<input type="text" />
60+
<input type="text" id="my-input" />
61+
</Tray>
62+
)
63+
64+
cy.get('[aria-label="Tray Example"]').as('tray')
65+
66+
cy.get('@tray').realPress('Escape')
67+
cy.wrap(onDismiss).should('have.been.called')
68+
})
69+
})

‎package-lock.json‎

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

‎packages/ui-tray/package.json‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -41,9 +41,11 @@
4141
},
4242
"devDependencies": {
4343
"@instructure/ui-babel-preset": "10.11.0",
44-
"@instructure/ui-test-locator": "10.11.0",
45-
"@instructure/ui-test-utils": "10.11.0",
46-
"@instructure/ui-themes": "10.11.0"
44+
"@instructure/ui-themes": "10.11.0",
45+
"@testing-library/jest-dom": "^6.6.3",
46+
"@testing-library/react": "^16.0.1",
47+
"@testing-library/user-event": "^14.5.2",
48+
"vitest": "^2.1.8"
4749
},
4850
"peerDependencies": {
4951
"react": ">=16.14 <=18"

packages/ui-tray/src/Tray/__tests__/Tray.test.tsx renamed to packages/ui-tray/src/Tray/__new-tests__/Tray.test.tsx

Lines changed: 56 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -23,151 +23,93 @@
2323
*/
2424

2525
import React from 'react'
26-
27-
import {
28-
expect,
29-
mount,
30-
stub,
31-
wait,
32-
wrapQueryResult
33-
} from '@instructure/ui-test-utils'
26+
import { render, screen, waitFor } from '@testing-library/react'
27+
import { vi } from 'vitest'
28+
import '@testing-library/jest-dom'
3429

3530
import { Tray } from '../index'
36-
import { TrayLocator } from '../TrayLocator'
3731
import type { TrayProps } from '../props'
3832

3933
describe('<Tray />', async () => {
4034
it('should render nothing and have a node with no parent when closed', async () => {
41-
await mount(<Tray label="Tray Example">Hello World</Tray>)
42-
const tray = await TrayLocator.find({ expectEmpty: true })
43-
expect(tray).to.not.exist()
35+
render(<Tray label="Tray Example">Hello Tray</Tray>)
36+
37+
const trayContent = screen.queryByText('Hello Tray')
38+
expect(trayContent).not.toBeInTheDocument()
4439
})
4540

4641
it('should render children and have a node with a parent when open', async () => {
47-
await mount(
42+
render(
4843
<Tray label="Tray Example" open>
49-
Hello World
44+
Hello Tray
5045
</Tray>
5146
)
47+
const trayContent = screen.getByText('Hello Tray')
5248

53-
const tray = await TrayLocator.find(':label(Tray Example)')
54-
await wait(() => expect(tray.getTextContent()).to.equal('Hello World'))
55-
})
56-
57-
it('should apply theme overrides when open', async () => {
58-
await mount(
59-
<Tray
60-
label="Tray Example"
61-
open
62-
size="small"
63-
placement="start"
64-
themeOverride={{ smallWidth: '10em' }}
65-
>
66-
<div>Hello</div>
67-
</Tray>
68-
)
69-
const tray = await TrayLocator.find()
70-
const dialog = await tray.find('[role="dialog"]')
71-
await wait(() => {
72-
expect(dialog.getComputedStyle().width).to.equal('160px')
73-
})
49+
expect(trayContent).toBeInTheDocument()
7450
})
7551

7652
it('should apply the a11y attributes', async () => {
77-
await mount(
53+
render(
7854
<Tray label="Tray Example" open>
79-
Hello World
55+
Hello Tray
8056
</Tray>
8157
)
82-
const tray = await TrayLocator.find()
83-
const dialog = await tray.find('[role="dialog"]')
58+
const tray = screen.getByRole('dialog')
8459

85-
expect(dialog.getAttribute('aria-label')).to.equal('Tray Example')
60+
expect(tray).toHaveAttribute('aria-label', 'Tray Example')
8661
})
8762

8863
it('should support onOpen prop', async () => {
89-
const onOpen = stub()
90-
await mount(
64+
const onOpen = vi.fn()
65+
render(
9166
<Tray label="Tray Example" open onOpen={onOpen}>
92-
Hello World
67+
Hello Tray
9368
</Tray>
9469
)
9570

96-
await wait(() => {
97-
expect(onOpen).to.have.been.called()
71+
await waitFor(() => {
72+
expect(onOpen).toHaveBeenCalled()
9873
})
9974
})
10075

10176
it('should support onClose prop', async () => {
102-
const onClose = stub()
77+
const onClose = vi.fn()
10378

104-
const subject = await mount(
79+
const { rerender } = render(
10580
<Tray label="Tray Example" open onClose={onClose}>
106-
Hello World
81+
Hello Tray
10782
</Tray>
10883
)
10984

110-
await subject.setProps({ open: false })
85+
// Set prop: open
86+
rerender(
87+
<Tray label="Tray Example" open={false} onClose={onClose}>
88+
Hello Tray
89+
</Tray>
90+
)
11191

112-
await wait(() => {
113-
expect(onClose).to.have.been.called()
92+
await waitFor(() => {
93+
expect(onClose).toHaveBeenCalled()
11494
})
11595
})
11696

11797
it('should take a prop for finding default focus', async () => {
118-
await mount(
98+
render(
11999
<Tray
120100
label="Tray Example"
121101
open
122102
defaultFocusElement={() => document.getElementById('my-input')}
123103
>
124-
Hello World
104+
Hello Tray
125105
<input type="text" />
126-
<input type="text" id="my-input" />
106+
<input type="text" id="my-input" aria-label="my-input-label" />
127107
</Tray>
128108
)
109+
const input = screen.getByLabelText('my-input-label')
129110

130-
const tray = await TrayLocator.find()
131-
const input = await tray.find('#my-input')
132-
133-
await wait(() => {
134-
expect(input.focused()).to.be.true()
135-
})
136-
})
137-
138-
it('should call onDismiss prop when Esc key pressed', async () => {
139-
const onDismiss = stub()
140-
await mount(
141-
<Tray
142-
open
143-
label="Tray Example"
144-
shouldCloseOnDocumentClick
145-
onDismiss={onDismiss}
146-
>
147-
Hello World
148-
<input type="text" />
149-
<input type="text" id="my-input" />
150-
</Tray>
151-
)
152-
153-
const tray = await TrayLocator.find()
154-
155-
await wait(() => {
156-
expect(tray.containsFocus()).to.be.true()
157-
})
158-
159-
await wrapQueryResult(tray.getOwnerDocument().documentElement).keyUp(
160-
'escape',
161-
{
162-
defaultPrevented: false,
163-
bubbles: true,
164-
button: 0
165-
},
166-
{ focusable: false }
167-
)
168-
169-
await wait(() => {
170-
expect(onDismiss).to.have.been.called()
111+
await waitFor(() => {
112+
expect(document.activeElement).toBe(input)
171113
})
172114
})
173115

@@ -204,10 +146,10 @@ describe('<Tray />', async () => {
204146
for (const placement in placements[dir].enteringPlacements) {
205147
const val = placements[dir].enteringPlacements[placement]
206148
it(`returns ${val} for ${placement} when entering`, async () => {
207-
const onEntered = stub()
149+
const onEntered = vi.fn()
208150
document.documentElement.setAttribute('dir', dir)
209151

210-
await mount(
152+
render(
211153
<Tray
212154
open
213155
label="Tray Example"
@@ -217,20 +159,19 @@ describe('<Tray />', async () => {
217159
Hello
218160
</Tray>
219161
)
220-
221-
await wait(() => {
222-
expect(onEntered).to.have.been.called()
162+
await waitFor(() => {
163+
expect(onEntered).toHaveBeenCalled()
223164
})
224165
})
225166
}
226167

227168
for (const placement in placements[dir].exitingPlacements) {
228169
const val = placements[dir].exitingPlacements[placement]
229170
it(`returns ${val} for ${placement} when exiting`, async () => {
230-
const onExited = stub()
171+
const onExited = vi.fn()
231172
document.documentElement.setAttribute('dir', dir)
232173

233-
const subject = await mount(
174+
const { rerender } = render(
234175
<Tray
235176
open
236177
label="Tray Example"
@@ -241,10 +182,19 @@ describe('<Tray />', async () => {
241182
</Tray>
242183
)
243184

244-
await subject.setProps({ open: false })
245-
246-
await wait(() => {
247-
expect(onExited).to.have.been.called()
185+
// Set prop: open
186+
rerender(
187+
<Tray
188+
open={false}
189+
label="Tray Example"
190+
placement={placement as TrayProps['placement']}
191+
onExited={onExited}
192+
>
193+
Hello
194+
</Tray>
195+
)
196+
await waitFor(() => {
197+
expect(onExited).toHaveBeenCalled()
248198
})
249199
})
250200
}

‎packages/ui-tray/src/Tray/locator.ts‎

Lines changed: 0 additions & 28 deletions
This file was deleted.

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

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,6 @@
2121
{ "path": "../ui-overlays/tsconfig.build.json" },
2222
{ "path": "../ui-utils/tsconfig.build.json" },
2323
{ "path": "../ui-babel-preset/tsconfig.build.json" },
24-
{ "path": "../ui-test-locator/tsconfig.build.json" },
25-
{ "path": "../ui-test-utils/tsconfig.build.json" },
2624
{ "path": "../ui-themes/tsconfig.build.json" }
2725
]
2826
}

0 commit comments

Comments
 (0)