From f52e96f3ec236c0674fbff355b7b5fe55468399f Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Tue, 23 Jan 2024 16:43:40 +0100
Subject: [PATCH] Fix tests

---
 code/renderers/vue3/src/__tests__/Button.vue  | 60 +++----------------
 .../{ => composeStories}/Button.stories.ts    |  3 +-
 .../src/__tests__/composeStories/Button.vue   | 46 ++++++++++++++
 .../__snapshots__/internals.test.tsx.snap     |  0
 .../composeStories.test.ts                    | 10 ++--
 .../{ => composeStories}/internals.test.tsx   |  2 +-
 6 files changed, 63 insertions(+), 58 deletions(-)
 rename code/renderers/vue3/src/__tests__/{ => composeStories}/Button.stories.ts (96%)
 create mode 100644 code/renderers/vue3/src/__tests__/composeStories/Button.vue
 rename code/renderers/vue3/src/__tests__/{ => composeStories}/__snapshots__/internals.test.tsx.snap (100%)
 rename code/renderers/vue3/src/__tests__/{ => composeStories}/composeStories.test.ts (94%)
 rename code/renderers/vue3/src/__tests__/{ => composeStories}/internals.test.tsx (98%)

diff --git a/code/renderers/vue3/src/__tests__/Button.vue b/code/renderers/vue3/src/__tests__/Button.vue
index 5e09799f1a9d..322ac2c73921 100644
--- a/code/renderers/vue3/src/__tests__/Button.vue
+++ b/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>
diff --git a/code/renderers/vue3/src/__tests__/Button.stories.ts b/code/renderers/vue3/src/__tests__/composeStories/Button.stories.ts
similarity index 96%
rename from code/renderers/vue3/src/__tests__/Button.stories.ts
rename to code/renderers/vue3/src/__tests__/composeStories/Button.stories.ts
index 7473a4753b34..1b14978a9976 100644
--- a/code/renderers/vue3/src/__tests__/Button.stories.ts
+++ b/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 } };
   },
diff --git a/code/renderers/vue3/src/__tests__/composeStories/Button.vue b/code/renderers/vue3/src/__tests__/composeStories/Button.vue
new file mode 100644
index 000000000000..5cd9890c850b
--- /dev/null
+++ b/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>
diff --git a/code/renderers/vue3/src/__tests__/__snapshots__/internals.test.tsx.snap b/code/renderers/vue3/src/__tests__/composeStories/__snapshots__/internals.test.tsx.snap
similarity index 100%
rename from code/renderers/vue3/src/__tests__/__snapshots__/internals.test.tsx.snap
rename to code/renderers/vue3/src/__tests__/composeStories/__snapshots__/internals.test.tsx.snap
diff --git a/code/renderers/vue3/src/__tests__/composeStories.test.ts b/code/renderers/vue3/src/__tests__/composeStories/composeStories.test.ts
similarity index 94%
rename from code/renderers/vue3/src/__tests__/composeStories.test.ts
rename to code/renderers/vue3/src/__tests__/composeStories/composeStories.test.ts
index 026026b35d7e..cb2372a4c4e9 100644
--- a/code/renderers/vue3/src/__tests__/composeStories.test.ts
+++ b/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', () => {
diff --git a/code/renderers/vue3/src/__tests__/internals.test.tsx b/code/renderers/vue3/src/__tests__/composeStories/internals.test.tsx
similarity index 98%
rename from code/renderers/vue3/src/__tests__/internals.test.tsx
rename to code/renderers/vue3/src/__tests__/composeStories/internals.test.tsx
index e573f69ae048..3be07251c9c0 100644
--- a/code/renderers/vue3/src/__tests__/internals.test.tsx
+++ b/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';