美文网首页
popover组件测试用例

popover组件测试用例

作者: Ories | 来源:发表于2020-01-31 16:31 被阅读0次

    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

    相关文章

      网友评论

          本文标题:popover组件测试用例

          本文链接:https://www.haomeiwen.com/subject/sfwgthtx.html