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>