From 60c2bb5444e6dcaf8ed0cd3595447462f8596bd8 Mon Sep 17 00:00:00 2001 From: Julian Descottes Date: Tue, 17 Jan 2017 17:41:54 +0100 Subject: [PATCH 01/11] add missing exports to src/index.js --- src/index.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/index.js b/src/index.js index d071881..c41a473 100644 --- a/src/index.js +++ b/src/index.js @@ -2,10 +2,16 @@ const React = require("react"); const { MODE } = require("./reps/constants"); const Rep = React.createFactory(require("./reps/rep")); +const StringRep = React.createFactory(require("./reps/string").rep); const Grip = require("./reps/grip"); +const { createFactories, parseURLEncodedText, parseURLParams } = require("./reps/rep-utils"); module.exports = { Rep, + StringRep, Grip, - MODE + MODE, + createFactories, + parseURLEncodedText, + parseURLParams, }; From d6f621f507309a76934d756a9278a71f56367bb3 Mon Sep 17 00:00:00 2001 From: Julian Descottes Date: Tue, 17 Jan 2017 17:42:19 +0100 Subject: [PATCH 02/11] remove unused index.js --- index.js | 9 --------- 1 file changed, 9 deletions(-) delete mode 100644 index.js diff --git a/index.js b/index.js deleted file mode 100644 index 6c23967..0000000 --- a/index.js +++ /dev/null @@ -1,9 +0,0 @@ -const Rep = require("./src/reps/rep").Rep; -const Grip = require("./src/reps/grip").Grip; -const ObjectInspector = require("./src/ObjectInspector"); - -module.exports = { - Rep, - Grip, - ObjectInspector -} From ef783c73a09ac2c3ea93fe18017823effc6a33db Mon Sep 17 00:00:00 2001 From: Julian Descottes Date: Tue, 17 Jan 2017 18:04:29 +0100 Subject: [PATCH 03/11] cleanup build scripts for reps --- bin/download-firefox-artifact | 4 ++-- bin/prepare-mochitests-dev | 2 -- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/bin/download-firefox-artifact b/bin/download-firefox-artifact index 7b6c6cf..6db2401 100755 --- a/bin/download-firefox-artifact +++ b/bin/download-firefox-artifact @@ -24,8 +24,8 @@ if [ -d "$FIREFOX_PATH" ]; then # If the mochitest dir has been symlinked, remove it as revert # does not follow symlinks. - if [ -h "$FIREFOX_PATH/devtools/client/debugger/new/test/mochitest" ]; then - rm "$FIREFOX_PATH/devtools/client/debugger/new/test/mochitest"; + if [ -h "$FIREFOX_PATH/devtools/client/shared/components/reps/test/mochitest" ]; then + rm "$FIREFOX_PATH/devtools/client/shared/components/reps/test/mochitest"; fi hg revert -a diff --git a/bin/prepare-mochitests-dev b/bin/prepare-mochitests-dev index 71c0878..7aa7b9a 100755 --- a/bin/prepare-mochitests-dev +++ b/bin/prepare-mochitests-dev @@ -6,7 +6,5 @@ FIREFOX_PATH="$ROOT/../firefox" # This will either download or update the local Firefox repo "$ROOT/download-firefox-artifact" -# Update the debugger files, build firefox, and run all the mochitests -"$ROOT/make-firefox-bundle" "$FIREFOX_PATH" --symlink-mochitests cd "$FIREFOX_PATH" ./mach build From fbbacbedcc5c626d040389474f2c647078702d4e Mon Sep 17 00:00:00 2001 From: Julian Descottes Date: Tue, 17 Jan 2017 21:19:37 +0100 Subject: [PATCH 04/11] update path to mc reps --- bin/copy-assets.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/bin/copy-assets.js b/bin/copy-assets.js index 4e629c4..4a9408d 100644 --- a/bin/copy-assets.js +++ b/bin/copy-assets.js @@ -9,9 +9,9 @@ const args = minimist(process.argv.slice(2), { function start() { console.log("start: copy assets"); const projectPath = path.resolve(__dirname, ".."); - const mcModulePath = "devtools/client/shared/components"; + const mcModulePath = "devtools/client/shared/components/reps"; const mcPath = "./firefox"; - + symlinkTests({ projectPath, mcModulePath }); makeBundle({ From 0fb58e91bea5cc914b338d9bf0e7a19df78e969c Mon Sep 17 00:00:00 2001 From: Julian Descottes Date: Tue, 17 Jan 2017 21:19:54 +0100 Subject: [PATCH 05/11] synchronize tests from mc --- src/test/mochitest/chrome.ini | 23 +- src/test/mochitest/head.js | 162 +----------- src/test/mochitest/test_reps_array.html | 57 ++--- .../mochitest/test_reps_comment-node.html | 5 +- .../mochitest/test_reps_element-node.html | 17 +- src/test/mochitest/test_reps_error.html | 31 ++- src/test/mochitest/test_reps_event.html | 150 +++++++++++- src/test/mochitest/test_reps_failure.html | 60 +++++ src/test/mochitest/test_reps_grip-array.html | 61 +++-- src/test/mochitest/test_reps_grip-map.html | 41 ++-- src/test/mochitest/test_reps_grip.html | 230 ++++++++++++++---- src/test/mochitest/test_reps_object.html | 37 +-- src/test/mochitest/test_reps_promise.html | 31 +-- src/test/mochitest/test_reps_text-node.html | 35 ++- 14 files changed, 550 insertions(+), 390 deletions(-) create mode 100644 src/test/mochitest/test_reps_failure.html diff --git a/src/test/mochitest/chrome.ini b/src/test/mochitest/chrome.ini index 3aa3f65..5f5c14e 100644 --- a/src/test/mochitest/chrome.ini +++ b/src/test/mochitest/chrome.ini @@ -2,11 +2,6 @@ support-files = head.js -[test_frame_01.html] -[test_HSplitBox_01.html] -[test_notification_box_01.html] -[test_notification_box_02.html] -[test_notification_box_03.html] [test_reps_array.html] [test_reps_attribute.html] [test_reps_comment-node.html] @@ -15,6 +10,7 @@ support-files = [test_reps_element-node.html] [test_reps_error.html] [test_reps_event.html] +[test_reps_failure.html] [test_reps_function.html] [test_reps_grip.html] [test_reps_grip-array.html] @@ -34,19 +30,4 @@ support-files = [test_reps_symbol.html] [test_reps_text-node.html] [test_reps_undefined.html] -[test_reps_window.html] -[test_sidebar_toggle.html] -[test_stack-trace.html] -[test_tabs_accessibility.html] -[test_tabs_menu.html] -[test_tree_01.html] -[test_tree_02.html] -[test_tree_03.html] -[test_tree_04.html] -[test_tree_05.html] -[test_tree_06.html] -[test_tree_07.html] -[test_tree_08.html] -[test_tree_09.html] -[test_tree_10.html] -[test_tree_11.html] +[test_reps_window.html] \ No newline at end of file diff --git a/src/test/mochitest/head.js b/src/test/mochitest/head.js index b66b728..3e5d874 100644 --- a/src/test/mochitest/head.js +++ b/src/test/mochitest/head.js @@ -11,16 +11,8 @@ var { require } = Cu.import("resource://devtools/shared/Loader.jsm", {}); var { Assert } = require("resource://testing-common/Assert.jsm"); var { gDevTools } = require("devtools/client/framework/devtools"); var { BrowserLoader } = Cu.import("resource://devtools/client/shared/browser-loader.js", {}); -var promise = require("promise"); -var defer = require("devtools/shared/defer"); -var Services = require("Services"); -var { DebuggerServer } = require("devtools/server/main"); -var { DebuggerClient } = require("devtools/shared/client/main"); -var DevToolsUtils = require("devtools/shared/DevToolsUtils"); var flags = require("devtools/shared/flags"); var { Task } = require("devtools/shared/task"); -var { TargetFactory } = require("devtools/client/framework/target"); -var { Toolbox } = require("devtools/client/framework/toolbox"); flags.testing = true; var { require: browserRequire } = BrowserLoader({ @@ -32,158 +24,6 @@ let ReactDOM = browserRequire("devtools/client/shared/vendor/react-dom"); let React = browserRequire("devtools/client/shared/vendor/react"); var TestUtils = React.addons.TestUtils; -var EXAMPLE_URL = "http://example.com/browser/browser/devtools/shared/test/"; - -function forceRender(comp) { - return setState(comp, {}) - .then(() => setState(comp, {})); -} - -// All tests are asynchronous. -SimpleTest.waitForExplicitFinish(); - -function onNextAnimationFrame(fn) { - return () => - requestAnimationFrame(() => - requestAnimationFrame(fn)); -} - -function setState(component, newState) { - return new Promise(resolve => { - component.setState(newState, onNextAnimationFrame(resolve)); - }); -} - -function setProps(component, newProps) { - return new Promise(resolve => { - component.setProps(newProps, onNextAnimationFrame(resolve)); - }); -} - -function dumpn(msg) { - dump(`SHARED-COMPONENTS-TEST: ${msg}\n`); -} - -/** - * Tree - */ - -var TEST_TREE_INTERFACE = { - getParent: x => TEST_TREE.parent[x], - getChildren: x => TEST_TREE.children[x], - renderItem: (x, depth, focused) => "-".repeat(depth) + x + ":" + focused + "\n", - getRoots: () => ["A", "M"], - getKey: x => "key-" + x, - itemHeight: 1, - onExpand: x => TEST_TREE.expanded.add(x), - onCollapse: x => TEST_TREE.expanded.delete(x), - isExpanded: x => TEST_TREE.expanded.has(x), -}; - -function isRenderedTree(actual, expectedDescription, msg) { - const expected = expectedDescription.map(x => x + "\n").join(""); - dumpn(`Expected tree:\n${expected}`); - dumpn(`Actual tree:\n${actual}`); - is(actual, expected, msg); -} - -// Encoding of the following tree/forest: -// -// A -// |-- B -// | |-- E -// | | |-- K -// | | `-- L -// | |-- F -// | `-- G -// |-- C -// | |-- H -// | `-- I -// `-- D -// `-- J -// M -// `-- N -// `-- O -var TEST_TREE = { - children: { - A: ["B", "C", "D"], - B: ["E", "F", "G"], - C: ["H", "I"], - D: ["J"], - E: ["K", "L"], - F: [], - G: [], - H: [], - I: [], - J: [], - K: [], - L: [], - M: ["N"], - N: ["O"], - O: [] - }, - parent: { - A: null, - B: "A", - C: "A", - D: "A", - E: "B", - F: "B", - G: "B", - H: "C", - I: "C", - J: "D", - K: "E", - L: "E", - M: null, - N: "M", - O: "N" - }, - expanded: new Set(), -}; - -/** - * Frame - */ -function checkFrameString({ - el, file, line, column, source, functionName, shouldLink, tooltip -}) { - let $ = selector => el.querySelector(selector); - - let $func = $(".frame-link-function-display-name"); - let $source = $(".frame-link-source"); - let $sourceInner = $(".frame-link-source-inner"); - let $filename = $(".frame-link-filename"); - let $line = $(".frame-link-line"); - - is($filename.textContent, file, "Correct filename"); - is(el.getAttribute("data-line"), line ? `${line}` : null, "Expected `data-line` found"); - is(el.getAttribute("data-column"), - column ? `${column}` : null, "Expected `data-column` found"); - is($sourceInner.getAttribute("title"), tooltip, "Correct tooltip"); - is($source.tagName, shouldLink ? "A" : "SPAN", "Correct linkable status"); - if (shouldLink) { - is($source.getAttribute("href"), source, "Correct source"); - } - - if (line != null) { - let lineText = `:${line}`; - if (column != null) { - lineText += `:${column}`; - } - - is($line.textContent, lineText, "Correct line number"); - } else { - ok(!$line, "Should not have an element for `line`"); - } - - if (functionName != null) { - is($func.textContent, functionName, "Correct function name"); - } else { - ok(!$func, "Should not have an element for `functionName`"); - } -} - function renderComponent(component, props) { const el = React.createElement(component, props, {}); // By default, renderIntoDocument() won't work for stateless components, but @@ -206,7 +46,7 @@ function shallowRenderComponent(component, props) { */ function testRepRenderModes(modeTests, testName, componentUnderTest, gripStub) { modeTests.forEach(({mode, expectedOutput, message}) => { - const modeString = typeof mode === "undefined" ? "no mode" : mode; + const modeString = typeof mode === "undefined" ? "no mode" : mode.toString(); if (!message) { message = `${testName}: ${modeString} renders correctly.`; } diff --git a/src/test/mochitest/test_reps_array.html b/src/test/mochitest/test_reps_array.html index 6ad7f2c..07a3e4e 100644 --- a/src/test/mochitest/test_reps_array.html +++ b/src/test/mochitest/test_reps_array.html @@ -22,11 +22,12 @@ window.onload = Task.async(function* () { let { Rep } = browserRequire("devtools/client/shared/components/reps/rep"); let { ArrayRep } = browserRequire("devtools/client/shared/components/reps/array"); + const { MODE } = browserRequire("devtools/client/shared/components/reps/constants"); let componentUnderTest = ArrayRep; const maxLength = { short: 3, - long: 300 + long: 10 }; try { @@ -65,15 +66,15 @@ expectedOutput: defaultOutput, }, { - mode: "tiny", + mode: MODE.TINY, expectedOutput: `[]`, }, { - mode: "short", + mode: MODE.SHORT, expectedOutput: defaultOutput, }, { - mode: "long", + mode: MODE.LONG, expectedOutput: defaultOutput, } ]; @@ -91,15 +92,15 @@ expectedOutput: defaultOutput, }, { - mode: "tiny", + mode: MODE.TINY, expectedOutput: `[3]`, }, { - mode: "short", + mode: MODE.SHORT, expectedOutput: defaultOutput, }, { - mode: "long", + mode: MODE.LONG, expectedOutput: defaultOutput, } ]; @@ -117,15 +118,15 @@ expectedOutput: defaultShortOutput, }, { - mode: "tiny", + mode: MODE.TINY, expectedOutput: `[${maxLength.short + 1}]`, }, { - mode: "short", + mode: MODE.SHORT, expectedOutput: defaultShortOutput, }, { - mode: "long", + mode: MODE.LONG, expectedOutput: `[ ${Array(maxLength.short + 1).fill("\"foo\"").join(", ")} ]`, } ]; @@ -144,15 +145,15 @@ expectedOutput: defaultShortOutput, }, { - mode: "tiny", + mode: MODE.TINY, expectedOutput: `[${maxLength.long + 1}]`, }, { - mode: "short", + mode: MODE.SHORT, expectedOutput: defaultShortOutput, }, { - mode: "long", + mode: MODE.LONG, expectedOutput: defaultLongOutput, } ]; @@ -171,15 +172,15 @@ expectedOutput: defaultOutput, }, { - mode: "tiny", + mode: MODE.TINY, expectedOutput: `[2]`, }, { - mode: "short", + mode: MODE.SHORT, expectedOutput: defaultOutput, }, { - mode: "long", + mode: MODE.LONG, expectedOutput: defaultOutput, } ]; @@ -204,15 +205,15 @@ expectedOutput: defaultOutput, }, { - mode: "tiny", + mode: MODE.TINY, expectedOutput: `[1]`, }, { - mode: "short", + mode: MODE.SHORT, expectedOutput: defaultOutput, }, { - mode: "long", + mode: MODE.LONG, expectedOutput: defaultOutput, } ]; @@ -222,14 +223,10 @@ function testArray() { let stub = [ - "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", - "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z" - ]; + "a", "b", "c", "d", "e", "f", "g", "h", "i", "j"]; - const defaultOutput = `[ "a", "b", "c", "d", "e", "f", "g", "h", "i", "j",` + - ` "k", "l", "m", "n", "o", "p", "q", "r", "s", "t",` + - ` "u", "v", "w", "x", "y", "z" ]`; - const shortOutput = `[ "a", "b", "c", 23 more… ]`; + const defaultOutput = `[ "a", "b", "c", "d", "e", "f", "g", "h", "i", "j" ]`; + const shortOutput = `[ "a", "b", "c", 7 more… ]`; const modeTests = [ { @@ -237,15 +234,15 @@ expectedOutput: shortOutput, }, { - mode: "tiny", - expectedOutput: `[26]`, + mode: MODE.TINY, + expectedOutput: `[10]`, }, { - mode: "short", + mode: MODE.SHORT, expectedOutput: shortOutput, }, { - mode: "long", + mode: MODE.LONG, expectedOutput: defaultOutput, } ]; diff --git a/src/test/mochitest/test_reps_comment-node.html b/src/test/mochitest/test_reps_comment-node.html index 4e03d8b..78f5a57 100644 --- a/src/test/mochitest/test_reps_comment-node.html +++ b/src/test/mochitest/test_reps_comment-node.html @@ -22,6 +22,7 @@ try { let { Rep } = browserRequire("devtools/client/shared/components/reps/rep"); let { CommentNode } = browserRequire("devtools/client/shared/components/reps/comment-node"); + const { MODE } = browserRequire("devtools/client/shared/components/reps/constants"); let gripStub = { "type": "object", @@ -55,7 +56,7 @@ // Test tiny rendering. const tinyRenderedComponent = renderComponent(CommentNode.rep, { object: gripStub, - mode: "tiny" + mode: MODE.TINY, }); is(tinyRenderedComponent.textContent, ``, @@ -64,7 +65,7 @@ // Test long rendering. const longRenderedComponent = renderComponent(CommentNode.rep, { object: gripStub, - mode: "long" + mode: MODE.LONG, }); is(longRenderedComponent.textContent, ``, "CommentNode rep has expected text content in long mode"); diff --git a/src/test/mochitest/test_reps_element-node.html b/src/test/mochitest/test_reps_element-node.html index 6c05a36..8713eaf 100644 --- a/src/test/mochitest/test_reps_element-node.html +++ b/src/test/mochitest/test_reps_element-node.html @@ -21,6 +21,7 @@ window.onload = Task.async(function* () { let { Rep } = browserRequire("devtools/client/shared/components/reps/rep"); let { ElementNode } = browserRequire("devtools/client/shared/components/reps/element-node"); + const { MODE } = browserRequire("devtools/client/shared/components/reps/constants"); try { yield testBodyNode(); @@ -51,7 +52,7 @@ "Element node rep has expected text content for body node"); const tinyRenderedComponent = renderComponent( - ElementNode.rep, { object: stub, mode: "tiny" }); + ElementNode.rep, { object: stub, mode: MODE.TINY }); is(tinyRenderedComponent.textContent, `body#body-id.body-class`, "Element node rep has expected text content for body node in tiny mode"); } @@ -67,7 +68,7 @@ "Element node rep has expected text content for document element node"); const tinyRenderedComponent = renderComponent( - ElementNode.rep, { object: stub, mode: "tiny" }); + ElementNode.rep, { object: stub, mode: MODE.TINY }); is(tinyRenderedComponent.textContent, `html`, "Element node rep has expected text content for document element in tiny mode"); } @@ -85,7 +86,7 @@ "Element node rep has expected text content for element node"); const tinyRenderedComponent = renderComponent( - ElementNode.rep, { object: stub, mode: "tiny" }); + ElementNode.rep, { object: stub, mode: MODE.TINY }); is(tinyRenderedComponent.textContent, `input#newtab-customize-button.bar.baz`, "Element node rep has expected text content for element node in tiny mode"); @@ -103,7 +104,7 @@ "Element node rep output element node with the class trailing spaces"); const tinyRenderedComponent = renderComponent( - ElementNode.rep, { object: stub, mode: "tiny" }); + ElementNode.rep, { object: stub, mode: MODE.TINY }); is(tinyRenderedComponent.textContent, `body#nightly-whatsnew.html-ltr`, "Element node rep does not show leading nor trailing spaces " + @@ -118,7 +119,7 @@ "Element node rep has expected text content for element node without attributes"); const tinyRenderedComponent = renderComponent( - ElementNode.rep, { object: stub, mode: "tiny" }); + ElementNode.rep, { object: stub, mode: MODE.TINY }); is(tinyRenderedComponent.textContent, `p`, "Element node rep has expected text content for element node without attributes"); } @@ -133,7 +134,7 @@ "Element node rep has expected text content for node with lots of attributes"); const tinyRenderedComponent = renderComponent( - ElementNode.rep, { object: stub, mode: "tiny" }); + ElementNode.rep, { object: stub, mode: MODE.TINY }); is(tinyRenderedComponent.textContent, `p#lots-of-attributes`, "Element node rep has expected text content for node in tiny mode"); } @@ -151,7 +152,7 @@ "Element node rep has expected text content for SVG element node"); const tinyRenderedComponent = renderComponent( - ElementNode.rep, { object: stub, mode: "tiny" }); + ElementNode.rep, { object: stub, mode: MODE.TINY }); is(tinyRenderedComponent.textContent, `clipPath#clip.svg-element`, "Element node rep has expected text content for SVG element node in tiny mode"); } @@ -169,7 +170,7 @@ "Element node rep has expected text content for XHTML SVG element node"); const tinyRenderedComponent = renderComponent( - ElementNode.rep, { object: stub, mode: "tiny" }); + ElementNode.rep, { object: stub, mode: MODE.TINY }); is(tinyRenderedComponent.textContent, `svg:circle.svg-element`, "Element node rep has expected text content for XHTML SVG element in tiny mode"); } diff --git a/src/test/mochitest/test_reps_error.html b/src/test/mochitest/test_reps_error.html index 07fb1ba..3dea9af 100644 --- a/src/test/mochitest/test_reps_error.html +++ b/src/test/mochitest/test_reps_error.html @@ -21,6 +21,7 @@ window.onload = Task.async(function* () { let { Rep } = browserRequire("devtools/client/shared/components/reps/rep"); let { ErrorRep } = browserRequire("devtools/client/shared/components/reps/error"); + const { MODE } = browserRequire("devtools/client/shared/components/reps/constants"); try { // Test errors with different properties @@ -56,7 +57,8 @@ "@debugger eval code:1:13\n", "Error Rep has expected text content for a simple error"); - const tinyRenderedComponent = renderComponent(ErrorRep.rep, {object: stub, mode: "tiny"}); + const tinyRenderedComponent = renderComponent( + ErrorRep.rep, {object: stub, mode: MODE.TINY}); is(tinyRenderedComponent.textContent, "Error", "Error Rep has expected text content for a simple error in tiny mode"); @@ -87,7 +89,8 @@ "@debugger eval code:8:1\n", "Error Rep has expected text content for an error with a multiple line"); - const tinyRenderedComponent = renderComponent(ErrorRep.rep, {object: stub, mode: "tiny"}); + const tinyRenderedComponent = renderComponent( + ErrorRep.rep, {object: stub, mode: MODE.TINY}); is(tinyRenderedComponent.textContent, "Error", "Error Rep has expected text content for an error with a multiple line in tiny mode"); @@ -104,7 +107,8 @@ "Error: Error message", "Error Rep has expected text content for an error without stacktrace"); - const tinyRenderedComponent = renderComponent(ErrorRep.rep, {object: stub, mode: "tiny"}); + const tinyRenderedComponent = renderComponent( + ErrorRep.rep, {object: stub, mode: MODE.TINY}); is(tinyRenderedComponent.textContent, "Error", "Error Rep has expected text content for an error without stacktrace in tiny mode"); @@ -124,7 +128,8 @@ "@debugger eval code:10:13\n", "Error Rep has expected text content for an EvalError"); - const tinyRenderedComponent = renderComponent(ErrorRep.rep, {object: stub, mode: "tiny"}); + const tinyRenderedComponent = renderComponent( + ErrorRep.rep, {object: stub, mode: MODE.TINY}); is(tinyRenderedComponent.textContent, "EvalError", "Error Rep has expected text content for an EvalError in tiny mode"); @@ -144,7 +149,8 @@ "@debugger eval code:11:13\n", "Error Rep has expected text content for an InternalError"); - const tinyRenderedComponent = renderComponent(ErrorRep.rep, {object: stub, mode: "tiny"}); + const tinyRenderedComponent = renderComponent( + ErrorRep.rep, {object: stub, mode: MODE.TINY}); is(tinyRenderedComponent.textContent, "InternalError", "Error Rep has expected text content for an InternalError in tiny mode"); @@ -164,7 +170,8 @@ "@debugger eval code:12:13\n", "Error Rep has expected text content for RangeError"); - const tinyRenderedComponent = renderComponent(ErrorRep.rep, {object: stub, mode: "tiny"}); + const tinyRenderedComponent = renderComponent( + ErrorRep.rep, {object: stub, mode: MODE.TINY}); is(tinyRenderedComponent.textContent, "RangeError", "Error Rep has expected text content for RangeError in tiny mode"); @@ -184,7 +191,8 @@ "@debugger eval code:13:13\n", "Error Rep has expected text content for ReferenceError"); - const tinyRenderedComponent = renderComponent(ErrorRep.rep, {object: stub, mode: "tiny"}); + const tinyRenderedComponent = renderComponent( + ErrorRep.rep, {object: stub, mode: MODE.TINY}); is(tinyRenderedComponent.textContent, "ReferenceError", "Error Rep has expected text content for ReferenceError in tiny mode"); @@ -204,7 +212,8 @@ "@debugger eval code:14:13\n", "Error Rep has expected text content for SyntaxError"); - const tinyRenderedComponent = renderComponent(ErrorRep.rep, {object: stub, mode: "tiny"}); + const tinyRenderedComponent = renderComponent( + ErrorRep.rep, {object: stub, mode: MODE.TINY}); is(tinyRenderedComponent.textContent, "SyntaxError", "SyntaxError Rep has expected text content for SyntaxError in tiny mode"); @@ -224,7 +233,8 @@ "@debugger eval code:15:13\n", "Error Rep has expected text content for TypeError"); - const tinyRenderedComponent = renderComponent(ErrorRep.rep, {object: stub, mode: "tiny"}); + const tinyRenderedComponent = renderComponent( + ErrorRep.rep, {object: stub, mode: MODE.TINY}); is(tinyRenderedComponent.textContent, "TypeError", "Error Rep has expected text content for a TypeError in tiny mode"); @@ -244,7 +254,8 @@ "@debugger eval code:16:13\n", "Error Rep has expected text content for URIError"); - const tinyRenderedComponent = renderComponent(ErrorRep.rep, {object: stub, mode: "tiny"}); + const tinyRenderedComponent = renderComponent( + ErrorRep.rep, {object: stub, mode: MODE.TINY}); is(tinyRenderedComponent.textContent, "URIError", "Error Rep has expected text content for URIError in tiny mode"); diff --git a/src/test/mochitest/test_reps_event.html b/src/test/mochitest/test_reps_event.html index 7dfe72d..810a2a5 100644 --- a/src/test/mochitest/test_reps_event.html +++ b/src/test/mochitest/test_reps_event.html @@ -19,6 +19,7 @@ window.onload = Task.async(function* () { let { Rep } = browserRequire("devtools/client/shared/components/reps/rep"); let { Event } = browserRequire("devtools/client/shared/components/reps/event"); + const { MODE } = browserRequire("devtools/client/shared/components/reps/constants"); try { // Test that correct rep is chosen @@ -28,7 +29,11 @@ yield testEvent(); yield testMouseEvent(); yield testKeyboardEvent(); + yield testKeyboardEventWithModifiers(); yield testMessageEvent(); + + yield testOnMouseOver(); + yield testOnMouseOut(); } catch(e) { ok(false, "Got an error: " + DevToolsUtils.safeErrorString(e)); } finally { @@ -36,31 +41,116 @@ } function testEvent() { - const renderedComponent = renderComponent(Event.rep, { object: getGripStub("testEvent") }); + const renderedComponent = renderComponent(Event.rep, { + object: getGripStub("testEvent"), + }); is(renderedComponent.textContent, - "Event { isTrusted: true, eventPhase: 2, bubbles: false, 7 more… }", - "Event rep has expected text content for an event"); + "beforeprint { target: http://example.com, isTrusted: true, " + + "currentTarget: http://example.com, 8 more… }", + "Event rep has expected text content for an event"); } function testMouseEvent() { - const renderedComponent = renderComponent(Event.rep, { object: getGripStub("testMouseEvent") }); + const renderedComponent = renderComponent(Event.rep, { + object: getGripStub("testMouseEvent") + }); is(renderedComponent.textContent, - "MouseEvent { clientX: 62, clientY: 18, layerX: 0, 2 more… }", - "Event rep has expected text content for a mouse event"); + "click { target: div#test, clientX: 62, clientY: 18, 3 more… }", + "Event rep has expected text content for a mouse event"); + + const longRenderedComponent = renderComponent(Event.rep, { + object: getGripStub("testMouseEvent"), + mode: MODE.LONG, + }); + is(longRenderedComponent.textContent, + "click { target: div#test, buttons: 0, clientX: 62, clientY: 18, layerX: 0, " + + "layerY: 0 }", + "Event rep has expected text content for a mouse event in long mode"); } function testKeyboardEvent() { - const renderedComponent = renderComponent(Event.rep, { object: getGripStub("testKeyboardEvent") }); + const renderedComponent = renderComponent(Event.rep, { + object: getGripStub("testKeyboardEvent") + }); is(renderedComponent.textContent, - "KeyboardEvent { key: \"Control\", charCode: 0, keyCode: 17 }", + "keyup { target: body, key: \"Control\", charCode: 0, 1 more… }", "Event rep has expected text content for a keyboard event"); + + const longRenderedComponent = renderComponent(Event.rep, { + object: getGripStub("testKeyboardEvent"), + mode: MODE.LONG, + }); + is(longRenderedComponent.textContent, + `keyup { target: body, key: "Control", charCode: 0, keyCode: 17 }`, + "Event rep has expected text content for a keyboard event in long mode"); + } + + function testKeyboardEventWithModifiers() { + const renderedComponent = renderComponent(Event.rep, { + object: getGripStub("testKeyboardEventWithModifiers"), + mode: MODE.LONG, + }); + + is(renderedComponent.textContent, + `keyup Meta-Shift { target: body, key: "M", charCode: 0, keyCode: 77 }`, + "Event rep has expected text content for a keyboard event with modifiers " + + "in long mode"); } function testMessageEvent() { - const renderedComponent = renderComponent(Event.rep, { object: getGripStub("testMessageEvent") }); + const renderedComponent = renderComponent(Event.rep, { + object: getGripStub("testMessageEvent") + }); is(renderedComponent.textContent, - "MessageEvent { isTrusted: false, data: \"test data\", origin: \"null\", 7 more… }", + `message { target: http://example.com, isTrusted: false, data: "test data", ` + + "8 more… }", "Event rep has expected text content for a message event"); + + const longRenderedComponent = renderComponent(Event.rep, { + object: getGripStub("testMessageEvent"), + mode: MODE.LONG, + }); + is(longRenderedComponent.textContent, + `message { target: http://example.com, isTrusted: false, data: "test data", ` + + `origin: "null", lastEventId: "", source: , ports: message, currentTarget: , ` + + `eventPhase: 2, bubbles: false, 1 more… }`, + "Event rep has expected text content for a message event in long mode"); + } + + function testOnMouseOver() { + const stub = getGripStub("testMouseEvent"); + + let mouseOverValue; + let onDOMNodeMouseOver = (object) => { + mouseOverValue = object; + }; + const renderedComponent = renderComponent(Event.rep, { + object: stub, onDOMNodeMouseOver + }); + + const node = renderedComponent.querySelector(".objectBox-node"); + TestUtils.Simulate.mouseOver(node); + + is(mouseOverValue, stub.preview.target, "onDOMNodeMouseOver is called with " + + "the expected argument when mouseover is fired on the Rep"); + } + + function testOnMouseOut() { + const stub = getGripStub("testMouseEvent"); + + let called = false; + let onDOMNodeMouseOut = (object) => { + called = true; + }; + const renderedComponent = renderComponent(Event.rep, { + object: stub, + onDOMNodeMouseOut + }); + + const node = renderedComponent.querySelector(".objectBox-node"); + TestUtils.Simulate.mouseOut(node); + + is(called, true, "onDOMNodeMouseOut is called when mouseout is fired on the Rep"); } function getGripStub(name) { @@ -219,6 +309,44 @@ } }; + case "testKeyboardEventWithModifiers": + return { + "type": "object", + "class": "KeyboardEvent", + "actor": "server1.conn21.obj49", + "extensible": true, + "frozen": false, + "sealed": false, + "ownPropertyLength": 1, + "preview": { + "kind": "DOMEvent", + "type": "keyup", + "properties": { + "key": "M", + "charCode": 0, + "keyCode": 77 + }, + "target": { + "type": "object", + "class": "HTMLBodyElement", + "actor": "server1.conn21.obj50", + "extensible": true, + "frozen": false, + "sealed": false, + "ownPropertyLength": 0, + "preview": { + "kind": "DOMNode", + "nodeType": 1, + "nodeName": "body", + "attributes": {}, + "attributesLength": 0 + } + }, + "eventKind": "key", + "modifiers": ["Meta", "Shift"] + } + }; + case "testMessageEvent": return { "type": "object", @@ -285,7 +413,7 @@ "ownPropertyLength": 760, "preview": { "kind": "ObjectWithURL", - "url": "" + "url": "http://example.com" } } } diff --git a/src/test/mochitest/test_reps_failure.html b/src/test/mochitest/test_reps_failure.html new file mode 100644 index 0000000..4a61f47 --- /dev/null +++ b/src/test/mochitest/test_reps_failure.html @@ -0,0 +1,60 @@ + + + + + + + Rep test - Failure + + + + +
+
+
+
+ + \ No newline at end of file diff --git a/src/test/mochitest/test_reps_grip-array.html b/src/test/mochitest/test_reps_grip-array.html index 64ce4d9..174756c 100644 --- a/src/test/mochitest/test_reps_grip-array.html +++ b/src/test/mochitest/test_reps_grip-array.html @@ -19,11 +19,12 @@ window.onload = Task.async(function* () { let { Rep } = browserRequire("devtools/client/shared/components/reps/rep"); let { GripArray } = browserRequire("devtools/client/shared/components/reps/grip-array"); + const { MODE } = browserRequire("devtools/client/shared/components/reps/constants"); let componentUnderTest = GripArray; const maxLength = { short: 3, - long: 300 + long: 10 }; try { @@ -41,9 +42,7 @@ yield testOnMouseOver(); yield testOnMouseOut(); - - - } catch(e) { + } catch (e) { ok(false, "Got an error: " + DevToolsUtils.safeErrorString(e)); } finally { SimpleTest.finish(); @@ -67,15 +66,15 @@ expectedOutput: defaultOutput, }, { - mode: "tiny", + mode: MODE.TINY, expectedOutput: `[]`, }, { - mode: "short", + mode: MODE.SHORT, expectedOutput: defaultOutput, }, { - mode: "long", + mode: MODE.LONG, expectedOutput: defaultOutput, } ]; @@ -95,15 +94,15 @@ expectedOutput: defaultOutput, }, { - mode: "tiny", + mode: MODE.TINY, expectedOutput: `[3]`, }, { - mode: "short", + mode: MODE.SHORT, expectedOutput: defaultOutput, }, { - mode: "long", + mode: MODE.LONG, expectedOutput: defaultOutput, } ]; @@ -123,15 +122,15 @@ expectedOutput: defaultOutput, }, { - mode: "tiny", + mode: MODE.TINY, expectedOutput: `[${maxLength.short + 1}]`, }, { - mode: "short", + mode: MODE.SHORT, expectedOutput: defaultOutput, }, { - mode: "long", + mode: MODE.LONG, expectedOutput: `Array [ ${Array(maxLength.short + 1).fill("\"test string\"").join(", ")} ]`, } ]; @@ -152,15 +151,15 @@ expectedOutput: defaultShortOutput, }, { - mode: "tiny", + mode: MODE.TINY, expectedOutput: `[${maxLength.long + 1}]`, }, { - mode: "short", + mode: MODE.SHORT, expectedOutput: defaultShortOutput, }, { - mode: "long", + mode: MODE.LONG, expectedOutput: defaultLongOutput } ]; @@ -180,15 +179,15 @@ expectedOutput: defaultOutput, }, { - mode: "tiny", + mode: MODE.TINY, expectedOutput: `[1]`, }, { - mode: "short", + mode: MODE.SHORT, expectedOutput: defaultOutput, }, { - mode: "long", + mode: MODE.LONG, expectedOutput: defaultOutput, } ]; @@ -208,15 +207,15 @@ expectedOutput: shortOutput, }, { - mode: "tiny", + mode: MODE.TINY, expectedOutput: `[11]`, }, { - mode: "short", + mode: MODE.SHORT, expectedOutput: shortOutput, }, { - mode: "long", + mode: MODE.LONG, expectedOutput: defaultOutput, } ]; @@ -235,15 +234,15 @@ expectedOutput: defaultOutput, }, { - mode: "tiny", + mode: MODE.TINY, expectedOutput: `[3]`, }, { - mode: "short", + mode: MODE.SHORT, expectedOutput: defaultOutput, }, { - mode: "long", + mode: MODE.LONG, expectedOutput: defaultOutput, } ]; @@ -262,15 +261,15 @@ expectedOutput: defaultOutput, }, { - mode: "tiny", + mode: MODE.TINY, expectedOutput: `[3]`, }, { - mode: "short", + mode: MODE.SHORT, expectedOutput: defaultOutput, }, { - mode: "long", + mode: MODE.LONG, expectedOutput: defaultOutput, } ]; @@ -294,15 +293,15 @@ expectedOutput: defaultOutput, }, { - mode: "tiny", + mode: MODE.TINY, expectedOutput: `[5]`, }, { - mode: "short", + mode: MODE.SHORT, expectedOutput: defaultOutput, }, { - mode: "long", + mode: MODE.LONG, expectedOutput: longOutput, } ]; diff --git a/src/test/mochitest/test_reps_grip-map.html b/src/test/mochitest/test_reps_grip-map.html index 1847036..52c5950 100644 --- a/src/test/mochitest/test_reps_grip-map.html +++ b/src/test/mochitest/test_reps_grip-map.html @@ -21,6 +21,7 @@ window.onload = Task.async(function* () { let { Rep } = browserRequire("devtools/client/shared/components/reps/rep"); let { GripMap } = browserRequire("devtools/client/shared/components/reps/grip-map"); + const { MODE } = browserRequire("devtools/client/shared/components/reps/constants"); const componentUnderTest = GripMap; @@ -57,15 +58,15 @@ expectedOutput: defaultOutput, }, { - mode: "tiny", + mode: MODE.TINY, expectedOutput: "Map", }, { - mode: "short", + mode: MODE.SHORT, expectedOutput: defaultOutput, }, { - mode: "long", + mode: MODE.LONG, expectedOutput: defaultOutput, } ]; @@ -86,15 +87,15 @@ expectedOutput: defaultOutput, }, { - mode: "tiny", + mode: MODE.TINY, expectedOutput: "Map", }, { - mode: "short", + mode: MODE.SHORT, expectedOutput: defaultOutput, }, { - mode: "long", + mode: MODE.LONG, expectedOutput: defaultOutput, } ]; @@ -120,15 +121,15 @@ expectedOutput: defaultOutput, }, { - mode: "tiny", + mode: MODE.TINY, expectedOutput: "WeakMap", }, { - mode: "short", + mode: MODE.SHORT, expectedOutput: defaultOutput, }, { - mode: "long", + mode: MODE.LONG, expectedOutput: defaultOutput, } ]; @@ -149,15 +150,15 @@ expectedOutput: defaultOutput, }, { - mode: "tiny", + mode: MODE.TINY, expectedOutput: "Map", }, { - mode: "short", + mode: MODE.SHORT, expectedOutput: defaultOutput, }, { - mode: "long", + mode: MODE.LONG, expectedOutput: defaultOutput, } ]; @@ -174,8 +175,8 @@ `Map { key-0: "value-0", key-1: "value-1", key-2: "value-2", 98 more… }`; // Generate string with 101 entries, which is the max limit for 'long' mode. - let longString = Array.from({length: 100}).map((_, i) => `key-${i}: "value-${i}"`); - const longOutput = `Map { ${longString.join(", ")}, 1 more… }`; + let longString = Array.from({length: 10}).map((_, i) => `key-${i}: "value-${i}"`); + const longOutput = `Map { ${longString.join(", ")}, 91 more… }`; const modeTests = [ { @@ -183,15 +184,15 @@ expectedOutput: defaultOutput, }, { - mode: "tiny", + mode: MODE.TINY, expectedOutput: `Map`, }, { - mode: "short", + mode: MODE.SHORT, expectedOutput: defaultOutput, }, { - mode: "long", + mode: MODE.LONG, expectedOutput: longOutput, } ]; @@ -215,15 +216,15 @@ expectedOutput: defaultOutput, }, { - mode: "tiny", + mode: MODE.TINY, expectedOutput: `Map`, }, { - mode: "short", + mode: MODE.SHORT, expectedOutput: defaultOutput, }, { - mode: "long", + mode: MODE.LONG, expectedOutput: longOutput, } ]; diff --git a/src/test/mochitest/test_reps_grip.html b/src/test/mochitest/test_reps_grip.html index 15d4e1d..ff9f2f5 100644 --- a/src/test/mochitest/test_reps_grip.html +++ b/src/test/mochitest/test_reps_grip.html @@ -19,6 +19,7 @@ window.onload = Task.async(function* () { let { Rep } = browserRequire("devtools/client/shared/components/reps/rep"); let { Grip } = browserRequire("devtools/client/shared/components/reps/grip"); + const { MODE } = browserRequire("devtools/client/shared/components/reps/constants"); const componentUnderTest = Grip; @@ -30,6 +31,7 @@ yield testProxy(); yield testArrayBuffer(); yield testSharedArrayBuffer(); + yield testApplicationCache(); // Test property iterator yield testMaxProps(); @@ -67,15 +69,15 @@ expectedOutput: defaultOutput, }, { - mode: "tiny", + mode: MODE.TINY, expectedOutput: `Object`, }, { - mode: "short", + mode: MODE.SHORT, expectedOutput: defaultOutput, }, { - mode: "long", + mode: MODE.LONG, expectedOutput: defaultOutput, } ]; @@ -101,15 +103,15 @@ expectedOutput: defaultOutput, }, { - mode: "tiny", + mode: MODE.TINY, expectedOutput: `Boolean`, }, { - mode: "short", + mode: MODE.SHORT, expectedOutput: defaultOutput, }, { - mode: "long", + mode: MODE.LONG, expectedOutput: defaultOutput, } ]; @@ -135,15 +137,15 @@ expectedOutput: defaultOutput, }, { - mode: "tiny", + mode: MODE.TINY, expectedOutput: `Number`, }, { - mode: "short", + mode: MODE.SHORT, expectedOutput: defaultOutput, }, { - mode: "long", + mode: MODE.LONG, expectedOutput: defaultOutput, } ]; @@ -169,15 +171,15 @@ expectedOutput: defaultOutput, }, { - mode: "tiny", + mode: MODE.TINY, expectedOutput: `String`, }, { - mode: "short", + mode: MODE.SHORT, expectedOutput: defaultOutput, }, { - mode: "long", + mode: MODE.LONG, expectedOutput: defaultOutput, } ]; @@ -203,15 +205,15 @@ expectedOutput: defaultOutput, }, { - mode: "tiny", + mode: MODE.TINY, expectedOutput: `Proxy`, }, { - mode: "short", + mode: MODE.SHORT, expectedOutput: defaultOutput, }, { - mode: "long", + mode: MODE.LONG, expectedOutput: defaultOutput, } ]; @@ -237,15 +239,15 @@ expectedOutput: defaultOutput, }, { - mode: "tiny", + mode: MODE.TINY, expectedOutput: `ArrayBuffer`, }, { - mode: "short", + mode: MODE.SHORT, expectedOutput: defaultOutput, }, { - mode: "long", + mode: MODE.LONG, expectedOutput: defaultOutput, } ]; @@ -271,15 +273,15 @@ expectedOutput: defaultOutput, }, { - mode: "tiny", + mode: MODE.TINY, expectedOutput: `SharedArrayBuffer`, }, { - mode: "short", + mode: MODE.SHORT, expectedOutput: defaultOutput, }, { - mode: "long", + mode: MODE.LONG, expectedOutput: defaultOutput, } ]; @@ -287,6 +289,43 @@ testRepRenderModes(modeTests, testName, componentUnderTest, getGripStub(testName)); } + function testApplicationCache() { + // Test object: `window.applicationCache` + const testName = "testApplicationCache"; + + // Test that correct rep is chosen + const gripStub = getGripStub(testName); + const renderedRep = shallowRenderComponent(Rep, { object: gripStub }); + is(renderedRep.type, Grip.rep, `Rep correctly selects ${Grip.rep.displayName}`); + + // Test rendering + const defaultOutput = + "OfflineResourceList { status: 0, onchecking: null, onerror: null, 7 more… }"; + + const modeTests = [ + { + mode: undefined, + expectedOutput: defaultOutput, + }, + { + mode: MODE.TINY, + expectedOutput: "OfflineResourceList", + }, + { + mode: MODE.SHORT, + expectedOutput: defaultOutput, + }, + { + mode: MODE.LONG, + expectedOutput: "OfflineResourceList { status: 0, onchecking: null, " + + "onerror: null, onnoupdate: null, ondownloading: null, onprogress: null, " + + "onupdateready: null, oncached: null, onobsolete: null, mozItems: [] }", + } + ]; + + testRepRenderModes(modeTests, testName, componentUnderTest, getGripStub(testName)); + } + function testMaxProps() { // Test object: `{a: "a", b: "b", c: "c"}`; const testName = "testMaxProps"; @@ -299,15 +338,15 @@ expectedOutput: defaultOutput, }, { - mode: "tiny", + mode: MODE.TINY, expectedOutput: `Object`, }, { - mode: "short", + mode: MODE.SHORT, expectedOutput: defaultOutput, }, { - mode: "long", + mode: MODE.LONG, expectedOutput: defaultOutput, } ]; @@ -321,14 +360,13 @@ const defaultOutput = `Object { p0: "0", p1: "1", p2: "2", 98 more… }`; - // Generate string with 100 properties, which is the max limit - // for 'long' mode. - let props = ""; - for (let i = 0; i < 100; i++) { - props += "p" + i + ": \"" + i + "\", "; + // Generate string with 10 properties, which is the max limit for 'long' mode. + let props = []; + for (let i = 0; i < 10; i++) { + props.push(`p${i}: "${i}"`); } - const longOutput = `Object { ${props}1 more… }`; + const longOutput = `Object { ${props.join(", ")}, 91 more… }`; const modeTests = [ { @@ -336,15 +374,15 @@ expectedOutput: defaultOutput, }, { - mode: "tiny", + mode: MODE.TINY, expectedOutput: `Object`, }, { - mode: "short", + mode: MODE.SHORT, expectedOutput: defaultOutput, }, { - mode: "long", + mode: MODE.LONG, expectedOutput: longOutput, } ]; @@ -377,15 +415,15 @@ expectedOutput: defaultOutput, }, { - mode: "tiny", + mode: MODE.TINY, expectedOutput: `Object`, }, { - mode: "short", + mode: MODE.SHORT, expectedOutput: defaultOutput, }, { - mode: "long", + mode: MODE.LONG, expectedOutput: defaultOutput, } ]; @@ -405,15 +443,15 @@ expectedOutput: defaultOutput, }, { - mode: "tiny", + mode: MODE.TINY, expectedOutput: `Object`, }, { - mode: "short", + mode: MODE.SHORT, expectedOutput: defaultOutput, }, { - mode: "long", + mode: MODE.LONG, expectedOutput: defaultOutput, } ]; @@ -433,15 +471,15 @@ expectedOutput: defaultOutput, }, { - mode: "tiny", + mode: MODE.TINY, expectedOutput: `Object`, }, { - mode: "short", + mode: MODE.SHORT, expectedOutput: defaultOutput, }, { - mode: "long", + mode: MODE.LONG, expectedOutput: defaultOutput, } ]; @@ -462,15 +500,15 @@ expectedOutput: defaultOutput, }, { - mode: "tiny", + mode: MODE.TINY, expectedOutput: `Object`, }, { - mode: "short", + mode: MODE.SHORT, expectedOutput: defaultOutput, }, { - mode: "long", + mode: MODE.LONG, expectedOutput: longOutput, } ]; @@ -878,6 +916,108 @@ } } }; + case "testApplicationCache": + return { + "type": "object", + "actor": "server2.conn1.child2/obj45", + "class": "OfflineResourceList", + "ownPropertyLength": 0, + "preview": { + "kind": "Object", + "ownProperties": {}, + "ownPropertiesLength": 0, + "safeGetterValues": { + "status": { + "getterValue": 0, + "getterPrototypeLevel": 1, + "enumerable": true, + "writable": true + }, + "onchecking": { + "getterValue": { + "type": "null" + }, + "getterPrototypeLevel": 1, + "enumerable": true, + "writable": true + }, + "onerror": { + "getterValue": { + "type": "null" + }, + "getterPrototypeLevel": 1, + "enumerable": true, + "writable": true + }, + "onnoupdate": { + "getterValue": { + "type": "null" + }, + "getterPrototypeLevel": 1, + "enumerable": true, + "writable": true + }, + "ondownloading": { + "getterValue": { + "type": "null" + }, + "getterPrototypeLevel": 1, + "enumerable": true, + "writable": true + }, + "onprogress": { + "getterValue": { + "type": "null" + }, + "getterPrototypeLevel": 1, + "enumerable": true, + "writable": true + }, + "onupdateready": { + "getterValue": { + "type": "null" + }, + "getterPrototypeLevel": 1, + "enumerable": true, + "writable": true + }, + "oncached": { + "getterValue": { + "type": "null" + }, + "getterPrototypeLevel": 1, + "enumerable": true, + "writable": true + }, + "onobsolete": { + "getterValue": { + "type": "null" + }, + "getterPrototypeLevel": 1, + "enumerable": true, + "writable": true + }, + "mozItems": { + "getterValue": { + "type": "object", + "actor": "server2.conn1.child2/obj46", + "class": "DOMStringList", + "extensible": true, + "frozen": false, + "sealed": false, + "ownPropertyLength": 0, + "preview": { + "kind": "ArrayLike", + "length": 0 + } + }, + "getterPrototypeLevel": 1, + "enumerable": true, + "writable": true + } + } + } + }; } } }); diff --git a/src/test/mochitest/test_reps_object.html b/src/test/mochitest/test_reps_object.html index c333236..7a7c877 100644 --- a/src/test/mochitest/test_reps_object.html +++ b/src/test/mochitest/test_reps_object.html @@ -19,6 +19,7 @@ window.onload = Task.async(function* () { let { Rep } = browserRequire("devtools/client/shared/components/reps/rep"); let { Obj } = browserRequire("devtools/client/shared/components/reps/object"); + const { MODE } = browserRequire("devtools/client/shared/components/reps/constants"); const componentUnderTest = Obj; @@ -57,15 +58,15 @@ expectedOutput: defaultOutput, }, { - mode: "tiny", + mode: MODE.TINY, expectedOutput: defaultOutput, }, { - mode: "short", + mode: MODE.SHORT, expectedOutput: defaultOutput, }, { - mode: "long", + mode: MODE.LONG, expectedOutput: defaultOutput, } ]; @@ -85,15 +86,15 @@ expectedOutput: defaultOutput, }, { - mode: "tiny", + mode: MODE.TINY, expectedOutput: `Object`, }, { - mode: "short", + mode: MODE.SHORT, expectedOutput: defaultOutput, }, { - mode: "long", + mode: MODE.LONG, expectedOutput: defaultOutput, } ]; @@ -114,15 +115,15 @@ expectedOutput: defaultOutput, }, { - mode: "tiny", + mode: MODE.TINY, expectedOutput: `Object`, }, { - mode: "short", + mode: MODE.SHORT, expectedOutput: defaultOutput, }, { - mode: "long", + mode: MODE.LONG, expectedOutput: defaultOutput, } ]; @@ -140,15 +141,15 @@ expectedOutput: defaultOutput, }, { - mode: "tiny", + mode: MODE.TINY, expectedOutput: `Object`, }, { - mode: "short", + mode: MODE.SHORT, expectedOutput: defaultOutput, }, { - mode: "long", + mode: MODE.LONG, expectedOutput: defaultOutput, } ]; @@ -173,15 +174,15 @@ expectedOutput: defaultOutput, }, { - mode: "tiny", + mode: MODE.TINY, expectedOutput: `Object`, }, { - mode: "short", + mode: MODE.SHORT, expectedOutput: defaultOutput, }, { - mode: "long", + mode: MODE.LONG, expectedOutput: defaultOutput, } ]; @@ -204,15 +205,15 @@ expectedOutput: defaultOutput, }, { - mode: "tiny", + mode: MODE.TINY, expectedOutput: `Object`, }, { - mode: "short", + mode: MODE.SHORT, expectedOutput: defaultOutput, }, { - mode: "long", + mode: MODE.LONG, expectedOutput: defaultOutput, } ]; diff --git a/src/test/mochitest/test_reps_promise.html b/src/test/mochitest/test_reps_promise.html index 31de713..111b974 100644 --- a/src/test/mochitest/test_reps_promise.html +++ b/src/test/mochitest/test_reps_promise.html @@ -21,6 +21,7 @@ window.onload = Task.async(function* () { let { Rep } = browserRequire("devtools/client/shared/components/reps/rep"); let { PromiseRep } = browserRequire("devtools/client/shared/components/reps/promise"); + const { MODE } = browserRequire("devtools/client/shared/components/reps/constants"); const componentUnderTest = PromiseRep; @@ -54,15 +55,15 @@ expectedOutput: defaultOutput, }, { - mode: "tiny", + mode: MODE.TINY, expectedOutput: `Promise { "pending" }`, }, { - mode: "short", + mode: MODE.SHORT, expectedOutput: defaultOutput, }, { - mode: "long", + mode: MODE.LONG, expectedOutput: defaultOutput, } ]; @@ -88,15 +89,15 @@ expectedOutput: defaultOutput, }, { - mode: "tiny", + mode: MODE.TINY, expectedOutput: `Promise { "fulfilled" }`, }, { - mode: "short", + mode: MODE.SHORT, expectedOutput: defaultOutput, }, { - mode: "long", + mode: MODE.LONG, expectedOutput: defaultOutput, } ]; @@ -122,15 +123,15 @@ expectedOutput: defaultOutput, }, { - mode: "tiny", + mode: MODE.TINY, expectedOutput: `Promise { "fulfilled" }`, }, { - mode: "short", + mode: MODE.SHORT, expectedOutput: defaultOutput, }, { - mode: "long", + mode: MODE.LONG, expectedOutput: defaultOutput, } ]; @@ -157,15 +158,15 @@ expectedOutput: defaultOutput, }, { - mode: "tiny", + mode: MODE.TINY, expectedOutput: `Promise { "fulfilled" }`, }, { - mode: "short", + mode: MODE.SHORT, expectedOutput: defaultOutput, }, { - mode: "long", + mode: MODE.LONG, expectedOutput: defaultOutput, } ]; @@ -192,15 +193,15 @@ expectedOutput: defaultOutput, }, { - mode: "tiny", + mode: MODE.TINY, expectedOutput: `Promise { "fulfilled" }`, }, { - mode: "short", + mode: MODE.SHORT, expectedOutput: defaultOutput, }, { - mode: "long", + mode: MODE.LONG, expectedOutput: defaultOutput, } ]; diff --git a/src/test/mochitest/test_reps_text-node.html b/src/test/mochitest/test_reps_text-node.html index d26d1fb..201adcd 100644 --- a/src/test/mochitest/test_reps_text-node.html +++ b/src/test/mochitest/test_reps_text-node.html @@ -21,6 +21,7 @@ window.onload = Task.async(function* () { let { Rep } = browserRequire("devtools/client/shared/components/reps/rep"); let { TextNode } = browserRequire("devtools/client/shared/components/reps/text-node"); + const { MODE } = browserRequire("devtools/client/shared/components/reps/constants"); let gripStubs = new Map(); gripStubs.set("testRendering", { @@ -60,25 +61,24 @@ function testRendering() { const stub = gripStubs.get("testRendering"); - const defaultShortOutput = `"hello world"`; - const defaultLongOutput = `;`; + const defaultOutput = `#text "hello world"`; const modeTests = [ { mode: undefined, - expectedOutput: defaultShortOutput, + expectedOutput: defaultOutput, }, { - mode: "tiny", - expectedOutput: defaultShortOutput, + mode: MODE.TINY, + expectedOutput: "#text", }, { - mode: "short", - expectedOutput: defaultShortOutput, + mode: MODE.SHORT, + expectedOutput: defaultOutput, }, { - mode: "long", - expectedOutput: defaultLongOutput, + mode: MODE.LONG, + expectedOutput: defaultOutput, } ]; @@ -87,25 +87,24 @@ function testRenderingWithEOL() { const stub = gripStubs.get("testRenderingWithEOL"); - const defaultShortOutput = `"hello\nworld"`; - const defaultLongOutput = `;`; + const defaultOutput = `#text "hello\nworld"`; const modeTests = [ { mode: undefined, - expectedOutput: defaultShortOutput, + expectedOutput: defaultOutput, }, { - mode: "tiny", - expectedOutput: defaultShortOutput, + mode: MODE.TINY, + expectedOutput: "#text", }, { - mode: "short", - expectedOutput: defaultShortOutput, + mode: MODE.SHORT, + expectedOutput: defaultOutput, }, { - mode: "long", - expectedOutput: defaultLongOutput, + mode: MODE.LONG, + expectedOutput: defaultOutput, } ]; From ff9765a161bc91e05f2fc6a6d4d6bfa087db0fb7 Mon Sep 17 00:00:00 2001 From: Julian Descottes Date: Tue, 17 Jan 2017 21:42:56 +0100 Subject: [PATCH 06/11] update mc path in publish assets --- bin/publish-assets.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bin/publish-assets.js b/bin/publish-assets.js index 16a4790..a60b0fa 100644 --- a/bin/publish-assets.js +++ b/bin/publish-assets.js @@ -4,7 +4,7 @@ const path = require("path"); function start() { console.log("start: publish assets"); const projectPath = path.resolve(__dirname, ".."); - const mcModulePath = "devtools/client/debugger/new"; + const mcModulePath = "devtools/client/shared/components/reps"; copyFile( path.resolve(projectPath, "src/test/mochitest"), From 9abc9d53230c28588eed2160eaabd1ed1330516c Mon Sep 17 00:00:00 2001 From: Julian Descottes Date: Tue, 17 Jan 2017 21:44:50 +0100 Subject: [PATCH 07/11] add load-reps to reps/ --- src/reps/load-reps.js | 46 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 46 insertions(+) create mode 100644 src/reps/load-reps.js diff --git a/src/reps/load-reps.js b/src/reps/load-reps.js new file mode 100644 index 0000000..5af6ea6 --- /dev/null +++ b/src/reps/load-reps.js @@ -0,0 +1,46 @@ +/* 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"; + +// Make this available to both AMD and CJS environments +define(function (require, exports, module) { + let Rep; + let StringRep; + let Grip; + let MODE; + let createFactories; + let parseURLEncodedText; + let parseURLParams; + + // useRepsBundle hardcoded to false while we experiment with the reps bundle in + // bugs 1325401 and 1330779. Set it to true to test devtools using the reps bundle. + let useRepsBundle = false; + if (useRepsBundle) { + const bundle = require("devtools/client/shared/components/reps/reps"); + const { createFactory } = require("devtools/client/shared/vendor/react"); + Rep = createFactory(bundle.Rep); + StringRep = createFactory(bundle.StringRep); + Grip = createFactory(bundle.Grip); + MODE = bundle.MODE; + createFactories = bundle.createFactories; + parseURLEncodedText = bundle.parseURLEncodedText; + parseURLParams = bundle.parseURLParams; + } else { + ({ createFactories, parseURLEncodedText, parseURLParams } = + require("devtools/client/shared/components/reps/rep-utils")); + Rep = createFactories(require("devtools/client/shared/components/reps/rep")).Rep; + StringRep = createFactories(require("devtools/client/shared/components/reps/string").StringRep).rep; + Grip = require("devtools/client/shared/components/reps/grip").Grip; + MODE = require("devtools/client/shared/components/reps/constants").MODE; + } + + exports.Rep = Rep; + exports.StringRep = StringRep; + exports.Grip = Grip; + exports.MODE = MODE; + exports.createFactories = createFactories; + exports.parseURLEncodedText = parseURLEncodedText; + exports.parseURLParams = parseURLParams; +}); From bd2296c229cde54c5d1614f598f9b65dd02d8e9e Mon Sep 17 00:00:00 2001 From: Julian Descottes Date: Tue, 17 Jan 2017 22:57:07 +0100 Subject: [PATCH 08/11] update bundle exports to be compatible with latest mc changes --- src/index.js | 8 ++----- src/launchpad/components/Result.js | 2 +- src/reps/rep.js | 34 +++++++++++++++++++++++++++++- 3 files changed, 36 insertions(+), 8 deletions(-) diff --git a/src/index.js b/src/index.js index c41a473..2ed909b 100644 --- a/src/index.js +++ b/src/index.js @@ -1,15 +1,11 @@ const React = require("react"); const { MODE } = require("./reps/constants"); -const Rep = React.createFactory(require("./reps/rep")); -const StringRep = React.createFactory(require("./reps/string").rep); -const Grip = require("./reps/grip"); +const { REPS } = require("./reps/rep"); const { createFactories, parseURLEncodedText, parseURLParams } = require("./reps/rep-utils"); module.exports = { - Rep, - StringRep, - Grip, + REPS, MODE, createFactories, parseURLEncodedText, diff --git a/src/launchpad/components/Result.js b/src/launchpad/components/Result.js index c31e775..dc7e9de 100644 --- a/src/launchpad/components/Result.js +++ b/src/launchpad/components/Result.js @@ -2,7 +2,7 @@ const React = require("react"); const { DOM: dom, PropTypes, createFactory } = React; const { MODE } = require("../../reps/constants"); -const Rep = createFactory(require("../../reps/rep")); +const Rep = createFactory(require("../../reps/rep").Rep); const Grip = require("../../reps/grip"); const Result = React.createClass({ diff --git a/src/reps/rep.js b/src/reps/rep.js index 8cebca6..c7566ad 100644 --- a/src/reps/rep.js +++ b/src/reps/rep.js @@ -132,4 +132,36 @@ function getRep(object, defaultRep = Obj) { return React.createFactory(defaultRep.rep); } -module.exports = Rep; +module.exports = { + Rep, + REPS: { + ArrayRep, + Attribute, + CommentNode, + DateTime, + Document, + ElementNode, + ErrorRep, + Event, + Func, + Grip, + GripArray, + GripMap, + InfinityRep, + LongStringRep, + NaNRep, + Null, + Number, + ObjectWithText, + ObjectWithURL, + PromiseRep, + RegExp, + Rep, + StringRep, + StyleSheet, + SymbolRep, + TextNode, + Undefined, + Window, + } +}; From bbc511db342b0a264a5e383e2ab52f8209998dc3 Mon Sep 17 00:00:00 2001 From: Julian Descottes Date: Wed, 18 Jan 2017 17:42:04 +0100 Subject: [PATCH 09/11] migrate reps tests to use load-reps --- src/reps/rep.js | 1 + src/test/mochitest/test_reps_array.html | 5 ++--- src/test/mochitest/test_reps_attribute.html | 4 ++-- src/test/mochitest/test_reps_comment-node.html | 5 ++--- src/test/mochitest/test_reps_date-time.html | 4 ++-- src/test/mochitest/test_reps_document.html | 4 ++-- src/test/mochitest/test_reps_element-node.html | 5 ++--- src/test/mochitest/test_reps_error.html | 5 ++--- src/test/mochitest/test_reps_event.html | 5 ++--- src/test/mochitest/test_reps_failure.html | 5 ++--- src/test/mochitest/test_reps_function.html | 4 ++-- src/test/mochitest/test_reps_grip-array.html | 5 ++--- src/test/mochitest/test_reps_grip-map.html | 5 ++--- src/test/mochitest/test_reps_grip.html | 5 ++--- src/test/mochitest/test_reps_infinity.html | 4 ++-- src/test/mochitest/test_reps_long-string.html | 4 ++-- src/test/mochitest/test_reps_nan.html | 4 ++-- src/test/mochitest/test_reps_null.html | 4 ++-- src/test/mochitest/test_reps_number.html | 4 ++-- src/test/mochitest/test_reps_object-with-text.html | 4 ++-- src/test/mochitest/test_reps_object-with-url.html | 5 +++-- src/test/mochitest/test_reps_object.html | 5 ++--- src/test/mochitest/test_reps_promise.html | 5 ++--- src/test/mochitest/test_reps_regexp.html | 4 ++-- src/test/mochitest/test_reps_string.html | 4 ++-- src/test/mochitest/test_reps_stylesheet.html | 4 ++-- src/test/mochitest/test_reps_symbol.html | 4 ++-- src/test/mochitest/test_reps_text-node.html | 5 ++--- src/test/mochitest/test_reps_undefined.html | 4 ++-- src/test/mochitest/test_reps_window.html | 5 +++-- 30 files changed, 61 insertions(+), 70 deletions(-) diff --git a/src/reps/rep.js b/src/reps/rep.js index c7566ad..ab84da9 100644 --- a/src/reps/rep.js +++ b/src/reps/rep.js @@ -152,6 +152,7 @@ module.exports = { NaNRep, Null, Number, + Obj, ObjectWithText, ObjectWithURL, PromiseRep, diff --git a/src/test/mochitest/test_reps_array.html b/src/test/mochitest/test_reps_array.html index 07a3e4e..24fb11e 100644 --- a/src/test/mochitest/test_reps_array.html +++ b/src/test/mochitest/test_reps_array.html @@ -20,9 +20,8 @@ /* import-globals-from head.js */ window.onload = Task.async(function* () { - let { Rep } = browserRequire("devtools/client/shared/components/reps/rep"); - let { ArrayRep } = browserRequire("devtools/client/shared/components/reps/array"); - const { MODE } = browserRequire("devtools/client/shared/components/reps/constants"); + const { REPS, MODE } = browserRequire("devtools/client/shared/components/reps/load-reps"); + let { Rep, ArrayRep } = REPS; let componentUnderTest = ArrayRep; const maxLength = { diff --git a/src/test/mochitest/test_reps_attribute.html b/src/test/mochitest/test_reps_attribute.html index aa8a5df..a19a868 100644 --- a/src/test/mochitest/test_reps_attribute.html +++ b/src/test/mochitest/test_reps_attribute.html @@ -18,8 +18,8 @@