Feature/testing

.eslintignore

@@ -0,0 +1 @@
+/cypress/integration

.travis.yml

@@ -0,0 +1,19 @@
+language: ruby
+
+node_js:
+  - 8.10.0
+
+rvm:
+  - 2.4.0
+
+cache:
+  bundler: true
+  directories:
+    - ~/.npm
+    - node_modules
+
+install:
+  - bundle install && npm install
+
+script:
+  - npm run ci

Gemfile

@@ -38,7 +38,7 @@ gem 'nokogiri', '~> 1.8.2'
 group :development, :test do
   gem 'rspec-rails', '~> 3.5.2'
   gem 'show_me_the_cookies'
-  gem 'factory_girl_rails'
+  gem 'factory_bot_rails'
   gem 'shoulda-matchers'
   gem 'database_cleaner'
   gem 'byebug'

Gemfile.lock

@@ -117,10 +117,10 @@ GEM
       ffi (>= 1.3.0)
     excon (0.61.0)
     execjs (2.7.0)
-    factory_girl (4.9.0)
+    factory_bot (4.8.2)
       activesupport (>= 3.0.0)
-    factory_girl_rails (4.9.0)
-      factory_girl (~> 4.9.0)
+    factory_bot_rails (4.8.2)
+      factory_bot (~> 4.8.2)
       railties (>= 3.0.0)
     ffi (1.9.23)
     fission (0.5.0)
@@ -474,7 +474,7 @@ DEPENDENCIES
   database_cleaner
   dotenv-rails
   erubis
-  factory_girl_rails
+  factory_bot_rails
   fog
   foreman
   httparty

README.md

@@ -139,16 +139,13 @@ and the custom search context is owned by Alyssa Barrett on the Google Custom
 Search Engine control panel.
 
 
-## Tests
+## Testing
 
