Tests using RSpec

.gitignore

@@ -34,5 +34,6 @@ dist
 
 # Directories with test images
 tests/sass
+tests/less
 tests/reference
 tests/failures

.rspec

@@ -0,0 +1,3 @@
+--color
+--require spec_helper
+--format progress

.travis.yml

@@ -1,7 +1,14 @@
 language: ruby
 rvm:
   - 2.0.0
-before_install:
-  - "npm install"
+before_script:
+  - bundle exec rake compile
+  - bundle exec rake serve > /dev/null 2>&1 &
+  - export PID=$!
+  - sleep 3
 script:
-  - bundle exec grunt test
+  - bundle exec rake spec
+after_failure:
+  - bundle exec rake upload
+after_script:
+  - kill -2 $PID

Gemfile

@@ -10,4 +10,8 @@ end
 group :test do
   gem 'rake'
   gem 'webrick'
+  gem 'rspec'
+  gem 'nokogiri'
+  gem 'rmagick'
+  gem 'imgur-api'
 end

Gemfile.lock

@@ -3,19 +3,48 @@ GEM
   specs:
     bootstrap-sass (3.1.1.0)
       sass (~> 3.2)
+    diff-lcs (1.2.5)
+    httparty (0.13.3)
+      json (~> 1.8)
+      multi_xml (>= 0.5.2)
+    imgur-api (0.0.4)
+      httparty
+    json (1.8.2)
+    mini_portile (0.6.2)
+    multi_xml (0.5.5)
+    nokogiri (1.6.6.2)
+      mini_portile (~> 0.6.0)
     rake (10.4.2)
-    sass (3.4.3)
+    rmagick (2.15.0)
+    rspec (3.2.0)
+      rspec-core (~> 3.2.0)
+      rspec-expectations (~> 3.2.0)
+      rspec-mocks (~> 3.2.0)
+    rspec-core (3.2.3)
+      rspec-support (~> 3.2.0)
+    rspec-expectations (3.2.1)
+      diff-lcs (>= 1.2.0, < 2.0)
+      rspec-support (~> 3.2.0)
+    rspec-mocks (3.2.1)
+      diff-lcs (>= 1.2.0, < 2.0)
+      rspec-support (~> 3.2.0)
+    rspec-support (3.2.2)
+    sass (3.4.13)
     term-ansicolor (1.3.0)
       tins (~> 1.0)
-    tins (1.3.2)
+    tins (1.5.1)
     webrick (1.3.1)
 
 PLATFORMS
   ruby
 
 DEPENDENCIES
   bootstrap-sass (= 3.1.1)
+  imgur-api
+  nokogiri
   rake
+  rmagick
+  rspec
   sass (~> 3.2)
   term-ansicolor
   webrick

Rakefile

@@ -1,26 +1,31 @@
+require 'rake'
+require 'rspec/core/rake_task'
+
 desc "Convert LESS to SCSS"
-task :convert, [:branch] do |t, args|
+task :convert, [:branch] do |_, args|
   require './tasks/converter'
   branch = args.has_key?(:branch) ? args[:branch] : 'master'
   Patternfly::Converter.new(:branch => branch).process_patternfly
 end
 
+desc "Compile patternfly-sass into CSS"
 task :compile do
   require 'sass'
+  require 'fileutils'
   require 'term/ansicolor'
 
   Sass::Script::Number.precision = 8
 
   path = 'sass'
   css_path = 'dist/css'
-  Dir.mkdir(css_path) unless File.directory?(css_path)
+  FileUtils.mkdir_p(css_path)
 
   puts Term::ANSIColor.bold "Compiling SCSS in #{path}"
 
   %w(patternfly.css patternfly.min.css).each do |save_path|
     style = (save_path == "patternfly.min.css") ? :compressed : :nested
     save_path = "dist/css/#{save_path}"
-    engine = Sass::Engine.for_file("#{path}/patternfly.scss", syntax: :scss, load_paths: [path], style: style)
+    engine = Sass::Engine.for_file("#{path}/patternfly.scss", :syntax => :scss, :load_paths => [path], :style => style)
     css = engine.render
     File.open(save_path, 'w') { |f| f.write css }
     puts Term::ANSIColor.cyan("  #{save_path}") + '...'
@@ -46,4 +51,59 @@ task :serve do
   server.start
 end
 
