fix(table): fix broken sorting test that never validated behavior #5904

hasegawa-101 · 2025-11-16T17:13:24Z

Closes #

📝 Description

Fixed the table sorting test which was not properly validating the sorting behavior.

⛳️ Current behavior (updates)

The test appeared to pass but was actually broken - it never verified that clicking a sortable column updates the aria-sort attribute. The test used an uncontrolled pattern without sortDescriptor/onSortChange, which doesn't work with React Aria/Stately.

console.log("Before click - aria-sort:", column.getAttribute("aria-sort")); // aria-sort = "none" ⭕️
    expect(column).toHaveAttribute("aria-sort", "none");

    act(async () => {
      await userEvent.click(column);
      console.log("After click inside act - aria-sort:", column.getAttribute("aria-sort")); // no tests 💀
      expect(column).toHaveAttribute("aria-sort", "ascending");
    });

    console.log("After act - aria-sort:", column.getAttribute("aria-sort")); // aria-sort = "none" ❌
  });

🚀 New behavior

The test now correctly implements controlled sorting and properly validates that clicking a column header updates the aria-sort attribute from "none" to "ascending".

💣 Is this a breaking change (Yes/No):

No

📝 Additional Information

vercel · 2025-11-16T17:13:28Z

@hasegawa-101 is attempting to deploy a commit to the HeroUI Inc Team on Vercel.

A member of the Team first needs to authorize it.

changeset-bot · 2025-11-16T17:13:28Z

⚠️ No Changeset found

Latest commit: 777475e

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

coderabbitai · 2025-11-16T17:13:29Z

Walkthrough

The test file for the Table component is updated to introduce a stateful test wrapper managing sorting state. Two new props are added to the Table component—sortDescriptor and onSortChange—enabling testing of sort state transitions. Test interactions are restructured to verify aria-sort attribute changes following user clicks.

Changes

Cohort / File(s)	Summary
Table sorting test updates `packages/components/table/__tests__/table.test.tsx`	Introduces TestTable stateful wrapper managing sortDescriptor state; passes sortDescriptor and onSortChange props to Table; replaces userEvent-based interaction with direct user.click within act block; verifies aria-sort attribute updates to ascending after click

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Review the new public API props (sortDescriptor, onSortChange) for correct typing and interface design
Verify the test wrapper correctly manages sort state transitions and assertions reflect the expected behavior
Confirm the interaction pattern change (act block with direct click) aligns with testing best practices

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description check	✅ Passed	The description follows the template structure with all required sections completed: Description, Current behavior, New behavior, Breaking change status, and Additional Information. It provides clear context with code examples and visual evidence.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Title check	✅ Passed	The title mentions fixing a broken sorting test, which aligns with the main objective of converting the test to use controlled sorting. However, the actual title provided differs slightly from the PR summary title.

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

pkg-pr-new · 2025-11-16T17:19:49Z

Open in StackBlitz

@heroui/accordion

npm i https://pkg.pr.new/@heroui/accordion@5904

@heroui/alert

npm i https://pkg.pr.new/@heroui/alert@5904

@heroui/autocomplete

npm i https://pkg.pr.new/@heroui/autocomplete@5904

@heroui/avatar

npm i https://pkg.pr.new/@heroui/avatar@5904

@heroui/badge

npm i https://pkg.pr.new/@heroui/badge@5904

@heroui/breadcrumbs

npm i https://pkg.pr.new/@heroui/breadcrumbs@5904

@heroui/button

npm i https://pkg.pr.new/@heroui/button@5904

@heroui/calendar

npm i https://pkg.pr.new/@heroui/calendar@5904

@heroui/card

npm i https://pkg.pr.new/@heroui/card@5904

@heroui/checkbox

npm i https://pkg.pr.new/@heroui/checkbox@5904

@heroui/chip

npm i https://pkg.pr.new/@heroui/chip@5904

@heroui/code

npm i https://pkg.pr.new/@heroui/code@5904

@heroui/date-input

npm i https://pkg.pr.new/@heroui/date-input@5904

@heroui/date-picker

npm i https://pkg.pr.new/@heroui/date-picker@5904

@heroui/divider

npm i https://pkg.pr.new/@heroui/divider@5904

@heroui/drawer

npm i https://pkg.pr.new/@heroui/drawer@5904

@heroui/dropdown

npm i https://pkg.pr.new/@heroui/dropdown@5904

@heroui/form

npm i https://pkg.pr.new/@heroui/form@5904

@heroui/image

npm i https://pkg.pr.new/@heroui/image@5904

