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

vue自动化单元测试的更多相关文章

  1. Vue自动化路由(基于Vue-Router)开篇

    vue自动化路由 好久不见~ 若羽又开篇Vue的内容了. 年初的时候发布了第一版的ea-router自动化路由库,欢迎大家安装使用.[Github地址] [npm地址] 经历一年的使用.还是发现了不少 ...

  2. TestNg JAVA 自动化单元测试框架Demo

    TestNg TestNg 是java的一个自动化单元测试框架 参考:http://testng.org/doc/index.html 环境准备 既然是java 的自动化单元测试框架,就必须要有jav ...

  3. Keil中搭建自动化单元测试框架Unity

    前言: 虽然一些C++的自动化单元测试框架也能用来C语言单元测试,但那样我们编写C语言程序时需要符合C++的标准,这样有一些C的特性是无法使用的,限制C的特性使用不太好,于是找了一个全部用C实现的自动 ...

  4. 测者的测试技术手册:AI的自动化单元测试

    测者的测试技术手册:AI的自动化单元测试 谈新技术:AI的自动化单元测试    

  5. vue 组件开发、vue自动化工具、axios使用与router的使用(3)

    一. 组件化开发 1.1 组件[component] 在网页中实现一个功能,需要使用html定义功能的内容结构,使用css声明功能的外观样式,还要使用js定义功能的特效,因此就产生了一个功能先关的代码 ...

  6. 搭建Karma+Jasmine的自动化单元测试

    最近在打算将以前的代码进行重构,过程中发现自己不写自动化测试代码,而是手动的写,这样并不好,所以就学了Karma+Jasmine的自动化单元测试,以后写代码尽量要写自动化单元测试,也要测一下istan ...

  7. 学习Karma+Jasmine+istanbul+webpack自动化单元测试

    学习Karma+Jasmine+istanbul+webpack自动化单元测试 1-1. 什么是karma?  Karma 是一个基于Node.js的Javascript测试执行过程管理工具.该工具可 ...

  8. Vue之vue自动化工具快速搭建单页项目目录

    1 生成项目目录 使用vue自动化工具可以快速搭建单页应用项目目录. 该工具为现代化的前端开发工作流提供了开箱即用的构建配置.只需几分钟即可创建并启动一个带热重载.保存时静态检查以及可用于生产环境的构 ...

  9. 在Python中进行自动化单元测试的教程

    From: https://www.jb51.net/article/64119.htm 一.软件测试 大型软件系统的开发是一个很复杂的过程,其中因为人的因素而所产生的错误非常多,因此软件在开发过程必 ...

随机推荐

  1. Swift Modules for React Native

    React Native is an Objective-C application framework that bridges JavaScript applications running in ...

  2. python之smtplib模块 发送邮件

    # -*- coding: utf-8 -*- #python 27 #xiaodeng #smtplib模块 发送邮件 import smtplib from email.mime.text imp ...

  3. map()3

    # -*- coding: utf-8 -*- #python 27 #xiaodeng #map()3 ''' map(...) map(function, sequence[, sequence, ...

  4. MassiGra045 简体中文化|打开图片很快

    MassiGra045 简体中文化,是一款对图片的打开预览很高效的工具,据传是日本开发的. 本人之前一直使用,唯一有点缺点就是不能旋转图片. 图片预览 峰回路转: http://pan.baidu.c ...

  5. iOS-高仿通讯录之商品索引排序搜索

    概述 TableView添加右侧索引, 将数据按照索引分组排序, 并添加搜索功能且在搜索界面复用当前页面. 详细 代码下载:http://www.demodashi.com/demo/10696.ht ...

  6. 笨鸟先飞之Java(一)--使用struts2框架实现文件上传

    无论是.net还是Java,我们最常接触到的就是文件的上传和下载功能,在Java里要实现这两个经常使用功能会有非常多种解决方案,可是struts2的框架却能给我们一个比較简单的方式,以下就一起来看吧: ...

  7. js ie下有效 showModalDialog 、showModelessDialog

    <input type="button" value="打开选择输入框"/> <script type="text/javascri ...

  8. 将数据库dbcp连接池改为c3p0连接池(草稿,别点)

    D:\Develop\apache-tomcat-7.0.52\bin\catalina.bat run[2017-12-26 02:31:29,174] Artifact pers:war expl ...

  9. POJ 3233 Matrix Power Series (矩阵乘法)

    Matrix Power Series Time Limit: 3000MS   Memory Limit: 131072K Total Submissions: 11954   Accepted:  ...

  10. Linux-Tmux使用初体验

    Tmux使用初体验 tmux #开启tmux tmux ls #显示已有tmux列表(ctrl+b s) tmux attach-session -t 数字 #选择tmux ctrl+b c 创建一个 ...