Skip to content

Commit f10c9d4

Browse files
forestreamforestream
committed
Update Select test cases
1 parent c212af2 commit f10c9d4

File tree

4 files changed

+72
-14
lines changed

4 files changed

+72
-14
lines changed

‎packages/components/src/components/Input/__tests__/__snapshots__/index.browser.test.tsx.snap‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
exports[`Controlled Input > should render with value 1`] = `
44
<div>
55
<div
6-
class="display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-1758945993780808850-255"
6+
class="display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-1137980104803605758-255"
77
>
88
<input
99
aria-label="input"
@@ -17,7 +17,7 @@ exports[`Controlled Input > should render with value 1`] = `
1717
exports[`Input > should have typography when typography is provided 1`] = `
1818
<div>
1919
<div
20-
class="display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-1758945993780808850-255"
20+
class="display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-1137980104803605758-255"
2121
>
2222
<input
2323
aria-label="input"
@@ -31,7 +31,7 @@ exports[`Input > should have typography when typography is provided 1`] = `
3131
exports[`Input > should not have padding right when allowClear is false 1`] = `
3232
<div>
3333
<div
34-
class="display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-1758945993780808850-255"
34+
class="display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-1137980104803605758-255"
3535
>
3636
<input
3737
aria-label="input"
@@ -45,7 +45,7 @@ exports[`Input > should not have padding right when allowClear is false 1`] = `
4545
exports[`Input > should not show clear button when value is empty 1`] = `
4646
<div>
4747
<div
48-
class="display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-1758945993780808850-255"
48+
class="display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-1137980104803605758-255"
4949
>
5050
<input
5151
aria-label="input"
@@ -59,7 +59,7 @@ exports[`Input > should not show clear button when value is empty 1`] = `
5959
exports[`Input > should pass className prop to error message component 1`] = `
6060
<div>
6161
<div
62-
class="display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-1758945993780808850-255"
62+
class="display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-1137980104803605758-255"
6363
>
6464
<input
6565
aria-label="input"
@@ -79,7 +79,7 @@ exports[`Input > should pass className prop to error message component 1`] = `
7979
exports[`Input > should pass className prop to icon component 1`] = `
8080
<div>
8181
<div
82-
class="display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-1758945993780808850-255"
82+
class="display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-1137980104803605758-255"
8383
>
8484
<div
8585
aria-label="icon"
@@ -144,7 +144,7 @@ exports[`Input > should pass props to ClearButton component 1`] = `
144144
exports[`Input > should render disabled icon style when disabled is true 1`] = `
145145
<div>
146146
<div
147-
class="display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-1758945993780808850-255"
147+
class="display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-1137980104803605758-255"
148148
>
149149
<div
150150
aria-label="icon"
@@ -178,7 +178,7 @@ exports[`Input > should render disabled icon style when disabled is true 1`] = `
178178
exports[`Input > should render error style when error is true 1`] = `
179179
<div>
180180
<div
181-
class="display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-1758945993780808850-255"
181+
class="display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-1137980104803605758-255"
182182
>
183183
<input
184184
aria-label="input"
@@ -192,7 +192,7 @@ exports[`Input > should render error style when error is true 1`] = `
192192
exports[`Input > should render with allowClear prop 1`] = `
193193
<div>
194194
<div
195-
class="display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-1758945993780808850-255"
195+
class="display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-1137980104803605758-255"
196196
>
197197
<input
198198
aria-label="input"
@@ -206,7 +206,7 @@ exports[`Input > should render with allowClear prop 1`] = `
206206
exports[`Input > should render with default props 1`] = `
207207
<div>
208208
<div
209-
class="display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-1758945993780808850-255"
209+
class="display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-1137980104803605758-255"
210210
>
211211
<input
212212
aria-label="input"
@@ -220,7 +220,7 @@ exports[`Input > should render with default props 1`] = `
220220
exports[`Input > should render with disabled prop 1`] = `
221221
<div>
222222
<div
223-
class="display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-1758945993780808850-255"
223+
class="display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-1137980104803605758-255"
224224
>
225225
<input
226226
aria-label="input"
@@ -235,7 +235,7 @@ exports[`Input > should render with disabled prop 1`] = `
235235
exports[`Input > should show clear button when value is not empty 1`] = `
236236
<div>
237237
<div
238-
class="display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-1758945993780808850-255"
238+
class="display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-1137980104803605758-255"
239239
>
240240
<input
241241
aria-label="input"

‎packages/components/src/components/Select/__tests__/__snapshots__/index.browser.test.tsx.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
exports[`Select > should render 1`] = `
44
<div>
55
<div
6-
class="display-0-inline-block--1 position-0-relative--1 "
6+
class="display-0-inline-block--1 position-0-relative--1 box-sizing-0-border-box-1137980104803605758-1 "
77
>
88
<button
99
aria-expanded="false"

