This gem permits to connect frontend apps like react, angular, etc with backend rails apps to run end to end tests using libraries like cypress
-
Add dependency
Add this line to your application's Gemfile:group :test do gem 'e2e_tests_connector' end
And then execute:
$ bundle install
-
Mount route
mount E2eTestsConnector::Engine, at: '/e2e_tests_connector'
- Copy backend_connector.ts into
cypress/support/backend_connector.ts
- Import the connector in
cypress/support/index.js
import './backend_connector';
Optionally change default configurations when using custom factories or database cleaners
# config/initializers/e2e_tests_connector.rb
return unless defined?(E2eTestsConnector)
E2eTestsConnector::Config.init_custom_mocks = lambda do |_params|
# here custom mocks or initializers when starting e2e tests (default empty)
end
E2eTestsConnector::Config.reset_db = lambda do |_params|
# here custom database cleaner (default DatabaseCleaner.clean)
end
E2eTestsConnector::Config.run_factory = lambda do |_params|
# here custom factory builder (default FactoryBot)
end
- Start test applications, like:
cd backend_app/ && RAILS_ENV=test bundle exec rails s -e test -p 3001 &
cd frontend_app/ && PORT=3000 BROWSER=none RAILS_PORT=3001 yarn start test --silent &
- Run e2e tests (hosts and ports may vary based on your test apps)
CYPRESS_BASE_URL=http://localhost:3000 CYPRESS_BACKEND_URL=http://localhost:3001 yarn cypress run
- Factory command
// Multiple values cy.factory('create_list(:article, 2)').as('articles'); // => [{ id: 1, title: "Sample article", created_at: "..", ... }, { id: 2, title: "Sample article", created_at: "..", ... }] // Provide custom data cy.factory('create(:article, title: "Sample article")').as('article'); // => { id: 1, title: "Sample article", created_at: "..", ... } // Return custom data cy.factory('create(:article).as_json(only: [:id, :title])').as('article'); // => { id: 1, title: "..." } // Multiple commands cy.factory(['create(:article, kind: :external)', 'create(:article, kind: :internal)']).as('articles'); // => [{ id: 1, title: "..", kind: "external", ... }, { id: 2, title: "..", kind: "internal", ... }]
- Custom command
// Single value cy.cmd('Article.find(1)').as('article'); // => { id: 1, title: "..", kind: "external", ... } // Multiple values cy.cmd('Article.where(kind: :external)').as('articles'); // => [{ id: 1, title: "..", kind: "external", ... }, { id: 2, title: "..", kind: "external", ... }, ...] // Multiple commands cy.cmd(['Article.find(1)', 'Article.find(2)']).as('articles'); // => [{ id: 1, title: "..", kind: "external", ... }, { id: 2, title: "..", kind: "internal", ... }]
- Full example
describe('When listing articles', () => { beforeEach(() => { // cy.stubLoginWith(); cy.factory('create_list(:article, 2)').as('articles'); }); it('includes all expected articles', function () { cy.visit('/articles'); cy.get('table tbody tr').should('have.length', this.articles.length); }); describe('When filtering', () => { it('returns expected article', function () { const article = this.articles[0]; cy.visit(`/articles/filter=${article.number}`); cy.get('table').contains(article.number); }); }); });
uninitialized constant E2eTestsConnector::Config::DatabaseCleaner
Require the corresponding library inspec/spec_helper.rb
require 'factory_bot_rails' # OR require 'database_cleaner/active_record'
Contribution directions go here.
The gem is available as open source under the terms of the MIT License.