green_onion 0.0.2 → 0.0.3

data/.travis.yml

@@ -4,4 +4,4 @@ rvm:
 before_script:
   - "export DISPLAY=:99.0"
   - "sh -e /etc/init.d/xvfb start"
-script: rspec spec
+script: rake spec

data/README.md

@@ -11,25 +11,68 @@ GreenOnion is a testing library for the UI only. It alerts you when the appearan
 
 Add this line to your application's Gemfile:
 
-    gem 'green_onion'
+    `gem 'green_onion'`
 
 And then execute:
 
-    $ bundle
+    `bundle`
 
 Or install it yourself as:
 
-    $ gem install green_onion
+    `gem install green_onion`
 
 ## Usage
 
-### Partnering up with RSpec
+### RSpec
 
+For RSpec, `require 'green_onion'` in your spec_helper.rb file. Place this block in the file also:
+
+    `GreenOnion.configure do |c|
+	    c.skins_dir = 'spec/skins'
+	  	c.threshold = 20
+	  end`
+
+* `skins_dir` is the directory that GreenOnion will store all skins. The namespace for skins is {URI name}.png (original), {URI name}_fresh.png (testing), and {URI name}_diff.png
+* `threshold` is the percentage of acceptable change that the screenshots can take. This number can always be overwritten for an instance.
+
+Then use one of the three methods below in a test...
+
+### Percentage of change
+
+    `GreenOnion.skin_percentage(url, threshold {optional})`
 The primary feature of GreenOnion is seeing how much (if at all) a view has changed from one instance to the next, and being alerted when a view has surpassed into an unacceptable threshold.
 
+* `url` is the screen you want tested. Must include http://, example - 'http://yourSite.com'
+* `threshold` can be overwritten here, or if not given in the configure block – it will default to a threshold of 100%
+
 ### Viewing screenshot diffs
 
-Once you are aware of a issue in the UI, you can also rip open your spec/skins directory and manually see what the differences are from one screenshot to the next. Screenshots can either be viewed as a visual diff, or overlayed newest over oldest and viewed as an green_onion-skin with sliding transparency.
+    `GreenOnion.skin_visual(url)`
+Once you are aware of a issue in the UI, you can also rip open your spec/skins directory and manually see what the differences are from one screenshot to the next.
+
+* `url` is the screen you want tested. Must include http://, example - 'http://yourSite.com'
+
+### Both viewing screenshot diffs and percentage of change
+
+
+
+## Contributing
+
+### Testing
+
+The best way to run the specs is with...
+
+    `bundle exec rake spec`
+
+...this way a Sinatra WEBrick server will run concurrently with the test suite, and exit on completion. You can see the Sinatra app in spec/sample_app.
+
+## Roadmap
+
+* Screenshots can either be viewed as a visual diff, or overlayed newest over oldest and viewed as an onion-skin with sliding transparency.
+* Allow for headless screenshooting
+* More robust tests, especially around the visual diffs themselves
+* More documentation
+* More configuration/customizable settings
 
 ## THANK YOU
 

data/Rakefile

@@ -1,2 +1,24 @@
 #!/usr/bin/env rake
 require "bundler/gem_tasks"
+require 'rack'
+
+desc "Running server..."
+task :server do
+	require File.dirname(__FILE__) + '/spec/sample_app/sample_app.rb'
+	Rack::Handler::WEBrick.run SampleApp, :Port => 8070
+end
+
+desc "Running specs..."
+task :specs do
+	system "rspec spec"
+end
+
+desc "Running specs on test server"
+task :spec do
+	# have the server run on its own thread so that it doesn't block the spec task
+	server = Thread.new do	
+		task("server").execute
+	end
+	task("specs").execute
+	server.kill
+end

data/green_onion.gemspec

@@ -13,9 +13,11 @@ Gem::Specification.new do |gem|
   gem.add_development_dependency "fileutils"
   gem.add_development_dependency "pry"
   gem.add_development_dependency "debugger"
