test(react-tags): add hook regression tests for Tag family by mainframev · Pull Request #36229 · microsoft/fluentui

mainframev · 2026-05-19T14:27:42Z

Stack

This PR is part of a 3-PR stack. Review and merge bottom-up:

feat(react-tags): decouple useTagGroupBase_unstable from Tabster + export contexts #36228 — feat(react-tags): decouple useTagGroupBase_unstable from Tabster + export contexts (base: master) — merge first
👉 test(react-tags): add hook regression tests for Tag family #36229 — test(react-tags): add hook regression tests for Tag family (base: feat(react-tags): decouple useTagGroupBase_unstable from Tabster + export contexts #36228) — depends on feat(react-tags): decouple useTagGroupBase_unstable from Tabster + export contexts #36228
feat(react-headless-components-preview): add Tag family #36230 — feat(react-headless-components-preview): add Tag family (base: test(react-tags): add hook regression tests for Tag family #36229) — merge last; depends on test(react-tags): add hook regression tests for Tag family #36229

Summary

Adds renderHook-based regression tests for the Tag, InteractionTag, InteractionTagPrimary, InteractionTagSecondary, and TagGroup base + styled hooks. Locks in the public output shape so subsequent base-hook refactors (such as the Tabster decoupling in #36228) cannot silently regress the styled hooks.

Coverage highlights:

Slot element type via root.type (button vs span), event-handler presence/absence
Default DismissRegular injection happens only in the styled hooks (useTag_unstable, useInteractionTagSecondary_unstable), never in the base hooks
Context inheritance for appearance / size from TagGroupContext
Context override for disabled (group overrides tag prop)
New UseTagGroupBaseOptions contract: arrowNavigationProps is spread onto root, onAfterTagDismiss is invoked after a dismiss; both default to no-op
ARIA: aria-selected (listbox), aria-pressed (default), aria-labelledby (InteractionTagSecondary)

_{Stack created with GitHub Stacks CLI • Give Feedback 💬}

github-actions · 2026-05-19T15:03:45Z

Pull request demo site: URL

…led hooks

…on comments

layershifter

Not sure why tests are second in the stack. Also they could target master, no?

layershifter · 2026-05-20T16:35:19Z

+  it('should NOT expose design-only fields (appearance/shape/size) on base state', () => {
+    const ref = React.createRef<HTMLDivElement>();
+    const { result } = renderHook(() => useInteractionTagBase_unstable({}, ref), { wrapper: wrap() });
+
+    expect(result.current).not.toHaveProperty('appearance');
+    expect(result.current).not.toHaveProperty('shape');
+    expect(result.current).not.toHaveProperty('size');
+  });


is this test helpful?

Good point, removed across all four hook test files. The base hook return types already exclude appearance/shape/size/avatar*, so TS prevents it, it was intended as an extra guard against accidental ...spread leaks

layershifter · 2026-05-20T16:36:31Z

+import { useInteractionTag_unstable, useInteractionTagBase_unstable } from './useInteractionTag';
+
+const wrap = (
+  contextOverrides: Parameters<typeof TagGroupContextProvider>[0]['value'] = {


there is TagGroupContextValue

layershifter · 2026-05-20T16:36:48Z

+};
+
+const wrap = (
+  overrides: Partial<Parameters<typeof InteractionTagContextProvider>[0]['value']> = {},


InteractionTagContextValue?

layershifter · 2026-05-20T16:37:09Z

+  it('should NOT expose design-only fields (appearance/shape/size/avatar*) on base state', () => {
+    const ref = React.createRef<HTMLButtonElement>();
+    const { result } = renderHook(() => useInteractionTagPrimaryBase_unstable({}, ref), { wrapper: wrap() });
+
+    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');
+  });


is this helpful?

layershifter · 2026-05-20T16:37:26Z

+};
+
+const wrap = (
+  overrides: Partial<Parameters<typeof InteractionTagContextProvider>[0]['value']> = {},


InteractionTagContextValue?

layershifter · 2026-05-20T16:38:09Z

+  it('should inject DismissRegular as default root children', () => {
+    const ref = React.createRef<HTMLButtonElement>();
+    const { result } = renderHook(() => useInteractionTagSecondary_unstable({}, ref), { wrapper: wrap() });
+    expect(result.current.root.children).toBeDefined();


Let's add at least React.isValidElement

layershifter · 2026-05-20T16:38:45Z

+    expect(result.current.root.type).toBe('button');
+  });
+
+  it('should NOT inject DismissRegular children by default (icon injection lives in the styled hook)', () => {


Suggested change

it('should NOT inject DismissRegular children by default (icon injection lives in the styled hook)', () => {

it('should not inject children by default', () => {

layershifter · 2026-05-20T16:39:01Z

+  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).not.toHaveProperty('appearance');
+    expect(result.current).not.toHaveProperty('shape');
+    expect(result.current).not.toHaveProperty('size');
+  });


is this useful?

layershifter · 2026-05-20T16:40:28Z

+    const { result } = renderHook(() => useTag_unstable({ dismissible: true }, ref), { wrapper: wrap() });
+
+    expect(result.current.dismissIcon).toBeDefined();
+    expect(result.current.dismissIcon?.children).toBeDefined();


Let's add React.isValidElement

layershifter · 2026-05-20T16:40:44Z

+    expect(root.type).toBe('button');
+  });
+
+  it('should NOT inject a default dismissIcon children (icon injection lives in the styled hook)', () => {


layershifter · 2026-05-20T16:41:39Z

+    const ref = React.createRef<HTMLDivElement>();
+    const { result } = renderHook(() => useTagGroup_unstable({}, ref));
+
+    expect((result.current.root as RootRecord)['data-tabster']).toEqual(expect.any(String));


toHaveProperty should avoid type cast?

layershifter · 2026-05-20T16:42:09Z

+    const arrowNavigationProps: TabsterDOMAttribute = { 'data-tabster': '{"mock":"value"}' };
+    const { result } = renderHook(() => useTagGroupBase_unstable({}, ref, { arrowNavigationProps }));
+
+    expect((result.current.root as RootRecord)['data-tabster']).toBe('{"mock":"value"}');


layershifter · 2026-05-20T16:42:32Z

+  it('should NOT throw when onDismiss/onAfterTagDismiss are omitted (true headless mode)', () => {
+    const ref = React.createRef<HTMLDivElement>();
+    const { result } = renderHook(() => useTagGroupBase_unstable({}, ref));
+
+    expect(() => result.current.handleTagDismiss({} as React.MouseEvent, { value: 'v1' })).not.toThrow();
+  });


is it useful?

layershifter · 2026-05-20T16:42:44Z

+  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).not.toHaveProperty('size');
+    expect(result.current).not.toHaveProperty('appearance');
+  });


is it useful?

This was referenced May 19, 2026

feat(react-tags): decouple useTagGroupBase_unstable from Tabster + export contexts #36228

Open

feat(react-headless-components-preview): add Tag family #36230

Open

mainframev self-assigned this May 19, 2026

mainframev added Area: Testing Component: Tag v9 Tag component labels May 19, 2026

mainframev force-pushed the feat/headless-tag-2-regression-tests branch from 9a05d90 to 36292c8 Compare May 19, 2026 14:58

mainframev force-pushed the feat/headless-tag-1-refactor branch from 99f8a77 to 24a9f85 Compare May 19, 2026 22:24

mainframev force-pushed the feat/headless-tag-2-regression-tests branch from 36292c8 to f368d08 Compare May 19, 2026 22:24

mainframev marked this pull request as ready for review May 20, 2026 01:11

mainframev requested review from a team and ValentinaKozlova as code owners May 20, 2026 01:11

mainframev force-pushed the feat/headless-tag-2-regression-tests branch from 77859e1 to 495dfb9 Compare May 20, 2026 01:36

microsoft-github-policy-service Bot added the PR: API Modified label May 20, 2026

mainframev force-pushed the feat/headless-tag-2-regression-tests branch from 495dfb9 to 1d660cc Compare May 20, 2026 01:53

mainframev force-pushed the feat/headless-tag-1-refactor branch from 24a9f85 to 4af8734 Compare May 20, 2026 02:04

mainframev force-pushed the feat/headless-tag-2-regression-tests branch from 1d660cc to 14b9a10 Compare May 20, 2026 02:04

mainframev removed the PR: API Modified label May 20, 2026

tudorpopams requested a review from dmytrokirpa May 20, 2026 12:04

mainframev added 3 commits May 20, 2026 14:07

test(react-tags): add hook regression tests for Tag family base + sty…

f1a66a1

…led hooks

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

e47c1f5

test(react-tags): tighten regression test assertions and drop narrati…

28edd89

…on comments

mainframev force-pushed the feat/headless-tag-1-refactor branch from 4af8734 to 08cb5a5 Compare May 20, 2026 12:10

mainframev force-pushed the feat/headless-tag-2-regression-tests branch from 14b9a10 to 28edd89 Compare May 20, 2026 12:10

layershifter reviewed May 20, 2026

View reviewed changes

	it('should NOT inject DismissRegular children by default (icon injection lives in the styled hook)', () => {
	it('should not inject children by default', () => {

Conversation

mainframev commented May 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Stack

Summary

Uh oh!

github-actions Bot commented May 19, 2026

Uh oh!

layershifter left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mainframev May 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

mainframev commented May 19, 2026 •

edited

Loading

mainframev May 25, 2026 •

edited

Loading