add animation tests, fix disabled hover style

e2e/features/animation/animation-test.js

@@ -1,56 +1,70 @@
 const reuseables = require('../../reuseables/skip-tour.js');
-const localSelectors = require('../../reuseables/selectors.js');
 const localQueryStrings = require('../../reuseables/querystrings.js');
+const {
+  dragger,
+  animationWidget,
+  animationButton,
+  playButton,
+  animateYearUp,
+  animateYearDown,
+  yearStartInput,
+  monthStartInput,
+  dayStartInput,
+  hourStartInput,
+  minuteStartInput,
+  yearEndInput,
+  monthEndInput,
+  dayEndInput,
+  hourEndInput,
+  minuteEndInput,
+  animationIntervalSelector,
+  animationFrameSlider,
+} = require('../../reuseables/selectors.js');
 
 const TIME_LIMIT = 10000;
 module.exports = {
   '@tags': ['localStorageDisabled'],
-  beforeEach(client) {
-    reuseables.loadAndSkipTour(client, TIME_LIMIT);
+  beforeEach(c) {
+    reuseables.loadAndSkipTour(c, TIME_LIMIT);
   },
-  /**
-   * Clicking the animation widget button
-   * Opens the widget
-   */
-  'Toggling Animation Mode': (client) => {
-    client.waitForElementVisible(localSelectors.dragger, TIME_LIMIT, (el) => {
-      client.expect.element(localSelectors.animationWidget).to.not.be.present;
-      client.useCss().click(localSelectors.animationButton);
-      client.waitForElementVisible(localSelectors.animationWidget, TIME_LIMIT);
+
+  'Clicking the animation widget button opens the widget': (c) => {
+    c.waitForElementVisible(dragger, TIME_LIMIT, (el) => {
+      c.expect.element(animationWidget).to.not.be.present;
+      c.useCss().click(animationButton);
+      c.waitForElementVisible(animationWidget, TIME_LIMIT);
     });
   },
-  'Opening custom interval widget': (client) => {
-    client.url(client.globals.url + localQueryStrings.activeAnimationWidget);
-    client.waitForElementVisible(
-      localSelectors.animationButton,
+
+  'Opening custom interval widget': (c) => {
+    c.url(c.globals.url + localQueryStrings.activeAnimationWidget);
+    c.waitForElementVisible(
+      animationButton,
       TIME_LIMIT,
       (el) => {
-        client
+        c
           .useCss()
           .moveToElement('.wv-animation-widget-header #timeline-interval-btn-container #current-interval', 1, 1)
           .waitForElementVisible('.wv-animation-widget-header .timeline-interval .interval-years', 2000)
           .click('.wv-animation-widget-header .timeline-interval #interval-custom-static');
-        client.pause(1000);
-        client.useCss().assert.elementPresent('#wv-animation-widget .custom-interval-widget');
-        client.useCss().assert.containsText('.wv-animation-widget-header #current-interval', '1 DAY');
-        client.useCss().assert.containsText('#timeline #current-interval', '1 DAY');
+        c.pause(1000);
+        c.useCss().assert.elementPresent('#wv-animation-widget .custom-interval-widget');
+        c.useCss().assert.containsText('.wv-animation-widget-header #current-interval', '1 DAY');
+        c.useCss().assert.containsText('#timeline #current-interval', '1 DAY');
       },
     );
   },
-  /**
-   * Moving the range selector updates the selected range
-   * in the animation widget date selector
-   */
-  'Changing date range of animation': (client) => {
-    client.url(client.globals.url + localQueryStrings.activeAnimationWidget);
+
+  'Changing date range of animation via timeline dragger': (c) => {
+    c.url(c.globals.url + localQueryStrings.activeAnimationWidget);
     // Test Permalink opens widget
-    client.waitForElementVisible(
+    c.waitForElementVisible(
       '#day-animation-widget-start',
       TIME_LIMIT,
       (el) => {
-        client.getValue('#day-animation-widget-start', (result) => {
+        c.getValue('#day-animation-widget-start', (result) => {
           const startDay = result.value;
-          client
+          c
             .useCss()
             .moveToElement(
               '#wv-timeline-range-selector > g:nth-child(2) > rect',
@@ -61,41 +75,77 @@ module.exports = {
             .moveToElement('.timeline-dragger', 0, 0)
             .mouseButtonUp(0)
             .pause(2000);
-          client.getValue('#day-animation-widget-start', (result) => {
+          c.getValue('#day-animation-widget-start', (result) => {
             const newDay = result.value;
-            client.assert.notEqual(startDay, newDay);
+            c.assert.notEqual(startDay, newDay);
           });
         });
       },
     );
   },
 
-  /**
-   * Changing animation time interval
-   */
-  'Changing animation time interval': (client) => {
+  'Changing animation time interval': (c) => {
     // Can't use moveToElement twice with same elements
     // because of selenium catching.
     // Loading a different Url fixed the problem
     // https://github.com/SeleniumHQ/selenium/issues/4724#issuecomment-330862710
-    reuseables.loadAndSkipTour(client, TIME_LIMIT);
-    client.useCss().click(localSelectors.animationButton);
-    client.waitForElementVisible(
-      localSelectors.animationButton,
+    reuseables.loadAndSkipTour(c, TIME_LIMIT);
+    c.useCss().click(animationButton);
+    c.waitForElementVisible(
+      animationButton,
       TIME_LIMIT,
       (el) => {
-        client
+        c
           .useCss()
           .moveToElement('.wv-animation-widget-header #timeline-interval-btn-container #current-interval', 1, 1)
           .waitForElementVisible('.wv-animation-widget-header .timeline-interval .interval-years', 2000)
           .click('.wv-animation-widget-header #timeline-interval #interval-years');
-        client.pause(1000);
-        client.useCss().assert.containsText('.wv-animation-widget-header #current-interval', '1 YEAR');
-        client.useCss().assert.containsText('#timeline #current-interval', '1 YEAR');
+        c.pause(1000);
+        c.useCss().assert.containsText('.wv-animation-widget-header #current-interval', '1 YEAR');
+        c.useCss().assert.containsText('#timeline #current-interval', '1 YEAR');
       },
     );
   },
-  after(client) {
-    client.end();
+
+  'Disable when playing': (c) => {
+    c.url(c.globals.url + localQueryStrings.animationGeostationary);
+    c.waitForElementVisible(animationButton, TIME_LIMIT);
+    c.click(playButton);
+    c.pause(1000);
+    c.assert.attributeEquals(yearStartInput, 'disabled', 'true');
+    c.assert.attributeEquals(yearEndInput, 'disabled', 'true');
+    c.assert.attributeEquals(monthStartInput, 'disabled', 'true');
+    c.assert.attributeEquals(monthEndInput, 'disabled', 'true');
+    c.assert.attributeEquals(dayStartInput, 'disabled', 'true');
+    c.assert.attributeEquals(dayEndInput, 'disabled', 'true');
+    c.assert.attributeEquals(hourStartInput, 'disabled', 'true');
+    c.assert.attributeEquals(hourEndInput, 'disabled', 'true');
+    c.assert.attributeEquals(minuteStartInput, 'disabled', 'true');
+    c.assert.attributeEquals(minuteEndInput, 'disabled', 'true');
+    c.assert.cssClassPresent(animationFrameSlider, 'rc-slider-disabled');
+    c.assert.cssClassPresent(animationIntervalSelector, 'disabled');
+    c.click(playButton);
+  },
+
+  'Disable playback when max frames exceeded': (c) => {
+    c.url(c.globals.url + localQueryStrings.animationGeostationary);
+    c.click(animateYearDown);
+    c.pause(500);
+    c.assert.cssClassPresent(playButton, 'disabled');
+
+    // Playback re-enabled when frames within the max
+    c.click(animateYearUp);
+    c.pause(500);
+    c.assert.not.cssClassPresent(playButton, 'disabled');
+
+    // App should not freeze when dates roll over
+    c.click(animateYearUp);
+    c.pause(500);
+    c.assert.value(yearStartInput, '1948');
+    c.assert.cssClassPresent(playButton, 'disabled');
+  },
+
+  after(c) {
+    c.end();
   },
 };

e2e/features/animation/gif-test.js

@@ -112,7 +112,7 @@ module.exports = {
   'GIF download is disabled when too many frames would be requested with standard interval': function(
     client,
   ) {
-    client.url(client.globals.url + localQueryStrings.animationTooManyFrames);
+    client.url(client.globals.url + localQueryStrings.animationTooManyFramesGif);
     client.waitForElementVisible(
       localSelectors.animationWidget,
       TIME_LIMIT,
@@ -124,7 +124,7 @@ module.exports = {
   'GIF download is disabled when too many frames would be requested with custom interval': function(
     client,
   ) {
-    client.url(client.globals.url + localQueryStrings.animationTooManyFramesCustomInterval);
+    client.url(client.globals.url + localQueryStrings.animationTooManyFramesGifCustomInterval);
     client.waitForElementVisible(
       localSelectors.animationWidget,
       TIME_LIMIT,

e2e/features/compare/compare-mobile-test.js

@@ -34,7 +34,7 @@ module.exports = {
   'Mobile comparison A|B toggle buttons are visible and only A is selected by default': (c) => {
     c.waitForElementVisible(compareMobileSelectToggle, TIME_LIMIT);
     c.assert.cssClassPresent(aMobileCompareButton, 'compare-btn-selected');
-    c.assert.cssClassNotPresent(bMobileCompareButton, 'compare-btn-selected');
+    c.assert.not.cssClassPresent(bMobileCompareButton, 'compare-btn-selected');
   },
 
   // toggle select B change compare mode date to B
@@ -72,7 +72,7 @@ module.exports = {
   'B compare button toggle is only selected on B permalink load': (c) => {
     c.url(c.globals.url + localQueryStrings.spyAndBIsActive);
     c.waitForElementVisible(swipeDragger, TIME_LIMIT);
-    c.assert.cssClassNotPresent(aMobileCompareButton, 'compare-btn-selected');
+    c.assert.not.cssClassPresent(aMobileCompareButton, 'compare-btn-selected');
     c.assert.cssClassPresent(bMobileCompareButton, 'compare-btn-selected');
   },
 

e2e/reuseables/selectors.js

@@ -14,6 +14,21 @@ module.exports = {
   animationWidget: '#wv-animation-widget',
   animationButtonCase: '#timeline-header .animate-button',
   animationButton: '.animate-button',
+  playButton: '#play-button',
+  animateYearUp: '#wv-animation-widget .input-wrapper-year .date-arrow-up',
+  animateYearDown: '#wv-animation-widget .input-wrapper-year .date-arrow-down',
+  yearStartInput: '#year-animation-widget-start',
+  monthStartInput: '#month-animation-widget-start',
+  dayStartInput: '#day-animation-widget-start',
+  hourStartInput: '#hour-animation-widget-start',
+  minuteStartInput: '#minute-animation-widget-start',
+  yearEndInput: '#year-animation-widget-end',
+  monthEndInput: '#month-animation-widget-end',
+  dayEndInput: '#day-animation-widget-end',
+  hourEndInput: '#hour-animation-widget-end',
+  minuteEndInput: '#minute-animation-widget-end',
+  animationIntervalSelector: '#wv-animation-widget #current-interval',
+  animationFrameSlider: '#wv-animation-widget .rc-slider',
 
   // sidebar, layers
   sidebarContainer: '#productsHolder',

web/css/dateselector.css

@@ -26,7 +26,7 @@
   }
 }
 .disabled .wv-date-selector-widget {
-  .date-arrows &:hover {
+  .date-arrows:hover {
     background-color: transparent;
     cursor: default;
   }