Comments (8)
Replace
actions: {
handles: [ 'click'],
},
with:
argTypes: {
click: { action: "click" },
},
from addon-svelte-csf.
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
from addon-svelte-csf.
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>
from addon-svelte-csf.
Your Button component doesn't dispatch a 'click' event but a 'testEvent'.
from addon-svelte-csf.
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 🤔
from addon-svelte-csf.
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.
from addon-svelte-csf.
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.
from addon-svelte-csf.
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.
from addon-svelte-csf.
Related Issues (20)
- Issue template should ask for version of Storybook and `addon-svelte-csf` that are being used HOT 3
- [Bug] Stories with additional markup are breaking HOT 11
- Unable to set slot description or default value HOT 1
- Migrate to new story indexer API HOT 3
- Svelte CSF Autodoc comments HOT 2
- [Bug] CSF Story Error HOT 2
- [Bug] Autodocs does not render Component name properly. HOT 8
- Posible to have typed args in the `<Template />` component? HOT 1
- [Bug] Support for `svelte 5` HOT 10
- [Bug] Setup with sveltekit fails HOT 6
- [Feature Request] Support for vite 5.x
- Request: typescript usage examples HOT 2
- [Request] A simple way to bind component story state to args HOT 2
- [Bug] Autodocs produce invalid code example HOT 2
- [Bug] cannot use some names in imports HOT 4
- [Bug] svelte-stories-loader doesn't preprocess stories when using Webpack
- [Bug] When calling the fn "superForm" from "sveltekit-superforms/client" we get error "Cannot destructure property 'story' of 'storyObject' as it is undefined." HOT 9
- Compatibility with Storybook 8 HOT 3
- [Bug] Not working with `getAbsolutePath('@storybook/addon-svelte-csf')` in Storybook 8 HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from addon-svelte-csf.