kontrast 0.2.1 → 0.6.0

data/lib/kontrast/gallery_creator.rb

@@ -12,7 +12,7 @@ module Kontrast
         def create_gallery(output_dir)
             begin
                 @gallery_dir = FileUtils.mkdir_p("#{output_dir}/gallery").join('')
-            rescue Exception => e
+            rescue StandardError => e
                 raise GalleryException.new("An unexpected error occurred while trying to create the gallery's output directory: #{e.inspect}")
             end
 
@@ -46,7 +46,7 @@ module Kontrast
 
         def generate_html(files, diffs)
             # Template variables
-            directories = parse_directories(files, diffs)
+            groups, without_diffs, with_diffs = parse_directories(files, diffs)
 
             # HTML
             template = File.read(Kontrast.root + '/lib/kontrast/gallery/template.erb')
@@ -83,66 +83,124 @@ module Kontrast
             }
         end
 
+        def test_name_from_dir(dir)
+            # dir is a string prefixed with a group name:
+            # '1280_home' or '2x_home_screen'
+            return dir.split('_')[1..-1].join('_')
+        end
+
+        def base_path
+            # This determines where to display images from in the gallery
+            if Kontrast.configuration.run_parallel
+                # Build the remote path to S3
+                return "https://#{Kontrast.configuration.aws_bucket}.s3.amazonaws.com/#{Kontrast.configuration.remote_path}"
+            else
+                return ".."
+            end
+        end
+
+        def variants_for_page(directory, diffs)
+            # Return a hash that will be used in the erb template to show the
+            # diffs for a given test.
+            variants = []
+            ['test', 'production', 'diff'].each do |type|
+                variant = {
+                    image: "#{base_path}/#{directory}/" + type + ".png",
+                    thumb: "#{base_path}/#{directory}/" + type + "_thumb.png",
+                    domain: type,
+                    type: 'page',
+                }
+                if type == 'diff' && diffs[directory]
+                    variant[:diff_amt] = diffs[directory]["diff"]
+                end
+                variants << variant
+            end
+
+            return variants
+        end
+
+        def variants_for_api_endpoint(directory, diffs, files)
+            # Return a hash that will be used in the erb template to show the
+            # diffs for a given test.
+            variants = []
+            ['test', 'production', 'diff'].each do |type|
+                variant = {
+                    file: "#{base_path}/#{directory}/#{type}.json",
+                    domain: type,
+                    type: 'api_endpoint',
+                    diff_amt: 0,
+                }
+                if diffs[directory]
+                    variant[:diff_amt] = 1
+                end
+
+                # Get all images
+                image_files = files.select { |file_name|
+                    file_name.match /#{directory}\/#{type}_\d+.(jpg|png)/
+                }.map { |file_name|
+                    name_without_extension = file_name.split('.')[0..-2].join('.')
+                    {
+                        image: "#{base_path}/#{file_name}",
+                        thumb: "#{base_path}/#{name_without_extension}_thumb.png",
+                    }
+                }
+                variant[:images] = image_files
+                variants << variant
+            end
+
+            return variants
+        end
+
         # This function just turns the list of files and diffs into a hash that the gallery
         # creator can insert into a template. See an example of the created hash below.
         def parse_directories(files, diffs)
             files.sort!
 
-            dirs = {}
-            directories = files.map { |f| f.split('/').first }.uniq
+            # Initialize those hashes, where each key will map to hash, in wich
+            # each key maps to an array:
+            # {
+            #   key1: {
+            #   },
+            #   key2: {
+            #   },
+            # }
+            #
+            without_diffs = Hash.new { |h,k| h[k] = {} }
+            with_diffs = Hash.new { |h,k| h[k] = {} }
 
-            # Get all sizes
-            sizes = directories.map { |d| d.split('_').first }
-            sizes.each { |size|
-                dirs[size] = {}
-
-                # Get all directories for this size
-                tests_for_size = directories.select { |d| d.index(size + "_") == 0 }
-                tests_for_size.each do |dir|
-                    array = dir.split('_')
-                    array.delete_at(0)
-                    test_name = array.join('_')
-                    dirs[size][test_name] = {
-                        variants: []
-                    }
-                end
-            }
+            directories = files.map { |f| f.split('/').first }.uniq
+            groups = directories.map { |dir| dir.split('_').first }.uniq
 
