diff options
Diffstat (limited to 'devtools/client/framework/test/node/components')
-rw-r--r-- | devtools/client/framework/test/node/components/__snapshots__/debug-target-info.test.js.snap | 586 | ||||
-rw-r--r-- | devtools/client/framework/test/node/components/debug-target-info.test.js | 319 |
2 files changed, 905 insertions, 0 deletions
diff --git a/devtools/client/framework/test/node/components/__snapshots__/debug-target-info.test.js.snap b/devtools/client/framework/test/node/components/__snapshots__/debug-target-info.test.js.snap new file mode 100644 index 0000000000..0f6b1c9bab --- /dev/null +++ b/devtools/client/framework/test/node/components/__snapshots__/debug-target-info.test.js.snap @@ -0,0 +1,586 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`DebugTargetInfo component Connection info renders the expected snapshot for USB Release target 1`] = ` +<header + className="debug-target-info qa-debug-target-info" +> + <span + className="iconized-label qa-connection-info" + > + <img + alt="usb icon" + src="chrome://devtools/skin/images/aboutdebugging-usb-icon.svg" + /> + toolbox.debugTargetInfo.connection.usb + </span> + <span + className="iconized-label qa-runtime-info" + > + <img + className="channel-icon qa-runtime-icon" + src="chrome://devtools/skin/images/aboutdebugging-firefox-release.svg" + /> + <b + className="devtools-ellipsis-text" + > + toolbox.debugTargetInfo.runtimeLabel-usbRuntimeBrandName-1.0.0 + </b> + <span + className="devtools-ellipsis-text" + > + usbDeviceName + </span> + </span> + <span + className="iconized-label debug-target-title" + > + <img + alt="toolbox.debugTargetInfo.targetType.tab" + src="chrome://devtools/skin/images/globe.svg" + /> + <b + className="devtools-ellipsis-text qa-target-title" + > + Test Tab Name + </b> + </span> + <div + className="debug-target-navigation" + > + <button + className="iconized-label navigation-button qa-back-button" + onClick={[Function]} + title="toolbox.debugTargetInfo.back" + > + <img + alt="toolbox.debugTargetInfo.back" + src="chrome://browser/skin/back.svg" + /> + </button> + <button + className="iconized-label navigation-button qa-forward-button" + onClick={[Function]} + title="toolbox.debugTargetInfo.forward" + > + <img + alt="toolbox.debugTargetInfo.forward" + src="chrome://browser/skin/forward.svg" + /> + </button> + <button + className="iconized-label navigation-button qa-reload-button" + onClick={[Function]} + title="toolbox.debugTargetInfo.reload" + > + <img + alt="toolbox.debugTargetInfo.reload" + src="chrome://global/skin/icons/reload.svg" + /> + </button> + </div> + <span + className="debug-target-url" + > + <form + className="debug-target-url-form" + onSubmit={[Function]} + > + <input + className="devtools-textinput debug-target-url-input" + defaultValue="http://some.target/url" + onChange={[Function]} + onFocus={[Function]} + /> + </form> + </span> +</header> +`; + +exports[`DebugTargetInfo component Target icon renders the expected snapshot for a process target 1`] = ` +<header + className="debug-target-info qa-debug-target-info" +> + <span + className="iconized-label qa-connection-info" + > + <img + alt="usb icon" + src="chrome://devtools/skin/images/aboutdebugging-usb-icon.svg" + /> + toolbox.debugTargetInfo.connection.usb + </span> + <span + className="iconized-label qa-runtime-info" + > + <img + className="channel-icon qa-runtime-icon" + src="chrome://devtools/skin/images/aboutdebugging-firefox-release.svg" + /> + <b + className="devtools-ellipsis-text" + > + toolbox.debugTargetInfo.runtimeLabel-usbRuntimeBrandName-1.0.0 + </b> + <span + className="devtools-ellipsis-text" + > + usbDeviceName + </span> + </span> + <span + className="iconized-label debug-target-title" + > + <img + alt="toolbox.debugTargetInfo.targetType.process" + src="chrome://devtools/skin/images/settings.svg" + /> + <b + className="devtools-ellipsis-text qa-target-title" + > + Test Tab Name + </b> + </span> + <span + className="debug-target-url" + > + <span + className="debug-target-url-readonly devtools-ellipsis-text" + > + http://some.target/url + </span> + </span> +</header> +`; + +exports[`DebugTargetInfo component Target icon renders the expected snapshot for a tab target 1`] = ` +<header + className="debug-target-info qa-debug-target-info" +> + <span + className="iconized-label qa-connection-info" + > + <img + alt="usb icon" + src="chrome://devtools/skin/images/aboutdebugging-usb-icon.svg" + /> + toolbox.debugTargetInfo.connection.usb + </span> + <span + className="iconized-label qa-runtime-info" + > + <img + className="channel-icon qa-runtime-icon" + src="chrome://devtools/skin/images/aboutdebugging-firefox-release.svg" + /> + <b + className="devtools-ellipsis-text" + > + toolbox.debugTargetInfo.runtimeLabel-usbRuntimeBrandName-1.0.0 + </b> + <span + className="devtools-ellipsis-text" + > + usbDeviceName + </span> + </span> + <span + className="iconized-label debug-target-title" + > + <img + alt="toolbox.debugTargetInfo.targetType.tab" + src="chrome://devtools/skin/images/globe.svg" + /> + <b + className="devtools-ellipsis-text qa-target-title" + > + Test Tab Name + </b> + </span> + <div + className="debug-target-navigation" + > + <button + className="iconized-label navigation-button qa-back-button" + onClick={[Function]} + title="toolbox.debugTargetInfo.back" + > + <img + alt="toolbox.debugTargetInfo.back" + src="chrome://browser/skin/back.svg" + /> + </button> + <button + className="iconized-label navigation-button qa-forward-button" + onClick={[Function]} + title="toolbox.debugTargetInfo.forward" + > + <img + alt="toolbox.debugTargetInfo.forward" + src="chrome://browser/skin/forward.svg" + /> + </button> + <button + className="iconized-label navigation-button qa-reload-button" + onClick={[Function]} + title="toolbox.debugTargetInfo.reload" + > + <img + alt="toolbox.debugTargetInfo.reload" + src="chrome://global/skin/icons/reload.svg" + /> + </button> + </div> + <span + className="debug-target-url" + > + <form + className="debug-target-url-form" + onSubmit={[Function]} + > + <input + className="devtools-textinput debug-target-url-input" + defaultValue="http://some.target/url" + onChange={[Function]} + onFocus={[Function]} + /> + </form> + </span> +</header> +`; + +exports[`DebugTargetInfo component Target icon renders the expected snapshot for a worker target 1`] = ` +<header + className="debug-target-info qa-debug-target-info" +> + <span + className="iconized-label qa-connection-info" + > + <img + alt="usb icon" + src="chrome://devtools/skin/images/aboutdebugging-usb-icon.svg" + /> + toolbox.debugTargetInfo.connection.usb + </span> + <span + className="iconized-label qa-runtime-info" + > + <img + className="channel-icon qa-runtime-icon" + src="chrome://devtools/skin/images/aboutdebugging-firefox-release.svg" + /> + <b + className="devtools-ellipsis-text" + > + toolbox.debugTargetInfo.runtimeLabel-usbRuntimeBrandName-1.0.0 + </b> + <span + className="devtools-ellipsis-text" + > + usbDeviceName + </span> + </span> + <span + className="iconized-label debug-target-title" + > + <img + alt="toolbox.debugTargetInfo.targetType.worker" + src="chrome://devtools/skin/images/debugging-workers.svg" + /> + <b + className="devtools-ellipsis-text qa-target-title" + > + Test Tab Name + </b> + </span> + <span + className="debug-target-url" + > + <span + className="debug-target-url-readonly devtools-ellipsis-text" + > + http://some.target/url + </span> + </span> +</header> +`; + +exports[`DebugTargetInfo component Target icon renders the expected snapshot for an extension target 1`] = ` +<header + className="debug-target-info qa-debug-target-info" +> + <span + className="iconized-label qa-connection-info" + > + <img + alt="usb icon" + src="chrome://devtools/skin/images/aboutdebugging-usb-icon.svg" + /> + toolbox.debugTargetInfo.connection.usb + </span> + <span + className="iconized-label qa-runtime-info" + > + <img + className="channel-icon qa-runtime-icon" + src="chrome://devtools/skin/images/aboutdebugging-firefox-release.svg" + /> + <b + className="devtools-ellipsis-text" + > + toolbox.debugTargetInfo.runtimeLabel-usbRuntimeBrandName-1.0.0 + </b> + <span + className="devtools-ellipsis-text" + > + usbDeviceName + </span> + </span> + <span + className="iconized-label debug-target-title" + > + <img + alt="toolbox.debugTargetInfo.targetType.extension" + src="chrome://devtools/skin/images/debugging-addons.svg" + /> + <b + className="devtools-ellipsis-text qa-target-title" + > + Test Tab Name + </b> + </span> + <div + className="debug-target-navigation" + > + <button + className="iconized-label navigation-button qa-reload-button" + onClick={[Function]} + title="toolbox.debugTargetInfo.reload" + > + <img + alt="toolbox.debugTargetInfo.reload" + src="chrome://global/skin/icons/reload.svg" + /> + </button> + </div> + <span + className="debug-target-url" + > + <span + className="debug-target-url-readonly devtools-ellipsis-text" + > + http://some.target/url + </span> + </span> +</header> +`; + +exports[`DebugTargetInfo component Target icon renders the expected snapshot for an local extension target 1`] = ` +<header + className="debug-target-info qa-debug-target-info" +> + <span + className="iconized-label debug-target-title" + > + <img + alt="toolbox.debugTargetInfo.targetType.extension" + src="chrome://devtools/skin/images/debugging-addons.svg" + /> + <b + className="devtools-ellipsis-text qa-target-title" + > + Test Tab Name + </b> + </span> + <div + className="debug-target-navigation" + > + <button + className="iconized-label navigation-button qa-reload-button" + onClick={[Function]} + title="toolbox.debugTargetInfo.reload" + > + <img + alt="toolbox.debugTargetInfo.reload" + src="chrome://global/skin/icons/reload.svg" + /> + </button> + </div> + <span + className="debug-target-url" + > + <span + className="debug-target-url-readonly devtools-ellipsis-text" + > + http://some.target/url + </span> + </span> + <button + className="toolbox-always-on-top" + /> +</header> +`; + +exports[`DebugTargetInfo component Target title renders the expected snapshot for This Firefox target 1`] = ` +<header + className="debug-target-info qa-debug-target-info" +> + <span + className="iconized-label qa-runtime-info" + > + <img + className="channel-icon qa-runtime-icon" + src="chrome://devtools/skin/images/aboutdebugging-firefox-release.svg" + /> + <b + className="devtools-ellipsis-text" + > + toolbox.debugTargetInfo.runtimeLabel.thisRuntime-brandShorterName-1.0.0 + </b> + <span + className="devtools-ellipsis-text" + /> + </span> + <span + className="iconized-label debug-target-title" + > + <img + alt="toolbox.debugTargetInfo.targetType.tab" + src="chrome://devtools/skin/images/globe.svg" + /> + <b + className="devtools-ellipsis-text qa-target-title" + > + Test Tab Name + </b> + </span> + <div + className="debug-target-navigation" + > + <button + className="iconized-label navigation-button qa-back-button" + onClick={[Function]} + title="toolbox.debugTargetInfo.back" + > + <img + alt="toolbox.debugTargetInfo.back" + src="chrome://browser/skin/back.svg" + /> + </button> + <button + className="iconized-label navigation-button qa-forward-button" + onClick={[Function]} + title="toolbox.debugTargetInfo.forward" + > + <img + alt="toolbox.debugTargetInfo.forward" + src="chrome://browser/skin/forward.svg" + /> + </button> + <button + className="iconized-label navigation-button qa-reload-button" + onClick={[Function]} + title="toolbox.debugTargetInfo.reload" + > + <img + alt="toolbox.debugTargetInfo.reload" + src="chrome://global/skin/icons/reload.svg" + /> + </button> + </div> + <span + className="debug-target-url" + > + <form + className="debug-target-url-form" + onSubmit={[Function]} + > + <input + className="devtools-textinput debug-target-url-input" + defaultValue="http://some.target/url" + onChange={[Function]} + onFocus={[Function]} + /> + </form> + </span> +</header> +`; + +exports[`DebugTargetInfo component Target title renders the expected snapshot for a Toolbox with an unnamed target 1`] = ` +<header + className="debug-target-info qa-debug-target-info" +> + <span + className="iconized-label qa-runtime-info" + > + <img + className="channel-icon qa-runtime-icon" + src="chrome://devtools/skin/images/aboutdebugging-firefox-release.svg" + /> + <b + className="devtools-ellipsis-text" + > + toolbox.debugTargetInfo.runtimeLabel.thisRuntime-brandShorterName-1.0.0 + </b> + <span + className="devtools-ellipsis-text" + /> + </span> + <span + className="iconized-label debug-target-title" + > + <img + alt="toolbox.debugTargetInfo.targetType.tab" + src="chrome://devtools/skin/images/globe.svg" + /> + </span> + <div + className="debug-target-navigation" + > + <button + className="iconized-label navigation-button qa-back-button" + onClick={[Function]} + title="toolbox.debugTargetInfo.back" + > + <img + alt="toolbox.debugTargetInfo.back" + src="chrome://browser/skin/back.svg" + /> + </button> + <button + className="iconized-label navigation-button qa-forward-button" + onClick={[Function]} + title="toolbox.debugTargetInfo.forward" + > + <img + alt="toolbox.debugTargetInfo.forward" + src="chrome://browser/skin/forward.svg" + /> + </button> + <button + className="iconized-label navigation-button qa-reload-button" + onClick={[Function]} + title="toolbox.debugTargetInfo.reload" + > + <img + alt="toolbox.debugTargetInfo.reload" + src="chrome://global/skin/icons/reload.svg" + /> + </button> + </div> + <span + className="debug-target-url" + > + <form + className="debug-target-url-form" + onSubmit={[Function]} + > + <input + className="devtools-textinput debug-target-url-input" + defaultValue="http://some.target/without/a/name" + onChange={[Function]} + onFocus={[Function]} + /> + </form> + </span> +</header> +`; diff --git a/devtools/client/framework/test/node/components/debug-target-info.test.js b/devtools/client/framework/test/node/components/debug-target-info.test.js new file mode 100644 index 0000000000..45a04007ad --- /dev/null +++ b/devtools/client/framework/test/node/components/debug-target-info.test.js @@ -0,0 +1,319 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +/** + * Unit tests for the DebugTargetInfo component. + */ + +const renderer = require("react-test-renderer"); +const React = require("resource://devtools/client/shared/vendor/react.js"); +const DebugTargetInfo = React.createFactory( + require("resource://devtools/client/framework/components/DebugTargetInfo.js") +); +const { + CONNECTION_TYPES, +} = require("resource://devtools/client/shared/remote-debugging/constants.js"); +const DESCRIPTOR_TYPES = require("resource://devtools/client/fronts/descriptors/descriptor-types.js"); + +/** + * Stub for the L10N property expected by the DebugTargetInfo component. + */ +const stubL10N = { + getStr: id => id, + getFormatStr: (id, ...args) => [id, ...args].join("-"), +}; + +const findByClassName = (testInstance, className) => { + return testInstance.findAll(node => { + return node.props.className && node.props.className.includes(className); + }); +}; + +function buildProps(base, extraDebugTargetData) { + const props = Object.assign({}, base); + Object.assign(props.debugTargetData, extraDebugTargetData); + return props; +} + +const TEST_TOOLBOX = { + target: { + name: "Test Tab Name", + url: "http://some.target/url", + targetForm: { + traits: { + navigation: true, + }, + }, + getTrait: trait => { + return TEST_TOOLBOX.target.targetForm.traits[trait]; + }, + }, + doc: {}, +}; + +const TEST_TOOLBOX_NO_NAME = { + target: { + url: "http://some.target/without/a/name", + targetForm: { + traits: { + navigation: true, + }, + }, + getTrait: trait => { + return TEST_TOOLBOX.target.targetForm.traits[trait]; + }, + }, + doc: {}, +}; + +const USB_DEVICE_DESCRIPTION = { + deviceName: "usbDeviceName", + icon: "chrome://devtools/skin/images/aboutdebugging-firefox-release.svg", + name: "usbRuntimeBrandName", + version: "1.0.0", +}; + +const THIS_FIREFOX_DEVICE_DESCRIPTION = { + icon: "chrome://devtools/skin/images/aboutdebugging-firefox-release.svg", + version: "1.0.0", + name: "thisFirefoxRuntimeBrandName", +}; + +const USB_TARGET_INFO = { + debugTargetData: { + connectionType: CONNECTION_TYPES.USB, + runtimeInfo: USB_DEVICE_DESCRIPTION, + descriptorType: DESCRIPTOR_TYPES.TAB, + }, + toolbox: TEST_TOOLBOX, + L10N: stubL10N, +}; + +const THIS_FIREFOX_TARGET_INFO = { + debugTargetData: { + connectionType: CONNECTION_TYPES.THIS_FIREFOX, + runtimeInfo: THIS_FIREFOX_DEVICE_DESCRIPTION, + descriptorType: DESCRIPTOR_TYPES.TAB, + }, + toolbox: TEST_TOOLBOX, + L10N: stubL10N, +}; + +const THIS_FIREFOX_NO_NAME_TARGET_INFO = { + debugTargetData: { + connectionType: CONNECTION_TYPES.THIS_FIREFOX, + runtimeInfo: THIS_FIREFOX_DEVICE_DESCRIPTION, + descriptorType: DESCRIPTOR_TYPES.TAB, + }, + toolbox: TEST_TOOLBOX_NO_NAME, + L10N: stubL10N, +}; + +describe("DebugTargetInfo component", () => { + describe("Connection info", () => { + it("displays connection info for USB Release target", () => { + const component = renderer.create(DebugTargetInfo(USB_TARGET_INFO)); + expect( + findByClassName(component.root, "qa-connection-info").length + ).toEqual(1); + }); + + it("renders the expected snapshot for USB Release target", () => { + const component = renderer.create(DebugTargetInfo(USB_TARGET_INFO)); + expect(component.toJSON()).toMatchSnapshot(); + }); + + it("hides the connection info for This Firefox target", () => { + const component = renderer.create( + DebugTargetInfo(THIS_FIREFOX_TARGET_INFO) + ); + expect( + findByClassName(component.root, "qa-connection-info").length + ).toEqual(0); + }); + }); + + describe("Target title", () => { + it("displays the target title if the target of the Toolbox has a name", () => { + const component = renderer.create( + DebugTargetInfo(THIS_FIREFOX_TARGET_INFO) + ); + expect(findByClassName(component.root, "qa-target-title").length).toEqual( + 1 + ); + }); + + it("renders the expected snapshot for This Firefox target", () => { + const component = renderer.create( + DebugTargetInfo(THIS_FIREFOX_TARGET_INFO) + ); + expect(component.toJSON()).toMatchSnapshot(); + }); + + it("doesn't display the target title if the target of the Toolbox has no name", () => { + const component = renderer.create( + DebugTargetInfo(THIS_FIREFOX_NO_NAME_TARGET_INFO) + ); + expect(findByClassName(component.root, "qa-target-title").length).toEqual( + 0 + ); + }); + + it("renders the expected snapshot for a Toolbox with an unnamed target", () => { + const component = renderer.create( + DebugTargetInfo(THIS_FIREFOX_NO_NAME_TARGET_INFO) + ); + expect(component.toJSON()).toMatchSnapshot(); + }); + }); + + describe("Target icon", () => { + it("renders the expected snapshot for a tab target", () => { + const props = buildProps(USB_TARGET_INFO, { + descriptorType: DESCRIPTOR_TYPES.TAB, + }); + const component = renderer.create(DebugTargetInfo(props)); + expect(component.toJSON()).toMatchSnapshot(); + }); + + it("renders the expected snapshot for a worker target", () => { + const props = buildProps(USB_TARGET_INFO, { + descriptorType: DESCRIPTOR_TYPES.WORKER, + }); + const component = renderer.create(DebugTargetInfo(props)); + expect(component.toJSON()).toMatchSnapshot(); + }); + + it("renders the expected snapshot for an extension target", () => { + const props = buildProps(USB_TARGET_INFO, { + descriptorType: DESCRIPTOR_TYPES.EXTENSION, + }); + const component = renderer.create(DebugTargetInfo(props)); + expect(component.toJSON()).toMatchSnapshot(); + }); + + it("renders the expected snapshot for an local extension target", () => { + const props = buildProps(THIS_FIREFOX_TARGET_INFO, { + descriptorType: DESCRIPTOR_TYPES.EXTENSION, + }); + const component = renderer.create(DebugTargetInfo(props)); + expect(component.toJSON()).toMatchSnapshot(); + }); + + it("renders the expected snapshot for a process target", () => { + const props = buildProps(USB_TARGET_INFO, { + descriptorType: DESCRIPTOR_TYPES.PROCESS, + }); + const component = renderer.create(DebugTargetInfo(props)); + expect(component.toJSON()).toMatchSnapshot(); + }); + }); + + describe("Always on top button", () => { + it("displays always on top button for local webextension target", () => { + const component = renderer.create( + DebugTargetInfo( + buildProps(THIS_FIREFOX_TARGET_INFO, { + descriptorType: DESCRIPTOR_TYPES.EXTENSION, + }) + ) + ); + expect( + findByClassName(component.root, "toolbox-always-on-top").length + ).toEqual(1); + }); + + it(`does not display "Always on top" button for remote webextension toolbox`, () => { + const component = renderer.create( + DebugTargetInfo( + buildProps(USB_TARGET_INFO, { + descriptorType: DESCRIPTOR_TYPES.EXTENSION, + }) + ) + ); + expect( + findByClassName(component.root, "toolbox-always-on-top").length + ).toEqual(0); + }); + + it(`does not display "Always on top" button for local tab toolbox`, () => { + const component = renderer.create( + DebugTargetInfo( + buildProps(THIS_FIREFOX_TARGET_INFO, { + descriptorType: DESCRIPTOR_TYPES.TAB, + }) + ) + ); + expect( + findByClassName(component.root, "toolbox-always-on-top").length + ).toEqual(0); + }); + + it(`does not display "Always on top" button for remote tab toolbox`, () => { + const component = renderer.create( + DebugTargetInfo( + buildProps(USB_TARGET_INFO, { + descriptorType: DESCRIPTOR_TYPES.TAB, + }) + ) + ); + expect( + findByClassName(component.root, "toolbox-always-on-top").length + ).toEqual(0); + }); + + it(`does not display "Always on top" button for local worker toolbox`, () => { + const component = renderer.create( + DebugTargetInfo( + buildProps(THIS_FIREFOX_TARGET_INFO, { + descriptorType: DESCRIPTOR_TYPES.WORKER, + }) + ) + ); + expect( + findByClassName(component.root, "toolbox-always-on-top").length + ).toEqual(0); + }); + + it(`does not display "Always on top" button for remote worker toolbox`, () => { + const component = renderer.create( + DebugTargetInfo( + buildProps(USB_TARGET_INFO, { + descriptorType: DESCRIPTOR_TYPES.WORKER, + }) + ) + ); + expect( + findByClassName(component.root, "toolbox-always-on-top").length + ).toEqual(0); + }); + + it(`does not display "Always on top" button for local process toolbox`, () => { + const component = renderer.create( + DebugTargetInfo( + buildProps(THIS_FIREFOX_TARGET_INFO, { + descriptorType: DESCRIPTOR_TYPES.PROCESS, + }) + ) + ); + expect( + findByClassName(component.root, "toolbox-always-on-top").length + ).toEqual(0); + }); + + it(`does not display "Always on top" button for remote process toolbox`, () => { + const component = renderer.create( + DebugTargetInfo( + buildProps(USB_TARGET_INFO, { + descriptorType: DESCRIPTOR_TYPES.PROCESS, + }) + ) + ); + expect( + findByClassName(component.root, "toolbox-always-on-top").length + ).toEqual(0); + }); + }); +}); |