Bug 1539344 - Part 3: add Jest tests to check display of debug target type info r=jdescottes,Ola
authorBelén Albeza <balbeza@mozilla.com>
Wed, 10 Apr 2019 15:43:36 +0000
changeset 468816 c15c9dd0fb2be8f40111d191497e0818fcc439d2
parent 468815 f3e332b425b3a4fb7d8cb1c3944156587a13b864
child 468817 fd75d6285f74bf868368020ce0ec37f81911705d
push id112755
push userdvarga@mozilla.com
push dateWed, 10 Apr 2019 22:06:41 +0000
treeherdermozilla-inbound@606f85641d0b [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjdescottes, Ola
bugs1539344
milestone68.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1539344 - Part 3: add Jest tests to check display of debug target type info r=jdescottes,Ola Differential Revision: https://phabricator.services.mozilla.com/D25376
devtools/client/framework/test/jest/components/__snapshots__/debug-target-info.test.js.snap
devtools/client/framework/test/jest/components/debug-target-info.test.js
--- a/devtools/client/framework/test/jest/components/__snapshots__/debug-target-info.test.js.snap
+++ b/devtools/client/framework/test/jest/components/__snapshots__/debug-target-info.test.js.snap
@@ -1,29 +1,40 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`DebugTargetInfo component renders the expected snapshot for This Firefox target 1`] = `
+exports[`DebugTargetInfo component Connection info renders the expected snapshot for USB Release target 1`] = `
 <header
   className="debug-target-info js-debug-target-info"
 >
   <span
+    className="iconized-label js-connection-info"
+  >
+    <img
+      alt="usb icon"
+      src="chrome://devtools/skin/images/aboutdebugging-usb-icon.svg"
+    />
+    toolbox.debugTargetInfo.connection.usb
+  </span>
+  <span
     className="iconized-label"
   >
     <img
       className="channel-icon"
       src="chrome://devtools/skin/images/aboutdebugging-firefox-release.svg"
     />
     <b
       className="devtools-ellipsis-text"
     >
-      toolbox.debugTargetInfo.runtimeLabel.thisFirefox-1.0.0
+      toolbox.debugTargetInfo.runtimeLabel-usbRuntimeBrandName-1.0.0
     </b>
     <span
       className="devtools-ellipsis-text"
-    />
+    >
+      usbDeviceName
+    </span>
   </span>
   <span
     className="iconized-label"
   >
     <img
       alt="toolbox.debugTargetInfo.targetType.tab"
       src="chrome://devtools/skin/images/globe.svg"
     />
