functional tests for forms and encapsulation

This commit is contained in:
Evan You 2013-10-25 18:22:22 -04:00
parent be72b739c5
commit 495d799c3d
10 changed files with 131 additions and 15 deletions

View File

@ -50,6 +50,7 @@ var utils = module.exports = {
toText: function (value) {
/* jshint eqeqeq: false */
return (typeof value === 'string' ||
typeof value === 'boolean' ||
(typeof value === 'number' && value == value)) // deal with NaN
? value
: ''

View File

@ -6,12 +6,27 @@
<script src="../../../dist/seed.js"></script>
</head>
<body>
<div id="test" sd-hola="hi | nodigits"></div>
<div id="test">
<div class="dir" sd-hola="dirMsg"></div>
<div class="filter">{{filterMsg | nodigits}}</div>
<div class="partial" sd-partial="partial-test"></div>
<div class="vm" sd-viewmodel="vm-test">{{vmMsg}}</div>
</div>
<script>
var T = Seed.extend({
viewmodels: {
'vm-test': Seed.extend({
scope: {
vmMsg: 'viewmodel works'
}
})
},
partials: {
'partial-test': '{{partialMsg}}'
},
directives: {
hola: function (value) {
this.el.innerHTML = value + '<span style="color:#f00"> this part is added by the directive</span>'
this.el.innerHTML = value + ' works'
}
},
filters: {
@ -23,10 +38,11 @@
new T({
el: '#test',
scope: {
hi: 'ho43h132oh5o12345'
dirMsg: 'directive',
filterMsg: 'fi43l132ter5 w12345orks',
partialMsg: 'partial works'
}
})
// expected ouput: hohoho this part is added by the directive
</script>
</body>
</html>

View File

@ -0,0 +1,50 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Forms test</title>
<meta charset="utf-8">
<script src="bind.js"></script>
<script src="../../../dist/seed.js"></script>
</head>
<body>
<form id="forms">
<input type="text" name="text" sd-model="text">
<input type="checkbox" name="checkbox" sd-model="checked">
<input type="radio" name="radio" sd-model="radio" value="a">
<input type="radio" name="radio" sd-model="radio" value="b">
<select sd-model="select" name="select">
<option>a</option>
<option>b</option>
</select>
<textarea name="textarea" sd-model="textarea"></textarea>
</form>
<div id="values">
<p class="text">{{text}}</p>
<p class="checkbox">{{checked}}</p>
<p class="radio">{{radio}}</p>
<p class="select">{{select}}</p>
<p class="textarea">{{textarea}}</p>
</div>
<script>
var test = new Seed({
el: 'body',
lazy: true,
scope: {
text: 'some text',
checked: true,
radio: 'b',
select: 'b',
textarea: 'more text'
}
})
</script>
</body>
</html>

View File

@ -0,0 +1,14 @@
casper.test.begin('Component Encapsulation', 4, function (test) {
casper
.start('./fixtures/encapsulation.html', function () {
test.assertSelectorHasText('.dir', 'directive works')
test.assertSelectorHasText('.filter', 'filter works')
test.assertSelectorHasText('.partial', 'partial works')
test.assertSelectorHasText('.vm', 'viewmodel works')
})
.run(function () {
test.done()
})
})

View File

@ -12,6 +12,7 @@ casper.test.begin('Expression', 9, function (test) {
// setting value
this.evaluate(function () {
/* global normal */
normal.one = 'Hola'
})
test.assertSelectorHasText('#normal p', 'Hola World!')

View File

@ -0,0 +1,31 @@
casper.test.begin('Forms', 10, function (test) {
casper
.start('./fixtures/forms.html', function () {
// test initial value binding
test.assertField('text', 'some text')
test.assertField('checkbox', true)
test.assertField('radio', 'b')
test.assertField('select', 'b')
test.assertField('textarea', 'more text')
this.fill('#forms', {
'text': 'changed text',
'checkbox': false,
'radio': 'a',
'select': 'a',
'textarea': 'more changed text'
})
test.assertSelectorHasText('.text', 'changed text')
test.assertSelectorHasText('.checkbox', 'false')
test.assertSelectorHasText('.radio', 'a')
test.assertSelectorHasText('.select', 'a')
test.assertSelectorHasText('.textarea', 'more changed text')
})
.run(function () {
test.done()
})
})

View File

@ -7,6 +7,7 @@ casper.test.begin('Simple Directive', 3, function (test) {
test.assertSelectorHasText('.two', 'bind', 'function definition bind')
this.evaluate(function () {
/* global a */
a.$destroy()
})

View File

@ -35,13 +35,14 @@ describe('UNIT: Directives', function () {
assert.strictEqual(dir.el.textContent, '12345')
})
it('should work with booleans', function () {
dir.update(true)
assert.strictEqual(dir.el.textContent, 'true')
})
it('should be empty with other stuff', function () {
dir.update(null)
assert.strictEqual(dir.el.textContent, '')
dir.update(false)
assert.strictEqual(dir.el.textContent, '')
dir.update(true)
assert.strictEqual(dir.el.textContent, '')
dir.update(undefined)
assert.strictEqual(dir.el.textContent, '')
dir.update({a:123})
@ -67,13 +68,14 @@ describe('UNIT: Directives', function () {
assert.strictEqual(dir.el.innerHTML, '12345')
})
it('should work with booleans', function () {
dir.update(true)
assert.strictEqual(dir.el.textContent, 'true')
})
it('should be empty with other stuff', function () {
dir.update(null)
assert.strictEqual(dir.el.innerHTML, '')
dir.update(false)
assert.strictEqual(dir.el.innerHTML, '')
dir.update(true)
assert.strictEqual(dir.el.innerHTML, '')
dir.update(undefined)
assert.strictEqual(dir.el.innerHTML, '')
dir.update({a:123})

View File

@ -63,16 +63,16 @@ describe('UNIT: Utils', function () {
var txt = utils.toText
it('should do nothing for strings and numbers', function () {
it('should do nothing for strings, numbers and booleans', function () {
assert.strictEqual(txt('hihi'), 'hihi')
assert.strictEqual(txt(123), 123)
assert.strictEqual(txt(true), true)
assert.strictEqual(txt(false), false)
})
it('should output empty string if value is not string or number', function () {
assert.strictEqual(txt({}), '')
assert.strictEqual(txt([]), '')
assert.strictEqual(txt(false), '')
assert.strictEqual(txt(true), '')
assert.strictEqual(txt(undefined), '')
assert.strictEqual(txt(null), '')
assert.strictEqual(txt(NaN), '')