popover组件测试用例

1. 解决小三角形引起的抖动问题。

    // 以一个为例
    &.position-bottom {
    margin-top: 10px;
    &::before, &::after{
      left: 10px;
    }
    &::before {
      border-top: none;
      border-bottom-color: black;
      /*border-color: black;*/
      bottom: 100%;
    }
    &::after {
      border-top: none;
      border-bottom-color: white;
      /*border-color: black;*/
      bottom: calc(100% - 1px);
    }
  }

2. 实现关闭功能,用 slot-scope,把 close 传给插槽

    // popover.vue
    // 第一步在slot上传一个属性
    <slot name="content" :close="close"></slot>

    // 第二步结构一下close,然后用就可以了
    // index.html
    <g-popover position="bottom">
      <template slot="content" slot-scope="{close}">
        <div><g-button @click="close">关闭</g-button></div>
      </template>
      <g-button>点我1</g-button>
    </g-popover>

3. popover 的第一个测试用例-position

it('可以设置position.', (done) => {
    Vue.component('g-popover', Popover)
    const div = document.createElement('div')
    document.body.appendChild(div)
    div.innerHTML = `
    <g-popover position="bottom" ref="a">
      <template slot="content">
        弹出内容
      </template>
      <button>点我</button>
    </g-popover>
    `
    const vm = new Vue({ // 这个vm不是组件,这个vm是一个div对应的实例,div里面才是popover组件
      el: div
    })
    vm.$el.querySelector('button').click()
    vm.$nextTick(() => {
      const {contentWrapper} = vm.$refs.a.$refs
      expect(contentWrapper.classList.contains('position-top')).to.be.false
      done()
    })
  })

4. 测试 mouseEnter 事件

  • 先确认用 dispatchEvent 的方式是可以触发 hover 事件的
    <body>
      <div id=xxx>
        hihihi
      </div>
      <button style="marin-top:20px;" id=button>click me</button>
    </body>

    xxx.addEventListener('mouseenter',function(){
      console.log('hi')
    })

    button.onclick=function(){
      let event = new Event('mouseenter');
      xxx.dispatchEvent(event)
    }
  • 可以设置 trigger 的测试用例有问题,先跳过,it 前面+一个 x 可以跳过

    xit('可以设置 trigger.', (done) => {
    Vue.component('g-popover', Popover)
    const div = document.createElement('div')
    document.body.appendChild(div)
    div.innerHTML = `
    <g-popover trigger="hover" ref="a">
      <template slot="content">
        弹出内容
      </template>
      <button>点我</button>
    </g-popover>
    `
    const vm = new Vue({ // 这个vm不是组件,这个vm是一个div对应的实例,div里面才是popover组件
      el: div
    })
    let event = new Event('mouseenter');
    vm.$el.dispatchEvent(event)
    vm.$nextTick(() => {
      const {contentWrapper} = vm.$refs.a.$refs
      expect(contentWrapper).to.be.exist
      done()
    })
    })
    

最后,个人微信,欢迎交流!

wechat0.jpg

声明:该文章系转载,转载该文章的目的在于更广泛的传递信息,并不代表本网站赞同其观点,文章内容仅供参考。

本站是一个个人学习和交流平台,网站上部分文章为网站管理员和网友从相关媒体转载而来,并不用于任何商业目的,内容为作者个人观点, 并不代表本网站赞同其观点和对其真实性负责。

我们已经尽可能的对作者和来源进行了通告,但是可能由于能力有限或疏忽,导致作者和来源有误,亦可能您并不期望您的作品在我们的网站上发布。我们为这些问题向您致歉,如果您在我站上发现此类问题,请及时联系我们,我们将根据您的要求,立即更正或者删除有关内容。本站拥有对此声明的最终解释权。