Merge pull request #13675 from KevinGrandon/bug_935307_contacts_testing

 Bug 935307 - Tailor contact tests for animations r=gtorodelvalle

apps/communications/contacts/js/navigation.js

@@ -100,20 +100,27 @@ function navigationStack(currentView) {
       currentClassList.remove('hide');
     } else {
       current = document.getElementById(_currentView);
+      currentClassList = current.classList;
     }
 
     var forwardsClasses = this.transitions[transition].forwards;
     var backwardsClasses = this.transitions[transition].backwards;
 
     // Add forwards class to current view.
+    currentClassList.add('block-item');
     if (forwardsClasses.current) {
       currentClassList.add(forwardsClasses.current);
     }
 
     var next = document.getElementById(nextView);
     // Add forwards class to next view.
     if (forwardsClasses.next) {
+      next.classList.add('block-item');
       next.classList.add(forwardsClasses.next);
+      next.addEventListener('animationend', function ng_onNextBackwards(ev) {
+        next.removeEventListener('animationend', ng_onNextBackwards);
+        next.classList.remove('block-item');
+      });
     }
 
     var zIndex = this.stack[this.stack.length - 1].zIndex + 1;
@@ -140,6 +147,17 @@ function navigationStack(currentView) {
     var nextView = this.stack[this.stack.length - 1];
     var transition = currentView.transition;
 
+    var next = document.getElementById(nextView.view);
+    var nextClassList;
+    // Performance is very bad when there are too many contacts so we use
+    // -moz-element and animate this 'screenshot" element.
+    if (transition.indexOf('go-deeper') === 0) {
+      next = document.getElementById(screenshotViewId);
+    } else {
+      next = document.getElementById(nextView.view);
+    }
+    nextClassList = next.classList;
+
     var forwardsClasses = this.transitions[transition].forwards;
     var backwardsClasses = this.transitions[transition].backwards;
 
@@ -149,6 +167,7 @@ function navigationStack(currentView) {
 
     // Add backwards class to current view.
     if (backwardsClasses.current) {
+      currentClassList.add('block-item');
       currentClassList.add(backwardsClasses.current);
       current.addEventListener('animationend',
         function ng_onCurrentBackwards() {
@@ -158,23 +177,21 @@ function navigationStack(currentView) {
           currentClassList.remove(forwardsClasses.next);
           currentClassList.remove(backwardsClasses.current);
           current.style.zIndex = null;
+          currentClassList.remove('block-item');
+          if (!backwardsClasses.next) {
+            nextClassList.remove('block-item');
+          }
         }
       );
     } else {
       current.style.zIndex = null;
+      currentClassList.remove('block-item');
+      if (!backwardsClasses.next) {
+        nextClassList.remove('block-item');
+      }
     }
-    var next = document.getElementById(nextView.view);
-    var nextClassList;
 
     next.style.zIndex = nextView.zIndex;
-    // Performance is very bad when there are too many contacts so we use
-    // -moz-element and animate this 'screenshot" element.
-    if (transition.indexOf('go-deeper') === 0) {
-      next = document.getElementById(screenshotViewId);
-    } else {
-      next = document.getElementById(nextView.view);
-    }
-    nextClassList = next.classList;
 
     // Add backwards class to next view.
     if (backwardsClasses.next) {
@@ -191,6 +208,7 @@ function navigationStack(currentView) {
           nextClassList.remove('search');
           nextClassList.remove('contact-list');
         }
+        nextClassList.remove('block-item');
       });
     }
 

apps/communications/contacts/test/marionette/details_test.js

@@ -25,7 +25,7 @@ marionette('Contacts > Details', function() {
       client.helper.waitForElement(selectors.listContactFirstText)
         .click();
 
-      client.helper.waitForElement(selectors.details);
+      subject.waitSlideLeft('details');
 
       client.helper.waitForElement(selectors.detailsTelButtonFirst)
         .click();

apps/communications/contacts/test/marionette/form_test.js

@@ -44,7 +44,8 @@ marionette('Contacts > Form', function() {
       client.helper.waitForElement(selectors.listContactFirstText)
         .click();
 
-      client.helper.waitForElement(selectors.details);
+      subject.waitSlideLeft('details');
+
       client.helper.waitForElement(selectors.detailsEditContact)
         .click();
 
@@ -53,22 +54,26 @@ marionette('Contacts > Form', function() {
       client.helper.waitForElement(selectors.formTelLabelFirst)
         .click();
 
+      subject.waitSlideLeft('formCustomTagPage');
+
       client.helper.waitForElement(selectors.formCustomTag)
         .sendKeys('BFF');
 
       client.helper.waitForElement(selectors.formCustomTagDone)
         .click();
 
       // Wait for the custom tag page to disappear
+      var bodyWidth = client.findElement(selectors.body).size().width;
       client.waitFor(function waiting() {
         var tagPage = client.findElement(selectors.formCustomTagPage);
-        var className = tagPage.getAttribute('className');
-        return className.indexOf('app-go-left-in') === -1;
+        var location = tagPage.location();
+        return location.x >= bodyWidth;
       });
 
       client.findElement(selectors.formSave)
         .click();
 
+      subject.waitForFormTransition();
       client.helper.waitForElement(selectors.detailsTelLabelFirst);
       client.waitFor(function waiting() {
         var label = client.findElement(selectors.detailsTelLabelFirst).text();

apps/communications/contacts/test/marionette/lib/contacts.js

@@ -23,6 +23,7 @@ Contacts.config = {
 };
 
 Contacts.Selectors = {
+  body: 'body',
   bodyReady: 'body .view-body',
 
   confirmHeader: '#confirmation-message h1',
@@ -103,6 +104,14 @@ Contacts.prototype = {
     return result;
   },
 
+  waitSlideLeft: function(elementKey) {
+    this.client.waitFor(function() {
+      var location = this.client.findElement(Contacts.Selectors[elementKey])
+        .location();
+      return location.x === 0;
+    });
+  },
+
   waitForFormShown: function() {
     this.client.waitFor(function() {
       var location = this.client.findElement(Contacts.Selectors.form)
@@ -111,6 +120,15 @@ Contacts.prototype = {
     });
   },
 
+  waitForFormTransition: function() {
+    var selectors = Contacts.Selectors;
+    var bodyHeight = client.findElement(selectors.body).size().height;
+    this.client.waitFor(function() {
+      var location = client.findElement(selectors.form).location();
+      return location.y >= bodyHeight;
+    });
+  },
+
   enterContactDetails: function(details) {
 
     var selectors = Contacts.Selectors;
@@ -132,10 +150,7 @@ Contacts.prototype = {
 
     this.client.helper.waitForElement(selectors.formSave).click();
 
-    this.client.waitFor(function() {
-      var location = client.findElement(selectors.form).location();
-      return location.y >= 460;
-    });
+    this.waitForFormTransition();
   },
 
   addContact: function(details) {