refactor: test code describe name

src/components/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/Checkbox/checkbox.test.tsx

@@ -2,7 +2,7 @@ import '@testing-library/jest-dom';
 import React from 'react';
 import { describe, expect, it } from 'vitest';
 
-import { Checkbox, Label } from '../../';
+import { Checkbox, Label } from '../..';
 import { fireEvent, render, screen } from '../../libs/test';
 
 describe('Checkbox', () => {

src/components/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/Dialog/dialog.test.tsx

@@ -16,7 +16,7 @@ import {
   InputDesc,
   InputGroup,
   Label,
-} from '../../';
+} from '../..';
 import { fireEvent, render, screen } from '../../libs/test';
 
 describe('Dialog', () => {

src/components/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('Dropdown', () => {
+  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();
+  });
+});

src/components/Dropdown/dropdown.test.tsx

@@ -10,7 +10,7 @@ import {
   DropdownLabel,
   DropdownShortcut,
   DropdownToggle,
-} from '../';
+} from '..';
 import { fireEvent, render, screen } from '../../libs/test';
 
 describe('Dropdown', () => {

src/components/Input/Input.test.tsx

@@ -0,0 +1,24 @@
+import '@testing-library/jest-dom';
+import React from 'react';
+import { expect, it } from 'vitest';
+
+import { Input, InputGroup, Label } from '../..';
+import { fireEvent, render, screen } from '../../libs/test';
+
+describe('Input', () => {
+  it('Fill out the Input', async () => {
+    render(
+      <InputGroup>
+        <Label htmlFor="email">Email</Label>
+        <Input id="email" type="email" placeholder="email" />
+      </InputGroup>,
+      {},
+    );
+    const emailValue = '[email protected]';
+    const emailInput = screen.getByLabelText(/email/i);
+
+    fireEvent.change(emailInput, { target: { value: emailValue } });
+
+    expect(emailInput).toHaveValue(emailValue);
+  });
+});

src/components/Select/Select.test.tsx

@@ -0,0 +1,111 @@
+import '@testing-library/jest-dom';
+import React from 'react';
+import { describe, expect, it } from 'vitest';
+
+import { Select, SelectContent, SelectDivider, SelectItem, SelectLabel, SelectToggle } from '..';
+import { fireEvent, render, screen } from '../../libs/test';
+
+const items = [
+  {
+    label: 'Cat',
+    value: 'cat',
+  },
+  {
+    label: 'Dog',
+    value: 'dog',
+  },
+  {
+    label: 'Fox',
+    value: 'fox',
+  },
+  {
+    label: 'Nilgai',
+    value: 'nilgai',
+  },
+  {
+    label: 'Numbird',
+    value: 'nunbird',
+    disabled: true,
+  },
+];
+
+describe('Select', () => {
+  it('Should appear SelectContent when click SelectToggle', () => {
+    render(
+      <Select align="start">
+        <SelectToggle>SelectToggle</SelectToggle>
+        <SelectContent width={'15rem'}>
+          <SelectLabel>Animals</SelectLabel>
+          <SelectDivider />
+          {items.map(item => (
+            <SelectItem key={item.value} value={item.value} disabled={item.disabled}>
+              {item.label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>,
+    );
+
+    const toggleBtn = screen.getByText('SelectToggle');
+    expect(toggleBtn).toBeInTheDocument();
+
+    // open Select content
+    fireEvent.click(toggleBtn);
+
+    const selectLabel = screen.getByText('Animals');
+    expect(selectLabel).toBeInTheDocument();
+
+    // test whole items.
+    items.forEach(item => {
+      const itemLI = screen.getByText(item.label);
+      expect(itemLI).toBeInTheDocument();
+
+      if (item.disabled == true) {
+        expect(itemLI).toHaveAttribute('disabled');
+      } else expect(itemLI).not.toBeDisabled();
+    });
+
+    // when click item, select content should be closed.
+    fireEvent.click(screen.getByText(items[0].label));
+    expect(selectLabel).not.toBeInTheDocument();
+  });
+
+  it('Multiple Select', () => {
+    render(
+      <Select multi align="center">
+        <SelectToggle>SelectToggle</SelectToggle>
+        <SelectContent width={'15rem'}>
+          <SelectLabel>Animals</SelectLabel>
+          <SelectDivider />
+          {items.map(item => (
+            <SelectItem key={item.value} value={item.value} disabled={item.disabled}>
+              {item.label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>,
+    );
+
+    const toggleBtn = screen.getByText('SelectToggle');
+    expect(toggleBtn).toBeInTheDocument();
+
+    items.forEach(item => {
+      if (item.disabled) return;
+
+      // open Select content
+      fireEvent.click(toggleBtn);
+
+      const itemLI = screen.getByRole('option', { name: item.label });
+      expect(itemLI).toBeInTheDocument();
+
+      // select item (and close Select content)
+      fireEvent.click(itemLI);
+      // reopen Select content
+      fireEvent.click(toggleBtn);
+
+      // Is Selected?
+      const itemLI2 = screen.getByRole('option', { name: item.label });
+      expect(itemLI2).toHaveAttribute('aria-selected', 'true');
+    });
+  });
+});

src/components/Select/select.test.tsx

@@ -2,7 +2,7 @@ import '@testing-library/jest-dom';
 import React from 'react';
 import { describe, expect, it } from 'vitest';
 
-import { Select, SelectContent, SelectDivider, SelectItem, SelectLabel, SelectToggle } from '../';
+import { Select, SelectContent, SelectDivider, SelectItem, SelectLabel, SelectToggle } from '..';
 import { fireEvent, render, screen } from '../../libs/test';
 
 const items = [
@@ -29,7 +29,7 @@ const items = [
   },
 ];
 
-describe('UI test', () => {
+describe('Select', () => {
   it('Should appear SelectContent when click SelectToggle', () => {
     render(
       <Select align="start">