Add E2E tests using files in examples directory

* Add tests

* Unignore JS test files

* Run tests in CI

* Add test:e2e script

* Add TestCafe plugins for linting

* Add start:e2e script for E2E tests

* Install testcafe + configuration

* Serve examples at localhost using servor

* Run E2E tests before release creation

Author: markcellus

.eslintrc.js

@@ -1,7 +1,7 @@
 module.exports = {
-    extends: 'eslint:recommended',
+    extends: ['eslint:recommended', 'plugin:testcafe/recommended'],
     parser: '@typescript-eslint/parser',
-    plugins: ['@typescript-eslint'],
+    plugins: ['@typescript-eslint', 'testcafe'],
     parserOptions: {
         sourceType: 'module',
     },

.gitignore

@@ -9,5 +9,4 @@
 .coverage
 .rpt2_cache
 dist
-.env
-tests/**/*.js
+.env

.release-it.js

@@ -11,7 +11,7 @@ module.exports = {
         releaseNotes: null,
     },
     hooks: {
-        'before:init': ['npm test'],
+        'before:init': ['npm test', 'npm run test:e2e'],
         'after:bump': 'npm run build && npm run banner',
         'after:release':
             'echo Successfully released ${name} v${version} to ${repo.repository}.',

.testcaferc.json

@@ -0,0 +1,9 @@
+{
+    "browsers": [
+        "browserstack:firefox@95:Windows 10",
+        "browserstack:edge@96:Windows 10"
+    ],
+    "hostname": "localhost",
+    "src": "**/*.e2e.js",
+    "appCommand": "npm run start:e2e"
+}

.travis.yml

@@ -4,4 +4,5 @@ node_js:
 script:
     - npm test
     - npm run build # ensure it builds
+    - npm run test:e2e
 after_success: 'npm run coveralls'

README.md

@@ -190,3 +190,11 @@ Run tests:
 npm install
 npm test
 ```
+
+### E2E Tests
+
+The following runs E2E tests on the files in the examples folder.
+
+```
+npm run test:e2e
+```

examples/scroll-to-element.html

@@ -53,7 +53,7 @@
 
         <!-- update the path to scroll script below -->
         <script type="module">
-            import { scrollTo, scrollIntoView } from './dist/scroll.min.js';
+            import { scrollTo, scrollIntoView } from '../dist/scroll.min.js';
             const scrollButton = document.getElementById('scroll-btn');
             const greenBox = document.querySelector('.green');
             const pink = document.querySelector('.pink');

examples/vertical-scroll.html

@@ -51,7 +51,7 @@
 
         <!-- update the path to scroll script below -->
         <script type="module">
-            import { scrollTo } from './dist/scroll.min.js';
+            import { scrollTo } from '../dist/scroll.min.js';
             const scrollButton = document.getElementById('scroll-btn');
 
             // when the scroll button is clicked, scroll down 2000 pixels