test: switch, input, textarea, toast, toggle, tooltip

src/components/common/Checkbox/index.tsx

@@ -42,12 +42,13 @@ const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
     };
 
     return (
-      <CheckboxContainer align={align} disabled={disabled} className={className}>
+      <CheckboxContainer align={align} disabled={disabled} className={className} data-checked={chk}>
         <HiddenCheckbox
           ref={ref}
           id={id}
           type="checkbox"
           checked={chk}
+          data-checked={chk}
           onChange={composeEventHandlers(onChange, onChangeHandler)}
           disabled={disabled}
           {...props}
@@ -105,7 +106,7 @@ const StyledCheckbox = styled.div<{ checked: boolean; disabled: boolean }>`
 const Icon = styled.svg`
   fill: none;
   stroke: white;
-  strokewidth: 2px;
+  stroke-width: 2px;
 `;
 
 const HiddenCheckbox = styled.input`

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/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/common/Switch/index.tsx

@@ -57,14 +57,15 @@ export const Switch = React.forwardRef<HTMLInputElement, SwitchProps>(
     };
 
     return (
-      <SwitchContainer align={align} disabled={disabled} className={className}>
+      <SwitchContainer align={align} disabled={disabled} className={className} data-checked={chk}>
         <HiddenSwitch
           ref={ref}
           id={id}
           type="checkbox"
-          checked={chk}
           onChange={composeEventHandlers(onChange, onChangeHandler)}
           disabled={disabled}
+          defaultChecked={chk}
+          data-checked={chk}
           {...props}
         />
         <StyledSwitch variant={variant} checked={chk} size={size} disabled={disabled} />

src/components/common/Switch/switch.test.tsx

@@ -0,0 +1,42 @@
+import '@testing-library/jest-dom';
+import React from 'react';
+import { expect, it } from 'vitest';
+
+import { Switch } from '../..';
+import { fireEvent, render, screen } from '../../../libs/test';
+
+describe('Switch', () => {
+  it('Should be change checked value when click the Switch', async () => {
+    render(<Switch label="SwitchLabel" id="switch-with-child" />, {});
+
+    const label = screen.getByLabelText(/SwitchLabel/i);
+    expect(label).toBeInTheDocument();
+
+    const checkbox = screen.getByRole('checkbox');
+    expect(checkbox).toBeInTheDocument();
+
+    // un checked
+    expect(checkbox).not.toBeChecked();
+
+    fireEvent.click(label);
+
+    // checked
+    expect(checkbox).toBeChecked();
+  });
+
+  it('Should be no change when click the Disabled Switch', async () => {
+    render(<Switch label="SwitchLabel" disabled={true} />, {});
+
+    const label = screen.getByLabelText(/SwitchLabel/i);
+    expect(label).toBeInTheDocument();
+
+    const checkbox = screen.getByRole('checkbox');
+    expect(checkbox).toBeInTheDocument();
+
+    expect(checkbox).not.toBeChecked();
+
+    fireEvent.click(checkbox);
+
+    expect(checkbox).toBeDisabled();
+  });
+});

src/components/common/Textarea/textarea.test.tsx

@@ -0,0 +1,25 @@
+import '@testing-library/jest-dom';
+import React from 'react';
+import { expect, it } from 'vitest';
+
+import { InputDesc, InputGroup, Label, Textarea } from '../..';
+import { fireEvent, render, screen } from '../../../libs/test';
+
+describe('Textarea', () => {
+  it('Fill out the Textarea', async () => {
+    render(
+      <InputGroup>
+        <Label htmlFor="bio">Bio</Label>
+        <Textarea id="bio" placeholder="bio" />
+        <InputDesc>You can @mention other users to link to them.</InputDesc>
+      </InputGroup>,
+      {},
+    );
+    const bioMsgValue = 'Hi, I am Bandmator';
+    const bioTextarea = screen.getByLabelText(/bio/i);
+
+    fireEvent.change(bioTextarea, { target: { value: bioMsgValue } });
+
+    expect(bioTextarea).toHaveValue(bioMsgValue);
+  });
+});

src/components/common/Toast/toast.test.tsx

@@ -0,0 +1,77 @@
+import '@testing-library/jest-dom';
+import React from 'react';
+import { expect, it } from 'vitest';
+
+import { Button, Toaster, useToast } from '../..';
+import { fireEvent, render, screen, waitFor } from '../../../libs/test';
+import { ToastData } from './type';
+
+const ToastForTest = ({ ...props }: Omit<ToastData, 'toastId'>) => {
+  const { toast } = useToast();
+
+  return (
+    <>
+      <Button
+        onClick={() => {
+          toast({ ...props });
+        }}
+      >
+        ToastButton
+      </Button>
+    </>
+  );
+};
+
+describe('Toast', () => {
+  it('Fill out the Textarea', async () => {
+    const toastData = {
+      title: 'Toast Title',
+      description: `When you click Toast, containing 'data' 'action' is executed.`,
+      variant: 'primary',
+      time: 5000,
+      data: 'Hi',
+      action: (data: unknown) => {
+        const el = document.querySelector('#test-action');
+        if (el) {
+          el.className = data as string;
+        }
+      },
+    };
+    render(
+      <>
+        <ToastForTest {...toastData} />
+        <p id="test-action">test-action</p>
+        <Toaster />
+      </>,
+      {},
+    );
+
+    const toastBtn = screen.getByText('ToastButton');
+    expect(toastBtn).toBeInTheDocument();
+
+    fireEvent.click(toastBtn);
+
+    // show title
+    const title = screen.getByText(toastData.title);
+    expect(title).toBeInTheDocument();
+
+    // show description
+    const description = screen.getByText(toastData.description);
+    expect(description).toBeInTheDocument();
+
+    // work action with data
+    const testaction = screen.getByText('test-action');
+    expect(testaction).toBeInTheDocument();
+    expect(testaction.className).not.toBe(toastData.data);
+
+    fireEvent.click(description);
+
+    waitFor(() => {
+      // when click toast, it should be removed.
+      expect(title).not.toBeInTheDocument();
+
+      // work action with data
+      expect(testaction.className).toBe(toastData.data);
+    });
+  });
+});

src/components/common/Toggle/toggle.test.tsx

@@ -0,0 +1,19 @@
+import '@testing-library/jest-dom';
+import React from 'react';
+import { expect, it } from 'vitest';
+
+import { Toggle } from '../..';
+import { fireEvent, render, screen } from '../../../libs/test';
+
+describe('Toggle', () => {
+  it('Should be changed style', async () => {
+    render(<Toggle>Toggle</Toggle>, {});
+    const toggleBtn = screen.getByText('Toggle');
+
+    const beforeBG = toggleBtn.className;
+    fireEvent.click(toggleBtn);
+    const afterBG = toggleBtn.className;
+
+    expect(beforeBG).not.toBe(afterBG);
+  });
+});

src/components/common/Tooltip/tooltip.test.tsx

@@ -0,0 +1,56 @@
+import '@testing-library/jest-dom';
+import React from 'react';
+import { expect, it } from 'vitest';
+
+import { Button, Tooltip } from '../..';
+import { fireEvent, render, screen, waitFor } from '../../../libs/test';
+
+describe('Tooltip', () => {
+  it('Show Tooltip message when hover component', async () => {
+    const message = 'Tooltip Message';
+    render(
+      <Tooltip message={message}>
+        <Button>Tooltip</Button>
+      </Tooltip>,
+      {},
+    );
+
+    fireEvent.mouseOver(screen.getByText('Tooltip'));
+
+    await waitFor(() => expect(screen.getByText(message)));
+  });
+
+  it('Should changed Tooltip direction', async () => {
+    const messageLeft = 'Left Tooltip Message';
+    const messageBottm = 'Bottom Tooltip Message';
+    render(
+      <div>
+        <Tooltip message={messageLeft} direction="left">
+          <Button>TooltipLeft</Button>
+        </Tooltip>
+        <Tooltip message={messageBottm} direction="bottom">
+          <Button>TooltipBottom</Button>
+        </Tooltip>
+      </div>,
+      {},
+    );
+
+    let tooltipLeftClassName: string = '';
+    let tooltipBottomClassName: string = '';
+    fireEvent.mouseOver(screen.getByText('TooltipLeft'));
+    await waitFor(() => {
+      const tooltip = screen.getByText(messageLeft);
+      expect(tooltip).toBeInTheDocument();
+      tooltipLeftClassName = tooltip.className;
+    });
+
+    fireEvent.mouseOver(screen.getByText('TooltipBottom'));
+    await waitFor(() => {
+      const tooltip = screen.getByText(messageBottm);
+      expect(tooltip).toBeInTheDocument();
+      tooltipBottomClassName = tooltip.className;
+    });
+
+    expect(tooltipLeftClassName).not.toBe(tooltipBottomClassName);
+  });
+});