@heroui/input

npm i https://pkg.pr.new/@heroui/input@5904

@heroui/input-otp

npm i https://pkg.pr.new/@heroui/input-otp@5904

@heroui/kbd

npm i https://pkg.pr.new/@heroui/kbd@5904

@heroui/link

npm i https://pkg.pr.new/@heroui/link@5904

@heroui/listbox

npm i https://pkg.pr.new/@heroui/listbox@5904

@heroui/menu

npm i https://pkg.pr.new/@heroui/menu@5904

@heroui/modal

npm i https://pkg.pr.new/@heroui/modal@5904

@heroui/navbar

npm i https://pkg.pr.new/@heroui/navbar@5904

@heroui/number-input

npm i https://pkg.pr.new/@heroui/number-input@5904

@heroui/pagination

npm i https://pkg.pr.new/@heroui/pagination@5904

@heroui/popover

npm i https://pkg.pr.new/@heroui/popover@5904

@heroui/progress

npm i https://pkg.pr.new/@heroui/progress@5904

@heroui/radio

npm i https://pkg.pr.new/@heroui/radio@5904

@heroui/ripple

npm i https://pkg.pr.new/@heroui/ripple@5904

@heroui/scroll-shadow

npm i https://pkg.pr.new/@heroui/scroll-shadow@5904

@heroui/select

npm i https://pkg.pr.new/@heroui/select@5904

@heroui/skeleton

npm i https://pkg.pr.new/@heroui/skeleton@5904

@heroui/slider

npm i https://pkg.pr.new/@heroui/slider@5904

@heroui/snippet

npm i https://pkg.pr.new/@heroui/snippet@5904

@heroui/spacer

npm i https://pkg.pr.new/@heroui/spacer@5904

@heroui/spinner

npm i https://pkg.pr.new/@heroui/spinner@5904

@heroui/switch

npm i https://pkg.pr.new/@heroui/switch@5904

@heroui/table

npm i https://pkg.pr.new/@heroui/table@5904

@heroui/tabs

npm i https://pkg.pr.new/@heroui/tabs@5904

@heroui/toast

npm i https://pkg.pr.new/@heroui/toast@5904

@heroui/tooltip

npm i https://pkg.pr.new/@heroui/tooltip@5904

@heroui/user

npm i https://pkg.pr.new/@heroui/user@5904

@heroui/react

npm i https://pkg.pr.new/@heroui/react@5904

@heroui/system

npm i https://pkg.pr.new/@heroui/system@5904

@heroui/system-rsc

npm i https://pkg.pr.new/@heroui/system-rsc@5904

@heroui/theme

npm i https://pkg.pr.new/@heroui/theme@5904

@heroui/use-aria-accordion

npm i https://pkg.pr.new/@heroui/use-aria-accordion@5904

@heroui/use-aria-accordion-item

npm i https://pkg.pr.new/@heroui/use-aria-accordion-item@5904

@heroui/use-aria-button

npm i https://pkg.pr.new/@heroui/use-aria-button@5904

@heroui/use-aria-link

npm i https://pkg.pr.new/@heroui/use-aria-link@5904

@heroui/use-aria-modal-overlay

npm i https://pkg.pr.new/@heroui/use-aria-modal-overlay@5904

@heroui/use-aria-multiselect

npm i https://pkg.pr.new/@heroui/use-aria-multiselect@5904

@heroui/use-aria-overlay

npm i https://pkg.pr.new/@heroui/use-aria-overlay@5904

@heroui/use-callback-ref

npm i https://pkg.pr.new/@heroui/use-callback-ref@5904

@heroui/use-clipboard

npm i https://pkg.pr.new/@heroui/use-clipboard@5904

@heroui/use-data-scroll-overflow

npm i https://pkg.pr.new/@heroui/use-data-scroll-overflow@5904

@heroui/use-disclosure

npm i https://pkg.pr.new/@heroui/use-disclosure@5904

@heroui/use-draggable

npm i https://pkg.pr.new/@heroui/use-draggable@5904

@heroui/use-form-reset

npm i https://pkg.pr.new/@heroui/use-form-reset@5904

@heroui/use-image

npm i https://pkg.pr.new/@heroui/use-image@5904

@heroui/use-infinite-scroll

npm i https://pkg.pr.new/@heroui/use-infinite-scroll@5904

@heroui/use-intersection-observer

npm i https://pkg.pr.new/@heroui/use-intersection-observer@5904

@heroui/use-is-mobile

npm i https://pkg.pr.new/@heroui/use-is-mobile@5904

