refactor: move the test closer to the component

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.');
+    }
+  });
+});

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> & {

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> & {

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();
+  });
+});

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> & {