Question

I need to write a cucumber scenario to test that a list of projects are sorted (by name). I have something like:

Scenario: Sort projects by name
   Given there is a project called "Project B"
   And there is a project called "Project A"
   And there is a project called "Project C"
   Given I am on the projects page
   When I follow "Sort by name"
   Then I should see in this order ["Project A", "Project B", "Project C"]

I have added a step, that looks like:

Given /^I should see in this order (\[.*\])$/ do |array|

end

What’s the best way to test if the projects that are listed on the page appear with the right order? I tried to get all the project names through jQuery:

$(function() {
    var arrjs = new Array();
    $("div.project-main-info").find("a:first").each(function(){
        arrjs.push($(this).text());
    })
  });

and put them inside an array to do a comparison with the array passed as a parameter to this step, but I don’t know how to integrate that jQuery code inside this step!

Thanks!

EDIT

As suggested by McStretch, I tried to get the anchors using XPath by doing:

all('a').each do |a|
    if(/\/projects\/\d*/).match("#{a[:href]}")
        arr_page << "...." # Need to retrieve the value out of <a href="..">VALUE</a> but don't know how..any idea?
    end
  end

Is this the right way to proceed? I just tested, and unfortunately arr_page doesn’t get filled with anything (I replaced the “…” part with a[:href] just to test)! Actually I tried to check the value of a[:href] (by raising it) and it’s blank! How would I better check my anchors (given there href all match the regex mentionned above)?

Answer 1

Firstly, it would be better to write your final step as:

Then I should see the projects in this order:
  | Project A |
  | Project B |
  | Project C |

Now you can easily access the list as an array, e.g.

expected_order = table.raw

You then need to collect together the projects in the page into an array, as @McStretch suggests:

actual_order = page.all('a.project').collect(&:text)

(This assumes that each of your project links has a “project” CSS class to make testing easier).

You can then use RSpec to compare the two arrays.

expected_order.should == actual_order

This will show a failure if the order is incorrect.