Add web-ui based on previous code

3 files changed, 205 insertions, 0 deletions

diff --git a/web-ui/test/spec/page/pane_contract_expand.spec.js b/web-ui/test/spec/page/pane_contract_expand.spec.js
new file mode 100644
index 00000000..803f688c
--- /dev/null
+++ b/web-ui/test/spec/page/pane_contract_expand.spec.js
@@ -0,0 +1,67 @@
+/*global Smail */
+/*global afterEach */
+
+'use strict';
+
+describeComponent('page/pane_contract_expand', function () {
+
+  var fixture;
+
+  beforeEach(function () {
+    fixture = $('<div>')
+      .append($('<div>', { id: 'middle-pane-container' }))
+      .append($('<div>', { id: 'right-pane' }));
+
+    $('body').append(fixture);
+
+
+  });
+
+  afterEach(function () {
+    fixture.remove();
+  });
+
+  describe('after initialization', function () {
+    beforeEach(function () {
+      setupComponent(document);
+    });
+
+    it('contracts middle pane and expands right pane on mail open', function () {
+      $(document).trigger(Smail.events.ui.mail.open);
+
+      expect($('#middle-pane-container').attr('class')).toEqual(this.component.attr.MIDDLE_PANE_CONTRACT_CLASSES);
+      expect($('#right-pane').attr('class')).toEqual(this.component.attr.RIGHT_PANE_EXPAND_CLASSES);
+    });
+
+    it('contracts middle pane and expands right pane on open compose box', function () {
+      $(document).trigger(Smail.events.dispatchers.rightPane.openComposeBox);
+
+      expect($('#middle-pane-container').attr('class')).toEqual(this.component.attr.MIDDLE_PANE_CONTRACT_CLASSES);
+      expect($('#right-pane').attr('class')).toEqual(this.component.attr.RIGHT_PANE_EXPAND_CLASSES);
+    });
+
+    it('contracts middle pane and expands right pane on open draft', function () {
+      $(document).trigger(Smail.events.dispatchers.rightPane.openDraft);
+
+      expect($('#middle-pane-container').attr('class')).toEqual(this.component.attr.MIDDLE_PANE_CONTRACT_CLASSES);
+      expect($('#right-pane').attr('class')).toEqual(this.component.attr.RIGHT_PANE_EXPAND_CLASSES);
+    });
+
+    it('expands middle pane and contracts right pane on event on open no message selected pane', function () {
+      $(document).trigger(Smail.events.dispatchers.rightPane.openNoMessageSelected);
+
+      expect($('#middle-pane-container').attr('class')).toEqual(this.component.attr.MIDDLE_PANE_EXPAND_CLASSES);
+      expect($('#right-pane').attr('class')).toEqual(this.component.attr.RIGHT_PANE_CONTRACT_CLASSES);
+    });
+  });
+
+  describe('on initialization', function () {
+    it('expands middle pane and contracts right pane', function () {
+      setupComponent(document);
+
+      expect($('#middle-pane-container').attr('class')).toEqual(this.component.attr.MIDDLE_PANE_EXPAND_CLASSES);
+      expect($('#right-pane').attr('class')).toEqual(this.component.attr.RIGHT_PANE_CONTRACT_CLASSES);
+    });
+  });
+
+});
diff --git a/web-ui/test/spec/page/router.spec.js b/web-ui/test/spec/page/router.spec.js
new file mode 100644
index 00000000..0b5b6b32
--- /dev/null
+++ b/web-ui/test/spec/page/router.spec.js
@@ -0,0 +1,70 @@
+/*global Smail */
+/*global jasmine */
+describeComponent('page/router', function () {
+  'use strict';
+
+  var fakeHistory;
+
+  describe('on router:pushState coming from a tag selection', function () {
+    beforeEach(function () {
+      fakeHistory = jasmine.createSpyObj('history', ['pushState']);
+      setupComponent({history: fakeHistory});
+    });
+
+    it('pushes the state with the tag and the url', function () {
+      $(document).trigger(Smail.events.router.pushState, { tag: 'inbox'});
+
+      expect(fakeHistory.pushState).toHaveBeenCalledWith(jasmine.objectContaining({ tag: 'inbox' }), '', '/#/inbox');
+    });
+
+    it('pushes the state with mailIdent', function () {
+      $(document).trigger(Smail.events.router.pushState, { tag: 'inbox', mailIdent: 1});
+
+      expect(fakeHistory.pushState).toHaveBeenCalledWith(jasmine.objectContaining({ tag: 'inbox', mailIdent: 1 }), '', '/#/inbox/mail/1');
+    });
+
+    it('pushes the state with mailIdent even if mail ident is 0 (that happens for drafts)', function () {
+      $(document).trigger(Smail.events.router.pushState, { tag: 'inbox', mailIdent: 0});
+
+      expect(fakeHistory.pushState).toHaveBeenCalledWith(jasmine.objectContaining({ tag: 'inbox', mailIdent: 0 }), '', '/#/inbox/mail/0');
+    });
+
+    it('pushes the state with the displayNoMessage boolean forwarded from the event', function () {
+      $(document).trigger(Smail.events.router.pushState, { tag: 'inbox', mailIdent: 0});
+
+      expect(fakeHistory.pushState).toHaveBeenCalledWith(jasmine.objectContaining({ isDisplayNoMessageSelected: false}), '', '/#/inbox/mail/0');
+
+      $(document).trigger(Smail.events.router.pushState, { tag: 'inbox', mailIdent: 0, isDisplayNoMessageSelected: true});
+
+      expect(fakeHistory.pushState).toHaveBeenCalledWith(jasmine.objectContaining({ isDisplayNoMessageSelected: true}), '', '/#/inbox/mail/0');
+    });
+
+    it('when popping a state with no tag should select tag from url', function () {
+      var urlParams = require("page/router/url_params");
+      spyOn(urlParams, 'getTag').andReturn('tag');
+
+      var selectTagEvent = spyOnEvent(document, Smail.events.ui.tag.select);
+
+      this.component.smailPopState({ state: {tag: undefined} });
+
+      expect(selectTagEvent).toHaveBeenTriggeredOnAndWith(document, jasmine.objectContaining({ tag: "tag"}))
+    });
+
+    it('when popping a state triggers the displayNoMessage pane if required', function () {
+      var urlParams = require("page/router/url_params");
+      spyOn(urlParams, 'getTag').andReturn('tag');
+
+      var displayNoMessageEvent = spyOnEvent(document, Smail.events.dispatchers.rightPane.openNoMessageSelectedWithoutPushState);
+
+      this.component.smailPopState({ state: {tag: undefined, isDisplayNoMessageSelected: false} });
+
+      expect(displayNoMessageEvent).not.toHaveBeenTriggeredOn(document)
+
+      this.component.smailPopState({ state: {tag: undefined, isDisplayNoMessageSelected: true} });
+
+      expect(displayNoMessageEvent).toHaveBeenTriggeredOn(document)
+    });
+
+  });
+
+});
diff --git a/web-ui/test/spec/page/router/url_params.spec.js b/web-ui/test/spec/page/router/url_params.spec.js
new file mode 100644
index 00000000..a14ba1ba
--- /dev/null
+++ b/web-ui/test/spec/page/router/url_params.spec.js
@@ -0,0 +1,68 @@
+require(['page/router/url_params'], function (urlParams) {
+
+  describe('urlParams', function () {
+
+    beforeEach(function () {
+      //preventing the hash change to fire the onpopstate event in other components
+      //in this case in the router component
+      window.onpopstate = function () {};
+    });
+
+    afterEach(function () {
+      document.location.hash = '';
+    });
+
+    describe('getTag', function () {
+      it('returns inbox if there is no tag in the url hash', function () {
+        expect(urlParams.getTag()).toEqual('inbox');
+      });
+
+      it('returns the tag in the hash if there is one', function () {
+        document.location.hash = '/Drafts';
+
+        expect(urlParams.getTag()).toEqual('Drafts');
+      });
+
+      it('returns tag with slash', function () {
+        document.location.hash = '/Events/2011';
+
+        expect(urlParams.getTag()).toEqual('Events/2011');
+      });
+
+      it('returns tag even if there is an mail ident', function () {
+        document.location.hash = '/Events/2011/mail/1';
+
+        expect(urlParams.getTag()).toEqual('Events/2011');
+      });
+
+      it('returns the tag even if there is a trailing slash', function () {
+        document.location.hash = '/Events/';
+
+        expect(urlParams.getTag()).toEqual('Events');
+      });
+    });
+
+    describe('hasMailIdent', function () {
+      it('is true if hash has mailIdent', function () {
+        document.location.hash = '/inbox/mail/1';
+
+        expect(urlParams.hasMailIdent()).toBeTruthy();
+      });
+
+      it('is false if hash has no mail ident', function () {
+        document.location.hash = '/Drafts';
+
+        expect(urlParams.hasMailIdent()).toBeFalsy();
+      });
+    });
+
+    describe('getMailIdent', function () {
+      it('returns the mail ident that is in the hash', function () {
+        document.location.hash = '/inbox/mail/123';
+
+        expect(urlParams.getMailIdent()).toEqual('123');
+      });
+    });
+  });
+
+});