Merge pull request #15 from DaleStudy/story-testing

스토리북 테스팅 셋업

.github/workflows/automation.yml

@@ -0,0 +1,13 @@
+name: Automation 🤖
+
+on:
+  pull_request_target:
+    types: [opened, reopened]
+
+jobs:
+  assign-author:
+    runs-on: ubuntu-latest
+    permissions:
+      pull-requests: write
+    steps:
+      - uses: toshimaru/auto-author-assign@v2.1.1

.github/workflows/integration.yml

@@ -0,0 +1,15 @@
+name: Integration 🔀
+
+on:
+  pull_request:
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: oven-sh/setup-bun@v2
+      - run: bun install
+      - run: bun run lint
+      - run: bun run test run
+      - run: bun run build

README.md

@@ -1,4 +1,5 @@
 [![Chromatic 🎨](https://github.com/DaleStudy/dale-ui/actions/workflows/chromatic.yml/badge.svg)](https://github.com/DaleStudy/dale-ui/actions/workflows/chromatic.yml)
+[![Integration 🔀](https://github.com/DaleStudy/dale-ui/actions/workflows/integration.yml/badge.svg)](https://github.com/DaleStudy/dale-ui/actions/workflows/integration.yml)
 
 # 달레 UI
 

chromatic.config.json

@@ -0,0 +1,5 @@
+{
+  "onlyChanged": true,
+  "projectId": "Project:675790d317ba346348aa3490",
+  "zip": true
+}

eslint.config.js

@@ -1,28 +1,28 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
-import tseslint from 'typescript-eslint'
+import js from "@eslint/js";
+import globals from "globals";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import tseslint from "typescript-eslint";
 
 export default tseslint.config(
-  { ignores: ['dist'] },
+  { ignores: ["dist", "styled-system"] },
   {
     extends: [js.configs.recommended, ...tseslint.configs.recommended],
-    files: ['**/*.{ts,tsx}'],
+    files: ["**/*.{ts,tsx}"],
     languageOptions: {
       ecmaVersion: 2020,
       globals: globals.browser,
     },
     plugins: {
-      'react-hooks': reactHooks,
-      'react-refresh': reactRefresh,
+      "react-hooks": reactHooks,
+      "react-refresh": reactRefresh,
     },
     rules: {
       ...reactHooks.configs.recommended.rules,
-      'react-refresh/only-export-components': [
-        'warn',
+      "react-refresh/only-export-components": [
+        "warn",
         { allowConstantExport: true },
       ],
     },
-  },
-)
+  }
+);

package.json

@@ -9,8 +9,10 @@
     "lint": "eslint .",
     "test": "vitest",
     "preview": "vite preview",
+    "sb": "storybook dev -p 6006",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
+    "test-storybook": "test-storybook",
     "prepare": "panda codegen"
   },
   "dependencies": {
@@ -29,6 +31,7 @@
     "@storybook/react": "^8.4.6",
     "@storybook/react-vite": "^8.4.6",
     "@storybook/test": "^8.4.6",
+    "@storybook/test-runner": "^0.20.1",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",

src/components/Button/Button.stories.ts

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { fn } from "@storybook/test";
+import { expect, fn, userEvent } from "@storybook/test";
 import { Button } from "./Button";
 
 const meta = {
@@ -19,6 +19,18 @@ export const Basic: Story = {
     type: "button",
     children: "Click",
   },
+  play: async ({ args: { onClick }, canvas, step }) => {
+    const button = canvas.getByRole("button");
+
+    await step("renders a button with text", async () => {
+      expect(button).toHaveTextContent("Click");
+    });
+
+    await step("calls onClick handler when clicked", async () => {
+      await userEvent.click(button);
+      expect(onClick).toHaveBeenCalledTimes(1);
+    });
+  },
 };
 
 export const Submit: Story = {