qunit.js初试
看了下mbraak-simple-data-grid写的单元测试，感觉还是很好入手的
用module函数定义模块
用test函数定义测试方法
用equal、ok(判断是否为真)等方法做断言判断
用setup方法做前置条件设置
用teardown做后置条件设置
贴一下mbraak-simple-data-grid测试完的结果界面 和其测试代码，详细的可以到其主页下载整个代码包
测试页的html代码
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Simple data grid - Test</title> <link rel="stylesheet" href="../extra/bower_components/qunit/qunit/qunit.css"> <!--[if lt IE 9]>
<script src="../extra/jquery-1.11.3.min.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script src="../extra/bower_components/jquery/dist/jquery.min.js"></script>
<!--<![endif]--> <script src="../extra/bower_components/jquery-mockjax/dist/jquery.mockjax.js"></script>
<script src="../extra/bower_components/qunit/qunit/qunit.js"></script>
<script src="../extra/bower_components/blanket/dist/qunit/blanket.js"></script>
<script src="../simple.datagrid.js" data-cover></script>
<script src="test.js"></script>
</head>
<body>
<div id="qunit"></div>
</body>
</html>
测试页的js代码
$(function() {
function formatValues($elements) {
var values = $elements.map(function() {
return $(this).text();
});
return values.toArray().join(';');
}
function getRowValues($table) {
return formatValues(
$table.find('tbody td')
);
}
function formatColumnNames($table) {
var columns = $table.simple_datagrid('getColumns');
var values = $.map(columns, function(column) {
return column.key;
});
return values.join(';');
}
module('utils');
test('slugify', function() {
slugify = window.SimpleDataGrid.slugify;
equal(slugify(''), '');
equal(slugify('abc'), 'abc');
equal(slugify('Abc'), 'abc');
equal(slugify('abc def'), 'abc_def');
equal(slugify('123'), '123');
equal(slugify('abc-def'), 'abc_def');
equal(slugify('abc_def'), 'abc_def');
});
module('simple-data-grid', {
setup: function(e) {
$('body').append(
'<table id="table1">'+
' <thead>'+
' <th>Name</th>'+
' <th>Latin name</th>'+
' </thead>'+
'</table>'
);
},
teardown: function() {
var $table1 = $('#table1');
$table1.simple_datagrid('destroy');
$table1.remove();
$.mockjax.clear();
}
});
test('get column data from <th> elements', function() {
var $table1 = $('#table1');
// Change the key of the first column to 'name1' by setting the 'data-key' property
var $name_th = $table1.find('th:first');
$name_th.attr('data-key', 'name1');
// init widget
$table1.simple_datagrid();
// check column data
var columns = $('#table1').simple_datagrid('getColumns');
equal(columns.length, 2);
equal(columns[0].title, 'Name');
equal(columns[0].key, 'name1'); // from data-key
equal(columns[1].title, 'Latin name');
equal(columns[1].key, 'latin_name'); // slug of 'Latin name'
});
test('get column data from options', function() {
// setup
var $table1 = $('#table1');
// 1. Init columns in javascript; this updates the existing columns
$table1.simple_datagrid({
columns: [
{
key: 'latin_name',
title: 'Latin'
}
]
});
var columns = $table1.simple_datagrid('getColumns');
equal(columns.length, 2);
equal(columns[1].key, 'latin_name');
equal(columns[1].title, 'Latin');
$table1.simple_datagrid('destroy');
// 2. Init columns in javascript; first remove thead
$table1.find('thead').remove();
$table1.simple_datagrid({
columns: [
'Column1',
{
title: 'Column2',
key: 'c2'
},
{
title: 'Column3'
}
]
});
// check column data
columns = $('#table1').simple_datagrid('getColumns');
equal(columns.length, 3);
equal(columns[0].title, 'Column1');
equal(columns[0].key, 'column1'); // slug of name
equal(columns[1].title, 'Column2');
equal(columns[1].key, 'c2'); // defined in options
equal(columns[2].key, 'column3');
equal(columns[2].title, 'Column3');
});
test('get data from array', function() {
var $table1 = $('#table1');
// 1. row is an array
$table1.simple_datagrid({
data: [
['Avocado', 'Persea americana']
]
});
equal(getRowValues($table1), 'Avocado;Persea americana');
// 2. make empty
$table1.simple_datagrid('loadData', []);
equal(getRowValues($table1), '');
// 3. row is an object
$table1.simple_datagrid(
'loadData',
[
{
name: "Bell pepper",
'latin_name': "Capsicum annuum"
},
{
name: 'Tomatillo' // no latin-name
}
]
);
equal(getRowValues($table1), 'Bell pepper;Capsicum annuum;Tomatillo;');
// 4. invalid data
$table1.simple_datagrid('loadData', '');
});
test('get data from ajax', function() {
// setup
var $table1 = $('#table1');
$table1.attr('data-url', '/api/fruits/');
$.mockjax({
url: '*',
responseText: '[["Winter melon", "Benincasa hispida"]]'
});
$table1.bind(
'datagrid.load_data', function() {
start();
equal(
getRowValues($table1),
'Winter melon;Benincasa hispida'
);
}
);
// -- init table
$table1.simple_datagrid();
stop();
});
test('get data from ajax; define url in options', function() {
// setup
var $table1 = $('#table1');
$.mockjax({
url: '*',
responseText: [
["Cucumber", "Cucumis sativus"]
]
});
$table1.bind(
'datagrid.load_data', function() {
start();
equal(
getRowValues($table1),
'Cucumber;Cucumis sativus'
);
}
);
// -- init table
$table1.simple_datagrid({
url: '/api/fruits/'
});
stop();
});
test('getSelectedRow', function() {
// setup
var $table1 = $('#table1');
$table1.simple_datagrid({
data: [
{
name: 'Avocado',
'latin_name': 'Persea americana',
id: 200
},
{
name: 'Bell pepper',
'latin_name': 'Capsicum annuum',
id: 201
}
]
});
// 1. no selection
equal($table1.simple_datagrid('getSelectedRow'), null);
// 2. select second row
$table1.find('tbody tr:eq(1) td:first').click();
ok($('tbody tr:eq(1)').hasClass('sdg-selected'));
equal($table1.simple_datagrid('getSelectedRow').id, 201);
// 2. select first row
$table1.find('tbody tr:eq(0) td:first').click();
ok($('tbody tr:eq(0)').hasClass('sdg-selected'));
ok(! $('tbody tr:eq(1)').hasClass('sdg-selected'));
equal($table1.simple_datagrid('getSelectedRow').id, 200);
});
test('header html', function() {
// setup
var $table1 = $('#table1');
$table1.simple_datagrid();
// 1. check html
equal(
formatValues($table1.find('thead th')),
'Name;Latin name'
);
var keys = $table1.find('thead th').map(function() {
return $(this).data('key');
});
equal(keys.toArray().join(' '), 'name latin_name');
});
test('pagination', function() {
// todo: look for better definition of the test
// setup
function getResponse(settings) {
var page = settings.data.page || 1;
var total_pages = 100;
var rows_per_page = 5;
var rows = [];
var index = (page - 1) * rows_per_page + 1;
for (var i=0; i<rows_per_page; i++) {
rows.push({
name: 'n' + index,
'latin_name': 'l' + index
});
index += 1;
}
this.responseText = {
total_pages: total_pages,
rows: rows
};
}
$.mockjax({
url: '*',
response: getResponse
});
var $table1 = $('#table1');
// -- init table
$table1.simple_datagrid({ url: '/my_data/' });
function runSteps($table, steps) {
stop();
var load_count = 0;
$table1.bind(
'datagrid.load_data',
function() {
var step_function = steps[load_count];
step_function();
load_count += 1;
if (load_count == steps.length) {
start();
}
}
);
}
runSteps(
$table1,
[
function() {
// step 1: expect first page
equal(
formatValues($table1.find('tbody td')),
'n1;l1;n2;l2;n3;l3;n4;l4;n5;l5'
);
// go to next page
$table1.find('.sdg-pagination a:last').click();
},
function() {
// step 2: expect second page
equal(
getRowValues($table1),
'n6;l6;n7;l7;n8;l8;n9;l9;n10;l10'
);
// go to last page
$table1.find('.sdg-pagination a:eq(10)').click();
},
function() {
// expect last page
equal(
getRowValues($('#table1')),
'n496;l496;n497;l497;n498;l498;n499;l499;n500;l500'
);
}
]
);
});
test('sorting', function() {
function getResponse(settings) {
var page = settings.data.page || 1;
var order_by = settings.data.order_by;
var sortorder = settings.data.sortorder;
var data = [];
if (order_by == 'name') {
if (sortorder == 'asc') {
data = [
['Avocado', 'Persea americana'],
['Bell pepper', 'Capsicum annuum'],
['Eggplant', 'Solanum melongena']
];
}
else if (sortorder == 'desc') {
data = [
['Eggplant', 'Solanum melongena'],
['Bell pepper', 'Capsicum annuum'],
['Avocado', 'Persea americana']
];
}
}
else if (order_by == 'latin_name') {
if (sortorder == 'asc') {
data = [
['Bell pepper', 'Capsicum annuum'],
['Avocado', 'Persea americana'],
['Eggplant', 'Solanum melongena']
];
}
else if (sortorder == 'desc') {
data = [
['Eggplant', 'Solanum melongena'],
['Avocado', 'Persea americana'],
['Bell pepper', 'Capsicum annuum']
];
}
}
this.responseText = data;
}
var $table1 = $('#table1');
function format_first_columns() {
var values = $table1.find('tbody tr').map(
function() {
return $(this).find('td:eq(0)').text();
}
);
return values.toArray().join(';');
}
$.mockjax({
url: '*',
response: getResponse
});
var load_count = 0;
$table1.bind(
'datagrid.load_data',
function() {
if (load_count == 0) {
equal(format_first_columns(), 'Avocado;Bell pepper;Eggplant');
// -- click on 'name' -> sort descending
$table1.find('th:eq(0) a').click();
}
else if (load_count == 1) {
equal(format_first_columns(), 'Eggplant;Bell pepper;Avocado');
// -- click on 'latin-name' -> sort ascending
$table1.find('th:eq(1) a').click();
}
else if (load_count == 2) {
equal(format_first_columns(), 'Bell pepper;Avocado;Eggplant');
// -- click on 'latin-name' -> sort descending
$table1.find('th:eq(1) a').click();
}
else if (load_count == 3) {
equal(format_first_columns(), 'Eggplant;Avocado;Bell pepper');
// -- click on 'latin-name' -> sort ascending
$table1.find('th:eq(1) a').click();
}
else {
start();
}
load_count += 1;
}
);
// -- init tree; order by name
$table1.simple_datagrid({
url: '/fruits/',
order_by: 'name'
});
stop();
});
test('reload', function() {
// setup
var $table1 = $('#table1');
$table1.simple_datagrid({
data: [
['Avocado', 'Persea americana']
]
});
equal(getRowValues($table1), 'Avocado;Persea americana');
// 1. empty html
$table1.find('tbody tr').detach();
equal(getRowValues($table1), '');
// 2. reload
$table1.simple_datagrid('reload');
equal(getRowValues($table1), 'Avocado;Persea americana');
});
test('setParameter', function() {
// setup
stop();
var response_count = 0;
function getResponse(settings) {
var my_param = settings.data.my_param;
if (response_count == 0) {
equal(my_param, undefined);
}
else if (response_count == 1) {
equal(my_param, 'abc');
}
response_count += 1;
this.responseText = [
['Avocado', 'Persea americana']
];
}
$.mockjax({
url: '*',
response: getResponse
});
var $table1 = $('#table1');
var load_count = 0
$table1.bind(
'datagrid.load_data',
function() {
if (load_count == 0) {
// -- set parameter and reload
$table1.simple_datagrid('setParameter', 'my_param', 'abc');
$table1.simple_datagrid('reload');
}
else if (load_count == 1) {
start();
}
load_count += 1;
}
);
$table1.simple_datagrid({
url: '/fruits/'
});
});
test('setCurrentPage', function() {
// setup
stop();
var response_count = 0;
function getResponse(settings) {
var page = settings.data.page;
if (response_count == 0) {
equal(page, 1);
}
else if (response_count == 1) {
equal(page, 2);
}
response_count += 1;
this.responseText = [
['Avocado', 'Persea americana']
];
}
$.mockjax({
url: '*',
response: getResponse
});
var $table1 = $('#table1');
var load_count = 0
$table1.bind(
'datagrid.load_data',
function() {
if (load_count == 0) {
// -- set current page and reload
$table1.simple_datagrid('setCurrentPage', 2);
$table1.simple_datagrid('reload');
}
else if (load_count == 1) {
start();
}
load_count += 1;
}
);
$table1.simple_datagrid({ url: '/fruits/' });
});
test('table with existing elements', function() {
// Test with a table that already has rows and a footer.
// The existing elements must be overwritten.
// setup
var $table1 = $('#table1');
$table1.append('<tbody><tr><td>abc</td></tr></tbody');
$table1.append('<tfoot><tr><td>my footer</td></tfoot>');
// 1. init table
$table1.simple_datagrid({
data: [
['Avocado', 'Persea americana']
]
});
equal(getRowValues($table1), 'Avocado;Persea americana');
equal($table1.find('tfoot').children().length, 0);
});
test('table with empty head', function() {
// setup
var $table1 = $('#table1');
$table1.find('thead').remove();
// 1. init table
$table1.simple_datagrid({
columns: ['Column1'],
data: [['abc']]
});
equal(
$table1.find('thead th').text(),
'Column1'
);
});
test('on_generate', function() {
// Test the 'on_generate' option of a column
var $table1 = $('#table1');
$table1.find('thead').remove();
// 1. init table
$table1.simple_datagrid({
columns: [
{
title: 'Fruit',
on_generate: function(value, row) {
return '_' + value + '_';
}
},
{
title: 'Latin name',
on_generate: function(value, row) {
if (! value) {
return '[empty]';
}
else {
return value;
}
}
}
],
data: [
['Avocado']
]
});
equal(getRowValues($table1), '_Avocado_;[empty]');
// 2. load data; record is object
$table1.simple_datagrid(
'loadData',
[
{fruit: 'Tomato'}
]
);
equal(getRowValues($table1), '_Tomato_;[empty]');
// 3. load data; record is array
$table1.simple_datagrid(
'loadData',
[
['Sweet pepper']
]
);
equal(getRowValues($table1), '_Sweet pepper_;[empty]');
});
test('getPages', function() {
// setup
var $table1 = $('#table1');
$table1.simple_datagrid({
paginator: {
page_window: 2
}
});
function getPages(current_page, total_pages) {
return $table1.simple_datagrid('testGetPages', current_page, total_pages, 2);
}
// 1. get pages
deepEqual(getPages(1, 1), [1]);
deepEqual(getPages(1, 2), [1, 2]);
deepEqual(getPages(1, 100), [1, 2, 3, 0, 99, 100]);
deepEqual(getPages(100, 100), [1, 2, 0, 98, 99, 100]);
deepEqual(getPages(50, 100), [1, 2, 0, 48, 49, 50, 51, 52, 0, 99, 100]);
deepEqual(getPages(5, 100), [1, 2, 3, 4, 5, 6, 7, 0, 99, 100]);
deepEqual(getPages(6, 100), [1, 2, 3, 4, 5, 6, 7, 8, 0, 99, 100]);
deepEqual(getPages(7, 100), [1, 2, 0, 5, 6, 7, 8, 9, 0, 99, 100]);
deepEqual(getPages(96, 100), [1, 2, 0, 94, 95, 96, 97, 98, 99, 100]);
deepEqual(getPages(95, 100), [1, 2, 0, 93, 94, 95, 96, 97, 98, 99, 100]);
deepEqual(getPages(94, 100), [1, 2, 0, 92, 93, 94, 95, 96, 0, 99, 100]);
});
test('addColumn', function() {
// setup
var $table1 = $('#table1');
$table1.simple_datagrid();
// check initial columns
equal(formatColumnNames($table1), 'name;latin_name');
// 1. add column at the end
$table1.simple_datagrid('addColumn', 'col end');
equal(formatColumnNames($table1), 'name;latin_name;col_end');
// 2. add column after 'name'
$table1.simple_datagrid('addColumn', 'col2', 1);
equal(formatColumnNames($table1), 'name;col2;latin_name;col_end');
// 2. add column at beginning
$table1.simple_datagrid('addColumn', 'col1', 0);
equal(formatColumnNames($table1), 'col1;name;col2;latin_name;col_end');
});
test('removeColumn', function() {
// setup
var $table1 = $('#table1');
$table1.simple_datagrid();
// -- remove column
$table1.simple_datagrid('removeColumn', 'name');
equal(formatColumnNames($table1), 'latin_name');
});
});
qunit.js初试的更多相关文章
- Auto.js 初试-Android开发JS利器
GitHub地址:https://github.com/hyb1996/Auto.js 文档地址:https://hyb1996.github.io/AutoJs-Docs/#/?id=%E7%BB% ...
- require.js初试(with angular & optimization)
如果你只是想找一款称手的js加载器,可以参考这篇js loader benchmarks(http://artzstudio.com/files/Boot/test/benchmarks/script ...
- 【JS单元测试】Qunit 和 jsCoverage使用方法
近日在网上浏览过很多有关js单元测试相关的文档,工具,但是,针对Qunit 和 jsCoverage使用方法,缺少详细说明,对于初入前端的人来说,很难明白其中的意思,特此整理这篇文章,希望 ...
- Qunit 和 jsCoverage使用方法（js单元测试）
Qunit 和 jsCoverage使用方法(js单元测试) 近日在网上浏览过很多有关js单元测试相关的文档,工具,但是,针对Qunit 和 jsCoverage使用方法,缺少详细说明,对于初入前端的 ...
- Cookbook of QUnit
本篇文章是QUnit的简介,可以作为很好的入门教程.文章原址 介绍 自动化测试时软件开发过程中必不可少的一部分,而单元测试则是自动化测试的最为基本的一块,软件的每一个组件, 每一个功能单元都需要经过不 ...
- 使用QUnit进行自动化单元测试
前言 前阵子由于项目需求接触了java的单元测试JUnit,就顺带着学习了前端的单元测试:Qunit. 既然跟测试有关,不妨介绍一下测试中的黑盒测试.白盒测试以及单元测试. 1.黑盒测试:所谓的黑盒, ...
- JavaScript测试工具比较: QUnit, Jasmine, and Mocha
1. QUnit A JavaScript Unit Testing framework. QUnit is a powerful, easy-to-use JavaScript unit testi ...
- qunit学习（一）
QUnit是一个强大的JavaScript单元测试框架,用于调试代码.该框架是由jQuery团队的成员所开发,并且是jQuery的官方测试套件.任意正规JavaScript代码QUnit都能测试. 其 ...
- ember.js:使用笔记8 加载测试与集成测试
emberjs使用的测试工具为qunit.js: 加载:将runner.js添加到Index.html:大致内容: if (window.location.search.indexOf("? ...
随机推荐
- ADO 事务
Ado.Net事务处理.在ADO.NET 中,可以使用Connection 和Transaction 对象来控制事务.若要执行事务,请执行下列操作:• 调用Connection 对象的BeginTra ...
- kafka监控系统
Metrics-Java版的指标度量工具之一 Metrics-Java版的指标度量工具之二 JAVA Metrics 度量工具使用介绍1 JAVA Metrics度量工具 - Metrics Core ...
- 分页查询：使用分页类查询 用get传值
<body> <?php $cx = ""; if(!empty($_GET["cx"])) //判断get传过来的值非空,那么把传过来的值赋 ...
- Android高级之第十一讲Hybird开发
本文来自http://blog.csdn.net/liuxian13183/ ,引用必须注明出处! 随着移动端应用平台的兴起,需求和交互方式的多样化,H5开发逐渐在移动端流行起来:常见的移动产品有We ...
- jdk1.7的collections.sort(List list)排序问题
1.7使用旧排序: System.setProperty("java.util.Arrays.useLegacyMergeSort", "true"); 1.7 ...
- ImageX用来做Windows OEM部署
https://technet.microsoft.com/en-us/library/cc722145(v=ws.10).aspx http://download.csdn.net/user/phc ...
- ADB not responding. If you'd like to retry, then please manually kill "adb.exe" and click 'Restart'
ADB not responding. If you'd like to retry, then please manually kill "adb.exe" and click ...
- 常用yum命令
yum list 查询所有可用软件包 yum search 关键字 查询和关键字相关的包 yum -y install 包名 加上-y自动回答yes yum -y update 包名 升级 yum ...
- C++ Primer Pluse_6_课后题
#include <iostream> #include <cctype> #include <array> #include <string> #in ...
- ArcGIS Engine开发之旅07---文件地理数据库、个人地理数据库和 ArcSDE 地理数据库中的栅格存储加以比较 、打开栅格数据
原文:ArcGIS Engine开发之旅07---文件地理数据库.个人地理数据库和 ArcSDE 地理数据库中的栅格存储加以比较 .打开栅格数据 对文件地理数据库.个人地理数据库和 ArcSDE 地理 ...