@@ -36,17 +47,69 @@ exports[`DebugTargetInfo component rende
       className="devtools-ellipsis-text"
     >
       http://some.target/url
     </span>
   </span>
 </header>
 `;
 
-exports[`DebugTargetInfo component renders the expected snapshot for USB Release target 1`] = `
+exports[`DebugTargetInfo component Target icon renders the expected snapshot for a process target 1`] = `
+<header
+  className="debug-target-info js-debug-target-info"
+>
+  <span
+    className="iconized-label js-connection-info"
+  >
+    <img
+      alt="usb icon"
+      src="chrome://devtools/skin/images/aboutdebugging-usb-icon.svg"
+    />
+    toolbox.debugTargetInfo.connection.usb
+  </span>
+  <span
+    className="iconized-label"
+  >
+    <img
+      className="channel-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"
+  >
+    <img
+      alt="toolbox.debugTargetInfo.targetType.process"
+      src="chrome://devtools/skin/images/settings.svg"
+    />
+    <b
+      className="devtools-ellipsis-text js-target-title"
+    >
+      Test Tab Name
+    </b>
+    <span
+      className="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 js-debug-target-info"
 >
   <span
     className="iconized-label js-connection-info"
   >
     <img
       alt="usb icon"
@@ -88,17 +151,162 @@ exports[`DebugTargetInfo component rende
       className="devtools-ellipsis-text"
     >
       http://some.target/url
     </span>
   </span>
 </header>
 `;
 
-exports[`DebugTargetInfo component renders the expected snapshot for a Toolbox with an unnamed target 1`] = `
+exports[`DebugTargetInfo component Target icon renders the expected snapshot for a worker target 1`] = `
+<header
+  className="debug-target-info js-debug-target-info"
+>
+  <span
+    className="iconized-label js-connection-info"
+  >
+    <img
+      alt="usb icon"
+      src="chrome://devtools/skin/images/aboutdebugging-usb-icon.svg"
+    />
+    toolbox.debugTargetInfo.connection.usb
+  </span>
+  <span
+    className="iconized-label"
+  >
+    <img
+      className="channel-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"
+  >
+    <img
+      alt="toolbox.debugTargetInfo.targetType.worker"
+      src="chrome://devtools/skin/images/debugging-workers.svg"
+    />
+    <b
+      className="devtools-ellipsis-text js-target-title"
+    >
+      Test Tab Name
+    </b>
+    <span
+      className="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 js-debug-target-info"
+>
+  <span
+    className="iconized-label js-connection-info"
+  >
+    <img
+      alt="usb icon"
+      src="chrome://devtools/skin/images/aboutdebugging-usb-icon.svg"
+    />
+    toolbox.debugTargetInfo.connection.usb
+  </span>
+  <span
+    className="iconized-label"
+  >
+    <img
+      className="channel-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"
+  >
+    <img
+      alt="toolbox.debugTargetInfo.targetType.extension"
+      src="chrome://devtools/skin/images/debugging-addons.svg"
+    />
+    <b
+      className="devtools-ellipsis-text js-target-title"
+    >
+      Test Tab Name
+    </b>
+    <span
+      className="devtools-ellipsis-text"
+    >
+      http://some.target/url
+    </span>
+  </span>
+</header>
+`;
+
+exports[`DebugTargetInfo component Target title renders the expected snapshot for This Firefox target 1`] = `
+<header
+  className="debug-target-info js-debug-target-info"
+>
+  <span
+    className="iconized-label"
+  >
+    <img
+      className="channel-icon"
+      src="chrome://devtools/skin/images/aboutdebugging-firefox-release.svg"
+    />
+    <b
+      className="devtools-ellipsis-text"
+    >
+      toolbox.debugTargetInfo.runtimeLabel.thisFirefox-1.0.0
+    </b>
+    <span
+      className="devtools-ellipsis-text"
+    />
+  </span>
+  <span
+    className="iconized-label"
+  >
+    <img
+      alt="toolbox.debugTargetInfo.targetType.tab"
+      src="chrome://devtools/skin/images/globe.svg"
+    />
+    <b
+      className="devtools-ellipsis-text js-target-title"
+    >
+      Test Tab Name
+    </b>
+    <span
+      className="devtools-ellipsis-text"
+    >
+      http://some.target/url
+    </span>
+  </span>
+</header>
+`;
+
+exports[`DebugTargetInfo component Target title renders the expected snapshot for a Toolbox with an unnamed target 1`] = `
 <header
   className="debug-target-info js-debug-target-info"
 >
   <span
     className="iconized-label"
   >
     <img
       className="channel-icon"
--- a/devtools/client/framework/test/jest/components/debug-target-info.test.js
+++ b/devtools/client/framework/test/jest/components/debug-target-info.test.js
@@ -37,87 +37,121 @@ const TEST_TOOLBOX = {
 const TEST_TOOLBOX_NO_NAME = {
   target: {
     url: "http://some.target/without/a/name",
   },
 };
 
 const USB_DEVICE_DESCRIPTION = {
   brandName: "usbRuntimeBrandName",
-  connectionType: CONNECTION_TYPES.USB,
   channel: "release",
   deviceName: "usbDeviceName",
   version: "1.0.0",
 };
 
 const THIS_FIREFOX_DEVICE_DESCRIPTION = {
   brandName: "thisFirefoxRuntimeBrandName",
-  connectionType: CONNECTION_TYPES.THIS_FIREFOX,
   channel: "release",
   version: "1.0.0",
 };
 
-const USB_TARGET_INFO = DebugTargetInfo({
+const USB_TARGET_INFO = {
   debugTargetData: {
     connectionType: CONNECTION_TYPES.USB,
     deviceDescription: USB_DEVICE_DESCRIPTION,
     targetType: DEBUG_TARGET_TYPES.TAB,
   },
   toolbox: TEST_TOOLBOX,
   L10N: stubL10N,
-});
+};
 
-const THIS_FIREFOX_TARGET_INFO = DebugTargetInfo({
+const THIS_FIREFOX_TARGET_INFO = {
   debugTargetData: {
     connectionType: CONNECTION_TYPES.THIS_FIREFOX,
     deviceDescription: THIS_FIREFOX_DEVICE_DESCRIPTION,
     targetType: DEBUG_TARGET_TYPES.TAB,
   },
   toolbox: TEST_TOOLBOX,
   L10N: stubL10N,
-});
+};
 
-const THIS_FIREFOX_NO_NAME_TARGET_INFO = DebugTargetInfo({
+const THIS_FIREFOX_NO_NAME_TARGET_INFO = {
   debugTargetData: {
     connectionType: CONNECTION_TYPES.THIS_FIREFOX,
     deviceDescription: THIS_FIREFOX_DEVICE_DESCRIPTION,
     targetType: DEBUG_TARGET_TYPES.TAB,
   },
   toolbox: TEST_TOOLBOX_NO_NAME,
   L10N: stubL10N,
-});
+};
 
 describe("DebugTargetInfo component", () => {
-  it("displays connection info for USB Release target", () => {
-    const targetInfo = renderer.create(USB_TARGET_INFO);
-    expect(findByClassName(targetInfo.root, "js-connection-info").length).toEqual(1);
-  });
+  describe("Connection info", () => {
+    it("displays connection info for USB Release target", () => {
+      const component = renderer.create(DebugTargetInfo(USB_TARGET_INFO));
+      expect(findByClassName(component.root, "js-connection-info").length).toEqual(1);
+    });
 
-  it("renders the expected snapshot for USB Release target", () => {
-    const targetInfo = renderer.create(USB_TARGET_INFO);
-    expect(targetInfo.toJSON()).toMatchSnapshot();
-  });
+    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 targetInfo = renderer.create(THIS_FIREFOX_TARGET_INFO);
-    expect(findByClassName(targetInfo.root, "js-connection-info").length).toEqual(0);
+    it("hides the connection info for This Firefox target", () => {
+      const component = renderer.create(DebugTargetInfo(THIS_FIREFOX_TARGET_INFO));
+      expect(findByClassName(component.root, "js-connection-info").length).toEqual(0);
+    });
   });
 
-  it("displays the target title if the target of the Toolbox has a name", () => {
-    const targetInfo = renderer.create(THIS_FIREFOX_TARGET_INFO);
-    expect(findByClassName(targetInfo.root, "js-target-title").length).toEqual(1);
-  });
+  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, "js-target-title").length).toEqual(1);
+    });
 
-  it("renders the expected snapshot for This Firefox target", () => {
-    const targetInfo = renderer.create(THIS_FIREFOX_TARGET_INFO);
-    expect(targetInfo.toJSON()).toMatchSnapshot();
+    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, "js-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();
+    });
   });
 
