Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
/* Any copyright is dedicated to the Public Domain.
"use strict";
/**
* Unit tests for the PanelMultiView module.
*/
const PANELS_COUNT = 2;
let gPanelAnchors = [];
let gPanels = [];
let gPanelMultiViews = [];
const PANELVIEWS_COUNT = 4;
let gPanelViews = [];
let gPanelViewLabels = [];
const EVENT_TYPES = [
"popupshown",
"popuphidden",
"PanelMultiViewHidden",
"ViewShowing",
"ViewShown",
"ViewHiding",
];
/**
* Checks that the element is displayed, including the state of the popup where
* the element is located. This can trigger a synchronous reflow if necessary,
* because even though the code under test is designed to avoid synchronous
* reflows, it can raise completion events while a layout flush is still needed.
*
* In production code, event handlers for ViewShown have to wait for a flush if
* they need to read style or layout information, like other code normally does.
*/
function is_visible(element) {
let win = element.ownerGlobal;
let style = win.getComputedStyle(element);
if (style.display == "none") {
return false;
}
if (style.visibility != "visible") {
return false;
}
if (win.XULPopupElement.isInstance(element) && element.state != "open") {
return false;
}
// Hiding a parent element will hide all its children
if (element.parentNode != element.ownerDocument) {
return is_visible(element.parentNode);
}
return true;
}
/**
* Checks whether the label in the specified view is visible.
*/
function assertLabelVisible(viewIndex, expectedVisible) {
Assert.equal(
is_visible(gPanelViewLabels[viewIndex]),
expectedVisible,
`Visibility of label in view ${viewIndex}`
);
}
/**
* Opens the specified view as the main view in the specified panel.
*/
async function openPopup(panelIndex, viewIndex) {
gPanelMultiViews[panelIndex].setAttribute(
"mainViewId",
gPanelViews[viewIndex].id
);
let promiseShown = BrowserTestUtils.waitForEvent(
gPanelViews[viewIndex],
"ViewShown"
);
PanelMultiView.openPopup(
gPanels[panelIndex],
gPanelAnchors[panelIndex],
"bottomright topright"
);
await promiseShown;
Assert.ok(PanelView.forNode(gPanelViews[viewIndex]).active);
assertLabelVisible(viewIndex, true);
}
/**
* Closes the specified panel.
*/
async function hidePopup(panelIndex) {
gPanelMultiViews[panelIndex].setAttribute(
"mainViewId",
gPanelViews[panelIndex].id
);
let promiseHidden = BrowserTestUtils.waitForEvent(
gPanels[panelIndex],
"popuphidden"
);
PanelMultiView.hidePopup(gPanels[panelIndex]);
await promiseHidden;
}
/**
* Opens the specified subview in the specified panel.
*/
async function showSubView(panelIndex, viewIndex) {
let promiseShown = BrowserTestUtils.waitForEvent(
gPanelViews[viewIndex],
"ViewShown"
);
gPanelMultiViews[panelIndex].showSubView(gPanelViews[viewIndex]);
await promiseShown;
Assert.ok(PanelView.forNode(gPanelViews[viewIndex]).active);
assertLabelVisible(viewIndex, true);
}
/**
* Navigates backwards to the specified view, which is displayed as a result.
*/
async function goBack(panelIndex, viewIndex) {
let promiseShown = BrowserTestUtils.waitForEvent(
gPanelViews[viewIndex],
"ViewShown"
);
gPanelMultiViews[panelIndex].goBack();
await promiseShown;
Assert.ok(PanelView.forNode(gPanelViews[viewIndex]).active);
assertLabelVisible(viewIndex, true);
}
/**
* Records the specified events on an element into the specified array. An
* optional callback can be used to respond to events and trigger nested events.
*/
function recordEvents(
element,
eventTypes,
recordArray,
eventCallback = () => {}
) {
let nestedEvents = [];
element.recorders = eventTypes.map(eventType => {
let recorder = {
eventType,
listener(event) {
let eventString =
nestedEvents.join("") + `${event.originalTarget.id}: ${event.type}`;
info(`Event on ${eventString}`);
recordArray.push(eventString);
// Any synchronous event triggered from within the given callback will
// include information about the current event.
nestedEvents.unshift(`${eventString} > `);
eventCallback(event);
nestedEvents.shift();
},
};
element.addEventListener(recorder.eventType, recorder.listener);
return recorder;
});
}
/**
* Stops recording events on an element.
*/
function stopRecordingEvents(element) {
for (let recorder of element.recorders) {
element.removeEventListener(recorder.eventType, recorder.listener);
}
delete element.recorders;
}
/**
* Sets up the elements in the browser window that will be used by all the other
* regression tests. Since the panel and view elements can live anywhere in the
* document, they are simply added to the same toolbar as the panel anchors.
*
* <toolbar id="nav-bar">
* <toolbarbutton/> -> gPanelAnchors[panelIndex]
* <panel> -> gPanels[panelIndex]
* <panelmultiview/> -> gPanelMultiViews[panelIndex]
* </panel>
* <panelview> -> gPanelViews[viewIndex]
* <label/> -> gPanelViewLabels[viewIndex]
* </panelview>
* </toolbar>
*/
add_task(async function test_setup() {
let navBar = document.getElementById("nav-bar");
for (let i = 0; i < PANELS_COUNT; i++) {
gPanelAnchors[i] = document.createXULElement("toolbarbutton");
gPanelAnchors[i].classList.add(
"toolbarbutton-1",
"chromeclass-toolbar-additional"
);
navBar.appendChild(gPanelAnchors[i]);
gPanels[i] = document.createXULElement("panel");
gPanels[i].id = "panel-" + i;
gPanels[i].setAttribute("type", "arrow");
gPanels[i].setAttribute("photon", true);
navBar.appendChild(gPanels[i]);
gPanelMultiViews[i] = document.createXULElement("panelmultiview");
gPanelMultiViews[i].id = "panelmultiview-" + i;
gPanels[i].appendChild(gPanelMultiViews[i]);
}
for (let i = 0; i < PANELVIEWS_COUNT; i++) {
gPanelViews[i] = document.createXULElement("panelview");
gPanelViews[i].id = "panelview-" + i;
navBar.appendChild(gPanelViews[i]);
gPanelViewLabels[i] = document.createXULElement("label");
gPanelViewLabels[i].setAttribute("value", "PanelView " + i);
gPanelViews[i].appendChild(gPanelViewLabels[i]);
}
registerCleanupFunction(() => {
[...gPanelAnchors, ...gPanels, ...gPanelViews].forEach(e => e.remove());
});
});
/**
* Shows and hides all views in a panel with this static structure:
*
* - Panel 0
* - View 0
* - View 1
* - View 3
* - View 2
*/
add_task(async function test_simple() {
// Show main view 0.
await openPopup(0, 0);
// Show and hide subview 1.
await showSubView(0, 1);
assertLabelVisible(0, false);
await goBack(0, 0);
assertLabelVisible(1, false);
// Show subview 3.
await showSubView(0, 3);
assertLabelVisible(0, false);
// Show and hide subview 2.
await showSubView(0, 2);
assertLabelVisible(3, false);
await goBack(0, 3);
assertLabelVisible(2, false);
// Hide subview 3.
await goBack(0, 0);
assertLabelVisible(3, false);
// Hide main view 0.
await hidePopup(0);
assertLabelVisible(0, false);
});
/**
* Tests the event sequence in a panel with this static structure:
*
* - Panel 0
* - View 0
* - View 1
* - View 3
* - View 2
*/
add_task(async function test_simple_event_sequence() {
let recordArray = [];
recordEvents(gPanels[0], EVENT_TYPES, recordArray);
await openPopup(0, 0);
await showSubView(0, 1);
await goBack(0, 0);
await showSubView(0, 3);
await showSubView(0, 2);
await goBack(0, 3);
await goBack(0, 0);
await hidePopup(0);
stopRecordingEvents(gPanels[0]);
Assert.deepEqual(recordArray, [
"panelview-0: ViewShowing",
"panelview-0: ViewShown",
"panel-0: popupshown",
"panelview-1: ViewShowing",
"panelview-1: ViewShown",
"panelview-1: ViewHiding",
"panelview-0: ViewShown",
"panelview-3: ViewShowing",
"panelview-3: ViewShown",
"panelview-2: ViewShowing",
"panelview-2: ViewShown",
"panelview-2: ViewHiding",
"panelview-3: ViewShown",
"panelview-3: ViewHiding",
"panelview-0: ViewShown",
"panelview-0: ViewHiding",
"panelmultiview-0: PanelMultiViewHidden",
"panel-0: popuphidden",
]);
});
/**
* Tests that further navigation is suppressed until the new view is shown.
*/
add_task(async function test_navigation_suppression() {
await openPopup(0, 0);
// Test re-entering the "showSubView" method.
let promiseShown = BrowserTestUtils.waitForEvent(gPanelViews[1], "ViewShown");
gPanelMultiViews[0].showSubView(gPanelViews[1]);
Assert.ok(
!PanelView.forNode(gPanelViews[0]).active,
"The previous view should become inactive synchronously."
);
// The following call will have no effect.
gPanelMultiViews[0].showSubView(gPanelViews[2]);
await promiseShown;
// Test re-entering the "goBack" method.
promiseShown = BrowserTestUtils.waitForEvent(gPanelViews[0], "ViewShown");
gPanelMultiViews[0].goBack();
Assert.ok(
!PanelView.forNode(gPanelViews[1]).active,
"The previous view should become inactive synchronously."
);
// The following call will have no effect.
gPanelMultiViews[0].goBack();
await promiseShown;
// Main view 0 should be displayed.
assertLabelVisible(0, true);
await hidePopup(0);
});
/**
* Tests reusing views that are already open in another panel. In this test, the
* structure of the first panel will change dynamically:
*
* - Panel 0
* - View 0
* - View 1
* - Panel 1
* - View 1
* - View 2
* - Panel 0
* - View 1
* - View 0
*/
add_task(async function test_switch_event_sequence() {
let recordArray = [];
recordEvents(gPanels[0], EVENT_TYPES, recordArray);
recordEvents(gPanels[1], EVENT_TYPES, recordArray);
// Show panel 0.
await openPopup(0, 0);
await showSubView(0, 1);
// Show panel 1 with the view that is already open and visible in panel 0.
// This will close panel 0 automatically.
await openPopup(1, 1);
await showSubView(1, 2);
// Show panel 0 with a view that is already open but invisible in panel 1.
// This will close panel 1 automatically.
await openPopup(0, 1);
await showSubView(0, 0);
// Hide panel 0.
await hidePopup(0);
stopRecordingEvents(gPanels[0]);
stopRecordingEvents(gPanels[1]);
Assert.deepEqual(recordArray, [
"panelview-0: ViewShowing",
"panelview-0: ViewShown",
"panel-0: popupshown",
"panelview-1: ViewShowing",
"panelview-1: ViewShown",
"panelview-1: ViewHiding",
"panelview-0: ViewHiding",
"panelmultiview-0: PanelMultiViewHidden",
"panel-0: popuphidden",
"panelview-1: ViewShowing",
"panel-1: popupshown",
"panelview-1: ViewShown",
"panelview-2: ViewShowing",
"panelview-2: ViewShown",
"panel-1: popuphidden",
"panelview-2: ViewHiding",
"panelview-1: ViewHiding",
"panelmultiview-1: PanelMultiViewHidden",
"panelview-1: ViewShowing",
"panelview-1: ViewShown",
"panel-0: popupshown",
"panelview-0: ViewShowing",
"panelview-0: ViewShown",
"panelview-0: ViewHiding",
"panelview-1: ViewHiding",
"panelmultiview-0: PanelMultiViewHidden",
"panel-0: popuphidden",
]);
});
/**
* Tests the event sequence when opening the main view is canceled.
*/
add_task(async function test_cancel_mainview_event_sequence() {
let recordArray = [];
recordEvents(gPanels[0], EVENT_TYPES, recordArray, event => {
if (event.type == "ViewShowing") {
event.preventDefault();
}
});
gPanelMultiViews[0].setAttribute("mainViewId", gPanelViews[0].id);
let promiseHidden = BrowserTestUtils.waitForEvent(gPanels[0], "popuphidden");
PanelMultiView.openPopup(
gPanels[0],
gPanelAnchors[0],
"bottomright topright"
);
await promiseHidden;
stopRecordingEvents(gPanels[0]);
Assert.deepEqual(recordArray, [
"panelview-0: ViewShowing",
"panelview-0: ViewHiding",
"panelmultiview-0: PanelMultiViewHidden",
"panelmultiview-0: popuphidden",
]);
});
/**
* Tests the event sequence when opening a subview is canceled.
*/
add_task(async function test_cancel_subview_event_sequence() {
let recordArray = [];
recordEvents(gPanels[0], EVENT_TYPES, recordArray, event => {
if (
event.type == "ViewShowing" &&
event.originalTarget.id == gPanelViews[1].id
) {
event.preventDefault();
}
});
await openPopup(0, 0);
let promiseHiding = BrowserTestUtils.waitForEvent(
gPanelViews[1],
"ViewHiding"
);
gPanelMultiViews[0].showSubView(gPanelViews[1]);
await promiseHiding;
// Only the subview should have received the hidden event at this point.
Assert.deepEqual(recordArray, [
"panelview-0: ViewShowing",
"panelview-0: ViewShown",
"panel-0: popupshown",
"panelview-1: ViewShowing",
"panelview-1: ViewHiding",
]);
recordArray.length = 0;
await hidePopup(0);
stopRecordingEvents(gPanels[0]);
Assert.deepEqual(recordArray, [
"panelview-0: ViewHiding",
"panelmultiview-0: PanelMultiViewHidden",
"panel-0: popuphidden",
]);
});
/**
* Tests the event sequence when closing the panel while opening the main view.
*/
add_task(async function test_close_while_showing_mainview_event_sequence() {
let recordArray = [];
recordEvents(gPanels[0], EVENT_TYPES, recordArray, event => {
if (event.type == "ViewShowing") {
PanelMultiView.hidePopup(gPanels[0]);
}
});
gPanelMultiViews[0].setAttribute("mainViewId", gPanelViews[0].id);
let promiseHidden = BrowserTestUtils.waitForEvent(gPanels[0], "popuphidden");
let promiseHiding = BrowserTestUtils.waitForEvent(
gPanelViews[0],
"ViewHiding"
);
PanelMultiView.openPopup(
gPanels[0],
gPanelAnchors[0],
"bottomright topright"
);
await promiseHiding;
await promiseHidden;
stopRecordingEvents(gPanels[0]);
Assert.deepEqual(recordArray, [
"panelview-0: ViewShowing",
"panelview-0: ViewShowing > panelview-0: ViewHiding",
"panelview-0: ViewShowing > panelmultiview-0: PanelMultiViewHidden",
"panelview-0: ViewShowing > panelmultiview-0: popuphidden",
]);
});
/**
* Tests the event sequence when closing the panel while opening a subview.
*/
add_task(async function test_close_while_showing_subview_event_sequence() {
let recordArray = [];
recordEvents(gPanels[0], EVENT_TYPES, recordArray, event => {
if (
event.type == "ViewShowing" &&
event.originalTarget.id == gPanelViews[1].id
) {
PanelMultiView.hidePopup(gPanels[0]);
}
});
await openPopup(0, 0);
let promiseHidden = BrowserTestUtils.waitForEvent(gPanels[0], "popuphidden");
gPanelMultiViews[0].showSubView(gPanelViews[1]);
await promiseHidden;
stopRecordingEvents(gPanels[0]);
Assert.deepEqual(recordArray, [
"panelview-0: ViewShowing",
"panelview-0: ViewShown",
"panel-0: popupshown",
"panelview-1: ViewShowing",
"panelview-1: ViewShowing > panelview-1: ViewHiding",
"panelview-1: ViewShowing > panelview-0: ViewHiding",
"panelview-1: ViewShowing > panelmultiview-0: PanelMultiViewHidden",
"panelview-1: ViewShowing > panel-0: popuphidden",
]);
});