-            # This determines where to display images from in the gallery
-            if Kontrast.configuration.run_parallel
-                # Build the remote path to S3
-                base_path = "https://#{Kontrast.configuration.aws_bucket}.s3.amazonaws.com/#{Kontrast.configuration.remote_path}"
-            else
-                base_path = ".."
-            end
 
             # Fill in the files as variants
             directories.each do |directory|
-                array = directory.split('_')
-                size = array.first
-                array.delete_at(0)
-                test_name = array.join('_')
-
-                # Add variations
-                ['test', 'production', 'diff'].each_with_index do |type, i|
-                    dirs[size][test_name][:variants] << {
-                        image: "#{base_path}/#{size}_#{test_name}/" + type + ".png",
-                        thumb: "#{base_path}/#{size}_#{test_name}/" + type + "_thumb.png",
-                        domain: type
-                    }
-                    if type == 'diff'
-                        dirs[size][test_name][:variants][i][:diff_amt] = (diffs["#{size}_#{test_name}"]) ? diffs["#{size}_#{test_name}"]["diff"] : 0
-                    end
+                group = directory.split('_')[0]
+                test_name = test_name_from_dir(directory)
+
+                # Determines the type of test by the presence of the diff.png
+                # file in the folder.
+                # Ideally the manifest file format would be different and
+                # include the test type with
+                if files.select { |file_name| file_name.start_with?(directory) }.any? { |file_name| file_name.include?('diff.png') }
+                    variants = variants_for_page(directory, diffs)
+                else
+                    variants = variants_for_api_endpoint(directory, diffs, files)
+                end
+
+                if diffs[directory]
+                    with_diffs[group][test_name] = variants
+                else
+                    without_diffs[group][test_name] = variants
                 end
             end
 
-            return dirs
+            return groups, without_diffs, with_diffs
 
             # For reference
             # gallery_format = {
             #     "1080" => {
-            #         "name" => {
-            #             variants: [{
+            #         "name" => [
+            #             {
             #                 image: "full_img_src",
             #                 thumb: "thumb_src",
             #                 domain: "production"
@@ -154,8 +212,8 @@ module Kontrast
             #                 image: "diff_src",
             #                 thumb: "diff_thumb_src",
             #                 domain: "diff",
-            #                 size: 0.1
-            #             }]
+            #                 diff_amt: 0.1
+            #             }
             #         }
             #     }
             # }

data/lib/kontrast/global_runner.rb

@@ -0,0 +1,121 @@
+require "yaml"
+require "net/http"
+
+module Kontrast
+    class GlobalRunner
+
+        def initialize
+            @page_runner = PageRunner.new
+            @api_endpont_runner = ApiEndpointRunner.new
+            @path = Kontrast.path
+            @current_node = 0
+        end
+
+        def run
+            # Make sure the local server is running
+            wait_for_server
+
+            # Assign nodes
+            if Kontrast.configuration.run_parallel
+                total_nodes = Kontrast.configuration.total_nodes
+                @current_node = Kontrast.configuration.current_node
+            else
+                # Override the config for local use
+                total_nodes = 1
+            end
+
+            # Run both runners
+            @page_runner.run(total_nodes, @current_node)
+            @api_endpont_runner.run(total_nodes, @current_node)
+
+            # Create manifest
+            create_manifest
+        end
+
+        # The manifest is a per-node .json file that is used to create the gallery
+        # without having to download all assets from S3 to the test environment
+        def create_manifest
+            # Create manifest
+            puts "Creating manifest..."
+            if Kontrast.configuration.run_parallel
+                build = Kontrast.configuration.remote_path
+            else
+                build = nil
+            end
+
+            diffs = {}
+            diffs.merge!(@page_runner.diffs)
+            diffs.merge!(@api_endpont_runner.diffs)
+
+            # Set up structure
+            manifest = {
+                diffs: diffs,
+                files: []
+            }
+
+            # Dump directories
+            Dir.foreach(@path) do |subdir|
+                next if ['.', '..'].include?(subdir)
+                next if subdir.index('manifest_')
+                Dir.foreach("#{@path}/#{subdir}") do |img|
+                    next if ['.', '..'].include?(img)
+                    manifest[:files] << "#{subdir}/#{img}"
+                end
+            end
+
+            if Kontrast.configuration.run_parallel
+                # Upload manifest
+                Kontrast.fog.directories.get(Kontrast.configuration.aws_bucket).files.create(
+                    key: "#{build}/manifest_#{@current_node}.json",
+                    body: manifest.to_json
+                )
+            else
+                # Write manifest
+                File.open("#{@path}/manifest_#{@current_node}.json", 'w') do |outf|
+                    outf.write(manifest.to_json)
+                end
+            end
+
+            return manifest
+        end
+
+        private
+            def wait_for_server
+                # Test server
+                tries = 30
+                uri = URI(Kontrast.configuration.test_domain)
+                begin
+                    Net::HTTP.get(uri)
+                rescue Errno::ECONNREFUSED => e
+                    tries -= 1
+                    if tries > 0
+                        puts "Waiting for test server..."
+                        sleep 2
+                        retry
+                    else
+                        raise RunnerException.new("Could not reach the test server at '#{uri}'.")
+                    end
+                rescue StandardError => e
+                    raise RunnerException.new("An unexpected error occured while trying to reach the test server at '#{uri}': #{e.inspect}")
+                end
+
+                # Production server
+                tries = 30
+                uri = URI(Kontrast.configuration.production_domain)
+                begin
+                    Net::HTTP.get(uri)
+                rescue Errno::ECONNREFUSED => e
+                    tries -= 1
+                    if tries > 0
+                        puts "Waiting for production server..."
+                        sleep 2
+                        retry
+                    else
+                        raise RunnerException.new("Could not reach the production server at '#{uri}'.")
+                    end
+                rescue StandardError => e
+                    raise RunnerException.new("An unexpected error occured while trying to reach the production server at '#{uri}': #{e.inspect}")
+                end
+            end
+    end
+end

