Builder visual

.gitignore

@@ -70,3 +70,10 @@ browserstack.err
 /skyux-spa-visual-tests/dist/
 /skyux-spa-visual-tests/node_modules/
 browserstack-binary/BrowserStackLocal
+
+skyux-spa-visual-tests/dist
+skyux-spa-visual-tests/node_modules
+skyux-spa-visual-tests/screenshots-baseline-local
+skyux-spa-visual-tests/screenshots-diff-local
+skyux-spa-visual-tests/screenshots-created-local
+

.travis.yml

@@ -34,6 +34,11 @@ before_install:
   - chmod +x ./scripts/visual-baseline.sh
   - chmod +x ./scripts/visual-failures.sh
 
+after_install:
+
+  - sudo cp .node_modules/@blackbaud/skyux-builder/ssl/skyux-ca.crt /usr/local/share/ca-certificates/skyux-ca.crt
+  - sudo update-ca-certificates
+
 script: ./scripts/travis-script.sh
 after_script: ./scripts/travis-after-script.sh
 after_success:

package.json

@@ -13,7 +13,7 @@
     "ci": "npm run lint && npm run test:ci && npm run build",
     "build": "npm run clean:srctemp && node config/utils/stage-ts.js && cd .srctemp && ../node_modules/.bin/ngc && cd ../ && npm run compile:sass && cd config/rollup && ../../node_modules/.bin/rollup -c rollup.config.js && ../../node_modules/.bin/rollup -c rollup.min.config.js && npm run clean:srctemp",
     "clean": "rimraf -- dist",
-    "clean:full": "npm cache clean && rimraf -- node_modules doc coverage dist .srctemp webdriver-screenshotslocal webdriver-screenshotslocal-diffs",
+    "clean:full": "npm cache clean && rimraf -- node_modules doc coverage dist .srctemp webdriver-screenshotslocal webdriver-screenshotslocal-diffs skyux-spa-visual-tests/node_modules/ skyux-spa-visual-tests/dist/",
     "clean:releases": "rimraf -- releases",
     "clean:srctemp": "rimraf -- .srctemp",
     "compile:sass": "./node_modules/node-sass/bin/node-sass src/scss/sky.scss dist/css/sky.css",
@@ -23,10 +23,10 @@
     "test:unit": "npm run test:unit:base -- config/karma/local.karma.conf.js",
     "test:unit:ci": "npm run test:unit:base -- config/karma/ci.karma.conf.js",
     "test:unit:base": "node --max-old-space-size=4096 node_modules/karma/bin/karma start",
-    "test:visual": "npm run test:visual:base -- config/wdio/local.wdio.conf.js",
-    "test:visual:ci": "./scripts/browserstack-local-start.sh && npm run test:visual:base -- config/wdio/ci.wdio.conf.js",
-    "test:visual:local-browserstack": "./scripts/browserstack-local-start.sh && npm run test:visual:base -- config/wdio/local-browserstack.wdio.conf.js",
-    "test:visual:base": "./node_modules/.bin/wdio",
+    "test:visual": "npm run test:visual:base && npm run test-visual:local",
+    "test:visual:ci": "npm run test:visual:base && npm run test-visual:ci",
+    "test:visual:local-browserstack": "npm run test:visual:base && npm run test-visual:local-browserstack",
+    "test:visual:base": "cd skyux-spa-visual-tests && npm run build-visual",
     "postversion": "git push && git push --tags",
     "prebuild": "npm run clean",
     "pretest": "npm run lint",

scripts/visual-baseline.sh

@@ -9,7 +9,7 @@ if [[ "$TRAVIS_PULL_REQUEST" == "false" && ! $TRAVIS_BRANCH =~ $SAVAGE_BRANCH ]]
   git config --global user.name "Blackbaud Sky Build User"
   git clone --quiet --branch=$TRAVIS_BRANCH https://${GH_TOKEN}@github.com/blackbaud/skyux2.git skyux2 > /dev/null
 
-  cp -rf webdriver-screenshots/ skyux2/
+  cp -rf skyux-spa-visual-tests/screenshots-baseline/ skyux2/
   cd skyux2
 
   if [ -z "$(git ls-files --others --exclude-standard)" ]; then

scripts/visual-failures.sh

@@ -17,15 +17,15 @@ if [[ "$(ls -A webdriver-screenshots-diffs)" ]]; then
     fi
     git checkout -b $branch
 
-    cp -rf ../webdriver-screenshots-screen created-screenshots/
+    cp -rf ../skyux-spa-visual-tests/screenshots-created/ created-screenshots/
 
     mkdir -p failures
 
