diff options
Diffstat (limited to 'devtools/client/webconsole/test/browser/browser_jsterm_evaluation_context_selector.js')
-rw-r--r-- | devtools/client/webconsole/test/browser/browser_jsterm_evaluation_context_selector.js | 279 |
1 files changed, 279 insertions, 0 deletions
diff --git a/devtools/client/webconsole/test/browser/browser_jsterm_evaluation_context_selector.js b/devtools/client/webconsole/test/browser/browser_jsterm_evaluation_context_selector.js new file mode 100644 index 0000000000..71cc06345e --- /dev/null +++ b/devtools/client/webconsole/test/browser/browser_jsterm_evaluation_context_selector.js @@ -0,0 +1,279 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const FILE_FOLDER = `browser/devtools/client/webconsole/test/browser`; +const TEST_URI = `https://example.com/${FILE_FOLDER}/test-console-evaluation-context-selector.html`; +const IFRAME_PATH = `${FILE_FOLDER}/test-console-evaluation-context-selector-child.html`; + +requestLongerTimeout(2); + +add_task(async function () { + await pushPref("devtools.webconsole.input.context", true); + + const hud = await openNewTabWithIframesAndConsole(TEST_URI, [ + `https://example.org/${IFRAME_PATH}?id=iframe-1`, + `https://example.net/${IFRAME_PATH}?id=iframe-2`, + ]); + + const evaluationContextSelectorButton = hud.ui.outputNode.querySelector( + ".webconsole-evaluation-selector-button" + ); + + if (!isFissionEnabled() && !isEveryFrameTargetEnabled()) { + is( + evaluationContextSelectorButton, + null, + "context selector is only displayed when Fission or EFT is enabled" + ); + return; + } + + ok( + evaluationContextSelectorButton, + "The evaluation context selector is visible" + ); + is( + evaluationContextSelectorButton.innerText, + "Top", + "The button has the expected 'Top' text" + ); + is( + evaluationContextSelectorButton.classList.contains("checked"), + false, + "The checked class isn't applied" + ); + + const topLevelDocumentMessage = await executeAndWaitForResultMessage( + hud, + "document.location", + "example.com" + ); + + setInputValue(hud, "document.location.host"); + await waitForEagerEvaluationResult(hud, `"example.com"`); + + info("Check the context selector menu"); + const expectedTopItem = { + label: "Top", + tooltip: TEST_URI, + }; + const expectedSeparatorItem = { separator: true }; + const expectedFirstIframeItem = { + label: "iframe-1|example.org", + tooltip: `https://example.org/${IFRAME_PATH}?id=iframe-1`, + }; + const expectedSecondIframeItem = { + label: "iframe-2|example.net", + tooltip: `https://example.net/${IFRAME_PATH}?id=iframe-2`, + }; + + await checkContextSelectorMenu(hud, [ + { + ...expectedTopItem, + checked: true, + }, + expectedSeparatorItem, + { + ...expectedFirstIframeItem, + checked: false, + }, + { + ...expectedSecondIframeItem, + checked: false, + }, + ]); + + info("Select the first iframe"); + selectTargetInContextSelector(hud, expectedFirstIframeItem.label); + + await waitFor(() => + evaluationContextSelectorButton.innerText.includes("example.org") + ); + ok(true, "The context was set to the selected iframe document"); + is( + evaluationContextSelectorButton.classList.contains("checked"), + true, + "The checked class is applied" + ); + + await waitForEagerEvaluationResult(hud, `"example.org"`); + ok(true, "The instant evaluation result is updated in the iframe context"); + + const iframe1DocumentMessage = await executeAndWaitForResultMessage( + hud, + "document.location", + "example.org" + ); + setInputValue(hud, "document.location.host"); + + info("Select the second iframe in the context selector menu"); + await checkContextSelectorMenu(hud, [ + { + ...expectedTopItem, + checked: false, + }, + expectedSeparatorItem, + { + ...expectedFirstIframeItem, + checked: true, + }, + { + ...expectedSecondIframeItem, + checked: false, + }, + ]); + selectTargetInContextSelector(hud, expectedSecondIframeItem.label); + + await waitFor(() => + evaluationContextSelectorButton.innerText.includes("example.net") + ); + ok(true, "The context was set to the selected iframe document"); + is( + evaluationContextSelectorButton.classList.contains("checked"), + true, + "The checked class is applied" + ); + + await waitForEagerEvaluationResult(hud, `"example.net"`); + ok(true, "The instant evaluation result is updated in the iframe context"); + + const iframe2DocumentMessage = await executeAndWaitForResultMessage( + hud, + "document.location", + "example.net" + ); + setInputValue(hud, "document.location.host"); + + info("Select the top frame in the context selector menu"); + await checkContextSelectorMenu(hud, [ + { + ...expectedTopItem, + checked: false, + }, + expectedSeparatorItem, + { + ...expectedFirstIframeItem, + checked: false, + }, + { + ...expectedSecondIframeItem, + checked: true, + }, + ]); + selectTargetInContextSelector(hud, expectedTopItem.label); + + await waitForEagerEvaluationResult(hud, `"example.com"`); + await waitFor(() => + evaluationContextSelectorButton.innerText.includes("Top") + ); + is( + evaluationContextSelectorButton.classList.contains("checked"), + false, + "The checked class isn't applied" + ); + + info("Check that 'Store as global variable' selects the right context"); + await testStoreAsGlobalVariable( + hud, + iframe1DocumentMessage, + "temp0", + "example.org" + ); + await waitForEagerEvaluationResult( + hud, + `Location https://example.org/${IFRAME_PATH}?id=iframe-1` + ); + await waitFor(() => + evaluationContextSelectorButton.innerText.includes("example.org") + ); + ok(true, "The context was set to the selected iframe document"); + + await testStoreAsGlobalVariable( + hud, + iframe2DocumentMessage, + "temp0", + "example.net" + ); + await waitForEagerEvaluationResult( + hud, + `Location https://example.net/${IFRAME_PATH}?id=iframe-2` + ); + await waitFor(() => + evaluationContextSelectorButton.innerText.includes("example.net") + ); + ok(true, "The context was set to the selected iframe document"); + + await testStoreAsGlobalVariable( + hud, + topLevelDocumentMessage, + "temp0", + "example.com" + ); + await waitForEagerEvaluationResult(hud, `Location ${TEST_URI}`); + await waitFor(() => + evaluationContextSelectorButton.innerText.includes("Top") + ); + ok(true, "The context was set to the top document"); + + info("Check that autocomplete data are cleared when changing context"); + await setInputValueForAutocompletion(hud, "foo"); + ok( + hasExactPopupLabels(hud.jsterm.autocompletePopup, ["foobar", "foobaz"]), + "autocomplete has expected items from top level document" + ); + checkInputCompletionValue(hud, "bar", `completeNode has expected value`); + + info("Select iframe document"); + // We need to hide the popup to be able to select the target in the context selector. + // Don't use `closeAutocompletePopup` as it uses the Escape key, which explicitely hides + // the completion node. + const onPopupHidden = hud.jsterm.autocompletePopup.once("popuphidden"); + hud.jsterm.autocompletePopup.hidePopup(); + onPopupHidden; + + selectTargetInContextSelector(hud, expectedSecondIframeItem.label); + await waitFor(() => getInputCompletionValue(hud) === ""); + ok(true, `completeNode was cleared`); + + const updated = hud.jsterm.once("autocomplete-updated"); + EventUtils.sendString("b", hud.iframeWindow); + await updated; + + ok( + hasExactPopupLabels(hud.jsterm.autocompletePopup, []), + "autocomplete data was cleared" + ); +}); + +async function testStoreAsGlobalVariable( + hud, + msg, + variableName, + expectedTextResult +) { + const menuPopup = await openContextMenu( + hud, + msg.node.querySelector(".objectBox") + ); + const storeMenuItem = menuPopup.querySelector("#console-menu-store"); + const onceInputSet = hud.jsterm.once("set-input-value"); + storeMenuItem.click(); + + info("Wait for console input to be updated with the temp variable"); + await onceInputSet; + + info("Wait for context menu to be hidden"); + await hideContextMenu(hud); + + is(getInputValue(hud), variableName, "Input was set"); + + await executeAndWaitForResultMessage( + hud, + `${variableName}`, + expectedTextResult + ); + ok(true, "Correct variable assigned into console."); +} |