functional test for custom elements

Evan You · Evan You · commit 33fb50f0d120 · 2013-12-04T20:52:06.000-05:00
diff --git a/test/functional/fixtures/custom-element.html b/test/functional/fixtures/custom-element.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>Custom Elements</title>
+        <meta charset="utf-8">
+        <script src="../../../dist/seed.js"></script>
+    </head>
+    <body>
+        <my-element>afsefsefse</my-element>
+        <cool>hmm</cool>
+        <wow></wow>
+        <script>
+            // global custom element with option object + replace
+            Seed.element('my-element', {
+                replace: true,
+                className: 'test',
+                template: '<div>{{msg}}</div>'
+            })
+            new Seed({
+                el:'body',
+                scope: {
+                    msg: 'hihi',
+                },
+                elements: {
+                    // private custom element with simple function
+                    cool: function (el) {
+                        el.className = 'cool'
+                        el.innerHTML = 'This is cool'
+                    },
+                    // private custom element with constructor
+                    wow: Seed.extend({
+                        init: function () {
+                            this.$el.textContent = 'this is wow'
+                        }
+                    })
+                }
+            })
+        </script>
+    </body>
+</html>
diff --git a/test/functional/specs/custom-element.js b/test/functional/specs/custom-element.js
@@ -0,0 +1,13 @@
+casper.test.begin('Custom Elements', 3, function (test) {
+    
+    casper
+    .start('./fixtures/custom-element.html', function () {
+        test.assertSelectorHasText('div.test', 'hihi')
+        test.assertSelectorHasText('cool.cool', 'This is cool')
+        test.assertSelectorHasText('wow', 'this is wow')
+    })
+    .run(function () {
+        test.done()
+    })
+
+})
