ruby-on-rails,angularjs,rspec,capybara , Can rspec be used to feature test an integrated rails-angular app?

Can rspec be used to feature test an integrated rails-angular app?


Tag: ruby-on-rails,angularjs,rspec,capybara

I have a very basic, integrated rails-angular app. It just renders a link, which uses data from a get request to rails:

'use strict';

    function($scope, $http){
      console.log("FightersController is loaded...");
      $scope.fighters = [];
        success(function(data, status){
          $scope.fighters = data;
        error(function(data, status, headers, config) {

When I run a spec like this, and use pry, my link does not appear:

require 'rails_helper'

feature 'Index of Fighters' do

  let!(:fighter) { create(:fighter) }

  scenario 'User visits home', js: true do
    visit '/'
    expect(true).to eq true

But, I have confirmation from the console that angular is loading in the test browser, and the response is a 200. The issue doesn't appear to be browser specific. I've posted a repo here: angular_rspec.

Here is my spec_helper.rb:

ENV["RAILS_ENV"] ||= 'test'
require File.expand_path("../../config/environment", __FILE__)
require 'rspec/rails'
require 'rspec/autorun'
require 'capybara'

Dir[Rails.root.join("spec/support/**/*.rb")].each { |f| require f }

RSpec.configure do |config|

  config.expect_with :rspec do |expectations|
    expectations.include_chain_clauses_in_custom_matcher_descriptions = true

  config.mock_with :rspec do |mocks|
    mocks.verify_partial_doubles = true

  Capybara.javascript_driver = :selenium


And here is my rails_helper.rb:

ENV['RAILS_ENV'] ||= 'test'
require 'spec_helper'
require File.expand_path('../../config/environment', __FILE__)

Dir[Rails.root.join('spec/support/**/*.rb')].each { |f| require f }


RSpec.configure do |config|
  config.fixture_path = "#{::Rails.root}/spec/fixtures"
  config.use_transactional_fixtures = true

Here is my layout:

<!DOCTYPE html>
<html lang="en" ng-app="angularRspec">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= content_for?(:title) ? yield(:title) : "angular rspec" %></title>
    <%= csrf_meta_tags %>
    <%= stylesheet_link_tag "application", :media => "all" %>
    <div class="container">
      <h1>Angular Rspec</h1>
      <div ng-view></div>
      <div ng-controller="FightersController" id="primary"></div>
    <%= javascript_include_tag "application" %>


My guess is that your create(:fighter) call is running in a different thread (and database transaction) than the AJAX get request. Try adding this snippet to your rails_helper.

class ActiveRecord::Base
  mattr_accessor :shared_connection
  @@shared_connection = nil

  def self.connection
    @@shared_connection || retrieve_connection
ActiveRecord::Base.shared_connection = ActiveRecord::Base.connection



Iframe does not show scrollbar

Can't seem to make the iframe appear with a scroll-bar. Go to email: [email protected] pass: 111111 Reload the list with F5, then click new invoice on the right side. The content is lengthy but doesn't show the scroll-bar. My css uses the following: .frm { position: fixed; width: 100%;...

Improve slow angular directive

I have a page that renders table view or div/blocks view depending on window width. But the swop between views happens very slow. Maybe I am not doing things in the best way? I basically have 2 scope variables(block and table, set to true or false) defined in the controller....

Rails basic auth not working properly

I am building a small API that uses basic authentication. What I have done, is that a user can generate a username and password, that could be used to authenticate to the API. However I have discovered that it is not working 100% as intended. It appears that a request...

Angular $http and Fusion Tables in IE9

I am trying a simple get request to a google fusion table in my angular controller. $http.get(url) .success(function(data) { //Do stuff with data }) This works in firefox, chrome, safari and IE10+ however in IE9 (Which I am requried to support) the request fails to even send and the console...

calling one controller from another controller

I have 2 controllers and I am calling the second controller from the function of first controller $ = function () { var modal = ${ templateUrl: 'views/view1.html', controller: 'controller2', // other parameters }); /* some code */ } Both the controllers are in the same folder. There are similar...

UI-Router : Prevent access to parent state

I am moving to UI-Router as my App router. I want to have nested state as below: $stateProvider .state('app', { url: '/app', template: ' <div ui-view></div>', authenticate: true }) .state('app.state1', { url: '/state1', templateUrl: 'app/state1.html', controller: 'State1Ctrl', controllerAs: 'state1', authenticate: true }) .state('app.state2', { url: '/state2', templateUrl: 'app/state2.html', controller: 'State2Ctrl',...

Can't save json data to variable (or cache) with angularjs $http.get

I have weird angularjs problem. I'm trying to fetch data from Rest Webservice. It works fine, but I can't save json data to object. My code looks like: services.service('customerService', [ '$http', '$cacheFactory', function($http, $cacheFactory) { var cache = $cacheFactory('dataCache'); var result = cache.get('user'); this.getById = function(id){ $http.get(urlList.getCustomer + id).success(function(data, status,...

Getting generic anchor text on click with angularJS/jQuery returns empty string

I have an anchor generated from a JSON database query result. The anchor represents the title of an article (I have no idea how many articles there will be). I want to be able to get the anchor text (the article title), upon clicking the anchor in order to use...

Error: [$injector:unpr] Unknown provider: RestangularProvider <- Restangular <- ctrlAG

I have one app: app.js: angular.module('AngApp', [ 'angularGrid' ]); My own restangular service.js: var app = angular.module('AngApp'); app.factory('restService', ['Restangular', function (Restangular) { // make use of Restangular } ]); and controller.js: var app = angular.module('AngApp'); app.controller('ctrlAG', ['$scope', '$http', '$log', '$mdDialog', 'Restangular',function ($scope,$http, $log, $mdDialog, Restangular) { // make use of...

Can't get angular.js to loop through array and post to html

Edit: changed ng-controller to ng-app in body tag, was typo I'm new to angular and im trying to use ng-repeat to post all items in the products[] to html but the {{expressions}} come out as text rather than computing. I don't have my laptop so I'm testing all this on...

$http.get returns actual php script instead of running it (yeoman, grunt)

I'm building a "simple" AngularJS app with an articles newsfeed. My articles are stored in a mysql database, and I extract them using php PDO. I used to do this using AJAX with a simple LAMP configuration (php5, mysql, apache2), and everything worked as intended. Now I'm trying to rebuild...

AngularJS dynamically call function

at this point, I'm new to AngularJS. This works: scope.$apply(scope.hideTooltip()); But calling the function dynamically does not work: scope.$apply( scope.$eval(attrs.ngEnter, {'event': event}) ); HTML: <input type="text" ng-model="value" ng-enter="hideToolTip()" /> The enitre directive: app.directive('ngEnter', function() { return function(scope, element, attrs) { console.log(scope.hideTooltip()); element.bind("keydown keypress", function(event) { if(event.which === 13) { console.log(attrs.ngEnter);...

Same enum values for multiple columns

I need to do something like this: class PlanetEdge < ActiveRecord::Base enum :first_planet [ :earth, :mars, :jupiter] enum :second_planet [ :earth, :mars, :jupiter] end Where my table is a table of edges but each vertex is an integer. However, it seems the abvove is not possible in rails. What might...

Pre-Select of an option in a select not working

I use the following select. Currently, I get empty options in my select on start. To avoid these empty options in angularJS, I want to preselect the first option in the select. But It do not work. I get an 'Cannot read property 'conditions' of undefined'. Thank you for your...

Is it possible to have two callbacks in around_destroy in rails?

Although this can be accomplished as follows: class Model < ActiveRecord::Base around_destroy :callback def callback puts 'callback1 before yield' puts 'callback2 before yield' yield puts 'callback1 after yield' puts 'callback2 after yield' end end But I wish to do the following: class Model < ActiveRecord::Base around_destroy :callback1, :callback2 def callback1...

How to pass array in rails 4 strong parameters

I have to pass a array of food_item_ids in my order_controller. Every order will have many food_items. How can I pass these food_items_id as an array in strong parameters. orders_controller.rb def create @order = if render :json, @order, status:201, location: [:api, @order] else render :json, { errors: @order.errors...

How to add class on ng-click?

I have this: How can i add class "active-link" on: @Translate("PERSONAL_INFORMATION") @Translate("NOTIFICATIONS") @Translate("CHANGE_PASSWORD") @Translate("GAME_SETTINGS") ...

$scope variable does not update within $interval function

I am using $interval for my custom stopwatch. Within the $interval function I have a variable $scope.inputValue which is binded to a range. The problem is that after each iteration of $interval (every 500ms), the most recent $scope.inputValue is not taken into account, but only the value at the initialization...

Make instance variable accessible through hash in Ruby

In Rails, ActiveRecord objects, attributes are accessible via method as well as through Hash. Example: user = User.first # Assuming User to be inheriting from ActiveRecord::Base # Accessing attribute 'name' via method user[:name] # Attribute 'name' is accessible via hash as well How to make instance variables accessible through...

Getting CROS Error even after adding header in node.js for Angular js

I am trying to consume REST API from NODE JS for Angular js,even after adding cors header in my server code I am getting error XMLHttpRequest cannot load Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers. I am new to both Angular JS and Node JS. Node JS...

Merge and sum values and put them in an array

I'm retrieving values from an external source and apply a foreach loop to the results, with the code below. angular.forEach(data, function(value, key) { if (value.start_date > firstdayOfWeek && value.start_date < lastdayOfWeek) { console.log(value.firstname + ' - ' + value.distance); } else { //do nothing } }); The result is console...

How can this be undefined in the constructor of an Angular config class?

I've found some examples online, where people create TypeScript config classes and pass them on to Angular. When I've tried it, I got the weird exception, that this was undefined. A closer look to the other implementations revealed, they only use the constructor, so, are those examples actually inherently wrong...

ActiveAdmin ::Show 4 textbox in active admin using has_many relationship

I have one poll table having with question filed and each question have 4 answer which is has_many relation ship with answer table class Poll < ActiveRecord::Base has_many :answer end My answer model class Answer < ActiveRecord::Base belongs_to :poll, :class_name => "Poll", :foreign_key => "question_id" end My active admin form...

Showing and editing has_many objects in Rails

I'm trying to do something that I imagine to be very basic, but I'm very new to Rails and am not sure what sure what I'm doing wrong. I've gone through several tutorials and searched for an answer and can't find what the issue is. Would appreciate any help! I've...

REST API with token based authentication

I want to develop a web site with AngularJS. On the backend side I will use Codeigniter REST framework. I have some security issues and I don't want to start developing without fixing them on my mind. I don't want to use something like api key because it will be...

Rails shared controller actions

I am having trouble building a controller concern. I would like the concern to extend the classes available actions. Given I have the controller 'SamplesController' class SamplesController < ApplicationController include Searchable perform_search_on(Sample, handle: [ClothingType, Company, Collection, Color]) end I include the module 'Searchable' module Searchable extend ActiveSupport::Concern module ClassMethods def...

How to find a record from database by using find_by with two fields?

I want to find a record from database in ruby on rails by using find_by with two fields. How can I accomplish it?

navbar disappears but no dropdown

So been trying to set up a navbar that collapses to a drop down when the size is under a certain number of pixels. So far I have managed to make the normal menu disappear when it goes under a certain size, but once I make the window smaller and...

How to use a service with Http request in Angular JS

I'm using AngularJS to build my web application, I've been always using controllers to make HTTP request, which makes things easier and clear for me. But for a better code structure, and better execution for my application, I wanted to use services instead of controllers to use the web service....

Socket.IO message doesn't update Angular variable

I have a client-server setup with AngularJS running on the client. // Server.js var io = require('')(server); io.on('connection', function (socket) { socket.on('message', function (msg) { //console.log(msg); console.log(msg); io.emit('message', msg); }); }); As observed, it essentially emits a message events with the data stored in the variable msg. And then...

How to send a mail by postfix mail server with rails?

On my local host, I followed this article made a mail server and it works well. I want to develop a mailer feature with rails framework. Here are my settings: # mailer config.action_mailer.default_url_options = { :host => '' } config.action_mailer.delivery_method = :smtp config.action_mailer.smtp_settings = { address: 'localhost', port: 25,...

Angular-strap data-trigger='focus' not working

the data-trigger focus is not working for me ... <span data-content='foo' data-html='true' data-placement='top' data-container='body' data-trigger='focus' bs-popover> Nothing is actually happening when I am clicking on this element. If I remove data-trigger='focus' and set it to hover or click, it does work. I am using angularjs. 1.2.18 and angular-strap : 2.2.4...

AngularJS: Adding ng-click within element.append

Within my directive I have the following code, which will be used to continually append to an html element. //Establishes the type of question and therefore what should be displayed app.directive('questionType', function ($http, $compile) { return { restrict: 'A', link: function (scope, element, attr, model) { switch (scope.Question.inputType) { case...

Rails: Posting from a form to a M:M table

On the group index page I display a listing of group discussions and a form to create a new discussion. class Group < ActiveRecord::Base has_many :discussions end class Discussion < ActiveRecord::Base belongs_to :user belongs_to :group end Controller: class DiscussionsController < ApplicationController def index @group = Group.find(params[:group_id]) @discussion ={group_id:})...

What is Rack::Utils.multipart_part_limit within Rails and what function does it perform?

Rack::Utils.multipart_part_limit is set to 128 by default. What purpose does the value have and what effect does it have within the Rails system?...

Ruby on Rails - Help Adding Badges to Application

I'm creating a rails application that is a backend for a mobile application. The backend is implemented with a RESTful web API. Currently I am trying to add gamification to the platform through the use of badges that can be earned by the user. Right now the badges are tied...

On rendering from controller, current_page method does not seem to work

I have a navigation bar included in application.html.erb. Because for some pages, such as the signup page, I need to place additional code inside the navigation bar, I have excluded those pages for showing the navigation bar through application.html.erb and instead included it in their respective view pages. See code...

Passing params to an angular service from a controller?

I'm an angular newby. I'm hoping to pass params to a service that fetches data form a server depending on those params. for example, if I want to pass a book name string and then use it in the service to concatenate with the request url. The documentation does not...

Can Rails deal with DB uniqueness without index?

I see add_index ~ unique: true statement in schema.rband think uniqueness is constraint for table, not for index.Using index is one of way realizing uniqueness, Programmer should not designate to the RDBMS "how" and index quicken searching but take costs inserting. In fact, is there another way to keep uniqueness...

success and error function in the controller for a service

I have the following code in a service and I am calling fetchData function from the controller. Service app.service("geturl", function($http) { urllist = []; geturl.fetchData = function() { var data = []; for (i = 0; i < urllist.length; i++) { (function(index) { return $http.get(geturl.urllist[index], { timeout: 8000 }) .then(function(response)...

Create angular page in Django to consume data from JSON

In an angular controller I have a list of items: app.controller('MainController', ['$scope', function($scope) { $scope.items = [ {"foo":"bar 1"}, {"foo":"bar 2"}, {"foo":"bar n"} ] }]); The following html page, based on angular, displays a list of item: <!DOCTYPE html> <html> <head> <title>list</title> <script src= ""></script> </head> <body data-ng-app="myApp"> <div data-ng-controller="MainController">...

function is undefined if no module is declared in Angular

I am new in Angular and I am studying controllers. In my code I setup a simple controller access but when I tried to run in my browser I encountered a series of error messages that looks like this: "Error: [ng:areq] Argument 'personController' is not a function, got undefined In...

remove char from string with angular

I'm trying to remove a period '.' from a value that comes from a feed, however I don't really want to do this in my app.js, rather in my view. So if I do the following: value: {{item.v_value}} I get 3.5, I'd simply like to strip out and render out...

Active Record association links, but can't assign values

I'm setting up permissions for each user to determine what access they have to certain data. I have a user model and a permission model that is set up with a has_many and belongs_to association like so: app/models/permission.rb class Permission < ActiveRecord::Base has_many :users end app/models/user.rb class User < ActiveRecord::Base...

Stack level too deep because recursion

I have a model named Tweet. The columns of the Tweet model are: -id -content -user_id -picture -group -original_tweet_id Every tweet can have one or multiple retweets. The relation happens with the help of original_tweet_id. All the tweets have original_tweet_id nil , whilst the retweets contain the id of the...

HTML elements in Angular bindings expression

Is that possible to insert HTML elements in an Angular expression ? Let's take a few example. I would like to do something like this: <table> <tr ng-repeat="employee in employees"> <td>{{employee.firstname ? employee.firstname : '<p style="color:red">No name</p>'}}</td> <td>{{employee.job}}</td> </tr> </table> In our controller, we have: $scope.employees = [{firstname:'Bob', job:'Developer'}, {firstname:'Paul',...

How do I add a class on ng-click from layout?

Here is the page layout: <li class="dropdown"> <ul class="submenu"> <li ng-click="SetActiveMenuForPersonalInfo();"> <a href="../Account/#/PersonalInfo">@Translate("MY_ACCOUNT")<a> </li> </ul> </li> When a user clicks on my account, they get this: This is the function in the controller: $scope.SetActiveMenuForPersonalInfo = function () { $scope.activeMenu = 'Settings'; $scope.activeLink = "PersonalInfo"; console.log("Active menu:...

AngularJS, Animate on change: directive $watch not called

I'm creating a live websocket application which requires grabbing the users attention upon change of a value. The following directive is used in multiple places on the same page: <span class="badge" animate-on-change animate-class="highlightWarning" animate-watch="totalAnswers">{{totalAnswers}}</span> and <div animate-on-change animate-class="colorWarning" animate-watch="rq.answer" ng-switch="question.type" ng-repeat="rq in recentResponse.answers" ng-if="rq.question =="> Now, rq.answer rarely changes,...

Ruby: How to copy the multidimensional array in new array?

seating_arrangement [ [:first, :second, :none], [:first, :none, :second], [:second, :second, :first], ] I need to copy this array into new array. I tried to do it by following code: class Simulator @@current_state def initialize(seating_arrangement) @@current_state = seating_arrangement.dup end But whenever I am making any changes to seating_arrangement current_state changes automatically....

Mongoid HABTM relationships across embedded documents

I'm trying to create a Mongoid N-N reference association between two embedded documents in Rails 4 however I'm finding it difficult to get my head round how this is done. I started by adding the HABTM association to the relevant models below (Track and Option) but of course I'm getting...