Init the vaadin-button element with a native button

vaadin · Feb 17, 2017 · be9be2b · be9be2b
1 parent dd791a4
commit be9be2b
Show file tree

Hide file tree

Showing 28 changed files with 476 additions and 87 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -9,6 +9,7 @@
     "html"
   ],
   "globals": {
-    "Polymer": false
+    "Polymer": false,
+    "Vaadin": false
   }
 }
diff --git a/.gemini.yml b/.gemini.yml
@@ -1,4 +1,4 @@
-rootUrl: http://127.0.0.1:3000/test/visual
+rootUrl: http://127.0.0.1:8080/components/vaadin-button/test/visual/
 gridUrl: http://127.0.0.1:4444/wd/hub
 screenshotsDir: ./test/visual/screens
 

diff --git a/.travis.yml b/.travis.yml
@@ -18,6 +18,8 @@ install:
 
 before_script:
   - gulp lint
+  - polyserve &
+  - travis_retry xvfb-run -s '-screen 0 1024x768x24' gulp perf:run
   - ([ "$TRAVIS_EVENT_TYPE" = "pull_request" ] || TRAVIS_BRANCH=quick/${TRAVIS_BUILD_ID} xvfb-run -s '-screen 0 1024x768x24' wct)
 
 script:

diff --git a/README.md b/README.md
@@ -21,7 +21,7 @@
 -->
 ```html
 <vaadin-button>
-  ...
+  Vaadin Button
 </vaadin-button>
 ```
 

diff --git a/bower.json b/bower.json
@@ -28,7 +28,8 @@
     "test-fixture": "2.0.0",
     "elements-demo-resources": "vaadin/elements-demo-resources#2.0-preview",
     "iron-component-page": "polymerelements/iron-component-page#2.0-preview",
-    "iron-demo-helpers": "polymerelements/iron-demo-helpers#2.0-preview"
+    "iron-demo-helpers": "polymerelements/iron-demo-helpers#2.0-preview",
+    "iron-test-helpers": "polymerelements/iron-test-helpers#2.0-preview"
   },
   "resolutions": {
     "test-fixture": "^2.0.0"

diff --git a/demo/advanced.html b/demo/advanced.html
diff --git a/demo/common.html b/demo/common.html
@@ -14,7 +14,6 @@
 <script>
   // Menu configuration
   window.demos = [
-     {name: 'index', title: 'Basic Examples'},
-     {name: 'advanced', title: 'Advanced Usage'}
+     {name: 'index', title: 'Basic Examples'}
   ];
 </script>
diff --git a/demo/index.html b/demo/index.html
@@ -11,15 +11,40 @@
   <link rel="import" href="common.html">
 </head>
 
-<body>
+<body unresolved>
   <div class="vertical-section-container centered">
 
     <demo-navigation></demo-navigation>
 
-    <h3>Sample example</h3>
+    <h3>Default button</h3>
     <demo-snippet>
       <template>
-        <vaadin-button></vaadin-button>
+        <vaadin-button onclick="console.log('clicked')">Vaadin Button</vaadin-button>
+      </template>
+    </demo-snippet>
+
+    <h3>Button with autofocus</h3>
+    <demo-snippet>
+      <template>
+        <vaadin-button autofocus>
+          <img src="vaadin-logo.svg">
+        </vaadin-button>
+      </template>
+    </demo-snippet>
+
+    <h3>Buttons with custom tabindex</h3>
+    <demo-snippet>
+      <template>
+        <vaadin-button tabindex="3">3</vaadin-button>
+        <vaadin-button tabindex="2">2</vaadin-button>
+        <vaadin-button tabindex="1">1</vaadin-button>
+      </template>
+    </demo-snippet>
+
+    <h3>Disabled button</h3>
+    <demo-snippet>
+      <template>
+        <vaadin-button disabled>Disabled</vaadin-button>
       </template>
     </demo-snippet>
   </div>

diff --git a/demo/vaadin-logo.svg b/demo/vaadin-logo.svg
diff --git a/gulpfile.js b/gulpfile.js
@@ -4,6 +4,17 @@ var gulp = require('gulp');
 var eslint = require('gulp-eslint');
 var htmlExtract = require('gulp-html-extract');
 var stylelint = require('gulp-stylelint');
+var log = require('gulp-util').log;
+var spawn = require('child_process').spawn;
+var which = require('which');
+
+var perf = {
+  lighthouse: './node_modules/.bin/lighthouse',
+  port: 8080,
+  element: require('./package.json').name,
+  dir: 'test/performance',
+  tests: require('./test/performance/config.json')
+};
 
 gulp.task('lint', ['lint:js', 'lint:html', 'lint:css']);
 
@@ -46,3 +57,60 @@ gulp.task('lint:css', function() {
     ]
   }));
 });
