Adding upstream version 124.0.1.upstream/124.0.1

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>

18 files changed, 1741 insertions, 0 deletions

diff --git a/devtools/client/debugger/src/components/shared/tests/Accordion.spec.js b/devtools/client/debugger/src/components/shared/tests/Accordion.spec.js
new file mode 100644
index 0000000000..cbe5ab12bf
--- /dev/null
+++ b/devtools/client/debugger/src/components/shared/tests/Accordion.spec.js
@@ -0,0 +1,47 @@
+/* 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/>. */
+
+import React from "devtools/client/shared/vendor/react";
+import { shallow } from "enzyme";
+
+import Accordion from "../Accordion";
+
+describe("Accordion", () => {
+  const testItems = [
+    {
+      header: "Test Accordion Item 1",
+      id: "accordion-item-1",
+      className: "accordion-item-1",
+      component: React.createElement("div", null),
+      opened: false,
+      onToggle: jest.fn(),
+    },
+    {
+      header: "Test Accordion Item 2",
+      id: "accordion-item-2",
+      className: "accordion-item-2",
+      component: React.createElement("div", null),
+      buttons: React.createElement("button", null),
+      opened: false,
+      onToggle: jest.fn(),
+    },
+    {
+      header: "Test Accordion Item 3",
+      id: "accordion-item-3",
+      className: "accordion-item-3",
+      component: React.createElement("div", null),
+      opened: true,
+      onToggle: jest.fn(),
+    },
+  ];
+  const wrapper = shallow(
+    React.createElement(Accordion, {
+      items: testItems,
+    })
+  );
+  it("basic render", () => expect(wrapper).toMatchSnapshot());
+  wrapper.find(".accordion-item-1 button").simulate("click");
+  it("handleClick and onToggle", () =>
+    expect(testItems[0].onToggle).toHaveBeenCalledWith(true));
+});
diff --git a/devtools/client/debugger/src/components/shared/tests/Badge.spec.js b/devtools/client/debugger/src/components/shared/tests/Badge.spec.js
new file mode 100644
index 0000000000..a19b35a7c2
--- /dev/null
+++ b/devtools/client/debugger/src/components/shared/tests/Badge.spec.js
@@ -0,0 +1,19 @@
+/* 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/>. */
+
+import React from "devtools/client/shared/vendor/react";
+import { shallow } from "enzyme";
+
+import Badge from "../Badge";
+
+describe("Badge", () => {
+  it("render", () =>
+    expect(
+      shallow(
+        React.createElement(Badge, {
+          badgeText: 3,
+        })
+      )
+    ).toMatchSnapshot());
+});
diff --git a/devtools/client/debugger/src/components/shared/tests/BracketArrow.spec.js b/devtools/client/debugger/src/components/shared/tests/BracketArrow.spec.js
new file mode 100644
index 0000000000..4ce9a5b5ce
--- /dev/null
+++ b/devtools/client/debugger/src/components/shared/tests/BracketArrow.spec.js
@@ -0,0 +1,24 @@
+/* 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/>. */
+
+import React from "devtools/client/shared/vendor/react";
+import { shallow } from "enzyme";
+
+import BracketArrow from "../BracketArrow";
+
+describe("BracketArrow", () => {
+  const wrapper = shallow(
+    React.createElement(BracketArrow, {
+      orientation: "down",
+      left: 10,
+      top: 20,
+      bottom: 50,
+    })
+  );
+  it("render", () => expect(wrapper).toMatchSnapshot());
+  it("render up", () => {
+    wrapper.setProps({ orientation: null });
+    expect(wrapper).toMatchSnapshot();
+  });
+});
diff --git a/devtools/client/debugger/src/components/shared/tests/Dropdown.spec.js b/devtools/client/debugger/src/components/shared/tests/Dropdown.spec.js
new file mode 100644
index 0000000000..9b001ba9e5
--- /dev/null
+++ b/devtools/client/debugger/src/components/shared/tests/Dropdown.spec.js
@@ -0,0 +1,21 @@
+/* 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/>. */
+
+import React from "devtools/client/shared/vendor/react";
+import { shallow } from "enzyme";
+
+import Dropdown from "../Dropdown";
+
+describe("Dropdown", () => {
+  const wrapper = shallow(
+    React.createElement(Dropdown, {
+      panel: React.createElement("div", null),
+      icon: "✅",
+    })
+  );
+  it("render", () => expect(wrapper).toMatchSnapshot());
+  wrapper.find(".dropdown").simulate("click");
+  it("handle toggleDropdown", () =>
+    expect(wrapper.state().dropdownShown).toEqual(true));
+});
diff --git a/devtools/client/debugger/src/components/shared/tests/Modal.spec.js b/devtools/client/debugger/src/components/shared/tests/Modal.spec.js
new file mode 100644
index 0000000000..58c38502e7
--- /dev/null
+++ b/devtools/client/debugger/src/components/shared/tests/Modal.spec.js
@@ -0,0 +1,56 @@
+/* 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/>. */
+
+import React from "devtools/client/shared/vendor/react";
+import { shallow } from "enzyme";
+
+import Modal from "../Modal";
+
+describe("Modal", () => {
+  it("renders", () => {
+    const wrapper = shallow(
+      React.createElement(Modal, {
+        handleClose: () => {},
+      })
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("handles close modal click", () => {
+    const handleCloseSpy = jest.fn();
+    const wrapper = shallow(
+      React.createElement(Modal, {
+        handleClose: handleCloseSpy,
+      })
+    );
+    wrapper.find(".modal-wrapper").simulate("click");
+    expect(handleCloseSpy).toHaveBeenCalled();
+  });
+
+  it("renders children", () => {
+    const wrapper = shallow(
+      React.createElement(
+        Modal,
+        {
+          handleClose: () => {},
+        },
+        React.createElement("div", {
+          className: "aChild",
+        })
+      )
+    );
+    expect(wrapper.find(".aChild")).toHaveLength(1);
+  });
+
+  it("passes additionalClass to child div class", () => {
+    const additionalClass = "testAddon";
+    const wrapper = shallow(
+      React.createElement(Modal, {
+        additionalClass,
+        handleClose: () => {},
+      })
+    );
+    expect(wrapper.find(`.modal-wrapper .${additionalClass}`)).toHaveLength(1);
+  });
+});
diff --git a/devtools/client/debugger/src/components/shared/tests/Popover.spec.js b/devtools/client/debugger/src/components/shared/tests/Popover.spec.js
new file mode 100644
index 0000000000..7150f4afe8
--- /dev/null
+++ b/devtools/client/debugger/src/components/shared/tests/Popover.spec.js
@@ -0,0 +1,212 @@
+/* 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/>. */
+
+import React from "devtools/client/shared/vendor/react";
+import { mount } from "enzyme";
+
+import Popover from "../Popover";
+
+describe("Popover", () => {
+  const onMouseLeave = jest.fn();
+  const onKeyDown = jest.fn();
+  const editorRef = {
+    getBoundingClientRect() {
+      return {
+        x: 0,
+        y: 0,
+        width: 100,
+        height: 100,
+        top: 250,
+        right: 0,
+        bottom: 0,
+        left: 20,
+      };
+    },
+  };
+
+  const targetRef = {
+    getBoundingClientRect() {
+      return {
+        x: 0,
+        y: 0,
+        width: 100,
+        height: 100,
+        top: 250,
+        right: 0,
+        bottom: 0,
+        left: 20,
+      };
+    },
+  };
+  const targetPosition = {
+    x: 100,
+    y: 200,
+    width: 300,
+    height: 300,
+    top: 50,
+    right: 0,
+    bottom: 0,
+    left: 200,
+  };
+  const popover = mount(
+    React.createElement(
+      Popover,
+      {
+        onMouseLeave: onMouseLeave,
+        onKeyDown: onKeyDown,
+        editorRef: editorRef,
+        targetPosition: targetPosition,
+        mouseout: () => {},
+        target: targetRef,
+      },
+      React.createElement("h1", null, "Poppy!")
+    )
+  );
+
+  const tooltip = mount(
+    React.createElement(
+      Popover,
+      {
+        type: "tooltip",
+        onMouseLeave: onMouseLeave,
+        onKeyDown: onKeyDown,
+        editorRef: editorRef,
+        targetPosition: targetPosition,
+        mouseout: () => {},
+        target: targetRef,
+      },
+      React.createElement("h1", null, "Toolie!")
+    )
+  );
+
+  beforeEach(() => {
+    onMouseLeave.mockClear();
+    onKeyDown.mockClear();
+  });
+
+  it("render", () => expect(popover).toMatchSnapshot());
+
+  it("render (tooltip)", () => expect(tooltip).toMatchSnapshot());
+
+  it("mount popover", () => {
+    const mountedPopover = mount(
+      React.createElement(
+        Popover,
+        {
+          onMouseLeave: onMouseLeave,
+          onKeyDown: onKeyDown,
+          editorRef: editorRef,
+          targetPosition: targetPosition,
+          mouseout: () => {},
+          target: targetRef,
+        },
+        React.createElement("h1", null, "Poppy!")
+      )
+    );
+    expect(mountedPopover).toMatchSnapshot();
+  });
+
+  it("mount tooltip", () => {
+    const mountedTooltip = mount(
+      React.createElement(
+        Popover,
+        {
+          type: "tooltip",
+          onMouseLeave: onMouseLeave,
+          onKeyDown: onKeyDown,
+          editorRef: editorRef,
+          targetPosition: targetPosition,
+          mouseout: () => {},
+          target: targetRef,
+        },
+        React.createElement("h1", null, "Toolie!")
+      )
+    );
+    expect(mountedTooltip).toMatchSnapshot();
+  });
+
+  it("tooltip normally displays above the target", () => {
+    const editor = {
+      getBoundingClientRect() {
+        return {
+          width: 500,
+          height: 500,
+          top: 0,
+          bottom: 500,
+          left: 0,
+          right: 500,
+        };
+      },
+    };
+    const target = {
+      width: 30,
+      height: 10,
+      top: 100,
+      bottom: 110,
+      left: 20,
+      right: 50,
+    };
+
+    const mountedTooltip = mount(
+      React.createElement(
+        Popover,
+        {
+          type: "tooltip",
+          onMouseLeave: onMouseLeave,
+          onKeyDown: onKeyDown,
+          editorRef: editor,
+          targetPosition: target,
+          mouseout: () => {},
+          target: targetRef,
+        },
+        React.createElement("h1", null, "Toolie!")
+      )
+    );
+
+    const toolTipTop = parseInt(mountedTooltip.getDOMNode().style.top, 10);
+    expect(toolTipTop).toBeLessThanOrEqual(target.top);
+  });
+
+  it("tooltop won't display above the target when insufficient space", () => {
+    const editor = {
+      getBoundingClientRect() {
+        return {
+          width: 100,
+          height: 100,
+          top: 0,
+          bottom: 100,
+          left: 0,
+          right: 100,
+        };
+      },
+    };
+    const target = {
+      width: 30,
+      height: 10,
+      top: 0,
+      bottom: 10,
+      left: 20,
+      right: 50,
+    };
+
+    const mountedTooltip = mount(
+      React.createElement(
+        Popover,
+        {
+          type: "tooltip",
+          onMouseLeave: onMouseLeave,
+          onKeyDown: onKeyDown,
+          editorRef: editor,
+          targetPosition: target,
+          mouseout: () => {},
+          target: targetRef,
+        },
+        React.createElement("h1", null, "Toolie!")
+      )
+    );
+
+    const toolTipTop = parseInt(mountedTooltip.getDOMNode().style.top, 10);
+    expect(toolTipTop).toBeGreaterThanOrEqual(target.bottom);
+  });
+});
diff --git a/devtools/client/debugger/src/components/shared/tests/PreviewFunction.spec.js b/devtools/client/debugger/src/components/shared/tests/PreviewFunction.spec.js
new file mode 100644
index 0000000000..62f635acc1
--- /dev/null
+++ b/devtools/client/debugger/src/components/shared/tests/PreviewFunction.spec.js
@@ -0,0 +1,130 @@
+/* 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/>. */
+
+import React from "devtools/client/shared/vendor/react";
+import { shallow } from "enzyme";
+import PreviewFunction from "../PreviewFunction";
+
+function render(props) {
+  return shallow(React.createElement(PreviewFunction, props), {
+    context: {
+      l10n: L10N,
+    },
+  });
+}
+
+describe("PreviewFunction", () => {
+  it("should return a span", () => {
+    const item = { name: "" };
+    const returnedSpan = render({ func: item });
+    expect(returnedSpan).toMatchSnapshot();
+    expect(returnedSpan.name()).toEqual("span");
+  });
+
+  it('should return a span with a class of "function-signature"', () => {
+    const item = { name: "" };
+    const returnedSpan = render({ func: item });
+    expect(returnedSpan.hasClass("function-signature")).toBe(true);
+  });
+
+  it("should return a span with 3 children", () => {
+    const item = { name: "" };
+    const returnedSpan = render({ func: item });
+    expect(returnedSpan.children()).toHaveLength(3);
+  });
+
+  describe("function name", () => {
+    it("should be a span", () => {
+      const item = { name: "" };
+      const returnedSpan = render({ func: item });
+      expect(returnedSpan.children().first().name()).toEqual("span");
+    });
+
+    it('should have a "function-name" class', () => {
+      const item = { name: "" };
+      const returnedSpan = render({ func: item });
+      expect(returnedSpan.children().first().hasClass("function-name")).toBe(
+        true
+      );
+    });
+
+    it("should be be set to userDisplayName if defined", () => {
+      const item = {
+        name: "",
+        displayName: "chuck",
+      };
+      const returnedSpan = render({ func: item });
+      expect(returnedSpan.children().first().first().text()).toEqual("chuck");
+    });
+
+    it('should use displayName if defined & no "userDisplayName" exist', () => {
+      const item = {
+        displayName: "norris",
+        name: "last",
+      };
+      const returnedSpan = render({ func: item });
+      expect(returnedSpan.children().first().first().text()).toEqual("norris");
+    });
+
+    it('should use to name if no "userDisplayName"/"displayName" exist', () => {
+      const item = {
+        name: "last",
+      };
+      const returnedSpan = render({ func: item });
+      expect(returnedSpan.children().first().first().text()).toEqual("last");
+    });
+  });
+
+  describe("render parentheses", () => {
+    let leftParen;
+    let rightParen;
+
+    beforeAll(() => {
+      const item = { name: "" };
+      const returnedSpan = render({ func: item });
+      const children = returnedSpan.children();
+      leftParen = returnedSpan.childAt(1);
+      rightParen = returnedSpan.childAt(children.length - 1);
+    });
+
+    it("should be spans", () => {
+      expect(leftParen.name()).toEqual("span");
+      expect(rightParen.name()).toEqual("span");
+    });
+
+    it("should create a left paren", () => {
+      expect(leftParen.text()).toEqual("(");
+    });
+
+    it("should create a right paren", () => {
+      expect(rightParen.text()).toEqual(")");
+    });
+  });
+
+  describe("render parameters", () => {
+    let returnedSpan;
+    let children;
+
+    beforeAll(() => {
+      const item = {
+        name: "",
+        parameterNames: ["one", "two", "three"],
+      };
+      returnedSpan = render({ func: item });
+      children = returnedSpan.children();
+    });
+
+    it("should render spans according to the dynamic params given", () => {
+      expect(children).toHaveLength(8);
+    });
+
+    it("should render the parameters names", () => {
+      expect(returnedSpan.childAt(2).text()).toEqual("one");
+    });
+
+    it("should render the parameters commas", () => {
+      expect(returnedSpan.childAt(3).text()).toEqual(", ");
+    });
+  });
+});
diff --git a/devtools/client/debugger/src/components/shared/tests/ResultList.spec.js b/devtools/client/debugger/src/components/shared/tests/ResultList.spec.js
new file mode 100644
index 0000000000..4cdc85fb23
--- /dev/null
+++ b/devtools/client/debugger/src/components/shared/tests/ResultList.spec.js
@@ -0,0 +1,48 @@
+/* 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/>. */
+
+import React from "devtools/client/shared/vendor/react";
+import { shallow } from "enzyme";
+import ResultList from "../ResultList";
+
+const selectItem = jest.fn();
+const selectedIndex = 1;
+const payload = {
+  items: [
+    {
+      id: 0,
+      subtitle: "subtitle",
+      title: "title",
+      value: "value",
+    },
+    {
+      id: 1,
+      subtitle: "subtitle 1",
+      title: "title 1",
+      value: "value 1",
+    },
+  ],
+  selected: selectedIndex,
+  selectItem,
+};
+
+describe("Result list", () => {
+  it("should call onClick function", () => {
+    const wrapper = shallow(React.createElement(ResultList, payload));
+    wrapper.childAt(selectedIndex).simulate("click");
+    expect(selectItem).toHaveBeenCalled();
+  });
+
+  it("should render the component", () => {
+    const wrapper = shallow(React.createElement(ResultList, payload));
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("selected index should have 'selected class'", () => {
+    const wrapper = shallow(React.createElement(ResultList, payload));
+    const childHasClass = wrapper.childAt(selectedIndex).hasClass("selected");
+
+    expect(childHasClass).toEqual(true);
+  });
+});
diff --git a/devtools/client/debugger/src/components/shared/tests/SearchInput.spec.js b/devtools/client/debugger/src/components/shared/tests/SearchInput.spec.js
new file mode 100644
index 0000000000..c4c3990771
--- /dev/null
+++ b/devtools/client/debugger/src/components/shared/tests/SearchInput.spec.js
@@ -0,0 +1,126 @@
+/* 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/>. */
+
+import React from "devtools/client/shared/vendor/react";
+import { shallow } from "enzyme";
+import configureStore from "redux-mock-store";
+
+import SearchInput from "../SearchInput";
+
+describe("SearchInput", () => {
+  // !! wrapper is defined outside test scope
+  // so it will keep values between tests
+  const mockStore = configureStore([]);
+  const store = mockStore({
+    ui: { mutableSearchOptions: { "foo-search": {} } },
+  });
+  const wrapper = shallow(
+    React.createElement(SearchInput, {
+      store: store,
+      query: "",
+      count: 5,
+      placeholder: "A placeholder",
+      summaryMsg: "So many results",
+      showErrorEmoji: false,
+      isLoading: false,
+      onChange: () => {},
+      onKeyDown: () => {},
+      searchKey: "foo-search",
+      showSearchModifiers: false,
+      showExcludePatterns: false,
+      showClose: true,
+      handleClose: jest.fn(),
+      setSearchOptions: jest.fn(),
+    })
+  ).dive();
+
+  it("renders", () => expect(wrapper).toMatchSnapshot());
+
+  it("shows nav buttons", () => {
+    wrapper.setProps({
+      handleNext: jest.fn(),
+      handlePrev: jest.fn(),
+    });
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("shows svg error emoji", () => {
+    wrapper.setProps({ showErrorEmoji: true });
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("shows svg magnifying glass", () => {
+    wrapper.setProps({ showErrorEmoji: false });
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  describe("with optional onHistoryScroll", () => {
+    const searches = ["foo", "bar", "baz"];
+    const createSearch = term => ({
+      target: { value: term },
+      key: "Enter",
+    });
+
+    const scrollUp = currentTerm => ({
+      key: "ArrowUp",
+      target: { value: currentTerm },
+      preventDefault: jest.fn(),
+    });
+    const scrollDown = currentTerm => ({
+      key: "ArrowDown",
+      target: { value: currentTerm },
+      preventDefault: jest.fn(),
+    });
+
+    it("stores entered history in state", () => {
+      wrapper.setProps({
+        onHistoryScroll: jest.fn(),
+        onKeyDown: jest.fn(),
+      });
+      wrapper.find("input").simulate("keyDown", createSearch(searches[0]));
+      expect(wrapper.state().history[0]).toEqual(searches[0]);
+    });
+
+    it("stores scroll history in state", () => {
+      const onHistoryScroll = jest.fn();
+      wrapper.setProps({
+        onHistoryScroll,
+        onKeyDown: jest.fn(),
+      });
+      wrapper.find("input").simulate("keyDown", createSearch(searches[0]));
+      wrapper.find("input").simulate("keyDown", createSearch(searches[1]));
+      expect(wrapper.state().history[0]).toEqual(searches[0]);
+      expect(wrapper.state().history[1]).toEqual(searches[1]);
+    });
+
+    it("scrolls up stored history on arrow up", () => {
+      const onHistoryScroll = jest.fn();
+      wrapper.setProps({
+        onHistoryScroll,
+        onKeyDown: jest.fn(),
+      });
+      wrapper.find("input").simulate("keyDown", createSearch(searches[0]));
+      wrapper.find("input").simulate("keyDown", createSearch(searches[1]));
+      wrapper.find("input").simulate("keyDown", scrollUp(searches[1]));
+      expect(wrapper.state().history[0]).toEqual(searches[0]);
+      expect(wrapper.state().history[1]).toEqual(searches[1]);
+      expect(onHistoryScroll).toHaveBeenCalledWith(searches[0]);
+    });
+
+    it("scrolls down stored history on arrow down", () => {
+      const onHistoryScroll = jest.fn();
+      wrapper.setProps({
+        onHistoryScroll,
+        onKeyDown: jest.fn(),
+      });
+      wrapper.find("input").simulate("keyDown", createSearch(searches[0]));
+      wrapper.find("input").simulate("keyDown", createSearch(searches[1]));
+      wrapper.find("input").simulate("keyDown", createSearch(searches[2]));
+      wrapper.find("input").simulate("keyDown", scrollUp(searches[2]));
+      wrapper.find("input").simulate("keyDown", scrollUp(searches[1]));
+      wrapper.find("input").simulate("keyDown", scrollDown(searches[0]));
+      expect(onHistoryScroll.mock.calls[2][0]).toBe(searches[1]);
+    });
+  });
+});
diff --git a/devtools/client/debugger/src/components/shared/tests/__snapshots__/Accordion.spec.js.snap b/devtools/client/debugger/src/components/shared/tests/__snapshots__/Accordion.spec.js.snap
new file mode 100644
index 0000000000..abd8f10f51
--- /dev/null
+++ b/devtools/client/debugger/src/components/shared/tests/__snapshots__/Accordion.spec.js.snap
@@ -0,0 +1,81 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Accordion basic render 1`] = `
+<div
+  className="accordion"
+>
+  <aside
+    aria-labelledby="accordion-item-1"
+    className="accordion-item-1"
+    key="accordion-item-1"
+  >
+    <h2
+      className="_header"
+    >
+      <button
+        aria-controls="accordion-item-1-content"
+        aria-expanded="true"
+        className="header-label"
+        id="accordion-item-1"
+        onClick={[Function]}
+      >
+        Test Accordion Item 1
+      </button>
+    </h2>
+    <div
+      className="_content"
+      id="accordion-item-1-content"
+    >
+      <div />
+    </div>
+  </aside>
+  <aside
+    aria-labelledby="accordion-item-2"
+    className="accordion-item-2"
+    key="accordion-item-2"
+  >
+    <h2
+      className="_header"
+    >
+      <button
+        aria-expanded="false"
+        className="header-label"
+        id="accordion-item-2"
+        onClick={[Function]}
+      >
+        Test Accordion Item 2
+      </button>
+      <div
+        className="header-buttons"
+      >
+        <button />
+      </div>
+    </h2>
+  </aside>
+  <aside
+    aria-labelledby="accordion-item-3"
+    className="accordion-item-3"
+    key="accordion-item-3"
+  >
+    <h2
+      className="_header"
+    >
+      <button
+        aria-controls="accordion-item-3-content"
+        aria-expanded="true"
+        className="header-label"
+        id="accordion-item-3"
+        onClick={[Function]}
+      >
+        Test Accordion Item 3
+      </button>
+    </h2>
+    <div
+      className="_content"
+      id="accordion-item-3-content"
+    >
+      <div />
+    </div>
+  </aside>
+</div>
+`;
diff --git a/devtools/client/debugger/src/components/shared/tests/__snapshots__/Badge.spec.js.snap b/devtools/client/debugger/src/components/shared/tests/__snapshots__/Badge.spec.js.snap
new file mode 100644
index 0000000000..cbeeeaa3f2
--- /dev/null
+++ b/devtools/client/debugger/src/components/shared/tests/__snapshots__/Badge.spec.js.snap
@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Badge render 1`] = `
+<span
+  className="badge text-white text-center"
+>
+  3
+</span>
+`;
diff --git a/devtools/client/debugger/src/components/shared/tests/__snapshots__/BracketArrow.spec.js.snap b/devtools/client/debugger/src/components/shared/tests/__snapshots__/BracketArrow.spec.js.snap
new file mode 100644
index 0000000000..5078cebc9e
--- /dev/null
+++ b/devtools/client/debugger/src/components/shared/tests/__snapshots__/BracketArrow.spec.js.snap
@@ -0,0 +1,27 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BracketArrow render 1`] = `
+<div
+  className="bracket-arrow down"
+  style={
+    Object {
+      "bottom": 50,
+      "left": 10,
+      "top": 20,
+    }
+  }
+/>
+`;
+
+exports[`BracketArrow render up 1`] = `
+<div
+  className="bracket-arrow up"
+  style={
+    Object {
+      "bottom": 50,
+      "left": 10,
+      "top": 20,
+    }
+  }
+/>
+`;
diff --git a/devtools/client/debugger/src/components/shared/tests/__snapshots__/Dropdown.spec.js.snap b/devtools/client/debugger/src/components/shared/tests/__snapshots__/Dropdown.spec.js.snap
new file mode 100644
index 0000000000..fd60784327
--- /dev/null
+++ b/devtools/client/debugger/src/components/shared/tests/__snapshots__/Dropdown.spec.js.snap
@@ -0,0 +1,34 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Dropdown render 1`] = `
+<div
+  className="dropdown-block"
+>
+  <div
+    className="dropdown"
+    onClick={[Function]}
+    style={
+      Object {
+        "display": "block",
+      }
+    }
+  >
+    <div />
+  </div>
+  <button
+    className="dropdown-button"
+    onClick={[Function]}
+  >
+    ✅
+  </button>
+  <div
+    className="dropdown-mask"
+    onClick={[Function]}
+    style={
+      Object {
+        "display": "block",
+      }
+    }
+  />
+</div>
+`;
diff --git a/devtools/client/debugger/src/components/shared/tests/__snapshots__/Modal.spec.js.snap b/devtools/client/debugger/src/components/shared/tests/__snapshots__/Modal.spec.js.snap
new file mode 100644
index 0000000000..c8534c4032
--- /dev/null
+++ b/devtools/client/debugger/src/components/shared/tests/__snapshots__/Modal.spec.js.snap
@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Modal renders 1`] = `
+<div
+  className="modal-wrapper"
+  onClick={[Function]}
+>
+  <div
+    className="modal"
+    onClick={[Function]}
+  />
+</div>
+`;
diff --git a/devtools/client/debugger/src/components/shared/tests/__snapshots__/Popover.spec.js.snap b/devtools/client/debugger/src/components/shared/tests/__snapshots__/Popover.spec.js.snap
new file mode 100644
index 0000000000..1c3589a6f8
--- /dev/null
+++ b/devtools/client/debugger/src/components/shared/tests/__snapshots__/Popover.spec.js.snap
@@ -0,0 +1,549 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Popover mount popover 1`] = `
+<Popover
+  editorRef={
+    Object {
+      "getBoundingClientRect": [Function],
+    }
+  }
+  mouseout={[Function]}
+  onKeyDown={[MockFunction]}
+  onMouseLeave={[MockFunction]}
+  target={
+    Object {
+      "getBoundingClientRect": [Function],
+    }
+  }
+  targetPosition={
+    Object {
+      "bottom": 0,
+      "height": 300,
+      "left": 200,
+      "right": 0,
+      "top": 50,
+      "width": 300,
+      "x": 100,
+      "y": 200,
+    }
+  }
+  type="popover"
+>
+  <div
+    className="popover orientation-right"
+    style={
+      Object {
+        "left": 500,
+        "top": -50,
+      }
+    }
+  >
+    <BracketArrow
+      left={-4}
+      orientation="left"
+      top={98}
+    >
+      <div
+        className="bracket-arrow left"
+        style={
+          Object {
+            "bottom": undefined,
+            "left": -4,
+            "top": 98,
+          }
+        }
+      />
+    </BracketArrow>
+    <div
+      className="gap"
+      key="gap"
+    >
+      <SmartGap
+        coords={
+          Object {
+            "left": 500,
+            "orientation": "right",
+            "targetMid": Object {
+              "x": -14,
+              "y": 98,
+            },
+            "top": -50,
+          }
+        }
+        gapHeight={0}
+        offset={0}
+        preview={
+          <div
+            class="popover orientation-right"
+            style="top: -50px; left: 500px;"
+          >
+            <div
+              class="bracket-arrow left"
+              style="left: -4px; top: 98px;"
+            />
+            <div
+              class="gap"
+            >
+              <svg
+                style="height: 0px; width: 480px; position: absolute; margin-left: -100px;"
+                version="1.1"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <polygon
+                  fill="transparent"
+                  points="0,300,100,0,100,0,0,400,100,400,100,300"
+                />
+              </svg>
+            </div>
+            <h1>
+              Poppy!
+            </h1>
+          </div>
+        }
+        token={
+          Object {
+            "getBoundingClientRect": [Function],
+          }
+        }
+        type="popover"
+      >
+        <svg
+          style={
+            Object {
+              "height": 0,
+              "marginLeft": -100,
+              "marginTop": undefined,
+              "position": "absolute",
+              "width": 480,
+            }
+          }
+          version="1.1"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <polygon
+            fill="transparent"
+            points={
+              Array [
+                0,
+                300,
+                100,
+                0,
+                100,
+                0,
+                0,
+                400,
+                100,
+                400,
+                100,
+                300,
+              ]
+            }
+          />
+        </svg>
+      </SmartGap>
+    </div>
+    <h1>
+      Poppy!
+    </h1>
+  </div>
+</Popover>
+`;
+
+exports[`Popover mount tooltip 1`] = `
+<Popover
+  editorRef={
+    Object {
+      "getBoundingClientRect": [Function],
+    }
+  }
+  mouseout={[Function]}
+  onKeyDown={[MockFunction]}
+  onMouseLeave={[MockFunction]}
+  target={
+    Object {
+      "getBoundingClientRect": [Function],
+    }
+  }
+  targetPosition={
+    Object {
+      "bottom": 0,
+      "height": 300,
+      "left": 200,
+      "right": 0,
+      "top": 50,
+      "width": 300,
+      "x": 100,
+      "y": 200,
+    }
+  }
+  type="tooltip"
+>
+  <div
+    className="tooltip orientation-down"
+    style={
+      Object {
+        "left": -8,
+        "top": 0,
+      }
+    }
+  >
+    <div
+      className="gap"
+      key="gap"
+    >
+      <SmartGap
+        coords={
+          Object {
+            "left": -8,
+            "orientation": "down",
+            "targetMid": Object {
+              "x": 0,
+              "y": 0,
+            },
+            "top": 0,
+          }
+        }
+        gapHeight={0}
+        offset={0}
+        preview={
+          <div
+            class="tooltip orientation-down"
+            style="top: 0px; left: -8px;"
+          >
+            <div
+              class="gap"
+            >
+              <svg
+                style="height: -250px; width: 100px; position: absolute; margin-top: -100px;"
+                version="1.1"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <polygon
+                  fill="transparent"
+                  points="0,-250,0,-250,28,100,128,100"
+                />
+              </svg>
+            </div>
+            <h1>
+              Toolie!
+            </h1>
+          </div>
+        }
+        token={
+          Object {
+            "getBoundingClientRect": [Function],
+          }
+        }
+        type="tooltip"
+      >
+        <svg
+          style={
+            Object {
+              "height": -250,
+              "marginLeft": undefined,
+              "marginTop": -100,
+              "position": "absolute",
+              "width": 100,
+            }
+          }
+          version="1.1"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <polygon
+            fill="transparent"
+            points={
+              Array [
+                0,
+                -250,
+                0,
+                -250,
+                28,
+                100,
+                128,
+                100,
+              ]
+            }
+          />
+        </svg>
+      </SmartGap>
+    </div>
+    <h1>
+      Toolie!
+    </h1>
+  </div>
+</Popover>
+`;
+
+exports[`Popover render (tooltip) 1`] = `
+<Popover
+  editorRef={
+    Object {
+      "getBoundingClientRect": [Function],
+    }
+  }
+  mouseout={[Function]}
+  onKeyDown={[MockFunction]}
+  onMouseLeave={[MockFunction]}
+  target={
+    Object {
+      "getBoundingClientRect": [Function],
+    }
+  }
+  targetPosition={
+    Object {
+      "bottom": 0,
+      "height": 300,
+      "left": 200,
+      "right": 0,
+      "top": 50,
+      "width": 300,
+      "x": 100,
+      "y": 200,
+    }
+  }
+  type="tooltip"
+>
+  <div
+    className="tooltip orientation-down"
+    style={
+      Object {
+        "left": -8,
+        "top": 0,
+      }
+    }
+  >
+    <div
+      className="gap"
+      key="gap"
+    >
+      <SmartGap
+        coords={
+          Object {
+            "left": -8,
+            "orientation": "down",
+            "targetMid": Object {
+              "x": 0,
+              "y": 0,
+            },
+            "top": 0,
+          }
+        }
+        gapHeight={0}
+        offset={0}
+        preview={
+          <div
+            class="tooltip orientation-down"
+            style="top: 0px; left: -8px;"
+          >
+            <div
+              class="gap"
+            >
+              <svg
+                style="height: -250px; width: 100px; position: absolute; margin-top: -100px;"
+                version="1.1"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <polygon
+                  fill="transparent"
+                  points="0,-250,0,-250,28,100,128,100"
+                />
+              </svg>
+            </div>
+            <h1>
+              Toolie!
+            </h1>
+          </div>
+        }
+        token={
+          Object {
+            "getBoundingClientRect": [Function],
+          }
+        }
+        type="tooltip"
+      >
+        <svg
+          style={
+            Object {
+              "height": -250,
+              "marginLeft": undefined,
+              "marginTop": -100,
+              "position": "absolute",
+              "width": 100,
+            }
+          }
+          version="1.1"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <polygon
+            fill="transparent"
+            points={
+              Array [
+                0,
+                -250,
+                0,
+                -250,
+                28,
+                100,
+                128,
+                100,
+              ]
+            }
+          />
+        </svg>
+      </SmartGap>
+    </div>
+    <h1>
+      Toolie!
+    </h1>
+  </div>
+</Popover>
+`;
+
+exports[`Popover render 1`] = `
+<Popover
+  editorRef={
+    Object {
+      "getBoundingClientRect": [Function],
+    }
+  }
+  mouseout={[Function]}
+  onKeyDown={[MockFunction]}
+  onMouseLeave={[MockFunction]}
+  target={
+    Object {
+      "getBoundingClientRect": [Function],
+    }
+  }
+  targetPosition={
+    Object {
+      "bottom": 0,
+      "height": 300,
+      "left": 200,
+      "right": 0,
+      "top": 50,
+      "width": 300,
+      "x": 100,
+      "y": 200,
+    }
+  }
+  type="popover"
+>
+  <div
+    className="popover orientation-right"
+    style={
+      Object {
+        "left": 500,
+        "top": -50,
+      }
+    }
+  >
+    <BracketArrow
+      left={-4}
+      orientation="left"
+      top={98}
+    >
+      <div
+        className="bracket-arrow left"
+        style={
+          Object {
+            "bottom": undefined,
+            "left": -4,
+            "top": 98,
+          }
+        }
+      />
+    </BracketArrow>
+    <div
+      className="gap"
+      key="gap"
+    >
+      <SmartGap
+        coords={
+          Object {
+            "left": 500,
+            "orientation": "right",
+            "targetMid": Object {
+              "x": -14,
+              "y": 98,
+            },
+            "top": -50,
+          }
+        }
+        gapHeight={0}
+        offset={0}
+        preview={
+          <div
+            class="popover orientation-right"
+            style="top: -50px; left: 500px;"
+          >
+            <div
+              class="bracket-arrow left"
+              style="left: -4px; top: 98px;"
+            />
+            <div
+              class="gap"
+            >
+              <svg
+                style="height: 0px; width: 480px; position: absolute; margin-left: -100px;"
+                version="1.1"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <polygon
+                  fill="transparent"
+                  points="0,300,100,0,100,0,0,400,100,400,100,300"
+                />
+              </svg>
+            </div>
+            <h1>
+              Poppy!
+            </h1>
+          </div>
+        }
+        token={
+          Object {
+            "getBoundingClientRect": [Function],
+          }
+        }
+        type="popover"
+      >
+        <svg
+          style={
+            Object {
+              "height": 0,
+              "marginLeft": -100,
+              "marginTop": undefined,
+              "position": "absolute",
+              "width": 480,
+            }
+          }
+          version="1.1"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <polygon
+            fill="transparent"
+            points={
+              Array [
+                0,
+                300,
+                100,
+                0,
+                100,
+                0,
+                0,
+                400,
+                100,
+                400,
+                100,
+                300,
+              ]
+            }
+          />
+        </svg>
+      </SmartGap>
+    </div>
+    <h1>
+      Poppy!
+    </h1>
+  </div>
+</Popover>
+`;
diff --git a/devtools/client/debugger/src/components/shared/tests/__snapshots__/PreviewFunction.spec.js.snap b/devtools/client/debugger/src/components/shared/tests/__snapshots__/PreviewFunction.spec.js.snap
new file mode 100644
index 0000000000..e766bd45aa
--- /dev/null
+++ b/devtools/client/debugger/src/components/shared/tests/__snapshots__/PreviewFunction.spec.js.snap
@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PreviewFunction should return a span 1`] = `
+<span
+  className="function-signature"
+>
+  <span
+    className="function-name"
+  >
+    &lt;anonymous&gt;
+  </span>
+  <span
+    className="paren"
+  >
+    (
+  </span>
+  <span
+    className="paren"
+  >
+    )
+  </span>
+</span>
+`;
diff --git a/devtools/client/debugger/src/components/shared/tests/__snapshots__/ResultList.spec.js.snap b/devtools/client/debugger/src/components/shared/tests/__snapshots__/ResultList.spec.js.snap
new file mode 100644
index 0000000000..d3d8b27575
--- /dev/null
+++ b/devtools/client/debugger/src/components/shared/tests/__snapshots__/ResultList.spec.js.snap
@@ -0,0 +1,55 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Result list should render the component 1`] = `
+<ul
+  aria-live="polite"
+  className="result-list small"
+  id="result-list"
+  role="listbox"
+>
+  <li
+    aria-describedby="0-subtitle"
+    aria-labelledby="0-title"
+    className="result-item"
+    key="0value0"
+    onClick={[Function]}
+    role="option"
+    title="value"
+  >
+    <div
+      className="title"
+      id="0-title"
+    >
+      title
+    </div>
+    <div
+      className="subtitle"
+      id="0-subtitle"
+    >
+      subtitle
+    </div>
+  </li>
+  <li
+    aria-describedby="1-subtitle"
+    aria-labelledby="1-title"
+    className="result-item selected"
+    key="1value 11"
+    onClick={[Function]}
+    role="option"
+    title="value 1"
+  >
+    <div
+      className="title"
+      id="1-title"
+    >
+      title 1
+    </div>
+    <div
+      className="subtitle"
+      id="1-subtitle"
+    >
+      subtitle 1
+    </div>
+  </li>
+</ul>
+`;
diff --git a/devtools/client/debugger/src/components/shared/tests/__snapshots__/SearchInput.spec.js.snap b/devtools/client/debugger/src/components/shared/tests/__snapshots__/SearchInput.spec.js.snap
new file mode 100644
index 0000000000..c56a13dc3b
--- /dev/null
+++ b/devtools/client/debugger/src/components/shared/tests/__snapshots__/SearchInput.spec.js.snap
@@ -0,0 +1,267 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SearchInput renders 1`] = `
+<div
+  className="search-outline"
+>
+  <div
+    aria-expanded={false}
+    aria-haspopup="listbox"
+    aria-owns="result-list"
+    className="search-field"
+    role="combobox"
+  >
+    <AccessibleImage
+      className="search"
+    />
+    <input
+      aria-activedescendant=""
+      aria-autocomplete="list"
+      aria-controls="result-list"
+      className=""
+      onBlur={[Function]}
+      onChange={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      placeholder="A placeholder"
+      spellCheck={false}
+      value=""
+    />
+    <div
+      className="search-field-summary"
+    >
+      So many results
+    </div>
+    <div
+      className="search-buttons-bar"
+    >
+      <span
+        className="pipe-divider"
+      />
+      <CloseButton
+        buttonClass=""
+        handleClick={[MockFunction]}
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`SearchInput shows nav buttons 1`] = `
+<div
+  className="search-outline"
+>
+  <div
+    aria-expanded={false}
+    aria-haspopup="listbox"
+    aria-owns="result-list"
+    className="search-field"
+    role="combobox"
+  >
+    <AccessibleImage
+      className="search"
+    />
+    <input
+      aria-activedescendant=""
+      aria-autocomplete="list"
+      aria-controls="result-list"
+      className=""
+      onBlur={[Function]}
+      onChange={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      placeholder="A placeholder"
+      spellCheck={false}
+      value=""
+    />
+    <div
+      className="search-field-summary"
+    >
+      So many results
+    </div>
+    <div
+      className="search-nav-buttons"
+    >
+      <button
+        className="nav-btn prev"
+        key="arrow-up"
+        onClick={[MockFunction]}
+        title="Previous result"
+        type="arrow-up"
+      >
+        <AccessibleImage
+          className="arrow-up"
+        />
+      </button>
+      <button
+        className="nav-btn next"
+        key="arrow-down"
+        onClick={[MockFunction]}
+        title="Next result"
+        type="arrow-down"
+      >
+        <AccessibleImage
+          className="arrow-down"
+        />
+      </button>
+    </div>
+    <div
+      className="search-buttons-bar"
+    >
+      <span
+        className="pipe-divider"
+      />
+      <CloseButton
+        buttonClass=""
+        handleClick={[MockFunction]}
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`SearchInput shows svg error emoji 1`] = `
+<div
+  className="search-outline"
+>
+  <div
+    aria-expanded={false}
+    aria-haspopup="listbox"
+    aria-owns="result-list"
+    className="search-field"
+    role="combobox"
+  >
+    <AccessibleImage
+      className="search"
+    />
+    <input
+      aria-activedescendant=""
+      aria-autocomplete="list"
+      aria-controls="result-list"
+      className="empty"
+      onBlur={[Function]}
+      onChange={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      placeholder="A placeholder"
+      spellCheck={false}
+      value=""
+    />
+    <div
+      className="search-field-summary"
+    >
+      So many results
+    </div>
+    <div
+      className="search-nav-buttons"
+    >
+      <button
+        className="nav-btn prev"
+        key="arrow-up"
+        onClick={[MockFunction]}
+        title="Previous result"
+        type="arrow-up"
+      >
+        <AccessibleImage
+          className="arrow-up"
+        />
+      </button>
+      <button
+        className="nav-btn next"
+        key="arrow-down"
+        onClick={[MockFunction]}
+        title="Next result"
+        type="arrow-down"
+      >
+        <AccessibleImage
+          className="arrow-down"
+        />
+      </button>
+    </div>
+    <div
+      className="search-buttons-bar"
+    >
+      <span
+        className="pipe-divider"
+      />
+      <CloseButton
+        buttonClass=""
+        handleClick={[MockFunction]}
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`SearchInput shows svg magnifying glass 1`] = `
+<div
+  className="search-outline"
+>
+  <div
+    aria-expanded={false}
+    aria-haspopup="listbox"
+    aria-owns="result-list"
+    className="search-field"
+    role="combobox"
+  >
+    <AccessibleImage
+      className="search"
+    />
+    <input
+      aria-activedescendant=""
+      aria-autocomplete="list"
+      aria-controls="result-list"
+      className=""
+      onBlur={[Function]}
+      onChange={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      placeholder="A placeholder"
+      spellCheck={false}
+      value=""
+    />
+    <div
+      className="search-field-summary"
+    >
+      So many results
+    </div>
+    <div
+      className="search-nav-buttons"
+    >
+      <button
+        className="nav-btn prev"
+        key="arrow-up"
+        onClick={[MockFunction]}
+        title="Previous result"
+        type="arrow-up"
+      >
+        <AccessibleImage
+          className="arrow-up"
+        />
+      </button>
+      <button
+        className="nav-btn next"
+        key="arrow-down"
+        onClick={[MockFunction]}
+        title="Next result"
+        type="arrow-down"
+      >
+        <AccessibleImage
+          className="arrow-down"
+        />
+      </button>
+    </div>
+    <div
+      className="search-buttons-bar"
+    >
+      <span
+        className="pipe-divider"
+      />
+      <CloseButton
+        buttonClass=""
+        handleClick={[MockFunction]}
+      />
+    </div>
+  </div>
+</div>
+`;