Skip to content

Commit d7a36c9

Browse files
atomicpagesatomicpages
committed
2.0.0-rc.0
* Fixing issue with onKeyPress event not passing the correct value * Adding more unit tests * Other minor fixes
1 parent d0bad7e commit d7a36c9

File tree

11 files changed

+2236
-845
lines changed

11 files changed

+2236
-845
lines changed

‎package-lock.json‎

Lines changed: 2141 additions & 805 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "pretty-checkbox-react",
3-
"version": "2.0.0-dev.0",
3+
"version": "2.0.0-rc.0",
44
"description": "A set of React components build around Pretty Checkbox",
55
"keywords": [
66
"Pretty",
@@ -81,9 +81,9 @@
8181
"@djthoms/eslint-config": "^2.0.1",
8282
"@djthoms/prettier-config": "^1.0.0",
8383
"@pika/pack": "^0.5.0",
84-
"@pika/plugin-build-node": "^0.8.1",
85-
"@pika/plugin-build-web": "^0.8.1",
86-
"@pika/plugin-ts-standard-pkg": "^0.8.1",
84+
"@pika/plugin-build-node": "^0.9.2",
85+
"@pika/plugin-build-web": "^0.9.2",
86+
"@pika/plugin-ts-standard-pkg": "^0.9.2",
8787
"@testing-library/jest-dom": "^4.2.4",
8888
"@testing-library/react": "^9.4.0",
8989
"@testing-library/react-hooks": "^3.2.1",
@@ -94,7 +94,7 @@
9494
"coveralls": "^3.0.9",
9595
"eslint": "^6.8.0",
9696
"flowgen": "^1.10.0",
97-
"husky": "^3.1.0",
97+
"husky": "^4.2.3",
9898
"jest": "^25.1.0",
9999
"npm-run-all": "^4.1.5",
100100
"pika-plugin-legacy-browser": "^1.2.0",

‎src/components/Checkbox.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,8 @@ export const useCheckboxState = ({
2020
return {
2121
state,
2222
setState,
23-
onChange: React.useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
24-
const value = e.currentTarget.value;
23+
onChange: React.useCallback((e: React.ChangeEvent<HTMLInputElement>, args?: any) => {
24+
const value = args || e.currentTarget.value;
2525

2626
setState(state => {
2727
if (Array.isArray(state)) {

‎src/components/Radio.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@ export const useRadioState = ({ state: initialState = false }: { state?: RadioSt
1616
return {
1717
state,
1818
setState,
19-
onChange: React.useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
20-
const value = e.currentTarget.value;
19+
onChange: React.useCallback((e: React.ChangeEvent<HTMLInputElement>, args?: RadioState) => {
20+
const value = args || e.currentTarget.value;
2121
setState(prev => (isBoolean(prev) ? !prev : value));
2222
}, []),
2323
...useUUID(),

‎src/components/__tests__/RadioGroup.test.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import * as React from 'react';
2+
import { render } from '@testing-library/react';
3+
import { RadioGroup } from '../Radio';
4+
5+
describe('RadioGroup tests', () => {
6+
it('render without errors', () => {
7+
expect(() => {
8+
render(<RadioGroup baseId="abc">abc</RadioGroup>).container;
9+
}).not.toThrow();
10+
});
11+
});

‎src/components/__tests__/useCheckboxState.test.ts‎

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,20 @@
11
import { renderHook, act } from '@testing-library/react-hooks';
22
import { useCheckboxState } from '../Checkbox';
33

4+
export const sharedCheckboxAssertions = (result: any) => {
5+
act(() => {
6+
result.current.onChange({ currentTarget: { value: '' } } as any);
7+
});
8+
9+
expect(result.current.state).toBe(true);
10+
11+
act(() => {
12+
result.current.onChange({ currentTarget: { value: '' } } as any);
13+
});
14+
15+
expect(result.current.state).toBe(false);
16+
};
17+
418
describe('useCheckboxState tests', () => {
519
it('should update when change is called', () => {
620
const { result } = renderHook(() => useCheckboxState());
@@ -11,17 +25,7 @@ describe('useCheckboxState tests', () => {
1125
onChange: expect.any(Function),
1226
});
1327

14-
act(() => {
15-
result.current.onChange({ currentTarget: { value: '' } } as any);
16-
});
17-
18-
expect(result.current.state).toBe(true);
19-
20-
act(() => {
21-
result.current.onChange({ currentTarget: { value: '' } } as any);
22-
});
23-
24-
expect(result.current.state).toBe(false);
28+
sharedCheckboxAssertions(result);
2529
});
2630

2731
it('should handle arrays of items', () => {

‎src/components/__tests__/useRadioState.test.ts‎

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,20 @@
11
import { renderHook, act } from '@testing-library/react-hooks';
22
import { useRadioState } from '../Radio';
33

4+
export const sharedRadioAssertions = (result: any) => {
5+
act(() => {
6+
result.current.onChange({ currentTarget: {} } as any);
7+
});
8+
9+
expect(result.current.state).toBeUndefined();
10+
11+
act(() => {
12+
result.current.onChange({ currentTarget: {} } as any);
13+
});
14+
15+
expect(result.current.state).toBe(true);
16+
};
17+
418
describe('useRadioState tests', () => {
519
it('should work with boolean values', () => {
620
const { result } = renderHook(() => useRadioState());
@@ -11,16 +25,6 @@ describe('useRadioState tests', () => {
1125
onChange: expect.any(Function),
1226
});
1327

14-
act(() => {
15-
result.current.onChange({ currentTarget: {} } as any);
16-
});
17-
18-
expect(result.current.state).toBeUndefined();
19-
20-
act(() => {
21-
result.current.onChange({ currentTarget: {} } as any);
22-
});
23-
24-
expect(result.current.state).toBe(true);
28+
sharedRadioAssertions(result);
2529
});
2630
});

‎src/components/__tests__/useSwitchState.test.ts‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { renderHook } from '@testing-library/react-hooks';
2+
import { useSwitchState } from '../Switch';
3+
import { sharedCheckboxAssertions } from './useCheckboxState.test';
4+
import { sharedRadioAssertions } from './useRadioState.test';
5+
6+
describe('useRadioState tests', () => {
7+
it('should work as a checkbox', () => {
8+
const { result } = renderHook(() => useSwitchState());
9+
expect(result.current.type).toBe('checkbox');
10+
sharedCheckboxAssertions(result);
11+
});
12+
13+
it('should work as a radio', () => {
14+
const { result } = renderHook(() => useSwitchState({ type: 'radio' }));
15+
expect(result.current.type).toBe('radio');
16+
sharedRadioAssertions(result);
17+
});
18+
});

‎src/factory/Pretty.tsx‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -48,18 +48,21 @@ export const Pretty = React.forwardRef<HTMLDivElement, PrettyProps>((props: Pret
4848
className: getClassNames(props),
4949
'aria-disabled': disabled,
5050
'aria-checked': state === 'indeterminate' ? 'mixed' : !!state,
51-
tabIndex: 0,
52-
onKeyPress: React.useCallback((e: React.KeyboardEvent<HTMLDivElement>) => {
53-
/* istanbul ignore next */
54-
e.preventDefault();
55-
}, []),
51+
tabIndex: locked || disabled ? -1 : 0,
52+
onKeyPress: React.useCallback(
53+
/* istanbul ignore next */ (e: React.KeyboardEvent<HTMLDivElement>) => {
54+
/* istanbul ignore next */
55+
e.preventDefault();
56+
},
57+
[]
58+
),
5659
onKeyUp: React.useCallback(
5760
(e: React.KeyboardEvent<HTMLDivElement>) => {
58-
if (!disabled && !locked && (e.keyCode === 32 || e.keyCode === 13)) {
59-
onChange((e as unknown) as React.ChangeEvent<HTMLInputElement>);
61+
if (e.keyCode === 32 || e.keyCode === 13) {
62+
onChange((e as unknown) as React.ChangeEvent<HTMLInputElement>, value);
6063
}
6164
},
62-
[onChange, disabled, locked]
65+
[onChange, value]
6366
),
6467
role: type,
6568
ref,

‎src/factory/__tests__/Pretty.test.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ describe('PrettyComponent tests', () => {
1111

1212
it('should be keyboard interactive', () => {
1313
const mockChange = jest.fn();
14+
1415
const { getByTestId } = render(
1516
<Pretty onChange={mockChange} state={false} data-testid="pretty" />
1617
);
@@ -31,6 +32,20 @@ describe('PrettyComponent tests', () => {
3132
expect(mockChange).toHaveBeenCalledTimes(2);
3233
});
3334

35+
it('should prevent keyboard focus on disabled items', () => {
36+
const mockFocus = jest.fn();
37+
38+
const { container } = render(
39+
<Pretty onChange={jest.fn()} disabled state={false} onFocus={mockFocus} />
40+
);
41+
42+
act(() => {
43+
fireEvent.focus(container);
44+
});
45+
46+
expect(mockFocus).not.toHaveBeenCalled();
47+
});
48+
3449
it('should be mixed when checkbox is indeterminate', () => {
3550
const { getByTestId } = render(
3651
<Pretty

0 commit comments

Comments
 (0)