‎packages/components/src/components/Select/__tests__/index.browser.test.tsx‎

Lines changed: 58 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,14 @@ import { fireEvent, render } from '@testing-library/react'
22
import React from 'react'
33
import { describe, expect, it } from 'vitest'
44

5-
import { Select, SelectContainer, SelectOption, SelectTrigger } from '..'
5+
import {
6+
Select,
7+
SelectContainer,
8+
SelectDivider,
9+
SelectOption,
10+
SelectTrigger,
11+
useSelect,
12+
} from '..'
613
import { Default } from '../Default'
714

815
describe('Select', () => {
@@ -209,4 +216,54 @@ describe('Select', () => {
209216
'--title': 'purple',
210217
})
211218
})
219+
220+
it('should show confirm button when type is checkbox and showConfirmButton is true', () => {
221+
const { container } = render(
222+
<Select type="checkbox">
223+
<SelectTrigger>Select</SelectTrigger>
224+
<SelectContainer showConfirmButton>
225+
<SelectOption disabled value="Option 1">
226+
Option 1
227+
</SelectOption>
228+
<SelectDivider />
229+
<SelectOption value="Option 2">Option 2</SelectOption>
230+
<SelectOption value="Option 3">Option 3</SelectOption>
231+
</SelectContainer>
232+
</Select>,
233+
)
234+
const selectToggle = container.querySelector('[aria-label="Select toggle"]')
235+
fireEvent.click(selectToggle!)
236+
const confirmButton = container.querySelector(
237+
'[aria-label="Select confirm button"]',
238+
)
239+
expect(confirmButton).toBeInTheDocument()
240+
})
241+
242+
it('should not show confirm button when type is checkbox and showConfirmButton is false', () => {
243+
const { container } = render(
244+
<Select type="checkbox">
245+
<SelectTrigger>Select</SelectTrigger>
246+
<SelectContainer showConfirmButton={false}>
247+
<SelectOption disabled value="Option 1">
248+
Option 1
249+
</SelectOption>
250+
<SelectDivider />
251+
<SelectOption value="Option 2">Option 2</SelectOption>
252+
<SelectOption value="Option 3">Option 3</SelectOption>
253+
</SelectContainer>
254+
</Select>,
255+
)
256+
const selectToggle = container.querySelector('[aria-label="Select toggle"]')
257+
fireEvent.click(selectToggle!)
258+
const confirmButton = container.querySelector(
259+
'[aria-label="Select confirm button"]',
260+
)
261+
expect(confirmButton).not.toBeInTheDocument()
262+
})
263+
264+
it('should throw error when useSelect is used outside of Select context', () => {
265+
expect(() => {
266+
useSelect()
267+
}).toThrow()
268+
})
212269
})

‎packages/components/src/components/Select/index.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -230,6 +230,7 @@ export function SelectContainer({
230230
{showConfirmButton && type === 'checkbox' && (
231231
<Flex justifyContent="end" w="100%">
232232
<Button
233+
aria-label="Select confirm button"
233234
className={css({
234235
textAlign: 'end',
235236
bg: 'var(--primary, light-dark(#674DC7, #8163E1))',

0 commit comments

Comments
 (0)