Bug 1431576 - Part 4: Add test for selection of animation item. r?jdescottes draft
authorDaisuke Akatsuka <dakatsuka@mozilla.com>
Wed, 20 Jun 2018 13:20:36 +0900
changeset 808606 ace044d5cbb62375126ea89a03341af49cff088d
parent 808605 6128d8cfa83da5ec8e56ced8fa4a9be3515be8a0
push id113433
push userbmo:dakatsuka@mozilla.com
push dateWed, 20 Jun 2018 04:21:35 +0000
reviewersjdescottes
bugs1431576
milestone62.0a1
Bug 1431576 - Part 4: Add test for selection of animation item. r?jdescottes MozReview-Commit-ID: 46qhbjnRNGd
devtools/client/inspector/animation/components/AnimationItem.js
devtools/client/inspector/animation/test/browser.ini
devtools/client/inspector/animation/test/browser_animation_animation-list_one-animation-select.js
devtools/client/inspector/animation/test/browser_animation_animation-list_select.js
--- a/devtools/client/inspector/animation/components/AnimationItem.js
+++ b/devtools/client/inspector/animation/components/AnimationItem.js
@@ -29,35 +29,37 @@ class AnimationItem extends Component {
       timeScale: PropTypes.object.isRequired,
     };
   }
 
   constructor(props) {
     super(props);
 
     this.state = {
-      isSelected: false,
+      isSelected: this.isSelected(props),
     };
   }
 
   componentWillReceiveProps(nextProps) {
-    const { animation } = nextProps;
-
     this.setState({
-      isSelected: nextProps.selectedAnimation &&
-                  animation.actorID === nextProps.selectedAnimation.actorID
+      isSelected: this.isSelected(nextProps),
     });
   }
 
   shouldComponentUpdate(nextProps, nextState) {
     return this.state.isSelected !== nextState.isSelected ||
            this.props.animation !== nextProps.animation ||
            this.props.timeScale !== nextProps.timeScale;
   }
 
+  isSelected(props) {
+    return props.selectedAnimation &&
+           props.animation.actorID === props.selectedAnimation.actorID;
+  }
+
   render() {
     const {
       animation,
       emitEventForTest,
       getAnimatedPropertyMap,
       getNodeFromActor,
       onHideBoxModelHighlighter,
       onShowBoxModelHighlighterForNode,
--- a/devtools/client/inspector/animation/test/browser.ini
+++ b/devtools/client/inspector/animation/test/browser.ini
@@ -21,16 +21,18 @@ support-files =
 
 [browser_animation_animated-property-list.js]
 [browser_animation_animated-property-list_unchanged-items.js]
 [browser_animation_animated-property-name.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-list_one-animation-select.js]
+[browser_animation_animation-list_select.js]
 [browser_animation_animation-target.js]
 [browser_animation_animation-target_highlight.js]
 [browser_animation_animation-target_select.js]
 [browser_animation_animation-timeline-tick.js]
 [browser_animation_css-transition-with-playstate-idle.js]
 [browser_animation_current-time-label.js]
 [browser_animation_current-time-scrubber.js]
 [browser_animation_current-time-scrubber_each-different-creation-time-animations.js]
new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/animation/test/browser_animation_animation-list_one-animation-select.js
@@ -0,0 +1,22 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that whether the animation item has been selected from first time
+// if count of the animations is one.
+
+add_task(async function() {
+  await addTab(URL_ROOT + "doc_simple_animation.html");
+  await removeAnimatedElementsExcept([".animated"]);
+  const { panel } = await openAnimationInspector();
+
+  info("Checking whether an item element has been selected");
+  is(panel.querySelector(".animation-item").classList.contains("selected"), true,
+     "The animation item should have 'selected' class");
+
+  info("Checking whether the element will be unselected after closing the detail pane");
+  clickOnDetailCloseButton(panel);
+  is(panel.querySelector(".animation-item").classList.contains("selected"), false,
+     "The animation item should not have 'selected' class");
+});
new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/animation/test/browser_animation_animation-list_select.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 the animation items in the list were selectable.
+
+add_task(async function() {
+  await addTab(URL_ROOT + "doc_simple_animation.html");
+  await removeAnimatedElementsExcept([".animated", ".long"]);
+  const { animationInspector, panel } = await openAnimationInspector();
+
+  info("Checking whether 1st element will be selected");
+  await clickOnAnimation(animationInspector, panel, 0);
+  assertSelection(panel, [true, false]);
+
+  info("Checking whether 2nd element will be selected");
+  await clickOnAnimation(animationInspector, panel, 1);
+  assertSelection(panel, [false, true]);
+
+  info("Checking whether all elements will be unselected after closing the detail pane");
+  clickOnDetailCloseButton(panel);
+  assertSelection(panel, [false, false]);
+});
+
+function assertSelection(panel, expectedResult) {
+  panel.querySelectorAll(".animation-item").forEach((item, index) => {
+    const shouldSelected = expectedResult[index];
+    is(item.classList.contains("selected"), shouldSelected,
+       `Animation item[${ index }] should ` +
+       `${ shouldSelected ? "" : "not" } have 'selected' class`);
+  });
+}