chore: polymer-cli doesn't fail build on failed tests

* Add caching * Tests now run for the shadow dom as well as the shady dom
salte-io · Oct 6, 2016 · 1e3d0c4 · 1e3d0c4
1 parent 2f36b72
commit 1e3d0c4
Show file tree

Hide file tree

Showing 6 changed files with 131 additions and 109 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -1,12 +1,9 @@
 root = true
 
 [*]
-indent_style = tab
+indent_style = space
+indent_size = 2
 end_of_line = lf
 charset = utf-8
 trim_trailing_whitespace = true
 insert_final_newline = true
-
-[{package.json,*.yml}]
-indent_style = space
-indent_size = 2
diff --git a/.travis.yml b/.travis.yml
@@ -2,17 +2,25 @@ language: node_js
 node_js: stable
 dist: trusty
 sudo: required
+cache:
+  directories:
+    - $(npm config get prefix)
+    - bower_components
 addons:
-  firefox: 46
+  firefox: '46.0'
   sauce_connect: true
   apt:
     sources:
-    - google-chrome
+      - google-chrome
     packages:
-    - google-chrome-stable
+      - google-chrome-stable
 before_script:
-- npm install -g bower polymer-cli
-- bower install
+  - npm list -g bower --depth=0 || npm install -g bower
+  - npm list -g polymer-cli --depth=0 || npm install -g polymer-cli
+  - bower prune
+  - bower install
 script:
-- xvfb-run polymer test
-- if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then polymer test -s 'default'; fi
+  - xvfb-run polymer test
+  - if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then polymer test -s 'default'; fi
+notifications:
+  email: change
diff --git a/bower.json b/bower.json
@@ -26,7 +26,7 @@
   "devDependencies": {
     "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
     "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.2.5",
-    "web-component-tester": "^4.0.0",
+    "web-component-tester": "^4.4.0",
     "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
     "paper-slider": "PolymerElements/paper-slider#^1.0.11"
   }

diff --git a/salte-rating.html b/salte-rating.html
@@ -105,7 +105,15 @@
           type: Boolean,
           value: false,
           reflectToAttribute: true
