Skip to content

Commit d810cb7

Browse files
forestreamforestream
committed
Fix test
- Fix condition in useEffect
1 parent e8c0203 commit d810cb7

File tree

4 files changed

+31
-74
lines changed

4 files changed

+31
-74
lines changed

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,10 @@ const meta: Meta<typeof Select> = {
2828
}
2929

3030
export const DefaultStory: Story = {
31-
args: { type: 'radio' },
31+
args: {
32+
type: 'default',
33+
colors: {},
34+
},
3235
render: (args) => <DefaultComponent {...args} />,
3336
}
3437

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

Lines changed: 1 addition & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,9 @@
11
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
22

3-
exports[`ControlledCheckbox > should render 1`] = `
4-
<div>
5-
<div
6-
class="display-0-inline-block--255 position-0-relative--255 "
7-
>
8-
<button
9-
aria-expanded="false"
10-
aria-label="Select toggle"
11-
class="border-radius-0-8px--255 outline-0-2px solid-17005923944751620165-1 box-sizing-0-border-box--1 cursor-0-pointer--1 font-weight-0-700--1 outline-offset-0-2px--1 position-0-relative--1 transition-0-.25s--1 color-0-var(--text,#272727)-15425828959012638752-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 20%,#FFF 80%)-15425828959012638752-1 border-0-1px solid var(--primary,#8163E1)-15425828959012638752-1 color-0-#D6D7DE-14172363753176421546-1 background-color-0-#F0F0F3-14172363753176421546-1 cursor-0-not-allowed-14172363753176421546-1 border-color-0-var(--border,#E4E4E4)-14172363753176421546-1 outline-color-0-var(--primaryFocus,#9385D3)-17005923944751620165-1 border-color-0-var(--primary,#8163E1)-8380715471663921674-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 10%,#FFF 90%)-8380715471663921674-1 color-0-var(--text,#F6F6F6)-2922352740838246662-1 background-0-var(--primary,#8163E1)-2922352740838246662-1 color-0-#373737-878116160589243838-1 background-color-0-#47474A-878116160589243838-1 border-color-0-transparent-878116160589243838-1 border-color-0-var(--primary,#8163E1)-6232724021015440856-1 background-0-color-mix(in srgb,var(--primary,#674DC7) 10%,var(--inputBackground,#2E2E2E) 90%)-6232724021015440856-1 outline-color-0-var(--primaryFocus,#927CE4)-13318702800233181468-1 background-0-var(--inputBackground,#2E2E2E)-6667598448774358329-1 background-0-var(--inputBackground,#FFF)--1 border-0-1px solid var(--border,#E4E4E4)--1 border-radius-0-10px--1 color-0-var(--text,#272727)--1 font-size-0-14px--1 font-size-4-15px--1 letter-spacing-0--.02em--1 letter-spacing-4--.03em--1 padding-right-0-16px--1 padding-left-0-16px--1 padding-bottom-0-10px--1 padding-top-0-10px--1 "
12-
type="button"
13-
>
14-
<div
15-
class="max-width-0-100%--255 margin-right-0-auto--255 margin-left-0-auto--255 position-0-relative--255 width-0-fit-content--255"
16-
>
17-
<div
18-
class=" line-height-0-1.2--255 min-height-0-1.2em--255 "
19-
>
20-
Select
21-
</div>
22-
</div>
23-
</button>
24-
</div>
25-
</div>
26-
`;
27-
28-
exports[`ControlledRadio > should render 1`] = `
29-
<div>
30-
<div
31-
class="display-0-inline-block--255 position-0-relative--255 "
32-
>
33-
<button
34-
aria-expanded="false"
35-
aria-label="Select toggle"
36-
class="border-radius-0-8px--255 outline-0-2px solid-17005923944751620165-1 box-sizing-0-border-box--1 cursor-0-pointer--1 font-weight-0-700--1 outline-offset-0-2px--1 position-0-relative--1 transition-0-.25s--1 color-0-var(--text,#272727)-15425828959012638752-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 20%,#FFF 80%)-15425828959012638752-1 border-0-1px solid var(--primary,#8163E1)-15425828959012638752-1 color-0-#D6D7DE-14172363753176421546-1 background-color-0-#F0F0F3-14172363753176421546-1 cursor-0-not-allowed-14172363753176421546-1 border-color-0-var(--border,#E4E4E4)-14172363753176421546-1 outline-color-0-var(--primaryFocus,#9385D3)-17005923944751620165-1 border-color-0-var(--primary,#8163E1)-8380715471663921674-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 10%,#FFF 90%)-8380715471663921674-1 color-0-var(--text,#F6F6F6)-2922352740838246662-1 background-0-var(--primary,#8163E1)-2922352740838246662-1 color-0-#373737-878116160589243838-1 background-color-0-#47474A-878116160589243838-1 border-color-0-transparent-878116160589243838-1 border-color-0-var(--primary,#8163E1)-6232724021015440856-1 background-0-color-mix(in srgb,var(--primary,#674DC7) 10%,var(--inputBackground,#2E2E2E) 90%)-6232724021015440856-1 outline-color-0-var(--primaryFocus,#927CE4)-13318702800233181468-1 background-0-var(--inputBackground,#2E2E2E)-6667598448774358329-1 background-0-var(--inputBackground,#FFF)--1 border-0-1px solid var(--border,#E4E4E4)--1 border-radius-0-10px--1 color-0-var(--text,#272727)--1 font-size-0-14px--1 font-size-4-15px--1 letter-spacing-0--.02em--1 letter-spacing-4--.03em--1 padding-right-0-16px--1 padding-left-0-16px--1 padding-bottom-0-10px--1 padding-top-0-10px--1 "
37-
type="button"
38-
>
39-
<div
40-
class="max-width-0-100%--255 margin-right-0-auto--255 margin-left-0-auto--255 position-0-relative--255 width-0-fit-content--255"
41-
>
42-
<div
43-
class=" line-height-0-1.2--255 min-height-0-1.2em--255 "
44-
>
45-
Select
46-
</div>
47-
</div>
48-
</button>
49-
</div>
50-
</div>
51-
`;
52-
533
exports[`Select > should render 1`] = `
544
<div>
555
<div
56-
class="display-0-inline-block--255 position-0-relative--255 "
6+
class="display-0-inline-block--1 position-0-relative--1 "
577
>
588
<button
599
aria-expanded="false"

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

Lines changed: 25 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,10 @@ import { Select, SelectContainer, SelectOption, SelectTrigger } from '..'
66
import { Default } from '../Default'
77

88
describe('Select', () => {
9+
afterEach(() => {
10+
vi.clearAllMocks()
11+
})
12+
913
it('should render', () => {
1014
const { container } = render(<Default />)
1115
expect(container).toMatchSnapshot()
@@ -183,25 +187,26 @@ describe('Select', () => {
183187
expect(option2).not.toHaveClass('gap-0-0--1')
184188
})
185189

186-
it('should handle ref.current being null by mocking useRef', () => {
187-
const useRefSpy = vi
188-
.spyOn(React, 'useRef')
189-
.mockReturnValueOnce({ current: null })
190-
191-
const { container } = render(<Select>Select</Select>)
192-
193-
// The component should render without errors even with null ref
194-
expect(container).toBeInTheDocument()
195-
196-
// Trigger a click outside to test the useEffect logic with null ref
197-
const selectToggle = container.querySelector('[aria-label="Select toggle"]')
198-
fireEvent.click(selectToggle!)
199-
expect(selectToggle).toHaveAttribute('aria-expanded', 'true')
200-
201-
// Click outside - this should trigger the useEffect but return early due to null ref
202-
fireEvent.click(document.body)
203-
204-
// The select should still be open because the useEffect returned early
205-
expect(useRefSpy).toHaveBeenCalledWith({ current: null })
190+
it('should add styleVars to the container when colors are provided', () => {
191+
const { container } = render(
192+
<Default
193+
colors={{
194+
primary: 'red',
195+
border: 'blue',
196+
inputBg: 'green',
197+
base10: 'yellow',
198+
title: 'purple',
199+
}}
200+
data-testid="select"
201+
/>,
202+
)
203+
const select = container.querySelector('[data-testid="select"]')
204+
expect(select).toHaveStyle({
205+
'--primary': 'red',
206+
'--border': 'blue',
207+
'--inputBg': 'green',
208+
'--base10': 'yellow',
209+
'--title': 'purple',
210+
})
206211
})
207212
})

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -76,9 +76,8 @@ export function Select({
7676
)
7777

7878
useEffect(() => {
79-
if (!ref.current) return
8079
const handleOutsideClick = (e: MouseEvent) => {
81-
if (ref.current?.contains(e.target as Node)) return
80+
if (ref.current && ref.current.contains(e.target as Node)) return
8281
setOpen(false)
8382
}
8483
document.addEventListener('click', handleOutsideClick)

0 commit comments

Comments
 (0)