-    cp -rf ../webdriver-screenshots-diffs/ failures/
+    cp -rf ../skyux-spa-visual-tests/screenshots-diff/ failures/
 
     mkdir -p all
 
-    cp -rf ../webdriver-screenshots/ all/
+    cp -rf ../skyux-spa-visual-tests/screenshots-baseline/ all/
 
     git add -A
     if [ -z "$(git status --porcelain)" ]; then

skyux-spa-visual-tests/.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

skyux-spa-visual-tests/.gitignore

@@ -0,0 +1,26 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# Dependency directories
+node_modules
+jspm_packages
+
+# Optional npm cache directory
+.npm
+
+# Optional REPL history
+.node_repl_history
+
+# SKY UX temp directory
+.skyuxtmp
+
+# SKY UX build directory
+dist
+
+# OS specific files
+.DS_Store

skyux-spa-visual-tests/.jshintrc

@@ -0,0 +1,13 @@
+{
+  "esversion": 6,
+  "curly": true,
+  "eqeqeq": true,
+  "forin": true,
+  "freeze": true,
+  "noarg": true,
+  "nonbsp": true,
+  "nonew": true,
+  "strict": true,
+  "undef": true,
+  "unused": true
+}

skyux-spa-visual-tests/.vscode/launch.json

@@ -0,0 +1,28 @@
+{
+    // Use IntelliSense to learn about possible Node.js debug attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "name": "Debug SKY UX",
+            "type": "node2",
+            "request": "launch",
+            "program": "${workspaceRoot}/../skyux-cli/bin/skyux.js",
+            "stopOnEntry": false,
+            "args": ["build"],
+            "cwd": "${workspaceRoot}",
+            "preLaunchTask": null,
+            "runtimeExecutable": null,
+            "runtimeArgs": [
+                "--nolazy"
+            ],
+            "env": {
+                "NODE_ENV": "development"
+            },
+            "console": "integratedTerminal",
+            "sourceMaps": false,
+            "outFiles": []
+        }
+    ]
+}

skyux-spa-visual-tests/.vscode/settings.json

@@ -0,0 +1,7 @@
+// Place your settings in this file to overwrite default and user settings.
+{
+    // Columns at which to show vertical rulers
+    "editor.rulers": [100],
+
+    "typescript.tsdk": "node_modules/typescript/lib"
+}

skyux-spa-visual-tests/README.md

@@ -0,0 +1,2 @@
+# skyux-template
+Template for SKY UX applications created by the SKY UX CLI

skyux-spa-visual-tests/config/ci.visual.conf.js

@@ -0,0 +1,98 @@
+/*jshint jasmine: true, node: true */
+/* global browser */
+'use strict';
+
+let builderUtils =  require('@blackbaud/skyux-builder/utils/host-utils');
+
+const SpecReporter = require('jasmine-spec-reporter').SpecReporter;
+
+var config = require('./shared.visual.conf.js');
+
+var browserstack = require('browserstack-local');
+
+require('./utils/fast-selenium.js');
+
+config.onPrepare = function () {
+  jasmine.getEnv().addReporter(new SpecReporter());
+  const PixDiff = require('pix-diff');
+  browser.pixDiff = new PixDiff(
+    {
+      basePath: 'screenshots-baseline/',
+      diffPath: 'screenshots-diff/',
+      baseline: true,
+      width: 1000,
+      height: 800
+    }
+  );
+
+  browser.skyVisualTestOptions = {
+    createdPath: 'screenshots-created/',
+    createdPathDiff: 'screenshots-created-diff/'
+  };
+
+  var destination = builderUtils.resolve(
+    '/',
+    browser.params.localUrl,
+    JSON.parse(browser.params.chunks),
+    JSON.parse(browser.params.skyPagesConfig)
+  );
+
+  return browser.get(destination);
+};
+
+config.capabilities =  {
+  'browserName': 'chrome',
+  'chromeOptions': {
+    'args': ['--disable-extensions --ignore-certificate-errors']
+  },
+  'browserstack.user': process.env.BROWSER_STACK_USERNAME,
+  'browserstack.key': process.env.BROWSER_STACK_ACCESS_KEY,
+  browser_version: '57',
+  'browserstack.local': 'true',
+  'browserstack.debug': 'true',
+  os: 'OS X',
+  os_version: 'El Capitan',
+  browserDisconnectTimeout: 3e5,
+  browserDisconnectTolerance: 3,
+  browserNoActivityTimeout: 3e5,
+  captureTimeout: 3e5,
+  build: 'skyux2-mac-chrome-webdriver-' + process.env.TRAVIS_BUILD_NUMBER,
+  resolution: '1280x960',
+  name: 'SKYUX2BROWSERSTACKCI',
+  'browserstack.localIdentifier': 'SKYUX2BROWSERSTACKCI',
+  'acceptSslCerts': true
+};
+
+config.seleniumAddress = 'http://hub-cloud.browserstack.com/wd/hub';
+
+config.beforeLaunch = function () {
+  require('ts-node').register({ ignore: false });
+  console.log('Connecting local');
+  return new Promise(function (resolve, reject){
+    exports.bs_local = new browserstack.Local();
+    exports.bs_local.start(
+      {
+        'key': process.env.BROWSER_STACK_ACCESS_KEY,
+        onlyAutomate: true,
+        forceLocal: true,
+        force: true,
+        localIdentifier: 'SKYUX2BROWSERSTACKCI'
+      }, function (error) {
+        if (error) {
+          return reject(error);
+        }
+
+        console.log('Connected. Now testing...');
+        resolve();
+      });
+  });
+};
+
+// Code to stop browserstack local after end of test
+config.afterLaunch = function () {
+  return new Promise(function (resolve) {
+    exports.bs_local.stop(resolve);
+  });
+};
+
+exports.config = config;

