Merge pull request #2 from Cruikshanks/feature/javascript-error-example

Add example of testing for and handling js errors

Gemfile.lock

@@ -1,16 +1,3 @@
-PATH
-  remote: /Users/acruikshanks/projects/ea/quke
-  specs:
-    quke (0.3.0)
-      capybara (~> 2.9)
-      chromedriver-helper (~> 1.0)
-      cucumber (~> 2.4)
-      launchy (~> 2.4)
-      poltergeist (~> 1.10)
-      rspec-expectations (~> 3.4)
-      selenium-webdriver (~> 2.53)
-      site_prism (~> 2.9)
-
 GEM
   remote: https://rubygems.org/
   specs:
@@ -19,7 +6,7 @@ GEM
     archive-zip (0.7.0)
       io-like (~> 0.3.0)
     builder (3.2.3)
-    capybara (2.14.0)
+    capybara (2.14.2)
       addressable
       mime-types (>= 1.16)
       nokogiri (>= 1.3.3)
@@ -56,17 +43,26 @@ GEM
     mime-types (3.1)
       mime-types-data (~> 3.2015)
     mime-types-data (3.2016.0521)
-    mini_portile2 (2.1.0)
+    mini_portile2 (2.2.0)
     multi_json (1.12.1)
     multi_test (0.1.2)
     mustermann (1.0.0)
-    nokogiri (1.7.2)
-      mini_portile2 (~> 2.1.0)
+    nokogiri (1.8.0)
+      mini_portile2 (~> 2.2.0)
     poltergeist (1.15.0)
       capybara (~> 2.1)
       cliver (~> 0.3.1)
       websocket-driver (>= 0.2.0)
     public_suffix (2.0.5)
+    quke (0.3.2)
+      capybara (~> 2.9)
+      chromedriver-helper (~> 1.0)
+      cucumber (~> 2.4)
+      launchy (~> 2.4)
+      poltergeist (~> 1.10)
+      rspec-expectations (~> 3.4)
+      selenium-webdriver (~> 2.53)
+      site_prism (~> 2.9)
     rack (2.0.3)
     rack-protection (2.0.0)
       rack
@@ -108,7 +104,7 @@ PLATFORMS
   ruby
 
 DEPENDENCIES
-  quke!
+  quke
   rake
   rerun
   sinatra

demo_app/app.rb

@@ -78,3 +78,9 @@
   @results = request.env
   erb :request_details
 end
+
+get '/jserror' do
+  @title = 'JavaScript error'
+  @results = "Open your browser's dev tools, specifically the JavaScript console. You should see an error!"
+  erb :javascript_error
+end

demo_app/views/index.erb

@@ -10,6 +10,8 @@
         <li><a href="/search">Search</a></li>
         <li><a href="/radiobutton">Radio button</a></li>
         <li><a href="/cssselector">CSS selector</a></li>
+        <li><a href="/request">Request details</a></li>
+        <li><a href="/jserror">JavaScript error</a></li>
       </ul>
 
       <%= erb '_partial_example'.to_sym %>

demo_app/views/javascript_error.erb

@@ -0,0 +1,19 @@
+    <!-- Main jumbotron for a primary marketing message or call to action -->
+    <div class="jumbotron">
+      <h1><%= @title %></h1>
+      <p class="lead">This page can be used for checking what happens when you test a page with a JavaScript error.</p>
+      <p class="lead">There are examples of how to test against the data in this page, but essentially they are just
+        using <strong>Capybara's</strong> <code>find()</code> method.</p>
+      <ul>
+        <li><code>features/quke/javascript_error.feature</code></li>
+        <li><code>features/step_definitions/quke/javascript_error_steps.rb</code></li>
+        <li><code>quke_demo_app/views/javascript_error.erb</code></li>
+      </ul>
+    </div>
+    <script>
+      throw ({'error':'boom'});
+    </script>
+    <div id="result">
+      <h2>Results</h2>
+      <p><%= @results %></p>
+    </div>

features/javascript_error.feature

@@ -0,0 +1,15 @@
+Feature: JavaScript error
+  To demonstrate how you can use Quke
+  As a user of Quke
+  I want to see how JavaScript errors are handled
+  And how I can choose to ignore them
+
+  Scenario: Testing driver response to a JavaScript error (page objects)
+    Given I am on the home page
+     When I go to the JavaScript error page
+     Then It should show we have an error
+
+  Scenario: Testing driver response to a JavaScript error (capybara)
+    Given I'm at the home page
+     When I navigate to the JavaScript error page
+     Then I should see we have an error

features/page_objects/app.rb

@@ -24,4 +24,8 @@ def css_selectors_page
   def request_details_page
     @last_page = RequestDetailsPage.new
   end
+
+  def javascript_error_page
+    @last_page = JavascriptErrorPage.new
+  end
 end

features/page_objects/home_page.rb

@@ -1,4 +1,6 @@
 # Home page
 class HomePage < SitePrism::Page
   set_url '/'
+
+  element :title, 'h1'
 end

features/page_objects/javascript_error_page.rb

@@ -0,0 +1,8 @@
+# JavaScript error page
+class JavascriptErrorPage < SitePrism::Page
+  set_url '/jserror'
+
+  element :title, 'h1'
+
+  elements :results, "div[class='result']"
+end

features/request_details.feature

@@ -3,13 +3,11 @@ Feature: Request details
   As a user of Quke
   I want to see that the request received matches what I configured in Quke
 
-  @wip
   Scenario: Checking for custom user agent (page objects)
     Given I am on the request details page
      Then It should show we made a "GET" request
       And the user agent was "Mozilla/5.0 (MSIE 10.0; Windows NT 6.1; Trident/5.0)"
 
-  @wip
   Scenario: Checking for custom user agent (capybara)
     Given I'm at the request details page
      Then I should see we made a "GET" request

features/step_definitions/javascript_error_steps.rb

@@ -0,0 +1,34 @@
+# The following steps use the page objects to drive the browser
+Given(/^I am on the home page$/) do
+  @app = App.new
+  @app.home_page.load
+  expect(@app.home_page.title.text).to eq('Welcome to Quke')
+end
+
+When(/^I go to the JavaScript error page$/) do
+  expect { @app.javascript_error_page.load }.to raise_error(Capybara::Poltergeist::JavascriptError)
+end
+
+Then(/^It should show we have an error$/) do
+  # We have to capture the error in the previous step else the exception will
+  # block us from continuing. However the scenario reads better if we can break
+  # it down.
+  true
+end
+
+# The following steps use capybara directly to drive the browser
+Given(/^I'm at the home page$/) do
+  visit '/'
+  expect(page).to have_content('Welcome to Quke')
+end
+
+When(/^I navigate to the JavaScript error page$/) do
+  expect { visit('/jserror') }.to raise_error(Capybara::Poltergeist::JavascriptError)
+end
+
+Then(/^I should see we have an error$/) do
+  # We have to capture the error in the previous step else the exception will
+  # block us from continuing. However the scenario reads better if we can break
+  # it down.
+  true
+end