Skip to content

Commit

Permalink
feat(tabs): add click handling for tab items in tests and implementation
Browse files Browse the repository at this point in the history
  • Loading branch information
liaoyinglong committed Oct 30, 2024
1 parent 8de427b commit fa9c239
Show file tree
Hide file tree
Showing 3 changed files with 38 additions and 1 deletion.
5 changes: 5 additions & 0 deletions .changeset/seven-tips-help.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@nextui-org/tabs": patch
---

add click handling for tab items in tests and implementation
32 changes: 32 additions & 0 deletions packages/components/tabs/__tests__/tabs.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -388,4 +388,36 @@ describe("Tabs", () => {

expect(input).toHaveValue("23");
});

it("Tab click should be handled", async () => {
const item1Click = jest.fn();
const item2Click = jest.fn();
const wrapper = render(
<Tabs>
<Tab key="item1" data-testid="item1" title="Item 1" onClick={item1Click}>
<div>Content 1</div>
</Tab>
<Tab key="item2" data-testid="item2" title="Item 2" onClick={item2Click}>
<div>Content 2</div>
</Tab>
</Tabs>,
);
const tab1 = wrapper.getByTestId("item1");
const tab2 = wrapper.getByTestId("item2");

// Test initial state
expect(tab1).toHaveAttribute("aria-selected", "true");
expect(tab2).toHaveAttribute("aria-selected", "false");

// Test clicking tab2
await user.click(tab2);
expect(item2Click).toHaveBeenCalledTimes(1);
expect(tab1).toHaveAttribute("aria-selected", "false");
expect(tab2).toHaveAttribute("aria-selected", "true");

// Test clicking tab2 again
await user.click(tab2);
expect(item2Click).toHaveBeenCalledTimes(2);
expect(tab2).toHaveAttribute("aria-selected", "true");
});
});
2 changes: 1 addition & 1 deletion packages/components/tabs/src/tab.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@ const Tab = forwardRef<"button", TabItemProps>((props, ref) => {
});

const handleClick = () => {
chain(onClick, tabProps.onClick);
chain(onClick, tabProps.onClick)();

if (!domRef?.current || !listRef?.current) return;

Expand Down

0 comments on commit fa9c239

Please sign in to comment.