Add PDF link with randomized URL to dev server

Add a PDF document link on the dev server homepage which uses a URL that
has a random suffix parameter added on page load and each time the link
is clicked.

This is useful for testing the behavior of client features (eg.
annotation fetch and real time updates) which should show the same
content/notifications etc. across copies of the "same" document
presented at different URLs.

This will aid with testing changes such as https://github.com/hypothesis/h/pull/6542.

dev-server/serve-dev.js

@@ -101,11 +101,16 @@ function serveDev(port, config) {
     }
   });
 
-  // Serve PDF documents with PDFJS viewer and client script
-  app.get('/pdf/:pdf', (req, res, next) => {
+  // Serve PDF documents with PDFJS viewer and client script.
+  //
+  // The optional suffix allows the same PDF to be accessed at different URLs.
+  // This is helpful for testing that annotations/real-time updates etc. work
+  // based on the document fingerprint as well as the URL.
+  app.get('/pdf/:pdf/:suffix?', (req, res, next) => {
     if (fs.existsSync(`${PDF_PATH}${req.params.pdf}.pdf`)) {
       const relativeSourceUrl = `/pdf-source/${req.params.pdf}.pdf`;
-      const fullUrl = `${req.protocol}://${req.hostname}:${port}${req.originalUrl}`;
+      const suffix = req.params.suffix ? `?suffix=${req.params.suffix}` : '';
+      const fullUrl = `${req.protocol}://${req.hostname}:${port}${req.originalUrl}${suffix}`;
       const context = templateContext(config);
 
       res.render('pdfjs-viewer', {

dev-server/static/scripts/index.js

@@ -22,4 +22,15 @@
       toggleClientButton.textContent = 'Unload client';
     }
   };
+
+  // Setup document links whose URLs have a randomly generated suffix parameter.
+  const randomizedLinks = Array.from(document.querySelectorAll('.js-randomize-url'));
+  for (let link of randomizedLinks) {
+    const randomizeUrl = () => {
+      const randomHexString = Math.random().toString().slice(2 /* strip "0." prefix */, 6);
+      link.href = link.href.replace(/(\/rand-.*)?$/, `/rand-${randomHexString}`);
+    };
+    randomizeUrl();
+    link.addEventListener('click', randomizeUrl);
+  }
 })();

dev-server/templates/index.mustache

@@ -26,6 +26,7 @@
   <h2>Test PDF documents</h2>
   <ul>
     <li><a href="/pdf/nils-olav">Brigadier Sir Nils Olav III</a></li>
+    <li><a href="/pdf/nils-olav" class="js-randomize-url">Brigadier Sir Nils Olav III</a> (randomized URL)</li>
     <li><a href="/pdf/budlong">The Budlong Pickle Company (Wikipedia)</a></li>
     <li><a href="/pdf/widdershins">Widdershins (Wikipedia)</a></li>
     <li><a href="/pdf/painting"><em>The Development of British Landscape Painting in Water-Colours</em></a> (excerpt)