Merge pull request #348 from uuidjs/browser-testing

Browser testing
uuidjs · Jan 15, 2020 · 172d43d · 172d43d
2 parents 2857dba + 67be5ac
commit 172d43d
Show file tree

Hide file tree

Showing 38 changed files with 1,018 additions and 115 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -4,7 +4,7 @@
     "browser": true,
     "commonjs": true,
     "es6": true,
-    "mocha": true,
+    "jest": true,
     "node": true
   },
   "extends": ["eslint:recommended", "plugin:prettier/recommended"],
@@ -15,7 +15,6 @@
   "rules": {
     "array-bracket-spacing": ["warn", "never"],
     "arrow-body-style": ["warn", "as-needed"],
-    "arrow-parens": ["warn", "as-needed"],
     "arrow-spacing": "warn",
     "brace-style": ["warn", "1tbs"],
     "camelcase": "warn",

diff --git a/.github/workflows/browser.yml b/.github/workflows/browser.yml
@@ -0,0 +1,31 @@
+name: Browser
+
+on: [push]
+
+jobs:
+  ci:
+
+    runs-on: ubuntu-latest
+    timeout-minutes: 30
+
+    strategy:
+      matrix:
+        node-version: [12.x]
+        browser: [chrome, edge, firefox, ie, safari]
+
+    steps:
+    - uses: actions/checkout@v1
+      with:
+        fetch-depth: 1
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v1
+      with:
+        node-version: ${{ matrix.node-version }}
+    - run: npm install
+    - name: Test ${{ matrix.node-version }}
+      run: npm run test:browser
+      env:
+        CI: true
+        BROWSER: ${{ matrix.browser }}
+        BROWSERSTACK_USER: ${{ secrets.BROWSERSTACK_USER }}
+        BROWSERSTACK_ACCESS_KEY: ${{ secrets.BROWSERSTACK_ACCESS_KEY }}
diff --git a/.gitignore b/.gitignore
@@ -4,3 +4,6 @@
 node_modules
 tmp
 dist/
+# Browserstack
+browserstack.err
+local.log
diff --git a/README.md b/README.md
@@ -80,6 +80,16 @@ uuid.v5('Hello, World!', MY_NAMESPACE); // ⇨ '630eb68f-e0fa-5ecc-887a-7c7a6261
 
 ```
 
+## Supported Platforms
+
+- Node.js: All LTS, i.e. 8.x, 10.x, 12.x
+- Browsers (with bundlers like webpack/rollup):
+  - Chrome: >= 49
+  - Safari: >= 10
+  - Firefox: >= 44
+  - Edge: >= 15
+  - IE: 11
+
 ## ECMAScript Modules / ESM
 
 For usage in the browser `uuid` provides support for [ECMAScript
@@ -96,6 +106,12 @@ uuid(); // ⇨ '1b9d6bcd-bbfd-4b2d-9b5d-ab8dfbbd4bed'
 There is experimental native ESM support for [the browser](./examples/browser-esmodules/) but it
 should not be considered ready for production use and may change or disappear in future releases.
 
+To run the examples you must first build a dist package of this library in the module root:
+
+```
+npm run package
+```
+
 ## API
 
 ### Version 1 (Timestamp + Node)

diff --git a/README_js.md b/README_js.md
@@ -89,6 +89,16 @@ const MY_NAMESPACE = '1b671a64-40d5-491e-99b0-da01ff1f3341';
 uuid.v5('Hello, World!', MY_NAMESPACE); // RESULT
 ```
 
+## Supported Platforms
+
+- Node.js: All LTS, i.e. 8.x, 10.x, 12.x
+- Browsers (with bundlers like webpack/rollup):
+  - Chrome: >= 49
+  - Safari: >= 10
+  - Firefox: >= 44
+  - Edge: >= 15
+  - IE: 11
+
 ## ECMAScript Modules / ESM
 
 For usage in the browser `uuid` provides support for [ECMAScript
@@ -105,6 +115,12 @@ uuid(); // ⇨ '1b9d6bcd-bbfd-4b2d-9b5d-ab8dfbbd4bed'
 There is experimental native ESM support for [the browser](./examples/browser-esmodules/) but it
 should not be considered ready for production use and may change or disappear in future releases.
 
+To run the examples you must first build a dist package of this library in the module root:
+
+```
+npm run package
+```
+
 ## API
 
 ### Version 1 (Timestamp + Node)

diff --git a/examples/browser-esmodules/package-lock.json b/examples/browser-esmodules/package-lock.json
diff --git a/examples/browser-esmodules/package.json b/examples/browser-esmodules/package.json
@@ -3,9 +3,10 @@
   "version": "0.0.0",
   "private": true,
   "scripts": {
-    "test": "npx http-server . -o"
+    "build": "true",
+    "start": "npm run build && npx http-server . -o"
   },
   "dependencies": {
-    "uuid": "github:ctavan/uuid-esm#master"
+    "uuid": "file:../../dist"
   }
 }
diff --git a/examples/browser-rollup/README.md b/examples/browser-rollup/README.md
@@ -2,10 +2,10 @@
 
 ```
 npm install
-npm test
+npm start
 ```
 
-Then navigate to `example.html`.
+Then navigate to `example-*.html`.
 
 The `example-v{1,4}.js` demonstrate that treeshaking works as expected:
 

diff --git a/examples/browser-rollup/example-all.html b/examples/browser-rollup/example-all.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>UUID esmodule webpack example</title>
+  </head>
+  <body>
+    <script type="text/javascript" src="./dist/all.js"></script>
+  </body>
+</html>
diff --git a/examples/browser-rollup/example-all.js b/examples/browser-rollup/example-all.js
@@ -1,43 +1,49 @@
 import { v1 as uuidv1, v4 as uuidv4, v3 as uuidv3, v5 as uuidv5 } from 'uuid';
 import * as uuid from 'uuid';
 
-console.log('uuidv1()', uuidv1());
-
-console.log('uuidv4()', uuidv4());
-
-// ... using predefined DNS namespace (for domain names)
-console.log('uuidv3() DNS', uuidv3('hello.example.com', uuidv3.DNS));
-
-// ... using predefined URL namespace (for, well, URLs)
-console.log('uuidv3() URL', uuidv3('http://example.com/hello', uuidv3.URL));
-
-// ... using a custom namespace
-//
-// Note: Custom namespaces should be a UUID string specific to your application!
-// E.g. the one here was generated using this modules `uuid` CLI.
-const MY_NAMESPACE = '55238d15-c926-4598-b49d-cf4e913ba13c';
-console.log('uuidv3() MY_NAMESPACE', uuidv3('Hello, World!', MY_NAMESPACE));
-
-// ... using predefined DNS namespace (for domain names)
-console.log('uuidv5() DNS', uuidv5('hello.example.com', uuidv5.DNS));
-
-// ... using predefined URL namespace (for, well, URLs)
-console.log('uuidv5() URL', uuidv5('http://example.com/hello', uuidv5.URL));
-
-// ... using a custom namespace
-//
-// Note: Custom namespaces should be a UUID string specific to your application!
-// E.g. the one here was generated using this modules `uuid` CLI.
-// const MY_NAMESPACE = '1b671a64-40d5-491e-99b0-da01ff1f3341';
-console.log('uuidv5() MY_NAMESPACE', uuidv5('Hello, World!', MY_NAMESPACE));
-
-console.log('Same with default export');
-
-console.log('uuid.v1()', uuid.v1());
-console.log('uuid.v4()', uuid.v4());
-console.log('uuid.v3() DNS', uuid.v3('hello.example.com', uuid.v3.DNS));
-console.log('uuid.v3() URL', uuid.v3('http://example.com/hello', uuid.v3.URL));
-console.log('uuid.v3() MY_NAMESPACE', uuid.v3('Hello, World!', MY_NAMESPACE));
-console.log('uuid.v5() DNS', uuid.v5('hello.example.com', uuid.v5.DNS));
-console.log('uuid.v5() URL', uuid.v5('http://example.com/hello', uuid.v5.URL));
-console.log('uuid.v5() MY_NAMESPACE', uuid.v5('Hello, World!', MY_NAMESPACE));
+import testpage from '../utils/testpage';
+
+testpage(function(addTest, done) {
+  addTest('uuidv1()', uuidv1());
+
+  addTest('uuidv4()', uuidv4());
+
+  // ... using predefined DNS namespace (for domain names)
+  addTest('uuidv3() DNS', uuidv3('hello.example.com', uuidv3.DNS));
+
+  // ... using predefined URL namespace (for, well, URLs)
+  addTest('uuidv3() URL', uuidv3('http://example.com/hello', uuidv3.URL));
+
+  // ... using a custom namespace
+  //
+  // Note: Custom namespaces should be a UUID string specific to your application!
+  // E.g. the one here was generated using this modules `uuid` CLI.
+  const MY_NAMESPACE = '55238d15-c926-4598-b49d-cf4e913ba13c';
+  addTest('uuidv3() MY_NAMESPACE', uuidv3('Hello, World!', MY_NAMESPACE));
+
+  // ... using predefined DNS namespace (for domain names)
+  addTest('uuidv5() DNS', uuidv5('hello.example.com', uuidv5.DNS));
+
+  // ... using predefined URL namespace (for, well, URLs)
+  addTest('uuidv5() URL', uuidv5('http://example.com/hello', uuidv5.URL));
+
+  // ... using a custom namespace
+  //
+  // Note: Custom namespaces should be a UUID string specific to your application!
+  // E.g. the one here was generated using this modules `uuid` CLI.
+  // const MY_NAMESPACE = '1b671a64-40d5-491e-99b0-da01ff1f3341';
+  addTest('uuidv5() MY_NAMESPACE', uuidv5('Hello, World!', MY_NAMESPACE));
+
+  addTest('Same with default export');
+
+  addTest('uuid.v1()', uuid.v1());
+  addTest('uuid.v4()', uuid.v4());
+  addTest('uuid.v3() DNS', uuid.v3('hello.example.com', uuid.v3.DNS));
+  addTest('uuid.v3() URL', uuid.v3('http://example.com/hello', uuid.v3.URL));
+  addTest('uuid.v3() MY_NAMESPACE', uuid.v3('Hello, World!', MY_NAMESPACE));
+  addTest('uuid.v5() DNS', uuid.v5('hello.example.com', uuid.v5.DNS));
+  addTest('uuid.v5() URL', uuid.v5('http://example.com/hello', uuid.v5.URL));
+  addTest('uuid.v5() MY_NAMESPACE', uuid.v5('Hello, World!', MY_NAMESPACE));
+
+  done();
+});
diff --git a/examples/browser-rollup/example-v1.html b/examples/browser-rollup/example-v1.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>UUID esmodule webpack example</title>
+  </head>
+  <body>
+    <script type="text/javascript" src="./dist/v1.js"></script>
+  </body>
+</html>
diff --git a/examples/browser-rollup/example-v1.js b/examples/browser-rollup/example-v1.js
@@ -1,3 +1,8 @@
 import { v1 as uuidv1 } from 'uuid';
 
-console.log('uuidv1()', uuidv1());
+import testpage from '../utils/testpage';
+
+testpage(function(addTest, done) {
+  addTest('uuidv1()', uuidv1());
+  done();
+});
diff --git a/examples/browser-rollup/example-v4.html b/examples/browser-rollup/example-v4.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>UUID esmodule webpack example</title>
+  </head>
+  <body>
+    <script type="text/javascript" src="./dist/v4.js"></script>
+  </body>
+</html>
diff --git a/examples/browser-rollup/example-v4.js b/examples/browser-rollup/example-v4.js
@@ -1,3 +1,8 @@
 import { v4 as uuidv4 } from 'uuid';
 
-console.log('uuidv4()', uuidv4());
+import testpage from '../utils/testpage';
+
+testpage(function(addTest, done) {
+  addTest('uuidv4()', uuidv4());
+  done();
+});
diff --git a/examples/browser-rollup/package-lock.json b/examples/browser-rollup/package-lock.json
diff --git a/examples/browser-rollup/package.json b/examples/browser-rollup/package.json
@@ -3,10 +3,11 @@
   "version": "0.0.0",
   "private": true,
   "scripts": {
-    "test": "rm -rf dist && rollup -c && npx http-server . -o"
+    "build": "rm -rf dist && rollup -c",
+    "start": "npm run build && npx http-server . -o"
   },
   "dependencies": {
-    "uuid": "github:ctavan/uuid-esm#master"
+    "uuid": "file:../../dist"
   },
   "devDependencies": {
     "rollup": "^1.24.0",

diff --git a/examples/browser-webpack/README.md b/examples/browser-webpack/README.md
@@ -2,10 +2,10 @@
 
 ```
 npm install
-npm test
+npm start
 ```
 
-Then navigate to `example.html`.
+Then navigate to `example-*.html`.
 
 The `example-v{1,4}.js` demonstrate that treeshaking works as expected (webpack output below):
 

diff --git a/examples/browser-webpack/example-all.html b/examples/browser-webpack/example-all.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>UUID esmodule webpack example</title>
+  </head>
+  <body>
+    <script type="text/javascript" src="./dist/all.js"></script>
+  </body>
+</html>