Skip to content

Commit 2fea8aa

Browse files
silviuaavramsilviuaavram
committed
add refs to tsx tests
1 parent bee4694 commit 2fea8aa

6 files changed

Lines changed: 117 additions & 18 deletions

File tree

‎docusaurus/pages/useTagGroupCombobox.tsx‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import * as React from 'react'
22

3-
import {UseComboboxInterface} from '../../typings'
4-
import {useTagGroup, useCombobox as useComboboxUntyped} from '../../src'
3+
import {useTagGroup, useCombobox} from '../../src'
54
import {colors} from '../utils'
65

76
import './useTagGroupCombobox.css'
@@ -23,8 +22,6 @@ export default function TagGroup() {
2322
!items.includes(color) &&
2423
(!inputValue || color.toLowerCase().includes(inputValue.toLowerCase())),
2524
)
26-
const useCombobox = useComboboxUntyped as UseComboboxInterface
27-
2825
const {
2926
isOpen,
3027
getToggleButtonProps,

‎src/hooks/useTagGroup/index.types.ts‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -53,11 +53,6 @@ export type UseTagGroupMergedProps<Item> = Omit<
5353
Pick<UseTagGroupProps<Item>, 'stateReducer' | 'removeElementDescription'>
5454
>
5555

56-
// export type UseTagGroupMergedProps<Item> = Required<
57-
// Pick<UseTagGroupProps<Item>, 'stateReducer' | 'removeElementDescription'>
58-
// > &
59-
// UseTagGroupProps<Item>
60-
6156
export interface UseTagGroupInterface {
6257
<Item>(props?: UseTagGroupProps<Item>): UseTagGroupReturnValue<Item>
6358
stateChangeTypes: {
@@ -83,12 +78,15 @@ export interface UseTagGroupReturnValue<Item> {
8378
export interface GetTagPropsOptions extends React.HTMLProps<HTMLElement> {
8479
index: number
8580
refKey?: string
86-
ref?: React.MutableRefObject<HTMLElement>
81+
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- element type unknown at declaration site
82+
ref?: React.Ref<any>
8783
}
8884

8985
export interface GetTagPropsReturnValue {
9086
'aria-describedby': string
9187
id: string
88+
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- element type unknown at declaration site
89+
ref?: React.Ref<any>
9290
role: 'option'
9391
onPress?: (event: React.BaseSyntheticEvent) => void
9492
onClick?: React.MouseEventHandler
@@ -109,11 +107,14 @@ export interface GetTagRemovePropsReturnValue {
109107

110108
export interface GetTagGroupPropsOptions extends React.HTMLProps<HTMLElement> {
111109
refKey?: string
112-
ref?: React.MutableRefObject<HTMLElement>
110+
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- element type unknown at declaration site
111+
ref?: React.Ref<any>
113112
}
114113

115114
export interface GetTagGroupPropsReturnValue {
116115
id: string
116+
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- element type unknown at declaration site
117+
ref?: React.Ref<any>
117118
role: 'listbox'
118119
'aria-live': 'polite'
119120
'aria-atomic': 'false'

‎test/useCombobox.test.tsx‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -38,15 +38,23 @@ export default function DropdownCombobox() {
3838
)
3939
},
4040
})
41+
const inputRef = React.useRef<HTMLInputElement>(null)
42+
const toggleButtonRef = React.useRef<HTMLButtonElement>(null)
43+
const menuRef = React.useRef<HTMLUListElement>(null)
44+
const itemRef = React.useRef<HTMLLIElement>(null)
45+
4146
return (
4247
<div>
4348
<label {...getLabelProps()}>Choose an element:</label>
4449
<div>
45-
<input {...getInputProps()} data-testid="combobox-input" />
50+
<input
51+
{...getInputProps({ref: inputRef})}
52+
data-testid="combobox-input"
53+
/>
4654
<button
4755
aria-label="toggle menu"
4856
data-testid="combobox-toggle-button"
49-
{...getToggleButtonProps()}
57+
{...getToggleButtonProps({ref: toggleButtonRef})}
5058
>
5159
{isOpen ? <>&#8593;</> : <>&#8595;</>}
5260
</button>
@@ -58,7 +66,7 @@ export default function DropdownCombobox() {
5866
&#10007;
5967
</button>
6068
</div>
61-
<ul {...getMenuProps()}>
69+
<ul {...getMenuProps({ref: menuRef})}>
6270
{isOpen &&
6371
inputItems.map((item, index) => (
6472
<li
@@ -67,6 +75,7 @@ export default function DropdownCombobox() {
6775
item,
6876
index,
6977
'data-testid': `downshift-item-${index}`,
78+
ref: index === 0 ? itemRef : undefined,
7079
})}
7180
>
7281
{item}

‎test/useMultipleSelect.test.tsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,10 @@ export default function DropdownMultipleSelect() {
3434
selectedItems,
3535
} = useMultipleSelection({initialSelectedItems})
3636
const items = getFilteredItems(selectedItems)
37+
const selectedItemRef = React.useRef<HTMLSpanElement>(null)
38+
const toggleButtonRef = React.useRef<HTMLDivElement>(null)
39+
const menuRef = React.useRef<HTMLUListElement>(null)
40+
const itemRef = React.useRef<HTMLLIElement>(null)
3741
const {
3842
isOpen,
3943
getToggleButtonProps,
@@ -84,6 +88,7 @@ export default function DropdownMultipleSelect() {
8488
{...getSelectedItemProps({
8589
selectedItem: selectedItemForRender,
8690
index,
91+
ref: index === 0 ? selectedItemRef : undefined,
8792
})}
8893
>
8994
{selectedItemForRender}
@@ -101,20 +106,21 @@ export default function DropdownMultipleSelect() {
101106
)}
102107
<div
103108
{...getToggleButtonProps(
104-
getDropdownProps({preventKeyAction: isOpen}),
109+
getDropdownProps({preventKeyAction: isOpen, ref: toggleButtonRef}),
105110
)}
106111
>
107112
Elements {isOpen ? <>&#8593;</> : <>&#8595;</>}
108113
</div>
109114
</div>
110-
<ul {...getMenuProps()}>
115+
<ul {...getMenuProps({ref: menuRef})}>
111116
{isOpen &&
112117
colors.map((item, index) => (
113118
<li
114119
key={`${item}${index}`}
115120
{...getItemProps({
116121
item,
117122
index,
123+
ref: index === 0 ? itemRef : undefined,
118124
})}
119125
>
120126
{item}

‎test/useSelect.test.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,22 +28,26 @@ export default function DropdownSelect() {
2828
getMenuProps,
2929
getItemProps,
3030
} = useSelect({items: colors})
31+
const toggleButtonRef = React.useRef<HTMLDivElement>(null)
32+
const menuRef = React.useRef<HTMLUListElement>(null)
33+
const itemRef = React.useRef<HTMLLIElement>(null)
3134

3235
return (
3336
<div>
3437
<label {...getLabelProps()}>Choose an element:</label>
35-
<div {...getToggleButtonProps()}>
38+
<div {...getToggleButtonProps({ref: toggleButtonRef})}>
3639
{selectedItem ?? 'Elements'}
3740
{isOpen ? <>&#8593;</> : <>&#8595;</>}
3841
</div>
39-
<ul {...getMenuProps()}>
42+
<ul {...getMenuProps({ref: menuRef})}>
4043
{isOpen &&
4144
colors.map((item, index) => (
4245
<li
4346
key={`${item}${index}`}
4447
{...getItemProps({
4548
item,
4649
index,
50+
ref: index === 0 ? itemRef : undefined,
4751
})}
4852
>
4953
{item}

‎test/useTagGroup.test.tsx‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
import * as React from 'react'
2+
3+
import {useTagGroup} from '..'
4+
5+
export const colors = [
6+
'Black',
7+
'Red',
8+
'Green',
9+
'Blue',
10+
'Orange',
11+
'Purple',
12+
'Pink',
13+
'Orchid',
14+
'Aqua',
15+
'Lime',
16+
'Gray',
17+
'Brown',
18+
'Teal',
19+
'Skyblue',
20+
]
21+
22+
const initialItems = colors.slice(0, 5)
23+
24+
export default function TagGroup() {
25+
const {
26+
addItem,
27+
getTagGroupProps,
28+
getTagProps,
29+
getTagRemoveProps,
30+
items,
31+
activeIndex,
32+
} = useTagGroup({initialItems})
33+
const itemsToAdd = colors.filter(color => !items.includes(color))
34+
const tagGroupRef = React.useRef<HTMLDivElement>(null)
35+
const tagRef = React.useRef<HTMLSpanElement>(null)
36+
37+
return (
38+
<div>
39+
<div
40+
{...getTagGroupProps({
41+
'aria-label': 'colors example',
42+
ref: tagGroupRef,
43+
})}
44+
>
45+
{items.map((color, index) => (
46+
<span
47+
key={color}
48+
style={{fontWeight: index === activeIndex ? 'bold' : 'normal'}}
49+
{...getTagProps({
50+
index,
51+
'aria-label': color,
52+
ref: index === 0 ? tagRef : undefined,
53+
})}
54+
>
55+
{color}
56+
<li {...getTagRemoveProps({index, 'aria-label': 'remove'})}>
57+
&#10005;
58+
</li>
59+
</span>
60+
))}
61+
</div>
62+
<div>Add more items:</div>
63+
<ul>
64+
{itemsToAdd.map(item => (
65+
<li key={item}>
66+
<button
67+
tabIndex={0}
68+
onClick={() => {
69+
addItem(item)
70+
}}
71+
onKeyDown={({key}) => {
72+
if (key === 'Enter') addItem(item)
73+
}}
74+
>
75+
{item}
76+
</button>
77+
</li>
78+
))}
79+
</ul>
80+
</div>
81+
)
82+
}

0 commit comments

Comments
 (0)