vue自动化单元测试

// 引用vue和需要测试的组件
import Vue from 'vue'
import HelloWorld from '@/components/HelloWorld'
// 创建测试套件，一个测试组件写一个测试套件
describe('HelloWorld.vue', () => {
  // 测试用例，用来测试不同的方法或者显示的内容
  it('should render correct contents', () => {
    const Constructor = Vue.extend(HelloWorld)
    const vm = new Constructor().$mount()
    // 判断页面中是否有msg所渲染出来的内容
    // 等价document.querySelector('.hello h1')
    expect(vm.$el.querySelector('.hello h1').textContent)
      .to.equal('Welcome to Your Vue.js App')
  })
})

 模仿微博的自动化测试代码：

import Vue from 'vue'
import SineWeibo from '@/components/SinaWeibo'
import {mount} from 'vue-test-utils'
// 创建测试套件
describe('SinaaWeibo.vue',()=>{
// 创建测试实例------点击发布按钮，发布新内容&&个人微博数量+1
  it('点击发布按钮，发布新内容&&个人微博数量+1',()=>{
    // 找到要测试的组件实例，进行挂载
    const wrapper=mount(SineWeibo);
    // 找到发表微博的输入内容
    const textArea=wrapper.find('.weibo-publish-wrapper textarea')
    // 发布按钮
    const buttonOfPublish = wrapper.find('.weibo-publish-wrapper button')
    // weiboNews是从mock中获取的数据，是微博的初始值
    const lengthOfWeiboNews = wrapper.vm.weiboNews.length;
    // 右边的关注/粉丝/微博和其数量：2是微博数
    const countOfMyWeibo=wrapper.vm.profileData[2].num;
    // 模拟新的微博内容
    wrapper.setData({newWeiboContent:{
        imgUrl: '../../static/image/profile.jpg',
        name: 'Lee_tanghui',
        resource: '刚刚 来自 网页版微博',
        content: '欢迎来到我的微博',
        images: []
      }})
    // 触发发布按钮事件
    buttonOfPublish.trigger('click')
    // 获取增加后的微博条数，和右边的微博数量
    const lengthOfWeiboNewsAfterPublish=wrapper.vm.weiboNews.length;
    const countOfMyWeiboAfterPublish=wrapper.vm.profileData[2].num
    //断言: 发布后的微博条数是在原来的基础上+1；
    expect(lengthOfWeiboNewsAfterPublish).to.equal(lengthOfWeiboNews + 1);
    //断言: 个人微博数量是在原来的基础上+1；
    expect(countOfMyWeiboAfterPublish).to.equal(countOfMyWeibo + 1);
  })
  // 测试实例：当文本框无内容时候，不能发表微博到列表，且弹出提示框
  it('当文本框中无内容时, 不能发布空微博到微博列表, 且弹出提示框',()=>{
    const wrapper=mount(SineWeibo);
    // 找到发布框内容
    const textArea = wrapper.find('.weibo-publish-wrapper textarea');
    // 找到发布按钮
    const buttonOfPublish = wrapper.find('.weibo-publish-wrapper button');
    // 获取下方微博条数
    const lengthOfWeiboNews = wrapper.vm.weiboNews.length;
    // 获取右边微博数
    const countOfMyWeibo = wrapper.vm.profileData[2].num;
    // 设置发表微博，但是content的内容为空
    //设置textArea的绑定数据为空
    wrapper.setData({newWeiboContent: {
        imgUrl: '../../static/image/profile.jpg',
        name: 'Lee_tanghui',
        resource: '刚刚 来自 网页版微博',
        content: '',
        images: []
      }});
    // 触发发布按钮
    buttonOfPublish.trigger('click');
    // 获取发表后的下方微博条数
    const lengthOfWeiboNewsAfterPublish = wrapper.vm.weiboNews.length;
    // 获取发表后的下右边微博数
    const countOfMyWeiboAfterPublish = wrapper.vm.profileData[2].num;
    // 断言：发表前后的微博条数是相等的
    //断言: 没有发布新内容
    expect(lengthOfWeiboNewsAfterPublish).to.equal(lengthOfWeiboNews);
    //断言: 个人微博数量不变
    expect(countOfMyWeiboAfterPublish).to.equal(countOfMyWeibo);
  });


  // 测试实例：当点击"关注", 个人头像下关注的数量会增加1个, 且按钮内字体变成"取消关注
   it('当点击"关注", 个人头像下关注的数量会增加1个, 且按钮内字体变成"取消关注',()=>{
      // 获取wrapper
     const wrapper = mount(SineWeibo);
     // 获取“关注”button
     const buttonOfAddAttendion = wrapper.find('.add');
     // 获取右边的关注数量
     const countOfMyAttention = wrapper.vm.profileData[0].num;
     // 触发“关注”button
     buttonOfAddAttendion.trigger('click');
     // 获取右边的关注数量
     const countOfMyAttentionAfterClick = wrapper.vm.profileData[0].num;
     // 断言1：右边的关注数量等于原来的+1；
     expect(countOfMyAttentionAfterClick).to.equal(countOfMyAttention + 1);
     // 断言2：button的text变为“取消关注”
     expect(buttonOfAddAttendion.text()).to.equal('取消关注');

   })


  // 测试实例：当点击"取消关注", 个人头像下关注的数量会减少1个, 且按钮内字体变成"关注
   it('当点击"取消关注", 个人头像下关注的数量会减少1个, 且按钮内字体变成"关注',()=>{
     const wrapper=mount(SineWeibo)
     // 找到“取消关注”按钮
     const buttonOfUnAttendion = wrapper.find('.cancel');
     // 获取右边关注人数
     const countOfMyAttention = wrapper.vm.profileData[0].num;
     // 触发“取消关注”按钮的点击事件
     buttonOfUnAttendion.trigger('click');
     // 获取右边关注人数
     const countOfMyAttentionAfterClick = wrapper.vm.profileData[0].num;
     //  断言1：右边的人数为原来的人数-1
     expect(countOfMyAttentionAfterClick).to.equal(countOfMyAttention - 1);
     //  断言2：cancel的text变成"关注"
     expect(buttonOfUnAttendion.text()).to.equal('关注');
   })

  it('当点击"收藏"时, 我的收藏会增加1个数量, 且按钮内文字变成"已收藏"', () => {
    const wrapper = mount(SineWeibo);
    const buttonOfCollect = wrapper.find('.uncollectedWeibo');
    const countOfMyCollect = Number(wrapper.find('.collect-num span').text());

    //触发点击事件
    buttonOfCollect.trigger('click');
    const countOfMyCollectAfterClick = Number(wrapper.find('.collect-num span').text());

    //断言: 我的收藏数量会加1
    expect(countOfMyCollectAfterClick).to.equal(countOfMyCollect + 1);
    //断言: 按钮内文字变成已收藏
    expect(buttonOfCollect.text()).to.equal('已收藏');
  })

  it('当点击"已收藏"时, 我的收藏会减少1个数量, 且按钮内文字变成"收藏"', () => {
    const wrapper = mount(SineWeibo);
    const buttonOfUnCollect = wrapper.find('.collectedWeibo');
    const countOfMyCollect = Number(wrapper.find('.collect-num span').text());

    //触发点击事件
    buttonOfUnCollect.trigger('click');
    const countOfMyCollectAfterClick = Number(wrapper.find('.collect-num span').text());

    //断言: 我的收藏数量会减1
    expect(countOfMyCollectAfterClick).to.equal(countOfMyCollect - 1 );
    //断言: 按钮内文字变成已收藏
    expect(buttonOfUnCollect.text()).to.equal('收藏');
  });

  it('当点击"已收藏"时, 我的收藏会减少1个数量, 且按钮内文字变成"收藏"', () => {
    const wrapper = mount(SineWeibo);
    const buttonOfUnCollect = wrapper.find('.collectedWeibo');
    const countOfMyCollect = Number(wrapper.find('.collect-num span').text());

    //触发点击事件
    buttonOfUnCollect.trigger('click');
    const countOfMyCollectAfterClick = Number(wrapper.find('.collect-num span').text());

    //断言: 我的收藏数量会减1
    expect(countOfMyCollectAfterClick).to.equal(countOfMyCollect - 1 );
    //断言: 按钮内文字变成已收藏
    expect(buttonOfUnCollect.text()).to.equal('收藏');
  });

  it('当点击"赞", 我的赞会增加1个数量, 且按钮内文字变成"取消赞"', () => {
    const wrapper = mount(SineWeibo);
    const buttonOfLike = wrapper.find('.dislikedWeibo');
    const countOfMyLike = Number(wrapper.find('.like-num span').text());

    //触发点击事件
    buttonOfLike.trigger('click');
    const countOfMyLikeAfterClick = Number(wrapper.find('.like-num span').text());

    //断言: 我的赞会增加1个数量
    expect(countOfMyLikeAfterClick).to.equal(countOfMyLike + 1);
    //断言: 按钮内文字变成取消赞
    expect(buttonOfLike.text()).to.equal('取消赞');
  });

  it('当点击"取消赞", 我的赞会减少1个数量, 且按钮内文字变成"赞"', () => {
    const wrapper = mount(SineWeibo);
    const buttonOfDislike = wrapper.find('.likedWeibo');
    const countOfMyLike = Number(wrapper.find('.like-num span').text());

    //触发点击事件
    buttonOfDislike.trigger('click');
    const countOfMyLikeAfterClick = Number(wrapper.find('.like-num span').text());

    //断言: 我的赞会增加1个数量
    expect(countOfMyLikeAfterClick).to.equal(countOfMyLike - 1);
    //断言: 按钮内文字变成取消赞
    expect(buttonOfDislike.text()).to.equal('赞');
  });
})

