test(tests): remove console errors in tests, cleanup

Author: arturbien

src/components/ColorInput/ColorInput.spec.js

@@ -1,5 +1,5 @@
 import React from 'react';
-
+import { fireEvent } from '@testing-library/react';
 import { renderWithTheme } from '../../../test/utils';
 import ColorInput from './ColorInput';
 
@@ -12,8 +12,14 @@ function rgb2hex(str) {
 }
 
 describe('<ColorInput />', () => {
-  // TODO
-  it('should call handlers', () => {});
+  it('should call handlers', () => {
+    const color = '#f0f0dd';
+    const onChange = jest.fn();
+    const { container } = renderWithTheme(<ColorInput onChange={onChange} />);
+    const input = container.querySelector(`[type="color"]`);
+    fireEvent.change(input, { target: { value: color } });
+    expect(onChange).toBeCalledTimes(1);
+  });
 
   it('should properly pass value to input element', () => {
     const color = '#f0f0dd';

src/components/Hourglass/Hourglass.js

@@ -21,8 +21,8 @@ const Hourglass = React.forwardRef(function HourGlass(props, ref) {
     <StyledContainer
       style={{
         ...style,
-        width: size || '30px',
-        height: size || '30px'
+        width: size,
+        height: size
       }}
       ref={ref}
       {...otherProps}

src/components/Hourglass/Hourglass.spec.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import Hourglass from './Hourglass';
+
+describe('<Hourglass />', () => {
+  it('should render hourglass', () => {
+    const { container } = render(<Hourglass />);
+    const barEl = container.firstChild;
+
+    expect(barEl).toBeInTheDocument();
+  });
+
+  it('should render correct size', () => {
+    const { container } = render(<Hourglass size='66px' />);
+    const hourglass = container.firstChild;
+
+    const computedStyles = window.getComputedStyle(hourglass);
+    expect(computedStyles.width).toBe('66px');
+    expect(computedStyles.height).toBe('66px');
+  });
+
+  it('should handle custom props', () => {
+    const customProps = { alt: 'hourglass' };
+    const { container } = render(<Hourglass {...customProps} />);
+    const hourglass = container.firstChild;
+
+    expect(hourglass).toHaveAttribute('alt', 'hourglass');
+  });
+});

src/components/Radio/Radio.js

@@ -146,7 +146,7 @@ Radio.defaultProps = {
   onChange: undefined,
   name: null,
   value: undefined,
-  checked: false,
+  checked: undefined,
   label: '',
   disabled: false,
   variant: 'default',

src/components/Radio/Radio.spec.js

@@ -29,9 +29,7 @@ describe('<Radio />', () => {
     it('should disable radio', () => {
       const handleChange = jest.fn();
 
-      const { getByRole } = renderWithTheme(
-        <Radio disabled onChange={handleChange} />
-      );
+      const { getByRole } = renderWithTheme(<Radio disabled />);
       const checkbox = getByRole('radio');
       expect(checkbox).toHaveAttribute('disabled');
 
@@ -49,10 +47,10 @@ describe('<Radio />', () => {
   describe('controlled', () => {
     it('should check the radio', () => {
       const { getByRole, rerender } = renderWithTheme(
-        <Radio checked={false} />
+        <Radio checked={false} readOnly />
       );
 
-      rerender(<Radio checked />);
+      rerender(<Radio checked readOnly />);
       const checkbox = getByRole('radio');
 
       expect(checkbox.checked).toBe(true);
@@ -64,8 +62,10 @@ describe('<Radio />', () => {
     });
 
     it('should uncheck the checkbox', () => {
-      const { getByRole, rerender } = renderWithTheme(<Radio checked />);
-      rerender(<Radio checked={false} />);
+      const { getByRole, rerender } = renderWithTheme(
+        <Radio checked readOnly />
+      );
+      rerender(<Radio checked={false} readOnly />);
       const checkbox = getByRole('radio');
 
       expect(checkbox.checked).toBe(false);

src/components/Slider/Slider.js

@@ -13,7 +13,7 @@ import {
 import { clamp, percentToValue, roundValueToStep } from '../common/utils';
 import useControlledOrUncontrolled from '../common/hooks/useControlledOrUncontrolled';
 import useForkRef from '../common/hooks/useForkRef';
-import { useIsFocusVisible } from '../common/hooks/focusVisible';
+import { useIsFocusVisible } from '../common/hooks/useIsFocusVisible';
 import Cutout from '../Cutout/Cutout';
 
 function trackFinger(event, touchId) {

src/components/Table/Table.spec.js

@@ -17,12 +17,11 @@ describe('<Table />', () => {
     expect(getByRole('table')).toBeInTheDocument();
   });
   it('renders children', () => {
-    const textContent = 'Hi there!';
-    const { getByText } = renderWithTheme(
+    const { getByTestId } = renderWithTheme(
       <Table>
-        <span>{textContent}</span>
+        <tbody data-testid='children' />
       </Table>
     );
-    expect(getByText(textContent)).toBeInTheDocument();
+    expect(getByTestId('children')).toBeInTheDocument();
   });
 });

src/components/TableBody/TableBody.spec.js

@@ -5,24 +5,24 @@ import { renderWithTheme } from '../../../test/utils';
 import TableBody from './TableBody';
 
 describe('<TableBody />', () => {
+  function mountInTable(node) {
+    const { container, getByTestId } = renderWithTheme(<table>{node}</table>);
+    return {
+      tbody: container.querySelector('table').firstChild,
+      getByTestId
+    };
+  }
+
   it('renders TableBody', () => {
-    const { container } = renderWithTheme(<TableBody />);
-    const list = container.firstChild;
+    const { tbody } = mountInTable(<TableBody />);
 
-    expect(list).toBeInTheDocument();
+    expect(tbody).toBeInTheDocument();
+    expect(tbody.tagName).toBe('TBODY');
   });
-  it('renders tbody element', () => {
-    const { container } = renderWithTheme(<TableBody />);
 
-    expect(container.querySelector('tbody')).toBeInTheDocument();
-  });
   it('renders children', () => {
-    const textContent = 'Hi there!';
-    const { getByText } = renderWithTheme(
-      <TableBody>
-        <span>{textContent}</span>
-      </TableBody>
-    );
-    expect(getByText(textContent)).toBeInTheDocument();
+    const children = <tr data-testid='tr' />;
+    const { getByTestId } = mountInTable(<TableBody>{children}</TableBody>);
+    expect(getByTestId('tr')).toBeInTheDocument();
   });
 });

src/components/TableDataCell/TableDataCell.spec.js

@@ -5,24 +5,27 @@ import { renderWithTheme } from '../../../test/utils';
 import TableDataCell from './TableDataCell';
 
 describe('<TableDataCell />', () => {
-  it('renders TableDataCell', () => {
-    const { container } = renderWithTheme(<TableDataCell />);
-    const list = container.firstChild;
+  function mountInTable(node) {
+    const { container, getByText } = renderWithTheme(
+      <table>
+        <tbody>
+          <tr>{node}</tr>
+        </tbody>
+      </table>
+    );
+    return {
+      td: container.querySelector('tr').firstChild,
+      getByText
+    };
+  }
 
-    expect(list).toBeInTheDocument();
+  it('renders TableDataCell', () => {
+    const { td } = mountInTable(<TableDataCell />);
+    expect(td.tagName).toBe('TD');
   });
-  it('renders td element', () => {
-    const { container } = renderWithTheme(<TableDataCell />);
 
-    expect(container.querySelector('td')).toBeInTheDocument();
-  });
   it('renders children', () => {
-    const textContent = 'Hi there!';
-    const { getByText } = renderWithTheme(
-      <TableDataCell>
-        <span>{textContent}</span>
-      </TableDataCell>
-    );
-    expect(getByText(textContent)).toBeInTheDocument();
+    const { getByText } = mountInTable(<TableDataCell>children</TableDataCell>);
+    expect(getByText('children')).toBeInTheDocument();
   });
 });

src/components/TableHead/TableHead.spec.js

@@ -5,24 +5,24 @@ import { renderWithTheme } from '../../../test/utils';
 import TableHead from './TableHead';
 
 describe('<TableHead />', () => {
+  function mountInTable(node) {
+    const { container, getByTestId } = renderWithTheme(<table>{node}</table>);
+    return {
+      tbody: container.querySelector('table').firstChild,
+      getByTestId
+    };
+  }
+
   it('renders TableHead', () => {
-    const { container } = renderWithTheme(<TableHead />);
-    const list = container.firstChild;
+    const { tbody } = mountInTable(<TableHead />);
 
-    expect(list).toBeInTheDocument();
+    expect(tbody).toBeInTheDocument();
+    expect(tbody.tagName).toBe('THEAD');
   });
-  it('renders thead element', () => {
-    const { container } = renderWithTheme(<TableHead />);
 
-    expect(container.querySelector('thead')).toBeInTheDocument();
-  });
   it('renders children', () => {
-    const textContent = 'Hi there!';
-    const { getByText } = renderWithTheme(
-      <TableHead>
-        <span>{textContent}</span>
-      </TableHead>
-    );
-    expect(getByText(textContent)).toBeInTheDocument();
+    const children = <tr data-testid='tr' />;
+    const { getByTestId } = mountInTable(<TableHead>{children}</TableHead>);
+    expect(getByTestId('tr')).toBeInTheDocument();
   });
 });