Add mocha tests to seed-element

- Make yo polymer:seed structure match seed-element
yeoman · Sep 12, 2014 · 72fc698 · 72fc698
1 parent f9e168c
commit 72fc698
Show file tree

Hide file tree

Showing 9 changed files with 161 additions and 35 deletions.
diff --git a/seed/index.js b/seed/index.js
@@ -40,7 +40,17 @@ module.exports = yeoman.generators.Base.extend({
       done();
     }.bind(this));
   },
-  app: function () {
+  seed: function () {
+    if (this.elementName.indexOf('-') === -1) {
+      console.error(
+        'The element name you provided: ' + this.elementName + ' ' +
+        'is invalid.'
+      );
+      console.error('Element name must contain a dash "-"');
+      console.error('ex: my-element');
+      return;
+    }
+
     this.copy('gitignore', '.gitignore');
     this.copy('gitattributes', '.gitattributes');
     this.copy('bowerrc', '.bowerrc');
@@ -52,5 +62,9 @@ module.exports = yeoman.generators.Base.extend({
     this.template('_index.html', 'index.html');
     this.template('_demo.html', 'demo.html');
     this.template('_README.md', 'README.md');
+    this.template('test/runner.html', 'test/runner.html');
+    this.template('test/seed-element-basic.html',
+                  'test/' + this.elementName + '-basic.html');
+    this.template('test/tests.html', 'test/tests.html');
   }
 });
diff --git a/seed/templates/_README.md b/seed/templates/_README.md
@@ -1,8 +1,8 @@
-<%= _.slugify(elementName) %>
+<%= elementName %>
 ================
 
-See the [component page](http://<%= ghUser %>.github.io/<%= _.slugify(elementName) %>) for more information.
+See the [component page](http://<%= ghUser %>.github.io/<%= elementName %>) for more information.
 
 ## Getting Started
 
-We've put together a [guide for <%= _.slugify(elementName) %>](http://www.polymer-project.org/docs/start/reusableelements.html) to help get you rolling.
+We've put together a [guide for <%= elementName %>](http://www.polymer-project.org/docs/start/reusableelements.html) to help get you rolling.
diff --git a/seed/templates/_bower.json b/seed/templates/_bower.json
@@ -1,13 +1,16 @@
 {
-  "name": "<%= _.slugify(elementName) %>",
+  "name": "<%= elementName %>",
   "version": "0.0.0",
   "keywords": [
     "seed",
     "polymer",
     "web-components"
   ],
-  "main": "<%= _.slugify(elementName) %>.html",
+  "main": "<%= elementName %>.html",
   "dependencies": {
     "polymer": "Polymer/polymer#^0.4.0"
+  },
+  "devDependencies": {
+    "polymer-test-tools": "Polymer/polymer-test-tools#^0.4.0"
   }
 }
diff --git a/seed/templates/_demo.html b/seed/templates/_demo.html
@@ -2,17 +2,17 @@
 <html>
 <head>
   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
-  <title><%= _.slugify(elementName) %> Demo</title>
+  <title><%= elementName %> Demo</title>
 
   <script src="../platform/platform.js"></script>
-  <link rel="import" href="<%= _.slugify(elementName) %>.html">
+  <link rel="import" href="<%= elementName %>.html">
 
 </head>
 <body unresolved>
 
-  <p>An `<%= _.slugify(elementName) %>` looks like this:</p>
+  <p>An `<%= elementName %>` looks like this:</p>
 
-  <<%= _.slugify(elementName) %>></<%= _.slugify(elementName) %>>
+  <<%= elementName %>></<%= elementName %>>
 
 </body>
 </html>
diff --git a/seed/templates/_seed-element.html b/seed/templates/_seed-element.html
@@ -5,60 +5,80 @@
 
 ##### Example
 
-    <<%= _.slugify(elementName) %>></<%= _.slugify(elementName) %>>
+    <<%= elementName %>></<%= elementName %>>
 
-@element <%= _.slugify(elementName) %>
+@element <%= elementName %>
 @blurb Element providing solution to no problem in particular.
 @status alpha
-@homepage http://<%= ghUser %>.github.io/<%= _.slugify(elementName) %>
+@homepage http://polymerlabs.github.io/<%= elementName %>
 -->
-<polymer-element name="<%= _.slugify(elementName) %>" attributes="notitle">
+<polymer-element name="<%= elementName %>" attributes="notitle author">
 
   <template>
 
-    <link rel="stylesheet" href="<%= _.slugify(elementName) %>.css" />
+    <link rel="stylesheet" href="<%= elementName %>.css" />
 
+    <h1>Hello from <%= elementName %></h1>
     <content></content>
 
   </template>
 
   <script>
 
-    Polymer('<%= _.slugify(elementName) %>', {
+    Polymer({
       /**
-       * The `noevent` event is not actually fired from here,
-       * we document it as an example of documenting events.
+       * The `author` attribute sets an initial author
        *
-       * @event noevent
-       */
-
-      /**
-       * The `notitle` attribute does not yet have a purpose.
-       *
-       * @attribute notitle
+       * @attribute author
        * @type string
+       * @default 'Dimitri Glazkov'
        */
-      notitle: '',
+      author: 'Dimitri Glazkov',
 
       /**
-       * The `aProp` is a property that does something cool.
+       * `fancy` is a property that does something fancy.
        *
-       * @property aProp
+       * @property fancy
        * @type bool
+       * @default false
        */
-      aProp: false,
+      fancy: false,
 
       ready: function() {
+        // Ready is a lifecycle callback.
+        // You can do setup work in here.
+        // More info: http://www.polymer-project.org/docs/polymer/polymer.html#lifecyclemethods
       },
 
       /**
-       * The `task` method does no work at this time.
+       * The `sayHello` method will return a greeting.
+       *
+       * @method sayHello
+       * @param {String} greeting Pass in a specific greeting.
+       * @return {String} Returns a string greeting.
+       */
+      sayHello: function(greeting) {
+        var response = greeting || 'Hello World!';
+        return '<%= elementName %> says, ' + response;
+      },
+
+      /**
+       * The `<%= elementName %>-lasers-success` event is fired whenever we
+       * call fireLasers.
+       *
+       * @event <%= elementName %>-lasers-success
+       * @param {Object} detail
+       *   @param {string} detail.sound An amazing sound.
+       */
+
+      /**
+       * The `fireLasers` method will fire the lasers. At least
+       * it will dispatch an event that claims lasers were fired :)
        *
-       * @method task
-       * @return {Object} Returns undefined.
-       * @param {String} dummy Serves no purpose today.
+       * @method fireLasers
        */
-      task: function(dummy) {
+      fireLasers: function() {
+        this.fire('<%= elementName %>-lasers-success', { sound: 'Pew pew pew!' });
       }
 
     });

diff --git a/seed/templates/test/runner.html b/seed/templates/test/runner.html
@@ -0,0 +1,21 @@
+<!doctype html>
+<html>
+
+  <head>
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+    <title>Core Elements Test Runner</title>
+    <meta charset="UTF-8">
+
+    <script src="../../platform/platform.js"></script>
+
+    <link rel="import" href="tests.html">
+
+  </head>
+
+  <body>
+
+    <div id="mocha"></div>
+
+  </body>
+
+</html>
diff --git a/seed/templates/test/seed-element-basic.html b/seed/templates/test/seed-element-basic.html
@@ -0,0 +1,45 @@
+<!doctype html>
+<html>
+<head>
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+  <title><%= elementName %></title>
+
+  <script src="../../platform/platform.js"></script>
+  <link rel="import" href="../../polymer-test-tools/tools.html">
+  <script src="../../polymer-test-tools/htmltest.js"></script>
+
+  <!-- Step 1: import the element to test -->
+  <link rel="import" href="../<%= elementName %>.html">
+
+</head>
+<body>
+
+  <<%= elementName %>></<%= elementName %>>
+
+  <script>
+
+    document.addEventListener('polymer-ready', function() {
+      // Test a property
+      var myEl = document.querySelector('<%= elementName %>');
+      assert.equal(myEl.author, 'Dimitri Glazkov');
+
+      // Test a method
+      var hello = myEl.sayHello();
+      assert.equal(hello, '<%= elementName %> says, Hello World!');
+      var greetings = myEl.sayHello('greetings Earthlings');
+      assert.equal(greetings, '<%= elementName %> says, greetings Earthlings');
+
+      // Test an event
+      myEl.addEventListener('<%= elementName %>-lasers-success', function(event) {
+        assert.equal(event.detail.sound, 'Pew pew pew!');
+        // IMPORTANT:
+        // Make sure to call done() at the end of every test suite!
+        done();
+      });
+      myEl.fireLasers();
+    });
+
+  </script>
+
+</body>
+</html>
diff --git a/seed/templates/test/tests.html b/seed/templates/test/tests.html
@@ -0,0 +1,20 @@
+<link rel="import" href="../../polymer-test-tools/tools.html">
+
+<script src="../../polymer-test-tools/mocha-htmltest.js"></script>
+
+<script>
+
+  mocha.setup({ui: 'tdd', slow: 1000, timeout: 5000, htmlbase: ''});
+
+  // Below is a set of sample element test suites.
+  // Replace these with your own suites of tests.
+
+  htmlSuite('<%= elementName %>', function() {
+    htmlTest('<%= elementName %>-basic.html');
+  });
+
+  // End sample test suites
+
+  mocha.run();
+
+</script>
diff --git a/test/seed-test.js b/test/seed-test.js
@@ -38,7 +38,10 @@ describe('yo polymer:seed test', function () {
       'index.html',
       'README.md',
       'x-foo.css',
-      'x-foo.html'
+      'x-foo.html',
+      'test/runner.html',
+      'test/tests.html',
+      'test/x-foo-basic.html',
     ];
 
     helpers.mockPrompt(this.polymer, {