Improve login UX

test/test_login.js

 'use strict';
 
 (function() {
 
   describe('environment login support', function() {
     var requires = ['node', 'juju-gui', 'juju-views', 'juju-tests-utils'];
-    var Y, conn, env, utils, juju, makeLoginView, views, app;
+    var Y, conn, env, utils, juju;
     var test = it; // We aren't really doing BDD so let's be more direct.
 
-    before(function() {
-      Y = YUI(GlobalConfig).use(requires);
-      utils = Y.namespace('juju-tests.utils');
-      juju = Y.namespace('juju');
+    before(function(done) {
+      Y = YUI(GlobalConfig).use(requires, function(Y) {
+        utils = Y.namespace('juju-tests').utils;
+        juju = Y.namespace('juju');
+        done();
+      });
     });
 
     beforeEach(function() {
-      var container = Y.Node.create('<div/>');
       conn = new utils.SocketStub();
       env = new juju.Environment({conn: conn});
       env.connect();
       conn.open();
       //      env.set('connected', true);
     });
 
     afterEach(function() {
       env.destroy();
     });
@@ skipping 47 matching lines @@
       env.set('user', 'user');
       env.set('password', 'password');
       env.login();
       assert.equal(conn.last_message().op, 'login');
       assert.equal(conn.last_message().user, 'user');
       assert.equal(conn.last_message().password, 'password');
     });
 
   });
 
+
+  describe('login view', function() {
+    var requires = ['node', 'juju-gui', 'juju-views', 'juju-tests-utils'];
+    var Y, conn, env, utils, juju, views, loginView, container, loginMask;
+    var test = it; // We aren't really doing BDD so let's be more direct.
+
+    before(function(done) {
+      Y = YUI(GlobalConfig).use(requires, function(Y) {
+        utils = Y.namespace('juju-tests').utils;
+        juju = Y.namespace('juju');
+        views = Y.namespace('juju.views');
+        done();
+      });
+    });
+
+    beforeEach(function() {
+      conn = new utils.SocketStub();
+      env = new juju.Environment({conn: conn});
+      env.connect();
+      conn.open();
+      container = Y.one('body').appendChild('<div/>');
+      // Needed by the render method.
+      loginMask = Y.one('body').appendChild('<div/>').set('id', 'login-mask');
+      loginView = new views.login(
+          {container: container, env: env, help_text: 'Help text'});
+    });
+
+    afterEach(function() {
+      env.destroy();
+      container.remove(true);
+      loginMask.remove(true);
+    });
+
+    test('the view login method logs in through the environment', function() {
+      var noop = function() {};
+      var ev = {preventDefault: noop, currentTarget: {get: noop}};
+      container.appendChild('<input/>').set('type', 'text').set(
+          'value', 'user');
+      container.appendChild('<input/>').set('type', 'password').set(
+          'value', 'password');
+      loginView.login(ev);
+      assert.equal(conn.last_message().op, 'login');
+      assert.equal(conn.last_message().user, 'user');
+      assert.equal(conn.last_message().password, 'password');
+    });
+
+    test('the view render method adds the login form', function() {
+      loginView.render();
+      assert.equal(
+          container.one('#login-form input[type=submit]').get('value'),
+          'Login');
+    });
+
+  });
+
 })();