skyux-spa-visual-tests/config/local-browserstack.visual.conf.js

@@ -0,0 +1,102 @@
+/*jshint jasmine: true, node: true */
+/* global browser */
+'use strict';
+
+let builderUtils =  require('@blackbaud/skyux-builder/utils/host-utils');
+
+const SpecReporter = require('jasmine-spec-reporter').SpecReporter;
+
+var config = require('./shared.visual.conf.js');
+
+var browserstack = require('browserstack-local');
+
+require('./utils/fast-selenium.js');
+
+var timestamp = new Date().toString();
+
+config.onPrepare = function () {
+  jasmine.getEnv().addReporter(new SpecReporter());
+  const PixDiff = require('pix-diff');
+  browser.pixDiff = new PixDiff(
+    {
+      basePath: 'screenshots-baseline-local/',
+      diffPath: 'screenshots-diff-local/',
+      baseline: true,
+      width: 1000,
+      height: 600
+    }
+  );
+
+  browser.skyVisualTestOptions = {
+    createdPath: 'screenshots-created-local/',
+    createdPathDiff: 'screenshots-created-diff-local/'
+  };
+
+  var destination = builderUtils.resolve(
+    '/',
+    browser.params.localUrl,
+    JSON.parse(browser.params.chunks),
+    JSON.parse(browser.params.skyPagesConfig)
+  );
+
+  return browser.get(destination);
+
+};
+
+config.capabilities =  {
+  'browserName': 'chrome',
+  'chromeOptions': {
+    'args': ['--disable-extensions --ignore-certificate-errors']
+  },
+  'browserstack.user': process.env.BROWSER_STACK_USERNAME,
+  'browserstack.key': process.env.BROWSER_STACK_ACCESS_KEY,
+  browser_version: '57',
+  'browserstack.local': 'true',
+  'browserstack.debug': 'false',
+  os: 'OS X',
+  os_version: 'El Capitan',
+  browserDisconnectTimeout: 3e5,
+  browserDisconnectTolerance: 3,
+  browserNoActivityTimeout: 3e5,
+  captureTimeout: 3e5,
+  build: 'skyux2-mac-chrome-webdriver-local-' + timestamp,
+  resolution: '1280x960',
+  name: 'SKYUX2BROWSERSTACKLOCAL',
+  'browserstack.localIdentifier': 'SKYUX2BROWSERSTACKLOCAL',
+  'acceptSslCerts': true,
+  'browserstack.video': 'false'
+};
+
+config.seleniumAddress = 'http://hub-cloud.browserstack.com/wd/hub';
+
+config.beforeLaunch = function () {
+  require('ts-node').register({ ignore: false });
+  console.log('Connecting local');
+  return new Promise(function (resolve, reject) {
+    exports.bs_local = new browserstack.Local();
+    exports.bs_local.start(
+      {
+        'key': process.env.BROWSER_STACK_ACCESS_KEY,
+        onlyAutomate: true,
+        forceLocal: true,
+        force: true,
+        localIdentifier: 'SKYUX2BROWSERSTACKLOCAL'
+      }, function (error) {
+        if (error) {
+          return reject(error);
+        }
+
+        console.log('Connected. Now testing...');
+        resolve();
+      });
+  });
+};
+
+// Code to stop browserstack local after end of test
+config.afterLaunch = function () {
+  return new Promise(function (resolve) {
+    exports.bs_local.stop(resolve);
+  });
+};
+
+exports.config = config;