模仿微博的vue 代码：

<template>
  <div class="weibo-page">
    <nav>
      <span class="weibo-logo"></span>
      <div class="search-wrapper">
        <input type="text" placeholder="大家正在搜: 李棠辉的文章好赞!">
        <img v-if="!iconActive" @mouseover="mouseOverToIcon" src="../../static/image/search.png" alt="搜索icon">
        <img v-if="iconActive" @mouseout="mouseOutToIcon" src="../../static/image/search-active.png" alt="搜索icon">
      </div>
    </nav>
    <div class="main-container">
      <aside class="aside-nav">
        <ul>
          <li :class="{ active: isActives[indexOfContent] }" v-for="(content, indexOfContent) in asideTab" :key="indexOfContent" @click="tabChange(indexOfContent)">
            <span>{{content}}</span>
            <span class="count">
              <span v-if="indexOfContent === 1" class="collect-num">
              (
                <span>{{collectNum}}</span>
              )
              </span>
              <span v-if="indexOfContent === 2" class="like-num">
              (
                <span>{{likeNum}}</span>
              )
              </span>
            </span>
          </li>
        </ul>
      </aside>
      <main class="weibo-content">
        <div class="weibo-publish-wrapper">
          <img src="../../static/image/tell-people.png"></img>
          <textarea v-model="newWeiboContent.content"></textarea>
          <button @click="publishNewWeiboContent">发布</button>
        </div>
        <div
          class="weibo-news"
          v-for="(news, indexOfNews) in weiboNews"
          :key="indexOfNews">
          <div class="content-wrapper">
            <div class="news-title">
            <div class="news-title__left">
              <img :src="news.imgUrl">
              <div class="title-text">
                <div class="title-name">{{news.name}}</div>
                <div class="title-time">{{news.resource}}</div>
              </div>
            </div>
            <button
              class="news-title__right add"
              v-if="news.attention === false"
              @click="attention(indexOfNews)">
              <i class="fa fa-plus"></i>
              关注
            </button>
             <button
              class="news-title__right cancel"
              v-if="news.attention === true"
              @click="unAttention(indexOfNews)">
              <i class="fa fa-close"></i>
              取消关注
            </button>
          </div>
          <div class="news-content">{{news.content}}</div>
          <div class="news-image" v-if="news.images.length">
            <img
            v-for="(img, indexOfImg) in news.images"
            :key="indexOfImg"
            :src="img">
          </div>
          </div>
          <ul class="news-panel">
            <li
              :class="{uncollectedWeibo: !news.collect, collectedWeibo: news.collect}"
              @click="handleCollect(indexOfNews)">
              <i class="fa fa-star-o" :class="{collected: news.collect }"></i>
              {{news.collect ? "已收藏" : '收藏'}}
            </li>
            <li>
              <i class="fa fa-external-link"></i>
              转发
            </li>
            <li>
              <i class="fa fa-commenting-o"></i>
              评论
            </li>
            <li
              :class="{dislikedWeibo: !news.like, likedWeibo: news.like}"
              @click="handleLike(indexOfNews)">
              <i class="fa fa-thumbs-o-up" :class="{liked: news.like}"></i>
              {{news.like ? '取消赞' : '赞'}}
            </li>
          </ul>
        </div>

      </main>
      <aside class="aside-right">
        <div class="profile-wrapper">
          <div class="profile-top">
            <img src="../../static/image/profile.jpg">
          </div>
          <div class="profile-bottom">
            <div class="profile-name">Lee_tanghui</div>
            <ul class="profile-info">
              <li
                v-for="(profile, indexOfProfile) in profileData"
                :key="indexOfProfile">
                <div class="number">{{profile.num}}</div>
                <div class="text">{{profile.text}}</div>
              </li>
            </ul>
          </div>
        </div>
      </aside>
    </div>
    <footer>
       Wish you like my blog! --- LITANGHUI
    </footer>
  </div>