-### Front-end
+We are using `RSpec` for backend view and Rails testing, and [Cypress](https://www.cypress.io) for the front end. We have some legacy tests in `jstest/` which can also be run if needed. [TravisCI](https://travis-ci.org/Vizzuality/gfw) handles our continuous integration for running tests. This calls both our backend and front end tests using `npm run ci`.
 
-We have a few Javascript tests in `jstest/` which you can (read: should)
-run with Grunt:
+### Development
 
-```
-grunt test
-```
+We have tried to make developing tests for GFW as simple as possible. If you are working with an older part of the site like `stories` or `my-gfw` then you might need to write tests inside the `spec/` folder. However, you are most likely wanting to be writing JS tests for components or integration tests for features. You can develop these in the `cypress/` folder. To run these you can execute `npm run test`. Cypress provides some great dev tools for building and debugging tests. You can access these with `npm run test:open`. When writing tests please checkout the [cypress docs](https://docs.cypress.io/) for help with writing tests.
 
 ### BrowserStack
 

app/controllers/application_controller.rb

@@ -2,7 +2,7 @@ class ApplicationController < ActionController::Base
 
   protect_from_forgery with: :exception
 
-  before_action :check_browser
+  before_action :check_browser, if: proc { Rails.env.production? }
 
   def not_found
     raise ActionController::RoutingError.new('Not Found')

app/views/static/old.html.erb

@@ -13,5 +13,3 @@
       </ul>
     </div>
 </section>
-
-<%= render 'shared/svg_supported_browsers' %>

cypress.json

@@ -0,0 +1,3 @@
+{
+  "projectId": "8woruu"
+}

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "[email protected]",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

cypress/integration/app.js

@@ -0,0 +1,5 @@
+describe('Application loads', function() {
+  it('Visits the home page', function() {
+    cy.visit('http://localhost:5000');
+  });
+});

cypress/plugins/index.js

@@ -0,0 +1,17 @@
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+};

cypress/support/commands.js

@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add("login", (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This is will overwrite an existing command --
+// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })

cypress/support/index.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands';
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

package.json

@@ -9,13 +9,17 @@
   "scripts": {
     "postinstall": "./node_modules/bower/bin/bower install",
     "webpack": "./bin/webpack",
-    "foreman": "foreman start",
     "start": "./bin/server",
+    "prod-server": "bundle exec foreman start -f Procfile",
+    "ci": "start-server-and-test prod-server http://localhost:5000 test-ci",
     "server": "./bin/webpack-dev-server",
     "lint": "eslint --ext js --ext jsx .",
     "precommit": "lint-staged",
     "generate": "plop --plopfile app/javascript/generators/plopfile.js component",
-    "generate:page": "plop --plopfile app/javascript/generators/plopfile.js page"
+    "generate:page": "plop --plopfile app/javascript/generators/plopfile.js page",
+    "test": "bundle exec rspec && $(npm bin)/cypress run",
+    "test:open": "$(npm bin)/cypress open",
+    "test-ci": "bundle exec rake && $(npm bin)/cypress run --record"
   },
   "repository": {
     "type": "git",
@@ -40,6 +44,7 @@
     "babel-preset-stage-3": "6.24.1",
     "compression-webpack-plugin": "1.0.0",
     "css-loader": "0.28.5",
+    "cypress": "^2.1.0",
     "eslint": "4.6.1",
     "eslint-config-prettier": "2.4.0",
     "eslint-config-vizzuality": "1.0.5",
@@ -64,6 +69,7 @@
     "release": "3.1.6",
     "resolve-url-loader": "2.1.0",
     "sass-loader": "6.0.6",
+    "start-server-and-test": "^1.4.1",
     "style-loader": "0.18.2",
     "stylelint-config-standard": "17.0.0",
     "stylelint-webpack-plugin": "0.9.0",

spec/controllers/about_controller_spec.rb

@@ -0,0 +1,15 @@
+require 'rails_helper'
+require Rails.root.join(
+  'spec', 'controllers', 'shared_examples', 'renders_index.rb'
+)
+require Rails.root.join(
+  'spec', 'controllers', 'shared_examples', 'assigns_title.rb'
+)
+
+describe AboutController, type: :controller do
+  describe 'GET index' do
+    subject { get :index }
+    it_behaves_like 'renders index'
+    it_behaves_like 'assigns title', 'About'
+  end
+end

spec/controllers/application_controller_spec.rb

@@ -34,13 +34,5 @@ def index
         is_expected.to_not redirect_to("/notsupportedbrowser")
       end
     end
-
-    context "with a unsupported browser" do
-      let(:user_agent) { "Mozilla/4.0 WebTV/2.6 (compatible; MSIE 4.0)" }
-
-      it "redirects to /notsupportedbrowser" do
-        is_expected.to redirect_to("/notsupportedbrowser")
-      end
-    end
   end
 end

spec/controllers/countries_controller_spec.rb

@@ -23,12 +23,4 @@
     end
     it_behaves_like 'assigns title', 'Country Rankings'
   end
-
-  #describe 'GET show' do
-  #  subject { get :show, params: {id: 'POL'} }
-  #  it 'renders show' do
-  #    subject
-  #    expect(response).to render_template('show')
-  #  end
-  #end
 end

spec/controllers/search_controller_spec.rb

@@ -17,7 +17,7 @@
     it_behaves_like 'assigns title', 'Search'
     it 'returns results' do
       subject
-      expect(assigns(:total)).to eq(10)
+      expect(assigns(:total)).to eq(5)
     end
   end
 end

spec/controllers/static_controller_spec.rb

@@ -9,11 +9,6 @@
     it_behaves_like 'assigns title', 'Terms of Service'
   end
 
-  describe 'GET about' do
-    subject { get :about}
-    it_behaves_like 'assigns title', 'About'
-  end
-
   describe 'GET contribute' do
     subject { get :contribute }
     it_behaves_like 'assigns title', 'Contribute data'
@@ -23,4 +18,4 @@
     subject { get :old }
     it_behaves_like 'assigns title', "Oops, your browser isn't supported."
   end
-end
+end

spec/fixtures/vcr_cassettes/countries.yml

@@ -2,7 +2,7 @@
 http_interactions:
 - request:
     method: get
-    uri: http://api-proxy-staging.globalforestwatch.org//countries
+    uri: http://api.globalforestwatch.org/countries
     body:
       encoding: US-ASCII
       string: ''
@@ -18,33 +18,29 @@ http_interactions:
       code: 200
       message: OK
     headers:
-      Connection:
-      - keep-alive
-      Server:
-      - nginx
-      Date:
-      - Wed, 05 Jul 2017 11:52:37 GMT
-      Content-Type:
-      - application/json
-      Content-Length:
-      - '871248'
       Cache-Control:
       - no-cache
       Access-Control-Allow-Origin:
       - "*"
       Access-Control-Allow-Headers:
       - Origin, X-Requested-With, Content-Type, Accept
-      Charset:
+      charset:
       - utf-8
+      Content-Type:
+      - application/json
       Set-Cookie:
-      - _eauth=eyJ1c2VyX2lkIjpudWxsLCJzZXNzaW9uX2lkIjoidVBhTGNMR0wycGtFRUJqMkliNFhPMCJ9|1499255557|0ded9a4c07b62392fc8756f390d84c443a1d9800;
-        Domain=.globalforestwatch.org; Path=/
+      - _eauth=eyJ1c2VyX2lkIjpudWxsLCJzZXNzaW9uX2lkIjoiZ0NQaE44dzdnVXZvZTJudzNXQ2hpVyJ9|1523538271|88a5d449056840809e9f95b2c422ef596dfc446e;
+        Path=/
       X-Cloud-Trace-Context:
-      - cd094539a34f9b2560d8285b5a9dee24;o=1
+      - f29bffc4f1666014537355546b2f2d47
+      Date:
+      - Thu, 12 Apr 2018 13:04:31 GMT
+      Server:
+      - Google Frontend
+      Content-Length:
+      - '871248'
       Expires:
-      - Wed, 05 Jul 2017 11:52:37 GMT
-      Via:
-      - 1.1 vegur
+      - Thu, 12 Apr 2018 13:04:31 GMT
     body:
       encoding: UTF-8
       string: '{"countries": [{"alerts_count": null, "carbon_stocks": 38, "convention_cbd":
@@ -10968,6 +10964,6 @@ http_interactions:
         null}], "params": {"index": true, "interval": "12 Months", "order": ""}}'
     http_version: '1.1'
     adapter_metadata:
-      effective_url: http://api-proxy-staging.globalforestwatch.org//countries
-  recorded_at: Wed, 05 Jul 2017 11:52:37 GMT
-recorded_with: VCR 3.0.3
+      effective_url: http://api.globalforestwatch.org/countries
+  recorded_at: Thu, 12 Apr 2018 13:04:31 GMT
+recorded_with: VCR 4.0.0