fix(react-tags): cast slot props in regression tests to satisfy TS

Author: mainframev

packages/react-components/react-tags/library/src/components/Tag/useTag.test.tsx

@@ -77,9 +77,10 @@ describe('useTagBase_unstable', () => {
   it('should attach onClick/onKeyDown handlers when dismissible', () => {
     const ref = React.createRef<HTMLElement>();
     const { result } = renderHook(() => useTagBase_unstable({ dismissible: true }, ref), { wrapper: wrap() });
-    expect(result.current.root.onClick).toBeDefined();
-    expect(result.current.root.onKeyDown).toBeDefined();
-    expect(result.current.root.type).toBe('button');
+    const root = result.current.root as React.ButtonHTMLAttributes<HTMLButtonElement>;
+    expect(root.onClick).toBeDefined();
+    expect(root.onKeyDown).toBeDefined();
+    expect(root.type).toBe('button');
   });
 
   it('should NOT inject a default dismissIcon children (icon injection lives in the styled hook)', () => {
@@ -112,7 +113,8 @@ describe('useTagBase_unstable', () => {
       wrapper: wrap({ handleTagDismiss: () => ({}), size: 'medium', disabled: true }),
     });
     expect(result.current.disabled).toBe(true);
-    expect(result.current.root.disabled).toBe(true);
+    const root = result.current.root as React.ButtonHTMLAttributes<HTMLButtonElement>;
+    expect(root.disabled).toBe(true);
   });
 
   it('should inherit dismissible from TagGroupContext when not set on props', () => {
@@ -121,6 +123,7 @@ describe('useTagBase_unstable', () => {
       wrapper: wrap({ handleTagDismiss: () => ({}), size: 'medium', dismissible: true }),
     });
     expect(result.current.dismissible).toBe(true);
-    expect(result.current.root.type).toBe('button');
+    const root = result.current.root as React.ButtonHTMLAttributes<HTMLButtonElement>;
+    expect(root.type).toBe('button');
   });
 });

packages/react-components/react-tags/library/src/components/TagGroup/useTagGroup.test.tsx

@@ -1,8 +1,13 @@
 import { renderHook } from '@testing-library/react-hooks';
 import * as React from 'react';
+import type { TabsterDOMAttribute } from '@fluentui/react-tabster';
 
 import { useTagGroup_unstable, useTagGroupBase_unstable } from './useTagGroup';
 
+// Slot props are a discriminated union that doesn't expose `data-*` index access at
+// the type level; cast to a plain record for the data-attribute assertions below.
+type RootRecord = Record<string, unknown>;
+
 describe('useTagGroup_unstable', () => {
   it('should default size to medium and appearance to filled', () => {
     const ref = React.createRef<HTMLDivElement>();
@@ -18,7 +23,7 @@ describe('useTagGroup_unstable', () => {
 
     // useTagGroup_unstable wires up useArrowNavigationGroup via the base hook's
     // arrowNavigationProps option; Tabster's contract is a data-tabster attribute.
-    expect(result.current.root['data-tabster']).toBeDefined();
+    expect((result.current.root as RootRecord)['data-tabster']).toBeDefined();
   });
 
   it('should default role to toolbar', () => {
@@ -33,16 +38,15 @@ describe('useTagGroupBase_unstable', () => {
   it('should NOT include arrow-navigation props when options omitted (true headless mode)', () => {
     const ref = React.createRef<HTMLDivElement>();
     const { result } = renderHook(() => useTagGroupBase_unstable({}, ref));
-    expect(result.current.root['data-tabster']).toBeUndefined();
+    expect((result.current.root as RootRecord)['data-tabster']).toBeUndefined();
   });
 
   it('should spread arrowNavigationProps option onto root when supplied', () => {
     const ref = React.createRef<HTMLDivElement>();
-    const arrowNavigationProps = { 'data-arrow': 'group', tabIndex: 0 };
+    const arrowNavigationProps: TabsterDOMAttribute = { 'data-tabster': '{"mock":"value"}' };
     const { result } = renderHook(() => useTagGroupBase_unstable({}, ref, { arrowNavigationProps }));
 
-    expect(result.current.root['data-arrow']).toBe('group');
-    expect(result.current.root.tabIndex).toBe(0);
+    expect((result.current.root as RootRecord)['data-tabster']).toBe('{"mock":"value"}');
   });
 
   it('should call onAfterTagDismiss with the group container after a tag is dismissed', () => {