Repository: ant-design/ant-design-mobile
Pull request #5445 (2022-07-05 13:09:19)

test(Selector): add somet tests

github-actions[bot]: PR preview has been successfully built and deployed to https://antd-mobile-preview-pr-5445.surge.sh
codecov[bot]: # [Codecov](https://codecov.io/gh/ant-design/ant-design-mobile/pull/5445?src=pr&el=h1&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design) Report
> Merging [#5445](https://codecov.io/gh/ant-design/ant-design-mobile/pull/5445?src=pr&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design) (b3095ba) into [master](https://codecov.io/gh/ant-design/ant-design-mobile/commit/e3c7479aab4d4684eff1ea54816f4a9425e6d1ac?el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design) (e3c7479) will **increase** coverage by `0.56%`.
> The diff coverage is `100.00%`.

```diff
@@            Coverage Diff             @@
##           master    #5445      +/-   ##
==========================================
+ Coverage   84.94%   85.50%   +0.56%     
==========================================
  Files         290      290              
  Lines        6071     6071              
  Branches     1466     1466              
==========================================
+ Hits         5157     5191      +34     
+ Misses        847      814      -33     
+ Partials       67       66       -1     
```


| [Impacted Files](https://codecov.io/gh/ant-design/ant-design-mobile/pull/5445?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design) | Coverage Δ | |
|---|---|---|
| [src/components/calendar/index.ts](https://codecov.io/gh/ant-design/ant-design-mobile/pull/5445/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design#diff-c3JjL2NvbXBvbmVudHMvY2FsZW5kYXIvaW5kZXgudHM=) | `100.00% <ø> (ø)` | |
| [src/components/calendar/calendar.tsx](https://codecov.io/gh/ant-design/ant-design-mobile/pull/5445/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design#diff-c3JjL2NvbXBvbmVudHMvY2FsZW5kYXIvY2FsZW5kYXIudHN4) | `87.70% <100.00%> (ø)` | |
| [src/components/image-uploader/image-uploader.tsx](https://codecov.io/gh/ant-design/ant-design-mobile/pull/5445/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design#diff-c3JjL2NvbXBvbmVudHMvaW1hZ2UtdXBsb2FkZXIvaW1hZ2UtdXBsb2FkZXIudHN4) | `86.53% <0.00%> (-6.74%)` | :arrow_down: |
| [src/components/selector/check-mark.tsx](https://codecov.io/gh/ant-design/ant-design-mobile/pull/5445/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design#diff-c3JjL2NvbXBvbmVudHMvc2VsZWN0b3IvY2hlY2stbWFyay50c3g=) | `100.00% <0.00%> (+33.33%)` | :arrow_up: |
| [src/components/grid/grid.tsx](https://codecov.io/gh/ant-design/ant-design-mobile/pull/5445/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design#diff-c3JjL2NvbXBvbmVudHMvZ3JpZC9ncmlkLnRzeA==) | `73.68% <0.00%> (+36.84%)` | :arrow_up: |
| [src/components/selector/selector.tsx](https://codecov.io/gh/ant-design/ant-design-mobile/pull/5445/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design#diff-c3JjL2NvbXBvbmVudHMvc2VsZWN0b3Ivc2VsZWN0b3IudHN4) | `100.00% <0.00%> (+73.33%)` | :arrow_up: |

------

[Continue to review full report at Codecov](https://codecov.io/gh/ant-design/ant-design-mobile/pull/5445?src=pr&el=continue&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design).
> **Legend** - [Click here to learn more](https://docs.codecov.io/docs/codecov-delta?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design)
> `Δ = absolute <relative> (impact)`, `ø = not affected`, `? = missing data`
> Powered by [Codecov](https://codecov.io/gh/ant-design/ant-design-mobile/pull/5445?src=pr&el=footer&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design). Last update [6393aa9...b3095ba](https://codecov.io/gh/ant-design/ant-design-mobile/pull/5445?src=pr&el=lastupdated&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design). Read the [comment docs](https://docs.codecov.io/docs/pull-request-comments?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design).


Patch:
diff --git a/src/components/calendar/calendar.tsx b/src/components/calendar/calendar.tsx
index 1259c44f0..bb9ff8f11 100644
--- a/src/components/calendar/calendar.tsx
+++ b/src/components/calendar/calendar.tsx
@@ -72,7 +72,7 @@ const defaultProps = {
   nextYearButton: <ArrowLeftDouble />,
 }
 
-export const Calendar = forwardRef<CalenderRef, CalendarProps>((p, ref) => {
+export const Calendar = forwardRef<CalendarRef, CalendarProps>((p, ref) => {
   const today = dayjs()
   const props = mergeProps(defaultProps, p)
   const { locale } = useConfig()
diff --git a/src/components/form/form-item.tsx b/src/components/form/form-item.tsx
index 61c24128d..7fad6b990 100644
--- a/src/components/form/form-item.tsx
+++ b/src/components/form/form-item.tsx
@@ -1,6 +1,6 @@
 import React, { FC, useContext, useCallback, useState, useRef } from 'react'
 import classNames from 'classnames'
-import { NativeProps } from '../../utils/native-props'
+import { NativeProps, withNativeProps } from '../../utils/native-props'
 import { Field, FormInstance } from 'rc-field-form'
 import type { FieldProps } from 'rc-field-form/lib/Field'
 import FieldContext from 'rc-field-form/lib/FieldContext'
@@ -91,7 +91,7 @@ type FormItemLayoutProps = Pick<
   errors: string[]
   warnings: string[]
   children: React.ReactNode
-}
+} & NativeProps
 
 const FormItemLayout: React.FC<FormItemLayoutProps> = props => {
   const {
@@ -193,7 +193,8 @@ const FormItemLayout: React.FC<FormItemLayoutProps> = props => {
       </>
     ) : null
 
-  return (
+  return withNativeProps(
+    props,
     <List.Item
       style={style}
       title={layout === 'vertical' && labelElement}
@@ -324,7 +325,8 @@ export const FormItem: FC<FormItemProps> = props => {
       curWarnings
     )
 
-    return (
+    return withNativeProps(
+      props,
       <FormItemLayout
         className={className}
         style={style}


Test patch:
diff --git a/src/components/calendar/tests/calendar.test.tsx b/src/components/calendar/tests/calendar.test.tsx
index 652b6a44e..ac572c53f 100644
--- a/src/components/calendar/tests/calendar.test.tsx
+++ b/src/components/calendar/tests/calendar.test.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useRef } from 'react'
 import { render, testA11y, fireEvent } from 'testing'
-import Calendar, { CalenderRef } from '..'
+import Calendar, { CalendarRef } from '..'
 import dayjs from 'dayjs'
 import MockDate from 'mockdate'
 
@@ -99,7 +99,7 @@ describe('Calendar', () => {
 
   test('jump to a day', async () => {
     const App = () => {
-      const ref = useRef<CalenderRef>(null)
+      const ref = useRef<CalendarRef>(null)
       return (
         <>
           <button
diff --git a/src/components/selector/tests/selector.test.tsx b/src/components/selector/tests/selector.test.tsx
new file mode 100644
index 000000000..2eb12bf1d
--- /dev/null
+++ b/src/components/selector/tests/selector.test.tsx
@@ -0,0 +1,97 @@
+import React from 'react'
+import { render, testA11y, fireEvent, screen } from 'testing'
+import Selector from '..'
+import { options } from '../demos/options'
+
+const classPrefix = `adm-selector`
+
+describe('Selector', () => {
+  test('a11y', async () => {
+    await testA11y(<Selector options={options} />)
+  })
+
+  test('onChange should be work', () => {
+    const onChange = jest.fn()
+    render(<Selector options={options} onChange={onChange} />)
+
+    const label = screen.getByText(options[1].label)
+    fireEvent.click(label)
+    expect(label).toHaveClass(`${classPrefix}-item-active`)
+    expect(onChange.mock.calls[0][0]).toMatchObject([options[1].value])
+    expect(onChange.mock.calls[0][1].items).toMatchObject([options[1]])
+  })
+
+  test('disabled should be work', () => {
+    const onChange = jest.fn()
+    render(
+      <Selector
+        options={[
+          {
+            label: '1',
+            value: '1',
+            disabled: true,
+          },
+        ]}
+        onChange={onChange}
+      />
+    )
+
+    const label = screen.getByText('1')
+    expect(label).toHaveClass(`${classPrefix}-item-disabled`)
+    fireEvent.click(label)
+    expect(onChange).not.toBeCalled()
+  })
+
+  test('renders with columns', () => {
+    render(<Selector columns={2} options={options} />)
+    expect(document.querySelectorAll('.adm-grid')[0]).toBeInTheDocument()
+  })
+
+  test('multiple should be work', () => {
+    render(<Selector options={options} multiple />)
+    const label1 = screen.getByText(options[0].label)
+    const label2 = screen.getByText(options[1].label)
+    fireEvent.click(label1)
+    expect(label1).toHaveClass(`${classPrefix}-item-multiple-active`)
+    fireEvent.click(label2)
+    expect(label2).toHaveClass(`${classPrefix}-item-multiple-active`)
+    expect(
+      document.querySelectorAll(`.${classPrefix}-item-multiple-active`)
+    ).toHaveLength(2)
+
+    fireEvent.click(label1)
+    expect(
+      document.querySelectorAll(`.${classPrefix}-item-multiple-active`)
+    ).toHaveLength(1)
+  })
+
+  test('renders with description', () => {
+    render(
+      <Selector
+        options={[
+          {
+            label: '1',
+            value: '1',
+            description: 'desc',
+          },
+        ]}
+      />
+    )
+    expect(screen.getByText('desc')).toBeInTheDocument()
+  })
+
+  test('renders without check mark', () => {
+    render(
+      <Selector
+        options={options}
+        showCheckMark={false}
+        defaultValue={[options[0].value]}
+      />
+    )
+    const label = screen.getByText(options[0].label)
+    expect(label).toHaveClass(`${classPrefix}-item-active`)
+    expect(
+      document.querySelectorAll(`.${classPrefix}check-mark-wrapper`)
+    ).toHaveLength(0)
+  })
+})