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()
  })
})

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

本文由博客一文多发平台 OpenWrite 发布！

来源：oschina

链接：https://my.oschina.net/u/4448260/blog/3162265

标签

popover