Fix Storybook testing: clickMe.click is not a function #672
Conversation
There was a problem hiding this comment.
Pull request overview
This PR aims to fix the clickMe.click is not a function error when rendering Tabs stories in Storybook by making the tab auto-selection logic safer.
Changes:
- Replace unsafe
firstChild.click()usage in theselectedTabpath with a type-guardedHTMLElement | nulland optional chaining. - Update the default “open first tab” path to use the same type-guarded click logic on the first tab’s child element.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
src/tabs.ts
Outdated
| const tab = selectedTab1 || selectedTab0 || (tabContainer.children[0] as HTMLButtonElement) | ||
| const clickMe = tab.firstChild | ||
| // @ts-ignore | ||
| if (clickMe) clickMe.click() | ||
| const clickMe = tab.firstChild as HTMLElement | null | ||
| if (clickMe?.click) clickMe.click() |
There was a problem hiding this comment.
When selectedTab is passed as a string URI (as in the SelectedTab Storybook story), selectedTab0 resolves to the <button> element, so tab is that button and tab.firstChild is the button’s text node, which does not have a click method. With the new guard (if (clickMe?.click)), this silently results in no click, so the selected tab is not actually focused/opened even though no error is thrown. To keep the behavior correct, you should either target the actual clickable element explicitly (e.g. the button for the tab) or fall back to clicking tab itself when tab.firstChild is not an HTMLElement with a click method.
src/tabs.ts
Outdated
| const clickMe = tab.firstChild as HTMLElement | null | ||
| if (clickMe?.click) clickMe.click() | ||
| } else if (!options.startEmpty) { | ||
| (tabContainer.children[0].firstChild as HTMLButtonElement).click() // Open first tab | ||
| const firstTab = tabContainer.children[0]?.firstChild as HTMLElement | null | ||
| if (firstTab?.click) firstTab.click() // Open first tab |
There was a problem hiding this comment.
The new guarded click logic for selecting/opening tabs is not covered by a regression test for the string-URI selectedTab scenario that triggered the original Storybook failure (the existing option selectedTab unit test only exercises the NamedNode-based path). To prevent this behavior from regressing again, consider adding a unit test that constructs a tabWidget with selectedTab set to a string URI (matching the Storybook story) and asserts that the correct tab’s main content is rendered/opened without throwing.
Replace unsafe firstChild.click() calls with proper type checking. Falls back to clicking the tab element itself if firstChild doesn't have a click method (e.g., when it's a text node). Fixes SolidOS#490 Closes SolidOS#671
melvincarvalho
force-pushed
the
issue-671-fix-clickme-storybook
branch
from
25b50e3 to
b9cacc2
Compare
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 1 out of 1 changed files in this pull request and generated no new comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
1 participant
Summary
Fixes the
clickMe.click is not a functionerror in Storybook when rendering Tabs stories.Changes
Replace unsafe
firstChild.click()calls with proper type checking:Why
firstChildreturnsChildNode | null, which could be a Text or Comment node without a.click()method. The@ts-ignoremasked the TypeScript error but crashed at runtime in Storybook.Test plan
Fixes #490
Closes #671