Skip to content

Commit e9173b7

Browse files
git-nandorgit-nandor
committed
test(ui-tabs): migrate old Tabs tests
1 parent d6eb557 commit e9173b7

File tree

10 files changed

+503
-616
lines changed

10 files changed

+503
-616
lines changed

‎cypress/component/Tabs.cy.tsx‎

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
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 { Tabs } from '@instructure/ui'
26+
import { expect } from 'chai'
27+
28+
import '../support/component'
29+
import 'cypress-real-events'
30+
31+
describe('<Tabs/>', () => {
32+
it('should preserve Tab.Panel keys', async () => {
33+
const createElementSpy = cy.spy(React, 'createElement')
34+
cy.mount(
35+
<Tabs>
36+
<Tabs.Panel renderTitle="foo" key="foo-key" />
37+
</Tabs>
38+
)
39+
40+
cy.wrap(createElementSpy)
41+
.should('have.been.called')
42+
.then((spy) => {
43+
const createFooTabCall = spy
44+
.getCalls()
45+
.filter((call) => call.args[1]?.renderTitle === 'foo')[0]
46+
47+
expect(createFooTabCall.args[1].key).to.equal('foo-key')
48+
49+
// Set two child
50+
cy.mount(
51+
<Tabs>
52+
<Tabs.Panel renderTitle="foo" key="foo-key" />
53+
<Tabs.Panel renderTitle="bar" key="bar-key" />
54+
</Tabs>
55+
)
56+
57+
cy.wrap(createElementSpy)
58+
.should('have.been.called')
59+
.then((updatedSpy) => {
60+
const createFooTabCall = updatedSpy
61+
.getCalls()
62+
.filter((call) => call.args[1]?.renderTitle === 'foo')[0]
63+
const createBarTabCall = updatedSpy
64+
.getCalls()
65+
.filter((call) => call.args[1]?.renderTitle === 'bar')[0]
66+
67+
expect(createFooTabCall.args[1].key).to.equal('foo-key')
68+
expect(createBarTabCall.args[1].key).to.equal('bar-key')
69+
})
70+
})
71+
})
72+
73+
it('should call onRequestTabChange with keyboard arrow keys', async () => {
74+
const onChange = cy.stub()
75+
76+
cy.mount(
77+
<Tabs onRequestTabChange={onChange}>
78+
<Tabs.Panel renderTitle="First Tab">Tab 1 content</Tabs.Panel>
79+
<Tabs.Panel renderTitle="Second Tab">Tab 2 content</Tabs.Panel>
80+
<Tabs.Panel renderTitle="Third Tab" isDisabled>
81+
Tab 3 content
82+
</Tabs.Panel>
83+
</Tabs>
84+
)
85+
cy.get('[role="tab"][aria-selected="true"]').as('selectedTab')
86+
87+
cy.get('@selectedTab').focus()
88+
cy.get('@selectedTab').type('{leftarrow}')
89+
cy.wrap(onChange).should('have.been.calledOnce')
90+
cy.wrap(onChange).its('firstCall.args[1].index').should('equal', 1)
91+
92+
cy.wrap(onChange).invoke('resetHistory')
93+
94+
cy.get('@selectedTab').focus()
95+
cy.get('@selectedTab').type('{rightarrow}')
96+
cy.wrap(onChange).should('have.been.calledOnce')
97+
cy.wrap(onChange).its('lastCall.args[1].index').should('equal', 1)
98+
99+
cy.wrap(onChange).invoke('resetHistory')
100+
101+
cy.get('@selectedTab').focus()
102+
cy.get('@selectedTab').type('{uparrow}')
103+
cy.wrap(onChange).should('have.been.calledOnce')
104+
cy.wrap(onChange).its('lastCall.args[1].index').should('equal', 1)
105+
106+
cy.wrap(onChange).invoke('resetHistory')
107+
108+
cy.get('@selectedTab').focus()
109+
cy.get('@selectedTab').type('{downarrow}')
110+
cy.wrap(onChange).should('have.been.calledOnce')
111+
cy.wrap(onChange).its('lastCall.args[1].index').should('equal', 1)
112+
})
113+
114+
it('should render a fade-out gradient when tabOverflow set to scroll and Tabs overflow', async () => {
115+
const Example = ({ width }: { width: string }) => (
116+
<div style={{ width }}>
117+
<Tabs tabOverflow="scroll">
118+
<Tabs.Panel renderTitle="Tab1">Contents of panel</Tabs.Panel>
119+
<Tabs.Panel renderTitle="Tab2">Contents of panel</Tabs.Panel>
120+
<Tabs.Panel renderTitle="Tab3">Contents of panel</Tabs.Panel>
121+
<Tabs.Panel renderTitle="Tab4">Contents of panel</Tabs.Panel>
122+
<Tabs.Panel renderTitle="Tab5">Contents of panel</Tabs.Panel>
123+
</Tabs>
124+
</div>
125+
)
126+
127+
cy.mount(<Example width="150px" />)
128+
129+
cy.get('[class$="-tabs__startScrollOverlay"]').should('exist')
130+
cy.get('[class$="-tabs__endScrollOverlay"]').should('exist')
131+
132+
cy.mount(<Example width="550px" />)
133+
134+
cy.get('[class$="-tabs__startScrollOverlay"]').should('not.exist')
135+
cy.get('[class$="-tabs__endScrollOverlay"]').should('not.exist')
136+
})
137+
})

