chore: cleanup and more docs (#440)

* style: format code

* chore: remove eslint global

* chore: add links to example files

* docs: update node mocking

* docs: add protractor configs

* docs: add fixtures

* docs: use correct language in code block

* docs: add headers

* test: remove only

* docs: update examples

docs/chrome-esm-examples.md

@@ -3,6 +3,8 @@ id: chrome-esm-examples
 title: Chrome-esm
 ---
 
+## Test
+
 ```javascript
 // The .js is needed since that's what the browser will request and according to spec
 import getA from '../src/a.js'; // eslint-disable-line import/extensions
@@ -14,3 +16,5 @@ describe('A', () => {
 });
 ```
 
+**[examples/chrome-esm/test/a.spec.js](https://github.com/qlik-oss/after-work.js/tree/master/examples/chrome-esm/test/a.spec.js)**
+

docs/chrome-js-examples.md

@@ -3,6 +3,8 @@ id: chrome-js-examples
 title: Chrome-js
 ---
 
+## Test
+
 ```javascript
 import getA from '../src/a';
 
@@ -13,6 +15,10 @@ describe('chrome-js A', () => {
 });
 ```
 
+**[examples/chrome-js/test/a.spec.js](https://github.com/qlik-oss/after-work.js/tree/master/examples/chrome-js/test/a.spec.js)**
+
+## Test
+
 ```javascript
 import { expect } from 'chai';
 import getB from '../src/b';
@@ -24,6 +30,10 @@ describe('chrome-js B', () => {
 });
 ```
 
+**[examples/chrome-js/test/b.spec.js](https://github.com/qlik-oss/after-work.js/tree/master/examples/chrome-js/test/b.spec.js)**
+
+## Test
+
 ```javascript
 import c from '../src/c';
 
@@ -56,3 +66,5 @@ describe('chrome-js C', () => {
 });
 ```
 
+**[examples/chrome-js/test/c.spec.js](https://github.com/qlik-oss/after-work.js/tree/master/examples/chrome-js/test/c.spec.js)**
+

docs/chrome-ts-examples.md

@@ -3,6 +3,8 @@ id: chrome-ts-examples
 title: Chrome-ts
 ---
 
+## Test
+
 ```javascript
 import { expect } from 'chai';
 import getA from '../src/a';
@@ -14,6 +16,10 @@ describe('chrome-ts A', () => {
 });
 ```
 
+**[examples/chrome-ts/test/a.spec.ts](https://github.com/qlik-oss/after-work.js/tree/master/examples/chrome-ts/test/a.spec.ts)**
+
+## Test
+
 ```javascript
 import { expect } from 'chai';
 import getB from '../src/b';
@@ -25,3 +31,5 @@ describe('chrome-ts B', () => {
 });
 ```
 
+**[examples/chrome-ts/test/b.spec.ts](https://github.com/qlik-oss/after-work.js/tree/master/examples/chrome-ts/test/b.spec.ts)**
+

docs/node-js-examples.md

@@ -3,6 +3,8 @@ id: node-js-examples
 title: Node-js
 ---
 
+## Test
+
 ```javascript
 import virtual from './foobar-virtual.html';
 import template from './foobar.html';
@@ -18,3 +20,5 @@ describe('html', () => {
 });
 ```
 
+**[examples/node-js/test/html.spec.js](https://github.com/qlik-oss/after-work.js/tree/master/examples/node-js/test/html.spec.js)**
+

docs/node-js-no-babel-examples.md

@@ -3,6 +3,8 @@ id: node-js-no-babel-examples
 title: Node-js-no-babel
 ---
 
+## Test
+
 ```javascript
 const getAzure = require('../src/');
 
@@ -13,3 +15,5 @@ describe('Azure', () => {
 });
 ```
 
+**[examples/node-js-no-babel/test/index.spec.js](https://github.com/qlik-oss/after-work.js/tree/master/examples/node-js-no-babel/test/index.spec.js)**
+

docs/node-ts-examples.md

@@ -3,6 +3,8 @@ id: node-ts-examples
 title: Node-ts
 ---
 
+## Test
+
 ```javascript
 import { expect } from 'chai';
 import Dummy from '../src/dummy';
@@ -15,3 +17,5 @@ describe('Dummy', () => {
 });
 ```
 
+**[examples/node-ts/test/dummy.spec.ts](https://github.com/qlik-oss/after-work.js/tree/master/examples/node-ts/test/dummy.spec.ts)**
+

docs/node.md

@@ -17,10 +17,11 @@ Add files, remove files as you go and change your tests to rapidly build up a te
 Built-in mocking. You can mock globally via the [**mocks**](#mocks) option or locally by using:
 
 ```javascript
+const span = <span>my span</span>;
 const [{ default: FancyButton }] = aw.mock(
   [
     // Mock components
-    ['**/react/src/button.js', '() => (<span>hhhhh</span>)']
+    ['**/react/src/button.js', () => () => span]
   ],
   // Require components
   ['../src/fancy-button']

docs/protractor-examples.md

@@ -3,6 +3,139 @@ id: protractor-examples
 title: Protractor
 ---
 
+## Config
+
+```javascript
+const path = require('path');
+
+module.exports = function initConfig() {
+  return {
+    multiCapabilities: [
+      {
+        name: 'desktop',
+        browserName: 'chrome',
+        directConnect: true,
+        chromeOptions: {
+          args: ['--window-size=1024,768'],
+        },
+      },
+      {
+        name: 'mobile',
+        browserName: 'chrome',
+        directConnect: true,
+        chromeOptions: {
+          args: ['--window-size=375,667'],
+        },
+      },
+    ],
+    specs: [path.resolve(__dirname, 'test/hello.spec.js')],
+    artifactsPath: 'test/__artifacts__',
+    // Protractor mochaOpts
+    mochaOpts: {
+      reporterOptions: {
+        name: '@after-work.js',
+        version: 'next',
+      },
+    },
+  };
+};
+```
+
+**[examples/protractor/aw.config.multi.js](https://github.com/qlik-oss/after-work.js/tree/master/examples/protractor/aw.config.multi.js)**
+
+## Config
+
+```javascript
+const path = require('path');
+
+module.exports = function initConfig() {
+  return {
+    baseUrl: 'http://localhost:8080/',
+    directConnect: false,
+    seleniumAddress: 'http://localhost:4444/wd/hub',
+    capabilities: {
+      name: 'desktop',
+      browserName: 'chrome',
+      chromeOptions: {
+        args: ['--window-size=1024,768'],
+      },
+    },
+    specs: [path.resolve(__dirname, 'test/rendering/rendering.spec.js')],
+    artifactsPath: 'test/__artifacts__',
+    // Protractor mochaOpts
+    mochaOpts: {
+      reporterOptions: {
+        name: '@after-work.js',
+        version: 'next',
+      },
+    },
+    configureHttpServer: () => ({
+      http: {
+        port: 8080,
+      },
+    }),
+  };
+};
+```
+
+**[examples/protractor/aw.config.rendering.js](https://github.com/qlik-oss/after-work.js/tree/master/examples/protractor/aw.config.rendering.js)**
+
+## Fixture
+
+```html
+<html lang="en">
+
+<head>
+  <title>Test</title>
+  <meta charset="utf-8">
+  <base href="/">
+  <style>
+    #container {
+      width: 100%;
+      height: 100%;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="container">
+    hello world
+  </div>
+</body>
+
+</html>
+```
+
+**[examples/protractor/test/hello.fix.html](https://github.com/qlik-oss/after-work.js/tree/master/examples/protractor/test/hello.fix.html)**
+
+## Fixture
+
+```html
+<html lang="en">
+  <head>
+    <title>Test</title>
+    <meta charset="utf-8" />
+    <base href="/" />
+    <style>
+      #container {
+        width: 100%;
+        height: 100%;
+      }
+    </style>
+  </head>
+
+  <body>
+    <div id="container" style="background: red">
+      hepp
+    </div>
+  </body>
+</html>
+```
+
+**[examples/protractor/test/rendering/rendering.fix.html](https://github.com/qlik-oss/after-work.js/tree/master/examples/protractor/test/rendering/rendering.fix.html)**
+
+## Test
+
 ```javascript
 describe('Protractor', () => {
   it('should say hello world', async () => {
@@ -14,6 +147,10 @@ describe('Protractor', () => {
 });
 ```
 
+**[examples/protractor/test/hello.spec.js](https://github.com/qlik-oss/after-work.js/tree/master/examples/protractor/test/hello.spec.js)**
+
+## Test
+
 ```javascript
 describe('Rendering', () => {
   it('should', async () => {
@@ -30,3 +167,5 @@ describe('Rendering', () => {
 });
 ```
 
+**[examples/protractor/test/rendering/rendering.spec.js](https://github.com/qlik-oss/after-work.js/tree/master/examples/protractor/test/rendering/rendering.spec.js)**
+

docs/protractor.md

@@ -27,31 +27,31 @@ module.exports = function initConfig(baseConfig) {
       browserName: 'chrome',
       unexpectedAlertBehaviour: 'accept',
       chromeOptions: {
-        args: ['--disable-infobars'],
-      },
+        args: ['--disable-infobars']
+      }
     },
     mochaOpts: {
-      bail: true,
+      bail: true
     },
     multiCapabilities: [],
-    specs: [
-      path.resolve(__dirname, './**/*.spec.js'),
-    ],
-    beforeLaunch() { },
+    specs: [path.resolve(__dirname, './**/*.spec.js')],
+    beforeLaunch() {},
     onComplete() {
-      return browser.manage().logs().get('browser').then((browserLog) => {
-        console.log(`log: ${util.inspect(browserLog)}`);
-      });
+      return browser
+        .manage()
+        .logs()
+        .get('browser')
+        .then(browserLog => {
+          console.log(`log: ${util.inspect(browserLog)}`);
+        });
     },
     configureHttpServer() {
       return {
         http: {
-          rewrite: {
-            '/fixtures/(.*)': 'packages/foo/test/integration/$1',
-          }
+          port: 8080
         }
       };
-    },
+    }
   };
   return extend(true, baseConfig, config);
 };
@@ -61,12 +61,12 @@ module.exports = function initConfig(baseConfig) {
 
 There are two Protractor plugins developed and bundled together with after-work.js:
 
-* **Screenshooter**: enables you to take a screenshot of an element and compare it to a saved baseline using an expect statement
+- **Screenshooter**: enables you to take a screenshot of an element and compare it to a saved baseline using an expect statement
 
 ```js
 it('should match baseline', async () => {
   expect( await browser.takeImageOf( <element> ) ).to.matchImageOf( <baseline> );
 });
 ```
 
-* **Custom Reporter**: a mocha reporter that saves the test results into JSON. A HTML report is generated after the test is completed with the ability to show the different states of a rendering (Screenshooter) test.
+- **Custom Reporter**: a mocha reporter that saves the test results into JSON. A HTML report is generated after the test is completed with the ability to show the different states of a rendering (Screenshooter) test.