// 引用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>

最新文章

  1. 【CSS】其他CSS属性和特性
  2. 项目里的jquery.min.js错误
  3. 使用jigdo下载debian [windows环境下]
  4. Linux老是提示compat-libstdc++ is not installed的原因
  5. 如何用 Nodejs 分析一个简单页面
  6. 那些年我们学过的PHP黑魔法
  7. iOS中的NSTimer 和 Android 中的Timer
  8. [转]Android ORM系列之GreenDao最佳实践
  9. (转)asp.net 使用cookie完成记住密码自动登录
  10. 2007LA 3902 网络(树+贪心)
  11. 九，微信小程序开发浅谈
  12. vue解决加载闪烁问题
  13. react + antd 实现打印功能（踩了不少坑）
  14. python---通过递归和动态规划策略解决找零钱问题
  15. Codeforces 1100 F - Ivan and Burgers
  16. 算法-最通俗易懂的KMP算法详解
  17. js call 和 apply方法记录
  18. 【Spring】SpringMVC之拦截器
  19. Mongo如何导出 CSV文件
  20. (转)DB2 HADR 监控详解

热门文章

  1. TOMCAT清理
  2. def函数之另类用法
  3. Redis学习（4）-数据类型，string，hash
  4. 改变maven父子项目视图为树状
  5. Android蓝牙A2DP连接实现
  6. spring MVC之构造ModelAndView对象
  7. python接口自动化（二十七）--html 测试报告——上（详解）
  8. ArchLinux新版本(pacstrap安装)及国内较优源推荐
  9. HDUOJ----专题训练
  10. HDUOJ--1159Common Subsequence