‎package-lock.json‎

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

‎packages/ui-tabs/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,13 +23,14 @@
2323
},
2424
"license": "MIT",
2525
"devDependencies": {
26+
"@instructure/ui-axe-check": "10.14.0",
2627
"@instructure/ui-babel-preset": "10.14.0",
2728
"@instructure/ui-color-utils": "10.14.0",
28-
"@instructure/ui-test-locator": "10.14.0",
2929
"@instructure/ui-test-utils": "10.14.0",
3030
"@instructure/ui-themes": "10.14.0",
3131
"@testing-library/jest-dom": "^6.6.3",
3232
"@testing-library/react": "^16.0.1",
33+
"@testing-library/user-event": "^14.5.2",
3334
"vitest": "^2.1.8"
3435
},
3536
"dependencies": {

packages/ui-tabs/src/Tabs/Panel/__tests__/Panel.test.tsx renamed to packages/ui-tabs/src/Tabs/Panel/__new-tests__/Panel.test.tsx

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -23,30 +23,31 @@
2323
*/
2424

2525
import React from 'react'
26-
import { expect, find, mount } from '@instructure/ui-test-utils'
26+
import { render, screen } from '@testing-library/react'
27+
import '@testing-library/jest-dom'
2728

2829
import { Panel } from '../index'
2930

30-
describe('<Tabs.Panel />', async () => {
31+
describe('<Tabs.Panel />', () => {
3132
it('should render children', async () => {
32-
await mount(
33+
render(
3334
<Panel isSelected renderTitle="Panel Title">
3435
Panel contents
3536
</Panel>
3637
)
38+
const children = screen.getByText('Panel contents')
3739

38-
const tabPanel = await find('[role="tabpanel"]')
39-
expect(tabPanel.getTextContent()).to.equal('Panel contents')
40+
expect(children).toBeInTheDocument()
4041
})
4142

4243
it('should have appropriate role attribute', async () => {
43-
await mount(
44+
const {container} = render(
4445
<Panel isSelected renderTitle="Panel Title">
4546
Panel contents
4647
</Panel>
4748
)
49+
const tabPanel = container.querySelector('[class$="-panel"]')
4850

49-
const tabPanel = await find('[role="tabpanel"]')
50-
expect(tabPanel.getAttribute('role')).to.equal('tabpanel')
51+
expect(tabPanel).toHaveAttribute('role', 'tabpanel')
5152
})
5253
})

0 commit comments

Comments
 (0)