Increase coverage

Make coverage 100% for remaining components.

src/modules/option/components/RadioButton/RadioButton.test.tsx

@@ -4,6 +4,7 @@ import {
   screen
 } from '@testing-library/react';
 import '@testing-library/jest-dom';
+import userEvent from '@testing-library/user-event';
 import * as ButtonBase from '@tesseract-design/web-base-button';
 import * as CheckControlBase from '@tesseract-design/web-base-checkcontrol';
 import { RadioButton } from '.';
@@ -19,4 +20,151 @@ describe('RadioButton', () => {
     const checkbox = screen.getByRole('radio');
     expect(checkbox).toBeInTheDocument();
   });
+
+  it('should render a subtext', () => {
+    render(
+      <RadioButton
+        subtext="subtext"
+      />
+    );
+    const subtext: HTMLElement = screen.getByTestId('subtext');
+    expect(subtext).toBeInTheDocument();
+  });
+
+  it('should render a badge', () => {
+    render(
+      <RadioButton
+        badge="badge"
+      />
+    );
+    const badge: HTMLElement = screen.getByTestId('badge');
+    expect(badge).toBeInTheDocument();
+  });
+  
+  it('should handle click events', () => {
+    const onClick = jest.fn();
+    render(
+      <RadioButton
+        onClick={onClick}
+      />
+    );
+    const button: HTMLInputElement = screen.getByRole('radio');
+    userEvent.click(button);
+    expect(onClick).toBeCalled();
+  });
+
+  it('should render a compact button', () => {
+    render(
+      <RadioButton
+        compact
+      />
+    );
+
+    expect(ButtonBase.Button).toBeCalledWith(expect.objectContaining({
+      compact: true,
+    }));
+
+    expect(ButtonBase.Label).toBeCalledWith(expect.objectContaining({
+      compact: true,
+    }));
+  });
+  
+  describe.each([
+    ButtonBase.ButtonSize.SMALL,
+    ButtonBase.ButtonSize.MEDIUM,
+    ButtonBase.ButtonSize.LARGE,
+  ])('on %s size', (size) => {
+    it('should render button styles', () => {
+      render(
+        <RadioButton
+          size={size}
+        />
+      );
+
+      expect(ButtonBase.Button).toBeCalledWith(expect.objectContaining({
+        size,
+      }));
+    });
+
+    it('should render badge styles', () => {
+      render(
+        <RadioButton
+          size={size}
+          badge="badge"
+        />
+      );
+
+      expect(ButtonBase.BadgeContainer).toBeCalledWith(expect.objectContaining({
+        size,
+      }));
+    });
+  });
+
+  it.each([
+    ButtonBase.ButtonVariant.OUTLINE,
+    ButtonBase.ButtonVariant.FILLED,
+  ])('should render a button with variant %s', (variant) => {
+    render(
+      <RadioButton
+        variant={variant}
+      />
+    );
+
+    expect(ButtonBase.Button).toBeCalledWith(expect.objectContaining({
+      variant,
+    }));
+  });
+
+  it('should render a bordered button', () => {
+    render(
+      <RadioButton
+        border
+      />
+    );
+
+    expect(ButtonBase.Border).toBeCalledWith(expect.objectContaining({
+      border: true,
+    }));
+  });
+
+  it('should render a block button', () => {
+    render(
+      <RadioButton
+        block
+      />
+    );
+
+    expect(ButtonBase.Button).toBeCalledWith(expect.objectContaining({
+      block: true,
+    }));
+
+    expect(ButtonBase.Border).toBeCalledWith(expect.objectContaining({
+      block: true,
+    }));
+
+    expect(CheckControlBase.ClickAreaWrapper).toBeCalledWith(expect.objectContaining({
+      block: true,
+    }));
+  });
+
+  it('should render children', () => {
+    render(
+      <RadioButton>
+        Foo
+      </RadioButton>
+    );
+
+    const children: HTMLElement = screen.getByTestId('children');
+    expect(children).toHaveTextContent('Foo');
+  });
+  
+  it('should render a disabled button', () => {
+    render(
+      <RadioButton
+        disabled
+      />
+    );
+    const button: HTMLButtonElement = screen.getByRole('radio');
+    expect(button).toBeDisabled();
+  });
 });

src/modules/option/components/RadioButton/index.tsx

