Fix tests

code/renderers/vue3/src/__tests__/Button.vue

@@ -1,58 +1,16 @@
-<template>
-  <button
-    type="button"
-    :class="classes"
-    :style="style"
-    @change="emit('myChangeEvent', 0)"
-    @click="emit('myClickEvent', 0)"
-  >
-    {{ label }}
-  </button>
-</template>
-
-<script lang="ts" setup>
-import './button.css';
-import { computed } from 'vue';
-
-const props = withDefaults(
-  defineProps<{
-    /**
-     * The label of the button
-     */
-    label: string;
-    /**
-     * Whether the button is disabled
-     */
-    disabled: boolean;
-    /**
-     * primary or secondary button
-     */
-    primary?: boolean;
-    /**
-     * size of the button
-     */
-    size?: 'small' | 'medium' | 'large';
-    /**
-     * background color of the button
-     */
-    backgroundColor?: string;
-  }>(),
-  { primary: false }
-);
+<script setup lang="ts">
+defineProps<{ disabled: boolean; label: string }>();
 
 const emit = defineEmits<{
   (e: 'myChangeEvent', id: number): void;
   (e: 'myClickEvent', id: number): void;
 }>();
+</script>
 
-const classes = computed(() => ({
-  'storybook-button': true,
-  'storybook-button--primary': props.primary,
-  'storybook-button--secondary': !props.primary,
-  [`storybook-button--${props.size || 'medium'}`]: true,
-}));
+<template>
+  <button :disabled="disabled" @change="emit('myChangeEvent', 0)" @click="emit('myClickEvent', 0)">
+    {{ label }}
+  </button>
+</template>
 
-const style = computed(() => ({
-  backgroundColor: props.backgroundColor,
-}));
-</script>
+<style scoped></style>

code/renderers/vue3/src/__tests__/Button.stories.ts → code/renderers/vue3/src/__tests__/composeStories/Button.stories.ts

@@ -1,5 +1,5 @@
 import { userEvent, within } from '@storybook/testing-library';
-import type { Meta, StoryFn as CSF2Story, StoryObj } from '..';
+import type { Meta, StoryFn as CSF2Story, StoryObj } from '../..';
 
 import Button from './Button.vue';
 
@@ -53,6 +53,7 @@ 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 } };
   },

code/renderers/vue3/src/__tests__/composeStories/Button.vue

@@ -0,0 +1,46 @@
+<template>
+  <button type="button" :class="classes" :style="style" @click="emit('myClickEvent', 0)">
+    {{ label }}
+  </button>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+
+const props = withDefaults(
+  defineProps<{
+    /**
+     * The label of the button
+     */
+    label: string;
+    /**
+     * primary or secondary button
+     */
+    primary?: boolean;
+    /**
+     * size of the button
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * background color of the button
+     */
+    backgroundColor?: string;
+  }>(),
+  { primary: false }
+);
+
+const emit = defineEmits<{
+  (e: 'myClickEvent', id: number): void;
+}>();
+
+const classes = computed(() => ({
+  'storybook-button': true,
+  'storybook-button--primary': props.primary,
+  'storybook-button--secondary': !props.primary,
+  [`storybook-button--${props.size || 'medium'}`]: true,
+}));
+
+const style = computed(() => ({
+  backgroundColor: props.backgroundColor,
+}));
+</script>

code/renderers/vue3/src/__tests__/composeStories.test.ts → code/renderers/vue3/src/__tests__/composeStories/composeStories.test.ts

@@ -5,7 +5,7 @@ import { expectTypeOf } from 'expect-type';
 import type { Meta } from '@storybook/vue3';
 import * as stories from './Button.stories';
 import type Button from './Button.vue';
-import { composeStories, composeStory, setProjectAnnotations } from '../testing-api';
+import { composeStories, composeStory, setProjectAnnotations } from '../../testing-api';
 
 // example with composeStories, returns an object with all stories composed with args/decorators
 const { CSF3Primary } = composeStories(stories);
@@ -25,12 +25,12 @@ it('reuses args from composed story', () => {
   expect(buttonElement.textContent).toEqual(Secondary.args.label);
 });
 
-it('onclick handler is called', async () => {
-  const onClickSpy = vi.fn();
-  render(Secondary({ onClick: onClickSpy }));
+it('myClickEvent handler is called', async () => {
+  const myClickEventSpy = vi.fn();
+  render(Secondary({ onMyClickEvent: myClickEventSpy }));
   const buttonElement = screen.getByRole('button');
   buttonElement.click();
-  expect(onClickSpy).toHaveBeenCalled();
+  expect(myClickEventSpy).toHaveBeenCalled();
 });
 
 it('reuses args from composeStories', () => {

code/renderers/vue3/src/__tests__/internals.test.tsx → code/renderers/vue3/src/__tests__/composeStories/internals.test.tsx

@@ -3,7 +3,7 @@ import { addons } from '@storybook/preview-api';
 import { render, screen } from '@testing-library/vue';
 import { describe, it, expect } from 'vitest';
 
-import { composeStories, composeStory } from '../testing-api';
+import { composeStories, composeStory } from '../../testing-api';
 
 import * as stories from './Button.stories';