Skip to content

Commit 910b34d

Browse files
git-nandormatyasf
git-nandor
authored and
matyasf
committed
test(ui-truncate-list): migrate old TruncateList tests
1 parent 1f37f70 commit 910b34d

File tree

7 files changed

+429
-441
lines changed

7 files changed

+429
-441
lines changed

‎cypress/component/TruncateList.cy.tsx‎

Lines changed: 281 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,281 @@
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, { useState } from 'react'
25+
import { TruncateList } from '@instructure/ui'
26+
import { expect } from 'chai'
27+
28+
import '../support/component'
29+
import 'cypress-real-events'
30+
31+
describe('<TruncateList />', () => {
32+
it('should pass how many items should be visible with `onUpdate` prop', async () => {
33+
const onUpdate = cy.stub()
34+
cy.mount(
35+
<TruncateList onUpdate={onUpdate} style={{ width: '100px' }}>
36+
<div>Item 1</div>
37+
<div>Item 2</div>
38+
<div>Item 3</div>
39+
</TruncateList>
40+
)
41+
cy.get('li[class$="_listItem"]').as('items')
42+
cy.get('@items').should('have.length', 3)
43+
44+
cy.wrap(onUpdate).should('have.been.calledWith', {
45+
visibleItemsCount: 2
46+
})
47+
})
48+
49+
it('should behave controlled', async () => {
50+
const initialItemNumber = 2
51+
const updatedItemNumber = 9
52+
53+
cy.mount(
54+
<TruncateList
55+
visibleItemsCount={initialItemNumber}
56+
style={{ width: '400px' }}
57+
>
58+
{Array.from(Array(15)).map((_item, idx) => (
59+
<div key={idx}>Item {idx + 1}</div>
60+
))}
61+
</TruncateList>
62+
)
63+
cy.get('li[class$="_listItem"]').as('items')
64+
cy.get('@items').should('have.length', initialItemNumber)
65+
66+
// Set Prop: visibleItemsCount
67+
cy.mount(
68+
<TruncateList
69+
visibleItemsCount={updatedItemNumber}
70+
style={{ width: '400px' }}
71+
>
72+
{Array.from(Array(15)).map((_item, idx) => (
73+
<div key={idx}>Item {idx + 1}</div>
74+
))}
75+
</TruncateList>
76+
)
77+
cy.get('@items').should('have.length', updatedItemNumber)
78+
})
79+
80+
it('should renderHiddenItemMenu callback return hidden children', async () => {
81+
const renderHiddenItemMenu = cy.stub()
82+
cy.mount(
83+
<TruncateList
84+
style={{ width: '100px' }}
85+
visibleItemsCount={2}
86+
renderHiddenItemMenu={renderHiddenItemMenu}
87+
>
88+
<div>Item 1</div>
89+
<div>Item 2</div>
90+
<div>Item 3</div>
91+
<div>Item 4</div>
92+
<div>Item 3</div>
93+
</TruncateList>
94+
)
95+
96+
cy.wrap(renderHiddenItemMenu)
97+
.should('have.been.called')
98+
.then((spy) => {
99+
const args = spy.lastCall.args[0]
100+
101+
expect(args.length).to.equal(3)
102+
103+
args.forEach((item) => {
104+
expect(item.props.children).to.be.oneOf([
105+
'Item 3',
106+
'Item 4',
107+
'Item 5'
108+
])
109+
})
110+
})
111+
})
112+
113+
it('should have no item spacing by default', async () => {
114+
cy.mount(
115+
<TruncateList>
116+
<div>Item 1</div>
117+
<div>Item 2</div>
118+
<div>Item 3</div>
119+
<div>Item 4</div>
120+
<div>Item 5</div>
121+
</TruncateList>
122+
)
123+
124+
cy.get('li[class$="_listItem"]').as('items')
125+
126+
cy.get('@items').each(($item) => {
127+
cy.wrap($item)
128+
.should('have.css', 'margin', '0px')
129+
.and('have.css', 'padding', '0px')
130+
})
131+
})
132+
133+
it('should add itemSpacing', async () => {
134+
cy.mount(
135+
<TruncateList
136+
itemSpacing={'1rem'}
137+
visibleItemsCount={3}
138+
renderHiddenItemMenu={() => <div id="trigger">trigger label</div>}
139+
>
140+
<div>Item 1</div>
141+
<div>Item 2</div>
142+
<div>Item 3</div>
143+
<div>Item 4</div>
144+
<div>Item 5</div>
145+
</TruncateList>
146+
)
147+
cy.get('li[class$="_listItem"]').as('items')
148+
149+
cy.get('@items').should('have.length', 3)
150+
151+
cy.get('@items').each((item, idx) => {
152+
cy.wrap(item)
153+
.should('have.css', 'margin', '0px')
154+
.should('have.css', 'padding', idx === 0 ? '0px' : '0px 0px 0px 16px')
155+
})
156+
})
157+
158+
it('should resize list when itemSpacing changed in runtime', async () => {
159+
const Example = ({ itemSpacing }) => {
160+
const [itemsCount, setItemsCount] = useState(5)
161+
162+
return (
163+
<TruncateList
164+
onUpdate={({ visibleItemsCount }) => {
165+
setItemsCount(visibleItemsCount)
166+
}}
167+
visibleItemsCount={itemsCount}
168+
renderHiddenItemMenu={() => <div id="trigger">trigger label</div>}
169+
itemSpacing={itemSpacing}
170+
style={{ width: '400px' }}
171+
>
172+
{Array.from(Array(15)).map((_item, idx) => (
173+
<div key={idx}>Item {idx + 1}</div>
174+
))}
175+
</TruncateList>
176+
)
177+
}
178+
179+
cy.mount(<Example itemSpacing="1rem" />)
180+
181+
cy.get('li[class$="_listItem"]:visible').as('items')
182+
183+
cy.get('@items').should('have.length', 5)
184+
cy.get('@items').each((item, idx) => {
185+
cy.wrap(item)
186+
.should('have.css', 'margin', '0px')
187+
.should('have.css', 'padding', idx === 0 ? '0px' : '0px 0px 0px 16px')
188+
})
189+
190+
// Set prop: itemSpacing
191+
cy.mount(<Example itemSpacing="4rem" />)
192+
193+
cy.get('li[class$="_listItem"]:visible').as('updatedItems')
194+
195+
cy.get('@updatedItems').should('have.length', 3)
196+
cy.get('@items').each((item, idx) => {
197+
cy.wrap(item)
198+
.should('have.css', 'margin', '0px')
199+
.should('have.css', 'padding', idx === 0 ? '0px' : '0px 0px 0px 64px')
200+
})
201+
})
202+
203+
it('should add fix width to the trigger li item via fixMenuTriggerWidth prop', async () => {
204+
cy.mount(
205+
<TruncateList
206+
fixMenuTriggerWidth="320px"
207+
visibleItemsCount={1}
208+
renderHiddenItemMenu={() => <div id="trigger">trigger label</div>}
209+
>
210+
<div>Item 1</div>
211+
<div>Item 2</div>
212+
<div>Item 3</div>
213+
<div>Item 4</div>
214+
<div>Item 5</div>
215+
</TruncateList>
216+
)
217+
cy.get('li[class$="_menuTrigger"]').as('trigger')
218+
cy.get('@trigger').should('have.css', 'width', '320px')
219+
})
220+
221+
it('when not set, should be the width of its content', async () => {
222+
cy.mount(
223+
<TruncateList
224+
visibleItemsCount={1}
225+
renderHiddenItemMenu={() => (
226+
<div style={{ width: '80px' }} id="trigger">
227+
trigger label
228+
</div>
229+
)}
230+
>
231+
<div>Item 1</div>
232+
<div>Item 2</div>
233+
<div>Item 3</div>
234+
</TruncateList>
235+
)
236+
237+
cy.get('li[class$="_menuTrigger"]').as('trigger')
238+
239+
cy.get('@trigger').should('have.css', 'width', '80px')
240+
})
241+
242+
it('should resize list when fixMenuTriggerWidth changed in runtime', async () => {
243+
const Example = ({ fixMenuTriggerWidth }) => {
244+
const [itemsCount, setItemsCount] = useState(Number)
245+
246+
return (
247+
<TruncateList
248+
fixMenuTriggerWidth={fixMenuTriggerWidth}
249+
onUpdate={({ visibleItemsCount }) => {
250+
setItemsCount(visibleItemsCount)
251+
}}
252+
visibleItemsCount={itemsCount}
253+
renderHiddenItemMenu={() => <div id="trigger">trigger label</div>}
254+
itemSpacing="1rem"
255+
style={{ width: '400px' }}
256+
>
257+
{Array.from(Array(15)).map((_item, idx) => (
258+
<div key={idx}>Item {idx + 1}</div>
259+
))}
260+
</TruncateList>
261+
)
262+
}
263+
264+
cy.mount(<Example fixMenuTriggerWidth="1rem" />)
265+
266+
cy.get('li[class$="_menuTrigger"]').as('trigger')
267+
cy.get('li[class$="_listItem"]:visible').as('items')
268+
269+
cy.get('@items').should('have.length', 6)
270+
cy.get('@trigger').should('have.css', 'width', '16px')
271+
272+
// Set prop: fixMenuTriggerWidth
273+
cy.mount(<Example fixMenuTriggerWidth="10rem" />)
274+
275+
cy.get('li[class$="_menuTrigger"]').as('trigger')
276+
cy.get('li[class$="_listItem"]:visible').as('items')
277+
278+
cy.get('@items').should('have.length', 4)
279+
cy.get('@trigger').should('have.css', 'width', '160px')
280+
})
281+
})

‎package-lock.json‎

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

‎packages/ui-truncate-list/package.json‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,12 +35,15 @@
3535
"prop-types": "^15.8.1"
3636
},
3737
"devDependencies": {
38+
"@instructure/ui-axe-check": "10.10.0",
3839
"@instructure/ui-babel-preset": "10.10.0",
3940
"@instructure/ui-color-utils": "10.10.0",
40-
"@instructure/ui-test-locator": "10.10.0",
4141
"@instructure/ui-test-queries": "10.10.0",
4242
"@instructure/ui-test-utils": "10.10.0",
43-
"@instructure/ui-themes": "10.10.0"
43+
"@instructure/ui-themes": "10.10.0",
44+
"@testing-library/jest-dom": "^6.6.3",
45+
"@testing-library/react": "^16.0.1",
46+
"vitest": "^2.1.8"
4447
},
4548
"peerDependencies": {
4649
"react": ">=16.14 <=18"

‎packages/ui-truncate-list/src/TruncateList/TruncateListLocator.ts‎

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

0 commit comments

Comments
 (0)