add decorators support, write more tests

code/renderers/svelte/package.json

@@ -32,6 +32,7 @@
     "./package.json": "./package.json",
     "./internal/PreviewRender.svelte": "./dist/components/PreviewRender.svelte",
     "./internal/SlotDecorator.svelte": "./dist/components/SlotDecorator.svelte",
+    "./internal/AddStorybookIdDecorator.svelte": "./dist/components/AddStorybookIdDecorator.svelte",
     "./internal/createSvelte5Props": "./dist/createSvelte5Props.svelte.js"
   },
   "main": "dist/index.js",

code/renderers/svelte/src/__test__/composeStories/AddWrapperDecorator.svelte

@@ -0,0 +1,3 @@
+<div style="margin: 3em;">
+  <slot/>
+</div>

code/renderers/svelte/src/__test__/composeStories/Button.stories.ts

@@ -1,6 +1,12 @@
-import { userEvent, within } from '@storybook/testing-library';
+import { expect, fn, userEvent, within } from '@storybook/test';
 import type { Meta, StoryFn as CSF2Story, StoryObj } from '../..';
 
+import LoaderStoryComponent from './LoaderStoryComponent.svelte';
+import InputFilledStoryComponent from './InputFilledStoryComponent.svelte';
+import StoryWithLocaleComponent from './StoryWithLocaleComponent.svelte';
+import AddWrapperDecorator from './AddWrapperDecorator.svelte';
+import CustomRenderComponent from './CustomRenderComponent.svelte';
+
 import Button from './Button.svelte';
 
 const meta = {
@@ -23,11 +29,8 @@ type CSF3Story = StoryObj<typeof meta>;
 export const ImNotAStory = 123;
 
 const Template: CSF2Story = (args) => ({
-  components: { Button },
-  setup() {
-    return { args };
-  },
-  template: '<Button v-bind="args" />',
+  Component: Button,
+  props: args,
 });
 
 export const CSF2Secondary = Template.bind({});
@@ -52,16 +55,12 @@ const getCaptionForLocale = (locale: string) => {
 };
 
 export const CSF2StoryWithLocale: CSF2Story = (args, { globals }) => ({
-  components: { Button },
-  setup() {
-    console.log({ globals });
-    const label = getCaptionForLocale(globals.locale);
-    return { args: { ...args, label } };
+  Component: StoryWithLocaleComponent,
+  props: {
+    ...args,
+    locale: globals.locale,
+    label: getCaptionForLocale(globals.locale),
   },
-  template: `<div>
-    <p>locale: ${globals.locale}</p>
-    <Button v-bind="args" />
-  </div>`,
 });
 CSF2StoryWithLocale.storyName = 'WithLocale';
 
@@ -73,9 +72,24 @@ CSF2StoryWithParamsAndDecorator.parameters = {
   layout: 'centered',
 };
 CSF2StoryWithParamsAndDecorator.decorators = [
-  () => ({ template: '<div style="margin: 3em;"><story/></div>' }),
+  () => ({
+    Component: AddWrapperDecorator,
+  }),
 ];
 
+export const NewStory: CSF3Story = {
+  args: {
+    label: 'foo',
+    size: 'large',
+    primary: true,
+  },
+  decorators: [
+    () => ({
+      Component: AddWrapperDecorator,
+    }),
+  ],
+};
+
 export const CSF3Primary: CSF3Story = {
   args: {
     label: 'foo',
@@ -91,32 +105,48 @@ export const CSF3Button: CSF3Story = {
 export const CSF3ButtonWithRender: CSF3Story = {
   ...CSF3Button,
   render: (args) => ({
-    components: { Button },
-    setup() {
-      return { args };
+    Component: CustomRenderComponent,
+    props: {
+      args,
     },
-    template: `
-      <div>
-        <p data-testid="custom-render">I am a custom render function</p>
-        <Button v-bind="args" />
-      </div>
-    `,
   }),
 };
 
 export const CSF3InputFieldFilled: CSF3Story = {
-  ...CSF3Button,
-  render: (args) => ({
-    components: { Button },
-    setup() {
-      return { args };
-    },
-    template: '<input data-testid="input" />',
+  render: () => ({
+    Component: InputFilledStoryComponent,
   }),
   play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
     await step('Step label', async () => {
-      await userEvent.type(canvas.getByTestId('input'), 'Hello world!');
+      const inputEl = canvas.getByTestId('input');
+      await userEvent.type(inputEl, 'Hello world!');
+      await expect(inputEl).toHaveValue('Hello world!');
     });
   },
 };
+
+const mockFn = fn();
+export const LoaderStory: StoryObj<{ mockFn: (val: string) => string }> = {
+  args: {
+    mockFn,
+  },
+  loaders: [
+    async () => {
+      mockFn.mockReturnValueOnce('mockFn return value');
+      return {
+        value: 'loaded data',
+      };
+    },
+  ],
+  render: (args, { loaded }) => ({
+    Component: LoaderStoryComponent,
+    props: {
+      ...args,
+      loaded,
+    },
+  }),
+  play: async () => {
+    expect(mockFn).toHaveBeenCalledWith('render');
+  },
+};

code/renderers/svelte/src/__test__/composeStories/Button.svelte

@@ -29,4 +29,5 @@
   on:click
 >
   {label}
+  <slot/>
 </button>

code/renderers/svelte/src/__test__/composeStories/CustomRenderComponent.svelte

@@ -0,0 +1,10 @@
+<script>
+  import Button from './Button.svelte';
+
+  export let args;
+</script>
+
+<div>
+  <p data-testid="custom-render">I am a custom render function</p>
+  <Button {...args} />
+</div>

code/renderers/svelte/src/__test__/composeStories/InputFilledStoryComponent.svelte

@@ -0,0 +1 @@
+<input data-testid="input" />

code/renderers/svelte/src/__test__/composeStories/LoaderStoryComponent.svelte

@@ -0,0 +1,15 @@
+<script>
+  export let mockFn;
+  export let loaded;
+
+  let data;
+  
+  $: if (mockFn && loaded) {
+    data = mockFn('render');
+  }
+</script>
+
+<div>
+  <div data-testid="loaded-data">{loaded.value}</div>
+  <div data-testid="spy-data">{String(data)}</div>
+</div>

code/renderers/svelte/src/__test__/composeStories/StoryWithLocaleComponent.svelte

@@ -0,0 +1,11 @@
+<script>
+  import Button from './Button.svelte';
+  
+  export let locale;
+  export let label;
+</script>
+
+<div>
+  <p>locale: {locale}</p>
+  <Button label={label} />
+</div>