Robdel12

Jest + BigTest Interactor = Component Test ❤️

Over the past year, my friend Wil and I have been building an acceptance testing library for single page apps called BigTest. We strongly feel the highest value tests you can write are ones that run in different browsers and test the whole application together.

While building out BigTest Wil wrote a library called interactor (@bigtest/interactor). You can think about interactors as composable page objects that are super fast. They wait for the element to be present before interacting, so you don’t have to put any sleeps in or sync up with any run loops. It also has a super-expressive API that makes writing complex tests more readable and maintainable.

The best part about interactors is they are composable so you can build on top of other interactors. Another great thing is you can use them anywhere there’s DOM. They were specifically built

Robdel12

"use strict";

// TODO: I know, I know, don't use request...
const request = require("request");

// Wrap request with a promise to make it awaitable
function doRequest(options) {
  return new Promise(function(resolve, reject) {
    request(options, function(error, res, body) {
      if (!error && res.statusCode == 200) {

Robdel12

events:
  enabled: true
  subscriptions:
  - command: node ~/scripts/turn-off-printer.js
    event: PrintDone
    type: system
system:
  actions:
  - name: Turn off printer
    action: turnoff

Robdel12

// snagged from MDN
// The goal is to take all the CSS created in the CSS Object Model (CSSOM)
// and inject it into the DOM so Percy can render it safely in our browsers
let cssOmStyles = [].slice.call(document.styleSheets).reduce((prev: String, styleSheet: CSSStyleSheet) => {
  // Make sure it has a rulesheet, does NOT have a href (no external stylesheets), and isn't already in the DOM.
  let hasHref = styleSheet.href;
  let hasStyleInDom = styleSheet.ownerNode.innerText.length > 0;

  if (styleSheet.cssRules && !hasHref && !hasStyleInDom) {
    return (

Robdel12

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Emberx-select demo',
  xSelectValue: 'bob',
  actions: {
    setXSelect(value) {
      this.set('xSelectValue', value);
    }
  }

Robdel12

const https = require('https');

const AUTHORIZATION = ''; // base 64 of user:password
const BITBUCKET_USER = ''; // either the user or the org that owns the repo
const PERCY_USER = ''; // the name of your percy user or org

exports.handler = (event, context, callback) => {
  /**
    We need to post to a URL like this:
    https://api.bitbucket.org/2.0/repositories/<user>/<repo>/commit/<hash>/statuses/build

Robdel12

const PercyScript = require('@percy/script');
const fs = require('fs');
const path = require('path');

const directories = [
  path.resolve(__dirname, '../src/components/elements'),
  path.resolve(__dirname, '../src/components/patterns'),
  path.resolve(__dirname, '../src/components/templates'),
];

Robdel12

const PercyScript = require("@percy/script");
const fs = require("fs");
const path = require("path");

const directories = [
  {
    type: "Element",
    path: path.resolve(__dirname, "src/components/elements")
  },
  {

Robdel12

pipelines:
  default:
    - step:
        name: Visual test
        image: circleci/node:8-browsers
        script:
          - node -v
          - npm -v
          - npx percy exec -- node ./snapshots.js

Robdel12

{
  "devDependecies": {

  },
  "percy": {
    "version": 1,
    "agent": {
        "request-headers": {
          "Authentication": "Basic c3RnOnN0ZzEyMw==" 
        }