From f5a108db6e4fa622324c348da6337a6fc1a64109 Mon Sep 17 00:00:00 2001
From: Ye-Chan Kang <kyechan99@gmail.com>
Date: Sat, 2 Mar 2024 03:44:45 +0900
Subject: [PATCH] refactor: move the test closer to the component

---
 src/__tests__/ui.test.tsx                     | 216 ------------------
 .../common/Checkbox/checkbox.test.tsx         |  50 ++++
 src/components/common/Dialog/DialogClose.tsx  |   2 +-
 src/components/common/Dialog/DialogToggle.tsx |   2 +-
 src/components/common/Dialog/dialog.test.tsx  |  86 +++++++
 .../common/Dropdown/DropdownToggle.tsx        |   2 +-
 .../common/Dropdown/dropdown.test.tsx         |  50 ++++
 src/components/common/Form/form.test.tsx      |  52 +++++
 src/components/common/Select/SelectToggle.tsx |   2 +-
 src/{__tests__ => tests}/lib.test.tsx         |   0
 tsconfig.json                                 |   4 +-
 vite.config.ts                                |   2 +-
 12 files changed, 245 insertions(+), 223 deletions(-)
 delete mode 100644 src/__tests__/ui.test.tsx
 create mode 100644 src/components/common/Checkbox/checkbox.test.tsx
 create mode 100644 src/components/common/Dialog/dialog.test.tsx
 create mode 100644 src/components/common/Dropdown/dropdown.test.tsx
 create mode 100644 src/components/common/Form/form.test.tsx
 rename src/{__tests__ => tests}/lib.test.tsx (100%)

