Issue fxbox#13 - Add very basic FTU, r=ferjm

michielbdejong · Feb 9, 2016 · 1767da6 · 1767da6
1 parent b924113
commit 1767da6
Show file tree

Hide file tree

Showing 4 changed files with 157 additions and 11 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -2,6 +2,10 @@ language: rust
 rust:
     - nightly
 
+addons:
+  hosts:
+    - foxbox.local
+
 before_script:
     - "sh -e /etc/init.d/xvfb start"
     - "export DISPLAY=:99.0"
@@ -10,9 +14,9 @@ before_script:
     - sleep 5
     - nvm install 4.2
     - nvm use 4.2
-    - npm install selenium-webdriver
+    - npm install selenium-webdriver mocha
 
 script:
     - cargo build # Linter is also executed here
     - RUST_BACKTRACE=1 cargo test
-    - (cargo run > /dev/null &) ; node test/selenium/ftu_test.js
+    - (cargo run > /dev/null &) ; ./node_modules/.bin/mocha test/selenium/ftu_test.js
diff --git a/docs/user-manual.md b/docs/user-manual.md
@@ -0,0 +1,5 @@
+# Setting up your FoxBox
+
+* Connect your FoxBox to your internet router, using the ethernet cable provided.
+* Browse to [http://foxbox.local/](http://foxbox.local/).
+* Follow the instructions there.
diff --git a/static/index.html b/static/index.html
@@ -2,8 +2,55 @@
 <html>
   <head>
     <title>FoxBox</title>
+    <meta charset="utf-8">
   </head>
   <body>
-    <h1>Welcome To FoxBox!</h1>
+    <h1>Welcome to your FoxBox!</h1>
+    <p>
+      <label for="pwd1-input">Please choose an admin password (8 characters minimal):</label>
+      <input type="password" id="pwd1-input">
+    </p>
+    <p>
+      <label for="pwd2-input">Please repeat your admin password:</label>
+      <input type="password" id="pwd2-input">
+    </p>
+    <p>
+      <input id="set-button" type="submit" value="Set" onclick="setPassword();">
+    </p>
   </body>
+  <script>
+    function success() {
+      document.body.innerHTML =
+        '<h1 id="thank-you">Thank you!</h1>' +
+        '<p>Now please us an app like <a href="http://example.com/">http://example.com/</a> to connect your IoT '+
+        'devices and set everything up. Please write down the following information:</p>' +
+        '<ul><li>FoxBox location (\'' +
+        window.location.href +
+        '\')</li>' +
+        '<li>Your username (\'admin\')</li>' +
+        '<li>Your password (the one you just created).</li></ul></p>';
+    }
+    function setPassword() {
+      var pwd = document.getElementById('pwd1-input').value;
+      if (document.getElementById('pwd2-input').value != pwd) {
+        window.alert('Passwords don\'t match! Please try again.');
+        return;
+      }
+      if (pwd.length < 8) {
+        window.alert('Please use a password of at least 8 characters.');
+        return;
+      }
+      var xhr = new XMLHttpRequest();
+      xhr.open('POST', '/v1/users/admin', true);
+      xhr.onload = function() {
+        if (xhr.status != 201) {
+          console.log('TO DO: Deal with unsuccessful API response', xhr.status, xhr.responseText);
+        }
+        success();
+      }
+      xhr.send(JSON.stringify({
+        password: pwd
+      }));
+    }
+  </script>
 </html>
diff --git a/test/selenium/ftu_test.js b/test/selenium/ftu_test.js
@@ -1,10 +1,100 @@
-var webdriver = require('selenium-webdriver'),
-  until = require('selenium-webdriver').until;
+var assert = require('assert'),
+  test = require('selenium-webdriver/testing'),
+  webdriver = require('selenium-webdriver');
 
-var driver = new webdriver.Builder().
-  forBrowser('firefox').
-  build();
+test.describe('setup page', function() {
+  var driver;
+  this.timeout(8000);
+  before(function() {
+    driver = new webdriver.Builder().
+      forBrowser('firefox').
+      build();
+  });
+  beforeEach(function() {
+    driver.get('http://foxbox.local:3000/');
+  });
+  after(function() {
+    driver.quit();
+  });
 
-driver.get('http://localhost:3000/');
-driver.wait(until.titleIs('FoxBox'), 10000);
-driver.quit();
+  test.it('should be titled FoxBox', function () {
+    return driver.wait(webdriver.until.titleIs('FoxBox'), 5000).then(function(value) {
+      assert.equal(value, true);
+    });
+  });
+  describe('UI to set admin password', function() {
+    var elts;
+    beforeEach(function() {
+      elts = {
+        pwd1: driver.findElement(webdriver.By.id('pwd1-input')),
+        pwd2: driver.findElement(webdriver.By.id('pwd2-input')),
+        set: driver.findElement(webdriver.By.id('set-button'))
+      };
+    });
+    test.it('should have the right fields', function () {
+      var types = {
+        pwd1: 'password',
+        pwd2: 'password',
+        set: 'submit'
+      }
+      var promises = Object.keys(elts).map(function(key) {
+        return elts[key].getAttribute('type').then(function(value) {
+          assert.equal(value, types[key]);
+        });
+      });
+      return Promise.all(promises);
+    });
+
+    test.it('should reject non-matching passwords', function () {
+      return elts.pwd1.sendKeys('asdfasdf').then(function() {
+        return elts.pwd2.sendKeys('qwerqwer');
+      }).then(function() {
+        return elts.set.click();
+      }).then(function() {
+        return driver.wait(webdriver.until.alertIsPresent(), 5000);
+      }).then(function() {
+        return driver.switchTo().alert();
+      }).then(function(alert) {
+        return alert.getText().then(function(text) {
+          assert.equal(text, 'Passwords don\'t match! Please try again.');
+        }).then(function() {
+          alert.dismiss();
+        });
+      });
+    });
+
+    test.it('should reject short passwords', function () {
+      return elts.pwd1.sendKeys('asdf').then(function() {
+        return elts.pwd2.sendKeys('asdf');
+      }).then(function() {
+        return elts.set.click();
+      }).then(function() {
+        return driver.wait(webdriver.until.alertIsPresent(), 5000);
+      }).then(function() {
+        return driver.switchTo().alert();
+      }).then(function(alert) {
+        return alert.getText().then(function(text) {
+          assert.equal(text, 'Please use a password of at least 8 characters.');
+        }).then(function() {
+          alert.dismiss();
+        });
+      });
+    });
+
+    test.it('should accept matching, long-enough passwords', function () {
+      return elts.pwd1.sendKeys('asdfasdf').then(function() {
+        return elts.pwd2.sendKeys('asdfasdf');
+      }).then(function() {
+        return elts.set.click();
+      }).then(function() {
+        return driver.findElement(webdriver.By.id('thank-you'));
+      }).then(function(elt) {
+        return driver.wait(webdriver.until.elementIsVisible(elt), 5000).then(function() {
+          return elt.getAttribute('innerHTML');
+        }).then(function(value) {
+          assert.equal(value, 'Thank you!');
+        });
+      });
+    });
+  });
+});