[Help] Trigger exported function

[SaschaLucius]

Is there a way to trigger an exported function of a component within a Storybook story?

The export got properly documented in Storybook, but I was not able to find a way to set up a custom control to trigger it.

Thank You

[xeho91]

To my knowledge, Storybook doesn't have this kind of control, where you can create a button to emit those events(?). You'd have to define those triggers (e.g., buttons) by yourself. Either inside the component, which is the subject/target of the *.stories.svelte file, or inside <Story>.

CC @JReinhold Could you confirm that?

What can be done to see those event handlers(?) being emitted is defining actions.

[JReinhold]

You have to set up your story to trigger it similar to how it would be triggered in the actual application. Without knowing the internals of the component, how it actually triggers the function, it's hard to say how you could do that.

[SaschaLucius]

Thank you for your help @xeho91 and @JReinhold .
I was using the component similar to this REPL and call the clearLog function from the outside.

Is this something I could setup in the story by a button click or insert 2 values to submit the logEvent call?

[SaschaLucius]

Hey,
I found a way to interact with the Component.
I was looking for such an way, and was not realizing that the file where I was defining the story, is also a svelte file, which I can use like all other files.

<script module>
  import { defineMeta } from '@storybook/addon-svelte-csf';
  import Log from '$lib/Log.svelte';

  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
  const { Story } = defineMeta({
    title: 'Log',
    component: Log,
    tags: ['autodocs']
  });

  let log = undefined;
</script>

<Story name="Default" args={{ }}/>

<Story name="With Interactions" id="interactions">
  <button on:click={() => log.logEvent('Test')}>Log event</button>
  <button on:click={() => log.logEvent('Test', new Date('2024-01-01'))}>Log event with time</button>
  <button on:click={() => log.clearLog()}>Clear</button>
  <br/>
  <Log bind:this={log}/>
</Story>