weex-ui-demo/test/unit/specs/button.spec.js

A rich interaction, lightweight, high performance UI library based on Weex

import Button from 'packages/i-button'
import { shallowMount } from '@vue/test-utils'
import { px2Rem } from '../utils'

describe('i-button', () => {
  it('test props:text', () => {
    const wrapper = shallowMount(Button, {
      propsData: {
        text: 'cannel'
      }
    })
    expect(wrapper.props().text).to.equal('cannel')
    expect(wrapper.find('.btn-text').text()).to.equal('cannel')
  })
  it('test props:size', () => {
    const wrapper = shallowMount(Button, {
      propsData: {
        size: 'big'
      }
    })
    expect(wrapper.vm.mrBtnStyle).to.have.property('width', px2Rem('339px'))
    expect(wrapper.vm.mrBtnStyle).to.have.property('height', px2Rem('70px'))
    expect(wrapper.vm.mrTextStyle).to.have.property('fontSize', px2Rem('32px'))
  })
  it('test props:type', () => {
    const wrapper = shallowMount(Button, {
      propsData: {
        type: 'white'
      }
    })
    if (wrapper.props().type === 'white') {
      expect(wrapper.vm.mrBtnStyle).to.have.property('backgroundColor', '#FFFFFF')
      expect(wrapper.vm.mrBtnStyle).to.have.property('borderColor', '#A5A5A5')
      // postcss-plugin-px2rem to leave 1px alone.
      expect(wrapper.vm.mrBtnStyle).to.have.property('borderWidth', '1px')
    } else {
      expect(wrapper.vm.mrBtnStyle).to.have.property('backgroundColor', '#FFC900')
    }
  })
  it('test props:disabled', () => {
    const wrapper = shallowMount(Button, {
      propsData: {
        disabled: true
      }
    })
    if (wrapper.props().disabled) {
      expect(wrapper.vm.mrBtnStyle).to.have.property('borderWidth', '0')
      expect(wrapper.vm.mrTextStyle).to.have.property('color', '#FFFFFF')
    }
  })
  it('test props:isHighlight', () => {
    const wrapper = shallowMount(Button, {
      propsData: {
        isHighlight: true
      }
    })
    expect(wrapper.classes('i-btn-highlight')).to.be.true
  })
  it('test props:shadow', () => {
    const wrapper = shallowMount(Button, {
      propsData: {
        shadow: true,
        type: 'blue'
      }
    })
    expect(wrapper.vm.mrBtnStyle).to.have.property('boxShadow', '0px 8px 15px rgba(20, 130, 220, 0.3)')
  })
  it('test methods:onClicked', () => {
    const wrapper = shallowMount(Button)
    wrapper.vm.onClicked()
    expect(wrapper.emitted().buttonClicked).to.be.ok
  })
  it('test methods:_longpress', () => {
    const wrapper = shallowMount(Button)
    wrapper.vm._longpress()
    expect(wrapper.emitted().onlongpress).to.be.ok
  })
})