@@ -100,6 +100,7 @@ export const RadioButton = React.forwardRef<HTMLInputElement, RadioButtonProps>(
             >
               <span
                 className={ButtonBase.MainText()}
+                data-testid="children"
               >
                 <span
                   className={ButtonBase.OverflowText()}
@@ -114,6 +115,7 @@ export const RadioButton = React.forwardRef<HTMLInputElement, RadioButtonProps>(
                     {' '}
                     <span
                       className={ButtonBase.Subtext()}
+                      data-testid="subtext"
                     >
                       <span
                         className={ButtonBase.OverflowText()}
@@ -132,6 +134,7 @@ export const RadioButton = React.forwardRef<HTMLInputElement, RadioButtonProps>(
                   {' '}
                   <span
                     className={ButtonBase.BadgeContainer(styleProps)}
+                    data-testid="badge"
                   >
                     {badge}
                   </span>

src/modules/option/components/RadioTickBox/RadioTickBox.test.tsx

@@ -4,6 +4,7 @@ import {
   screen
 } from '@testing-library/react';
 import '@testing-library/jest-dom';
+import userEvent from '@testing-library/user-event';
 import * as CheckControlBase from '@tesseract-design/web-base-checkcontrol';
 import { RadioTickBox } from '.';
 
@@ -17,4 +18,50 @@ describe('RadioTickBox', () => {
     const checkbox = screen.getByRole('radio');
     expect(checkbox).toBeInTheDocument();
   });
+
+  it('should render a compact tick box', () => {
+    render(
+      <RadioTickBox
+        compact
+      />
+    );
+
+    expect(CheckControlBase.CheckIndicatorArea).toBeCalledWith(expect.objectContaining({
+      compact: true,
+    }));
+  });
+
+  it('should render a block tick box', () => {
+    render(
+      <RadioTickBox
+        block
+      />
+    );
+
+    expect(CheckControlBase.ClickAreaWrapper).toBeCalledWith(expect.objectContaining({
+      block: true,
+    }));
+  });
+
+  it('should render a subtext', () => {
+    render(
+      <RadioTickBox
+        subtext="subtext"
+      />
+    );
+    const subtext: HTMLElement = screen.getByTestId('subtext');
+    expect(subtext).toBeInTheDocument();
+  });
+
+  it('should handle click events', () => {
+    const onClick = jest.fn();
+    render(
+      <RadioTickBox
+        onClick={onClick}
+      />
+    );
+    const button: HTMLInputElement = screen.getByRole('radio');
+    userEvent.click(button);
+    expect(onClick).toBeCalled();
+  });
 });

src/modules/option/components/RadioTickBox/index.tsx

@@ -72,6 +72,7 @@ export const RadioTickBox = React.forwardRef<HTMLInputElement, RadioTickBoxProps
                     <br />
                     <span
                       className={CheckControlBase.Subtext()}
+                      data-testid="subtext"
                     >
                       {subtext}
                     </span>

src/modules/option/components/ToggleButton/ToggleButton.test.tsx

@@ -4,6 +4,7 @@ import {
   screen
 } from '@testing-library/react';
 import '@testing-library/jest-dom';
+import userEvent from '@testing-library/user-event';
 import * as ButtonBase from '@tesseract-design/web-base-button';
 import * as CheckControlBase from '@tesseract-design/web-base-checkcontrol';
 import { ToggleButton } from '.';
@@ -29,4 +30,175 @@ describe('ToggleButton', () => {
     const checkbox = screen.getByRole('checkbox');
     expect(checkbox).toHaveProperty('indeterminate', true);
   });
+
+  it('should render a subtext', () => {
+    render(
+      <ToggleButton
+        subtext="subtext"
+      />
+    );
+    const subtext: HTMLElement = screen.getByTestId('subtext');
+    expect(subtext).toBeInTheDocument();
+  });
+
+  it('should render a badge', () => {
+    render(
+      <ToggleButton
+        badge="badge"
+      />
+    );
+    const badge: HTMLElement = screen.getByTestId('badge');
+    expect(badge).toBeInTheDocument();
+  });
+
+  describe('on indeterminate', () => {
+    it('should render an indeterminate checkbox', () => {
+      render(
+        <ToggleButton
+          indeterminate
+        />
+      );
+      const checkbox = screen.getByRole('checkbox');
+      expect(checkbox).toHaveProperty('indeterminate', true);
+    });
+
+    it('should acknowledge passed ref', () => {
+      const ref = React.createRef<HTMLInputElement>()
+      render(
+        <ToggleButton
+          indeterminate
+          ref={ref}
+        />
+      );
+      expect(ref.current).toHaveProperty('indeterminate', true);
+    });
+  });
+  
+  
+  it('should handle click events', () => {
+    const onClick = jest.fn();
+    render(
+      <ToggleButton
+        onClick={onClick}
+      />
+    );
+    const button: HTMLInputElement = screen.getByRole('checkbox');
+    userEvent.click(button);
+    expect(onClick).toBeCalled();
+  });
+
+  it('should render a compact button', () => {
+    render(
+      <ToggleButton
+        compact
+      />
+    );
+
+    expect(ButtonBase.Button).toBeCalledWith(expect.objectContaining({
+      compact: true,
+    }));
+
+    expect(ButtonBase.Label).toBeCalledWith(expect.objectContaining({
+      compact: true,
+    }));
+  });
+  
+  describe.each([
+    ButtonBase.ButtonSize.SMALL,
+    ButtonBase.ButtonSize.MEDIUM,
+    ButtonBase.ButtonSize.LARGE,
+  ])('on %s size', (size) => {
+    it('should render button styles', () => {
+      render(
+        <ToggleButton
+          size={size}
+        />
+      );
+
+      expect(ButtonBase.Button).toBeCalledWith(expect.objectContaining({
+        size,
+      }));
+    });
+
+    it('should render badge styles', () => {
+      render(
+        <ToggleButton
+          size={size}
+          badge="badge"
+        />
+      );
+
+      expect(ButtonBase.BadgeContainer).toBeCalledWith(expect.objectContaining({
+        size,
+      }));
+    });
+  });
+
+  it.each([
+    ButtonBase.ButtonVariant.OUTLINE,
+    ButtonBase.ButtonVariant.FILLED,
+  ])('should render a button with variant %s', (variant) => {
+    render(
+      <ToggleButton
+        variant={variant}
+      />
+    );
+
+    expect(ButtonBase.Button).toBeCalledWith(expect.objectContaining({
+      variant,
+    }));
+  });
+
+  it('should render a bordered button', () => {
+    render(
+      <ToggleButton
+        border
+      />
+    );
+
+    expect(ButtonBase.Border).toBeCalledWith(expect.objectContaining({
+      border: true,
+    }));
+  });
+
+  it('should render a block button', () => {
+    render(
+      <ToggleButton
+        block
+      />
+    );
+
+    expect(ButtonBase.Button).toBeCalledWith(expect.objectContaining({
+      block: true,
+    }));
+
+    expect(ButtonBase.Border).toBeCalledWith(expect.objectContaining({
+      block: true,
+    }));
+
+    expect(CheckControlBase.ClickAreaWrapper).toBeCalledWith(expect.objectContaining({
+      block: true,
+    }));
+  });
+
+  it('should render children', () => {
+    render(
+      <ToggleButton>
+        Foo
+      </ToggleButton>
+    );
+
+    const children: HTMLElement = screen.getByTestId('children');
+    expect(children).toHaveTextContent('Foo');
+  });
+  
+  it('should render a disabled button', () => {
+    render(
+      <ToggleButton
+        disabled
+      />
+    );
+    const button: HTMLButtonElement = screen.getByRole('checkbox');
+    expect(button).toBeDisabled();
+  });
 });

