From ebcd20cc7b7a935549408106afbf338f8399cefa Mon Sep 17 00:00:00 2001 From: Razvan Caliman Date: Mon, 2 Dec 2019 16:30:00 +0000 Subject: [PATCH] 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 --- .../client/inspector/changes/test/browser.ini | 3 + .../test/browser_changes_copy_all_changes.js | 53 +++++++++++++++ .../test/browser_changes_copy_declaration.js | 64 +++++++++++++++++++ .../changes/test/browser_changes_copy_rule.js | 64 +++++++++++++++++++ .../client/inspector/changes/test/head.js | 11 ++++ 5 files changed, 195 insertions(+) create mode 100644 devtools/client/inspector/changes/test/browser_changes_copy_all_changes.js create mode 100644 devtools/client/inspector/changes/test/browser_changes_copy_declaration.js create mode 100644 devtools/client/inspector/changes/test/browser_changes_copy_rule.js diff --git a/devtools/client/inspector/changes/test/browser.ini b/devtools/client/inspector/changes/test/browser.ini index ceb29f1e2696..47d3ea3af9f2 100644 --- a/devtools/client/inspector/changes/test/browser.ini +++ b/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] diff --git a/devtools/client/inspector/changes/test/browser_changes_copy_all_changes.js b/devtools/client/inspector/changes/test/browser_changes_copy_all_changes.js new file mode 100644 index 000000000000..ebe323a7b442 --- /dev/null +++ b/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 = ` + +
+`; + +// 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(); +} diff --git a/devtools/client/inspector/changes/test/browser_changes_copy_declaration.js b/devtools/client/inspector/changes/test/browser_changes_copy_declaration.js new file mode 100644 index 000000000000..993c6744c91d --- /dev/null +++ b/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 = ` + +
+`; + +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(); +} diff --git a/devtools/client/inspector/changes/test/browser_changes_copy_rule.js b/devtools/client/inspector/changes/test/browser_changes_copy_rule.js new file mode 100644 index 000000000000..5054365f03a1 --- /dev/null +++ b/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 = ` + +
+`; + +// 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(); +} diff --git a/devtools/client/inspector/changes/test/head.js b/devtools/client/inspector/changes/test/head.js index 33016487b168..c50b1355fe6f 100644 --- a/devtools/client/inspector/changes/test/head.js +++ b/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; +}