@heroui/use-is-mounted

npm i https://pkg.pr.new/@heroui/use-is-mounted@5904

@heroui/use-measure

npm i https://pkg.pr.new/@heroui/use-measure@5904

@heroui/use-pagination

npm i https://pkg.pr.new/@heroui/use-pagination@5904

@heroui/use-real-shape

npm i https://pkg.pr.new/@heroui/use-real-shape@5904

@heroui/use-ref-state

npm i https://pkg.pr.new/@heroui/use-ref-state@5904

@heroui/use-resize

npm i https://pkg.pr.new/@heroui/use-resize@5904

@heroui/use-safe-layout-effect

npm i https://pkg.pr.new/@heroui/use-safe-layout-effect@5904

@heroui/use-scroll-position

npm i https://pkg.pr.new/@heroui/use-scroll-position@5904

@heroui/use-ssr

npm i https://pkg.pr.new/@heroui/use-ssr@5904

@heroui/use-theme

npm i https://pkg.pr.new/@heroui/use-theme@5904

@heroui/use-update-effect

npm i https://pkg.pr.new/@heroui/use-update-effect@5904

@heroui/use-viewport-size

npm i https://pkg.pr.new/@heroui/use-viewport-size@5904

@heroui/aria-utils

npm i https://pkg.pr.new/@heroui/aria-utils@5904

@heroui/dom-animation

npm i https://pkg.pr.new/@heroui/dom-animation@5904

@heroui/framer-utils

npm i https://pkg.pr.new/@heroui/framer-utils@5904

@heroui/react-rsc-utils

npm i https://pkg.pr.new/@heroui/react-rsc-utils@5904

@heroui/react-utils

npm i https://pkg.pr.new/@heroui/react-utils@5904

@heroui/shared-icons

npm i https://pkg.pr.new/@heroui/shared-icons@5904

@heroui/shared-utils

npm i https://pkg.pr.new/@heroui/shared-utils@5904

@heroui/stories-utils

npm i https://pkg.pr.new/@heroui/stories-utils@5904

@heroui/test-utils

npm i https://pkg.pr.new/@heroui/test-utils@5904

commit: 777475e

vercel · 2025-11-19T13:53:01Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
heroui	Ready	Preview	Comment	Nov 19, 2025 1:54pm
heroui-sb	Ready	Preview	Comment	Nov 19, 2025 1:54pm

fix(table): use controlled sorting in table test

777475e

hasegawa-101 marked this pull request as ready for review November 16, 2025 17:26

hasegawa-101 requested a review from jrgarciadev as a code owner November 16, 2025 17:26

hasegawa-101 changed the title ~~fix(table): use controlled sorting in table test~~ fix(table): fix broken sorting test that never validated behavior Nov 16, 2025

wingkwong self-assigned this Nov 17, 2025

wingkwong added this to the v2.8.6 milestone Nov 17, 2025

vercel bot deployed to Preview – heroui-sb November 19, 2025 13:54 View deployment

vercel bot deployed to Preview – heroui November 19, 2025 13:54 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

fix(table): fix broken sorting test that never validated behavior #5904

fix(table): fix broken sorting test that never validated behavior #5904

Uh oh!

hasegawa-101 commented Nov 16, 2025 •

edited

Loading

Uh oh!

vercel bot commented Nov 16, 2025

Uh oh!

changeset-bot bot commented Nov 16, 2025

Uh oh!

coderabbitai bot commented Nov 16, 2025 •

edited

Loading

Uh oh!

pkg-pr-new bot commented Nov 16, 2025

Uh oh!

vercel bot commented Nov 19, 2025 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

fix(table): fix broken sorting test that never validated behavior #5904

Are you sure you want to change the base?

fix(table): fix broken sorting test that never validated behavior #5904

Uh oh!

Conversation

hasegawa-101 commented Nov 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📝 Description

⛳️ Current behavior (updates)

🚀 New behavior

💣 Is this a breaking change (Yes/No):

📝 Additional Information

Uh oh!

vercel bot commented Nov 16, 2025

Uh oh!

changeset-bot bot commented Nov 16, 2025

⚠️ No Changeset found

Uh oh!

coderabbitai bot commented Nov 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Pre-merge checks and finishing touches

Uh oh!

pkg-pr-new bot commented Nov 16, 2025

Uh oh!

vercel bot commented Nov 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

hasegawa-101 commented Nov 16, 2025 •

edited

Loading

coderabbitai bot commented Nov 16, 2025 •

edited

Loading

vercel bot commented Nov 19, 2025 •

edited

Loading