+  gem.add_development_dependency "sinatra"
   
   gem.add_dependency "capybara"
   gem.add_dependency "oily_png"
+  gem.add_dependency "rainbow"
 
   gem.files         = `git ls-files`.split($\)
   gem.executables   = gem.files.grep(%r{^bin/}).map{ |f| File.basename(f) }

data/lib/green_onion/compare.rb

@@ -1,4 +1,5 @@
 require "oily_png"
+require "rainbow"
 
 module GreenOnion
 	class Compare
@@ -25,17 +26,24 @@ module GreenOnion
 
 		def percentage_diff(org, fresh)
 			diff_images(org, fresh)
-			self.total_px = @images.first.pixels.length
-			self.changed_px = @diff.length
-			self.percentage_changed = (@diff.length.to_f / @images.first.pixels.length) * 100
-
-			puts "pixels (total):     #{@total_px}"
-			puts "pixels changed:     #{@changed_px}"
-			puts "pixels changed (%): #{@percentage_changed}%"
+			@total_px = @images.first.pixels.length
+			@changed_px = @diff.length
+			@percentage_changed = ( (@diff.length.to_f / @images.first.pixels.length) * 100 ).round(2)
 		end
 
 		def visual_diff(org, fresh)
 			diff_images(org, fresh)
+			diff_iterating(org, fresh)
+		end
+
+		def percentage_and_visual_diff(org, fresh)
+			diff_images(org, fresh)
+			@total_px = @images.first.pixels.length
+			@changed_px = @diff.length
+			@percentage_changed = ( (@diff.length.to_f / @images.first.pixels.length) * 100 ).round(2)
+		end
+
+		def diff_iterating(org, fresh)
 			x, y = @diff.map{ |xy| xy[0] }, @diff.map{ |xy| xy[1] }
 
 			@diffed_image = org.insert(-5, '_diff')
@@ -43,7 +51,7 @@ module GreenOnion
 			begin
 				@images.last.rect(x.min, y.min, x.max, y.max, ChunkyPNG::Color.rgb(0,255,0))
 			rescue NoMethodError
-				puts "#{org} and #{fresh} skins are the same."
+				puts "#{org} and #{fresh} skins are the same.".color(:yellow)
 			end
 			
 			@images.last.save(@diffed_image)

data/lib/green_onion/configuration.rb

@@ -1,11 +1,7 @@
 module GreenOnion
 	class Configuration
 		
-		attr_accessor :skins_dir
-
-		def skins_dir=(directory)
-			@skins_dir ||= directory
-		end
+		attr_accessor :skins_dir, :threshold
 
 	end
 end

data/lib/green_onion/version.rb

@@ -1,3 +1,3 @@
 module GreenOnion
-  VERSION = "0.0.2"
+  VERSION = "0.0.3"
 end

data/lib/green_onion.rb

@@ -2,11 +2,14 @@ require "green_onion/version"
 require "green_onion/screenshot"
 require "green_onion/compare"
 require "green_onion/configuration"
+require "rainbow"
+
 module GreenOnion
 	class << self
 
 		attr_reader :compare, :screenshot
 
+		# Pass configure block to set Configuration object
 		def configure
 			yield configuration
 		end
@@ -15,26 +18,56 @@ module GreenOnion
 			@configuration ||= GreenOnion::Configuration.new
 		end
 
+		# Bring the Screenshot and Compare classes together to create a skin
 		def skin(url)
 			@screenshot = Screenshot.new(
-				:dir => self.configuration.skins_dir
+				:dir => @configuration.skins_dir
 			)
 			@compare = GreenOnion::Compare.new
 
 			@screenshot.test_screenshot(url)
 		end
 
-		def skin_percentage(url)
-			self.skin(url)
+		# Finds the percentage of change between skins
+		# Threshold can be set in configuration, or as an argument itself, and can be specific to an instance
+		def skin_percentage(url, threshold=@configuration.threshold)
+			threshold ||= 100
+			skin(url)
 			if(@screenshot.paths_hash.length > 1)
