Use Karma to launch browser tests, drop test.htm

SequenceDiagram.xcworkspace/contents.xcworkspacedata

@@ -40,7 +40,4 @@
    <FileRef
       location = "container:README.md">
    </FileRef>
-   <FileRef
-      location = "container:test.htm">
-   </FileRef>
 </Workspace>

docs/CONTRIBUTING.md

@@ -29,8 +29,6 @@ several pages:
   the main editor, using non-minified sources (good for development)
 * [http://localhost:8080/library.htm](http://localhost:8080/library.htm):
   the library sample page (uses minified sources)
-* [http://localhost:8080/test.htm](http://localhost:8080/test.htm):
-  browser-based tests
 * [http://localhost:8080/readme-images.htm](http://localhost:8080/readme-images.htm):
   image generation page for the readme file
 
@@ -40,7 +38,7 @@ web modules unless a flag is set (FireFox 60 will support them fully).
 The editor and library page do not require web modules, so should have
 wider support.
 
-To run the non-browser tests and linter, run the command:
+To run the tests and linter, run the command:
 
 ```shell
 npm test;
@@ -58,8 +56,10 @@ The available commands are:
 
 * `npm start`: runs a webserver on
   [localhost:8080](http://localhost:8080)
-* `npm test`: runs the `unit-test` and `lint` commands
+* `npm test`: runs the `unit-test`, `web-test` and `lint` commands
 * `npm run unit-test`: runs non-browser-based unit tests in NodeJS
+* `npm run web-test`: runs browser-based unit tests via Karma
+  (currently only Chrome is used)
 * `npm run lint`: runs the linter against all source and test files
 * `npm run minify`: runs the `minify-lib` and `minify-web` commands
 * `npm run minify-lib`: minifies the library code in `/lib`
@@ -97,11 +97,10 @@ the root of `/web` as their entry-points.
 The testing library used here is [Jasmine](https://jasmine.github.io/).
 
 All test files follow the naming convention of `<filename>_spec.mjs`
-(commandline and browser) or `_webspec.mjs` (browser-only). Browser
+(commandline and browser) or `_webspec.mjs` (browser-only). Linting
-tests must be listed in `/spec/support/browser_specs.mjs`. Linting
 automatically applies to all files with a `.js` or `.mjs` extension.
 
-You can run the browser tests by opening `test.htm` in a browser.
+You can run just the browser tests by running `npm run web-test`.
 
 The current state of automated testing is:
 
@@ -117,11 +116,10 @@ The current state of automated testing is:
   from `spec/images`.
 * The editor has a minimal level of testing.
 
-If you suspect a failing test is not related to your changes, you can
+If you suspect a failing test is not related to your changes, try
-check against the current status of the tests on the master branch:
+[stashing](https://git-scm.com/docs/git-stash) your changes and running
-[test.htm](https://davidje13.github.io/SequenceDiagram/test.htm). If
+the tests again. If it still reports a failure in a supported browser,
-these report a failure in a supported browser, please report it in the
+please report it in the issue tracker.
-issue tracker.
 
 ### Browser Support
 
@@ -141,16 +139,9 @@ polyfils are included.
 ### Testing & Linting
 
 Ensure that all unit tests are passing and files pass linting. This can
-be done by opening `test.htm` in a browser and running `npm test`
+be done by running `npm test` in a command window. At a minimum, you
-in a command window. At a minimum, you should ensure that tests are
+should ensure that tests are passing in Google Chrome, but testing in
-passing in Google Chrome, but testing in other supported browsers is
+other supported browsers is even better.
-even better.
-
-Due to the limited testing of SVG rendering, it is also a good idea to
-open [readme-images](http://localhost:8080/readme-images.htm) and scan
-through to ensure the new rendering of each example is OK. It will show
-the new rendering as an SVG on the left, as a PNG in the middle, and
-the old rendering (from `/screenshots`) on the right.
 
 ### Minifying
 

docs/PULL_REQUEST_TEMPLATE.md

@@ -3,9 +3,7 @@ reference it with #issue-number.
 
 Checklist: (tick with [x])
 
-- [ ] Any new spec files are listed in `spec/support/browser_specs.mjs`.
+- [ ] Tests are passing (`npm test`).
-- [ ] Tests are passing in Google Chrome.
-- [ ] Linting is passing (`npm run lint`)
 - [ ] No dead code is left behind.
 - [ ] (optional): `npm run minify` has been run.
 - [ ] (optional): Any relevant screenshots have been updated.

package.json

@@ -22,14 +22,22 @@
     "minify-web": "rollup --config web/rollup.config.js && uglifyjs --compress --mangle --warn --output weblib/editor.min.js -- weblib/editor.js",
     "minify": "npm run minify-lib && npm run minify-web",
     "start": "http-server",
-    "test": "npm run unit-test && npm run lint",
+    "test": "npm run unit-test && npm run web-test && npm run lint && echo 'PASSED :)'",
-    "unit-test": "rollup --config spec/support/rollup.config.js && node -r source-map-support/register node_modules/.bin/jasmine --config=spec/support/jasmine.json"
+    "unit-test": "rollup --config spec/support/rollup.config.js && node -r source-map-support/register node_modules/.bin/jasmine --config=spec/support/jasmine.json",
+    "web-test": "karma start spec/support/karma.conf.js --single-run"
   },
   "devDependencies": {
+    "codemirror": "^5.37.0",
     "eslint": "^4.19.1",
     "eslint-plugin-jasmine": "^2.9.3",
     "http-server": "^0.10.0",
     "jasmine": "^3.1.0",
+    "karma": "^2.0.2",
+    "karma-chrome-launcher": "^2.2.0",
+    "karma-detect-browsers": "^2.3.2",
+    "karma-firefox-launcher": "^1.1.0",
+    "karma-jasmine": "^1.1.1",
+    "karma-safari-launcher": "^1.0.0",
     "requirejs": "2.3.5",
     "rollup": "^0.57.1",
     "rollup-plugin-hypothetical": "^2.1.0",

spec/support/browser_specs.mjs

@@ -1,44 +0,0 @@
-/*
- * All spec files imported here will be tested in the browser
- * when opening test.htm
- */
-
-import '../helpers/toBeNear.mjs';
-
-import '../../scripts/core/ArrayUtilities_spec.mjs';
-import '../../scripts/core/EventObject_spec.mjs';
-import '../../scripts/core/Random_spec.mjs';
-import '../../scripts/core/documents/VirtualDocument_spec.mjs';
-import '../../scripts/svg/SVG_spec.mjs';
-import '../../scripts/svg/SVGTextBlock_spec.mjs';
-import '../../scripts/svg/PatternedLine_spec.mjs';
-import '../../scripts/image/ImageRegion_spec.mjs';
-import '../../scripts/image/Blur_spec.mjs';
-import '../../scripts/image/Composition_spec.mjs';
-import '../../scripts/image/ImageSimilarity_spec.mjs';
-import '../../scripts/sequence/SequenceDiagram_spec.mjs';
-import '../../scripts/sequence/Tokeniser_spec.mjs';
-import '../../scripts/sequence/Parser_spec.mjs';
-import '../../scripts/sequence/MarkdownParser_spec.mjs';
-import '../../scripts/sequence/LabelPatternParser_spec.mjs';
-import '../../scripts/sequence/Generator_spec.mjs';
-import '../../scripts/sequence/Renderer_spec.mjs';
-import '../../scripts/sequence/themes/Basic_spec.mjs';
-import '../../scripts/sequence/themes/Monospace_spec.mjs';
-import '../../scripts/sequence/themes/Chunky_spec.mjs';
-import '../../scripts/sequence/themes/Sketch_spec.mjs';
-import '../../scripts/sequence/components/AgentCap_spec.mjs';
-import '../../scripts/sequence/components/AgentHighlight_spec.mjs';
-import '../../scripts/sequence/components/Block_spec.mjs';
-import '../../scripts/sequence/components/Connect_spec.mjs';
-import '../../scripts/sequence/components/Divider_spec.mjs';
-import '../../scripts/sequence/components/Marker_spec.mjs';
-import '../../scripts/sequence/components/Note_spec.mjs';
-import '../../scripts/sequence/components/Parallel_spec.mjs';
-
-import '../../web/interface/Interface_spec.mjs';
-import '../../web/interface/ComponentsLibrary_spec.mjs';
-
-import '../../scripts/sequence/CodeMirrorMode_webspec.mjs';
-import '../../scripts/sequence/SequenceDiagram_visual_webspec.mjs';
-import '../../scripts/sequence/Readme_webspec.mjs';

spec/support/karma.conf.js

@@ -0,0 +1,61 @@
+/*
+ * Firefox is supported, but tests will fail until version 60 is out
+ * due to the use of es6 modules, so exclude it for now.
+ */
+const SUPPORTED_BROWSERS = [
+	'chrome',
+	// 'firefox',
+	'safari',
+];
+
+function is_supported_browser(name) {
+	const lcName = name.toLowerCase();
+	for(const fragment of SUPPORTED_BROWSERS) {
+		if(lcName.includes(fragment)) {
+			return true;
+		}
+	}
+	return false;
+}
+
+module.exports = (config) => {
+	config.set({
+		basePath: '../..',
+
+		// See https://github.com/karma-runner/karma/pull/2834
+		customContextFile: 'spec/support/karma_context.html',
+
+		detectBrowsers: {
+			postDetection: (browsers) => browsers.filter(is_supported_browser),
+			preferHeadless: true,
+			usePhantomJS: false,
+		},
+
+		exclude: ['node_modules/**/*_spec.*', 'lib/**', 'weblib/**'],
+		files: [
+			'node_modules/codemirror/lib/codemirror.js',
+			{pattern: 'spec/helpers/**/*.mjs', type: 'module'},
+			{pattern: '**/*_spec.mjs', type: 'module'},
+			{pattern: '**/*_webspec.mjs', type: 'module'},
+			{included: false, pattern: 'scripts/**/*'},
+			{included: false, pattern: 'spec/**/*'},
+			{included: false, pattern: 'web/**/*'},
+			{included: false, pattern: 'README.md'},
+		],
+		frameworks: ['detectBrowsers', 'jasmine'],
+		plugins: [
+			'karma-jasmine',
+			'karma-detect-browsers',
+			'karma-chrome-launcher',
+			'karma-firefox-launcher',
+			'karma-safari-launcher',
+		],
+		proxies: {
+			// Add some proxies so that fetch() calls work without modification
+			'/README.md': '/base/README.md',
+			'/spec/': '/base/spec/',
+		},
+		reportSlowerThan: 500,
+		reporters: ['progress'],
+	});
+};

spec/support/karma_context.html

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<!--
+This file is from https://github.com/karma-runner/karma/pull/2834
+and can be removed once that PR is accepted and available
+-->
+  <title></title>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
+</head>
+<body>
+  <script src="context.js"></script>
+  <script type="text/javascript">
+    %CLIENT_CONFIG%
+    window.__karma__.setupContext(window);
+    %MAPPINGS%
+  </script>
+  %SCRIPTS%
+  <script type="module">
+    window.__karma__.loaded();
+  </script>
+  <script nomodule>
+    window.__karma__.loaded();
+  </script>
+</body>
+</html>

spec/support/rollup.config.js

@@ -3,10 +3,10 @@ import multiEntry from 'rollup-plugin-multi-entry';
 export default [
 	{
 		input: [
-			'spec/helpers/**/*.js',
 			'spec/helpers/**/*.mjs',
-			'**/*_spec.js',
+			'scripts/**/*_spec.mjs',
-			'**/*_spec.mjs',
+			'spec/**/*_spec.mjs',
+			'web/**/*_spec.mjs',
 		],
 		output: {
 			file: 'ephemeral/spec_bundle.js',

test.htm

@@ -1,55 +0,0 @@
-<html lang="en">
-<head>
-<meta charset="utf-8">
-<meta http-equiv="content-security-policy" content="
-	base-uri 'self';
-	default-src 'none';
-	script-src 'self' https://cdnjs.cloudflare.com;
-	connect-src 'self';
-	style-src 'self'
-		https://cdnjs.cloudflare.com
-		'sha256-ru2GY2rXeOf7PQX5LzK3ckNo21FCDUoRc2f3i0QcD1g='
-	;
-	font-src 'self' data:;
-	img-src 'self' data: blob:;
-	form-action 'none';
-">
-
-<title>Tests</title>
-<link rel="icon" href="favicon.png">
-<link rel="apple-touch-icon" href="apple-touch-icon.png">
-
-<link rel="stylesheet"
-	href="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.8.0/jasmine.min.css"
-	integrity="sha256-VrOKUZ4Ge9kapNTEARs4xFN+//KC1DdjdOSRMqiHw8s="
-	crossorigin="anonymous"
->
-<script
-	src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.8.0/jasmine.min.js"
-	integrity="sha256-nbDuV0lauU6Rzhc3T39vSmQ64+K0R8Kp556x6W5Xxg4="
-	crossorigin="anonymous"
-></script>
-<script
-	src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.8.0/jasmine-html.min.js"
-	integrity="sha256-3t+j0EiiLhROsCHCLF+g/h4gPsyH5agBoZeAcOrydRM="
-	crossorigin="anonymous"
-></script>
-
-<script
-	src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.31.0/codemirror.min.js"
-	integrity="sha256-eue5ceZRwKVQ1OXOZSyU7MXCTZMlqsPi/TOIqh1Vlzo="
-	crossorigin="anonymous"
-></script>
-
-<script
-	src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.8.0/boot.min.js"
-	integrity="sha256-Re9XxIL3x1flvE6WD58jWPdDzKYQLXwxS2HAVfmM6Z8="
-	crossorigin="anonymous"
-></script>
-
-<script src="spec/support/browser_specs.mjs" type="module"></script>
-
-</head>
-<body>
-</body>
-</html>