Add HTML baseline tests

Add a set of baseline tests for HTML anchoring which attempt to anchor a set of selectors for an annotation using data in the format returned by the Hypothesis API and then verify that the same selectors are generated when re-describing the anchored ranges.

Add HTML baseline tests
Add a set of baseline tests for HTML anchoring which attempt to anchor a set of selectors for an annotation using data in the format returned by the Hypothesis API and then verify that the same selectors are generated when re-describing the anchored ranges.
feebb62b · Robert Knight · 09f6b2f4 · feebb62b · feebb62b · feebb62b
Commit feebb62b authored Dec 16, 2016 by Robert Knight
6 changed files
--- a/h/static/scripts/annotator/anchoring/test/html-baselines/index.js
+++ b/h/static/scripts/annotator/anchoring/test/html-baselines/index.js
+'use strict';
+
+// Fixtures for anchoring baseline tests. The goals of these tests are to:
+//
+// 1) Check for unexpected changes in the selectors captured when describing
+//    a Range in a web page.
+// 2) Test anchoring in larger and more complex pages than the basic anchoring
+//    unit tests.
+//
+// Each fixture consists of:
+//
+//  - An HTML file for a web page
+//  - A set of annotations in the JSON format returned by the Hypothesis API
+//
+// To add a new fixture:
+//
+//  1. Open up a web page in the browser and annotate it.
+//  2. Save the web page (HTML only) via File -> Save Page As... as
+//     `<fixture name>.html` in this directory.
+//     It is important to save the page exactly as it was when annotated, since
+//     many pages have at least some dynamic content.
+//  3. Fetch the annotations for the web page via the Hypothesis API and save
+//     them as `<fixture name>.json` in this directory
+//  4. Add an entry to the fixture list below.
+
+module.exports = [{
+  name: 'Minimal Document',
+  html: require('./minimal.html'),
+  annotations: require('./minimal.json'),
+},{
+  name: 'Wikipedia - Regression Testing',
+  html: require('./wikipedia-regression-testing.html'),
+  annotations: require('./wikipedia-regression-testing.json'),
+}];
--- a/h/static/scripts/annotator/anchoring/test/html-baselines/minimal.html
+++ b/h/static/scripts/annotator/anchoring/test/html-baselines/minimal.html
+<body><div>One Two Three</div></body>
--- a/h/static/scripts/annotator/anchoring/test/html-baselines/minimal.json
+++ b/h/static/scripts/annotator/anchoring/test/html-baselines/minimal.json
+{
+  "total": 1,
+  "rows": [{
+    "id": "test",
+    "target": [{
+      "selector": [{
+        "type": "RangeSelector",
+        "startContainer": "/div[1]",
+        "endContainer": "/div[1]",
+        "startOffset": 4,
+        "endOffset": 7,
+      },{
+        "type": "TextPositionSelector",
+        "start": 4,
+        "end": 7,
+      },{
+        "type": "TextQuoteSelector",
+        "prefix": "One ",
+        "suffix": " Three\n",
+        "exact": "Two",
+      }],
+    }],
+  }],
+}
--- a/h/static/scripts/annotator/anchoring/test/html-baselines/wikipedia-regression-testing.html
+++ b/h/static/scripts/annotator/anchoring/test/html-baselines/wikipedia-regression-testing.html
--- a/h/static/scripts/annotator/anchoring/test/html-baselines/wikipedia-regression-testing.json
+++ b/h/static/scripts/annotator/anchoring/test/html-baselines/wikipedia-regression-testing.json
--- a/h/static/scripts/annotator/anchoring/test/html-test.js
+++ b/h/static/scripts/annotator/anchoring/test/html-test.js
@@ -61,6 +61,15 @@ function findByType(selectors, type) {
  return selectors.find(function (s) { return s.type === type; });
 }

+/**
+ * Return a copy of a list of selectors sorted by type.
+ */
+function sortByType(selectors) {
+  return selectors.slice().sort(function (a, b) {
+    return a.type.localeCompare(b.type);
+  });
+}
+
 /**
 * Test cases for mapping ranges to selectors.
 *
@@ -191,4 +200,50 @@ describe('HTML anchoring', function () {
    });
    return Promise.all(anchored);
  }, testCases);
+
+  describe('Web page baselines', function () {
+    var fixtures = require('./html-baselines');
+    var frame;
+
+    before(function () {
+      frame = document.createElement('iframe');
+      document.body.appendChild(frame);
+    });
+
+    after(function () {
+      frame.remove();
+    });
+
+    unroll('generates selectors which match the baseline (#name)', function (fixture) {
+      var fixtureHtml = fixture.html;
+      var annotations = fixture.annotations.rows;
+
+      // Break references to external stylesheets and images so that the test
+      // runner does not try to load them.
+      //
+      // This method is crude but Good Enough™ for our test fixtures and does
+      // not modify the offset of any substrings within the text content of the
+      // document for matches that occur in a text-content context (eg.
+      // <pre>, <noscript>).
+      fixtureHtml = fixtureHtml.replace(/src=/g, 'sr_=').replace(/href=/g, 'hre_=');
+
+      frame.contentWindow.document.documentElement.innerHTML = fixtureHtml;
+
+      var annotationsChecked = annotations.map(function (ann) {
+        // Anchor the existing selectors
+        var root = frame.contentWindow.document.body;
+        var selectors = ann.target[0].selector;
+        var result = html.anchor(root, selectors);
+        return result.then(function (range) {
+          // Re-anchor the selectors and check that the new and existing
+          // selectors match.
+          return html.describe(root, range);
+        }).then(function (newSelectors) {
+          assert.deepEqual(sortByType(selectors), sortByType(newSelectors));
+        });
+      });
+
+      return Promise.all(annotationsChecked);
+    }, fixtures);
+  });
 });