Ember CLI addon for Style Regression Testing using Phantom JS, Resemble.js, and S3

Installation

ember install ember-cli-kimchi

To automatically upload screenshots and update current originalScreenshots with ember deploy production

ember install ember-cli-deploy-kimchi

Usage

Run Kimchi Test

ember kimchi

This command will run all the tests and run style regression testing that will compare the screenshots taken from running the test to the original screenshots for any difference.

Options

It supports all options for ember test with extra options added. Run ember kimchi --help to see all available options.

Upload screenshots to cloud storage

ember kimchi:upload

Options

Run ember kimchi:upload --help to see available options

NOTE: Currently only AWS S3 is supported

Configuration

Modify config/kimchi.js file to setup necessary credentials and optional paths.

Required Credentials for S3

module.exports = {
  s3: {
    prefix: '<prefix>',
    bucket: '<bucket-name>',
    accessKeyId: '<access-key-id>',
    secretAccessKey: '<secret-access-key>',
    region: '<region>'
  }
};

NOTE: S3 Options noted here is also available https://github.com/ember-cli-deploy/ember-cli-deploy-s3#configuration-options

Options

batchCount

Number of requests to be made at the same time to cloud storage

Type: Number

Default: 3

filePattern

Pattern to be matched with when uploading to cloud storage

Type: String

Default: **/*.{png,gif,jpg,svg}

screenshotsBaseFolder

Base folder path for all screenshot types to be saved

Type: String

Default: kimchi

screeenshotsFolder

Folder path to screenshots saved during test to be saved

Type: Object

Default:

{
  screenshots: 'screenshots',
  originalScreenshots: 'originalScreenshots',
  diffScreenshots: 'diffScreenshots'
}

viewportSize

Viewport Size to for PhantomJS

Type: Object

Default:

{
  width: 1024,
  height: 768
}

resemble

Options for resemble.js

Type: Object

Default:

{
  errorColor: {
    red: 255,
    green: 0,
    blue: 255
  },
  errorType: 'flat' || 'movement',
  transparency: 1
} 

reporter

Reporter type for testem

Type: String

Default: tap

uploadDeployTarget

Used with ember-cli-deploy-kimchi to compare with deployTarget to determine if screenshots captured should be uploaded and update current originalScreenshots to S3

Type: String

Default: production

originalScreenshotsBranch

Target branch name to get/update originalScreenshots to be compared with

Type: String

Default: master

Test Helpers

screenshot

Takes a screenshot of current state.

Usage

Acceptance Test

screenshot('<name>', {
  selector: '.class || #id selector',
  exclude: ['.array', '#of', '.selectors']
});

Component Integration Test

Import screenshot method from screenshot-helper

import { screenshot } from '../../helpers/screenshot-helper';

Arguments

name (required)

Name of the screenshot image to be saved under screenshots folder

options (optional)

Default:

{
  selector: 'body',
  exclude: []
}

• When a specific class or id selector is passed, it will calculate the rect of the element and take a screenshot of the element
• When exclude is passed with single or multiple selectors, it will apply visibility: hidden to all the elements

Example

Acceptance Test

visit('/test');

screenshot('test-page', {
  selector: '.main-content',
  exclude: ['.date', '.hide']
});

Component Integration Test

import { moduleForComponent, test } from 'ember-qunit';
import hbs from 'htmlbars-inline-precompile';
import { screenshot } from '../../helpers/screenshot-helper';

moduleForComponent('simple-box', 'Integration | Component | simple box', {
  integration: true
});

test('it renders', function(assert) {
  this.render(hbs`{{simple-box}}`);
  
  screenshot('component-test');
  
  assert.ok(this.$('.card p').text().trim().indexOf('I am a very simple card') !== -1);
});

Running Tests

• npm test