data/lib/kontrast/image_helper.rb

@@ -0,0 +1,63 @@
+require "RMagick"
+require "workers"
+
+module Kontrast
+
+    class ImageHelper
+        def initialize(img1_path, img2_path)
+            @img1_path, @img2_path = img1_path, img2_path
+            @img1 = load_image(@img1_path)
+            @img2 = load_image(@img2_path)
+            @path = Kontrast.path
+        end
+
+        def reload_images
+            @img1 = load_image(@img1_path)
+            @img2 = load_image(@img2_path)
+        end
+
+        def load_image(path)
+            return Magick::Image.read(path).first
+        end
+
+        def crop(width)
+            # Let's not do anything if the images are already the same size
+            return if @img1.rows == @img2.rows
+
+            # Get max height of both images
+            max_height = [@img1.rows, @img2.rows].max
+
+            # Crop
+            Workers.map([@img1, @img2]) do |image|
+                image.extent(width, max_height).write(image.filename)
+            end
+            reload_images
+        end
+
+        # Uses the compare_channel function to highlight the differences between
+        # two images Docs:
+        # http://www.rubydoc.info/github/gemhome/rmagick/Magick%2FImage%3Acompare_channel
+        def compare(output_dir, output_file_name)
+            begin
+                distortion_metric = Magick.const_get(Kontrast.configuration.distortion_metric)
+                diff = @img1.compare_channel(@img2, distortion_metric) do |options|
+                    options.highlight_color = Kontrast.configuration.highlight_color
+                    options.lowlight_color = Kontrast.configuration.lowlight_color
+                end
+
+                output_path = "#{Kontrast.path}/#{output_dir}"
+                FileUtils.mkdir_p(output_path) # Just in case
+                diff.first.write(File.join(output_path, output_file_name))
+
+                # diff is an array, the last (second) value is the diff value,
+                # a float between 0 and 1, 0 being the same image, 1 being an
+                # entirely different image
+                return diff.last
+            rescue Magick::ImageMagickError => e
+                puts "Error comparing images: #{e.message}"
+                # 1 means that both images are different
+                return 1
+            end
+        end
+    end
+end

data/lib/kontrast/image_uploader.rb

