initial commit

Author: taktakpeops

.editorconfig

@@ -0,0 +1,15 @@
+# https://editorconfig.org
+
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+insert_final_newline = false
+trim_trailing_whitespace = false

.eslintrc

@@ -0,0 +1,22 @@
+{
+  "parser": "@typescript-eslint/parser",
+  "env": {
+    "node": true
+  },
+  "extends":  [
+    "plugin:@typescript-eslint/recommended",
+    "prettier/@typescript-eslint",
+    "plugin:prettier/recommended"
+  ],
+  "parserOptions": {
+    "ecmaVersion":  2018,
+    "sourceType": "module",
+    "tsconfigRootDir": ".",
+    "project": "./tsconfig.json"
+  },
+  "rules": {
+    "@typescript-eslint/no-unused-vars": 2,
+    "@typescript-eslint/explicit-function-return-type": 2,
+    "@typescript-eslint/no-explicit-any": 1
+  }
+}

.gitignore

@@ -0,0 +1,2 @@
+lib/
+node_modules/

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "trailingComma": "all",
+  "semi": true,
+  "singleQuote": true,
+  "printWidth": 150,
+  "tabWidth": 2
+}

LICENSE.md

@@ -0,0 +1,23 @@
+## MIT License
+
+Copyright (c) 2019-2020 Taktakpeops
+Permission is hereby granted, free of charge, to any person
+obtaining a copy of this software and associated documentation
+files (the "Software"), to deal in the Software without
+restriction, including without limitation the rights to use,
+copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the
+Software is furnished to do so, subject to the following
+conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
+OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -0,0 +1,88 @@
+# jest-environment-browserstack
+
+Use Jest as test-runner for running your visual-tests and more using Browserstack.
+
+The current implementation supports only the W3C way for capabilities. More info: https://www.browserstack.com/automate/selenium-4
+
+# Usage
+
+For using this environment, run first the following command in your terminal:
+
+```
+npm install --save-dev jest-environment-browserstack
+```
+
+Once it's done, configure your Jest config.
+
+## Browserstack
+
+Assuming your configuration is defined in your `package.json`, add the following lines to your `globals` definition:
+
+```json
+{
+  "jest": {
+    "preset": "ts-jest",
+    "testEnvironment": "jsdom",
+    "globals": {
+      "browserstack": {
+        "capabilities": {
+          "browserName": "chrome",
+          "browserVersion": "76.0",
+          "bstack:options": {
+            "os": "Windows",
+            "osVersion": "10",
+            "userName": "myUsername",
+            "accessKey": "myAccessKey",
+            "buildName": "myBuild",
+            "sessionName": "mySessionName"
+          }
+        }
+      }
+    }
+  }
+}
+```
+
+## Browserstack Local
+
+Assuming here also your configuration is defined in your `package.json`, add the following lines to your `globals` definition:
+
+```json
+{
+  "jest": {
+    "preset": "ts-jest",
+    "testEnvironment": "jsdom",
+    "globals": {
+      "browserstack": {
+        "capabilities": {
+          "browserName": "chrome",
+          "browserVersion": "76.0",
+          "bstack:options": {
+            "os": "Windows",
+            "osVersion": "10",
+            "userName": "myUsername",
+            "accessKey": "myAccessKey",
+            "buildName": "myBuild",
+            "sessionName": "mySessionName"
+          }
+        },
+        "localTesting": {
+          "verbose": true
+        }
+      }
+    }
+  }
+}
+```
+
+## Credentials
+
+If you aren't willing to put your credentials in your `package.json` file, you can export in your environment `BROWSERSTACK_USER_NAME` and `BROWSERSTACK_ACCESS_KEY`. If you do so, `userName` and `accessKey` can be omitted.
+
+# Known limitations
+
+For now, only one browser can be defined.
+
+# Bug and more
+
+Feel free to open an issue on GitHub or to contribute by opening a pull-request.

package-lock.json

@@ -0,0 +1,42 @@
+{
+  "name": "jest-environment-browserstack",
+  "version": "0.1.0",
+  "description": "an environment for using Browserstack with Jest",
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "scripts": {
+    "build": "tsc",
+    "lint": "eslint --ext .ts src/*",
+    "lint:fix": "eslint --ext .ts src/* --fix",
+    "prettier": "prettier --write \"**/*.{md,ts}\"",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "jest",
+    "browserstack",
+    "e2e",
+    "visual-testing",
+    "test",
+    "integration-test"
+  ],
+  "author": "taktakpeops",
+  "license": "MIT",
+  "dependencies": {
+    "@jest/types": "~24.9.0",
+    "@types/selenium-webdriver": "~4.0.3",
+    "browserstack-local": "~1.4.2",
+    "jest-environment-node": "~24.9.0",
+    "selenium-webdriver": "~4.0.0-alpha.5"
+  },
+  "devDependencies": {
+    "@types/jest": "~24.0.18",
+    "@types/node": "~12.7.7",
+    "@typescript-eslint/eslint-plugin": "~2.3.1",
+    "@typescript-eslint/parser": "~2.3.1",
+    "eslint": "~6.4.0",
+    "eslint-config-prettier": "~6.3.0",
+    "eslint-plugin-prettier": "~3.1.1",
+    "prettier": "~1.18.2",
+    "typescript": "~3.6.3"
+  }
+}