src/modules/option/components/ToggleButton/index.tsx

@@ -133,6 +133,7 @@ export const ToggleButton = React.forwardRef<HTMLInputElement, ToggleButtonProps
             >
               <span
                 className={ButtonBase.MainText()}
+                data-testid="children"
               >
                 <span
                   className={ButtonBase.OverflowText()}
@@ -147,6 +148,7 @@ export const ToggleButton = React.forwardRef<HTMLInputElement, ToggleButtonProps
                     {' '}
                     <span
                       className={ButtonBase.Subtext()}
+                      data-testid="subtext"
                     >
                       <span
                         className={ButtonBase.OverflowText()}
@@ -165,6 +167,7 @@ export const ToggleButton = React.forwardRef<HTMLInputElement, ToggleButtonProps
                   {' '}
                   <span
                     className={ButtonBase.BadgeContainer(styleProps)}
+                    data-testid="badge"
                   >
                     {badge}
                   </span>

src/modules/option/components/ToggleSwitch/ToggleSwitch.test.tsx

@@ -4,6 +4,7 @@ import {
   screen
 } from '@testing-library/react';
 import '@testing-library/jest-dom';
+import userEvent from '@testing-library/user-event';
 import * as CheckControlBase from '@tesseract-design/web-base-checkcontrol';
 import { ToggleSwitch } from '.';
 