-				self.compare.percentage_diff(@screenshot.paths_hash[:original], @screenshot.paths_hash[:fresh])
+				puts "\n" + url.color(:cyan)
+				@compare.percentage_diff(@screenshot.paths_hash[:original], @screenshot.paths_hash[:fresh])
+				threshold_alert(@compare.percentage_changed, threshold)
 			end
 		end
 
+		# Creates a diffed screenshot between skins
 		def skin_visual(url)
-			self.skin(url)
+			skin(url)
+			if(@screenshot.paths_hash.length > 1)
+				puts "\n" + url.color(:cyan)
+				@compare.visual_diff(@screenshot.paths_hash[:original], @screenshot.paths_hash[:fresh])
+			end
+		end
+
+		# Creates a diffed screenshot between skins AND prints percentage changed
+		def skin_visual_and_percentage(url, threshold=@configuration.threshold)
+			skin(url)
 			if(@screenshot.paths_hash.length > 1)
-				self.compare.visual_diff(@screenshot.paths_hash[:original], @screenshot.paths_hash[:fresh])
+				puts "\n" + url.color(:cyan)
+				@compare.percentage_diff(@screenshot.paths_hash[:original], @screenshot.paths_hash[:fresh])
+				@compare.visual_diff(@screenshot.paths_hash[:original], @screenshot.paths_hash[:fresh])
+				threshold_alert(@compare.percentage_changed, threshold)
+			end
+		end
+
+		# This is used in skin_percentage to better alert if a set of skins are ok or not
+		def threshold_alert(actual, threshold)
+			if actual > threshold
+				puts "#{actual - threshold}% above threshold set @ #{threshold}%".color(:red)
+				puts "pixels changed (%): 		#{@compare.percentage_changed}%"
+				puts "pixels changed/total:	#{@compare.changed_px}/#{@compare.total_px}"
+			else
+				puts "pixels changed/total:	#{@compare.changed_px}/#{@compare.total_px}"
 			end
 		end
 

data/spec/sample_app/sample_app.rb

@@ -0,0 +1,17 @@
+#!/usr/bin/env ruby
+require 'sinatra'
+
+class SampleApp < Sinatra::Base
+  set :root, File.dirname(__FILE__)
+  set :static, true
+  set :logging, false
+
+  get '/' do
+	  "<div style='height:200px; width:200px; background-color:rgb(#{rand(266)}, #{rand(266)}, #{rand(266)})'><!-- Big blue box --></div>"
+  end
+
+  get "/fake_uri" do
+    "<h2>foo</h2>"
+  end
+
+end

data/spec/unit/green_onion_spec.rb

@@ -6,10 +6,13 @@ describe GreenOnion do
 	  
 	  before(:each) do	
 			@tmp_path = './spec/tmp'
+			@url = 'http://localhost:8070'
+			@url_w_uri = @url + '/fake_uri'
 			FileUtils.mkdir(@tmp_path)
 
 	    GreenOnion.configure do |c|
 	    	c.skins_dir = @tmp_path
+	    	c.threshold = 1
 	    end
 	  end
 
@@ -23,7 +26,7 @@ describe GreenOnion do
 
 	  it "should get the correct paths_hash" do
 		  2.times do
-			  GreenOnion.skin('http://www.google.com')
+			  GreenOnion.skin(@url)
 			end
 		  ( (GreenOnion.screenshot.paths_hash[:original] == "#{@tmp_path}/root.png") && 
 		  	(GreenOnion.screenshot.paths_hash[:fresh] == "#{@tmp_path}/root_fresh.png") ).should be_true
@@ -31,18 +34,53 @@ describe GreenOnion do
 
 		it "should measure the percentage of diff between skins" do	      
 		  2.times do