@@ -0,0 +1,18 @@
+module Kontrast
+    module ImageUploader
+        def upload_images(test)
+            worker_pool = Workers::Pool.new
+            worker_pool.resize(Kontrast.configuration.workers_pool_size)
+
+            Workers.map(Dir.entries("#{Kontrast.path}/#{test}"), pool: worker_pool) do |file|
+                next if ['.', '..'].include?(file)
+                Kontrast.fog.directories.get(Kontrast.configuration.aws_bucket).files.create(
+                    key: "#{Kontrast.configuration.remote_path}/#{test}/#{file}",
+                    body: File.open("#{Kontrast.path}/#{test}/#{file}"),
+                    public: true
+                )
+            end
+        end
+
+    end
+end

data/lib/kontrast/page_comparator.rb

@@ -0,0 +1,46 @@
+
+module Kontrast
+    class PageComparator
+        include Magick
+        attr_reader :diffs, :path
+
+        def initialize
+            @path = Kontrast.path
+
+            # This is where failed diffs will be stored
+            @diffs = {}
+        end
+
+        def test_image_path(test)
+            return "#{@path}/#{test}/test.png"
+        end
+
+        def production_image_path(test)
+            return "#{@path}/#{test}/production.png"
+        end
+
+        def diff(test)
+
+            image_helper = Kontrast::ImageHelper.new(
+                test_image_path(test),
+                production_image_path(test),
+            )
+
+            # In order for images to be diff'ed, they need to have the same dimensions
+            print "Cropping... "
+            image_helper.crop(test.width)
+
+            diff = image_helper.compare(test.to_s, "diff.png")
+
+            # If the images are different, let the class know about it so that it gets added to the manifest
+            if diff > 0
+                @diffs["#{test}"] = {
+                    type: 'page',
+                    width: test.width,
+                    name: test.name,
+                    diff: diff,
+                }
+            end
+        end
+    end
+end

data/lib/kontrast/page_runner.rb

@@ -0,0 +1,95 @@
+module Kontrast
+    class PageRunner
+        include ImageUploader
+        include ThumbnailCreator
+
+        attr_reader :diffs
+
+        def initialize
+            @diffs = {}
+            @selenium_handler = nil
+            @page_comparator = nil
+        end
+
+        def run(total_nodes, current_node)
+            # Nothing to run
+            return if Kontrast.page_test_suite.nil?
+
+            # Load & bind specs
+            Kontrast.page_test_suite.bind_specs
+
+            # Assign tests and run them
+            suite = split_run(total_nodes, current_node)
+            parallel_run(suite, current_node)
+        end
+
+        # Given the total number of nodes and the index of the current node,
+        # we determine which tests the current node will run
+        def split_run(total_nodes, current_node)
+            test_suite = Kontrast.page_test_suite
+            tests_to_run = []
+
+            index = 0
+            test_suite.tests.each do |test|
+                if index % total_nodes == current_node
+                    tests_to_run << test
+                end
+                index += 1
+            end
+
+            return tests_to_run
+        end
+
+        # Runs tests, handles all image operations, creates manifest for current node
+        def parallel_run(suite, current_node)
+            # Load test handlers
+            @selenium_handler = SeleniumHandler.new
+            @page_comparator = PageComparator.new
+
+            # Run per-page tasks
+            suite.each do |test|
+                begin
+                    print "Processing #{test.name} @ #{test.width}... "
+
+                    # Run the browser and take screenshots
+                    @selenium_handler.run_comparison(test)
+
+                    # Compare images
+                    print "Diffing... "
+                    @page_comparator.diff(test)
+
+                    # Create thumbnails for gallery
+                    print "Creating thumbnails... "
+                    create_thumbnails(test, ['test.png', 'production.png', 'diff.png'])
+
+                    # Upload to S3
+                    if Kontrast.configuration.run_parallel
+                        print "Uploading... "
+                        upload_images(test)
+                    end
+
+                    puts "\n", ("=" * 85)
+                rescue Net::ReadTimeout => e
+                    puts "Test timed out. Message: #{e.inspect}"
+                    if Kontrast.configuration.fail_build
+                        raise e
+                    end
+                rescue StandardError => e
+                    puts "Exception: #{e.inspect}"
+                    puts e.backtrace.inspect
+                    if Kontrast.configuration.fail_build
+                        raise e
+                    end
+                end
+            end
+        ensure
+            # Log diffs
+            puts @page_comparator.diffs
+
+            # We need the diff at the runner level to create the manifest
+            @diffs = @page_comparator.diffs
+
+            @selenium_handler.cleanup
+        end
+    end
+end