zoriya/react-native-web
1
0
Fork 0
mirror of https://github.com/zoriya/react-native-web.git synced 2026-05-23 06:48:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add to CheckBox tests

Browse Source
This commit is contained in:
Nicolas Gallagher
2020-10-01 17:05:26 -07:00
parent 222fa3490e
commit 2276e17310
2 changed files with 186 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/react-native-web/src/exports/CheckBox/__tests__/__snapshots__/index-test.js.snap
+99
View File
@@ -0,0 +1,99 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`CheckBox prop "accessibilityLabel" value is set 1`] = `
<div
aria-label="accessibility label"
class="css-view-1dbjc4n r-cursor-1loqt21 r-height-10ptun7 r-userSelect-lrvibr r-width-1janqcz"
>
<div
class="css-view-1dbjc4n r-alignItems-1awozwy r-backgroundColor-14lw9ot r-borderColor-1awa8pu r-borderRadius-1jkafct r-borderStyle-1phboty r-borderWidth-d045u9 r-height-1pi2tsx r-justifyContent-1777fci r-width-13qz1uu"
/>
<input
class="r-bottom-1p0dtai r-cursor-1ei5mc7 r-height-1pi2tsx r-left-1d2f490 r-margin-crgep1 r-opacity-orgf3d r-padding-t60dpp r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu"
data-focusable="true"
type="checkbox"
/>
</div>
`;
exports[`CheckBox prop "color" value is set 1`] = `
<div
class="css-view-1dbjc4n r-cursor-1loqt21 r-height-10ptun7 r-userSelect-lrvibr r-width-1janqcz"
>
<div
class="css-view-1dbjc4n r-alignItems-1awozwy r-backgroundImage-rs94m5 r-backgroundRepeat-u6sd8q r-borderRadius-1jkafct r-borderStyle-1phboty r-borderWidth-d045u9 r-height-1pi2tsx r-justifyContent-1777fci r-width-13qz1uu"
style="background-color: rgb(173, 216, 230); border-top-color: rgba(173,216,230,1.00); border-right-color: rgba(173,216,230,1.00); border-bottom-color: rgba(173,216,230,1.00); border-left-color: rgba(173,216,230,1.00);"
/>
<input
checked=""
class="r-bottom-1p0dtai r-cursor-1ei5mc7 r-height-1pi2tsx r-left-1d2f490 r-margin-crgep1 r-opacity-orgf3d r-padding-t60dpp r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu"
data-focusable="true"
type="checkbox"
/>
</div>
`;
exports[`CheckBox prop "dataSet" value is set 1`] = `
<div
class="css-view-1dbjc4n r-cursor-1loqt21 r-height-10ptun7 r-userSelect-lrvibr r-width-1janqcz"
data-one="one"
data-two="two"
>
<div
class="css-view-1dbjc4n r-alignItems-1awozwy r-backgroundColor-14lw9ot r-borderColor-1awa8pu r-borderRadius-1jkafct r-borderStyle-1phboty r-borderWidth-d045u9 r-height-1pi2tsx r-justifyContent-1777fci r-width-13qz1uu"
/>
<input
class="r-bottom-1p0dtai r-cursor-1ei5mc7 r-height-1pi2tsx r-left-1d2f490 r-margin-crgep1 r-opacity-orgf3d r-padding-t60dpp r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu"
data-focusable="true"
type="checkbox"
/>
</div>
`;
exports[`CheckBox prop "nativeID" value is set 1`] = `
<div
class="css-view-1dbjc4n r-cursor-1loqt21 r-height-10ptun7 r-userSelect-lrvibr r-width-1janqcz"
id="123"
>
<div
class="css-view-1dbjc4n r-alignItems-1awozwy r-backgroundColor-14lw9ot r-borderColor-1awa8pu r-borderRadius-1jkafct r-borderStyle-1phboty r-borderWidth-d045u9 r-height-1pi2tsx r-justifyContent-1777fci r-width-13qz1uu"
/>
<input
class="r-bottom-1p0dtai r-cursor-1ei5mc7 r-height-1pi2tsx r-left-1d2f490 r-margin-crgep1 r-opacity-orgf3d r-padding-t60dpp r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu"
data-focusable="true"
type="checkbox"
/>
</div>
`;
exports[`CheckBox prop "style" value is set 1`] = `
<div
class="css-view-1dbjc4n r-cursor-1loqt21 r-height-10ptun7 r-userSelect-lrvibr r-width-1janqcz"
style="border-top-width: 5px; border-right-width: 5px; border-bottom-width: 5px; border-left-width: 5px;"
>
<div
class="css-view-1dbjc4n r-alignItems-1awozwy r-backgroundColor-14lw9ot r-borderColor-1awa8pu r-borderRadius-1jkafct r-borderStyle-1phboty r-borderWidth-d045u9 r-height-1pi2tsx r-justifyContent-1777fci r-width-13qz1uu"
/>
<input
class="r-bottom-1p0dtai r-cursor-1ei5mc7 r-height-1pi2tsx r-left-1d2f490 r-margin-crgep1 r-opacity-orgf3d r-padding-t60dpp r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu"
data-focusable="true"
type="checkbox"
/>
</div>
`;
exports[`CheckBox prop "testID" value is set 1`] = `
<div
class="css-view-1dbjc4n r-cursor-1loqt21 r-height-10ptun7 r-userSelect-lrvibr r-width-1janqcz"
data-testid="123"
>
<div
class="css-view-1dbjc4n r-alignItems-1awozwy r-backgroundColor-14lw9ot r-borderColor-1awa8pu r-borderRadius-1jkafct r-borderStyle-1phboty r-borderWidth-d045u9 r-height-1pi2tsx r-justifyContent-1777fci r-width-13qz1uu"
/>
<input
class="r-bottom-1p0dtai r-cursor-1ei5mc7 r-height-1pi2tsx r-left-1d2f490 r-margin-crgep1 r-opacity-orgf3d r-padding-t60dpp r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu"
data-focusable="true"
type="checkbox"
/>
</div>
`;
packages/react-native-web/src/exports/CheckBox/__tests__/index-test.js
Vendored
+87 -4
View File
@@ -2,6 +2,8 @@
import CheckBox from '../';
import React from 'react';
import { act } from 'react-dom/test-utils';
import { createEventTarget } from 'dom-event-testing-library';
import { render } from '@testing-library/react';
function findCheckbox(container) {
@@ -9,7 +11,28 @@ function findCheckbox(container) {
}
describe('CheckBox', () => {
describe('disabled', () => {
describe('prop "accessibilityLabel"', () => {
test('value is set', () => {
const { container } = render(<CheckBox accessibilityLabel="accessibility label" />);
expect(container.firstChild).toMatchSnapshot();
});
});
describe('prop "color"', () => {
test('value is set', () => {
const { container } = render(<CheckBox color="lightblue" value={true} />);
expect(container.firstChild).toMatchSnapshot();
});
});
describe('prop "dataSet"', () => {
test('value is set', () => {
const { container } = render(<CheckBox dataSet={{ one: 'one', two: 'two' }} />);
expect(container.firstChild).toMatchSnapshot();
});
});
describe('prop "disabled"', () => {
test('when "false" a default checkbox is rendered', () => {
const { container } = render(<CheckBox />);
expect(findCheckbox(container).disabled).toBe(false);
@@ -21,7 +44,30 @@ describe('CheckBox', () => {
});
});
describe('onChange', () => {
describe('prop "nativeID"', () => {
test('value is set', () => {
const { container } = render(<CheckBox nativeID="123" />);
expect(container.firstChild).toMatchSnapshot();
});
});
describe('prop "onBlur"', () => {
test('is called', () => {
const onBlur = jest.fn();
const ref = React.createRef();
act(() => {
render(<CheckBox onBlur={onBlur} ref={ref} />);
});
const target = createEventTarget(ref.current);
act(() => {
target.focus();
target.blur();
});
expect(onBlur).toBeCalled();
});
});
describe('prop "onChange"', () => {
test('is called with the event object', () => {
const onChange = jest.fn();
const { container } = render(<CheckBox onChange={onChange} value={false} />);
@@ -31,7 +77,22 @@ describe('CheckBox', () => {
});
});
describe('onValueChange', () => {
describe('prop "onFocus"', () => {
test('is called', () => {
const onFocus = jest.fn();
const ref = React.createRef();
act(() => {
render(<CheckBox onFocus={onFocus} ref={ref} />);
});
const target = createEventTarget(ref.current);
act(() => {
target.focus();
});
expect(onFocus).toBeCalled();
});
});
describe('prop "onValueChange"', () => {
test('when value is "false" it receives "true"', () => {
const onValueChange = jest.fn();
const { container } = render(<CheckBox onValueChange={onValueChange} value={false} />);
@@ -49,7 +110,29 @@ describe('CheckBox', () => {
});
});
describe('value', () => {
describe('prop "ref"', () => {
test('value is set', () => {
const ref = jest.fn();
render(<CheckBox ref={ref} />);
expect(ref).toBeCalled();
});
});
describe('prop "style"', () => {
test('value is set', () => {
const { container } = render(<CheckBox style={{ borderWidth: 5 }} />);
expect(container.firstChild).toMatchSnapshot();
});
});
describe('prop "testID"', () => {
test('value is set', () => {
const { container } = render(<CheckBox testID="123" />);
expect(container.firstChild).toMatchSnapshot();
});
});
describe('prop "value"', () => {
test('when "false" an unchecked checkbox is rendered', () => {
const { container } = render(<CheckBox value={false} />);
expect(findCheckbox(container).checked).toBe(false);