ruby on rails - Setting up test data for full-stack testing of a single page web application and its back-end -

short version of question:

in cucumber tests written angular single page web application, how accomplish tasks performed in "given" section of scenario (such setting test data, defining database record associations, , ensuring clean database state between tests) when testing full-stack, both front-end application , back-end? application source code stored in 2 separate git repositories, 1 front-end application , 1 back-end. back-end written in ruby using rails api gem. challenge in testing application full-stack comes fact it's 2 applications, in contrast more traditional ruby on rails application not implemented single page application.

full version of question:

i'm looking write series of cucumber tests web application. application consists of front-end single page application written in angular, , back-end api written using rails api. source code front-end , source code back-end each reside in own git repositories, providing clean separation between 2 codebases. furthermore, application uses mysql , elasticsearch.

i've used cucumber in past on previous ruby on rails projects. these projects not developed single page applications. in these projects easy create ruby objects test data in cucumber step definitions. example, consider following feature file rails project not single page application:

# features/home_page.feature feature: home page    scenario: viewing application's home page     given there's post titled "my first" "hello, bdd world!" content     when on homepage     should see "my first" post 

the steps in feature file can implemented following step definitions:

# features/step_definitions/home_page_steps.rb given(/^there's post titled "(.*?)" "(.*?)" content$/) |title, content|   @post = factorygirl.create(:post, title: title, content: content) end  when(/^i on homepage$/)   visit root_path end  then(/^i should see "(.*?)" post$/) |title|   @post = post.find_by_title(title)    page.should have_content(@post.title)summary of question   page.should have_content(@post.content) end 

in ruby on rails projects not developed single page applications, testing tools can included project ruby gems. me, these tools include:

group :test   gem 'shoulda-matchers'   gem 'cucumber-rails', require: false   gem 'database_cleaner'   gem 'selenium-webdriver' end  group :development, :test   gem 'factory_girl_rails' end 

as can see, includes factory girl, used setting ruby objects test data , defining database record associations, , database cleaner, used ensure clean database state between tests. inclusion of selenium webdriver required cucumber scenarios use javascript.

the situation different in case of single page application. described above, application broken 2 separate code bases, 1 angular front-end single page application , other rails api back-end interface.

however, single page applications such project still have same testing requirements more traditional rails applications not built single page applications. it's necessary test application full-stack ensure each component, both front , backend, work expected. there need cucumber steps defined create "given" preconditions prior test, , necessary ensure clean database between tests.

how test cucumber application such this, 1 2 code bases, implemented single page application? there's version of cucumber available javascript called cucumberjs. however, don't know how create fixtures, record associations, , ensure clean database between tests using cucumberjs. there's tool testing javascript written angular called protractor. imagine tool taking place of selenium webdriver.

answer short version question.

the challenge in testing application full-stack comes fact it's 2 applications

what describe tipical single page apps. have number of spa examples (covered e2e) backend restful api in php, dot.net or ever cloud web-service (parse.com). point of view, best treat such apps, qoute agin, 2 different apps , write 2 different sets of test each. believe way write stable, scalable , fast e2e tests.

basically create local non-persistent mock api (in javascript) testing. here's list of requirements/guidelines such api:

1. provides mock data test suit (read - coupled test suit)
2. covers enough methods make tests pass.
3. it non-peristent (request parameters there make response, though there can exceptions that). persistance on client (localstorage, cookies). important, because clearing client storage , refreshing page - fresh state of app! test monolith - you'd have clear , repopulate database, hume waste of time , non-scalable.
4. embedded angular repository, part of testing suit , development process.

how in practice. let's testing login feature of website , has 3 scenarios:

var homepage = require('pages/homepage'); //page object home page  describe('authentication', function () {    beforeeach(function () {     browser.manage().deleteallcookies(); //clear persistance     browser.refresh(); //refresh page     homepage.get(); //go homepage   });    it('should show error when user enters wrong credentials', function () {     homepage.signin('admin', '123'); //submit invalid credentials      expect(browser.getcurrenturl()).tomatch('/home$');         expect(homepage.getsigninform()).tocontain('wrong credentials');   });  }); 

to satisfy these tests have implement api post /login request:

router.get('/login', function (req, res) {   var username = req.body.username, password = req.body.password;    if (password !== 'admin') {     res.status(404).json({"error": "wrong credentials"});   } else {     res.json(user(username}));   } });