Add an example test config, update README

Author: jason0x43

.gitignore

@@ -12,4 +12,5 @@ html-report
 /typings
 .grunt
 npm-debug.log
-visual-test
+visual-test/
+example-test/

README.md

@@ -74,9 +74,9 @@ $ npm install intern @theintern/visual-plugin --save-dev
 
 Ok! You want to see all the great things visual regression testing can do and
 how to do it! See some real test code by looking in the
-[tests/visual](./tests/visual) directory.
+[tests/example](./tests/example) directory.
 
-To run our visual regression tests:
+To run the example tests:
 
 1.  Clone this project
 1.  Install package dependencies
@@ -85,9 +85,14 @@ To run our visual regression tests:
     ```
 1.  Run the tests
     ```
-    npm test
+    npm test config=@example
     ```
 
+If you want to see what an error looks like, modify the HTML file used by the
+tests, in `_tests/tests/support/pages/basic.html`. For example, change the
+paragraph text, or change the background color from pink to green. Then re-run
+the test. It will fail, and a report will be generated in `visual-tests/report`.
+
 ## API and architecture
 
 This plugin has three main exports:

intern.json

@@ -55,6 +55,19 @@
 			],
 			"tunnel": "browserstack",
 			"maxConcurrency": 1
+		},
+
+		"example": {
+			"environments": "chrome",
+			"functionalSuites": "_tests/tests/example/**/*.js",
+			"coverage": [],
+			"reporters": "runner",
+			"plugins": {
+				"script": "_tests/src",
+				"options": {
+					"directory": "example-test"
+				}
+			}
 		}
 	}
 }

tests/example/tests.ts

@@ -14,7 +14,7 @@ registerSuite('example tests', {
 		url: basicPageUrl,
 		width: 640,
 		height: 480,
-		missingBaseline: 'ignore'
+		missingBaseline: 'snapshot'
 	}),
 
 	'custom visual test'() {
@@ -24,7 +24,7 @@ registerSuite('example tests', {
 			.takeScreenshot()
 			.then(
 				assertVisuals(this, {
-					missingBaseline: 'ignore'
+					missingBaseline: 'snapshot'
 				})
 			);
 	}