Implement number-field

vaadin · Aug 28, 2017 · f9cc0fd · f9cc0fd
1 parent c91bd02
commit f9cc0fd
Show file tree

Hide file tree

Showing 12 changed files with 390 additions and 0 deletions.
diff --git a/demo/common.html b/demo/common.html
@@ -14,6 +14,7 @@
   window.demos = [
     {name: 'index', title: 'Basic Examples'},
     {name: 'password', title: 'Password Field'},
+    {name: 'number-field', title: 'Number Field'},
     {name: 'validators', title: 'Custom Validators'},
     {name: 'styling', title: 'Styling'}
   ];
@@ -23,6 +24,7 @@
 <!-- The component to demo -->
 <link rel="import" href="../vaadin-text-field.html">
 <link rel="import" href="../vaadin-password-field.html">
+<link rel="import" href="../vaadin-number-field.html">
 
 <script>
   window.addEventListener('WebComponentsReady', () => {

diff --git a/demo/number-field.html b/demo/number-field.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+
+  <title>vaadin-number-field Basic Examples</title>
+
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+  <link rel="import" href="../../iron-form/iron-form.html">
+  <link rel="import" href="common.html">
+</head>
+
+<body unresolved>
+  <div class="vertical-section-container centered">
+    <demo-navigation></demo-navigation>
+    <h3>Number Field</h3>
+    <demo-snippet>
+      <template>
+        <vaadin-number-field></vaadin-number-field>
+      </template>
+    </demo-snippet>
+
+    <h3>Number Field with controls</h3>
+    <demo-snippet>
+      <template>
+        <vaadin-number-field has-controls></vaadin-number-field>
+      </template>
+    </demo-snippet>
+
+    <h3>Number Field with value limits</h3>
+    <demo-snippet>
+      <template>
+        <vaadin-number-field value="1" min="1" max="10" has-controls></vaadin-number-field>
+      </template>
+    </demo-snippet>
+  </div>
+</body>
+
+</html>
diff --git a/test/index.html b/test/index.html
@@ -15,6 +15,7 @@
     WCT.loadSuites([
       'text-field.html',
       'password-field.html',
+      'number-field.html',
       'validation.html',
       'accessibility.html'
     ].reduce(function(suites, suite) {

diff --git a/test/number-field.html b/test/number-field.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>vaadin-number-field tests</title>
+  <script src="../../web-component-tester/browser.js"></script>
+  <link rel="import" href="../vaadin-number-field.html">
+  <link rel="import" href="../../iron-form/iron-form.html">
+</head>
+
+<body>
+  <test-fixture id="default">
+    <template>
+      <vaadin-number-field></vaadin-number-field>
+    </template>
+  </test-fixture>
+
+  <script>
+    describe('number-field', function() {
+      var numberField, input, decreaseButton, increaseButton;
+
+      beforeEach(function() {
+        numberField = fixture('default');
+        input = numberField.$.input;
+        decreaseButton = numberField.root.querySelector('[part=decrease-button]');
+        increaseButton = numberField.root.querySelector('[part=increase-button]');
+      });
+
+      describe('native', function() {
+
+        it('should have [type=number]', function() {
+          expect(input.type).to.equal('number');
+        });
+
+        it('should have hidden controls', function() {
+          expect(decreaseButton.hidden).to.be.true;
+          expect(increaseButton.hidden).to.be.true;
+        });
+
+        ['min', 'max'].forEach(function(attr) {
+          it('should set numeric attribute ' + attr, function() {
+            var value = 5;
+            numberField[attr] = value;
+            var attrval = input.getAttribute(attr);
+
+            expect(attrval).to.be.equal(String(value));
+          });
+        });
+
+      });
+
+      describe('value control buttons', function() {
+        it('should have value controls when hasControls is set to true', function() {
+          expect(decreaseButton.hidden).to.be.true;
+          expect(increaseButton.hidden).to.be.true;
+
+          numberField.hasControls = true;
+
+          expect(decreaseButton.hidden).to.be.false;
+          expect(increaseButton.hidden).to.be.false;
+        });
+
+        it('should increase value by 1 when increaseButton is clicked', function() {
+          numberField.value = 0;
+
+          increaseButton.click();
+
+          expect(numberField.value).to.be.equal(1);
+        });
+
+        it('should decrease value by 1 when increaseButton is clicked', function() {
+          numberField.value = 0;
+
+          decreaseButton.click();
+
+          expect(numberField.value).to.be.equal(-1);
+        });
+
+        it('should not increase value when increaseButton is clicked and max value is reached', function() {
+          numberField.value = 10;
+          numberField.max = 10;
+
+          increaseButton.click();
+
+          expect(numberField.value).to.be.equal(10);
+        });
+
+        it('should not decrease value when decreaseButton is clicked and min value is reached', function() {
+          numberField.value = 1;
+          numberField.min = 1;
+
+          decreaseButton.click();
+
+          expect(numberField.value).to.be.equal(1);
+        });
+
+        it('should not change value when number field is disabled and controls are clicked', function() {
+          numberField.disabled = true;
+          numberField.value = 0;
+
+          increaseButton.click();
+          expect(numberField.value).to.be.equal(0);
+
+          decreaseButton.click();
+          expect(numberField.value).to.be.equal(0);
+        });
+      });
+
+    });
+  </script>
+</body>
+</html>
diff --git a/test/performance/index.html b/test/performance/index.html
@@ -6,9 +6,11 @@
   <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
   <link rel="import" href="../../vaadin-text-field.html">
   <link rel="import" href="../../vaadin-password-field.html">
+  <link rel="import" href="../../vaadin-number-field.html">
 </head>
 
 <body>
   <vaadin-text-field placeholder="Username"></vaadin-text-field>
   <vaadin-password-field placeholder="Password"></vaadin-password-field>
+  <vaadin-number-field placeholder="Number"></vaadin-number-field>
 </body>
diff --git a/test/visual/number-field.html b/test/visual/number-field.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+
+<head lang="en">
+  <meta charset="UTF-8">
+  <title></title>
+  <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
+  <link href="../../vaadin-number-field.html" rel="import">
+  <link href="./common.html" rel="import">
+</head>
+
+<body>
+  <fieldset id="number-field">
+    <p>
+      <vaadin-number-field placeholder="Number"></vaadin-number-field>
+    <p>
+      <vaadin-number-field value="10"></vaadin-number-field>
+    <p>
+      <vaadin-number-field has-controls></vaadin-number-field>
+    <p>
+      <vaadin-number-field value="10" has-controls></vaadin-number-field>
+  </fieldset>
+</body>
+
+</html>
diff --git a/test/visual/screens/vaadin-text-field/number-field/number-field/chrome.png b/test/visual/screens/vaadin-text-field/number-field/number-field/chrome.png
diff --git a/test/visual/screens/vaadin-text-field/number-field/number-field/edge.png b/test/visual/screens/vaadin-text-field/number-field/number-field/edge.png
diff --git a/test/visual/screens/vaadin-text-field/number-field/number-field/firefox.png b/test/visual/screens/vaadin-text-field/number-field/number-field/firefox.png
diff --git a/test/visual/screens/vaadin-text-field/number-field/number-field/ie.png b/test/visual/screens/vaadin-text-field/number-field/number-field/ie.png
diff --git a/test/visual/test.js b/test/visual/test.js
@@ -45,4 +45,11 @@ gemini.suite('vaadin-text-field', function(rootSuite) {
       .capture('password');
   });
 
+  gemini.suite('number-field', function(suite) {
+    suite
+      .setUrl('number-field.html')
+      .setCaptureElements('#number-field')
+      .capture('number-field');
+  });
+
 });