test(radio): add radio test (#475)

tusen-ai · Jul 11, 2021 · 6ff56c5 · 6ff56c5
1 parent a4f2275
commit 6ff56c5
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 1 deletion.
diff --git a/src/radio/demos/zhCN/index.demo-entry.md b/src/radio/demos/zhCN/index.demo-entry.md
@@ -24,7 +24,7 @@ radio-focus-debug
 | default-checked | `boolean` | `false` |  |
 | disabled | `boolean` | `false` |  |
 | name | `string` | `undefined` | 单选按钮 radio 元素的 name 属性。如果没有设定会使用 `n-radio-group` 的 `name` |
-| size | `'small' \| 'medium' \| 'large'` | `'medium'` | 只用于 `n-radio` |
+| size | `'small' \| 'medium' \| 'large'` | `'medium'` |  |
 | value | `string` | `undefined` |  |
 | on-update:checked-value | `(checked: boolean) => void` | `undefined` |  |
 

diff --git a/src/radio/tests/Radio.spec.ts b/src/radio/tests/Radio.spec.ts
@@ -5,4 +5,31 @@ describe('n-radio', () => {
   it('should work with import on demand', () => {
     mount(NRadio)
   })
+
+  it('should work with `checked` prop', async () => {
+    const wrapper = mount(NRadio, { props: { checked: false } })
+    expect(wrapper.find('.n-radio').classes()).not.toContain('n-radio--checked')
+    await wrapper.setProps({ checked: true })
+    expect(wrapper.find('.n-radio').classes()).toContain('n-radio--checked')
+  })
+
+  it('should work with `disabled` prop', async () => {
+    const wrapper = mount(NRadio, { props: { disabled: false } })
+    expect(wrapper.find('.n-radio').classes()).not.toContain(
+      'n-radio--disabled'
+    )
+    await wrapper.setProps({ disabled: true })
+    expect(wrapper.find('.n-radio').classes()).toContain('n-radio--disabled')
+  })
+
+  it('should work with `size` prop', async () => {
+    const wrapper = mount(NRadio, { props: { size: 'small' } })
+    expect(wrapper.find('.n-radio').attributes('style')).toMatchSnapshot()
+
+    await wrapper.setProps({ size: 'medium' })
+    expect(wrapper.find('.n-radio').attributes('style')).toMatchSnapshot()
+
+    await wrapper.setProps({ size: 'large' })
+    expect(wrapper.find('.n-radio').attributes('style')).toMatchSnapshot()
+  })
 })
diff --git a/src/radio/tests/__snapshots__/Radio.spec.ts.snap b/src/radio/tests/__snapshots__/Radio.spec.ts.snap
@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`n-radio should work with \`size\` prop 1`] = `"--bezier: cubic-bezier(.4, 0, .2, 1); --box-shadow: inset 0 0 0 1px rgb(224, 224, 230); --box-shadow-active: inset 0 0 0 1px #18a058; --box-shadow-disabled: inset 0 0 0 1px rgb(224, 224, 230); --box-shadow-focus: inset 0 0 0 1px #18a058, 0 0 0 2px rgba(24, 160, 88, 0.2); --box-shadow-hover: inset 0 0 0 1px #18a058; --color: #FFF; --color-disabled: rgb(250, 250, 252); --dot-color-active: #18a058; --dot-color-disabled: rgb(224, 224, 230); --font-size: 14px; --radio-size: 14px; --text-color: rgb(51, 54, 57); --text-color-disabled: rgba(194, 194, 194, 1); --label-padding: 0 8px;"`;
+
+exports[`n-radio should work with \`size\` prop 2`] = `"--bezier: cubic-bezier(.4, 0, .2, 1); --box-shadow: inset 0 0 0 1px rgb(224, 224, 230); --box-shadow-active: inset 0 0 0 1px #18a058; --box-shadow-disabled: inset 0 0 0 1px rgb(224, 224, 230); --box-shadow-focus: inset 0 0 0 1px #18a058, 0 0 0 2px rgba(24, 160, 88, 0.2); --box-shadow-hover: inset 0 0 0 1px #18a058; --color: #FFF; --color-disabled: rgb(250, 250, 252); --dot-color-active: #18a058; --dot-color-disabled: rgb(224, 224, 230); --font-size: 14px; --radio-size: 16px; --text-color: rgb(51, 54, 57); --text-color-disabled: rgba(194, 194, 194, 1); --label-padding: 0 8px;"`;
+
+exports[`n-radio should work with \`size\` prop 3`] = `"--bezier: cubic-bezier(.4, 0, .2, 1); --box-shadow: inset 0 0 0 1px rgb(224, 224, 230); --box-shadow-active: inset 0 0 0 1px #18a058; --box-shadow-disabled: inset 0 0 0 1px rgb(224, 224, 230); --box-shadow-focus: inset 0 0 0 1px #18a058, 0 0 0 2px rgba(24, 160, 88, 0.2); --box-shadow-hover: inset 0 0 0 1px #18a058; --color: #FFF; --color-disabled: rgb(250, 250, 252); --dot-color-active: #18a058; --dot-color-disabled: rgb(224, 224, 230); --font-size: 15px; --radio-size: 18px; --text-color: rgb(51, 54, 57); --text-color-disabled: rgba(194, 194, 194, 1); --label-padding: 0 8px;"`;