@@ -17,4 +18,50 @@ describe('ToggleSwitch', () => {
     const checkbox = screen.getByRole('checkbox');
     expect(checkbox).toBeInTheDocument();
   });
+  
+  it('should render a compact switch', () => {
+    render(
+      <ToggleSwitch
+        compact
+      />
+    );
+
+    expect(CheckControlBase.CheckIndicatorArea).toBeCalledWith(expect.objectContaining({
+      compact: true,
+    }));
+  });
+
+  it('should render a block switch', () => {
+    render(
+      <ToggleSwitch
+        block
+      />
+    );
+
+    expect(CheckControlBase.ClickAreaWrapper).toBeCalledWith(expect.objectContaining({
+      block: true,
+    }));
+  });
+
+  it('should render a subtext', () => {
+    render(
+      <ToggleSwitch
+        subtext="subtext"
+      />
+    );
+    const subtext: HTMLElement = screen.getByTestId('subtext');
+    expect(subtext).toBeInTheDocument();
+  });
+
+  it('should handle click events', () => {
+    const onClick = jest.fn();
+    render(
+      <ToggleSwitch
+        onClick={onClick}
+      />
+    );
+    const button: HTMLInputElement = screen.getByRole('checkbox');
+    userEvent.click(button);
+    expect(onClick).toBeCalled();
+  });
 });

src/modules/option/components/ToggleSwitch/index.tsx

@@ -92,6 +92,7 @@ export const ToggleSwitch = React.forwardRef<HTMLInputElement, ToggleSwitchProps
                     <br />
                     <span
                       className={CheckControlBase.Subtext()}
+                      data-testid="subtext"
                     >
                       {subtext}
                     </span>

src/modules/option/components/ToggleTickBox/ToggleTickBox.test.tsx

@@ -4,6 +4,7 @@ import {
   screen
 } from '@testing-library/react';
 import '@testing-library/jest-dom';
+import userEvent from '@testing-library/user-event';
 import * as CheckControlBase from '@tesseract-design/web-base-checkcontrol';
 import { ToggleTickBox } from '.';
 
@@ -18,13 +19,72 @@ describe('ToggleTickBox', () => {
     expect(checkbox).toBeInTheDocument();
   });
 
-  it('should render an indeterminate checkbox', () => {
+  describe('on indeterminate', () => {
+    it('should render an indeterminate checkbox', () => {
+      render(
+        <ToggleTickBox
+          indeterminate
+        />
+      );
+      const checkbox = screen.getByRole('checkbox');
+      expect(checkbox).toHaveProperty('indeterminate', true);
+    });
+
+    it('should acknowledge passed ref', () => {
+      const ref = React.createRef<HTMLInputElement>()
+      render(
+        <ToggleTickBox
+          indeterminate
+          ref={ref}
+        />
+      );
+      expect(ref.current).toHaveProperty('indeterminate', true);
+    });
+  });
+
+  it('should render a compact tick box', () => {
     render(
       <ToggleTickBox
-        indeterminate
+        compact
       />
     );
-    const checkbox = screen.getByRole('checkbox');
-    expect(checkbox).toHaveProperty('indeterminate', true);
+
+    expect(CheckControlBase.CheckIndicatorArea).toBeCalledWith(expect.objectContaining({
+      compact: true,
+    }));
+  });
+
+  it('should render a block tick box', () => {
+    render(
+      <ToggleTickBox
+        block
+      />
+    );
+
+    expect(CheckControlBase.ClickAreaWrapper).toBeCalledWith(expect.objectContaining({
+      block: true,
+    }));
+  });
+
+  it('should render a subtext', () => {
+    render(
+      <ToggleTickBox
+        subtext="subtext"
+      />
+    );
+    const subtext: HTMLElement = screen.getByTestId('subtext');
+    expect(subtext).toBeInTheDocument();
+  });
+
+  it('should handle click events', () => {
+    const onClick = jest.fn();
+    render(
+      <ToggleTickBox
+        onClick={onClick}
+      />
+    );
+    const button: HTMLInputElement = screen.getByRole('checkbox');
+    userEvent.click(button);
+    expect(onClick).toBeCalled();
   });
 });

src/modules/option/components/ToggleTickBox/index.tsx

@@ -105,6 +105,7 @@ export const ToggleTickBox = React.forwardRef<HTMLInputElement, ToggleTickBoxPro
                     <br />
                     <span
                       className={CheckControlBase.Subtext()}
