Create an example using the UMD distributable (#115)

danreeves · May 5, 2018 · 85176b5 · 85176b5
1 parent e9c24e7
commit 85176b5
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 0 deletions.
diff --git a/example/index.html b/example/index.html
@@ -12,5 +12,6 @@
     <a id='commonjs' href="./tests/commonjs/index.html" />
     <a id='esm' href="./tests/esm/index.html" />
     <a id='typescript' href="./tests/typescript/index.html" />
+    <a id='umd' href="./tests/umd/index.html" />
   </body>
 </html>
diff --git a/example/tests/umd/index.html b/example/tests/umd/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>UMD example</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script src="./index.js"></script>
+  </body>
+</html>
diff --git a/example/tests/umd/index.js b/example/tests/umd/index.js
@@ -0,0 +1,18 @@
+/* eslint-disable import/extensions */
+import React from '../../../node_modules/react/umd/react.production.min.js';
+import { render } from '../../../node_modules/react-dom/umd/react-dom.production.min.js';
+import ReactTether from '../../../dist/react-tether.min.js';
+
+function App() {
+  return (
+    <div>
+      <h1>UMD Modules example</h1>
+      <ReactTether attachment="top left">
+        <span>Child 1</span>
+        <span>Child 2</span>
+      </ReactTether>
+    </div>
+  );
+}
+
+render(<App />, document.querySelector('#app'));
diff --git a/tests/e2e/demo.js b/tests/e2e/demo.js
@@ -65,3 +65,11 @@ test('TypeScript example works', async t => {
   await t.expect(await app.hasChildElements).ok();
   await t.navigateTo(home);
 });
+
+test('UMD distributable example works', async t => {
+  const tsc = new Selector('#umd');
+  const app = new Selector('#app');
+  await t.navigateTo((await tsc.attributes).href);
+  await t.expect(await app.hasChildElements).ok();
+  await t.navigateTo(home);
+});