From 2276e17310df342762147ba7f1166f7d4a3f22dc Mon Sep 17 00:00:00 2001
From: Nicolas Gallagher <nicolasgallagher@gmail.com>
Date: Thu, 1 Oct 2020 17:05:26 -0700
Subject: [PATCH] Add to CheckBox tests

---
 .../__snapshots__/index-test.js.snap          | 99 +++++++++++++++++++
 .../exports/CheckBox/__tests__/index-test.js  | 91 ++++++++++++++++-
 2 files changed, 186 insertions(+), 4 deletions(-)
 create mode 100644 packages/react-native-web/src/exports/CheckBox/__tests__/__snapshots__/index-test.js.snap

diff --git a/packages/react-native-web/src/exports/CheckBox/__tests__/__snapshots__/index-test.js.snap b/packages/react-native-web/src/exports/CheckBox/__tests__/__snapshots__/index-test.js.snap
new file mode 100644
index 00000000..a4a71914
--- /dev/null
+++ b/packages/react-native-web/src/exports/CheckBox/__tests__/__snapshots__/index-test.js.snap
@@ -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>
+`;
diff --git a/packages/react-native-web/src/exports/CheckBox/__tests__/index-test.js b/packages/react-native-web/src/exports/CheckBox/__tests__/index-test.js
index 5eac2d13..f6745f54 100644
--- a/packages/react-native-web/src/exports/CheckBox/__tests__/index-test.js
+++ b/packages/react-native-web/src/exports/CheckBox/__tests__/index-test.js
@@ -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);