VulpesOS/gaia/apps/communications/contacts/test/unit/navigation_test.js

'use strict';
/* global MockContactsIndexHtml */
/* global navigationStack */

require('/shared/js/lazy_loader.js');
requireApp('communications/contacts/test/unit/mock_contacts_index.html.js');
requireApp('communications/contacts/js/navigation.js');

suite('contacts/navigation', function() {

  var navigation, viewContactList, viewContactForm, viewSettings,
    viewContactDetails, viewScreenshot, viewSelectTag, viewSearch,
    callbackCounter, callback, homeCallback, animationEndEvent,
    navigationAssert, initialStateAssert, currentViewAssert;


  suiteSetup(function() {
    document.body.innerHTML = MockContactsIndexHtml;
    navigation = new navigationStack('view-contacts-list');
    viewContactList = document.getElementById('view-contacts-list');
    viewContactForm = document.getElementById('view-contact-form');
    viewSettings = document.getElementById('view-settings');
    viewContactDetails = document.getElementById('view-contact-details');
    viewScreenshot = document.getElementById('view-screenshot');
    viewSelectTag = document.getElementById('view-select-tag');
    viewSearch = document.getElementById('search-view');
    animationEndEvent = new CustomEvent('animationend');
    navigationAssert = function(view, transition, direction, viewType,
      result, test) {
      var navigationClass =
        navigation.transitions[transition][direction][viewType];
      if (navigationClass) {
        assert.equal(view.classList.contains(
          navigationClass), result, test + ' wut ' + navigationClass + ' ' +
          view.id);
      }
    };
    initialStateAssert = function(current, next, transition) {
      navigationAssert(current, transition, 'forwards', 'next',
        false, 'current view forwards classes once animation ends');

      navigationAssert(current, transition, 'backwards', 'current',
        false, 'current view backwards classes once animation ends');

      navigationAssert(next, transition, 'forwards', 'current',
        false, 'next view forwards classes once animation ends');

      navigationAssert(next, transition, 'backwards', 'next',
        false, 'next view backwards classes once animation ends');
    };
    currentViewAssert = function(previous, current) {
      var currentViews = document.querySelectorAll('.view.current');
      assert.equal(currentViews.length, 1, 'more than one |current| view');
      assert.equal(current, currentViews[0], 'expected ' + current.id +
        ' to be |current| view, but ' + currentViews[0].id + ' is instead.');
    };
    callback = function(done, current, next, transition, realNext) {
      initialStateAssert(current, next, transition);
      currentViewAssert(current, realNext || next);
      if (done) {
        done();
      }
    };
    callbackCounter = 0;
    homeCallback = function(done) {
      callbackCounter++;
      switch (callbackCounter) {
        case 1:
          // First back callback execution.
          initialStateAssert(viewSelectTag, viewContactForm, 'right-left');
          viewContactForm.dispatchEvent(animationEndEvent);
          viewContactDetails.dispatchEvent(animationEndEvent);
          break;
        case 2:
          // Second back callback execution.
          initialStateAssert(viewContactForm, viewContactDetails, 'popup');
          viewContactDetails.dispatchEvent(animationEndEvent);
          viewContactList.dispatchEvent(animationEndEvent);
          break;
        case 3:
          // Third back callback execution.
          initialStateAssert(viewContactDetails, viewContactList, 'go-deeper');
          currentViewAssert(viewContactDetails, viewContactList);
          callbackCounter = 0;
          done();
          break;
        }
      };
  });

  test('no forwards animation', function(done) {
    var transition = 'none';
    navigation.go('search-view', transition,
      callback.bind(null, done, viewContactList, viewSearch, transition));
    assert.isTrue(viewSearch.style.zIndex > viewContactList.style.zIndex);
  });

  test('no backwards animation', function(done) {
    var transition = 'none';
    navigation.go('search-view', transition,
      function () {
        callback(function () {}, viewContactList, viewSearch, transition);
        navigation.back(callback.bind(null, done, viewSearch,
          viewContactList, transition));
      });
  });

  test('right-left forwards animation', function(done) {
    var transition = 'right-left';
    navigation.go('view-select-tag', transition,
      callback.bind(null, done, viewContactList, viewSelectTag, transition));
    viewContactList.dispatchEvent(animationEndEvent);
    viewSelectTag.dispatchEvent(animationEndEvent);
  });

  test('right-left backwards animation', function(done) {
    var transition = 'right-left';
    navigation.go('view-select-tag', transition,
      function () {
        callback(function () {}, viewContactList, viewSelectTag, transition);
        navigation.back(callback.bind(null, done, viewSelectTag,
          viewContactList, transition));

        navigationAssert(viewSelectTag, transition, 'backwards', 'current',
          true, 'current view backwards classes');

        navigationAssert(viewContactList, transition, 'backwards', 'next',
          true, 'next view backwards classes');

        viewSelectTag.dispatchEvent(animationEndEvent);
        viewContactList.dispatchEvent(animationEndEvent);

      });

    viewContactList.dispatchEvent(animationEndEvent);
    viewSelectTag.dispatchEvent(animationEndEvent);
  });

  test('popup forwards animation', function(done) {
    var transition = 'popup';
    navigation.go('view-contact-form', transition,
      callback.bind(null, done, viewContactList, viewContactForm, transition));

    navigationAssert(viewContactList, transition, 'forwards', 'current',
      true, 'current view forwards classes');

    navigationAssert(viewContactForm, transition, 'forwards', 'next',
      true, 'next view forwards classes');

    viewContactList.dispatchEvent(animationEndEvent);
    viewContactForm.dispatchEvent(animationEndEvent);
  });

  test('popup backwards animation', function(done) {
    var transition = 'popup';
    navigation.go('view-contact-form', transition,
      function () {
        callback(function () {}, viewContactList, viewContactForm, transition);
        navigation.back(callback.bind(null, done, viewContactForm,
          viewContactList, transition));

        navigationAssert(viewContactForm, transition, 'backwards', 'current',
          true, 'current view backwards classes');

        navigationAssert(viewContactList, transition, 'backwards', 'next',
          true, 'next view backwards classes');

        viewContactForm.dispatchEvent(animationEndEvent);
        viewContactList.dispatchEvent(animationEndEvent);
      });

    viewContactList.dispatchEvent(animationEndEvent);
    viewContactForm.dispatchEvent(animationEndEvent);
  });

  test('go-deeper forwards animation', function(done) {
    var transition = 'go-deeper';
    navigation.go('view-contact-details', transition,
      callback.bind(null, done, viewScreenshot, viewContactDetails,
        transition));

    navigationAssert(viewScreenshot, transition, 'forwards', 'current',
      true, 'current view forwards classes');

    navigationAssert(viewContactDetails, transition, 'forwards', 'next',
      true, 'next view forwards classes');

    viewScreenshot.dispatchEvent(animationEndEvent);
    viewContactDetails.dispatchEvent(animationEndEvent);
  });

  test('go-deeper backwards animation', function(done) {
    var transition = 'go-deeper';
    navigation.go('view-contact-details', transition,
      function () {
        callback(function () {}, viewContactList, viewContactDetails,
          transition);
        navigation.back(callback.bind(null, done, viewContactDetails,
          viewScreenshot, transition, viewContactList));
        navigationAssert(viewContactDetails, transition, 'backwards', 'current',
          true, 'current view backwards classes');

        navigationAssert(viewScreenshot, transition, 'backwards', 'next',
          true, 'next view backwards classes');

        viewContactDetails.dispatchEvent(animationEndEvent);
        viewScreenshot.dispatchEvent(animationEndEvent);
      });

    viewContactList.dispatchEvent(animationEndEvent);
    viewContactDetails.dispatchEvent(animationEndEvent);
  });

  test('go-deeper-search forwards animation', function(done) {
    var transition = 'go-deeper-search';
    navigation.go('view-contact-details', transition,
      callback.bind(null, done, viewScreenshot, viewContactDetails,
        transition));

    navigationAssert(viewScreenshot, transition, 'forwards', 'current',
      true, 'current view forwards classes');

    navigationAssert(viewContactDetails, transition, 'forwards', 'next',
      true, 'next view forwards classes');

    viewScreenshot.dispatchEvent(animationEndEvent);
    viewContactDetails.dispatchEvent(animationEndEvent);
  });

  test('go-deeper-search backwards animation', function(done) {
    var transition = 'go-deeper-search';
    navigation.go('view-contact-details', transition,
      function () {
        callback(function () {}, viewScreenshot, viewContactDetails,
          transition);
        navigation.back(callback.bind(null, done, viewContactDetails,
          viewScreenshot, transition, viewContactList));

        navigationAssert(viewContactDetails, transition, 'backwards', 'current',
          true, 'current view backwards classes');

        navigationAssert(viewScreenshot, transition, 'backwards', 'next',
          true, 'next view backwards classes');

        viewContactDetails.dispatchEvent(animationEndEvent);
        viewScreenshot.dispatchEvent(animationEndEvent);
      });

    viewContactList.dispatchEvent(animationEndEvent);
    viewContactDetails.dispatchEvent(animationEndEvent);
  });

  test('undoing animations with home', function(done) {
    navigation.go('view-contact-details', 'go-deeper',
      function() {
        callback(null, viewContactList, viewContactDetails, 'go-deeper');
        navigation.go('view-contact-form', 'popup',
          function() {
            callback(null, viewContactDetails, viewContactForm, 'popup');
            navigation.go('view-select-tag', 'right-left',
              function() {
                callback(null, viewContactForm, viewSelectTag, 'right-left');
                assert.equal(navigation.stack.length, 4, 'initial stack');
                navigation.home(homeCallback.bind(null, done));
                viewSelectTag.dispatchEvent(animationEndEvent);
                viewContactForm.dispatchEvent(animationEndEvent);
              });
            viewContactForm.dispatchEvent(animationEndEvent);
            viewSelectTag.dispatchEvent(animationEndEvent);
          });
        viewContactDetails.dispatchEvent(animationEndEvent);
        viewContactForm.dispatchEvent(animationEndEvent);
      });
    viewContactList.dispatchEvent(animationEndEvent);
    viewContactDetails.dispatchEvent(animationEndEvent);
  });

  test('should send hide-navbar to dialer when entering view-contact-form',
  function() {
    var postMessageSpy = this.sinon.spy(window.parent, 'postMessage');
    navigation.go('view-contact-form', 'go-deeper');
    assert.isTrue(postMessageSpy.withArgs({type: 'hide-navbar'}).calledOnce);
  });

  test('should send show-navbar to dialer when leaving view-contact-form',
  function() {
    navigation.go('view-contact-form', 'go-deeper');
    var postMessageSpy = this.sinon.spy(window.parent, 'postMessage');
    navigation.back();
    assert.isTrue(postMessageSpy.withArgs({type: 'show-navbar'}).calledOnce);
  });
});