increased tests cover around user registration, small improvs in tests utils

frontend/src/components/auth-message.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-export class AuthMessage extends React.Component {
+export default class extends React.Component {
   refresh() {
     window.location.reload();
   }

frontend/src/components/password-strength.js

@@ -10,11 +10,11 @@ export const STYLES = [
 ];
 
 export const LABELS = [
-  gettext('Entered password is very weak.'),
-  gettext('Entered password is weak.'),
-  gettext('Entered password is average.'),
-  gettext('Entered password is strong.'),
-  gettext('Entered password is very strong.')
+  gettext("Entered password is very weak."),
+  gettext("Entered password is weak."),
+  gettext("Entered password is average."),
+  gettext("Entered password is strong."),
+  gettext("Entered password is very strong.")
 ];
 
 export default class extends React.Component {

frontend/src/initializers/auth-message-component.js

@@ -1,6 +1,6 @@
 import { connect } from 'react-redux';
 import misago from 'misago/index';
-import { AuthMessage, select } from 'misago/components/auth-message';
+import AuthMessage, { select } from 'misago/components/auth-message';
 import mount from 'misago/utils/mount-component';
 
 export default function initializer() {

frontend/src/test-setup.js

@@ -128,6 +128,7 @@ global.snackbarStoreMock = function() {
 
 // global init function for modal and dropdown services
 global.initModal = function(modal) {
+  $('#modal-mount').off();
   modal.init(document.getElementById('modal-mount'));
 };
 

frontend/tests/components/auth-message.js

@@ -1,7 +1,7 @@
 import assert from 'assert';
 import React from 'react'; // jshint ignore:line
 import ReactDOM from 'react-dom'; // jshint ignore:line
-import { AuthMessage } from 'misago/components/auth-message'; // jshint ignore:line
+import AuthMessage from 'misago/components/auth-message'; // jshint ignore:line
 
 describe("Auth Message", function() {
   afterEach(function() {

frontend/tests/components/password-strength.js

@@ -0,0 +1,222 @@
+import assert from 'assert';
+import React from 'react'; // jshint ignore:line
+import ReactDOM from 'react-dom'; // jshint ignore:line
+import PasswordStrength from 'misago/components/password-strength'; // jshint ignore:line
+import zxcvbn from 'misago/services/zxcvbn';
+
+describe("Password Strength", function() {
+  afterEach(function() {
+    window.emptyTestContainers();
+    delete window.zxcvbn;
+  });
+
+  it('renders very weak password', function(done) {
+    window.zxcvbn = function(password, inputs) {
+      assert.equal(password, 'very-weak', "valid password is passed to API");
+      assert.deepEqual(inputs, ['a', 'b', 'c'],
+        "valid password is passed to API");
+
+      return {
+        score: 0
+      };
+    };
+
+    zxcvbn.init({
+      include: function() {
+        /* noop */
+      }
+    });
+    zxcvbn.load();
+
+    /* jshint ignore:start */
+    ReactDOM.render(
+      <PasswordStrength password="very-weak" inputs={['a', 'b', 'c']} />,
+      document.getElementById('test-mount')
+    );
+    /* jshint ignore:end */
+
+    let element = $('#test-mount .password-strength');
+    assert.ok(element.length, "component renders very weak password");
+
+    window.setTimeout(function() {
+      assert.ok(element.find('.progress-bar').hasClass('progress-bar-danger'),
+        "progress bar has valid class");
+      assert.equal(element.find('.sr-only').text().trim(),
+        "Entered password is very weak.",
+        "progress bar has valid sr-only label");
+      assert.equal(element.find('p').text().trim(),
+        "Entered password is very weak.",
+        "progress bar has valid description");
+
+      done();
+    }, 200);
+  });
+
+  it('renders weak password', function(done) {
+    window.zxcvbn = function(password, inputs) {
+      assert.equal(password, 'weak', "valid password is passed to API");
+      assert.deepEqual(inputs, ['a', 'b', 'c'],
+        "valid password is passed to API");
+
+      return {
+        score: 1
+      };
+    };
+
+    zxcvbn.init({
+      include: function() {
+        /* noop */
+      }
+    });
+    zxcvbn.load();
+
+    /* jshint ignore:start */
+    ReactDOM.render(
+      <PasswordStrength password="weak" inputs={['a', 'b', 'c']} />,
+      document.getElementById('test-mount')
+    );
+    /* jshint ignore:end */
+
+    let element = $('#test-mount .password-strength');
+    assert.ok(element.length, "component renders weak password");
+
+    window.setTimeout(function() {
+      assert.ok(element.find('.progress-bar').hasClass('progress-bar-warning'),
+        "progress bar has valid class");
+      assert.equal(element.find('.sr-only').text().trim(),
+        "Entered password is weak.",
+        "progress bar has valid sr-only label");
+      assert.equal(element.find('p').text().trim(),
+        "Entered password is weak.",
+        "progress bar has valid description");
+
+      done();
+    }, 200);
+  });
+
+  it('renders average password', function(done) {
+    window.zxcvbn = function(password, inputs) {
+      assert.equal(password, 'average', "valid password is passed to API");
+      assert.deepEqual(inputs, ['a', 'b', 'c'],
+        "valid password is passed to API");
+
+      return {
+        score: 2
+      };
+    };
+
+    zxcvbn.init({
+      include: function() {
+        /* noop */
+      }
+    });
+    zxcvbn.load();
+
+    /* jshint ignore:start */
+    ReactDOM.render(
+      <PasswordStrength password="average" inputs={['a', 'b', 'c']} />,
+      document.getElementById('test-mount')
+    );
+    /* jshint ignore:end */
+
+    let element = $('#test-mount .password-strength');
+    assert.ok(element.length, "component renders average password");
+
+    window.setTimeout(function() {
+      assert.ok(element.find('.progress-bar').hasClass('progress-bar-warning'),
+        "progress bar has valid class");
+      assert.equal(element.find('.sr-only').text().trim(),
+        "Entered password is average.",
+        "progress bar has valid sr-only label");
+      assert.equal(element.find('p').text().trim(),
+        "Entered password is average.",
+        "progress bar has valid description");
+
+      done();
+    }, 200);
+  });
+
+  it('renders strong password', function(done) {
+    window.zxcvbn = function(password, inputs) {
+      assert.equal(password, 'stronk', "valid password is passed to API");
+      assert.deepEqual(inputs, ['a', 'b', 'c'],
+        "valid password is passed to API");
+
+      return {
+        score: 3
+      };
+    };
+
+    zxcvbn.init({
+      include: function() {
+        /* noop */
+      }
+    });
+    zxcvbn.load();
+
+    /* jshint ignore:start */
+    ReactDOM.render(
+      <PasswordStrength password="stronk" inputs={['a', 'b', 'c']} />,
+      document.getElementById('test-mount')
+    );
+    /* jshint ignore:end */
+
+    let element = $('#test-mount .password-strength');
+    assert.ok(element.length, "component renders strong password");
+
+    window.setTimeout(function() {
+      assert.ok(element.find('.progress-bar').hasClass('progress-bar-primary'),
+        "progress bar has valid class");
+      assert.equal(element.find('.sr-only').text().trim(),
+        "Entered password is strong.",
+        "progress bar has valid sr-only label");
+      assert.equal(element.find('p').text().trim(),
+        "Entered password is strong.",
+        "progress bar has valid description");
+
+      done();
+    }, 200);
+  });
+
+  it('renders very strong password', function(done) {
+    window.zxcvbn = function(password, inputs) {
+      assert.equal(password, 'very-stronk', "valid password is passed to API");
+      assert.deepEqual(inputs, ['a', 'b', 'c'],
+        "valid password is passed to API");
+
+      return {
+        score: 4
+      };
+    };
+
+    zxcvbn.init({
+      include: function() {
+        /* noop */
+      }
+    });
+    zxcvbn.load();
+
+    /* jshint ignore:start */
+    ReactDOM.render(
+      <PasswordStrength password="very-stronk" inputs={['a', 'b', 'c']} />,
+      document.getElementById('test-mount')
+    );
+    /* jshint ignore:end */
+
+    let element = $('#test-mount .password-strength');
+    assert.ok(element.length, "component renders very strong password");
+
+    window.setTimeout(function() {
+      assert.ok(element.find('.progress-bar').hasClass('progress-bar-success'),
+        "progress bar has valid class");
+      assert.equal(element.find('.sr-only').text().trim(),
+        "Entered password is very strong.",
+        "progress bar has valid sr-only label");
+      assert.equal(element.find('p').text().trim(),
+        "Entered password is very strong.",
+        "progress bar has valid description");
+
+      done();
+    }, 200);
+  });
+});

frontend/tests/components/register.js

@@ -0,0 +1,59 @@
+import assert from 'assert';
+import React from 'react'; // jshint ignore:line
+import ReactDOM from 'react-dom'; // jshint ignore:line
+import misago from 'misago/index';
+import { RegisterForm, RegisterComplete } from 'misago/components/register'; // jshint ignore:line
+import modal from 'misago/services/modal';
+import snackbar from 'misago/services/snackbar';
+
+let snackbarStore = null;
+
+describe("Register Complete", function() {
+  afterEach(function() {
+    window.emptyTestContainers();
+  });
+
+  it("renders user-activated message", function() {
+    /* jshint ignore:start */
+    ReactDOM.render(
+      <RegisterComplete activation="user"
+                        username="Bob"
+                        email="bob@boberson.com" />,
+      document.getElementById('test-mount')
+    );
+    /* jshint ignore:end */
+
+    let element = $('#test-mount .modal-message');
+    assert.ok(element.length, "component renders");
+
+    assert.equal(element.find('p').first().text().trim(),
+      "Bob, your account has been created but you need to activate it before you will be able to sign in.",
+      "component renders valid message");
+
+    assert.equal(element.find('p').last().text().trim(),
+      "We have sent an e-mail to bob@boberson.com with link that you have to click to activate your account.",
+      "component renders valid activation instruction");
+  });
+
+  it("renders admin-activated message", function() {
+    /* jshint ignore:start */
+    ReactDOM.render(
+      <RegisterComplete activation="admin"
+                        username="Bob"
+                        email="bob@boberson.com" />,
+      document.getElementById('test-mount')
+    );
+    /* jshint ignore:end */
+
+    let element = $('#test-mount .modal-message');
+    assert.ok(element.length, "component renders");
+
+    assert.equal(element.find('p').first().text().trim(),
+      "Bob, your account has been created but board administrator will have to activate it before you will be able to sign in.",
+      "component renders valid message");
+
+    assert.equal(element.find('p').last().text().trim(),
+      "We will send an e-mail to bob@boberson.com when this takes place.",
+      "component renders valid activation instruction");
+  });
+});

frontend/tests/modal.js

@@ -78,13 +78,13 @@ describe("Modal", function() {
       assert.ok(element.length, "component was rendered");
 
       modal.show(TestModalB);
-    }, 400);
 
-    window.setTimeout(function() {
-      let element = $('#modal-mount .modal-b');
-      assert.ok(element.length, "component was toggled");
-      done();
-    }, 500);
+      window.setTimeout(function() {
+        let element = $('#modal-mount .modal-b');
+        assert.ok(element.length, "component was toggled");
+        done();
+      }, 200);
+    }, 400);
   });
 
   it('hides component', function(done) {
@@ -94,12 +94,12 @@ describe("Modal", function() {
       let element = $('#modal-mount .modal-a');
       assert.ok(element.length, "component was rendered");
       modal.hide();
-    }, 400);
 
-    window.setTimeout(function() {
-      let element = $('#modal-mount');
-      assert.equal(element.children().length, 0, "modal was emptied");
-      done();
-    }, 1000);
+      window.setTimeout(function() {
+        let element = $('#modal-mount');
+        assert.equal(element.children().length, 0, "modal was emptied");
+        done();
+      }, 600);
+    }, 400);
   });
 });

frontend/tests/zxcvbn.js

@@ -0,0 +1,49 @@
+import assert from 'assert';
+import { Zxcvbn } from 'misago/services/zxcvbn';
+
+let zxcvbn = null;
+
+describe("Zxcvbn", function() {
+  afterEach(function() {
+    delete window.zxcvbn;
+  });
+
+  it("loads library", function(done) {
+    zxcvbn = new Zxcvbn();
+    zxcvbn.init({
+      include: function(lib) {
+        assert.equal(lib, "misago/js/zxcvbn.js", "library is requested");
+      }
+    });
+
+    zxcvbn.load().then(function() {
+      assert.ok(true, "zxcvbn lib was loaded");
+      done();
+    });
+
+    window.setTimeout(function() {
+      window.zxcvbn = true;
+    }, 200);
+  });
+
+  it("scores passwords", function(done) {
+    zxcvbn = new Zxcvbn();
+    zxcvbn.init({
+      include: function(lib) {
+        assert.equal(lib, 'misago/js/zxcvbn.js', "library is requested");
+      }
+    });
+
+    zxcvbn.load().then(function() {
+      assert.equal(zxcvbn.scorePassword('abcd'), 4, "returns pass score");
+      done();
+    });
+
+    window.setTimeout(function() {
+      window.zxcvbn = function(password) {
+        assert.equal(password, 'abcd', "calls underlying zxcvbn lib");
+        return {score: password.length};
+      };
+    }, 200);
+  });
+});