利用 Grunt （几乎）无痛地做前端开发 (一)之单元测试

1
2
3
4
5
6
7
8
9

...
<div id="qunit-fixture">
<a href="#functional-link">#nogo</a>
<a href="http://alibaba.com">grunt</a>
<a href="http://china.alibaba.com">grunt</a>
<a href="http://style.china.alibaba.com">grunt</a>
<a href="http://q.pnq.cc">qhwa</a>
</div>
....

1
2
3
4
5
6
7
8
910
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

// file: test/grunt-demo_test.js
module('jQuery#ali-link', {
setup: function() {
this.elems = $('#qunit-fixture').children();
}
});

test('is chainable', 1, function() {
strictEqual(this.elems.alilink(), this.elems, 'should be chaninable');
});

test('can select', function() {
equal( $('a:alilink', $('#qunit-fixture')).length, 3,
'should select links with alibaba domain'
);
});

test('add icon to alibaba links', function() {
this.elems.alilink();

this.elems.each(function(){
var self = $(this);
if( /^http:\/\/((.+)\.)?alibaba\.com/.test(this.href) ) {
ok(self.hasClass('ali-link'));
} else {
ok(!self.hasClass('ali-link'));
}
});
});
...

1
2
3
4
5
6
7
8
910
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

// file: src/grunt-demo-1.js

(function($) {

var ALI_LINK_REG = /^http:\/\/(.+\.)?alibaba\.com/;

// Collection method.
$.fn.alilink = function() {
return this.each(function() {
var self = $(this);
if( isAliLink(this) ){
self.addClass('ali-link');
} else {
self.removeClass('ali-link');
}
});
};

// Custom selector.
$.expr[':'].alilink = function(elem) {
return isAliLink(elem);
};

function isAliLink(el) {
return /A/i.test(el.tagName) && ALI_LINK_REG.test(el.href);
}

}(jQuery));