add tests

jorgecasar · Sep 5, 2015 · 733c593 · 733c593
1 parent 48959e3
commit 733c593
Show file tree

Hide file tree

Showing 6 changed files with 201 additions and 9 deletions.
diff --git a/.jshintrc b/.jshintrc
@@ -48,6 +48,8 @@
 				"Promise": true,
 				"suite": true,
 				"test": true,
+				"setup": true,
+				"fixture": true,
 				"WCT": true,
 				"ga": true
 		}

diff --git a/bower.json b/bower.json
@@ -5,7 +5,7 @@
     "Jorge del Casar <[email protected]>"
   ],
   "description": "The input password that you allways want to use in your apps with sign in process now is real with Web Components",
-  "main": "dist/input-password.html",
+  "main": "input-password.html",
   "keywords": [
     "polymer",
     "web-components",
@@ -18,22 +18,22 @@
     "**/.*",
     "node_modules",
     "bower_components",
-    "app/bower_components",
+    "demo",
     "test",
-    "tests"
+    "tasks",
+    "gulpfile.js"
   ],
   "dependencies": {
     "iron-behaviors": "PolymerElements/iron-behaviors#~1.0.8",
-    "iron-component-page": "PolymerElements/iron-component-page#~1.0.5",
     "iron-form-element-behavior": "PolymerElements/iron-form-element-behavior#~1.0.4",
     "iron-input": "PolymerElements/iron-input#~1.0.6",
-    "paper-badge": "PolymerElements/paper-badge#~1.0.3",
     "paper-input": "PolymerElements/paper-input#~1.0.13",
-    "polymer": "Polymer/polymer#^1.0.0",
-    "prism": "~1.0.1"
+    "polymer": "Polymer/polymer#^1.0.0"
   },
   "devDependencies": {
+  	"prism": "~1.0.1",
+  	"iron-component-page": "PolymerElements/iron-component-page#~1.0.5",
     "test-fixture": "PolymerElements/test-fixture#~1.0.0",
-    "web-component-tester": "~3.3.21"
+    "web-component-tester": "Polymer/web-component-tester#~3.3.21"
   }
 }