-			  GreenOnion.skin_percentage('http://www.google.com')
+			  GreenOnion.skin_percentage(@url)
 			end
-		  GreenOnion.compare.percentage_changed.should be <(1)
+		  GreenOnion.compare.percentage_changed.should be > 0
+		end
+
+		it "should measure the percentage of diff between skins (even if there is no diff)" do	      
+		  2.times do
+			  GreenOnion.skin_percentage(@url_w_uri)
+			end
+		  GreenOnion.compare.percentage_changed.should be == 0
+		end
+
+		it "should alert when diff percentage threshold is surpassed" do
+			$stdout.should_receive(:puts).exactly(4).times
+		  2.times do
+			  GreenOnion.skin_percentage(@url)
+			end
+		end
+
+		it "should print just URL and changed/total when diff percentage threshold has not been surpassed" do
+			$stdout.should_receive(:puts).exactly(2).times
+		  2.times do
+			  GreenOnion.skin_percentage(@url, 6)
+			end
+		end
+
+		it "should create visual diff between skins" do      
+		  2.times do
+			  GreenOnion.skin_visual(@url)
+			end
+			GreenOnion.compare.diffed_image.should eq("#{@tmp_path}/root_diff.png")
 		end
 
-		it "should create visual diff between skins"
 
 		it "should create visual diff between skins (even when there is no change)" do	      
 		  2.times do
-			  GreenOnion.skin_visual('http://www.google.com')
+			  GreenOnion.skin_visual(@url_w_uri)
+			end
+			GreenOnion.compare.diffed_image.should eq("#{@tmp_path}/fake_uri_diff.png")
+		end
+
+		it "should measure the percentage of diff between skins AND create visual diff" do	      
+		  2.times do
+			  GreenOnion.skin_visual_and_percentage(@url)
 			end
-			GreenOnion.compare.diffed_image.should eq('./spec/tmp/root_diff.png')
+			( (GreenOnion.compare.diffed_image.should eq("#{@tmp_path}/root_diff.png")) &&
+		  	(GreenOnion.compare.percentage_changed.should be > 0) ).should be_true
 		end
 
 	end

data/spec/unit/screenshot_spec.rb

@@ -2,6 +2,11 @@ require 'spec_helper'
 
 describe GreenOnion::Screenshot do
 
+	before(:all) do
+		@url = 'http://localhost:8070'
+		@url_w_uri = @url + '/fake_uri'
+	end
+
   describe 'Snap single screenshot' do
 
 		before(:each) do
@@ -11,8 +16,7 @@ describe GreenOnion::Screenshot do
   		@screenshot = GreenOnion::Screenshot.new(
 				:dir => @tmp_path
   		)
-			@url = 'http://www.google.com/maps'
-			@file = "#{@tmp_path}/maps.png"
+			@file = "#{@tmp_path}/fake_uri.png"
   	end
 
 		after(:each) do
@@ -20,24 +24,24 @@ describe GreenOnion::Screenshot do
 		end
 
 	  it 'should build the path from the URI' do
-  		@screenshot.url_to_path(@url).should eq(@file)
+  		@screenshot.url_to_path(@url_w_uri).should eq(@file)
 	  end
 
 	  it 'should build the path from root' do
-  		@screenshot.url_to_path('http://www.google.com').should eq("#{@tmp_path}/root.png")
+  		@screenshot.url_to_path('http://localhost:8070').should eq("#{@tmp_path}/root.png")
 	  end
 
 	  it 'should build the path from root (even with trailing slash)' do
-  		@screenshot.url_to_path('http://www.google.com/').should eq("#{@tmp_path}/root.png")
+  		@screenshot.url_to_path('http://localhost:8070/').should eq("#{@tmp_path}/root.png")
 	  end
 
 	  it 'should snap and save screenshot' do
-  		@screenshot.snap_screenshot(@url, @file)
+  		@screenshot.snap_screenshot(@url_w_uri, @file)
   		File.exist?(@file).should be_true
 	  end
 
 		it "should destroy a singular screenshot" do
