add new tests

.learn

@@ -12,4 +12,6 @@ languages:
   - css
 type:
   - lab
+tests:
+ - green_onion
 level: 2

README.md

@@ -1,10 +1,15 @@
-
-
 # ZHW Shoes Layout
 
 You've been hired as a developer to write the code for a shoes website. The company has provided a spec for what the site should look like in `MOCKUP.jpg`. You'll want to open up `index.html` in the browser to check the changes you're making.
 
 Write the necessary CSS in the `css/layout.css` file to create classes for the different possible columns to make up a three column grid. One column should take up one-third, another two-thirds, and another all three-thirds. Make use of clearfix and clear to avoid issues.
 
+## Steps
+
+1. Fork this repository
+2. Clone Your fork
+3. cd into the folder for your cloned copy of this lab.
+4. Write necessary CSS in layout.css file to create column structure to match the MOCKUP.jpg file.
+5. Please <a href="https://www.mozilla.org/en-US/firefox/new/" target="_blank">install Firefox</a> if you haven't already as it is required for the screenshot tests to run.
+6. When your done, type `learn` command from Terminal to run local tests.
 
-<p data-visibility='hidden'>View <a href='https://learn.co/lessons/hs-zhw-shoes-layout' title='ZHW Shoes Layout'>ZHW Shoes Layout</a> on Learn.co and start learning to code for free.</p>

spec/main_spec.rb

@@ -0,0 +1,21 @@
+require 'webrick'
+require 'green_onion'
+require 'capybara/rspec'
+require 'rspec'
+require 'spec_helper'
+
+describe 'index.html' do
+
+  before(:each) do
+    @comparison = GreenOnion::Compare.new
+    @tolerance = 0.5
+  end
+
+  it 'index page should match the solution' do
+    solution = './spec/skins/index.html.png'
+    student = './spec/skins/index.html_fresh.png'
+    @comparison.percentage_diff(solution, student)
+    expect(@comparison.percentage_changed).to be < @tolerance
+  end
+
+end

spec/spec_helper.rb

@@ -0,0 +1,44 @@
+GreenOnion.configure do |c|
+  c.skins_dir = './spec/skins'
+  c.driver = :selenium
+  c.dimensions = {
+    :width => 1024,
+    :height => 768
+  }
+end
+
+Capybara.configure do |config|
+  config.run_server = false
+  config.default_driver = :selenium
+  config.app_host = 'http://localhost:8000'
+end
+
+def create_screenshots
+  GreenOnion.skin_visual('http://localhost:8000/index.html')
+end
+
+def start_server_thread
+  @server_thread = Thread.new do
+    root = Dir.pwd
+    server = WEBrick::HTTPServer.new :Port => 8000, :DocumentRoot => root
+    trap 'INT' do server.shutdown end
+    server.start
+  end
+  sleep 2
+end
+
+def exit_server_thread
+  @server_thread.exit
+end
+
+RSpec.configure do |config|
+  config.before(:all) do
+    start_server_thread
+    Capybara.current_session.driver.browser.manage.window.resize_to(1024, 768)
+    create_screenshots
+  end
+
+  config.after(:all) do
+    exit_server_thread
+  end
+end