[Bug] Custom Svelte event does not show up in actions tab?

[alexbjorlig]

Describe the bug

I'm pretty new to Storybook, so I don't know if this is the right place, but would really like my Svelte custom events to be shown here:

Steps to reproduce the behavior

1. Clone my repo here
2. Start storybook with npm run storybook
3. Go to button story and click on the button.

Expected behavior

Both click event and custom svelte event.

Screenshots and/or logs

It only shows the click event.

Button.stories.svelte

<script context="module">
    import Button from "./Button.svelte";
    import { withActions } from '@storybook/addon-actions/decorator';

    export const meta = {
        title: 'Buttons',
        tags: ['autodocs'],

        component: Button,
        args: {
            size: 'medium',
            label: 'test-story'
        },
        parameters: {
        actions: {
            handles: ['custom', 'click'],
        },
  },
  decorators: [withActions],
    };
</script>

<script lang="ts">
    import { Story } from '@storybook/addon-svelte-csf';

</script>

<Story name="Primary" let:args>
    <Button {...args} on:click={args.onClick} />

</Story>

Environment

Storybook Environment Info:

  System:
    OS: macOS 14.3
    CPU: (10) arm64 Apple M1 Max
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.17.1 - ~/.nvm/versions/node/v18.17.1/bin/node
    npm: 10.2.5 - ~/.nvm/versions/node/v18.17.1/bin/npm <----- active
    pnpm: 8.12.0 - ~/.nvm/versions/node/v18.17.1/bin/pnpm
  Browsers:
    Chrome: 121.0.6167.85
    Safari: 17.3
  npmPackages:
    @storybook/addon-actions: ^7.6.12 => 7.6.12 
    @storybook/addon-essentials: ^7.6.12 => 7.6.12 
    @storybook/addon-interactions: ^7.6.12 => 7.6.12 
    @storybook/addon-links: ^7.6.12 => 7.6.12 
    @storybook/addon-svelte-csf: ^4.1.1 => 4.1.1 
    @storybook/blocks: ^7.6.12 => 7.6.12 
    @storybook/svelte: ^7.6.12 => 7.6.12 
    @storybook/sveltekit: ^7.6.12 => 7.6.12 
    @storybook/test: ^7.6.12 => 7.6.12 
    eslint-plugin-storybook: ^0.6.15 => 0.6.15 
    storybook: ^7.6.12 => 7.6.12

Additional context

Check repo for details here: https://github.com/21RISK/svelte-storybook-events

[iltimasd]

Replace

actions: {
  handles: [ 'click'],
},

with:

argTypes: {
  click: { action: "click" },
},

[j3rem1e]

Did you try what is recommended in the documentation ?

• Don't register the decorator
• Don't use args
• Just add on:click in the Template

See https://github.com/storybookjs/addon-svelte-csf/blob/main/README.md?plain=1#L63

[alexbjorlig]

Hi @j3rem1e

I might be missing somehow very obvious, but it does not seem to work for me 😓

(with this code I don't get anything in the Actions tab). Created a branch here, but the story is here:

<script context="module">
    import Button from "./Button.svelte";

    export const meta = {
        title: 'Buttons',
        tags: ['autodocs'],

        component: Button,
        args: {
            size: 'medium',
            label: 'test-story'
        },

    };
    function handleClick() {
        console.log('click called')
    }
</script>

<script lang="ts">
    import { Story } from '@storybook/addon-svelte-csf';

</script>

<Story name="Primary" let:args>
    <Button {...args} on:click on:click={handleClick} />

</Story>

[j3rem1e]

Your Button component doesn't dispatch a 'click' event but a 'testEvent'.

[alexbjorlig]

Your Button component doesn't dispatch a 'click' event but a 'testEvent'.

It does, check it here.

But again, the whole motivation for this question is not click events but how to make custom events show up in the actions tab 🤔

[j3rem1e]

Sorry but it doesn't 😅

on:click is not forwarded. You use it with a handler which dispatch a testEvent. The parent component doesn't receive the click event.

[j3rem1e]

But again, the whole motivation for this question is not click events but how to make custom events show up in the actions tab 🤔

Of course. But you can't subscribe to events not dispatched by your component.

[alexbjorlig]

Thanks so much for helping out @j3rem1e 👍 I updated the code to this now <Button {...args} on:testEvent/> and I actually see the custom event 🔥

How would you recommend that I detect if the button was pressed in an interaction test now? I tried with this implementation, but it times out 🤔

        play: async ({ args, canvasElement }) => {
            const canvas = within(canvasElement);
            const buttons = canvas.getAllByRole('button');
            const button = buttons[0];
            const eventPromise = new Promise((resolve) => {
                button.addEventListener('testEvent', resolve, { once: true });
            });
            await Promise.all([
                userEvent.click(button),
                waitFor(() => eventPromise)
            ])

            // await waitFor(() => expect(args.on).toHaveBeenCalled());
        },

Updated code here.