feat: add button test (#221)

* feat: add button test

* feat: optimization

src/button/tests/Button.spec.tsx

@@ -33,4 +33,84 @@ describe('n-button', () => {
       <NxButton formaction="" />
     </div>
   })
+
+  it('should work with `type` prop', async () => {
+    const wrapper = mount(NButton)
+
+    await wrapper.setProps({ type: 'primary' })
+    expect(wrapper.find('button').classes()).toContain('n-button--primary-type')
+
+    await wrapper.setProps({ type: 'info' })
+    expect(wrapper.find('button').classes()).toContain('n-button--info-type')
+
+    await wrapper.setProps({ type: 'success' })
+    expect(wrapper.find('button').classes()).toContain('n-button--success-type')
+
+    await wrapper.setProps({ type: 'warning' })
+    expect(wrapper.find('button').classes()).toContain('n-button--warning-type')
+
+    await wrapper.setProps({ type: 'error' })
+    expect(wrapper.find('button').classes()).toContain('n-button--error-type')
+  })
+
+  it('should work with `dashed` prop', async () => {
+    const wrapper = mount(NButton)
+
+    await wrapper.setProps({ dashed: true })
+    expect(wrapper.find('button').classes()).toContain('n-button--dashed')
+  })
+
+  it('should work with `size` prop', async () => {
+    const wrapper = mount(NButton)
+
+    await wrapper.setProps({ size: 'tiny' })
+    expect(wrapper.find('button').attributes('style')).toMatchSnapshot()
+
+    await wrapper.setProps({ size: 'small' })
+    expect(wrapper.find('button').attributes('style')).toMatchSnapshot()
+
+    await wrapper.setProps({ size: 'medium' })
+    expect(wrapper.find('button').attributes('style')).toMatchSnapshot()
+
+    await wrapper.setProps({ size: 'large' })
+    expect(wrapper.find('button').attributes('style')).toMatchSnapshot()
+  })
+
+  it('should work with `text` prop', () => {
+    const wrapper = mount(NButton, {
+      props: {
+        text: true
+      },
+      slots: {
+        default: () => 'test'
+      }
+    })
+    expect(wrapper.find('button').attributes('style')).toMatchSnapshot()
+    expect(wrapper.find('.n-button__content').element.textContent).toBe('test')
+  })
+
+  it('should work with `tag` prop', () => {
+    const wrapper = mount(NButton, {
+      props: {
+        text: true,
+        tag: 'a',
+        href: 'https://www.naiveui.com',
+        target: '_blank',
+        type: 'primary'
+      },
+      slots: {
+        default: () => 'test'
+      }
+    })
+
+    expect(wrapper.find('a').attributes('style')).toMatchSnapshot()
+    expect(wrapper.find('a').classes()).toContain('n-button--primary-type')
+    expect(wrapper.find('a').attributes('type')).toContain('button')
+    expect(wrapper.find('a').attributes('disabled')).toContain('false')
+    expect(wrapper.find('a').attributes('href')).toContain(
+      'https://www.naiveui.com'
+    )
+    expect(wrapper.find('a').attributes('target')).toContain('_blank')
+    expect(wrapper.find('.n-button__content').element.textContent).toBe('test')
+  })
 })

