Chore: functional test framework using CodeceptJS (#628)

.gitignore

@@ -9,3 +9,4 @@ reports
 dist
 src/i18n/json
 jsconfig.json
+functional-tests/output

.travis.yml

@@ -1,6 +1,6 @@
 language: node_js
 node_js:
-- '6'
+- '8'
 stages:
 - ci
 - name: sauce-labs

codecept.conf.js

@@ -0,0 +1,63 @@
+const DEFAULT_WAIT_TIME = 10000; // 10 seconds
+const {
+    SAUCE_USERNAME,
+    SAUCE_ACCESS_KEY,
+    TRAVIS_JOB_NUMBER,
+    CI,
+    BROWSER_NAME = 'chrome',
+    BROWSER_VERSION = 'latest',
+    BROWSER_PLATFORM
+} = process.env;
+
+// Local selenium config
+const webDriverIOlocal = {
+    url: 'http://localhost:8000',
+    browser: 'chrome',
+    smartWait: DEFAULT_WAIT_TIME,
+    restart: false,
+    waitForTimeout: DEFAULT_WAIT_TIME
+};
+
+// CI saucelabs config
+let WebDriverIO;
+if (typeof SAUCE_USERNAME === 'undefined') {
+    WebDriverIO = webDriverIOlocal;
+} else {
+    WebDriverIO = Object.assign({}, webDriverIOlocal, {
+        host: 'ondemand.saucelabs.com',
+        port: 80,
+        user: SAUCE_USERNAME,
+        key: SAUCE_ACCESS_KEY,
+        desiredCapabilities: {
+            'tunnel-identifier': TRAVIS_JOB_NUMBER,
+            browserName: BROWSER_NAME,
+            version: BROWSER_VERSION,
+            platform: BROWSER_PLATFORM,
+            chromeOptions: {
+                args: ['--disable-web-security']
+            }
+        }
+    });
+
+    if (!CI) {
+        // Local saucelabs config
+        Object.assign(WebDriverIO, {
+            host: 'localhost',
+            port: 4445
+        });
+    }
+}
+
+exports.config = {
+    tests: './functional-tests/*_test.js',
+    timeout: DEFAULT_WAIT_TIME,
+    output: './functional-tests/output',
+    helpers: {
+        WebDriverIO,
+        Filesystem: {}
+    },
+    include: {},
+    bootstrap: false,
+    mocha: {},
+    name: 'box-content-preview'
+};

functional-tests/.eslintrc

@@ -0,0 +1,12 @@
+{
+    "extends": ["../.eslintrc"],
+    "globals": {
+        "Feature": false,
+        "Before": false,
+        "Scenario": false
+    },
+    "rules": {
+        "func-names": ["off"],
+        "no-unused-expressions" : ["off"]
+    }
+}

functional-tests/README.md

@@ -0,0 +1,11 @@
+# Running tests locally
+
+## Saucelabs
+1) Download the [saucelabs proxy](https://wiki.saucelabs.com/display/DOCS/Sauce+Connect+Proxy)
+2) Run ```yarn functional-tests``` to start a local server on localhost:8000
+3) Run the proxy ```./bin/sc -u SAUCELABS_USER_NAME -k SAUCELABS_ACCESS_KEY -N -i test``` to allow saucelabs to access your localhost
+4) Run the tests
+```SAUCE_USERNAME=SAUCELABS_USER_NAME SAUCE_ACCESS_KEY=SAUCELABS_ACCESS_KEY TRAVIS_JOB_NUMBER=TUNNEL_ID node ./node_modules/codeceptjs/bin/codecept.js run --verbose``` where SAUCE_USERNAME, SAUCELABS_ACCESS_KEY can be found in saucelabs website. TUNNEL_ID is a unique identifier such as your username.
+
+## local selenium and browser testing (without saucelabs)
+Make sure selenium webdriver is running and run ```node ./node_modules/codeceptjs/bin/codecept.js run --verbose```

functional-tests/constants.js

@@ -0,0 +1,4 @@
+// Unfortunately node doesnt support native imports (yet)
+
+exports.SELECTOR_BOX_PREVIEW_BTN_DOWNLOAD = '.bp-btn-download';
+exports.SELECTOR_DOWNLOAD_IFRAME = '#downloadiframe';

functional-tests/header_test.js

@@ -0,0 +1,17 @@
+const { SELECTOR_BOX_PREVIEW_BTN_DOWNLOAD, SELECTOR_DOWNLOAD_IFRAME } = require('./constants');
+const { expect } = require('chai');
+
+Feature('Header');
+
+Before((I) => {
+    I.amOnPage('/functional-tests/index.html');
+});
+
+Scenario('Download the file @ci', function*(I) {
+    I.waitForVisible(SELECTOR_BOX_PREVIEW_BTN_DOWNLOAD, 5000);
+    I.click(SELECTOR_BOX_PREVIEW_BTN_DOWNLOAD);
+    I.waitForElement(SELECTOR_DOWNLOAD_IFRAME);
+    const src = yield I.grabAttributeFrom(SELECTOR_DOWNLOAD_IFRAME, 'src');
+    const urlRegex = /https:\/\/dl[0-9]*\.boxcloud\.com.+\/download/;
+    expect(urlRegex.test(src)).to.be.true;
+});

functional-tests/sanity_test.js

@@ -0,0 +1,12 @@
+Feature('Sanity');
+const bpLoaded = '.bp-loaded';
+
+Before((I) => {
+    I.amOnPage('/functional-tests/index.html');
+});
+
+Scenario('Sanity test @ci', (I) => {
+    I.waitForElement(bpLoaded);
+    I.waitForVisible(bpLoaded);
+    I.waitForText('The Content Platform for Your Apps');
+});

package.json

@@ -26,6 +26,7 @@
     "box-annotations": "^0.12.0",
     "chai": "^4.1.2",
     "chai-dom": "^1.5.0",
+    "codeceptjs-webdriverio": "^1.1.0",
     "conventional-changelog-cli": "^1.3.5",
     "conventional-github-releaser": "^2.0.0",
     "create-react-class": "^15.6.2",
@@ -101,8 +102,8 @@
     "commitmsg": "commitlint -e",
     "debug": "NODE_ENV=test ./node_modules/.bin/karma start build/karma.conf.js --no-single-run --auto-watch",
     "dev": "BABEL_ENV=dev NODE_ENV=dev ./node_modules/.bin/webpack --progress --colors --config build/webpack.config.js",
-    "functional-tests": "python -m SimpleHTTPServer 8000 & node ./node_modules/mocha/bin/mocha --recursive ./functional-tests/ --timeout 10000 ; killall python -m SimpleHTTPServer 8000",
-    "functional-tests-ci": "yarn run clean && yarn run build-rb && yarn run build-ci && node ./node_modules/mocha/bin/mocha ./functional-tests/ --timeout 10000",
+    "functional-tests": "python -m SimpleHTTPServer 8000 & node ./node_modules/codeceptjs/bin/codecept.js run --verbose ; killall python -m SimpleHTTPServer 8000",
+    "functional-tests-ci": "yarn run clean && yarn run build-rb && yarn run build-ci && node ./node_modules/codeceptjs/bin/codecept.js run --verbose --grep @ci",
     "lint": "NODE_ENV=dev ./node_modules/.bin/eslint src/lib && ./node_modules/.bin/stylelint 'src/lib/**/*.scss'",
     "precommit": "lint-staged",
     "prepush": "yarn run lint",