Learning From Test Suite Aggravation

In my previous post  I spoke about the Flex Blogger project.  Josh introduced us to a new component called ckeditor.  Ckeditor is a javascript based gui text editor.  After using ckeditor I thought it would be beneficial to add it to another application I created for my day job - HarePD.

Before starting on new features, I will fire off my test suite to make sure everything is still green.  For me I just type:  rspec

I love seeing all that green!  Next, I created a branch to work on this new feature, and updated my Gemfile:

git checkout -b add_ckeditor
vim Gemfile

#added gem 'ckeditor'

You can get more information regarding how to setup ckeditor in your rails application by visiting here.

With the new gem added, and minor updates made in the appropriate view file, _form.html.slim, it was time to re-run my test suite.  Things were looking good as I saw green, green, green.  Then, as my tests executed on the scenarios that used ckeditor, I started to see red.  No big deal I thought, probably a simple change.  Below is an example of one of my tests that was failing:

#spec/support/issues_helper.rb
def create_issue
  click_link 'Add Issue'
  fill_in 'Title', with: 'Cert Expiration'
  fill_in 'Description', with: 'SSL Cert Expiration'
  select('2', :from => 'User level')
  select('Linux', :from => 'Os')
  click_button 'Submit'
end

Ok, this should be an easy fix.  I inspected the ckeditor element on my webpage using the Chrome Dev Tools, and got the new name - issue_description.  So I updated the tests that were using 'Description' and replaced with 'issue_description.'  I ran a focused test, on just one scenario and it went green.  Next, I ran all the tests in that particular spec file and again I had a combination of green and red.  Argh!  I took notice of all the failed tests and ran them each one-by-one.  They all passed - they were all green when executed on their own.  Argh f#@% damnit!

Many hours passed as well as changes here and there to try and get things working.  To keep this post fairly short, I'm going to jump to the solution.  After some research and trying different solutions, I stumbled upon the following:

Create a new file:

#spec/support/ckeditor_helper.rb

def fill_in_ckeditor(locator, params = {})
  locator = find('label', text: locator)[:for] if page.has_css?('label', text: locator)
  page.execute_script <<-SCRIPT
      var ckeditor = CKEDITOR.instances.#{locator}
      ckeditor.setData('#{params[:with]}')
      ckeditor.focus()
      ckeditor.updateElement()
  SCRIPT
end

With the above in place, I refactored my create_issue method from above to read as follows:

def create_issue
  click_link 'Add Issue'
  fill_in 'Title', with: 'Cert Expiration'
  fill_in_ckeditor 'Description', with: 'SSL Cert Expiration'
  select('2', :from => 'User level')
  select('Linux', :from => 'Os')
  click_button 'Submit'
end

After making the above changes, I ran my tests for the single spec file and to my delight, everything was green.  Now the real moment of truth - run the entire test suite.  A smile slowly expanded on my face as all the green scrolled by without a single pixel of red!

Although this issue aggravated me for a bit, the end result was much happiness and joy.  Not to mention I learned a few cool new things here and there in the process.

Learn Something New Every Day

Last Edited by: John on November 14, 2015