</template>

<script>
  //引入假数据
  import * as mockData from '../mock-data.js'

  export default {
    created() {
      //模拟获取数据
      this.profileData = mockData.profileData;
      this.weiboNews = mockData.weiboNews;
      this.collectNum = mockData.collectNum;
      this.likeNum = mockData.likeNum;

    },
    data() {
      return {
        iconActive: false,
        asideTab: ["首页", "我的收藏", "我的赞"],
        isActives: [true, false, false],
        profileData: [],
        weiboNews: [],
        collectNum: 0,
        likeNum: 0,
        newWeiboContent:   {
          imgUrl: '../../static/image/profile.jpg',
          name: 'Lee_tanghui',
          resource: '刚刚 来自 网页版微博',
          attention:false,
          content: '',
          images: []
        },
      }
    },
    methods: {
      mouseOverToIcon() {
        this.iconActive = true;
      },
      mouseOutToIcon() {
        this.iconActive = false;
      },
      tabChange(indexOfContent) {
        this.isActives.forEach((item, index) => {
          index === indexOfContent ?
            this.$set(this.isActives, index, true) :
            this.$set(this.isActives, index, false);
        })
      },
      publishNewWeiboContent() {
        if(!this.newWeiboContent.content) {
          alert('请输入内容!')
          return;
        }
        const newWeibo = JSON.parse(JSON.stringify(this.newWeiboContent));
        this.weiboNews.unshift(newWeibo);
        this.newWeiboContent.content = '';
        this.profileData[2].num++;
      },
      attention(index) {
        this.weiboNews[index].attention = true;
        this.profileData[0].num++;
      },
      unAttention(index) {
        this.weiboNews[index].attention = false;
        this.profileData[0].num--;
      },
      handleCollect(index) {
        this.weiboNews[index].collect = !this.weiboNews[index].collect;
        this.weiboNews[index].collect ?
        this.collectNum++ :
        this.collectNum--;
      },
      handleLike(index) {
        this.weiboNews[index].like = !this.weiboNews[index].like;
        this.weiboNews[index].like ?
        this.likeNum++ :
        this.likeNum--;
      }
    }
  }
