browser_webconsole_object_inspector_local_session_storage.js

Enable keyboard shortcuts

/* 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`

);