+
+function runCommand(cmd, cb) {
+  var args = cmd.split(/\s+/);
+  var proc = spawn(args.shift(), args);
+  var stdout = '';
+  proc.stdout.on('data', data => stdout += data);
+  proc.on('close', status => cb(status, stdout));
+}
+
+function runTest(test, threshold, cb) {
+  const url = `http://localhost:${perf.port}/components/${perf.element}/${perf.dir}/${test}`;
+  const command = `node ${perf.lighthouse} --perf --output=json ${url}`;
+
+  log(`Performance running test=${test} threshold=${threshold} ...`);
+  runCommand(command, (status, stdout) => {
+    var error;
+    if (status) {
+      error = `Error: status ${status} while running lighthouse CLI`;
+    } else {
+      var results = JSON.parse(stdout);
+      // To upgrade to lighthouse v1.4.0+ use results.aggregations[0].total
+      var total = results.aggregations[0].score[0].overall;
+
+      if (total === undefined) {
+        error = `Error: lighthouse has not produced a valid JSON output`;
+      } else if (total == 1) {
+        error = `Error: lighthouse reported score=1. It might be server not running or bad url: ${url}`;
+      } else if (total < threshold) {
+        error = `Error: low performance scored ${total}`;
+      } else {
+        log(`Performance done test=${test} scored with ${total}`);
+      }
+    }
+    if (error) {
+      log(error);
+      perf.failed = true;
+    }
+    cb();
+  });
+}
+
+gulp.task('perf:env', function(cb) {
+  which('google-chrome-stable', (err, path) => {
+    process.env.LIGHTHOUSE_CHROMIUM_PATH = path;
+    cb();
+  });
+});
+
+gulp.task('perf:run:tests', ['perf:env'], function(cb) {
+  perf.tests.reduce((prev, test) => () => runTest(test.name, test.threshold, prev), cb)();
+});
+
+gulp.task('perf:run', ['perf:run:tests'], function() {
+  log(`Finished 'perf:run' with ${perf.failed ? 'error' : 'great success'}`);
+  process.exitCode = perf.failed ? 1 : 0;
+  process.exit();
+});
diff --git a/package.json b/package.json
@@ -21,15 +21,16 @@
     "test": "wct"
   },
   "devDependencies": {
+    "eslint-plugin-html": "^1.7.0",
+    "eslint-config-vaadin": "^0.1.0",
     "gemini": "^4.17.1",
-    "gemini-express": "^1.0.0",
     "gemini-sauce": "^1.0.0",
     "gulp": "latest",
     "gulp-html-extract": "^0.0.3",
     "gulp-eslint": "^3.0.1",
     "gulp-stylelint": "^3.7.0",
-    "eslint-plugin-html": "^1.7.0",
-    "eslint-config-vaadin": "^0.1.0",
+    "lighthouse": "~1.2.2",
+    "polyserve": "^0.15.0",
     "stylelint-config-vaadin": "^0.1.0",
     "web-component-tester": "^5.0.0"
   }

diff --git a/test/.eslintrc b/test/.eslintrc
@@ -6,6 +6,7 @@
     "fixture": false,
     "it": false,
     "expect": false,
-    "gemini": false
+    "gemini": false,
+    "MockInteractions": false
   }
 }