-		  @screenshot.destroy(@url)
+		  @screenshot.destroy(@url_w_uri)
   		File.exist?(@file).should be_false
 		end
 	end
@@ -51,11 +55,10 @@ describe GreenOnion::Screenshot do
 			@screenshot = GreenOnion::Screenshot.new(
 				:dir => @tmp_path
 			)
-			@url = 'http://www.google.com/maps'
-			@file1 = "#{@tmp_path}/maps.png"
-			@file2 = "#{@tmp_path}/maps_fresh.png"
+			@file1 = "#{@tmp_path}/fake_uri.png"
+			@file2 = "#{@tmp_path}/fake_uri_fresh.png"
 			2.times do
-				@screenshot.test_screenshot(@url)
+				@screenshot.test_screenshot(@url_w_uri)
 			end
 		end
 
@@ -74,7 +77,7 @@ describe GreenOnion::Screenshot do
 		end
 
 		it "should destroy a set of screenshots" do
-		  @screenshot.destroy(@url)
+		  @screenshot.destroy(@url_w_uri)
 		  ( File.exist?(@file1) && File.exist?(@file2) ).should be_false
 		end
 	end

metadata

@@ -2,7 +2,7 @@
 name: green_onion
 version: !ruby/object:Gem::Version 
   prerelease: 
-  version: 0.0.2
+  version: 0.0.3
 platform: ruby
 authors: 
 - Ted O'Meara
@@ -10,7 +10,7 @@ autorequire:
 bindir: bin
 cert_chain: []
 
-date: 2012-07-26 00:00:00 Z
+date: 2012-07-27 00:00:00 Z
 dependencies: 
 - !ruby/object:Gem::Dependency 
   name: rake
@@ -68,7 +68,7 @@ dependencies:
   type: :development
   version_requirements: *id005
 - !ruby/object:Gem::Dependency 
-  name: capybara
+  name: sinatra
   prerelease: false
   requirement: &id006 !ruby/object:Gem::Requirement 
     none: false
@@ -76,10 +76,10 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version 
         version: "0"
-  type: :runtime
+  type: :development
   version_requirements: *id006
 - !ruby/object:Gem::Dependency 
-  name: oily_png
+  name: capybara
   prerelease: false
   requirement: &id007 !ruby/object:Gem::Requirement 
     none: false
@@ -89,6 +89,28 @@ dependencies:
         version: "0"
   type: :runtime
   version_requirements: *id007
+- !ruby/object:Gem::Dependency 
+  name: oily_png
+  prerelease: false
+  requirement: &id008 !ruby/object:Gem::Requirement 
+    none: false
+    requirements: 
+    - - ">="
+      - !ruby/object:Gem::Version 
+        version: "0"
+  type: :runtime
+  version_requirements: *id008
+- !ruby/object:Gem::Dependency 
+  name: rainbow
+  prerelease: false
+  requirement: &id009 !ruby/object:Gem::Requirement 
+    none: false
+    requirements: 
+    - - ">="
+      - !ruby/object:Gem::Version 
+        version: "0"
+  type: :runtime
+  version_requirements: *id009
 description: UI testing/screenshot diffing tool
 email: 
 - ted@intridea.com
@@ -113,6 +135,7 @@ files:
 - lib/green_onion/configuration.rb
 - lib/green_onion/screenshot.rb
 - lib/green_onion/version.rb
+- spec/sample_app/sample_app.rb
 - spec/skins/spec_shot.png
 - spec/skins/spec_shot_fresh.png
 - spec/spec_helper.rb
@@ -147,6 +170,7 @@ signing_key:
 specification_version: 3
 summary: Regressions in the view making you cry? Have more confidence with GreenOnion.
 test_files: 
+- spec/sample_app/sample_app.rb
 - spec/skins/spec_shot.png
 - spec/skins/spec_shot_fresh.png
 - spec/spec_helper.rb