feat: Add test harness (#109)

BrightspaceUI · Aug 15, 2022 · d5122bb · d5122bb
1 parent 5a72787
commit d5122bb
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -258,6 +258,16 @@ const separator = getSeparator({ nonBreaking: true }); // -> ',\xa0' in en-US
 Options:
 - **nonBreaking**: a Boolean flag, whether to use non-breaking spaces instead of standard spaces; default is `false`
 
+## Running the test harness
+
+Start a [@web/dev-server](https://modern-web.dev/docs/dev-server/overview/) that hosts the test harness:
+
+```shell
+npm start
+```
+
+This will let you test the intl library in a browser, and will update live with any changes.
+
 ## Contributing
 
 Contributions are welcome, please submit a pull request!

diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="">
+<head>
+ <title>BrightspaceUI/intl Test Harness</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <meta charset="UTF-8">
+ <style>
+ body {
+ font-family: sans-serif;
+ }
+ .settings {
+ border: 1px solid black;
+ padding: 20px;
+ }
+ .settings h2 {
+ margin-top: 0;
+ }
+ </style>
+ <script type="module">
+ import * as common from '../lib/common.js';
+ import * as dateTime from '../lib/dateTime.js';
+ import * as fileSize from '../lib/fileSize.js';
+ import * as list from '../lib/list.js';
+ import * as number from '../lib/number.js';
+
+ window.intl = { ...common, ...dateTime, ...fileSize, ...list, ...number };
+ </script>
+</head>
+<body>
+
+ <h1>BrightspaceUI/intl Test Harness</h1>
+
+ <div class="settings">
+ <h2>Settings</h2>
+ <label>HTML lang attribute: <input id="html-lang" type="text"></label>
+ <button id="apply-lang">Apply</button>
+ </div>
+
+ <h2>Usage</h2>
+ <ul>
+ <li>All intl exports have been imported and are available on the <code>window.intl</code> object (not to be confused with the native <code>window.Intl</code>)</li>
+ <li>Use the browser console to test any exports</li>
+ <li>The HTML lang attribute can be changed in the settings block above</li>
+ </ul>
+
+ <script>
+ const htmlElement = document.getElementsByTagName('html')[0];
+ const htmlLangInput = document.getElementById('html-lang');
+
+ document.getElementById('apply-lang').onclick = () => {
+ htmlElement.lang = htmlLangInput.value;
+ };
+ </script>
+
+</body>
+</html>
diff --git a/package.json b/package.json
@@ -5,6 +5,7 @@
  "main": "lib/number.js",
  "scripts": {
  "lint": "eslint . --ext .js",
+ "start": "web-dev-server --node-resolve --watch --open /demo/",
  "test:unit": "concurrently -p name -n serve,test -s first -k \"http-server -p 8080 . -s\" \"mocha-headless-chrome -f http://localhost:8080/test/index.html -a no-sandbox -a disable-setuid-sandbox\"",
  "test": "npm run lint -s && npm run test:unit -s"
  },
@@ -37,6 +38,7 @@
  "devDependencies": {
  "@babel/core": "^7",
  "@babel/eslint-parser": "^7",
+ "@web/dev-server": "^0.1.33",
  "chai": "^4",
  "concurrently": "^7",
  "eslint": "^8",