Bug 1598317 - Add tests for Changes panel export options. r=pbro

Differential Revision: https://phabricator.services.mozilla.com/D55072

--HG--
extra : moz-landing-system : lando

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

@@ -12,6 +12,9 @@ support-files =
   !/devtools/client/shared/test/test-actor.js
   !/devtools/client/shared/test/test-actor-registry.js
 
+[browser_changes_copy_all_changes.js]
+[browser_changes_copy_declaration.js]
+[browser_changes_copy_rule.js]
 [browser_changes_declaration_disable.js]
 [browser_changes_declaration_duplicate.js]
 [browser_changes_declaration_edit_value.js]

devtools/client/inspector/changes/test/browser_changes_copy_all_changes.js

@@ -0,0 +1,53 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the Changes panel Copy All Changes button will populate the
+// clipboard with a summary of just the changed declarations.
+
+const TEST_URI = `
+  <style type='text/css'>
+  div {
+    color: red;
+    margin: 0;
+  }
+  </style>
+  <div></div>
+`;
+
+// Indentation is important. A strict check will be done against the clipboard content.
+const EXPECTED_CLIPBOARD = `
+/* Inline #0 | data:text/html;charset=utf-8,${TEST_URI} */
+
+div {
+  /* color: red; */
+  color: green;
+}
+`;
+
+add_task(async function() {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view: ruleView } = await openRuleView();
+  const changesView = selectChangesView(inspector);
+  const { document: panelDoc, store } = changesView;
+
+  await selectNode("div", inspector);
+  const onTrackChange = waitUntilAction(store, "TRACK_CHANGE");
+  await updateDeclaration(ruleView, 1, { color: "red" }, { color: "green" });
+  await onTrackChange;
+
+  info(
+    "Check that clicking the Copy All Changes button copies all changes to the clipboard."
+  );
+  const button = panelDoc.querySelector(".changes__copy-all-changes-button");
+  await waitForClipboardPromise(
+    () => button.click(),
+    () => checkClipboardData(EXPECTED_CLIPBOARD)
+  );
+});
+
+function checkClipboardData(expected) {
+  const actual = SpecialPowers.getClipboardData("text/unicode");
+  return decodeURIComponent(actual).trim() === expected.trim();
+}

devtools/client/inspector/changes/test/browser_changes_copy_declaration.js

@@ -0,0 +1,64 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the Changes panel Copy Declaration context menu item will populate the
+// clipboard with the changed declaration.
+
+const TEST_URI = `
+  <style type='text/css'>
+  div {
+    color: red;
+    margin: 0;
+  }
+  </style>
+  <div></div>
+`;
+
+const EXPECTED_CLIPBOARD_REMOVED = `/* color: red; */`;
+const EXPECTED_CLIPBOARD_ADDED = `color: green;`;
+
+add_task(async function() {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view: ruleView } = await openRuleView();
+  const changesView = selectChangesView(inspector);
+  const { document: panelDoc, store } = changesView;
+
+  await selectNode("div", inspector);
+  const onTrackChange = waitUntilAction(store, "TRACK_CHANGE");
+  await updateDeclaration(ruleView, 1, { color: "red" }, { color: "green" });
+  await onTrackChange;
+
+  info(
+    "Click the Copy Declaration context menu item for the removed declaration"
+  );
+  const removeDecl = getRemovedDeclarations(panelDoc);
+  const addDecl = getAddedDeclarations(panelDoc);
+
+  let menu = await getChangesContextMenu(changesView, removeDecl[0].element);
+  let menuItem = menu.items.find(
+    item => item.id === "changes-contextmenu-copy-declaration"
+  );
+  await waitForClipboardPromise(
+    () => menuItem.click(),
+    () => checkClipboardData(EXPECTED_CLIPBOARD_REMOVED)
+  );
+
+  info(
+    "Click the Copy Declaration context menu item for the added declaration"
+  );
+  menu = await getChangesContextMenu(changesView, addDecl[0].element);
+  menuItem = menu.items.find(
+    item => item.id === "changes-contextmenu-copy-declaration"
+  );
+  await waitForClipboardPromise(
+    () => menuItem.click(),
+    () => checkClipboardData(EXPECTED_CLIPBOARD_ADDED)
+  );
+});
+
+function checkClipboardData(expected) {
+  const actual = SpecialPowers.getClipboardData("text/unicode");
+  return actual.trim() === expected.trim();
+}

devtools/client/inspector/changes/test/browser_changes_copy_rule.js

@@ -0,0 +1,64 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the Changes panel Copy Rule button and context menu will populate the
+// clipboard with the entire contents of the changed rule, including unchanged properties.
+
+const TEST_URI = `
+  <style type='text/css'>
+  div {
+    color: red;
+    margin: 0;
+  }
+  </style>
+  <div></div>
+`;
+
+// Indentation is important. A strict check will be done against the clipboard content.
+const EXPECTED_CLIPBOARD = `
+  div {
+    color: green;
+    margin: 0;
+  }
+`;
+
+add_task(async function() {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view: ruleView } = await openRuleView();
+  const changesView = selectChangesView(inspector);
+  const { document: panelDoc, store } = changesView;
+
+  await selectNode("div", inspector);
+  const onTrackChange = waitUntilAction(store, "TRACK_CHANGE");
+  await updateDeclaration(ruleView, 1, { color: "red" }, { color: "green" });
+  await onTrackChange;
+
+  info("Click the Copy Rule button and expect the changed rule on clipboard");
+  const button = panelDoc.querySelector(".changes__copy-rule-button");
+  await waitForClipboardPromise(
+    () => button.click(),
+    () => checkClipboardData(EXPECTED_CLIPBOARD)
+  );
+
+  emptyClipboard();
+
+  info(
+    "Click the Copy Rule context menu item and expect the changed rule on the clipboard"
+  );
+  const addDecl = getAddedDeclarations(panelDoc);
+  const menu = await getChangesContextMenu(changesView, addDecl[0].element);
+  const menuItem = menu.items.find(
+    item => item.id === "changes-contextmenu-copy-rule"
+  );
+  await waitForClipboardPromise(
+    () => menuItem.click(),
+    () => checkClipboardData(EXPECTED_CLIPBOARD)
+  );
+});
+
+function checkClipboardData(expected) {
+  const actual = SpecialPowers.getClipboardData("text/unicode");
+  return actual.trim() === expected.trim();
+}

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

@@ -55,6 +55,7 @@ function getDeclarations(panelDoc, selector = "", containerNode = null) {
       return {
         property: el.querySelector(".changes__declaration-name").textContent,
         value: el.querySelector(".changes__declaration-value").textContent,
+        element: el,
       };
     });
 }
@@ -89,3 +90,13 @@ function getAddedSelectors(panelDoc) {
 function getRemovedSelectors(panelDoc) {
   return getSelectors(panelDoc, ".diff-remove");
 }
+
+async function getChangesContextMenu(changesView, element) {
+  const onContextMenu = changesView.contextMenu.once("open");
+  info(`Trigger context menu for element: ${element}`);
+  synthesizeContextMenuEvent(element);
+  info(`Wait for context menu to show`);
+  await onContextMenu;
+
+  return changesView.contextMenu;
+}