Bug 1153184 - UI Tests for the css filter presets popup changes; r=pbrosset

browser/devtools/shared/test/browser.ini

@@ -34,6 +34,9 @@ support-files =
 [browser_filter-editor-08.js]
 [browser_filter-editor-09.js]
 [browser_filter-editor-10.js]
+[browser_filter-presets-01.js]
+[browser_filter-presets-02.js]
+[browser_filter-presets-03.js]
 [browser_flame-graph-01.js]
 [browser_flame-graph-02.js]
 [browser_flame-graph-03a.js]

browser/devtools/shared/test/browser_filter-presets-01.js

@@ -0,0 +1,98 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests saving presets
+
+const TEST_URI = "chrome://browser/content/devtools/filter-frame.xhtml";
+const {CSSFilterEditorWidget} = require("devtools/shared/widgets/FilterWidget");
+
+add_task(function* () {
+  yield promiseTab("about:blank");
+
+  let [host, win, doc] = yield createHost("bottom", TEST_URI);
+
+  const container = doc.querySelector("#container");
+  let widget = new CSSFilterEditorWidget(container, "none");
+  // First render
+  yield widget.once("render");
+
+  const VALUE = "blur(2px) contrast(150%)";
+  const NAME = "Test";
+
+  yield showFilterPopupPresetsAndCreatePreset(widget, NAME, VALUE);
+
+  let preset = widget.el.querySelector(".preset");
+  is(preset.querySelector("label").textContent, NAME,
+     "Should show preset name correctly");
+  is(preset.querySelector("span").textContent, VALUE,
+     "Should show preset value preview correctly");
+
+  let list = yield widget.getPresets();
+  let input = widget.el.querySelector(".presets-list .footer input");
+  let data = list[0];
+
+  is(data.name, NAME,
+     "Should add the preset to asyncStorage - name property");
+  is(data.value, VALUE,
+     "Should add the preset to asyncStorage - name property");
+
+  info("Test overriding preset by using the same name");
+
+  const VALUE_2 = "saturate(50%) brightness(10%)";
+
+  widget.setCssValue(VALUE_2);
+
+  yield savePreset(widget);
+
+  is(widget.el.querySelectorAll(".preset").length, 1,
+     "Should override the preset with the same name - render");
+
+  list = yield widget.getPresets();
+  data = list[0];
+
+  is(list.length, 1,
+     "Should override the preset with the same name - asyncStorage");
+
+  is(data.name, NAME,
+     "Should override the preset with the same name - prop name");
+  is(data.value, VALUE_2,
+     "Should override the preset with the same name - prop value");
+
+  yield widget.setPresets([]);
+
+  info("Test saving a preset without name");
+  input.value = "";
+
+  yield savePreset(widget, "preset-save-error");
+
+  list = yield widget.getPresets();
+  is(list.length, 0,
+     "Should not add a preset without name");
+
+  info("Test saving a preset without filters");
+
+  input.value = NAME;
+  widget.setCssValue("none");
+
+  yield savePreset(widget, "preset-save-error");
+
+  list = yield widget.getPresets();
+  is(list.length, 0,
+     "Should not add a preset without filters (value: none)");
+});
+
+/**
+ * Call savePreset on widget and wait for the specified event to emit
+ * @param {CSSFilterWidget} widget
+ * @param {string} expectEvent="render" The event to listen on
+ * @return {Promise}
+ */
+function savePreset(widget, expectEvent = "render") {
+  let onEvent = widget.once(expectEvent);
+  widget._savePreset({
+    preventDefault: () => {},
+  });
+  return onEvent;
+}

browser/devtools/shared/test/browser_filter-presets-02.js

@@ -0,0 +1,44 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests loading presets
+
+const TEST_URI = "chrome://browser/content/devtools/filter-frame.xhtml";
+const {CSSFilterEditorWidget} = require("devtools/shared/widgets/FilterWidget");
+
+add_task(function* () {
+  yield promiseTab("about:blank");
+
+  let [host, win, doc] = yield createHost("bottom", TEST_URI);
+
+  const container = doc.querySelector("#container");
+  let widget = new CSSFilterEditorWidget(container, "none");
+  // First render
+  yield widget.once("render");
+
+  const VALUE = "blur(2px) contrast(150%)";
+  const NAME = "Test";
+
+  yield showFilterPopupPresetsAndCreatePreset(widget, NAME, VALUE);
+
+  let onRender = widget.once("render");
+  // reset value
+  widget.setCssValue("saturate(100%) brightness(150%)");
+  yield onRender;
+
+  let preset = widget.el.querySelector(".preset");
+
+  onRender = widget.once("render");
+  widget._presetClick({
+    target: preset
+  });
+
+  yield onRender;
+
+  is(widget.getCssValue(), VALUE,
+     "Should set widget's value correctly");
+  is(widget.el.querySelector(".presets-list .footer input").value, NAME,
+     "Should set input's value to name");
+});

browser/devtools/shared/test/browser_filter-presets-03.js

@@ -0,0 +1,39 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests deleting presets
+
+const TEST_URI = "chrome://browser/content/devtools/filter-frame.xhtml";
+const {CSSFilterEditorWidget} = require("devtools/shared/widgets/FilterWidget");
+
+add_task(function* () {
+  yield promiseTab("about:blank");
+
+  let [host, win, doc] = yield createHost("bottom", TEST_URI);
+
+  const container = doc.querySelector("#container");
+  let widget = new CSSFilterEditorWidget(container, "none");
+  // First render
+  yield widget.once("render");
+
+  const NAME = "Test";
+  const VALUE = "blur(2px) contrast(150%)";
+
+  yield showFilterPopupPresetsAndCreatePreset(widget, NAME, VALUE);
+
+  let removeButton = widget.el.querySelector(".preset .remove-button");
+  let onRender = widget.once("render");
+  widget._presetClick({
+    target: removeButton
+  });
+
+  yield onRender;
+  is(widget.el.querySelector(".preset"), null,
+     "Should re-render after removing preset");
+
+  let list = yield widget.getPresets();
+  is(list.length, 0,
+     "Should remove presets from asyncStorage");
+});

browser/devtools/shared/test/head.js

@@ -283,3 +283,39 @@ function waitUntil(predicate, interval = 10) {
     }, interval);
   });
 }
+
+/**
+ * Show the presets list sidebar in the cssfilter widget popup
+ * @param {CSSFilterWidget} widget
+ * @return {Promise}
+ */
+function showFilterPopupPresets(widget) {
+  let onRender = widget.once("render");
+  widget._togglePresets();
+  return onRender;
+}
+
+/**
+ * Show presets list and create a sample preset with the name and value provided
+ * @param  {CSSFilterWidget} widget
+ * @param  {string} name
+ * @param  {string} value
+ * @return {Promise}
+ */
+let showFilterPopupPresetsAndCreatePreset = Task.async(function*(widget, name, value) {
+  yield showFilterPopupPresets(widget);
+
+  let onRender = widget.once("render");
+  widget.setCssValue(value);
+  yield onRender;
+
+  let footer = widget.el.querySelector(".presets-list .footer");
+  footer.querySelector("input").value = name;
+
+  onRender = widget.once("render");
+  widget._savePreset({
+    preventDefault: () => {}
+  });
+
+  yield onRender;
+});