Example button story with onClick()

[magick93]

Hello

I'm wondering if I'm making a mistake or misunderstanding how Storybook should work.

With the following:

<script>
    export let onClick = () => {
      console.log('Button clicked');
    };
 </script>
    <button class="button"  on:click={onClick}>
    <slot />
  </button>

And the following story:

<script context="module">
    import Button from './Button.svelte';
  
    export const meta = {
      title: "Button2",
      component: Button
    }
  </script>
  
  <script>
    import { Story, Template } from '@storybook/addon-svelte-csf';
  
    let count = 0;
    function onClick() {
      console.log('Button clicked');
      count += 1;
    }
  </script>
  
  <Template let:args>
    <!--👇 'on:click' allows to forward event to addon-actions  -->
    <Button {...args} 
      on:click
      on:click={onClick}>
      You clicked: {count}
    </Button>
  </Template>
  

  
  <!-- Dynamic snippet should be disabled for this story -->
  <Story name="Button No Args">
    <Button>Label</Button>
  </Story>

Question

I can see Storybook captures the click event. But the counter never increases, and onClick() in the story or component never seems to get called.

Is this the expected behavior?
Is it possible to have component functions, or storybook functions, called?

[xeho91]

May I ask what did you mean in your mind with "component functions" and "Storybook functions"?
Action handlers for on:click directive?

I admit the example from documentation is... confusing. I haven't used Svelte v4 and the version of this addon (also v4) for a while, but defining on:click directive twice seems off.

I don't remember why it was this way, but I hope @JReinhold does.

Did you also had a chance to take a look at "example" stories file?

• component Button.svelte
• stories button.stories.svelte

I'm spitballing now, but see if:

• moving shorthand on:click (the one without explicitly defined handler) after the one with handler helps
• using eventDispatcher (imported from svelte) changes anything

[JReinhold]

With the example component you're giving here, the button element only ever calls the onClick callback - it never emits the click event. This is why you can't just set a callback to on:click, but instead you have to pass it in as the onClick prop - luckily this confusion is being cleared up in Svelte 5.

This is slightly different from the example button in the addon, that also dispatches the click event here: https://github.com/storybookjs/addon-svelte-csf/blob/main/stories/Button.svelte#L11

If you were to write a story for your component above, I'd do it like this:

<script context="module">
    import Button from './Button.svelte';
  
    export const meta = {
      title: "Button2",
      component: Button
    }
  </script>
  
  <script>
    import { Story, Template } from '@storybook/addon-svelte-csf';
    import { fn } from '@storybook/test';

	const onClickSpy = fn().mockName('onClick');

    let count = 0;
    function onClick(event) {
      count += 1;
      onClickSpy(event);
    }
  </script>
  
  <Template let:args>
    <Button {...args} 
      onClick={onClick}>
      You clicked: {count}
    </Button>
  </Template>
  
  <Story name="Default" />

The fn() function is a recent addition to @storybook/test, which is why you don't see it many places, but it's great. https://storybook.js.org/docs/essentials/actions#via-storybooktest-fn-spy-function