1 files changed, 117 insertions, 0 deletions
diff --git a/devtools/client/webconsole/test/browser/browser_webconsole_object_inspector_local_session_storage.js b/devtools/client/webconsole/test/browser/browser_webconsole_object_inspector_local_session_storage.js
new file mode 100644
index 0000000000..0043048fce
--- /dev/null
+++ b/devtools/client/webconsole/test/browser/browser_webconsole_object_inspector_local_session_storage.js
@@ -0,0 +1,117 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Check expanding/collapsing local and session storage in the console.
+const TEST_URI =
+  "http://example.com/browser/devtools/client/webconsole/" +
+  "test/browser/test-local-session-storage.html";
+
+add_task(async function () {
+  const hud = await openNewTabAndConsole(TEST_URI);
+  const messages = await logMessages(hud);
+  const objectInspectors = messages.map(node => node.querySelector(".tree"));
+
+  is(
+    objectInspectors.length,
+    2,
+    "There is the expected number of object inspectors"
+  );
+
+  await checkValues(objectInspectors[0], "localStorage");
+  await checkValues(objectInspectors[1], "sessionStorage");
+});
+
+async function logMessages(hud) {
+  await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => {
+    content.console.log("localStorage", content.localStorage);
+  });
+  const localStorageMsg = await waitFor(() =>
+    findConsoleAPIMessage(hud, "localStorage")
+  );
+
+  await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => {
+    content.console.log("sessionStorage", content.sessionStorage);
+  });
+  const sessionStorageMsg = await waitFor(() =>
+    findConsoleAPIMessage(hud, "sessionStorage")
+  );
+
+  return [localStorageMsg, sessionStorageMsg];
+}
+
+async function checkValues(oi, storageType) {
+  info(`Expanding the ${storageType} object`);
+  let onMapOiMutation = waitForNodeMutation(oi, {
+    childList: true,
+  });
+
+  oi.querySelector(".arrow").click();
+  await onMapOiMutation;
+
+  ok(
+    oi.querySelector(".arrow").classList.contains("expanded"),
+    "The arrow of the node has the expected class after clicking on it"
+  );
+
+  let nodes = oi.querySelectorAll(".node");
+  // There are 4 nodes: the root, size, entries and the proto.
+  is(nodes.length, 5, "There is the expected number of nodes in the tree");
+
+  info("Expanding the <entries> leaf of the map");
+  const entriesNode = nodes[3];
+  is(
+    entriesNode.textContent,
+    "<entries>",
+    "There is the expected <entries> node"
+  );
+  onMapOiMutation = waitForNodeMutation(oi, {
+    childList: true,
+  });
+
+  entriesNode.querySelector(".arrow").click();
+  await onMapOiMutation;
+
+  nodes = oi.querySelectorAll(".node");
+  // There are now 7 nodes, the 5 original ones, and the 2 entries.
+  is(nodes.length, 7, "There is the expected number of nodes in the tree");
+
+  const title = nodes[0].querySelector(".objectTitle").textContent;
+  const name1 = nodes[1].querySelector(".object-label").textContent;
+  const value1 = nodes[1].querySelector(".objectBox").textContent;
+
+  const length = [...nodes[2].querySelectorAll(".object-label,.objectBox")].map(
+    node => node.textContent
+  );
+  const key2 = [
+    ...nodes[4].querySelectorAll(".object-label,.nodeName,.objectBox-string"),
+  ].map(node => node.textContent);
+  const key = [
+    ...nodes[5].querySelectorAll(".object-label,.nodeName,.objectBox-string"),
+  ].map(node => node.textContent);
+
+  is(title, "Storage", `${storageType} object has the expected title`);
+  is(length[0], "length", `${storageType} length property name is correct`);
+  is(length[1], "2", `${storageType} length property value is correct`);
+  is(key2[0], "0", `1st entry of ${storageType} entry has the correct index`);
+  is(key2[1], "key2", `1st entry of ${storageType} entry has the correct key`);
+
+  const firstValue = storageType === "localStorage" ? `"value2"` : `"value4"`;
+  is(name1, "key2", "Name of short descriptor is correct");
+  is(value1, firstValue, "Value of short descriptor is correct");
+  is(
+    key2[2],
+    firstValue,
+    `1st entry of ${storageType} entry has the correct value`
+  );
+  is(key[0], "1", `2nd entry of ${storageType} entry has the correct index`);
+  is(key[1], "key", `2nd entry of ${storageType} entry has the correct key`);
+
+  const secondValue = storageType === "localStorage" ? `"value1"` : `"value3"`;
+  is(
+    key[2],
+    secondValue,
+    `2nd entry of ${storageType} entry has the correct value`
+  );
+}