diff --git a/src/__tests__/ui.test.tsx b/src/__tests__/ui.test.tsx
deleted file mode 100644
index 702f5b8..0000000
--- a/src/__tests__/ui.test.tsx
+++ /dev/null
@@ -1,216 +0,0 @@
-import '@testing-library/jest-dom';
-import React from 'react';
-import { Route } from 'react-router-dom';
-import { describe, expect, it, vi } from 'vitest';
-
-import {
-  Button,
-  Checkbox,
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogToggle,
-  Dropdown,
-  DropdownContent,
-  DropdownDivider,
-  DropdownItem,
-  DropdownLabel,
-  DropdownShortcut,
-  DropdownToggle,
-  Form,
-  Input,
-  InputDesc,
-  InputGroup,
-  Label,
-  Textarea,
-} from '../';
-import { MockRouter, fireEvent, render, screen, waitFor } from '../libs/test';
-
-describe('UI test', () => {
-  it('Fill out the Input and Textarea and submit the Form', async () => {
-    const handleSubmitFn = vi.fn().mockImplementation(e => e.preventDefault());
-
-    render(
-      <MockRouter initialPath="/">
-        <Route
-          path="/"
-          element={
-            <Form redirect="submitsuccess" id="form" onSubmit={handleSubmitFn}>
-              <InputGroup>
-                <Label htmlFor="email">Email</Label>
-                <Input id="email" type="email" placeholder="email" />
-              </InputGroup>
-              <InputGroup>
-                <Label htmlFor="bio">Bio</Label>
-                <Textarea id="bio" placeholder="bio" />
-                <InputDesc>You can @mention other users to link to them.</InputDesc>
-              </InputGroup>
-              <Button type="submit" variant="primary" size="lg">
-                Save
-              </Button>
-            </Form>
-          }
-        />
-        <Route path="/submitsuccess" element={<p>Success</p>} />
-      </MockRouter>,
-      {},
-    );
-
-    const emailInput = screen.getByLabelText(/email/i);
-    const bioTextarea = screen.getByLabelText(/bio/i);
-    const submitBtn = screen.getByText('Save');
-
-    fireEvent.change(emailInput, { target: { value: 'bandmator@bandmate.com' } });
-    fireEvent.change(bioTextarea, { target: { value: 'Hi, I am Bandmator' } });
-
-    fireEvent.click(submitBtn);
-
-    await waitFor(() => {
-      expect(handleSubmitFn).toHaveBeenCalledTimes(1);
-    });
-  });
-
-  it('Checkbox icon must be customizable and work when clicked.', () => {
-    render(
-      <div style={{ display: 'flex', gap: '1rem', alignItems: 'flex-start', lineHeight: '1' }}>
-        <Checkbox
-          id="checkbox-test"
-          role="checkbox-test"
-          iconEl={
-            <svg viewBox="0 0 24 24" role="checkbox-icon">
-              <path d="M5 12l5 5l08 -10"></path>
-            </svg>
-          }
-        />
-        <div>
-          <Label htmlFor="checkbox-with-text" style={{ marginLeft: '0px' }}>
-            Accept terms and conditions
-          </Label>
-          <p style={{ margin: '4px 0px', color: 'gray', fontSize: '0.875rem' }}>
-            You agree to our Terms of Service and Privacy Policy.
-          </p>
-        </div>
-      </div>,
-    );
-
-    const checkbox = screen.getByRole('checkbox-test');
-    expect(checkbox).toBeInTheDocument();
-
-    const checkIcon = document.querySelector('svg[role="checkbox-icon"]');
-    expect(checkIcon).toBeInTheDocument();
-
-    const styledEl = checkIcon?.parentElement;
-    expect(styledEl).toBeInTheDocument();
-
-    if (styledEl) {
-      const beforeBgStyle = styledEl.style.background;
-      fireEvent.click(checkbox);
-
-      expect(styledEl).not.toHaveStyle(`background: ${beforeBgStyle}`);
-    } else {
-      console.error('styledEl is null.');
-    }
-  });
-
-  it('Should appear DialogContent when click DialogToggle', () => {
-    render(
-      <Dialog>
-        <DialogToggle asChild>
-          <Button
-            variant="outline"
-            onClick={() => {
-              console.log('Event Compose');
-            }}
-          >
-            ToggleButton
-          </Button>
-        </DialogToggle>
-        <DialogContent maxWidth={500} outEvent>
-          <DialogHeader>
-            <DialogTitle>Create project</DialogTitle>
-            <DialogDescription>Great project names are short and memorable.</DialogDescription>
-          </DialogHeader>
-          <InputGroup style={{ margin: '2rem 0rem' }}>
-            <Label htmlFor="project">Project</Label>
-            <Input id="project" />
-            <InputDesc>You can @mention other users to link to them.</InputDesc>
-          </InputGroup>
-          <DialogFooter justify="space-between">
-            <DialogClose asChild>
-              <Button variant="secondary">Close</Button>
-            </DialogClose>
-            <DialogClose asChild>
-              <Button variant="primary">Create</Button>
-            </DialogClose>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>,
-    );
-
-    const toggleBtn = screen.getByText('ToggleButton');
-    expect(toggleBtn).toBeInTheDocument();
-
-    fireEvent.click(toggleBtn);
-
-    const projectLabel = screen.getByLabelText(/project/i);
-    expect(projectLabel).toBeInTheDocument();
-    fireEvent.change(projectLabel, { target: { value: 'blur blur' } });
-
-    const closeBtn = screen.getByText('Close');
-    expect(closeBtn).toBeInTheDocument();
-
-    fireEvent.click(closeBtn);
-
-    expect(projectLabel).not.toBeInTheDocument();
-
-    fireEvent.click(toggleBtn);
-
-    const dialogTitle = screen.getByText('Create project');
-    expect(dialogTitle).toBeInTheDocument();
-
-    const dialogBGs = document.getElementsByClassName('bmates-modal-bg');
-    expect(dialogBGs.length).toBe(1);
-
-    fireEvent.click(dialogBGs[0]);
-
-    expect(closeBtn).not.toBeInTheDocument();
-  });
-
-  it('Should appear DropdownContent when click DropdownToggle', () => {
-    render(
-      <Dropdown>
-        <DropdownToggle>DropdownToggle</DropdownToggle>
-        <DropdownContent width={'15rem'}>
-          <DropdownLabel>Share Social</DropdownLabel>
-          <DropdownDivider />
-          <DropdownItem>
-            GitHub
-            <DropdownShortcut>⌘+T</DropdownShortcut>
-          </DropdownItem>
-
-          <DropdownItem disabled>Facebook</DropdownItem>
-          <DropdownItem>Twitter</DropdownItem>
-        </DropdownContent>
-      </Dropdown>,
-    );
-
-    const toggleBtn = screen.getByText('DropdownToggle');
-    expect(toggleBtn).toBeInTheDocument();
-
-    fireEvent.click(toggleBtn);
-
-    const dropdownLabel = screen.getByText('Share Social');
-    expect(dropdownLabel).toBeInTheDocument();
-
-    const dropdownItem = screen.getByText('Twitter');
-    expect(dropdownItem).toBeInTheDocument();
-
-    fireEvent.click(dropdownItem);
-
-    expect(dropdownLabel).not.toBeInTheDocument();
-  });
-});
diff --git a/src/components/common/Checkbox/checkbox.test.tsx b/src/components/common/Checkbox/checkbox.test.tsx
new file mode 100644
index 0000000..7454e6b
--- /dev/null
+++ b/src/components/common/Checkbox/checkbox.test.tsx
@@ -0,0 +1,50 @@
+import '@testing-library/jest-dom';
+import React from 'react';
+import { describe, expect, it } from 'vitest';
+
+import { Checkbox, Label } from '../../';
+import { fireEvent, render, screen } from '../../../libs/test';
+
+describe('Checkbox', () => {
+  it('Checkbox icon must be customizable and work when clicked.', () => {
+    render(
+      <div style={{ display: 'flex', gap: '1rem', alignItems: 'flex-start', lineHeight: '1' }}>
+        <Checkbox
+          id="checkbox-test"
+          role="checkbox-test"
+          iconEl={
+            <svg viewBox="0 0 24 24" role="checkbox-icon">
+              <path d="M5 12l5 5l08 -10"></path>
+            </svg>
+          }
+        />
+        <div>
+          <Label htmlFor="checkbox-with-text" style={{ marginLeft: '0px' }}>
+            Accept terms and conditions
+          </Label>
+          <p style={{ margin: '4px 0px', color: 'gray', fontSize: '0.875rem' }}>
+            You agree to our Terms of Service and Privacy Policy.
+          </p>
+        </div>
+      </div>,
+    );
+
+    const checkbox = screen.getByRole('checkbox-test');
+    expect(checkbox).toBeInTheDocument();
+
+    const checkIcon = document.querySelector('svg[role="checkbox-icon"]');
+    expect(checkIcon).toBeInTheDocument();
+
+    const styledEl = checkIcon?.parentElement;
+    expect(styledEl).toBeInTheDocument();
+
+    if (styledEl) {
+      const beforeBgStyle = styledEl.style.background;
+      fireEvent.click(checkbox);
+
+      expect(styledEl).not.toHaveStyle(`background: ${beforeBgStyle}`);
+    } else {
+      console.error('styledEl is null.');
+    }
+  });
+});
diff --git a/src/components/common/Dialog/DialogClose.tsx b/src/components/common/Dialog/DialogClose.tsx
index edab7ae..f85be70 100644
--- a/src/components/common/Dialog/DialogClose.tsx
+++ b/src/components/common/Dialog/DialogClose.tsx
@@ -4,7 +4,7 @@ import Slot from '@/components/Slot';
 import useContext from '@/hooks/useContext';
 import { composeEventHandlers } from '@/libs/event';
 
