test(storybook): ActionIcon click DEV-98 (#5669)

### 💭 Notes

I was trying to come up with some "proper" way of having types in
`args`, but searching Storybook docs and thier GH gave me nothing
useful. I made an issue to kindly point this out to Storybook team:
storybookjs/storybook#31106.

Other than that, it's just a simple test to show how it's done ;)

### 👀 Preview steps

Testing:
1. ℹ️ run storybook
2. go to Design System → ActionIcon → Test Click story
3. open "Interactions" tab
4. 🟢 notice that test PASS

---------

Co-authored-by: Akuukis <Akuukis@users.noreply.github.com>

Author: magicznyleszek

jsapp/js/components/common/ActionIcon.tsx

@@ -1,7 +1,6 @@
-import { forwardRef } from 'react'
-
-import { ActionIcon as ActionIconMantine } from '@mantine/core'
+import { ActionIcon as ActionIconMantine, createPolymorphicComponent } from '@mantine/core'
 import type { ActionIconProps as ActionIconPropsMantine } from '@mantine/core/lib/components'
+import { forwardRef } from 'react'
 import type { IconName } from '#/k-icons'
 import Icon, { type IconSize } from './icon'
 
@@ -20,5 +19,6 @@ const ActionIcon = forwardRef<HTMLButtonElement, ActionIconProps>(({ iconName, .
     </ActionIconMantine>
   )
 })
+ActionIcon.displayName = 'ActionIcon'
 
-export default ActionIcon
+export default createPolymorphicComponent<'button', ActionIconProps>(ActionIcon)

jsapp/js/components/common/actionIcon.stories.tsx

@@ -1,6 +1,6 @@
-import React from 'react'
-
+import type { ElementProps } from '@mantine/core'
 import type { Meta, StoryObj } from '@storybook/react'
+import { expect, fn, userEvent, within } from '@storybook/test'
 import { IconNames } from '#/k-icons'
 import ActionIcon, { type ActionIconProps } from './ActionIcon'
 
@@ -16,7 +16,7 @@ const actionIconVariants: Array<ActionIconProps['variant']> = [
 
 const actionIconSizes: Array<ActionIconProps['size']> = ['sm', 'md', 'lg']
 
-export default {
+const meta = {
   title: 'Design system/ActionIcon',
   component: ActionIcon,
   argTypes: {
@@ -38,51 +38,20 @@ export default {
     disabled: { control: 'boolean' },
     loading: { control: 'boolean' },
   },
-} as Meta<typeof ActionIcon>
-
-type Story = StoryObj<typeof ActionIcon>
-
-export const Filled: Story = {
-  args: {
-    variant: 'filled',
-    size: 'md',
-    iconName: 'edit',
-  },
-}
-
-export const Light: Story = {
-  args: {
-    variant: 'light',
-    size: 'md',
-    iconName: 'edit',
-  },
-}
-
-export const Transparent: Story = {
-  args: {
-    variant: 'transparent',
-    size: 'md',
-    iconName: 'more',
-  },
-}
+} satisfies Meta<typeof ActionIcon>
 
-export const Danger: Story = {
-  args: {
-    variant: 'danger',
-    size: 'md',
-    iconName: 'trash',
-  },
-}
+export default meta
+type StoryArgs = ActionIconProps & ElementProps<'button', keyof ActionIconProps> & { 'data-testid'?: string }
+type Story = StoryObj<typeof ActionIcon> & { args: StoryArgs }
 
-export const DangerSecondary: Story = {
+export const Default: Story = {
   args: {
-    variant: 'danger-secondary',
+    iconName: 'document',
     size: 'lg',
-    iconName: 'trash',
   },
 }
 
-export const AllIconStyles = () => (
+export const Preview = () => (
   <div
     style={{
       display: 'grid',
@@ -111,3 +80,21 @@ export const AllIconStyles = () => (
     )}
   </div>
 )
+
+export const TestClick: Story = {
+  args: {
+    variant: 'filled',
+    size: 'md',
+    iconName: 'edit',
+    onClick: fn(),
+    'data-testid': 'ActionIcon-click-test',
+  },
+  play: async ({ args, canvasElement }) => {
+    // Unfortunately Storybook doesn't pass proper types for `args`, so we need to cast it.
+    // TODO: I made an issue to point this out to Storybook team: https://github.com/storybookjs/storybook/issues/31106
+    // let's fix this when they fix it.
+    const canvas = within(canvasElement)
+    await userEvent.click(canvas.getByTestId((args as StoryArgs)['data-testid']!))
+    await expect((args as StoryArgs).onClick).toHaveBeenCalledTimes(1)
+  },
+}