Merge pull request #38 from trotzig/rename-to-diffux-ci

Rename project Diffux CI

README.md

@@ -1,25 +1,25 @@
-# Likadan
+# Diffux-CI
 
-Likadan is a command-line tool to visually diff JavaScript components.
+Diffux-CI is a command-line tool to visually diff JavaScript components.
 
-You begin by defining a set of examples that Likadan will grab snapshots for.
-If a previous snapshot (called a "baseline") exists for a component, Likadan
+You begin by defining a set of examples that Diffux-CI will grab snapshots for.
+If a previous snapshot (called a "baseline") exists for a component, Diffux-CI
 will diff the new snapshot with the old baseline. If a diff is found, a visual
 representation of the changes will be constructed. You can then use that diff
 image to decide whether a visual regression has been introduced or not, and
 take appropriate action based on that information.
 
-![Demo of Likadan in action](likadan_demo.gif)
+![Demo of Diffux-CI in action](diffux_ci_demo.gif)
 
 ## Defining examples
 
 You define your examples in a JavaScript file and include it in the
 `source_files` [configuration](#configuration) option.
 
-Here's an example of a button component being added to a Likadan suite:
+Here's an example of a button component being added to a Diffux-CI suite:
 
 ```javascript
-likadan.define('button', function() {
+diffux.define('button', function() {
   var elem = document.createElement('button');
   elem.setAttribute('class', '.button');
   elem.innerHTML = 'Submit';
@@ -35,21 +35,21 @@ DOM. A helper method to reduce some of the boilerplate is probably a good idea
 in your project.
 
 During development, you might want to zoom in/focus on a single example. In
-those situations, you can use the `likadan.fdefine` function instead of
-`likadan.define`. Using `fdefine` will cause `likadan` to only run for that
+those situations, you can use the `diffux.fdefine` function instead of
+`diffux.define`. Using `fdefine` will cause `diffux_ci` to only run for that
 example.
 
 ### Setting viewport sizes
 
-By default, Likadan renders examples in a 1024 wide window. If you have
+By default, Diffux-CI renders examples in a 1024 wide window. If you have
 components that render differently depending on available screen size you can
 use the `viewports` option in the object passed in as the second argument to
-`likadan.define`. These need to correspond to configured `viewports` in the
-`.likadan.yaml` file. Likadan comes pre-configured with three default sizes:
+`diffux.define`. These need to correspond to configured `viewports` in the
+`.diffux_ci.yaml` file. Diffux-CI comes pre-configured with three default sizes:
 `large` (1024x768), `medium` (640x888), and `small` (320x444).
 
 ```javascript
-likadan.define('responsive component', function() {
+diffux.define('responsive component', function() {
   var elem = document.createElement('div');
   elem.setAttribute('class', '.responsive-component');
   document.body.appendChild(elem);
@@ -59,13 +59,13 @@ likadan.define('responsive component', function() {
 
 ### Controlling the snapshot
 
-Likadan can usually figure out what part of the screen belongs to your
+Diffux-CI can usually figure out what part of the screen belongs to your
 component, and take the snapshot of that area. In some situations however, that
 won't work. In those cases, you can pass in the `snapshotEntireScreen` option
 to force a full-size snapshot to be taken.
 
 ```javascript
-likadan.define('dialog window', function() {
+diffux.define('dialog window', function() {
   var elem = document.createElement('div');
   elem.setAttribute('class', '.dialog');
   document.body.appendChild(elem);
@@ -79,7 +79,7 @@ If your examples need to do something asynchronous before they finish render,
 you can use the `done` callback passed in to the define method.
 
 ```javascript
-likadan.define('async component', function(done) {
+diffux.define('async component', function(done) {
   var elem = document.createElement('div');
   document.body.appendChild(elem);
   setTimeout(function() {
@@ -91,19 +91,19 @@ likadan.define('async component', function(done) {
 
 ## Installation
 
-Likadan comes bundled as a gem. To install it, run `gem install likadan`.
+Diffux-CI comes bundled as a gem. To install it, run `gem install diffux_ci`.
 
 ## Configuration
 
-Likadan loads configuration in one of the following ways:
+Diffux-CI loads configuration in one of the following ways:
 
-- From a YAML file specified via a `LIKADAN_CONFIG_FILE` environment variable
-- From `.likadan.yaml` in the current working directory
+- From a YAML file specified via a `DIFFUX_CI_CONFIG_FILE` environment variable
+- From `.diffux_ci.yaml` in the current working directory
 
 ```yaml
 source_files:
  - application.js
- - likadan-examples.js
+ - diffux_ci-examples.js
 stylesheets:
  - application.css
 snapshots_folder: ./snapshots
@@ -120,59 +120,59 @@ s3_secret_access_key: <your secret acccess key>
 
 ## Command line tools
 
-### `likadan`
+### `diffux_ci`
 
 This command will fire up a Firefox instance and take snapshots of all your
-likadan examples.
+diffux examples.
 
-### `likadan review`
+### `diffux_ci review`
 
-Once `likadan` has finished, run `likadan review` from the command line. This
+Once `diffux_ci` has finished, run `diffux_ci review` from the command line. This
 will open a page that compares the latest run's snapshots against the
 previously accepted snapshots. You can then approve or reject the snapshots for
 the next run.
 
-### `likadan upload_diffs`
+### `diffux_ci upload_diffs`
 
 Uploads all current diff images to an Amazon S3 account and reports back URLs
 to access those diff images. Requires the `s3_access_key_id` and
 `s3_secret_access_key` configuration options.
 
-### `likadan clean`
+### `diffux_ci clean`
 
 Recursively removes everything in the snapshots folder (configured through
 `snapshots_folder`).
 
 ## Running in a CI environment
 
-The main purpose for Likadan is for it to be run in a CI (Continuous
+The main purpose for Diffux-CI is for it to be run in a CI (Continuous
 Integration) environment. The command line tools provided are designed to be
 used as building blocks in a script that you can run in
 [Travis](https://travis-ci.org/), [Jenkins](https://jenkins-ci.org/) and other
 Continuous Integration environments.
 
-Below is an example of how you can use Likadan to test if a commit introduces
+Below is an example of how you can use Diffux-CI to test if a commit introduces
 any visual change.
 
 1. Check out the commit previous to the one to test (e.g. `git checkout HEAD^`)
 2. (optionally) precompile your JavaScript and/or CSS
-3. Run `likadan` to generate baseline snapshots
+3. Run `diffux_ci` to generate baseline snapshots
 4. Check out the commit to test
 5. (optionally) precompile your JavaScript and/or CSS
-6. Run `likadan` to diff against previously created snapshots
-7. Run `likadan upload_diffs` to upload diffs to a publicly accessible location
+6. Run `diffux_ci` to diff against previously created snapshots
+7. Run `diffux_ci upload_diffs` to upload diffs to a publicly accessible location
 
 There's an example script implementing these steps located in
-[likadan_ci_example.sh](likadan_ci_example.sh). Use that as a starting point
+[diffux_ci_example.sh](diffux_ci_example.sh). Use that as a starting point
 for your own CI script.
 
-### Headless Likadan
+### Headless Diffux-CI
 
-Since Likadan uses Firefox to generate its snapshots, you need a display.  If
-you are on a build server, you usually don't have a screen. To run `likadan`
+Since Diffux-CI uses Firefox to generate its snapshots, you need a display.  If
+you are on a build server, you usually don't have a screen. To run `diffux_ci`
 then, you can use a virtual display server such as
 [xvfb](http://www.x.org/archive/X11R7.6/doc/man/man1/Xvfb.1.xhtml).  The
-[example CI script](likadan_ci_example.sh) as well as the internal Travis test
-run for Likadan uses `xvfb-run` in order to obtain a virtual display. There are
+[example CI script](diffux_ci_example.sh) as well as the internal Travis test
+run for Diffux-CI uses `xvfb-run` in order to obtain a virtual display. There are
 other tools that can help you with this as well, for example the [headless
 gem](https://github.com/leonid-shevtsov/headless).

bin/diffux_ci

@@ -0,0 +1,37 @@
+#!/usr/bin/env ruby
+
+require 'diffux_ci_utils'
+require 'diffux_ci_action'
+require 'diffux_ci_uploader'
+require 'fileutils'
+
+action = ARGV[0] || 'run'
+case action
+when 'run'
+  Thread.abort_on_exception = true
+  Thread.new do
+    require 'diffux_ci_runner'
+    exit
+  end
+  require 'diffux_ci_server'
+
+when 'review'
+  system 'open', DiffuxCIUtils.construct_url('/review')
+  require 'diffux_ci_server'
+
+when 'clean'
+  if File.directory? DiffuxCIUtils.config['snapshots_folder']
+    FileUtils.remove_entry_secure DiffuxCIUtils.config['snapshots_folder']
+  end
+
+when 'approve', 'reject'
+  abort 'Missing example name' unless example_name = ARGV[1]
+  abort 'Missing viewport name' unless viewport_name = ARGV[2]
+  DiffuxCIAction.new(example_name, viewport_name).send(action)
+
+when 'upload_diffs'
+  # `upload_diffs` returns a URL to a static html file
+  puts DiffuxCIUploader.new.upload_diffs
+else
+  abort "Unknown action \"#{action}\""
+end

likadan.gemspec → diffux_ci.gemspec

@@ -1,13 +1,13 @@
 Gem::Specification.new do |s|
-  s.name        = 'likadan'
-  s.version     = '0.0.14'
+  s.name        = 'diffux_ci'
+  s.version     = '0.1.0'
   s.date        = '2015-02-20'
-  s.summary     = 'Likadan'
-  s.description = 'Likadan, a perceptual diff tool for JS components'
+  s.summary     = 'Diffux-CI'
+  s.description = 'Diffux-CI, a perceptual diff tool for JS components'
   s.authors     = ['Henric Trotzig']
   s.email       = '[email protected]'
-  s.executables = ['likadan']
-  s.homepage    = 'http://rubygems.org/gems/likadan'
+  s.executables = ['diffux_ci']
+  s.homepage    = 'http://rubygems.org/gems/diffux_ci'
   s.license     = 'MIT'
   s.require_paths = ['lib']
   s.files         = Dir['lib/**/*']

likadan_ci_example.sh → diffux_ci_example.sh

@@ -1,37 +1,37 @@
 #!/bin/bash -ex
 
-# This is an example script that generates and uploads Likadan diffs for the
+# This is an example script that generates and uploads Diffux-CI diffs for the
 # differences between the previous and current commit.
 
-run-likadan() {
+run-diffux-ci() {
   # Checkout the commit
   git checkout --quiet $1
 
   # Install dependencies and precompile the JavaScript bundle
   npm install
   webpack ./entry.js bundle.js
 
-  # Run likadan for the current commit. We use `xvfb-run` so that we can run
-  # likadan (which uses Firefox) in a headless display environment.
-  xvfb-run likadan
+  # Run diffux_ci for the current commit. We use `xvfb-run` so that we can run
+  # diffux_ci (which uses Firefox) in a headless display environment.
+  xvfb-run diffux_ci
 }
 
 # Check out the previous version and generate baseline snapshots
-run-likadan HEAD^
+run-diffux-ci HEAD^
 
 # Check out the latest version and check for diffs
-run-likadan -
+run-diffux-ci -
 
 # Finally, upload any diffs to s3
-url_to_diffs=`likadan upload_diffs`
+url_to_diffs=`diffux_ci upload_diffs`
 if [ -n "$url_to_diffs" ]; then
   # We have a URL to the diff(s) found for the commit. We can choose to do one
   # of a few things here. We either exit the script with a non-zero exit code.
   # This will likely make the CI run fail. We can also allow the script to pass,
   # but instead post a comment to the commit with the URL to the diff(s). Below
   # is an example of the latter, where we post back a comment to a Gerrit patch
   # set.
-  message="Likadan diff(s) were found: $link_to_diffs"
+  message="Diffux-CI diff(s) were found: $link_to_diffs"
 
   ssh -p 29418 [email protected] \
     gerrit review \'--message="$message"\' $GERRIT_PATCHSET_REVISION

example-project/example.js

@@ -1,19 +1,19 @@
-likadan.define('foo', function() {
+diffux.define('foo', function() {
   var elem = document.createElement('div');
   elem.setAttribute('class', 'foo');
   elem.innerHTML = 'Texts insides';
   document.body.appendChild(elem);
   return elem;
 });
 
-likadan.define('hallooo', function() {
+diffux.define('hallooo', function() {
   var elem = document.createElement('span');
   elem.innerHTML = 'Hioyi!<br>Hello';
   document.body.appendChild(elem);
   return elem;
 }, { viewports: ['mobile', 'desktop'] });
 
-likadan.define('bar', function() {
+diffux.define('bar', function() {
   var elem = document.createElement('span');
   elem.innerHTML = 'go bars!<br>bars';
   document.body.appendChild(elem);

lib/likadan-diffs.html.erb → lib/diffux_ci-diffs.html.erb

@@ -1,10 +1,10 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>Likadan diffs</title>
+    <title>Diffux-CI diffs</title>
   </head>
   <body>
-    <h1>Likadan diffs</h1>
+    <h1>Diffux-CI diffs</h1>
     <p>File generated: <%= Time.now %></p>
 
     <% diff_images.each do |diff| %>

lib/diffux_ci_action.rb

@@ -0,0 +1,29 @@
+require 'diffux_ci_utils'
+require 'fileutils'
+
+class DiffuxCIAction
+  def initialize(example_name, viewport_name)
+    @example_name = example_name
+    @viewport_name = viewport_name
+  end
+
+  def approve
+    diff_path = DiffuxCIUtils.path_to(@example_name, @viewport_name, 'diff.png')
+    baseline_path = DiffuxCIUtils.path_to(@example_name, @viewport_name, 'baseline.png')
+    candidate_path = DiffuxCIUtils.path_to(@example_name, @viewport_name, 'candidate.png')
+
+    FileUtils.rm(diff_path, force: true)
+
+    if File.exist? candidate_path
+      FileUtils.mv(candidate_path, baseline_path)
+    end
+  end
+
+  def reject
+    diff_path = DiffuxCIUtils.path_to(@example_name, @viewport_name, 'diff.png')
+    candidate_path = DiffuxCIUtils.path_to(@example_name, @viewport_name, 'candidate.png')
+
+    FileUtils.rm(diff_path, force: true)
+    FileUtils.rm(candidate_path, force: true)
+  end
+end