test(react-tags): tighten regression test assertions and drop narration comments

Author: mainframev

packages/react-components/react-tags/library/src/components/InteractionTag/useInteractionTag.test.tsx

@@ -55,9 +55,9 @@ describe('useInteractionTagBase_unstable', () => {
     const ref = React.createRef<HTMLDivElement>();
     const { result } = renderHook(() => useInteractionTagBase_unstable({}, ref), { wrapper: wrap() });
 
-    expect((result.current as unknown as { appearance?: unknown }).appearance).toBeUndefined();
-    expect((result.current as unknown as { shape?: unknown }).shape).toBeUndefined();
-    expect((result.current as unknown as { size?: unknown }).size).toBeUndefined();
+    expect(result.current).not.toHaveProperty('appearance');
+    expect(result.current).not.toHaveProperty('shape');
+    expect(result.current).not.toHaveProperty('size');
   });
 
   it('should force disabled when TagGroupContext.disabled is true regardless of props', () => {

packages/react-components/react-tags/library/src/components/InteractionTagPrimary/useInteractionTagPrimary.test.tsx

@@ -2,17 +2,18 @@ import { renderHook } from '@testing-library/react-hooks';
 import * as React from 'react';
 
 import { InteractionTagContextProvider } from '../../contexts/interactionTagContext';
+import type { InteractionTagContextValue } from '../../contexts/interactionTagContext';
 import { useInteractionTagPrimary_unstable, useInteractionTagPrimaryBase_unstable } from './useInteractionTagPrimary';
 
-const baseContext = {
-  appearance: 'filled' as const,
+const baseContext: InteractionTagContextValue = {
+  appearance: 'filled',
   disabled: false,
   handleTagDismiss: () => ({}),
   interactionTagPrimaryId: 'fui-InteractionTagPrimary-_test_',
   selected: false,
   selectedValues: [],
-  shape: 'rounded' as const,
-  size: 'medium' as const,
+  shape: 'rounded',
+  size: 'medium',
   value: 'test',
 };
 
@@ -51,11 +52,11 @@ describe('useInteractionTagPrimaryBase_unstable', () => {
     const ref = React.createRef<HTMLButtonElement>();
     const { result } = renderHook(() => useInteractionTagPrimaryBase_unstable({}, ref), { wrapper: wrap() });
 
-    expect((result.current as unknown as { appearance?: unknown }).appearance).toBeUndefined();
-    expect((result.current as unknown as { shape?: unknown }).shape).toBeUndefined();
-    expect((result.current as unknown as { size?: unknown }).size).toBeUndefined();
-    expect((result.current as unknown as { avatarShape?: unknown }).avatarShape).toBeUndefined();
-    expect((result.current as unknown as { avatarSize?: unknown }).avatarSize).toBeUndefined();
+    expect(result.current).not.toHaveProperty('appearance');
+    expect(result.current).not.toHaveProperty('shape');
+    expect(result.current).not.toHaveProperty('size');
+    expect(result.current).not.toHaveProperty('avatarShape');
+    expect(result.current).not.toHaveProperty('avatarSize');
   });
 
   it('should set aria-pressed when context has handleTagSelect (selectable group)', () => {
@@ -71,7 +72,7 @@ describe('useInteractionTagPrimaryBase_unstable', () => {
     const { result } = renderHook(() => useInteractionTagPrimaryBase_unstable({}, ref), {
       wrapper: wrap({ selected: true, handleTagSelect: undefined }),
     });
-    expect(result.current.root['aria-pressed']).toBeUndefined();
+    expect(result.current.root).not.toHaveProperty('aria-pressed');
   });
 
   it('should default hasSecondaryAction to false', () => {

packages/react-components/react-tags/library/src/components/InteractionTagSecondary/useInteractionTagSecondary.test.tsx

@@ -2,20 +2,21 @@ import { renderHook } from '@testing-library/react-hooks';
 import * as React from 'react';
 
 import { InteractionTagContextProvider } from '../../contexts/interactionTagContext';
+import type { InteractionTagContextValue } from '../../contexts/interactionTagContext';
 import {
   useInteractionTagSecondary_unstable,
   useInteractionTagSecondaryBase_unstable,
 } from './useInteractionTagSecondary';
 
-const baseContext = {
-  appearance: 'filled' as const,
+const baseContext: InteractionTagContextValue = {
+  appearance: 'filled',
   disabled: false,
   handleTagDismiss: () => ({}),
   interactionTagPrimaryId: 'fui-InteractionTagPrimary-_test_',
   selected: false,
   selectedValues: [],
-  shape: 'rounded' as const,
-  size: 'medium' as const,
+  shape: 'rounded',
+  size: 'medium',
   value: 'test',
 };
 
@@ -64,14 +65,14 @@ describe('useInteractionTagSecondaryBase_unstable', () => {
   it('should NOT inject DismissRegular children by default (icon injection lives in the styled hook)', () => {
     const ref = React.createRef<HTMLButtonElement>();
     const { result } = renderHook(() => useInteractionTagSecondaryBase_unstable({}, ref), { wrapper: wrap() });
-    expect(result.current.root.children).toBeUndefined();
+    expect(result.current.root).not.toHaveProperty('children');
   });
 
   it('should attach onClick and onKeyDown handlers', () => {
     const ref = React.createRef<HTMLButtonElement>();
     const { result } = renderHook(() => useInteractionTagSecondaryBase_unstable({}, ref), { wrapper: wrap() });
-    expect(result.current.root.onClick).toBeDefined();
-    expect(result.current.root.onKeyDown).toBeDefined();
+    expect(result.current.root.onClick).toEqual(expect.any(Function));
+    expect(result.current.root.onKeyDown).toEqual(expect.any(Function));
   });
 
   it('should build aria-labelledby from interactionTagPrimaryId and own id', () => {
@@ -85,9 +86,9 @@ describe('useInteractionTagSecondaryBase_unstable', () => {
   it('should NOT expose design-only fields (appearance/shape/size)', () => {
     const ref = React.createRef<HTMLButtonElement>();
     const { result } = renderHook(() => useInteractionTagSecondaryBase_unstable({}, ref), { wrapper: wrap() });
-    expect((result.current as unknown as { appearance?: unknown }).appearance).toBeUndefined();
-    expect((result.current as unknown as { shape?: unknown }).shape).toBeUndefined();
-    expect((result.current as unknown as { size?: unknown }).size).toBeUndefined();
+    expect(result.current).not.toHaveProperty('appearance');
+    expect(result.current).not.toHaveProperty('shape');
+    expect(result.current).not.toHaveProperty('size');
   });
 
   it('should call handleTagDismiss on Delete/Backspace keyDown via context', () => {

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

@@ -25,9 +25,9 @@ describe('useTag_unstable', () => {
     const ref = React.createRef<HTMLElement>();
     const { result } = renderHook(() => useTag_unstable({ dismissible }, ref), { wrapper: wrap() });
     if (dismissible) {
-      expect(result.current.root.onClick).toBeDefined();
+      expect(result.current.root.onClick).toEqual(expect.any(Function));
     } else {
-      expect(result.current.root.onClick).toBeUndefined();
+      expect(result.current.root).not.toHaveProperty('onClick');
     }
   });
 
@@ -70,26 +70,25 @@ describe('useTagBase_unstable', () => {
   it('should NOT attach onClick/onKeyDown handlers when not dismissible', () => {
     const ref = React.createRef<HTMLElement>();
     const { result } = renderHook(() => useTagBase_unstable({}, ref), { wrapper: wrap() });
-    expect(result.current.root.onClick).toBeUndefined();
-    expect(result.current.root.onKeyDown).toBeUndefined();
+    expect(result.current.root).not.toHaveProperty('onClick');
+    expect(result.current.root).not.toHaveProperty('onKeyDown');
   });
 
   it('should attach onClick/onKeyDown handlers when dismissible', () => {
     const ref = React.createRef<HTMLElement>();
     const { result } = renderHook(() => useTagBase_unstable({ dismissible: true }, ref), { wrapper: wrap() });
     const root = result.current.root as React.ButtonHTMLAttributes<HTMLButtonElement>;
-    expect(root.onClick).toBeDefined();
-    expect(root.onKeyDown).toBeDefined();
+    expect(root.onClick).toEqual(expect.any(Function));
+    expect(root.onKeyDown).toEqual(expect.any(Function));
     expect(root.type).toBe('button');
   });
 
   it('should NOT inject a default dismissIcon children (icon injection lives in the styled hook)', () => {
     const ref = React.createRef<HTMLElement>();
     const { result } = renderHook(() => useTagBase_unstable({ dismissible: true }, ref), { wrapper: wrap() });
 
-    // dismissIcon slot is rendered by default when dismissible, but no children are injected by base
     expect(result.current.dismissIcon).toBeDefined();
-    expect(result.current.dismissIcon?.children).toBeUndefined();
+    expect(result.current.dismissIcon).not.toHaveProperty('children');
   });
 
   it('should set aria-selected when TagGroupContext role is listbox', () => {

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

@@ -4,8 +4,6 @@ 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', () => {
@@ -21,9 +19,7 @@ describe('useTagGroup_unstable', () => {
     const ref = React.createRef<HTMLDivElement>();
     const { result } = renderHook(() => useTagGroup_unstable({}, ref));
 
-    // useTagGroup_unstable wires up useArrowNavigationGroup via the base hook's
-    // arrowNavigationProps option; Tabster's contract is a data-tabster attribute.
-    expect((result.current.root as RootRecord)['data-tabster']).toBeDefined();
+    expect((result.current.root as RootRecord)['data-tabster']).toEqual(expect.any(String));
   });
 
   it('should default role to toolbar', () => {
@@ -38,7 +34,7 @@ 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 as RootRecord)['data-tabster']).toBeUndefined();
+    expect(result.current.root).not.toHaveProperty('data-tabster');
   });
 
   it('should spread arrowNavigationProps option onto root when supplied', () => {
@@ -59,8 +55,6 @@ describe('useTagGroupBase_unstable', () => {
     result.current.handleTagDismiss(event, { value: 'v1' });
 
     expect(onDismiss).toHaveBeenCalledWith(event, { value: 'v1' });
-    // innerRef hasn't been attached to a DOM node in the renderHook environment,
-    // so the container argument is null - we still expect the callback to be invoked.
     expect(onAfterTagDismiss).toHaveBeenCalledWith(null);
   });
 
@@ -80,17 +74,17 @@ describe('useTagGroupBase_unstable', () => {
   it('should NOT expose design-only fields (size, appearance) on base state', () => {
     const ref = React.createRef<HTMLDivElement>();
     const { result } = renderHook(() => useTagGroupBase_unstable({}, ref));
-    expect((result.current as unknown as { size?: unknown }).size).toBeUndefined();
-    expect((result.current as unknown as { appearance?: unknown }).appearance).toBeUndefined();
+    expect(result.current).not.toHaveProperty('size');
+    expect(result.current).not.toHaveProperty('appearance');
   });
 
   it('should provide handleTagSelect only when onTagSelect is supplied', () => {
     const ref = React.createRef<HTMLDivElement>();
     const without = renderHook(() => useTagGroupBase_unstable({}, ref));
-    expect(without.result.current.handleTagSelect).toBeUndefined();
+    expect(without.result.current.handleTagSelect).toBe(undefined);
 
     const onTagSelect = jest.fn();
     const withSelect = renderHook(() => useTagGroupBase_unstable({ onTagSelect }, ref));
-    expect(withSelect.result.current.handleTagSelect).toBeDefined();
+    expect(withSelect.result.current.handleTagSelect).toEqual(expect.any(Function));
   });
 });