首頁 探索 說明
註冊 登入
vuejs
/
vue
镜像来自 https://github.com/vuejs/vue.git
2
0
複刻 0
Files 問題管理 0 Wiki
瀏覽代碼

functional tests for transition

Evan You 12 年之前
父節點
03fd9293a9
當前提交
09377185ce
共有 5 個文件被更改，包括 147 次插入 和 16 次删除
分割檢視 顯示文件統計
  1. 4 3
      Gruntfile.js
  2. 10 2
      examples/todomvc/index.html
  3. 4 2
      src/directives/index.js
  4. 69 9
      test/functional/fixtures/transition.html
  5. 60 0
      test/functional/specs/transition.js

+ 4 - 3
Gruntfile.js
查看文件 

@@ -110,11 +110,12 @@ module.exports = function( grunt ) {
 
         }
 
     })
 
 
-    grunt.registerTask( 'casper', function () {
 
-        var done = this.async()
 
+    grunt.registerTask( 'casper', function (id) {
 
+        var done = this.async(),
 
+            file = id ? id + '.js' : ''
 
         grunt.util.spawn({
 
             cmd: 'casperjs',
 
-            args: ['test', '--concise', 'specs/'],
 
+            args: ['test', '--concise', 'specs/' + file],
 
             opts: {
 
                 stdio: ['ignore', process.stdout, 'ignore'],
 
                 cwd: path.resolve('test/functional')

+ 10 - 2
examples/todomvc/index.html
查看文件 

@@ -4,8 +4,6 @@
 
         <title>Todo</title>
 
         <meta charset="utf-8">
 
         <link rel="stylesheet" type="text/css" href="bower_components/todomvc-common/base.css">
 
-        <!-- for PhantomJS/CasperJS testing only -->
 
-        <script src="../../test/functional/fixtures/bind.js"></script>
 
     </head>
 
     <body>
 
         <section id="todoapp">
 
@@ -72,6 +70,16 @@
 
             <p>Powered by <a href="https://github.com/yyx990803/seed">Seed.js</a></p>
 
             <p>Created by <a href="http://evanyou.me">Evan You</a></p>
 
         </footer>
 
+
 
+        <!-- for PhantomJS/CasperJS testing only -->
 
+        <script src="../../test/functional/fixtures/bind.js"></script>
 
+        <script>
 
+            if (navigator.userAgent.indexOf('PhantomJS') > -1) {
 
+                localStorage.clear()
 
+            }
 
+        </script>
 
+        <!-- end testing -->
 
+
 
         <script src="../../dist/seed.js"></script>
 
         <script src="js/store.js"></script>
 
         <script src="js/app.js"></script>

+ 4 - 2
src/directives/index.js
查看文件 

@@ -40,8 +40,10 @@ module.exports = {
 
             if (this.lastVal) {
 
                 this.el.classList.remove(this.lastVal)
 
             }
 
-            this.el.classList.add(value)
 
-            this.lastVal = value
 
+            if (value) {
 
+                this.el.classList.add(value)
 
+                this.lastVal = value
 
+            }
 
         }
 
     },

+ 69 - 9
test/functional/fixtures/transition.html
查看文件 

@@ -3,26 +3,86 @@
 
     <head>
 
         <title></title>
 
         <meta charset="utf-8">
 
+        <script src="bind.js"></script>
 
+        <script src="../../../dist/seed.js"></script>
 
         <style type="text/css">
 
-            #test {
 
-                width: 100px;
 
+            .test {
 
+                width: 600px;
 
                 height: 100px;
 
                 background-color: #f00;
 
-                transition: all .5s ease;
 
+                padding: 10px;
 
+                border: 1px solid #000;
 
+                overflow: hidden;
 
+                transition: all .2s ease;
 
+                -moz-transition: all .2s ease;
 
+                -webkit-transition: all .2s ease;
 
             }
 
-            #test.test {
 
+            .test.shrink {
 
                 height: 0;
 
-                background-color: #0f0;
 
+                padding-top: 0;
 
+                padding-bottom: 0;
 
+                border-top-width: 0;
 
+                border-bottom-width: 0;
 
             }
 
         </style>
 
-        <script src="../../../dist/seed.js"></script>
 
     </head>
 
     <body>
 
-        <div id="test" sd-show="a"></div>
 
-        <h1 style="margin:0">123123</h1>
 
+        <div id="test">
 
+            <div>
 
+                <button class="button-0" sd-on="click:set">0</button>
 
+                <button class="button-1" sd-on="click:set">1</button>
 
+                <button class="button-2" sd-on="click:set">2</button>
 
+                <button class="push" sd-on="click:push">push</button>
 
+                <button class="pop" sd-on="click:pop">pop</button>
 
+                <button class="splice" sd-on="click:splice">splice</button>
 
+            </div>
 
+            <div
 
+                class="test"
 
+                sd-repeat="item:items"
 
+                sd-if="filter(item)"
 
+                sd-transition-class="shrink"
 
+                sd-attr="data-id:item.a">
 
+                {{item.a}}
 
+            </div>
 
+            <div
 
+                class="test"
 
+                sd-repeat="item:items"
 
+                sd-show="filter(item)"
 
+                sd-transition-class="shrink"
 
+                sd-attr="data-id:item.a">
 
+                {{item.a}}
 
+            </div>
 
+        </div>
 
+        <h1 style="margin:0">123</h1>
 
         <script>
 
             var test = new Seed({
 
-                el: '#test'
 
+                el: '#test',
 
+                scope: {
 
+                    b: 1,
 
+                    set: function (e) {
 
+                        this.b = +e.el.textContent
 
+                    },
 
+                    push: function () {
 
+                        this.items.push({a: this.items.length + 1 })  
+                    },
 
+                    pop: function () {
 
+                        this.items.pop()  
+                    },
 
+                    splice: function () {
 
+                        this.items.splice(0, 1, {a:99})
 
+                    },
 
+                    filter: function (item) {
 
+                        return item.a > this.b
 
+                    },
 
+                    items: [
 
+                        {
 
+                            a: 1
 
+                        },
 
+                        {
 
+                            a: 2
 
+                        }
 
+                    ]
 
+                }
 
             })
 
         </script>
 
     </body>

+ 60 - 0
test/functional/specs/transition.js
查看文件 

@@ -0,0 +1,60 @@
 
+casper.test.begin('Transition', 23, function (test) {
 
+
 
+    var minWait = 50,
 
+        transDuration = 200
 
+    
+    casper
 
+    .start('./fixtures/transition.html', function () {
 
+        test.assertElementCount('.test', 3)
 
+        test.assertNotVisible('.test[data-id="1"]')
 
+    })
 
+    .thenClick('.button-0')
 
+    .wait(minWait, function () {
 
+        test.assertElementCount('.test', 4)
 
+        test.assertVisible('.test[data-id="1"]')
 
+    })
 
+    .thenClick('.button-1')
 
+    .wait(minWait, function () {
 
+        test.assertElementCount('.test', 4)
 
+        test.assertElementCount('.test.shrink', 2)
 
+    })
 
+    .wait(transDuration, function () {
 
+        test.assertElementCount('.test', 3)
 
+        test.assertElementCount('.test.shrink', 0)
 
+        test.assertNotVisible('.test[data-id="1"]')
 
+    })
 
+    .thenClick('.button-2')
 
+    .wait(minWait, function () {
 
+        test.assertElementCount('.test', 3)
 
+        test.assertElementCount('.test.shrink', 2)
 
+    })
 
+    .wait(transDuration, function () {
 
+        test.assertElementCount('.test', 2)
 
+        test.assertNotVisible('.test[data-id="1"]')
 
+        test.assertNotVisible('.test[data-id="2"]')
 
+    })
 
+    .thenClick('.push')
 
+    .wait(minWait, function () {
 
+        test.assertElementCount('.test', 4)
 
+        test.assertVisible('.test[data-id="3"]')
 
+    })
 
+    .thenClick('.pop')
 
+    .wait(minWait, function () {
 
+        test.assertElementCount('.test', 4)
 
+        test.assertElementCount('.test.shrink', 2)
 
+    })
 
+    .wait(transDuration, function () {
 
+        test.assertElementCount('.test', 2)
 
+        test.assertNotVisible('.test[data-id="1"]')
 
+        test.assertNotVisible('.test[data-id="2"]')
 
+    })
 
+    .thenClick('.splice')
 
+    .wait(minWait, function () {
 
+        test.assertElementCount('.test', 4)
 
+        test.assertVisible('.test[data-id="99"]')
 
+    })
 
+    .run(function () {
 
+        test.done()
 
+    })
 
+
 
+})