devtools/docs/contributor/tests/writing-perf-tests-example.md

   1 # Performance test example: performance of click event in the inspector
   2
   3 Let's look at a trivial but practical example and add a simple test to measure the performance of a click in the inspector.
   4
   5 First we create a file under [tests/inspector](https://searchfox.org/mozilla-central/source/testing/talos/talos/tests/devtools/addon/content/tests/inspector) since we are writing an inspector test. We call the file `click.js`.
   6
   7 We will use a dummy test document here: `data:text/html,click test document`.
   8
   9 We prepare the imports needed to write the test, from head.js and inspector-helper.js:
  10 - `testSetup`, `testTeardown`, `openToolbox` and `runTest` from head.js
  11 - `reloadInspectorAndLog` from inspector-helper.js
  12
  13 The full code for the test looks as follows:
  14 ```
  15 const {
  16   reloadInspectorAndLog,
  17 } = require("devtools/docs/tests/inspector-helpers");
  18
  19 const {
  20   openToolbox,
  21   runTest,
  22   testSetup,
  23   testTeardown,
  24 } = require("devtools/docs/head");
  25
  26 module.exports = async function() {
  27   // Define here your custom document via a data URI:
  28   const url = "data:text/html,click test document";
  29
  30   await testSetup(url);
  31   const toolbox = await openToolbox("inspector");
  32
  33   const inspector = toolbox.getPanel("inspector");
  34   const window = inspector.panelWin; // Get inspector's panel window object
  35   const body = window.document.body;
  36
  37   await new Promise(resolve => {
  38     const test = runTest("inspector.click");
  39     body.addEventListener("click", function () {
  40       test.done();
  41       resolve();
  42     }, { once: true });
  43     body.click();
  44   });
  45
  46   // Check if the inspector reload is impacted by click
  47   await reloadInspectorAndLog("click", toolbox);
  48
  49   await testTeardown();
  50 }
  51 ```
  52
  53 Finally we add an entry in [damp-tests.js](https://searchfox.org/mozilla-central/source/testing/talos/talos/tests/devtools/addon/content/damp-tests.js):
  54 ```
  55   {
  56     name: "inspector.click",
  57     path: "inspector/click.js",
  58     description:
  59       "Measure the time to click in the inspector, and reload the inspector",
  60   },
  61 ```
  62
  63 Since this is an inspector test, we add it under `TEST_SUITES.INSPECTOR`, which contains all the tests which will run with the `damp-inspector` test suite in continuous integration. The test is still part of the overall `damp` suite by default, there is no action needed to ensure that.
  64
  65 Then we can run our test with:
  66 ```
  67 ./mach talos-test --suite damp --subtest inspector.click
  68 ```