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