diff --git a/package.json b/package.json
@@ -5,7 +5,7 @@
   "main": "dist/input-password.html",
   "readmeFilename": "README.md",
   "scripts": {
-    "test": "gulp jshint"
+    "test": "gulp jshint && wct  --expanded"
   },
   "repository": {
     "type": "git",

diff --git a/test/index.html b/test/index.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+
+<html>
+
+  <head>
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+    <title>Elements Test Runner</title>
+    <meta charset="UTF-8">
+
+    <script src="../../webcomponentsjs/webcomponents.min.js"></script>
+    <script src="../../web-component-tester/browser.js"></script>
+  </head>
+
+  <body>
+
+    <script>
+      WCT.loadSuites(['input-password.html']);
+    </script>
+
+
+  </body>
+
+</html>
diff --git a/test/input-password.html b/test/input-password.html
@@ -0,0 +1,155 @@
+<!doctype html>
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<html>
+
+<head>
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+  <title>input-password</title>
+  <script src="../../webcomponentsjs/webcomponents.min.js"></script>
+  <link rel="import" href="../../polymer/polymer.html">
+  <script src="../../web-component-tester/browser.js"></script>
+  <script src="../../test-fixture/test-fixture-mocha.js"></script>
+  <link rel="import" href="../../test-fixture/test-fixture.html">
+  <!-- Import the element to test -->
+  <link rel="import" href="../input-password.html">
+</head>
+
+<body>
+  <test-fixture id="basic">
+    <template>
+      <input-password></input-password>
+    </template>
+  </test-fixture>
+  <test-fixture id="visible">
+    <template>
+      <input-password visible></input-password>
+    </template>
+  </test-fixture>
+  <test-fixture id="toggleText">
+    <template>
+      <input-password toggle-text="Test"></input-password>
+    </template>
+  </test-fixture>
+  <test-fixture id="toggleTextSlash">
+    <template>
+      <input-password toggle-text="Show/Hide"></input-password>
+    </template>
+  </test-fixture>
+  <test-fixture id="visibleClass">
+    <template>
+      <input-password visible-class="visibleClass"></input-password>
+    </template>
+  </test-fixture>
+  <script>
+  suite('basic', function() {
+    var basic;
+    var visible;
+    var toggleText;
+    var toggleTextSlash;
+    var visibleClass;
+
+    setup(function() {
+      basic = fixture('basic');
+      visible = fixture('visible');
+      toggleText = fixture('toggleText');
+      toggleTextSlash = fixture('toggleTextSlash');
+      visibleClass = fixture('visibleClass');
+    });
+
+    test('default properties', function() {
+      var input = basic.querySelector('input');
+      assert(!basic.visible);
+      assert.equal(input.type, 'password');
+      assert.equal(basic.toggleText, 'Toggle');
+      assert.equal(basic.showText, 'Toggle');
+      assert.equal(basic.hideText, 'Toggle');
+      assert.equal(basic.visibleClass, 'visible');
+    });
+
+    test('setting visible sets the input as text', function() {
+      var input = visible.querySelector('input');
+      assert(visible.visible);
+      assert.equal(input.type, 'text');
+    });
+
+    test('setting visible sets the class "visible"', function() {
+      assert(visible.visible);
+      assert(visible.classList.contains('visible'));
+    });
+
+    test('setting toggle-text without slash use this for the button', function() {
+      assert.equal(toggleText.toggleText, 'Test');
+      assert.equal(toggleText.showText, 'Test');
+      assert.equal(toggleText.hideText, 'Test');
+    });
+
+    test('setting toggle-text with slash split it and use each side of the slash for show and hide button', function() {
+      assert.equal(toggleTextSlash.toggleText, 'Show/Hide');
+      assert.equal(toggleTextSlash.showText, 'Show');
+      assert.equal(toggleTextSlash.hideText, 'Hide');
+    });
+
+    test('setting visible-class', function() {
+      assert.equal(visibleClass.visibleClass, 'visibleClass');
+    });
+
+    test('changing toggle-text attribute after attached', function() {
+      assert.equal(basic.toggleText, 'Toggle');
+      basic.toggleText = 'Show/Hide';
+      assert.equal(basic.toggleText, 'Show/Hide');
+      assert.equal(basic.showText, 'Show');
+      assert.equal(basic.hideText, 'Hide');
+    });
+
+    test('changing visibility attribute after attached', function() {
+      assert(!basic.visible);
+      basic.visible = true;
+      assert(basic.visible);
+      assert(basic.classList.contains('visible'));
+    });
+
+    test('changing visibility using toggle', function() {
+      // Start point (hide).
+      assert(!basic.visible);
+      // Toggle.
+      basic.toggle();
+      assert(basic.visible);
+      assert(basic.classList.contains('visible'));
+    });
+  });
+	suite('showValue/hideValue events', function() {
+      var basic;
+      setup(function() {
+        basic = fixture('basic');
+      });
+      test('showValue/hideValue events fired on host element', function() {
+        var nShowValueEvents = 0;
+        var nHideValueEvents = 0;
+        basic.addEventListener('showValue', function(event) {
+          nShowValueEvents += 1;
+          assert(basic.visible, 'input is visible');
+        });
+        basic.addEventListener('hideValue', function() {
+          nHideValueEvents += 1;
+          assert(!basic.visible, 'input is hidden');
+        });
+        basic.toggle();
+        assert(nShowValueEvents === 1, 'showValue event fired once');
+        assert(nHideValueEvents === 0, 'hideValue event not fired yet');
+        basic.toggle();
+        assert(nShowValueEvents === 1, 'showValue event fired once');
+        assert(nHideValueEvents === 1, 'hideValue event fired once');
+      });
+    });
+  </script>
+</body>
+
+</html>
diff --git a/wct.conf.json b/wct.conf.json
@@ -0,0 +1,3 @@
+{
+  "suites": ["test"]
+}