-  it("doesn't display the target title if the target of the Toolbox has no name", () => {
-    const targetInfo = renderer.create(THIS_FIREFOX_NO_NAME_TARGET_INFO);
-    expect(findByClassName(targetInfo.root, "js-target-title").length).toEqual(0);
-  });
+  describe("Target icon", () => {
+    const buildProps = (base, extraDebugTargetData) => {
+      const props = Object.assign({}, base);
+      Object.assign(props.debugTargetData, extraDebugTargetData);
+      return props;
+    };
+
+    it("renders the expected snapshot for a tab target", () => {
+      const props = buildProps(USB_TARGET_INFO, { targetType: DEBUG_TARGET_TYPES.TAB });
+      const component = renderer.create(DebugTargetInfo(props));
+      expect(component.toJSON()).toMatchSnapshot();
+    });
 
-  it("renders the expected snapshot for a Toolbox with an unnamed target", () => {
-    const targetInfo = renderer.create(THIS_FIREFOX_NO_NAME_TARGET_INFO);
-    expect(targetInfo.toJSON()).toMatchSnapshot();
+    it("renders the expected snapshot for a worker target", () => {
+      const props = buildProps(USB_TARGET_INFO, { targetType: DEBUG_TARGET_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, { targetType: DEBUG_TARGET_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, { targetType: DEBUG_TARGET_TYPES.PROCESS });
+      const component = renderer.create(DebugTargetInfo(props));
+      expect(component.toJSON()).toMatchSnapshot();
+    });
   });
 });