Bug 1468711 - Part 2: Modify a test for pseudo element. r?pbro draft
authorDaisuke Akatsuka <dakatsuka@mozilla.com>
Wed, 27 Jun 2018 11:16:17 +0900
changeset 811188 e1b9a09a0e8b5349cce0e45e78de36abdd9630b2
parent 811187 b39c3e56da87bcbe6c5c8f485c834b87f33e0346
child 811192 431fa63108f901c71b6ca1b78e545b8db47e4b84
push id114222
push userbmo:dakatsuka@mozilla.com
push dateWed, 27 Jun 2018 05:20:14 +0000
reviewerspbro
bugs1468711
milestone63.0a1
Bug 1468711 - Part 2: Modify a test for pseudo element. r?pbro MozReview-Commit-ID: KTUh83kC5yX
devtools/client/inspector/animation/test/browser_animation_pseudo-element.js
devtools/client/inspector/animation/test/head.js
--- a/devtools/client/inspector/animation/test/browser_animation_pseudo-element.js
+++ b/devtools/client/inspector/animation/test/browser_animation_pseudo-element.js
@@ -4,20 +4,28 @@ http://creativecommons.org/publicdomain/
 "use strict";
 
 // Test for pseudo element.
 
 const TEST_DATA = [
   {
     expectedTargetLabel: "::before",
     expectedAnimationNameLabel: "body",
+    expectedKeyframsGraphPathSegments: [
+      { x: 0, y: 0 },
+      { x: 1000, y: 100 },
+    ],
   },
   {
     expectedTargetLabel: "::before",
     expectedAnimationNameLabel: "div-before",
+    expectedKeyframsGraphPathSegments: [
+      { x: 0, y: 100 },
+      { x: 1000, y: 0 },
+    ],
   },
   {
     expectedTargetLabel: "::after",
     expectedAnimationNameLabel: "div-after",
   },
 ];
 
 add_task(async function() {
@@ -46,34 +54,41 @@ add_task(async function() {
     const animationNameEl = animationItemEl.querySelector(".animation-name");
     is(animationNameEl.textContent, testData.expectedAnimationNameLabel,
       `The animation name should be ${ testData.expectedAnimationNameLabel }`);
   }
 
   info("Checking whether node is selected correctly " +
        "when click on the first inspector icon on Reps component");
   await clickOnTargetNode(animationInspector, panel, 0);
-
-  info("Checking count of animation item");
-  is(panel.querySelectorAll(".animation-list .animation-item").length, 1,
-    "Count of animation item should be 1");
-
-  info("Checking content of animation item");
-  is(panel.querySelector(".animation-list .animation-item .animation-name").textContent,
-     TEST_DATA[0].expectedAnimationNameLabel,
-     `The animation name should be ${ TEST_DATA[0].expectedAnimationNameLabel }`);
+  assertAnimationCount(panel, 1);
+  assertAnimationNameLabel(panel, TEST_DATA[0].expectedAnimationNameLabel);
+  assertKeyframesGraphPathSegments(panel, TEST_DATA[0].expectedKeyframsGraphPathSegments);
 
   info("Select <body> again to reset the animation list");
   await selectNodeAndWaitForAnimations("body", inspector);
 
   info("Checking whether node is selected correctly " +
        "when click on the second inspector icon on Reps component");
   await clickOnTargetNode(animationInspector, panel, 1);
+  assertAnimationCount(panel, 1);
+  assertAnimationNameLabel(panel, TEST_DATA[1].expectedAnimationNameLabel);
+  assertKeyframesGraphPathSegments(panel, TEST_DATA[1].expectedKeyframsGraphPathSegments);
+});
 
+function assertAnimationCount(panel, expectedCount) {
   info("Checking count of animation item");
-  is(panel.querySelectorAll(".animation-list .animation-item").length, 1,
-     "Count of animation item should be 1");
+  is(panel.querySelectorAll(".animation-list .animation-item").length, expectedCount,
+     `Count of animation item should be ${ expectedCount }`);
+}
 
-  info("Checking content of animation item");
+function assertAnimationNameLabel(panel, expectedAnimationNameLabel) {
+  info("Checking the animation name label");
   is(panel.querySelector(".animation-list .animation-item .animation-name").textContent,
-     TEST_DATA[1].expectedAnimationNameLabel,
-     `The animation name should be ${ TEST_DATA[1].expectedAnimationNameLabel }`);
-});
+     expectedAnimationNameLabel,
+     `The animation name should be ${ expectedAnimationNameLabel }`);
+}
+
+function assertKeyframesGraphPathSegments(panel, expectedPathSegments) {
+  info("Checking the keyframes graph path segments");
+  const pathEl = panel.querySelector(".keyframes-graph-path path");
+  assertPathSegments(pathEl, true, expectedPathSegments);
+}
--- a/devtools/client/inspector/animation/test/head.js
+++ b/devtools/client/inspector/animation/test/head.js
@@ -272,18 +272,20 @@ const clickOnSummaryGraph = async functi
  * @param {Number} index
  *        The index of the AnimationTargetComponent to click on.
  */
 const clickOnTargetNode = async function(animationInspector, panel, index) {
   info(`Click on a target node in animation target component[${ index }]`);
   const targetEl = panel.querySelectorAll(".animation-target .objectBox")[index];
   targetEl.scrollIntoView(false);
   const onHighlight = animationInspector.inspector.toolbox.once("node-highlight");
+  const onAnimationTargetUpdated = animationInspector.once("animation-target-rendered");
   EventUtils.synthesizeMouseAtCenter(targetEl, {}, targetEl.ownerGlobal);
-  await waitForRendering(animationInspector);
+  await onAnimationTargetUpdated;
+  await waitForSummaryAndDetail(animationInspector);
   await onHighlight;
 };
 
 /**
  * Drag on the scrubber to update the animation current time.
  *
  * @param {DOMElement} panel
  *        #animation-container element.