</script>

<style lang="less">
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  .weibo-page {
    display: flex;
    flex-direction: column;
  }

  nav {
    display: flex;
    height: 60px;
    line-height: 60px;
    background-color: #f0f0f0;
    align-items: center;
    .weibo-logo {
      margin-left: 13%;
      width: 100px;
      height: 28px;
      background: url("../../static/image/WB_logo.png") no-repeat;
      cursor: pointer;
    }
    .search-wrapper {
      display: flex;
      position: relative;
      width: 25%;
      input {
        width: 100%;
        height: 24px;
        padding-left: 10px;
      }
      img {
        position: absolute;
        right: 10px;
        top: 4px;
        width: 20px;
        height: 20px;
        cursor: pointer;
      }
    }

  }

  .main-container {
    display: flex;
    justify-content: center;
    background-color: #000;
    padding-top: 16px;
    color: #fff;
    .aside-nav {
      width: 11.31%;
      ul {
        list-style: none;
        li {
          height: 34px;
          line-height: 34px;
          padding-left: 10px;
          cursor: pointer;
          font-weight: bold;
          background-color: rgb(19, 19, 19);
        }
        li:hover {
          background-color: rgb(66, 66, 66);
        }
        .active {
          background-color: rgb(66, 66, 66);
        }
      }
    }
    .weibo-content {
      width: 45.41%;
      color: #000;
      .weibo-publish-wrapper {
        background: #fff;
        position: relative;
        padding: 10px 10px 54px 10px;
        textarea {
          display: block;
          width: 100%;
          height: 95px;
          padding: 10px;
        }
        button {
          position: absolute;
          right: 10px;
          bottom: 10px;
          width: 82px;
          height: 30px;
          background: #ff8140;
          border: 1px solid #f77c3d;
          color: #fff;
          box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25);
          cursor: pointer;
        }
      }
      .weibo-news {
        background: #fff;
        margin: 10px 0;
        .content-wrapper {
          padding: 20px 20px 4px 20px;
        }
        .news-title {
          display: flex;
          justify-content: space-between;
          .news-title__left {
            display: flex;
            img {
              width: 50px;
              height: 50px;
              vertical-align: text-top;
            }
            .title-text {
              display: flex;
              flex-direction: column;
              justify-content: space-around;
              margin-left: 10px;
            }
            .title-name {
              color: #333;
              font-size: 14px;
              font-weight: 700;
            }
            .title-time {
              color: #808080;
              margin-bottom: 2px;
              font-size: 12px;
            }
          }
          .news-title__right {
            align-self: center;
            width: 58px;
            height: 22px;
            line-height: 22px;
            background: #fff;
            border: 1px solid #d9d9d9;
            cursor: pointer;
            img {
              position: relative;
              left: 1px;
              top: 2px;
            }
            i {
              color: #ff8140;
            }
          }
          .cancel {
            width: 86px;
          }
        }
        .news-content {
          padding: 10px 0 10px 60px;
          font-size: 14px;
        }
        .news-image {
          padding: 10px 0 0 60px;
          img {
            width: 110px;
            height: 110px;
            margin-right: 10px;
          }
        }
        .news-panel {
          display: flex;
          list-style: none;
          border-top: 1px solid #f2f2f5;
          li {
            width: 25%;
            height: 22px;
            line-height: 22px;
            margin: 7px 0;
            text-align: center;
            border-left: 1px solid #f2f2f5;
            color: #808080;
            cursor: pointer;
            .collected {
              color: #ff8140;
            }
            .like {
              color: #ff8140;
            }
          }
        }
      }
    }
    .aside-right {
      width: 17.41%;
      margin-left: 10px;
      .profile-top {
        position: relative;
        height: 75px;
        background: url('../../static/image/profile-bg.jpg');
        img {
          position: absolute;
          bottom: -30px;;
          left: 50%;
          margin-left: -30px;
          width: 60px;
          height: 60px;
          border-radius: 50%;
        }
      }
      .profile-bottom {
        height: 118px;
        padding-top: 30px;
        background: #fff;
        color: #000;
        .profile-name {
          text-align: center;
          font-weight: 700;
        }
        .profile-info {
          display: flex;
          list-style: none;
          padding-top: 10px;
          li {
            width: 33.333%;
            border-left: 1px solid #f2f2f5;
            cursor: pointer;
            div {
              text-align: center;
            }
            .number{
              font-weight: 700;
            }
          }
        }
      }
    }
  }

  footer {
    height: 100px;
    line-height: 100px;
    text-align: center;
    font-size: 12px;
    font-weight:700;
  }
</style>