test: <Radio /> (#50)

Author: meissadia

package.json

@@ -116,6 +116,7 @@
     "vite": "3.2.4",
     "vite-plugin-dts": "^2.2.0",
     "vite-plugin-pwa": "^0.14.7",
+    "vite-plugin-react-remove-attributes": "^1.0.3",
     "vite-tsconfig-paths": "3.5.2",
     "vitest": "0.25.2",
     "whatwg-fetch": "3.6.2",

src/components/Radio.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import Radio from './Radio';
+import { Radio } from './Radio';
 
 const meta: Meta<typeof Radio> = {
   component: Radio,

src/components/Radio.test.tsx

@@ -0,0 +1,75 @@
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Radio } from './Radio';
+
+const buildProperties = (
+  additive: number | string
+): { id: string; label: string } => ({
+  id: `radio-${additive}`,
+  label: `label-${additive}`
+});
+
+describe('<Radio />', () => {
+  const helperText = 'helperText goes here';
+  const role = 'radio';
+
+  it('renders labels correctly', () => {
+    const properties = buildProperties('first');
+    render(<Radio {...properties} />);
+    expect(screen.getByText(properties.label)).toBeInTheDocument();
+  });
+
+  it('renders helperText', () => {
+    const properties = buildProperties('helper');
+    render(<Radio {...properties} helperText={helperText} />);
+    expect(screen.getByText(helperText)).toBeInTheDocument();
+  });
+
+  it('isLarge', () => {
+    const properties = buildProperties('large');
+    render(<Radio {...properties} helperText={helperText} isLarge />);
+
+    expect(screen.getByText(helperText)).toBeInTheDocument();
+    expect(screen.getByTestId('radio-container').getAttribute('class')).toMatch(
+      'm-form-field__lg-target'
+    );
+  });
+
+  it('isDisabled', () => {
+    const properties = buildProperties('disabled');
+    render(<Radio {...properties} isDisabled />);
+
+    const element = screen.getByRole(role);
+
+    expect(element).toBeInTheDocument();
+    expect(element.getAttribute('disabled')).not.toBe('null');
+    expect(element.getAttribute('disabled')).toBe('');
+  });
+
+  it('Select via click', () => {
+    const properties = buildProperties('click');
+    render(<Radio {...properties} />);
+
+    const element = screen.getByRole(role);
+    expect(element).not.toBeChecked();
+
+    screen.getByText(properties.label).click();
+
+    expect(element).toBeChecked();
+  });
+
+  it('Select via keyboard', async () => {
+    const user = userEvent.setup();
+    const properties = buildProperties('keyboard');
+    render(<Radio {...properties} />);
+
+    const element = screen.getByRole(role);
+    expect(element).not.toBeChecked();
+
+    element.focus();
+    await user.keyboard(' ');
+
+    expect(element).toBeChecked();
+  });
+});

src/components/Radio.tsx

@@ -2,18 +2,18 @@ import type React from 'react';
 
 interface RadioProperties {
   id: string;
-  name: string;
-  helperText?: string;
-  className?: string;
-  isDisabled?: boolean;
-  isLarge?: boolean;
   label: string;
+  className?: string;
+  helperText?: string;
   inputRef?:
     | React.RefObject<HTMLInputElement>
     | string
     | ((instance: HTMLInputElement | null) => void)
     | null
     | undefined;
+  isDisabled?: boolean;
+  isLarge?: boolean;
+  name?: string;
 }
 const baseStyles = ['a-radio'];
 const containerBaseStyles = ['m-form-field m-form-field__radio'];
@@ -35,11 +35,11 @@ export const Radio = ({
   ].join(' ');
 
   return (
-    <div className={containerClasses}>
+    <div className={containerClasses} data-testid='radio-container'>
       <input
         id={id}
         type='radio'
-        name={name}
+        name={name ?? id}
         className={classes}
         ref={inputRef}
         disabled={isDisabled}

vite.config.ts

@@ -3,6 +3,7 @@ import react from '@vitejs/plugin-react';
 import { resolve } from 'node:path';
 import { defineConfig } from 'vite';
 import dts from 'vite-plugin-dts';
+import VitePluginReactRemoveAttributes from 'vite-plugin-react-remove-attributes';
 import tsConfigPaths from 'vite-tsconfig-paths';
 import { name } from './package.json';
 
@@ -13,6 +14,9 @@ export default defineConfig(() => ({
     tsConfigPaths(),
     dts({
       insertTypesEntry: true
+    }),
+    VitePluginReactRemoveAttributes({
+      attributes: ['data-testid']
     })
   ],
   test: {

yarn.lock

@@ -11038,6 +11038,11 @@ vite-plugin-pwa@^0.14.7:
     workbox-build "^6.5.4"
     workbox-window "^6.5.4"
 
+vite-plugin-react-remove-attributes@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/vite-plugin-react-remove-attributes/-/vite-plugin-react-remove-attributes-1.0.3.tgz#ffa0a3bc61cc20d15fcbe37c6a361b320a4f5424"
+  integrity sha512-f+ox+GFeqyBHzOe94Tcf1knFXEYWMhOGH04glIZRoXoIXQJD23Z1KFgQ7/JwOoLydsvQTlGzUJ/BpLeL7lh2LQ==
+
 [email protected]:
   version "3.5.2"
   resolved "https://registry.yarnpkg.com/vite-tsconfig-paths/-/vite-tsconfig-paths-3.5.2.tgz#fd3232f93c426311d7e0d581187d8b63fff55fbc"