diff --git a/packages/react-components/react-list/library/src/components/List/useList.test.tsx b/packages/react-components/react-list/library/src/components/List/useList.test.tsx new file mode 100644 index 00000000000000..e5d6acab497ecc --- /dev/null +++ b/packages/react-components/react-list/library/src/components/List/useList.test.tsx @@ -0,0 +1,14 @@ +import * as React from 'react'; +import { renderHook } from '@testing-library/react-hooks'; +import type { TabsterDOMAttribute } from '@fluentui/react-tabster'; +import { useList_unstable } from './useList'; + +describe('useList_unstable', () => { + it('applies Tabster navigation to the list', () => { + const { result } = renderHook(() => + useList_unstable({ navigationMode: 'items' }, React.createRef()), + ); + + expect((result.current.root as Partial)['data-tabster']).toContain('mover'); + }); +}); diff --git a/packages/react-components/react-list/library/src/components/ListItem/useListItem.test.tsx b/packages/react-components/react-list/library/src/components/ListItem/useListItem.test.tsx new file mode 100644 index 00000000000000..95a1affc60df3d --- /dev/null +++ b/packages/react-components/react-list/library/src/components/ListItem/useListItem.test.tsx @@ -0,0 +1,34 @@ +import * as React from 'react'; +import { renderHook } from '@testing-library/react-hooks'; +import { Checkbox } from '@fluentui/react-checkbox'; +import type { TabsterDOMAttribute } from '@fluentui/react-tabster'; +import { List } from '../List/List'; +import { useListItem_unstable } from './useListItem'; + +describe('useListItem_unstable', () => { + it('applies Tabster navigation to focusable list items', () => { + const { result } = renderHook(() => useListItem_unstable({}, React.createRef()), { + wrapper: ({ children }: React.PropsWithChildren) => {children}, + }); + + expect((result.current.root as Partial)['data-tabster']).toContain('mover'); + }); + + it('does not apply arrow navigation to non focusable list items', () => { + const { result } = renderHook(() => useListItem_unstable({}, React.createRef()), { + wrapper: ({ children }: React.PropsWithChildren) => {children}, + }); + + expect((result.current.root as Partial)['data-tabster']).not.toContain('mover'); + }); + + it('uses a Fluent Checkbox for the checkmark', () => { + const { result } = renderHook(() => useListItem_unstable({}, React.createRef()), { + wrapper: ({ children }: React.PropsWithChildren) => {children}, + }); + + // eslint-disable-next-line @typescript-eslint/no-deprecated + expect(result.current.components.checkmark).toBe(Checkbox); + expect(result.current.checkmark?.tabIndex).toBe(-1); + }); +});