-        }
+    	  },
+
+        /**
+         * The rating items displayed on the screen
+         */
+    	  limitItems: {
+          type: Array,
+          readOnly: true
+    	  }
       },
 
       attached: function() {
@@ -125,15 +133,15 @@
        * Renders the items based on the limit
        */
       renderItems: function() {
-        let limitItems = [];
-        for (let i = 0; i < this.limit; i++) {
+        var limitItems = [];
+        for (var i = 0; i < this.limit; i++) {
           limitItems.push(i);
         }
-        this.set('limitItems', limitItems);
+        this._setLimitItems(limitItems);
       },
 
       _refreshRating: function(value) {
-        let items = this.querySelectorAll('.item-icon');
+        var items = Polymer.dom(this.root).querySelectorAll('.item-icon');
         for (var i = 0; i < items.length; i++) {
           items[i].style.width = Math.min(Math.max(value - i, 0), 1) * 100 + '%';
         }

diff --git a/test/basic.html b/test/basic.html
@@ -0,0 +1,93 @@
+<!doctype html>
+
+<html>
+  <head>
+    <title>salte-rating basic tests</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
+
+    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+    <script src="../../web-component-tester/browser.js"></script>
+
+    <link rel="import" href="../salte-rating.html">
+
+  </head>
+  <body>
+
+    <test-fixture id="rating">
+      <template>
+        <salte-rating></salte-rating>
+      </template>
+    </test-fixture>
+
+    <script>
+      describe('Basic features', function() {
+        var rating;
+
+        beforeEach(function() {
+          rating = fixture('rating');
+        });
+
+        it('instantiating the element works', function() {
+          expect(rating.is).to.be.equal('salte-rating');
+        });
+
+        it('displays 5 rating items', function() {
+          Polymer.dom.flush();
+
+          expect(Polymer.dom(rating.root).querySelectorAll('.item').length).to.be.equal(5);
+        });
+
+        it('displays 10 rating items', function(done) {
+          Polymer.dom.flush();
+
+          rating.set('limit', 10);
+
+          flush(function() {
+            expect(Polymer.dom(rating.root).querySelectorAll('.item').length).to.be.equal(10);
+            done();
+          });
+        });
+
+        it('updates width to display rating correctly', function() {
+          Polymer.dom.flush();
+
+          rating.set('value', 1);
+
+          var icons = Polymer.dom(rating.root).querySelectorAll('.item-icon');
+          expect(icons.length).to.be.equal(5);
+          expect(icons[0].style.width).to.be.equal('100%');
+          expect(icons[1].style.width).to.be.equal('0%');
+          expect(icons[2].style.width).to.be.equal('0%');
+          expect(icons[3].style.width).to.be.equal('0%');
+          expect(icons[4].style.width).to.be.equal('0%');
+        });
+
+        it('updates width to display rating correctly - external value', function(done) {
+          rating.set('value', 2);
+          flush(function() {
+            var icons = Polymer.dom(rating.root).querySelectorAll('.item-icon');;
+            expect(icons.length).to.be.equal(5);
+            expect(icons[0].style.width).to.be.equal('100%');
+            expect(icons[1].style.width).to.be.equal('100%');
+            expect(icons[2].style.width).to.be.equal('0%');
+            expect(icons[3].style.width).to.be.equal('0%');
+            expect(icons[4].style.width).to.be.equal('0%');
+            done();
+          });
+        });
+
+        it('rate gets called when a rating item is clicked', function(done) {
+          Polymer.dom.flush();
+
+          rating.addEventListener('rate', function(e) {
+            expect(e.detail.rating).to.be.equal(1);
+            done();
+          });
+
+          Polymer.dom(rating.root).querySelector('.item-icon').click();
+        });
+      });
+    </script>
+  </body>
+</html>
diff --git a/test/index.html b/test/index.html
@@ -2,101 +2,17 @@
 
 <html>
   <head>
-    <title>salte-rating test</title>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
-    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+    <title>salte-rating tests</title>
     <script src="../../web-component-tester/browser.js"></script>
-
-    <link rel="import" href="../salte-rating.html">
   </head>
   <body>
-
-    <test-fixture id="basic">
-      <template>
-        <salte-rating></salte-rating>
-      </template>
-    </test-fixture>
-
-    <test-fixture id="external">
-      <template>
-        <salte-rating value="2"></salte-rating>
-      </template>
-    </test-fixture>
-
     <script>
-      suite('salte-rating', function() {
-
-        test('instantiating the element works', function() {
-          let element = fixture('basic');
-          expect(element.is).to.be.equal('salte-rating');
-        });
-
-        test('displays 5 rating items', function() {
-          let element = fixture('basic');
-
-          Polymer.dom.flush();
-
-          expect(element.querySelectorAll('.item').length).to.be.equal(5);
-        });
-
-        test('displays 10 rating items', function(done) {
-          let element = fixture('basic');
-
-          Polymer.dom.flush();
-
-          element.set('limit', 10);
-
-          flush(function() {
-            expect(element.querySelectorAll('.item').length).to.be.equal(10);
-            done();
-          });
-        });
-
-        test('updates width to display rating correctly', function() {
-          let element = fixture('basic');
-
-          Polymer.dom.flush();
-
-          element.set('value', 1);
-
-          let icons = element.querySelectorAll('.item-icon');
-          expect(icons.length).to.be.equal(5);
-          expect(icons[0].style.width).to.be.equal('100%');
-          expect(icons[1].style.width).to.be.equal('0%');
-          expect(icons[2].style.width).to.be.equal('0%');
-          expect(icons[3].style.width).to.be.equal('0%');
-          expect(icons[4].style.width).to.be.equal('0%');
-        });
-
-        test('updates width to display rating correctly - external value', function(done) {
-          let element = fixture('external');
-
-          flush(function() {
-            let icons = element.querySelectorAll('.item-icon');
-            expect(icons.length).to.be.equal(5);
-            expect(icons[0].style.width).to.be.equal('100%');
-            expect(icons[1].style.width).to.be.equal('100%');
-            expect(icons[2].style.width).to.be.equal('0%');
-            expect(icons[3].style.width).to.be.equal('0%');
-            expect(icons[4].style.width).to.be.equal('0%');
-            done();
-          });
-        });
-
-        test('rate gets called when a rating item is clicked', function(done) {
-          let element = fixture('basic');
-
-          Polymer.dom.flush();
-
-          element.addEventListener('rate', function(e) {
-            expect(e.detail.rating).to.be.equal(1);
-            done();
-          });
-
-          element.querySelector('.item-icon').click();
-        });
-      });
+      WCT.loadSuites([
+        'basic.html',
+        'basic.html?dom=shadow'
+      ]);
     </script>
   </body>
 </html>