firefox/devtools/server/tests/xpcshell/test_layout-reflows-observer.js

/* Any copyright is dedicated to the Public Domain.
   http://creativecommons.org/publicdomain/zero/1.0/ */

"use strict";

// Test the LayoutChangesObserver

/* eslint-disable mozilla/use-chromeutils-generateqi */

var {
  getLayoutChangesObserver,
  releaseLayoutChangesObserver,
  LayoutChangesObserver,
} = require("resource://devtools/server/actors/reflow.js");
const EventEmitter = require("resource://devtools/shared/event-emitter.js");

// Override set/clearTimeout on LayoutChangesObserver to avoid depending on
// time in this unit test. This means that LayoutChangesObserver.eventLoopTimer
// will be the timeout callback instead of the timeout itself, so test cases
// will need to execute it to fake a timeout
LayoutChangesObserver.prototype._setTimeout = cb => cb;
LayoutChangesObserver.prototype._clearTimeout = function () {};

// Mock the targetActor since we only really want to test the LayoutChangesObserver
// and don't want to depend on a window object, nor want to test protocol.js
class MockTargetActor extends EventEmitter {
  constructor() {
    super();
    this.docShell = new MockDocShell();
    this.window = new MockWindow(this.docShell);
    this.windows = [this.window];
    this.attached = true;
  }

  get chromeEventHandler() {
    return this.docShell.chromeEventHandler;
  }

  isDestroyed() {
    return false;
  }
}

function MockWindow(docShell) {
  this.docShell = docShell;
}
MockWindow.prototype = {
  QueryInterface() {
    const self = this;
    return {
      getInterface() {
        return {
          QueryInterface() {
            return self.docShell;
          },
        };
      },
    };
  },
  setTimeout(cb) {
    // Simply return the cb itself so that we can execute it in the test instead
    // of depending on a real timeout
    return cb;
  },
  clearTimeout() {},
};

function MockDocShell() {
  this.observer = null;
}
MockDocShell.prototype = {
  addWeakReflowObserver(observer) {
    this.observer = observer;
  },
  removeWeakReflowObserver() {},
  get chromeEventHandler() {
    return {
      addEventListener: (type, cb) => {
        if (type === "resize") {
          this.resizeCb = cb;
        }
      },
      removeEventListener: (type, cb) => {
        if (type === "resize" && cb === this.resizeCb) {
          this.resizeCb = null;
        }
      },
    };
  },
  mockResize() {
    if (this.resizeCb) {
      this.resizeCb();
    }
  },
};

function run_test() {
  instancesOfObserversAreSharedBetweenWindows();
  eventsAreBatched();
  noEventsAreSentWhenThereAreNoReflowsAndLoopTimeouts();
  observerIsAlreadyStarted();
  destroyStopsObserving();
  stoppingAndStartingSeveralTimesWorksCorrectly();
  reflowsArentStackedWhenStopped();
  stackedReflowsAreResetOnStop();
}

function instancesOfObserversAreSharedBetweenWindows() {
  info(
    "Checking that when requesting twice an instances of the observer " +
      "for the same WindowGlobalTargetActor, the instance is shared"
  );

  info("Checking 2 instances of the observer for the targetActor 1");
  const targetActor1 = new MockTargetActor();
  const obs11 = getLayoutChangesObserver(targetActor1);
  const obs12 = getLayoutChangesObserver(targetActor1);
  Assert.equal(obs11, obs12);

  info("Checking 2 instances of the observer for the targetActor 2");
  const targetActor2 = new MockTargetActor();
  const obs21 = getLayoutChangesObserver(targetActor2);
  const obs22 = getLayoutChangesObserver(targetActor2);
  Assert.equal(obs21, obs22);

  info(
    "Checking that observers instances for 2 different targetActors are " +
      "different"
  );
  Assert.notEqual(obs11, obs21);

  releaseLayoutChangesObserver(targetActor1);
  releaseLayoutChangesObserver(targetActor1);
  releaseLayoutChangesObserver(targetActor2);
  releaseLayoutChangesObserver(targetActor2);
}

