browser/devtools/markupview/test/browser_markupview_mutation_02.js

changeset 0
6474c204b198
     1.1 --- /dev/null	Thu Jan 01 00:00:00 1970 +0000
     1.2 +++ b/browser/devtools/markupview/test/browser_markupview_mutation_02.js	Wed Dec 31 06:09:35 2014 +0100
     1.3 @@ -0,0 +1,91 @@
     1.4 +/* vim: set ts=2 et sw=2 tw=80: */
     1.5 +/* Any copyright is dedicated to the Public Domain.
     1.6 + http://creativecommons.org/publicdomain/zero/1.0/ */
     1.7 +
     1.8 +"use strict";
     1.9 +
    1.10 +// Test that markup-containers in the markup-view do flash when their
    1.11 +// corresponding DOM nodes mutate
    1.12 +
    1.13 +const TEST_URL = TEST_URL_ROOT + "doc_markup_flashing.html";
    1.14 +// The test data contains a list of mutations to test.
    1.15 +// Each item is an object:
    1.16 +// - desc: a description of the test step, for better logging
    1.17 +// - mutate: a function that should make changes to the content DOM
    1.18 +// - shouldFlash: a function that returns the element that should be the one flashing
    1.19 +const TEST_DATA = [{
    1.20 +  desc: "Adding a new node should flash the new node",
    1.21 +  mutate: (doc, rootNode) => {
    1.22 +    let newLi = doc.createElement("LI");
    1.23 +    newLi.textContent = "new list item";
    1.24 +    rootNode.appendChild(newLi);
    1.25 +  },
    1.26 +  shouldFlash: rootNode => rootNode.lastElementChild
    1.27 +}, {
    1.28 +  desc: "Removing a node should flash its parent",
    1.29 +  mutate: (doc, rootNode) => {
    1.30 +    rootNode.removeChild(rootNode.lastElementChild);
    1.31 +  },
    1.32 +  shouldFlash: rootNode => rootNode
    1.33 +}, {
    1.34 +  desc: "Re-appending an existing node should only flash this node",
    1.35 +  mutate: (doc, rootNode) => {
    1.36 +    rootNode.appendChild(rootNode.firstElementChild);
    1.37 +  },
    1.38 +  shouldFlash: rootNode => rootNode.lastElementChild
    1.39 +}, {
    1.40 +  desc: "Adding an attribute should flash the node",
    1.41 +  mutate: (doc, rootNode) => {
    1.42 +    rootNode.setAttribute("name-" + Date.now(), "value-" + Date.now());
    1.43 +  },
    1.44 +  shouldFlash: rootNode => rootNode
    1.45 +}, {
    1.46 +  desc: "Editing an attribute should flash the node",
    1.47 +  mutate: (doc, rootNode) => {
    1.48 +    rootNode.setAttribute("class", "list value-" + Date.now());
    1.49 +  },
    1.50 +  shouldFlash: rootNode => rootNode
    1.51 +}, {
    1.52 +  desc: "Removing an attribute should flash the node",
    1.53 +  mutate: (doc, rootNode) => {
    1.54 +    rootNode.removeAttribute("class");
    1.55 +  },
    1.56 +  shouldFlash: rootNode => rootNode
    1.57 +}];
    1.58 +
    1.59 +let test = asyncTest(function*() {
    1.60 +  let {inspector} = yield addTab(TEST_URL).then(openInspector);
    1.61 +
    1.62 +  info("Getting the <ul.list> root node to test mutations on");
    1.63 +  let rootNode = getNode(".list");
    1.64 +
    1.65 +  info("Selecting the last element of the root node before starting");
    1.66 +  yield selectNode(rootNode.lastElementChild, inspector);
    1.67 +
    1.68 +  for (let {mutate, shouldFlash, desc} of TEST_DATA) {
    1.69 +    info("Starting test: " + desc);
    1.70 +
    1.71 +    info("Mutating the DOM and listening for markupmutation event");
    1.72 +    let mutated = inspector.once("markupmutation");
    1.73 +    let updated = inspector.once("inspector-updated");
    1.74 +    mutate(content.document, rootNode);
    1.75 +    yield mutated;
    1.76 +
    1.77 +    info("Asserting that the correct markup-container is flashing");
    1.78 +    assertNodeFlashing(shouldFlash(rootNode), inspector);
    1.79 +
    1.80 +    // Making sure the inspector has finished updating before moving on
    1.81 +    yield updated;
    1.82 +  }
    1.83 +});
    1.84 +
    1.85 +function assertNodeFlashing(node, inspector) {
    1.86 +  let container = getContainerForRawNode(node, inspector);
    1.87 +
    1.88 +  if (!container) {
    1.89 +    ok(false, "Node not found");
    1.90 +  } else {
    1.91 +    ok(container.tagState.classList.contains("theme-bg-contrast"),
    1.92 +      "Node is flashing");
    1.93 +  }
    1.94 +}

mercurial