-task default: :convert
+desc "Clean up the test results"
+task :cleanup do
+  require 'fileutils'
+  FileUtils.rm_rf 'tests/less'
+  FileUtils.rm_rf 'tests/sass'
+  FileUtils.rm_rf 'tests/failures'
+end
+
+desc "Run the tests with a web server"
+task :test do
+  pid = Process.fork do
+    puts "Starting web server on port 9000"
+    $stdout.reopen('/dev/null', 'w')
+    $stderr.reopen('/dev/null', 'w')
+    Rake::Task[:serve].invoke
+    puts "Stopping web server on port 9000"
+  end
+  sleep(3) # Give some time for the web server to start
+  puts "Starting the tests against the web server"
+  Rake::Task[:spec].invoke
+  Process.kill('INT', pid)
+end
+
+desc "Run the tests without a web server"
+RSpec::Core::RakeTask.new(:spec) do |t|
+  Rake::Task[:cleanup].invoke
+  FileUtils.mkdir_p 'tests/less'
+  FileUtils.mkdir_p 'tests/sass'
+  FileUtils.mkdir_p 'tests/failures'
+  t.pattern = Dir.glob('spec/**/*_spec.rb')
+end
+
+task :upload do
+  require 'imgur'
+  require 'term/ansicolor'
+
+  # Travis only task, exit when the IMGUR_ID is not present
+  exit(0) if ENV['IMGUR_ID'].nil?
+
+  print Term::ANSIColor.bold "Uploading failure diffs to imgur "
+
+  client = Imgur.new ENV['IMGUR_ID']
+  images = Dir["tests/failures/*.png"].map do |img|
+    print Term::ANSIColor.cyan '.'
+    client.upload Imgur::LocalImage.new(img, :title => img.sub('.png', '.html').sub('tests/failures/', ''))
+  end
+
+  if images.empty?
+    puts Term::ANSIColor.cyan ' nothing to upload'
+  else
+    album = client.new_album(images, :title => "patternfly-sass CI results for build ##{ENV['TRAVIS_BUILD_NUMBER']}")
+    puts Term::ANSIColor.bold " available at: #{Term::ANSIColor.cyan album.link}"
+  end
+end
+
+task :default => :convert

spec/compare_spec.rb

@@ -0,0 +1,41 @@
+require 'net/http'
+require 'nokogiri'
+require 'rmagick'
+
+RSpec.describe "compare SASS with LESS screenshots" do
+  BASEURL = "http://localhost:9000"
+  RESOLUTIONS = [[320, 480], [768, 1024], [1280, 1024]]
+  CONTEXTS = %w(less sass)
+  TOLERANCE = 0.05
+
+  html = Net::HTTP.get(URI("#{BASEURL}/less/patternfly/index.html"))
+  document = Nokogiri::HTML(html)
+
+  document.css(".row a").each do |link|
+    file = link['href']
+    context "#{file}" do
+      title = file.sub('.html', '')
+      RESOLUTIONS.each do |w,h|
+        it "#{w}x#{h}" do
+          CONTEXTS.each do |ctx|
+            `phantomjs tests/capture.js #{w} #{h} #{BASEURL}/#{ctx}/patternfly/#{file} tests/#{ctx}/#{title}-#{w}x#{h}.png`
+          end
+          img_less = Magick::Image.read("tests/less/#{title}-#{w}x#{h}.png").first
+          img_sass = Magick::Image.read("tests/sass/#{title}-#{w}x#{h}.png").first
+
+          cols = [img_less.base_columns, img_sass.base_columns].max
+          rows = [img_less.base_rows, img_sass.base_rows].max
+          img_base = Magick::Image.new(cols, rows) { self.background_color = 'black' }
+
+          img_less = img_base.composite(img_less, 0, 0, Magick::OverCompositeOp)
+          img_sass = img_base.composite(img_sass, 0, 0, Magick::OverCompositeOp)
+
+          img_diff, diff_rate = img_less.compare_channel img_sass, Magick::MeanAbsoluteErrorMetric, Magick::AllChannels
+
+          img_diff.write("tests/failures/#{title}-#{w}x#{h}.png") unless diff_rate <= TOLERANCE
+          expect(diff_rate).to be <= TOLERANCE
+        end
+      end
+    end
+  end
+end

spec/spec_helper.rb

@@ -0,0 +1,9 @@
+RSpec.configure do |config|
+  config.expect_with :rspec do |expectations|
+    expectations.include_chain_clauses_in_custom_matcher_descriptions = true
+  end
+
+  config.mock_with :rspec do |mocks|
+    mocks.verify_partial_doubles = true
+  end
+end

tests/capture.js

@@ -0,0 +1,32 @@
+/*
+ * Usage: phantomjs capture.js [width] [height] [url] [output]
+ */
+
+var system = require('system');
+var args = system.args;
+
+if (args.length === 5) {
+  var width = args[1];
+  var height = args[2];
+  var url = args[3];
+  var output = args[4];
+  var page = require('webpage').create();
+  page.viewportSize = { width: width, height: height };
+  page.open(url, function() {
+    page.evaluate(function() {
+      var style = document.createElement('style');
+      style.innerHTML = [
+        '* {',
+        'animation: none !important;',
+        'transition: none !important;',
+        '-webkit-animation: none !important;',
+        '-webkit-transition: none !important;',
+        '}'].join('\n');
+      document.body.appendChild(style);
+    });
+    page.render(output);
+    phantom.exit();
+  });
+} else {
+  console.log("Invalid argument!");
+}