diff --git a/test/control-state.html b/test/control-state.html
@@ -0,0 +1,89 @@
+<!doctype html>
+
+<head>
+  <meta charset="UTF-8">
+  <title>vaadin-button tests</title>
+
+  <script src="../../web-component-tester/browser.js"></script>
+  <link rel="import" href="../vaadin-button.html">
+
+</head>
+
+<body>
+  <test-fixture id="default">
+    <template>
+      <vaadin-button>Button</vaadin-button>
+    </template>
+  </test-fixture>
+
+  <test-fixture id="disabled">
+    <template>
+      <vaadin-button disabled>Disabled button</vaadin-button>
+    </template>
+  </test-fixture>
+
+  <script>
+
+    describe('control-state behavior', function() {
+      var customElement, focusElement;
+
+      beforeEach(function() {
+        customElement = fixture('default');
+        // Need the shadow dom be rendered before getting the internal element reference
+        focusElement = customElement.focusElement;
+      });
+
+      describe('tabindex', function() {
+        it('setting tabIndex should forward the value to the internal element', function() {
+          customElement.tabIndex = 1;
+          expect(focusElement.getAttribute('tabindex')).to.be.equal('1');
+        });
+
+        it('we always need a tabindex by default', function() {
+          expect(customElement.getAttribute('tabindex')).to.be.equal('0');
+        });
+
+        it('setting tabIndex should update the attribute', function() {
+          customElement.tabIndex = 1;
+          expect(customElement.getAttribute('tabindex')).to.be.equal('1');
+        });
+
+        it('enabling the element should restore old tabindex', function() {
+          customElement.tabIndex = 1;
+          customElement.disabled = true;
+          customElement.disabled = false;
+          expect(customElement.getAttribute('tabindex')).to.be.equal('1');
+        });
+
+        it('setting disabled to true should remove tabindex', function() {
+          customElement.tabIndex = 1;
+          customElement.disabled = true;
+          expect(customElement.getAttribute('tabindex')).to.not.be.ok;
+        });
+
+        it('should synchronize tabindex with tabIndex', function() {
+          customElement.tabindex = 1;
+          expect(customElement.tabIndex).to.eql(1);
+        });
+      });
+
+      describe('disabled', function() {
+        beforeEach(function() {
+          customElement = fixture('disabled');
+          focusElement = customElement.focusElement;
+        });
+
+        it('should not have tabindex if disabled when ready', function() {
+          expect(customElement.getAttribute('tabindex')).to.not.be.ok;
+        });
+
+        it('should update internal element tabIndex', function() {
+          customElement.tabIndex = 4;
+          expect(customElement.getAttribute('tabindex')).to.be.null;
+          expect(focusElement.getAttribute('tabindex')).to.be.equal('4');
+        });
+      });
+
+    });
+  </script>
+</body>
diff --git a/test/index.html b/test/index.html
@@ -13,9 +13,10 @@
     WCT._config.environmentScripts.push('webcomponentsjs/webcomponents-lite.js');
 
     WCT.loadSuites([
-      'sample-test.html'
+      'vaadin-button_test.html',
+      'control-state.html'
     ].reduce(function(suites, suite) {
-      return suites.concat([suite, suite + '?wc-shadydom=true']);
+      return suites.concat([suite, `${suite}?wc-shadydom=true`]);
     }, []));
   </script>
 </body>

diff --git a/test/performance/config.json b/test/performance/config.json
@@ -0,0 +1,3 @@
+[
+  {"name": "index.html", "threshold": 0.75}
+]
diff --git a/test/performance/index.html b/test/performance/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>vaadin-button performance test</title>
+  <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
+  <link rel="import" href="../../../polymer/polymer.html">
+  <link rel="import" href="../../vaadin-button.html">
+</head>
+
+<body>
+  <vaadin-button>Vaadin Button</vaadin-button>
+</body>
-Original file line number
+Diff line change
@@ Expand Up / @@ -21,7 +21,7 @@ @@
     -->
     ```html
     <vaadin-button>
-      ...
+      Vaadin Button
     </vaadin-button>
     ```
@@ Expand Down @@