function eventsAreBatched() {
  info(
    "Checking that reflow events are batched and only sent when the " +
      "timeout expires"
  );

  // Note that in this test, we mock the target actor and its window property, so we also
  // mock the setTimeout/clearTimeout mechanism and just call the callback manually
  const targetActor = new MockTargetActor();
  const observer = getLayoutChangesObserver(targetActor);

  const reflowsEvents = [];
  const onReflows = reflows => reflowsEvents.push(reflows);
  observer.on("reflows", onReflows);

  const resizeEvents = [];
  const onResize = () => resizeEvents.push("resize");
  observer.on("resize", onResize);

  info("Fake one reflow event");
  targetActor.window.docShell.observer.reflow();
  info("Checking that no batched reflow event has been emitted");
  Assert.equal(reflowsEvents.length, 0);

  info("Fake another reflow event");
  targetActor.window.docShell.observer.reflow();
  info("Checking that still no batched reflow event has been emitted");
  Assert.equal(reflowsEvents.length, 0);

  info("Fake a few of resize events too");
  targetActor.window.docShell.mockResize();
  targetActor.window.docShell.mockResize();
  targetActor.window.docShell.mockResize();
  info("Checking that still no batched resize event has been emitted");
  Assert.equal(resizeEvents.length, 0);

  info("Faking timeout expiration and checking that events are sent");
  observer.eventLoopTimer();
  Assert.equal(reflowsEvents.length, 1);
  Assert.equal(reflowsEvents[0].length, 2);
  Assert.equal(resizeEvents.length, 1);

  observer.off("reflows", onReflows);
  observer.off("resize", onResize);
  releaseLayoutChangesObserver(targetActor);
}

function noEventsAreSentWhenThereAreNoReflowsAndLoopTimeouts() {
  info(
    "Checking that if no reflows were detected and the event batching " +
      "loop expires, then no reflows event is sent"
  );

  const targetActor = new MockTargetActor();
  const observer = getLayoutChangesObserver(targetActor);

  const reflowsEvents = [];
  const onReflows = reflows => reflowsEvents.push(reflows);
  observer.on("reflows", onReflows);

  info("Faking timeout expiration and checking for reflows");
  observer.eventLoopTimer();
  Assert.equal(reflowsEvents.length, 0);

  observer.off("reflows", onReflows);
  releaseLayoutChangesObserver(targetActor);
}

function observerIsAlreadyStarted() {
  info("Checking that the observer is already started when getting it");

  const targetActor = new MockTargetActor();
  const observer = getLayoutChangesObserver(targetActor);
  Assert.ok(observer.isObserving);

  observer.stop();
  Assert.ok(!observer.isObserving);

  observer.start();
  Assert.ok(observer.isObserving);

  releaseLayoutChangesObserver(targetActor);
}

function destroyStopsObserving() {
  info("Checking that the destroying the observer stops it");

  const targetActor = new MockTargetActor();
  const observer = getLayoutChangesObserver(targetActor);
  Assert.ok(observer.isObserving);

  observer.destroy();
  Assert.ok(!observer.isObserving);

  releaseLayoutChangesObserver(targetActor);
}

function stoppingAndStartingSeveralTimesWorksCorrectly() {
  info(
    "Checking that the stopping and starting several times the observer" +
      " works correctly"
  );

  const targetActor = new MockTargetActor();
  const observer = getLayoutChangesObserver(targetActor);

  Assert.ok(observer.isObserving);
  observer.start();
  observer.start();
  observer.start();
  Assert.ok(observer.isObserving);

  observer.stop();
  Assert.ok(!observer.isObserving);

  observer.stop();
  observer.stop();
  Assert.ok(!observer.isObserving);

  releaseLayoutChangesObserver(targetActor);
}

function reflowsArentStackedWhenStopped() {
  info("Checking that when stopped, reflows aren't stacked in the observer");

  const targetActor = new MockTargetActor();
  const observer = getLayoutChangesObserver(targetActor);

  info("Stoping the observer");
  observer.stop();

  info("Faking reflows");
  targetActor.window.docShell.observer.reflow();
  targetActor.window.docShell.observer.reflow();
  targetActor.window.docShell.observer.reflow();

  info("Checking that reflows aren't recorded");
  Assert.equal(observer.reflows.length, 0);

  info("Starting the observer and faking more reflows");
  observer.start();
  targetActor.window.docShell.observer.reflow();
  targetActor.window.docShell.observer.reflow();
  targetActor.window.docShell.observer.reflow();

  info("Checking that reflows are recorded");
  Assert.equal(observer.reflows.length, 3);

  releaseLayoutChangesObserver(targetActor);
}

function stackedReflowsAreResetOnStop() {
  info("Checking that stacked reflows are reset on stop");

  const targetActor = new MockTargetActor();
  const observer = getLayoutChangesObserver(targetActor);

  targetActor.window.docShell.observer.reflow();
  Assert.equal(observer.reflows.length, 1);

  observer.stop();
  Assert.equal(observer.reflows.length, 0);

  targetActor.window.docShell.observer.reflow();
  Assert.equal(observer.reflows.length, 0);

  observer.start();
  Assert.equal(observer.reflows.length, 0);

  targetActor.window.docShell.observer.reflow();
  Assert.equal(observer.reflows.length, 1);

  releaseLayoutChangesObserver(targetActor);
}