3.0.0-dev.0

* Adding unit tests
* Removing eslint cypress config

Author: atomicpages

.eslintrc.js

@@ -4,14 +4,11 @@ module.exports = {
         node: true,
         jest: true,
         es6: true,
-        'cypress/globals': true,
     },
-    plugins: ['cypress'],
     extends: [
         '@djthoms/eslint-config',
         '@djthoms/eslint-config/react',
         '@djthoms/eslint-config/typescript',
-        'plugin:cypress/recommended',
     ],
     rules: {
         '@typescript-eslint/explicit-function-return-type': 0,

package.json

@@ -19,7 +19,7 @@
     ],
     "scripts": {
         "lint": "eslint \"src/**/*.{ts,tsx}\"",
-        "test": "jest --silent",
+        "test": "jest",
         "clean": "rimraf pkg/**",
         "build": "npm-run-all --parallel ts-check lint clean test && pika build",
         "ts-check": "tsc --noEmit",

src/components/checkbox/useCheckboxState.ts

@@ -5,7 +5,7 @@ export type UseCheckboxState = {
     onChange?: React.InputHTMLAttributes<HTMLInputElement>['onChange'];
 };
 
-const dispatch = (value: any) => (state: UseCheckboxState['state']) => {
+const dispatch = (value: string) => (state: UseCheckboxState['state']) => {
     if (Array.isArray(state)) {
         const index = state.indexOf(value);
 

src/components/state/State.tsx

@@ -3,17 +3,17 @@ import classNames from 'classnames';
 import { PCRCheckboxRadioProps } from '../../typings/PCRCheckboxRadioProps';
 
 type StateProps = React.HTMLAttributes<HTMLDivElement> & {
-    color: PCRCheckboxRadioProps['color'];
+    color?: PCRCheckboxRadioProps['color'];
     icon?: React.ReactNode;
 };
 
 /**
  * A tiny component to abstract away pretty-checkbox "state" div.
  * Shared by all components.
  */
-export const State = ({ color, icon, id, children }: StateProps) => {
+export const State = ({ color, icon, id, children, ...rest }: StateProps) => {
     return (
-        <div className={classNames('state', color && `p-${color}`)}>
+        <div className={classNames('state', color && `p-${color}`)} {...rest}>
             {icon}
             <label htmlFor={id}>{children}</label>
         </div>

src/components/state/__tests__/State.test.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+
+import { State } from '../State';
+
+describe('State tests', () => {
+    it('should render without errors', () => {
+        expect(() => {
+            render(<State>Hello</State>);
+        }).not.toThrow();
+    });
+
+    it('should render the label', () => {
+        const { queryByText } = render(<State>Hello</State>);
+        expect(queryByText('Hello')).not.toBeNull();
+    });
+
+    it('should add colors', () => {
+        const { getByTestId } = render(
+            <State data-testid="test" color="danger">
+                Danger!
+            </State>
+        );
+
+        expect(getByTestId('test').className.includes('danger')).toBe(true);
+    });
+});

src/hooks/__tests__/useIcon.test.ts

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { renderHook } from '@testing-library/react-hooks';
+import { useIcon } from '../useIcon';
+
+describe('useIcon hook tests', () => {
+    it('should return an object when icon is not defined', () => {
+        const { result } = renderHook(() => useIcon(undefined));
+
+        expect(result.current).toMatchObject({});
+    });
+
+    it('should return an icon with a custom classname and type', () => {
+        const { result } = renderHook(() =>
+            useIcon(
+                React.createElement('i', { className: 'far far-star' }) as React.ReactElement<
+                    any,
+                    any
+                >
+            )
+        );
+
+        expect(result.current).toMatchObject({ iconType: 'icon' });
+
+        // @ts-ignore
+        expect(result.current.icon.props.className).toContain('icon');
+    });
+
+    it('should work with svg elements', () => {
+        const { result } = renderHook(() =>
+            useIcon(
+                React.createElement('svg', { className: 'far far-star' }) as React.ReactElement<
+                    any,
+                    any
+                >
+            )
+        );
+
+        expect(result.current).toMatchObject({ iconType: 'svg' });
+    });
+
+    it('should work with img elements', () => {
+        const { result } = renderHook(() =>
+            useIcon(
+                React.createElement('img', { className: 'far far-star' }) as React.ReactElement<
+                    any,
+                    any
+                >
+            )
+        );
+
+        expect(result.current).toMatchObject({ iconType: 'image' });
+    });
+});

src/hooks/__tests__/useUUID.test.ts

@@ -0,0 +1,20 @@
+import { renderHook } from '@testing-library/react-hooks';
+import { nanoid } from 'nanoid';
+import { useUUID } from '../useUUID';
+
+jest.mock('nanoid');
+
+// @ts-ignore
+nanoid.mockImplementation(() => '1234');
+
+afterAll(() => {
+    // @ts-ignore
+    nanoid.mockRestore();
+});
+
+describe('useUUID tests', () => {
+    it('should generate a UUID', () => {
+        const { result } = renderHook(() => useUUID());
+        expect(result.current).toEqual('pcr_1234');
+    });
+});

src/hooks/useUUID.ts

@@ -2,9 +2,4 @@ import * as React from 'react';
 import { nanoid } from 'nanoid';
 
 const PREFIX = 'pcr_';
-
-export const useUUID = (id?: string) => {
-    const uuid = React.useRef(id || PREFIX + nanoid(8));
-
-    return uuid.current;
-};
+export const useUUID = () => React.useRef(PREFIX + nanoid(8)).current;

src/hooks/utility/__tests__/useCheckboxRadioProps.test.ts

@@ -0,0 +1,17 @@
+import { renderHook } from '@testing-library/react-hooks';
+import { useCheckboxRadioProps } from '../useCheckboxRadioProps';
+
+describe('useCheckboxRadioProps tests', () => {
+    it('should remove checkbox and radio props and filter out common props', () => {
+        const { result } = renderHook(() =>
+            useCheckboxRadioProps({
+                shape: 'curve',
+            })
+        );
+
+        expect(result.current).toMatchObject({
+            shape: 'curve',
+            htmlProps: expect.any(Object),
+        });
+    });
+});

src/hooks/utility/__tests__/useClassNames.test.ts

@@ -0,0 +1,62 @@
+import { useClassNames } from '../useClassNames';
+
+describe('useClassNames tests', () => {
+    it('should return default styles', () => {
+        expect(useClassNames({})).toMatchObject({
+            'p-default': true,
+            'p-bigger': undefined,
+        });
+    });
+
+    it('should not be a default when animation tada, rotate, or jelly', () => {
+        const trials = {
+            tada: false,
+            rotate: false,
+            jelly: false,
+            pulse: true,
+            smooth: true,
+            '': true,
+        };
+
+        Object.keys(trials).forEach(key => {
+            // @ts-ignore
+            expect(useClassNames({ animation: key })).toMatchObject({
+                // @ts-ignore
+                'p-default': trials[key],
+            });
+        });
+    });
+
+    it('should not be default when switch is defined', () => {
+        expect(useClassNames({}, true)).toMatchObject({
+            'p-default': false,
+        });
+    });
+
+    it('should not be default when an icon is used', () => {
+        expect(useClassNames({ iconType: 'svg' })).toMatchObject({
+            'p-default': false,
+        });
+    });
+
+    it('should return an expected object', () => {
+        expect(
+            useClassNames({
+                animation: 'pulse',
+                shape: 'round',
+                variant: 'thick',
+            })
+        ).toMatchInlineSnapshot(`
+            Object {
+              "p-bigger": undefined,
+              "p-default": true,
+              "p-locked": undefined,
+              "p-plain": undefined,
+              "p-pulse": "pulse",
+              "p-round": "round",
+              "p-thick": "thick",
+              "p-undefined": undefined,
+            }
+        `);
+    });
+});