コンポーネントのStoryの調整・不足分の追加 (VOICEVOX#2333)

Co-authored-by: Hiroshiba Kazuyuki <[email protected]>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Hiroshiba <[email protected]>

.storybook/preview.ts

@@ -53,6 +53,11 @@ const preview: Preview = {
           value: "#333",
         },
       ],
+      grid: {
+        cellSize: 8,
+        cellAmount: 4,
+        opacity: 0.1,
+      },
     },
   },
   decorators: [

src/components/Base/BaseCheckbox.stories.ts

@@ -1,23 +1,30 @@
 import type { Meta, StoryObj } from "@storybook/vue3";
 
+import { ref } from "vue";
 import BaseCheckbox from "./BaseCheckbox.vue";
 
 const meta: Meta<typeof BaseCheckbox> = {
   component: BaseCheckbox,
+  render: (args) => ({
+    components: { BaseCheckbox },
+    setup() {
+      const checked = ref(Boolean(args.checked));
+      return { args, checked };
+    },
+    template: `<BaseCheckbox v-bind="args" v-model:checked="checked"></BaseCheckbox>`,
+  }),
 };
 
 export default meta;
 type Story = StoryObj<typeof BaseCheckbox>;
 
-export const Default: Story = {
+export const Unchecked: Story = {
   args: {
-    label: "Default",
-    checked: false,
+    label: "Unchecked",
   },
 };
 
 export const Checked: Story = {
-  ...Default,
   args: {
     label: "Checked",
     checked: true,

src/components/Base/BaseSelect.stories.ts

@@ -0,0 +1,46 @@
+import { ref } from "vue";
+import type { Meta, StoryObj } from "@storybook/vue3";
+
+import BaseSelect from "./BaseSelect.vue";
+import BaseSelectItem from "./BaseSelectItem.vue";
+
+const meta: Meta<typeof BaseSelect> = {
+  component: BaseSelect,
+  render: (args) => ({
+    components: { BaseSelect, BaseSelectItem },
+    setup() {
+      const modelValue = ref(
+        args.modelValue ? String(args.modelValue) : undefined,
+      );
+      return { args, modelValue };
+    },
+    template: `
+      <BaseSelect v-bind="args" v-model="modelValue">
+        <BaseSelectItem label="A" value="a" />
+        <BaseSelectItem label="B" value="b" />
+        <BaseSelectItem label="C" value="c" />
+      </BaseSelect>`,
+  }),
+};
+
+export default meta;
+type Story = StoryObj<typeof BaseSelect>;
+
+export const Default: Story = {
+  args: {
+    modelValue: "a",
+  },
+};
+
+export const Placeholder: Story = {
+  args: {
+    placeholder: "placeholder",
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    modelValue: "a",
+    disabled: true,
+  },
+};

src/components/Base/BaseSwitch.stories.ts

@@ -1,9 +1,18 @@
 import type { Meta, StoryObj } from "@storybook/vue3";
 
+import { ref } from "vue";
 import BaseSwitch from "./BaseSwitch.vue";
 
 const meta: Meta<typeof BaseSwitch> = {
   component: BaseSwitch,
+  render: (args) => ({
+    components: { BaseSwitch },
+    setup() {
+      const checked = ref(Boolean(args.checked));
+      return { args, checked };
+    },
+    template: `<BaseSwitch v-bind="args" v-model:checked="checked"></BaseSwitch>`,
+  }),
 };
 
 export default meta;

src/components/Base/BaseTooltip.stories.ts

@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+
+import { TooltipProvider } from "radix-vue";
+import BaseTooltip from "./BaseTooltip.vue";
+
+const meta: Meta<typeof BaseTooltip> = {
+  component: BaseTooltip,
+  render: (args) => ({
+    components: { BaseTooltip, TooltipProvider },
+    setup() {
+      return { args };
+    },
+    template: `
+    <TooltipProvider>
+      <BaseTooltip v-bind="args">
+        <span>Hover</span>
+      </BaseTooltip>
+    </TooltipProvider>`,
+  }),
+};
+
+export default meta;
+type Story = StoryObj<typeof BaseTooltip>;
+
+export const Default: Story = {
+  args: {
+    label: "Default",
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    label: "Default",
+    disabled: true,
+  },
+};

src/components/Dialog/AcceptDialog/AcceptDialog.stories.ts

@@ -0,0 +1,65 @@
+import { userEvent, within, expect, fn } from "@storybook/test";
+
+import { Meta, StoryObj } from "@storybook/vue3";
+import AcceptDialog from "./AcceptDialog.vue";
+
+const meta: Meta<typeof AcceptDialog> = {
+  component: AcceptDialog,
+  args: {
+    modelValue: false,
+    title: "タイトル",
+    heading: "見出し",
+    terms: "# 見出し1\n文章文章文章\n## 見出し2\n文章文章文章",
+    rejectLabel: "拒否",
+    acceptLabel: "承諾",
+    "onUpdate:modelValue": fn(),
+    onAccept: fn(),
+    onReject: fn(),
+  },
+  tags: ["!autodocs"], // ダイアログ系はautodocsのプレビューが正しく表示されないので無効化
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Opened: Story = {
+  name: "開いている",
+  args: {
+    modelValue: true,
+  },
+};
+
+export const Accept: Story = {
+  name: "承諾ボタンを押す",
+  args: { ...Opened.args },
+  play: async ({ args }) => {
+    const canvas = within(document.body); // ダイアログなので例外的にdocument.bodyを使う
+
+    const button = canvas.getByRole("button", { name: /承諾/ });
+    await userEvent.click(button);
+
+    // 承諾イベントが呼ばれる
+    await expect(args["onAccept"]).toBeCalledWith();
+  },
+};
+
+export const Reject: Story = {
+  name: "拒否ボタンを押す",
+  args: {
+    ...Opened.args,
+  },
+  play: async ({ args }) => {
+    const canvas = within(document.body); // ダイアログなので例外的にdocument.bodyを使う
+
+    const button = canvas.getByRole("button", { name: /拒否/ });
+    await userEvent.click(button);
+
+    // 拒否イベントが呼ばれる
+    await expect(args["onReject"]).toBeCalledWith();
+  },
+};
+
+export const Closed: Story = {
+  name: "閉じている",
+  tags: ["skip-screenshot"],
+};