src/button/tests/__snapshots__/Button.spec.tsx.snap

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`n-button should work with \`size\` prop 1`] = `"--bezier: cubic-bezier(.4, 0, .2, 1); --bezier-ease-out: cubic-bezier(0, 0, .2, 1); --ripple-duration: .6s; --opacity-disabled: 0.5; --wave-opacity: 0.6; font-weight: 400; --color: #0000; --color-hover: #0000; --color-pressed: #0000; --color-focus: #0000; --color-disabled: #0000; --ripple-color: #18a058; --text-color: rgb(51, 54, 57); --text-color-hover: #36ad6a; --text-color-pressed: #0c7a43; --text-color-focus: #36ad6a; --text-color-disabled: rgb(51, 54, 57); --border: 1px solid rgb(224, 224, 230); --border-hover: 1px solid #36ad6a; --border-pressed: 1px solid #0c7a43; --border-focus: 1px solid #36ad6a; --border-disabled: 1px solid rgb(224, 224, 230); --width: initial; --height: 22px; --font-size: 12px; --padding: 0 6px; --icon-size: 14px; --icon-margin: 6px; --border-radius: 3px;"`;
+
+exports[`n-button should work with \`size\` prop 2`] = `"--bezier: cubic-bezier(.4, 0, .2, 1); --bezier-ease-out: cubic-bezier(0, 0, .2, 1); --ripple-duration: .6s; --opacity-disabled: 0.5; --wave-opacity: 0.6; font-weight: 400; --color: #0000; --color-hover: #0000; --color-pressed: #0000; --color-focus: #0000; --color-disabled: #0000; --ripple-color: #18a058; --text-color: rgb(51, 54, 57); --text-color-hover: #36ad6a; --text-color-pressed: #0c7a43; --text-color-focus: #36ad6a; --text-color-disabled: rgb(51, 54, 57); --border: 1px solid rgb(224, 224, 230); --border-hover: 1px solid #36ad6a; --border-pressed: 1px solid #0c7a43; --border-focus: 1px solid #36ad6a; --border-disabled: 1px solid rgb(224, 224, 230); --width: initial; --height: 28px; --font-size: 14px; --padding: 0 10px; --icon-size: 18px; --icon-margin: 6px; --border-radius: 3px;"`;
+
+exports[`n-button should work with \`size\` prop 3`] = `"--bezier: cubic-bezier(.4, 0, .2, 1); --bezier-ease-out: cubic-bezier(0, 0, .2, 1); --ripple-duration: .6s; --opacity-disabled: 0.5; --wave-opacity: 0.6; font-weight: 400; --color: #0000; --color-hover: #0000; --color-pressed: #0000; --color-focus: #0000; --color-disabled: #0000; --ripple-color: #18a058; --text-color: rgb(51, 54, 57); --text-color-hover: #36ad6a; --text-color-pressed: #0c7a43; --text-color-focus: #36ad6a; --text-color-disabled: rgb(51, 54, 57); --border: 1px solid rgb(224, 224, 230); --border-hover: 1px solid #36ad6a; --border-pressed: 1px solid #0c7a43; --border-focus: 1px solid #36ad6a; --border-disabled: 1px solid rgb(224, 224, 230); --width: initial; --height: 34px; --font-size: 14px; --padding: 0 14px; --icon-size: 18px; --icon-margin: 6px; --border-radius: 3px;"`;
+
+exports[`n-button should work with \`size\` prop 4`] = `"--bezier: cubic-bezier(.4, 0, .2, 1); --bezier-ease-out: cubic-bezier(0, 0, .2, 1); --ripple-duration: .6s; --opacity-disabled: 0.5; --wave-opacity: 0.6; font-weight: 400; --color: #0000; --color-hover: #0000; --color-pressed: #0000; --color-focus: #0000; --color-disabled: #0000; --ripple-color: #18a058; --text-color: rgb(51, 54, 57); --text-color-hover: #36ad6a; --text-color-pressed: #0c7a43; --text-color-focus: #36ad6a; --text-color-disabled: rgb(51, 54, 57); --border: 1px solid rgb(224, 224, 230); --border-hover: 1px solid #36ad6a; --border-pressed: 1px solid #0c7a43; --border-focus: 1px solid #36ad6a; --border-disabled: 1px solid rgb(224, 224, 230); --width: initial; --height: 40px; --font-size: 15px; --padding: 0 18px; --icon-size: 20px; --icon-margin: 6px; --border-radius: 3px;"`;
+
+exports[`n-button should work with \`tag\` prop 1`] = `"--bezier: cubic-bezier(.4, 0, .2, 1); --bezier-ease-out: cubic-bezier(0, 0, .2, 1); --ripple-duration: .6s; --opacity-disabled: 0.5; --wave-opacity: 0.6; font-weight: 400; --color: #0000; --color-hover: #0000; --color-pressed: #0000; --color-focus: #0000; --color-disabled: #0000; --ripple-color: #0000; --text-color: #18a058; --text-color-hover: #36ad6a; --text-color-pressed: #0c7a43; --text-color-focus: #36ad6a; --text-color-disabled: rgb(51, 54, 57); --border: none; --border-hover: none; --border-pressed: none; --border-focus: none; --border-disabled: none; --width: initial; --height: initial; --font-size: 14px; --padding: initial; --icon-size: 18px; --icon-margin: 6px; --border-radius: initial;"`;
+
+exports[`n-button should work with \`text\` prop 1`] = `"--bezier: cubic-bezier(.4, 0, .2, 1); --bezier-ease-out: cubic-bezier(0, 0, .2, 1); --ripple-duration: .6s; --opacity-disabled: 0.5; --wave-opacity: 0.6; font-weight: 400; --color: #0000; --color-hover: #0000; --color-pressed: #0000; --color-focus: #0000; --color-disabled: #0000; --ripple-color: #0000; --text-color: rgb(51, 54, 57); --text-color-hover: #36ad6a; --text-color-pressed: #0c7a43; --text-color-focus: #36ad6a; --text-color-disabled: rgb(51, 54, 57); --border: none; --border-hover: none; --border-pressed: none; --border-focus: none; --border-disabled: none; --width: initial; --height: initial; --font-size: 14px; --padding: initial; --icon-size: 18px; --icon-margin: 6px; --border-radius: initial;"`;

src/input-number/tests/InputNumber.spec.ts

@@ -6,10 +6,8 @@ describe('n-input-number', () => {
   it('should work with import on demand', () => {
     mount(NInputNumber)
   })
-})
 
-describe('n-input-number', () => {
-  it('should work with `show-button` props', async () => {
+  it('should work with `show-button` prop', async () => {
     const wrapper = mount(NInputNumber)
     expect(wrapper.findComponent(NButton).exists()).toBe(true)