-import { Button } from '..';
+import { Button } from '../Button';
 import DialogContext from './DialogContext';
 
 type ComponentPropsWithoutRef<E extends React.ElementType> = React.ComponentPropsWithoutRef<E> & {
diff --git a/src/components/common/Dialog/DialogToggle.tsx b/src/components/common/Dialog/DialogToggle.tsx
index bea10bb..655fd81 100644
--- a/src/components/common/Dialog/DialogToggle.tsx
+++ b/src/components/common/Dialog/DialogToggle.tsx
@@ -4,7 +4,7 @@ import Slot from '@/components/Slot';
 import useContext from '@/hooks/useContext';
 import { composeEventHandlers } from '@/libs/event';
 
-import { Button } from '..';
+import { Button } from '.';
 import DialogContext from './DialogContext';
 
 type ComponentPropsWithoutRef<E extends React.ElementType> = React.ComponentPropsWithoutRef<E> & {
diff --git a/src/components/common/Dialog/dialog.test.tsx b/src/components/common/Dialog/dialog.test.tsx
new file mode 100644
index 0000000..d7eff99
--- /dev/null
+++ b/src/components/common/Dialog/dialog.test.tsx
@@ -0,0 +1,86 @@
+import '@testing-library/jest-dom';
+import React from 'react';
+import { describe, expect, it } from 'vitest';
+
+import {
+  Button,
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogToggle,
+  Input,
+  InputDesc,
+  InputGroup,
+  Label,
+} from '../../';
+import { fireEvent, render, screen } from '../../../libs/test';
+
+describe('Dialog', () => {
+  it('Should appear DialogContent when click DialogToggle', () => {
+    render(
+      <Dialog>
+        <DialogToggle asChild>
+          <Button
+            variant="outline"
+            onClick={() => {
+              console.log('Event Compose');
+            }}
+          >
+            ToggleButton
+          </Button>
+        </DialogToggle>
+        <DialogContent maxWidth={500} outEvent>
+          <DialogHeader>
+            <DialogTitle>Create project</DialogTitle>
+            <DialogDescription>Great project names are short and memorable.</DialogDescription>
+          </DialogHeader>
+          <InputGroup style={{ margin: '2rem 0rem' }}>
+            <Label htmlFor="project">Project</Label>
+            <Input id="project" />
+            <InputDesc>You can @mention other users to link to them.</InputDesc>
+          </InputGroup>
+          <DialogFooter justify="space-between">
+            <DialogClose asChild>
+              <Button variant="secondary">Close</Button>
+            </DialogClose>
+            <DialogClose asChild>
+              <Button variant="primary">Create</Button>
+            </DialogClose>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>,
+    );
+
+    const toggleBtn = screen.getByText('ToggleButton');
+    expect(toggleBtn).toBeInTheDocument();
+
+    fireEvent.click(toggleBtn);
+
+    const projectLabel = screen.getByLabelText(/project/i);
+    expect(projectLabel).toBeInTheDocument();
+    fireEvent.change(projectLabel, { target: { value: 'blur blur' } });
+
+    const closeBtn = screen.getByText('Close');
+    expect(closeBtn).toBeInTheDocument();
+
+    fireEvent.click(closeBtn);
+
+    expect(projectLabel).not.toBeInTheDocument();
+
+    fireEvent.click(toggleBtn);
+
+    const dialogTitle = screen.getByText('Create project');
+    expect(dialogTitle).toBeInTheDocument();
+
+    const dialogBGs = document.getElementsByClassName('bmates-modal-bg');
+    expect(dialogBGs.length).toBe(1);
+
+    fireEvent.click(dialogBGs[0]);
+
+    expect(closeBtn).not.toBeInTheDocument();
+  });
+});
diff --git a/src/components/common/Dropdown/DropdownToggle.tsx b/src/components/common/Dropdown/DropdownToggle.tsx
index d2a1e6d..7a90356 100644
--- a/src/components/common/Dropdown/DropdownToggle.tsx
+++ b/src/components/common/Dropdown/DropdownToggle.tsx
@@ -5,7 +5,7 @@ import useContext from '@/hooks/useContext';
 import { composeEventHandlers } from '@/libs/event';
 import { composeRefs } from '@/libs/ref';
 
-import { Button } from '..';
+import { Button } from '../../';
 import DropdownContext from './DropdownContext';
 
 type ComponentPropsWithoutRef<E extends React.ElementType> = React.ComponentPropsWithoutRef<E> & {
diff --git a/src/components/common/Dropdown/dropdown.test.tsx b/src/components/common/Dropdown/dropdown.test.tsx
new file mode 100644
index 0000000..1b5e935
--- /dev/null
+++ b/src/components/common/Dropdown/dropdown.test.tsx
@@ -0,0 +1,50 @@
+import '@testing-library/jest-dom';
+import React from 'react';
+import { describe, expect, it } from 'vitest';
+
+import {
+  Dropdown,
+  DropdownContent,
+  DropdownDivider,
+  DropdownItem,
+  DropdownLabel,
+  DropdownShortcut,
+  DropdownToggle,
+} from '../../..';
+import { fireEvent, render, screen } from '../../../libs/test';
+
+describe('UI test', () => {
+  it('Should appear DropdownContent when click DropdownToggle', () => {
+    render(
+      <Dropdown>
+        <DropdownToggle>DropdownToggle</DropdownToggle>
+        <DropdownContent width={'15rem'}>
+          <DropdownLabel>Share Social</DropdownLabel>
+          <DropdownDivider />
+          <DropdownItem>
+            GitHub
+            <DropdownShortcut>⌘+T</DropdownShortcut>
+          </DropdownItem>
+
+          <DropdownItem disabled>Facebook</DropdownItem>
+          <DropdownItem>Twitter</DropdownItem>
+        </DropdownContent>
+      </Dropdown>,
+    );
+
+    const toggleBtn = screen.getByText('DropdownToggle');
+    expect(toggleBtn).toBeInTheDocument();
+
+    fireEvent.click(toggleBtn);
+
+    const dropdownLabel = screen.getByText('Share Social');
+    expect(dropdownLabel).toBeInTheDocument();
+
+    const dropdownItem = screen.getByText('Twitter');
+    expect(dropdownItem).toBeInTheDocument();
+
+    fireEvent.click(dropdownItem);
+
+    expect(dropdownLabel).not.toBeInTheDocument();
+  });
+});
diff --git a/src/components/common/Form/form.test.tsx b/src/components/common/Form/form.test.tsx
new file mode 100644
index 0000000..7e11361
--- /dev/null
+++ b/src/components/common/Form/form.test.tsx
@@ -0,0 +1,52 @@
+import '@testing-library/jest-dom';
+import React from 'react';
+import { Route } from 'react-router-dom';
+import { expect, it, vi } from 'vitest';
+
+import { Button, Form, Input, InputDesc, InputGroup, Label, Textarea } from '../../';
+import { MockRouter, fireEvent, render, screen, waitFor } from '../../../libs/test';
+
+describe('Form', () => {
+  it('Fill out the Input and Textarea and submit the Form', async () => {
+    const handleSubmitFn = vi.fn().mockImplementation(e => e.preventDefault());
+
+    render(
+      <MockRouter initialPath="/">
+        <Route
+          path="/"
+          element={
+            <Form redirect="submitsuccess" id="form" onSubmit={handleSubmitFn}>
+              <InputGroup>
+                <Label htmlFor="email">Email</Label>
+                <Input id="email" type="email" placeholder="email" />
+              </InputGroup>
+              <InputGroup>
+                <Label htmlFor="bio">Bio</Label>
+                <Textarea id="bio" placeholder="bio" />
+                <InputDesc>You can @mention other users to link to them.</InputDesc>
+              </InputGroup>
+              <Button type="submit" variant="primary" size="lg">
+                Save
+              </Button>
+            </Form>
+          }
+        />
+        <Route path="/submitsuccess" element={<p>Success</p>} />
+      </MockRouter>,
+      {},
+    );
+
+    const emailInput = screen.getByLabelText(/email/i);
+    const bioTextarea = screen.getByLabelText(/bio/i);
+    const submitBtn = screen.getByText('Save');
+
+    fireEvent.change(emailInput, { target: { value: 'bandmator@bandmate.com' } });
+    fireEvent.change(bioTextarea, { target: { value: 'Hi, I am Bandmator' } });
+
+    fireEvent.click(submitBtn);
+
+    await waitFor(() => {
+      expect(handleSubmitFn).toHaveBeenCalledTimes(1);
+    });
+  });
+});
diff --git a/src/components/common/Select/SelectToggle.tsx b/src/components/common/Select/SelectToggle.tsx
index 276be40..1d5e7fe 100644
--- a/src/components/common/Select/SelectToggle.tsx
+++ b/src/components/common/Select/SelectToggle.tsx
@@ -6,7 +6,7 @@ import useContext from '@/hooks/useContext';
 import { composeEventHandlers } from '@/libs/event';
 import { composeRefs } from '@/libs/ref';
 
-import { Button } from '..';
+import { Button } from '../../';
 import SelectContext from './SelectContext';
 
 type ComponentPropsWithoutRef<E extends React.ElementType> = React.ComponentPropsWithoutRef<E> & {
diff --git a/src/__tests__/lib.test.tsx b/src/tests/lib.test.tsx
similarity index 100%
rename from src/__tests__/lib.test.tsx
rename to src/tests/lib.test.tsx
diff --git a/tsconfig.json b/tsconfig.json
index 88fdb8f..ff0aeca 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -23,9 +23,9 @@
     "baseUrl": ".",
     "paths": {
       "@/*": ["./src/*"]
-    }, 
+    }
   },
-  "include": ["src"],
+  "include": ["src", "index.ts"],
   "exclude": ["**/*.test.*", "**/*.stories.*", "**/*.mdx", "src/libs/test.tsx"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }
diff --git a/vite.config.ts b/vite.config.ts
index 110a769..ea5fa0d 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -14,7 +14,7 @@ export default defineConfig({
     globals: true,
     environment: 'jsdom',
     setupFiles: 'src/setupTests.js',
-    include: ['src/__tests__/*.{test,spec}.?(c|m)[jt]s?(x)'],
+    include: ['src/**/*.{test,spec}.?(c|m)[jt]s?(x)'],
     coverage: {
       reporter: ['text', 'json-summary', 'json'],
       reportOnFailure: true,