mirror of https://github.com/vuejs/vue.git
functional tests for forms and encapsulation
This commit is contained in:
parent
be72b739c5
commit
495d799c3d
|
|
@ -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
|
||||
: ''
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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()
|
||||
})
|
||||
|
||||
})
|
||||
|
|
@ -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!')
|
||||
|
|
|
|||
|
|
@ -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()
|
||||
})
|
||||
|
||||
})
|
||||
|
|
@ -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()
|
||||
})
|
||||
|
||||
|
|
|
|||
|
|
@ -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})
|
||||
|
|
|
|||
|
|
@ -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), '')
|
||||
|
|
|
|||
Loading…
Reference in New Issue