Bug 1416104 - Part 10: Add tests. r=gl

MozReview-Commit-ID: cqjceHqcYt

--HG--
extra : rebase_source : 3aa393d60bbd9c3b83709efd30922aa54ce04e9a

devtools/client/inspector/animation/components/AnimatedPropertyList.js

@@ -14,6 +14,7 @@ class AnimatedPropertyList extends PureComponent {
   static get propTypes() {
     return {
       animation: PropTypes.object.isRequired,
+      emitEventForTest: PropTypes.func.isRequired,
       getAnimatedPropertyMap: PropTypes.func.isRequired,
     };
   }
@@ -35,10 +36,15 @@ class AnimatedPropertyList extends PureComponent {
   }
 
   async updateKeyframesList(animation) {
-    const { getAnimatedPropertyMap } = this.props;
+    const {
+      getAnimatedPropertyMap,
+      emitEventForTest,
+    } = this.props;
     const animatedPropertyMap = await getAnimatedPropertyMap(animation);
 
     this.setState({ animatedPropertyMap });
+
+    emitEventForTest("animation-keyframes-rendered");
   }
 
   render() {

devtools/client/inspector/animation/components/AnimatedPropertyListContainer.js

@@ -15,6 +15,7 @@ class AnimatedPropertyListContainer extends PureComponent {
   static get propTypes() {
     return {
       animation: PropTypes.object.isRequired,
+      emitEventForTest: PropTypes.func.isRequired,
       getAnimatedPropertyMap: PropTypes.func.isRequired,
     };
   }
@@ -22,6 +23,7 @@ class AnimatedPropertyListContainer extends PureComponent {
   render() {
     const {
       animation,
+      emitEventForTest,
       getAnimatedPropertyMap,
     } = this.props;
 
@@ -33,6 +35,7 @@ class AnimatedPropertyListContainer extends PureComponent {
       AnimatedPropertyList(
         {
           animation,
+          emitEventForTest,
           getAnimatedPropertyMap,
         }
       )

devtools/client/inspector/animation/components/AnimationDetailContainer.js

@@ -17,6 +17,7 @@ class AnimationDetailContainer extends PureComponent {
   static get propTypes() {
     return {
       animation: PropTypes.object.isRequired,
+      emitEventForTest: PropTypes.func.isRequired,
       getAnimatedPropertyMap: PropTypes.func.isRequired,
       setDetailVisibility: PropTypes.func.isRequired,
     };
@@ -25,6 +26,7 @@ class AnimationDetailContainer extends PureComponent {
   render() {
     const {
       animation,
+      emitEventForTest,
       getAnimatedPropertyMap,
       setDetailVisibility,
     } = this.props;
@@ -46,6 +48,7 @@ class AnimationDetailContainer extends PureComponent {
         AnimatedPropertyListContainer(
           {
             animation,
+            emitEventForTest,
             getAnimatedPropertyMap,
           }
         )

devtools/client/inspector/animation/components/App.js

@@ -62,6 +62,7 @@ class App extends PureComponent {
         className: "animation-container-splitter",
         endPanel: AnimationDetailContainer(
           {
+            emitEventForTest,
             getAnimatedPropertyMap,
             setDetailVisibility,
           }

devtools/client/inspector/animation/test/browser.ini

@@ -11,6 +11,10 @@ support-files =
   !/devtools/client/shared/test/test-actor-registry.js
   !/devtools/client/shared/test/test-actor.js
 
+[browser_animation_animated-property-list.js]
+[browser_animation_animation-detail_close-button.js]
+[browser_animation_animation-detail_title.js]
+[browser_animation_animation-detail_visibility.js]
 [browser_animation_animation-list.js]
 [browser_animation_animation-target.js]
 [browser_animation_animation-timeline-tick.js]

devtools/client/inspector/animation/test/browser_animation_animated-property-list.js

@@ -0,0 +1,53 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test following animated property list test.
+// 1. Existence for animated property list.
+// 2. Number of animated property item.
+
+const TEST_CASES = [
+  {
+    target: ".animated",
+    expectedNumber: 1,
+  },
+  {
+    target: ".compositor-notall",
+    expectedNumber: 3,
+  },
+];
+
+add_task(async function () {
+  await addTab(URL_ROOT + "doc_simple_animation.html");
+  const { inspector, panel } = await openAnimationInspector();
+
+  info("Checking animated property list and items existence at initial");
+  ok(!panel.querySelector(".animated-property-list"),
+     "The animated-property-list should not be in the DOM at initial");
+
+  for (const testCase of TEST_CASES) {
+    info(`Checking animated-property-list and items existence at ${ testCase.target }`);
+    const animatedNode = await getNodeFront(testCase.target, inspector);
+    await selectNodeAndWaitForAnimations(animatedNode, inspector);
+    ok(panel.querySelector(".animated-property-list"),
+       `The animated-property-list should be in the DOM at ${ testCase.target }`);
+    const itemEls =
+      panel.querySelectorAll(".animated-property-list .animated-property-item");
+    is(itemEls.length, testCase.expectedNumber,
+       `The number of animated-property-list should be ${ testCase.expectedNumber } `
+       + `at ${ testCase.target }`);
+
+    if (itemEls.length < 2) {
+      continue;
+    }
+
+    info(`Checking the background color for `
+         + `the animated property item at ${ testCase.target }`);
+    const evenColor = panel.ownerGlobal.getComputedStyle(itemEls[0]).backgroundColor;
+    const oddColor = panel.ownerGlobal.getComputedStyle(itemEls[1]).backgroundColor;
+    isnot(evenColor, oddColor,
+          "Background color of an even animated property item "
+          + "should be different from odd");
+  }
+});

devtools/client/inspector/animation/test/browser_animation_animation-detail_close-button.js

@@ -0,0 +1,21 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that whether close button in header of animation detail works.
+
+add_task(async function () {
+  await addTab(URL_ROOT + "doc_multi_timings.html");
+  const { animationInspector, panel } = await openAnimationInspector();
+
+  info("Checking close button in header of animation detail");
+  await clickOnAnimation(animationInspector, panel, 0);
+  const detailEl = panel.querySelector("#animation-container .controlled");
+  const win = panel.ownerGlobal;
+  isnot(win.getComputedStyle(detailEl).display, "none",
+    "detailEl should be visibled before clicking close button");
+  clickOnDetailCloseButton(panel);
+  is(win.getComputedStyle(detailEl).display, "none",
+    "detailEl should be unvisibled after clicking close button");
+});

devtools/client/inspector/animation/test/browser_animation_animation-detail_title.js

@@ -0,0 +1,37 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that whether title in header of animations detail.
+
+const TEST_CASES = [
+  {
+    target: ".cssanimation-normal",
+    expectedTitle: "cssanimation - CSS Animation",
+  },
+  {
+    target: ".delay-positive",
+    expectedTitle: "test-delay-animation - Script Animation",
+  },
+  {
+    target: ".easing-step",
+    expectedTitle: "Script Animation",
+  },
+];
+
+add_task(async function () {
+  await addTab(URL_ROOT + "doc_multi_timings.html");
+  const { inspector, panel } = await openAnimationInspector();
+
+  info("Checking title in each header of animation detail");
+
+  for (const testCase of TEST_CASES) {
+    info(`Checking title at ${ testCase.target }`);
+    const animatedNode = await getNodeFront(testCase.target, inspector);
+    await selectNodeAndWaitForAnimations(animatedNode, inspector);
+    const titleEl = panel.querySelector(".animation-detail-title");
+    is(titleEl.textContent, testCase.expectedTitle,
+       `Title of "${ testCase.target }" should be "${ testCase.expectedTitle }"`);
+  }
+});

devtools/client/inspector/animation/test/browser_animation_animation-detail_visibility.js

@@ -0,0 +1,33 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that whether animations detail could be displayed if there is selected animation.
+
+add_task(async function () {
+  await addTab(URL_ROOT + "doc_multi_timings.html");
+  const { animationInspector, inspector, panel } = await openAnimationInspector();
+
+  info("Checking animation detail visibility if animation was unselected");
+  const detailEl = panel.querySelector("#animation-container .controlled");
+  ok(detailEl, "The detail pane should be in the DOM");
+  const win = panel.ownerGlobal;
+  is(win.getComputedStyle(detailEl).display, "none", "detailEl should be unvisibled");
+
+  info("Checking animation detail visibility if animation was selected by click");
+  await clickOnAnimation(animationInspector, panel, 0);
+  isnot(win.getComputedStyle(detailEl).display, "none", "detailEl should be visibled");
+
+  info("Checking animation detail visibility when choose node which has animations");
+  const htmlNode = await getNodeFront("html", inspector);
+  await selectNodeAndWaitForAnimations(htmlNode, inspector);
+  is(win.getComputedStyle(detailEl).display, "none",
+     "detailEl should be unvisibled after choose html node");
+
+  info("Checking animation detail visibility when choose node which has an animation");
+  const animatedNode = await getNodeFront(".cssanimation-normal", inspector);
+  await selectNodeAndWaitForAnimations(animatedNode, inspector);
+  isnot(win.getComputedStyle(detailEl).display, "none",
+        "detailEl should be visibled after choose .cssanimation-normal node");
+});

devtools/client/inspector/animation/test/head.js

@@ -70,7 +70,8 @@ const enableAnimationFeatures = function () {
 /**
  * Add a new test tab in the browser and load the given url.
  *
- * @param {String} url The url to be loaded in the new tab
+ * @param {String} url
+ *        The url to be loaded in the new tab
  * @return a promise that resolves to the tab object when the url is loaded
  */
 const _addTab = addTab;
@@ -85,6 +86,43 @@ addTab = async function (url) {
   return tab;
 };
 
+/**
+ * Click on an animation in the timeline to select it.
+ *
+ * @param {AnimationInspector} animationInspector.
+ * @param {AnimationsPanel} panel
+ *        The panel instance.
+ * @param {Number} index
+ *        The index of the animation to click on.
+ */
+const clickOnAnimation = async function (animationInspector, panel, index) {
+  info("Click on animation " + index + " in the timeline");
+  const summaryGraphEl = panel.querySelectorAll(".animation-summary-graph")[index];
+  // Scroll to show the timeBlock since the element may be out of displayed area.
+  summaryGraphEl.scrollIntoView(false);
+  const bounds = summaryGraphEl.getBoundingClientRect();
+  const x = bounds.width / 2;
+  const y = bounds.height / 2;
+  EventUtils.synthesizeMouse(summaryGraphEl, x, y, {}, summaryGraphEl.ownerGlobal);
+
+  await waitForAnimationDetail(animationInspector);
+};
+
+/**
+ * Click on close button for animation detail pane.
+ *
+ * @param {AnimationsPanel} panel
+ *        The panel instance.
+ */
+const clickOnDetailCloseButton = function (panel) {
+  info("Click on close button for animation detail pane");
+  const buttonEl = panel.querySelector(".animation-detail-close-button");
+  const bounds = buttonEl.getBoundingClientRect();
+  const x = bounds.width / 2;
+  const y = bounds.height / 2;
+  EventUtils.synthesizeMouse(buttonEl, x, y, {}, buttonEl.ownerGlobal);
+};
+
 /**
  * Set the inspector's current selection to a node or to the first match of the
  * given css selector and wait for the animations to be displayed
@@ -132,9 +170,21 @@ const waitForRendering = async function (animationInspector) {
   await Promise.all([
     waitForAllAnimationTargets(animationInspector),
     waitForAllSummaryGraph(animationInspector),
+    waitForAnimationDetail(animationInspector),
   ]);
 };
 
+/**
+ * Wait for rendering of animation keyframes.
+ *
+ * @param {AnimationInspector} inspector
+ */
+const waitForAnimationDetail = async function (animationInspector) {
+  if (animationInspector.animations.length === 1) {
+    await animationInspector.once("animation-keyframes-rendered");
+  }
+};
+
 /**
  * Wait for all AnimationTarget components to be fully loaded
  * (fetched their related actor and rendered).