add snap (#228)

* add value prop

* add value prop

* add value prop

* add value prop

* add snap

Author: li-jia-nan

.gitignore

@@ -29,6 +29,7 @@ lib
 es
 coverage
 yarn.lock
+package-lock.json
 
 
 # dumi

src/index.tsx

@@ -1,7 +1,7 @@
+import classNames from 'classnames';
+import useMergedState from 'rc-util/lib/hooks/useMergedState';
 import * as React from 'react';
 import { forwardRef, useImperativeHandle, useRef } from 'react';
-import useMergedState from 'rc-util/lib/hooks/useMergedState';
-import classNames from 'classnames';
 
 export interface CheckboxChangeEvent {
   target: CheckboxChangeEventTarget;

tests/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,58 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`rc-checkbox click checkbox 1`] = `
+<span
+  class="rc-checkbox"
+>
+  <input
+    class="rc-checkbox-input"
+    type="checkbox"
+  />
+  <span
+    class="rc-checkbox-inner"
+  />
+</span>
+`;
+
+exports[`rc-checkbox click radio 1`] = `
+<span
+  class="rc-checkbox rc-checkbox-checked"
+>
+  <input
+    class="rc-checkbox-input"
+    type="radio"
+  />
+  <span
+    class="rc-checkbox-inner"
+  />
+</span>
+`;
+
+exports[`rc-checkbox control mode 1`] = `
+<span
+  class="rc-checkbox rc-checkbox-checked"
+>
+  <input
+    checked=""
+    class="rc-checkbox-input"
+    type="checkbox"
+  />
+  <span
+    class="rc-checkbox-inner"
+  />
+</span>
+`;
+
+exports[`rc-checkbox works 1`] = `
+<span
+  class="rc-checkbox"
+>
+  <input
+    class="rc-checkbox-input"
+    type="checkbox"
+  />
+  <span
+    class="rc-checkbox-inner"
+  />
+</span>
+`;

tests/index.test.tsx

@@ -1,6 +1,6 @@
-import * as React from 'react';
-import KeyCode from 'rc-util/lib/KeyCode';
 import { fireEvent, render } from '@testing-library/react';
+import KeyCode from 'rc-util/lib/KeyCode';
+import * as React from 'react';
 import Checkbox from '../src';
 
 import type { CheckboxRef } from '../src';
@@ -17,6 +17,7 @@ describe('rc-checkbox', () => {
 
     fireEvent.click(inputEl);
     expect(inputEl.checked).toBe(false);
+    expect(container.firstChild).toMatchSnapshot();
   });
 
   it('click radio', () => {
@@ -30,6 +31,7 @@ describe('rc-checkbox', () => {
 
     fireEvent.click(inputEl);
     expect(inputEl.checked).toBe(true);
+    expect(container.firstChild).toMatchSnapshot();
   });
 
   it('click checkbox', () => {
@@ -43,6 +45,7 @@ describe('rc-checkbox', () => {
 
     fireEvent.click(inputEl);
     expect(inputEl.checked).toBe(false);
+    expect(container.firstChild).toMatchSnapshot();
   });
 
   it('control mode', () => {
@@ -56,6 +59,7 @@ describe('rc-checkbox', () => {
 
     fireEvent.click(inputEl);
     expect(inputEl.checked).toBe(true);
+    expect(container.firstChild).toMatchSnapshot();
   });
 
   it('stopPropagation and preventDefault', () => {
@@ -93,7 +97,6 @@ describe('rc-checkbox', () => {
   });
 
   it('passes role prop to input', () => {
-    // eslint-disable-next-line jsx-a11y/aria-role
     const { container } = render(<Checkbox role="my-role" />);
     const inputEl = container.querySelector('input')!;