Add CI test verifying Mustache works in browser as AMD w/RequireJS

phillipj · phillipj · commit 9452eafd642c · 2019-11-05T21:48:05.000+01:00
This is a precursor to introducing a build step that will change what
we expose from this package. Better off writing some tests to verify
existing projects with different module systems continue to work as
expected.
diff --git a/test/module-systems/_fixtures/amd.html b/test/module-systems/_fixtures/amd.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <script src='https://unpkg.com/requirejs@2.3.6/require.js'></script>
+  <script>
+    require.config({
+      paths: {
+        mustache: '../../../mustache'
+      }
+    });
+
+    // Placed here rather in the -test.js file because it makes debugging in
+    // a local browser simpler because this .html file can be opened by double
+    // clicking the file and inspecting any errors/unexpected results
+    requirejs(['mustache'], Mustache => {
+        document.body.textContent = Mustache.render(
+          '{{title}} spends {{calc}}',
+          {
+            title: 'Joe',
+            calc: () => 2 + 4
+          });
+      });
+  </script>
+</head>
+<body>Text content to be overwritten<body>
+</html>
diff --git a/test/module-systems/browser-test.js b/test/module-systems/browser-test.js
@@ -34,4 +34,16 @@ describe('Browser usage', () => {
 
     chai.assert.equal(value.trim(), 'Joe spends 6');
   });
+
+  it('is exposed as AMD and consumable via RequireJS', async function () {
+    this.timeout(10 * 1000);
+
+    await page.goto(`file://${path.join(__dirname, '_fixtures/amd.html')}`, { waitUntil: 'networkidle0' });
+
+    const bodyElement = await page.$('body');
+    const textContentProperty = await bodyElement.getProperty('textContent');
+    const value = await textContentProperty.jsonValue();
+
+    chai.assert.equal(value, 'Joe spends 6');
+  });
 });