+                      data-testid="subtext"
                     >
                       {subtext}
                     </span>

src/pages/categories/option/index.tsx

@@ -309,30 +309,13 @@ const OptionPage: NextPage<Props> = ({
                   <div>
                     <div className="grid gap-4 my-4">
                       <div>
-                        <Option.RadioButton
-                          block
-                          subtext="Subtext"
-                          name="RadioButton"
-                        >
-                          RadioButton
-                        </Option.RadioButton>
-                      </div>
-                    </div>
-                  </div>
-                </section>
-                <section>
-                  <h3>Switch</h3>
-                  <div>
-                    <div className="grid gap-4 my-4">
-                      <div>
-                        <Option.RadioButton
+                        <Option.RadioTickBox
                           block
                           subtext="Subtext"
                           name="RadioButton"
-                          appearance={CheckControlAppearance.SWITCH}
                         >
                           RadioButton
-                        </Option.RadioButton>
+                        </Option.RadioTickBox>
                       </div>
                     </div>
                   </div>
@@ -344,7 +327,6 @@ const OptionPage: NextPage<Props> = ({
                       <div>
                         <Option.RadioButton
                           block
-                          appearance={CheckControlAppearance.BUTTON}
                           name="RadioButton"
                         >
                           Button
@@ -354,7 +336,6 @@ const OptionPage: NextPage<Props> = ({
                         <Option.RadioButton
                           variant={ButtonVariant.FILLED}
                           block
-                          appearance={CheckControlAppearance.BUTTON}
                           name="RadioButton"
                         >
                           Button
@@ -364,7 +345,6 @@ const OptionPage: NextPage<Props> = ({
                         <Option.RadioButton
                           border
                           block
-                          appearance={CheckControlAppearance.BUTTON}
                           name="RadioButton"
                         >
                           Button
@@ -375,7 +355,6 @@ const OptionPage: NextPage<Props> = ({
                           border
                           variant={ButtonVariant.FILLED}
                           block
-                          appearance={CheckControlAppearance.BUTTON}
                           name="RadioButton"
                         >
                           Button
@@ -385,7 +364,6 @@ const OptionPage: NextPage<Props> = ({
                         <Option.RadioButton
                           block
                           disabled
-                          appearance={CheckControlAppearance.BUTTON}
                           name="RadioButton"
                         >
                           Button
@@ -396,7 +374,6 @@ const OptionPage: NextPage<Props> = ({
                           variant={ButtonVariant.FILLED}
                           block
                           disabled
-                          appearance={CheckControlAppearance.BUTTON}
                           name="RadioButton"
                         >
                           Button
@@ -407,7 +384,6 @@ const OptionPage: NextPage<Props> = ({
                           border
                           block
                           disabled
-                          appearance={CheckControlAppearance.BUTTON}
                           name="RadioButton"
                         >
                           Button
@@ -419,7 +395,6 @@ const OptionPage: NextPage<Props> = ({
                           variant={ButtonVariant.FILLED}
                           block
                           disabled
-                          appearance={CheckControlAppearance.BUTTON}
                           name="RadioButton"
                         >
                           Button
@@ -437,7 +412,6 @@ const OptionPage: NextPage<Props> = ({
                           block
                           border
                           size={ButtonSize.SMALL}
-                          appearance={CheckControlAppearance.BUTTON}
                           name="RadioButton"
                         >
                           Button
@@ -449,7 +423,6 @@ const OptionPage: NextPage<Props> = ({
                           border
                           variant={ButtonVariant.FILLED}
                           size={ButtonSize.SMALL}
-                          appearance={CheckControlAppearance.BUTTON}
                           name="RadioButton"
                         >
                           Button
@@ -460,7 +433,6 @@ const OptionPage: NextPage<Props> = ({
                           block
                           border
                           size={ButtonSize.MEDIUM}
-                          appearance={CheckControlAppearance.BUTTON}
                           name="RadioButton"
                         >
                           Button
@@ -472,7 +444,6 @@ const OptionPage: NextPage<Props> = ({
                           border
                           variant={ButtonVariant.FILLED}
                           size={ButtonSize.MEDIUM}
-                          appearance={CheckControlAppearance.BUTTON}
                           name="RadioButton"
                         >
                           Button
@@ -483,7 +454,6 @@ const OptionPage: NextPage<Props> = ({
                           block
                           border
                           size={ButtonSize.LARGE}
-                          appearance={CheckControlAppearance.BUTTON}
                           name="RadioButton"
                         >
                           Button