feat: support loading page functions from files using webpack (#19)

* feat: support loading page functions directly from files (using webpack)

refactor: improve folder structure

* chore: remove unused dependency

* dont automatically set babel presets

if no presets are provided, fallback to using babelrc config

* print warning when a page function already exists

* if sourceFiles is a string, assume its a glob path

* use limit chunk count webpack plugin

* prefer finding node_modules relative from dist dir

* refactor BrowserError to be a named export

* use array index to access first char

* use createCacheKey also for parseFunction

* increase test coverage

* ignore coverage of deprecated method

* fix/improve page function tests

* determine valid cache correctly

* try enabling puppeteer on ci again

* always use tib for cache path

improve warning msg

* fix test

Author: pimlie

.circleci/config.yml

@@ -65,6 +65,19 @@ jobs:
           name: Unit Tests
           command: yarn test:unit --coverage && yarn coverage
 
+  test-e2e-chrome:
+    docker:
+        - image: circleci/node:latest-browsers
+    steps:
+      - checkout
+      - attach_workspace:
+          at: ~/project
+      - run:
+          name: E2E Tests
+          command: yarn test:e2e --coverage && yarn coverage
+          environment:
+            BROWSER_STRING: chrome
+
   test-e2e-firefox:
     docker:
         - image: circleci/node:latest-browsers
@@ -78,7 +91,7 @@ jobs:
           environment:
             BROWSER_STRING: firefox
 
-  test-e2e-chrome:
+  test-e2e-puppeteer:
     docker:
         - image: circleci/node:latest-browsers
     steps:
@@ -89,7 +102,7 @@ jobs:
           name: E2E Tests
           command: yarn test:e2e --coverage && yarn coverage
           environment:
-            BROWSER_STRING: chrome/selenium
+            BROWSER_STRING: puppeteer
 
   test-e2e-browserstack:
     docker:
@@ -126,7 +139,8 @@ workflows:
       - lint:                   { requires: [setup] }
       - audit:                  { requires: [setup] }
       - test-unit:              { requires: [lint] }
-      - test-e2e-firefox:       { requires: [lint] }
-      - test-e2e-chrome:        { requires: [lint] }
       - test-e2e-browserstack:  { requires: [lint] }
-      - test-e2e-jsdom:  { requires: [lint] }
+      - test-e2e-chrome:        { requires: [lint] }
+      - test-e2e-firefox:       { requires: [lint] }
+      - test-e2e-jsdom:         { requires: [lint] }
+      - test-e2e-puppeteer:     { requires: [lint] }

.eslintignore

@@ -1,4 +1,4 @@
 node_modules
 coverage
 test/fixtures/**
-src/browsers.js
+src/browsers/index.js

README.md

@@ -36,10 +36,12 @@
   "dependencies": {
     "@babel/core": "^7.5.5",
     "@babel/parser": "^7.5.5",
+    "babel-loader": "^8.0.6",
     "hable": "^1.0.1",
     "signal-exit": "^3.0.2",
     "tree-kill": "^1.2.1",
-    "vue-template-compiler": "^2.6.10"
+    "vue-template-compiler": "^2.6.10",
+    "webpack": "^4.39.1"
   },
   "devDependencies": {
     "@babel/node": "^7.5.5",

package.json

@@ -8,7 +8,7 @@ const Glob = require('glob')
 const glob = promisify(Glob)
 
 async function main() {
-  const srcPath = path.resolve(__dirname, '../src/') + '/'
+  const srcPath = path.resolve(__dirname, '../src/browsers') + '/'
   let files = await glob(`${srcPath}/!(utils)/**/*.js`)
   files = files
     .filter(f => !f.includes('webpage') && !f.includes('logging'))
@@ -25,7 +25,7 @@ async function main() {
 `
   }, '')
 
-  fs.writeFileSync(path.join(__dirname, '../src/browsers.js'), `/**
+  fs.writeFileSync(path.join(__dirname, '../src/browsers/index.js'), `/**
  * THIS FILE IS AUTOMATICALLY GENERATED
  * DONT CHANGE ANYTHING MANUALLY
  */

scripts/create-browsers.js

@@ -1,18 +1,18 @@
 import path from 'path'
 import Hookable from 'hable'
 import onExit from 'signal-exit'
-import BrowserError from './utils/error'
-import { Xvfb, StaticServer } from './utils/commands'
-import { browsers } from './browsers'
+import { Xvfb, StaticServer } from '../commands'
 import {
   abstractGuard,
   loadDependency,
   isMockedFunction,
   disableTimers,
   enableTimers,
   getBrowserConfigFromString,
-  getBrowserImportFromConfig
-} from './utils'
+  getBrowserImportFromConfig,
+  BrowserError
+} from '../utils'
+import { browsers } from '.'
 
 export default class Browser extends Hookable {
   constructor(config = {}) {

src/browser.js renamed to src/browsers/browser.js

@@ -1,4 +1,4 @@
-import BrowserStackLocal from '../utils/commands/browserstack-local'
+import BrowserStackLocal from '../../commands/browserstack-local'
 import BrowserStackBrowser from './'
 
 export default class BrowserStackLocalBrowser extends BrowserStackBrowser {