feat: add storybook stories

Author: N-Laboratory

src/pages/formInline.stories.ts

@@ -0,0 +1,76 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { expect, userEvent, within } from '@storybook/test'
+import FormInline from './formInline.vue'
+
+type Story = StoryObj<typeof FormInline>
+
+const meta: Meta<typeof FormInline> = {
+  title: 'FormInline',
+}
+export default meta
+
+export const Default: Story = {
+  render: () => ({
+    components: { FormInline },
+    template: '<FormInline />',
+  }),
+}
+
+export const EmptyForm: Story = {
+  render: () => ({
+    components: { FormInline },
+    template: '<FormInline />',
+  }),
+  play: async ({ canvasElement }) => {
+    // Arrange
+    const canvas = within(canvasElement)
+
+    // Act
+    await userEvent.type(canvas.getByPlaceholderText('email'), '{tab}')
+    await userEvent.type(canvas.getByPlaceholderText('password'), '{tab}')
+
+    // Assert
+    expect(await canvas.findByText('emailは必須項目です')).toBeInTheDocument()
+    expect(await canvas.findByText('passwordは必須項目です')).toBeInTheDocument()
+    const isDisabled = (await canvas.findByRole('button') as HTMLButtonElement).disabled
+    expect(isDisabled).toBe(true)
+  },
+}
+
+export const InvalidEmailForm: Story = {
+  render: () => ({
+    components: { FormInline },
+    template: '<FormInline />',
+  }),
+  play: async ({ canvasElement }) => {
+    // Arrange
+    const canvas = within(canvasElement)
+
+    // Act
+    await userEvent.type(canvas.getByPlaceholderText('email'), 'test{tab}')
+
+    // Assert
+    expect(await canvas.findByText('emailは有効なメールアドレスではありません')).toBeInTheDocument()
+    const isDisabled = (await canvas.findByRole('button') as HTMLButtonElement).disabled
+    expect(isDisabled).toBe(true)
+  },
+}
+
+export const FullForm: Story = {
+  render: () => ({
+    components: { FormInline },
+    template: '<FormInline />',
+  }),
+  play: async ({ canvasElement }) => {
+    // Arrange
+    const canvas = within(canvasElement)
+
+    // Act
+    await userEvent.type(canvas.getByPlaceholderText('email'), 'test@test.com')
+    await userEvent.type(canvas.getByPlaceholderText('password'), 'test')
+
+    // Assert
+    const isDisabled = (await canvas.findByRole('button') as HTMLButtonElement).disabled
+    expect(isDisabled).toBe(false)
+  },
+}

src/pages/formScript.stories.ts

@@ -0,0 +1,82 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { expect, userEvent, waitFor, within } from '@storybook/test'
+import FormScript from './formScript.vue'
+
+type Story = StoryObj<typeof FormScript>
+
+const meta: Meta<typeof FormScript> = {
+  title: 'FormScript',
+}
+export default meta
+
+export const Default: Story = {
+  render: () => ({
+    components: { FormScript },
+    template: '<FormScript />',
+  }),
+}
+
+export const EmptyForm: Story = {
+  render: () => ({
+    components: { FormScript },
+    template: '<FormScript />',
+  }),
+  play: async ({ canvasElement }) => {
+    // Arrange
+    const canvas = within(canvasElement)
+    const email = canvas.getByPlaceholderText('email')
+    const password = canvas.getByPlaceholderText('password')
+
+    // Act
+    await userEvent.type(email, 'test')
+    await userEvent.clear(email)
+    await userEvent.type(password, 'test')
+    await userEvent.clear(password)
+
+    // Assert
+    expect(await canvas.findByText('emailは必須項目です')).toBeInTheDocument()
+    expect(await canvas.findByText('passwordは必須項目です')).toBeInTheDocument()
+    const isDisabled = (await canvas.findByRole('button') as HTMLButtonElement).disabled
+    expect(isDisabled).toBe(true)
+  },
+}
+
+export const InvalidEmailForm: Story = {
+  render: () => ({
+    components: { FormScript },
+    template: '<FormScript />',
+  }),
+  play: async ({ canvasElement }) => {
+    // Arrange
+    const canvas = within(canvasElement)
+
+    // Act
+    await userEvent.type(canvas.getByPlaceholderText('email'), 'test')
+
+    // Assert
+    expect(await canvas.findByText('emailは有効なメールアドレスではありません')).toBeInTheDocument()
+    const isDisabled = (await canvas.findByRole('button') as HTMLButtonElement).disabled
+    expect(isDisabled).toBe(true)
+  },
+}
+
+export const FullForm: Story = {
+  render: () => ({
+    components: { FormScript },
+    template: '<FormScript />',
+  }),
+  play: async ({ canvasElement }) => {
+    // Arrange
+    const canvas = within(canvasElement)
+
+    // Act
+    await userEvent.type(canvas.getByPlaceholderText('email'), 'test@test.com')
+    await userEvent.type(canvas.getByPlaceholderText('password'), 'test')
+
+    await waitFor(async () => {
+      // Assert
+      const isDisabled = (await canvas.findByRole('button') as HTMLButtonElement).disabled
+      expect(isDisabled).toBe(false)
+    })
+  },
+}

src/pages/index.stories.ts

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { http, HttpResponse } from 'msw'
+import { within, userEvent, expect } from '@storybook/test'
+import Index from './index.vue'
+
+type Story = StoryObj<typeof Index>
+
+const meta: Meta<typeof Index> = {
+  title: 'Index',
+}
+export default meta
+
+export const Default: Story = {
+  render: () => ({
+    components: { Index },
+    template: '<Index />',
+  }),
+}
+
+export const GetUuid: Story = {
+  render: () => ({
+    components: { Index },
+    template: '<Index />',
+  }),
+  parameters: {
+    msw: {
+      handlers: [
+        http.get('https://httpbin.org/uuid', () => {
+          return HttpResponse.json({
+            uuid: 'test uuid',
+          })
+        }),
+      ],
+    },
+  },
+  play: async ({ canvasElement }) => {
+    // Arrange
+    const canvas = within(canvasElement)
+
+    // Act
+    await userEvent.click(await canvas.findByText('Get uuid'))
+
+    // Assert
+    await expect(await canvas.findByText('UUID = test uuid')).toBeInTheDocument()
+  },
+}

src/pages/myPage.stories.ts

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import MyPage from './myPage.vue'
+import { useUserStore } from '~/store/user'
+
+type Story = StoryObj<typeof MyPage>
+
+const meta: Meta<typeof MyPage> = {
+  title: 'MyPage',
+}
+export default meta
+
+export const Default: Story = {
+  render: () => ({
+    setup() {
+      const store = useUserStore()
+      store.user.email = 'foo@bar.com'
+      store.user.password = 'foobar'
+    },
+    components: { MyPage },
+    template: '<MyPage />',
+  }),
+}