package.json

@@ -0,0 +1,18 @@
+export interface BrowserstackW3COptions {
+  userName: string;
+  accessKey: string;
+  os?: string;
+  osVersion?: string;
+  local?: boolean;
+  debug?: boolean;
+  buildName?: string;
+  sessionName?: string;
+  localIdentifier?: string;
+  networkLogs?: boolean;
+}
+
+export interface BrowserstackCapabilities {
+  browserName: string;
+  'bstack:options': BrowserstackW3COptions;
+  browserVersion?: string;
+}

src/config.ts

@@ -0,0 +1,116 @@
+import NodeEnvironment from 'jest-environment-node';
+import { Config } from '@jest/types';
+import { Options, Local } from 'browserstack-local';
+import { Builder, WebDriver } from 'selenium-webdriver';
+import { randomBytes } from 'crypto';
+import { Script } from 'vm';
+
+import { BrowserstackCapabilities } from './config';
+
+export default class BrowserstackEnvironment extends NodeEnvironment {
+  private readonly localIdentifier: string;
+
+  private readonly key: string;
+
+  private readonly selHubUrl: string;
+
+  private readonly btCapabilities: BrowserstackCapabilities;
+
+  private btTunnelOpts: Options;
+
+  constructor(config: Config.ProjectConfig) {
+    super(config);
+
+    const {
+      browserstack: { capabilities, seleniumHubUrl = 'https://hub-cloud.browserstack.com/wd/hub', localTesting = null },
+    } = config.globals;
+
+    this.btCapabilities = capabilities;
+
+    const opts = this.btCapabilities['bstack:options'];
+
+    if (!opts.accessKey || !opts.userName) {
+      const { BROWSERSTACK_USER_NAME: userName = '', BROWSERSTACK_ACCESS_KEY: accessKey = '' } = process.env;
+
+      if (!userName || !accessKey) {
+        throw new Error('valid credentials for Browserstack are requierd');
+      }
+
+      this.btCapabilities['bstack:options'].accessKey = accessKey;
+      this.btCapabilities['bstack:options'].userName = userName;
+    }
+
+    this.key = opts.accessKey;
+
+    if (opts.local) {
+      if (!opts.localIdentifier) {
+        this.localIdentifier = Buffer.from(randomBytes(28)).toString('hex');
+        opts.localIdentifier = this.localIdentifier;
+      } else {
+        this.localIdentifier = opts.localIdentifier;
+      }
+
+      this.btTunnelOpts = localTesting;
+    }
+
+    this.selHubUrl = seleniumHubUrl;
+  }
+
+  async setup(): Promise<void> {
+    await super.setup();
+
+    if (this.btTunnelOpts) {
+      await this.createBTTunnel();
+    }
+
+    this.global.__driver__ = await this.createWDDriver();
+  }
+
+  async teardown(): Promise<void> {
+    await super.teardown();
+
+    await this.global.__driver__.quit();
+    await this.closeBTTunnel();
+  }
+
+  runScript(script: Script): any {
+    return super.runScript(script);
+  }
+
+  private async createWDDriver(): Promise<WebDriver> {
+    const driverFactory = new Builder().usingServer(this.selHubUrl).withCapabilities(this.btCapabilities);
+
+    return await driverFactory.build();
+  }
+
+  private createBTTunnel(): Promise<void | Error> {
+    if (this.localIdentifier) {
+      this.btTunnelOpts.localIdentifier = this.localIdentifier;
+    }
+
+    this.btTunnelOpts.key = this.key;
+
+    this.global.__local__ = new Local();
+
+    return new Promise((resolve, reject): void => {
+      this.global.__local__.start(this.btTunnelOpts, (err?: Error) => {
+        if (err) {
+          return reject(err);
+        }
+
+        return resolve();
+      });
+    });
+  }
+
+  private closeBTTunnel(): Promise<void | Error> {
+    return new Promise((resolve, reject): void => {
+      this.global.__local__.stop((err?: Error) => {
+        if (err) {
+          return reject(err);
+        }
+        resolve();
+      });
+    });
+  }
+}

src/index.ts

@@ -0,0 +1,17 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "esModuleInterop": true,
+        "target": "es6",
+        "allowJs": false,
+        "declaration": true,
+        "noImplicitAny": true,
+        "outDir": "./lib"
+    },
+    "include": [
+        "src/*.ts"
+    ],
+    "exclude": [
+        "node_modules/"
+    ]
+}