diff options
Diffstat (limited to 'devtools/client/inspector/test/browser_inspector_addSidebarTab.js')
-rw-r--r-- | devtools/client/inspector/test/browser_inspector_addSidebarTab.js | 63 |
1 files changed, 63 insertions, 0 deletions
diff --git a/devtools/client/inspector/test/browser_inspector_addSidebarTab.js b/devtools/client/inspector/test/browser_inspector_addSidebarTab.js new file mode 100644 index 0000000000..d7c810d3c6 --- /dev/null +++ b/devtools/client/inspector/test/browser_inspector_addSidebarTab.js @@ -0,0 +1,63 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ +"use strict"; + +const TEST_URI = + "data:text/html;charset=UTF-8," + "<h1>browser_inspector_addtabbar.js</h1>"; + +const CONTENT_TEXT = "Hello World!"; + +/** + * Verify InspectorPanel.addSidebarTab() API that can be consumed + * by DevTools extensions as well as DevTools code base. + */ +add_task(async function () { + const { inspector } = await openInspectorForURL(TEST_URI); + + const { Component, createFactory } = inspector.React; + const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js"); + const { div } = dom; + + info("Adding custom panel."); + + // Define custom side-panel. + class myTabPanel extends Component { + render() { + return div({ className: "my-tab-panel" }, CONTENT_TEXT); + } + } + let tabPanel = createFactory(myTabPanel); + + // Append custom panel (tab) into the Inspector panel and + // make sure it's selected by default (the last arg = true). + inspector.addSidebarTab("myPanel", "My Panel", tabPanel, true); + is( + inspector.sidebar.getCurrentTabID(), + "myPanel", + "My Panel is selected by default" + ); + + // Define another custom side-panel. + class myTabPanel2 extends Component { + render() { + return div({ className: "my-tab-panel2" }, "Another Content"); + } + } + tabPanel = createFactory(myTabPanel2); + + // Append second panel, but don't select it by default. + inspector.addSidebarTab("myPanel", "My Panel", tabPanel, false); + is( + inspector.sidebar.getCurrentTabID(), + "myPanel", + "My Panel is selected by default" + ); + + // Check the the panel content is properly rendered. + const tabPanelNode = inspector.panelDoc.querySelector(".my-tab-panel"); + is( + tabPanelNode.textContent, + CONTENT_TEXT, + "Side panel content has been rendered." + ); +}); |