From bf7e7b9db4261aed7eb317ffb28c1652eaba5a18 Mon Sep 17 00:00:00 2001 From: Thomas Haddad Date: Mon, 14 Nov 2016 14:49:53 +0100 Subject: Add Teaspoon / Phantomjs & action tests Signed-off-by: Thomas Shawarma Haddad --- Gemfile | 2 + Gemfile.lock | 7 ++ config/application.rb | 9 ++ spec/javascripts/actions_spec.js | 52 +++++++++++ spec/javascripts/spec_helper.js | 32 +++++++ spec/teaspoon_env.rb | 186 +++++++++++++++++++++++++++++++++++++++ 6 files changed, 288 insertions(+) create mode 100644 spec/javascripts/actions_spec.js create mode 100644 spec/javascripts/spec_helper.js create mode 100644 spec/teaspoon_env.rb diff --git a/Gemfile b/Gemfile index 68034d8a3..8fdb446b2 100644 --- a/Gemfile +++ b/Gemfile @@ -150,6 +150,8 @@ end group :test, :development, :dev do gem 'fabrication', '~> 2.14.1' gem 'ffaker', '~> 2.1.0' + gem "teaspoon-jasmine" + gem "phantomjs" end group :test, :development do diff --git a/Gemfile.lock b/Gemfile.lock index 4d9e94fbd..c325620bf 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -313,6 +313,7 @@ GEM parser (2.2.0.3) ast (>= 1.1, < 3.0) pg (0.18.1) + phantomjs (2.1.1.0) poltergeist (1.6.0) capybara (~> 2.1) cliver (~> 0.3.1) @@ -509,6 +510,10 @@ GEM activerecord (>= 3.0) activesupport (>= 3.0) polyamorous (~> 1.1.0) + teaspoon (1.1.5) + railties (>= 3.2.5, < 6) + teaspoon-jasmine (2.3.4) + teaspoon (>= 1.0.0) temple (0.7.7) term-ansicolor (1.3.2) tins (~> 1.0) @@ -620,6 +625,7 @@ DEPENDENCIES mimemagic newrelic_rpm pg + phantomjs poltergeist polylines pry-rails @@ -663,6 +669,7 @@ DEPENDENCIES spring sqlite3 squeel + teaspoon-jasmine therubyracer (~> 0.12) transpec turbolinks diff --git a/config/application.rb b/config/application.rb index 93a4cc8fd..e37e0a0a9 100644 --- a/config/application.rb +++ b/config/application.rb @@ -29,5 +29,14 @@ module ChouetteIhm # Configure Browserify to use babelify to compile ES6 config.browserify_rails.commandline_options = "-t [ babelify --presets [ es2015 react ] ]" + unless Rails.env.production? + # Work around sprockets+teaspoon mismatch: + Rails.application.config.assets.precompile += %w(spec_helper.js) + # Make sure Browserify is triggered when + # asked to serve javascript spec files + config.browserify_rails.paths << lambda { |p| + p.start_with?(Rails.root.join("spec/javascripts").to_s) + } + end end end diff --git a/spec/javascripts/actions_spec.js b/spec/javascripts/actions_spec.js new file mode 100644 index 000000000..43ebba77f --- /dev/null +++ b/spec/javascripts/actions_spec.js @@ -0,0 +1,52 @@ +var actions = require('es6_browserified/actions') + +describe('actions', () => { + it('should create an action to add a stop', () => { + const expectedAction = { + type: 'ADD_STOP', + } + expect(actions.addStop()).toEqual(expectedAction) + }) +}) +describe('actions', () => { + it('should create an action to move up a stop', () => { + const index = 1 + const expectedAction = { + type: 'MOVE_STOP_UP', + index + } + expect(actions.moveStopUp(index)).toEqual(expectedAction) + }) +}) +describe('actions', () => { + it('should create an action to add a stop', () => { + const index = 1 + const expectedAction = { + type: 'MOVE_STOP_DOWN', + index + } + expect(actions.moveStopDown(index)).toEqual(expectedAction) + }) +}) +describe('actions', () => { + it('should create an action to add a stop', () => { + const index = 1 + const expectedAction = { + type: 'DELETE_STOP', + index + } + expect(actions.deleteStop(index)).toEqual(expectedAction) + }) +}) +describe('actions', () => { + it('should create an action to add a stop', () => { + const text = 'updated text' + const index = 1 + const expectedAction = { + type: 'UPDATE_INPUT_VALUE', + index, + text + } + expect(actions.updateInputValue(index, text)).toEqual(expectedAction) + }) +}) diff --git a/spec/javascripts/spec_helper.js b/spec/javascripts/spec_helper.js new file mode 100644 index 000000000..71d30ff8d --- /dev/null +++ b/spec/javascripts/spec_helper.js @@ -0,0 +1,32 @@ +// Teaspoon includes some support files, but you can use anything from your own support path too. +// require support/jasmine-jquery-1.7.0 +// require support/jasmine-jquery-2.0.0 +// require support/jasmine-jquery-2.1.0 +// require support/sinon +// require support/your-support-file +// +// PhantomJS (Teaspoons default driver) doesn't have support for Function.prototype.bind, which has caused confusion. +// Use this polyfill to avoid the confusion. +//= require support/phantomjs-shims +// +// You can require your own javascript files here. By default this will include everything in application, however you +// may get better load performance if you require the specific files that are being used in the spec that tests them. +//= require application +// +// Deferring execution +// If you're using CommonJS, RequireJS or some other asynchronous library you can defer execution. Call +// Teaspoon.execute() after everything has been loaded. Simple example of a timeout: +// +// Teaspoon.defer = true +// setTimeout(Teaspoon.execute, 1000) +// +// Matching files +// By default Teaspoon will look for files that match _spec.{js,js.coffee,.coffee}. Add a filename_spec.js file in your +// spec path and it'll be included in the default suite automatically. If you want to customize suites, check out the +// configuration in teaspoon_env.rb +// +// Manifest +// If you'd rather require your spec files manually (to control order for instance) you can disable the suite matcher in +// the configuration and use this file as a manifest. +// +// For more information: http://github.com/modeset/teaspoon diff --git a/spec/teaspoon_env.rb b/spec/teaspoon_env.rb new file mode 100644 index 000000000..d9dd2cc47 --- /dev/null +++ b/spec/teaspoon_env.rb @@ -0,0 +1,186 @@ +Teaspoon.configure do |config| + # Determines where the Teaspoon routes will be mounted. Changing this to "/jasmine" would allow you to browse to + # `http://localhost:3000/jasmine` to run your tests. + config.mount_at = "/teaspoon" + + # Specifies the root where Teaspoon will look for files. If you're testing an engine using a dummy application it can + # be useful to set this to your engines root (e.g. `Teaspoon::Engine.root`). + # Note: Defaults to `Rails.root` if nil. + config.root = nil + + # Paths that will be appended to the Rails assets paths + # Note: Relative to `config.root`. + config.asset_paths = ["spec/javascripts", "spec/javascripts/stylesheets"] + + # Fixtures are rendered through a controller, which allows using HAML, RABL/JBuilder, etc. Files in these paths will + # be rendered as fixtures. + config.fixture_paths = ["spec/javascripts/fixtures"] + + # SUITES + # + # You can modify the default suite configuration and create new suites here. Suites are isolated from one another. + # + # When defining a suite you can provide a name and a block. If the name is left blank, :default is assumed. You can + # omit various directives and the ones defined in the default suite will be used. + # + # To run a specific suite + # - in the browser: http://localhost/teaspoon/[suite_name] + # - with the rake task: rake teaspoon suite=[suite_name] + # - with the cli: teaspoon --suite=[suite_name] + config.suite do |suite| + # Specify the framework you would like to use. This allows you to select versions, and will do some basic setup for + # you -- which you can override with the directives below. This should be specified first, as it can override other + # directives. + # Note: If no version is specified, the latest is assumed. + # + # Versions: 1.3.1, 2.0.3, 2.1.3, 2.2.0, 2.2.1, 2.3.4 + suite.use_framework :jasmine, "2.3.4" + + # Specify a file matcher as a regular expression and all matching files will be loaded when the suite is run. These + # files need to be within an asset path. You can add asset paths using the `config.asset_paths`. + suite.matcher = "{spec/javascripts,app/assets}/**/*_spec.{js,js.coffee,coffee}" + + # Load additional JS files, but requiring them in your spec helper is the preferred way to do this. + #suite.javascripts = [] + + # You can include your own stylesheets if you want to change how Teaspoon looks. + # Note: Spec related CSS can and should be loaded using fixtures. + #suite.stylesheets = ["teaspoon"] + + # This suites spec helper, which can require additional support files. This file is loaded before any of your test + # files are loaded. + suite.helper = "spec_helper" + + # Partial to be rendered in the head tag of the runner. You can use the provided ones or define your own by creating + # a `_boot.html.erb` in your fixtures path, and adjust the config to `"/boot"` for instance. + # + # Available: boot, boot_require_js + suite.boot_partial = "boot" + + # Partial to be rendered in the body tag of the runner. You can define your own to create a custom body structure. + suite.body_partial = "body" + + # Hooks allow you to use `Teaspoon.hook("fixtures")` before, after, or during your spec run. This will make a + # synchronous Ajax request to the server that will call all of the blocks you've defined for that hook name. + #suite.hook :fixtures, &proc{} + + # Determine whether specs loaded into the test harness should be embedded as individual script tags or concatenated + # into a single file. Similar to Rails' asset `debug: true` and `config.assets.debug = true` options. By default, + # Teaspoon expands all assets to provide more valuable stack traces that reference individual source files. + #suite.expand_assets = true + + # Non-.js file extensions Teaspoon should consider JavaScript files + #suite.js_extensions = [/(\.js)?.coffee/, /(\.js)?.es6/, ".es6.js"] + end + + # Example suite. Since we're just filtering to files already within the root test/javascripts, these files will also + # be run in the default suite -- but can be focused into a more specific suite. + #config.suite :targeted do |suite| + # suite.matcher = "spec/javascripts/targeted/*_spec.{js,js.coffee,coffee}" + #end + + # CONSOLE RUNNER SPECIFIC + # + # These configuration directives are applicable only when running via the rake task or command line interface. These + # directives can be overridden using the command line interface arguments or with ENV variables when using the rake + # task. + # + # Command Line Interface: + # teaspoon --driver=phantomjs --server-port=31337 --fail-fast=true --format=junit --suite=my_suite /spec/file_spec.js + # + # Rake: + # teaspoon DRIVER=phantomjs SERVER_PORT=31337 FAIL_FAST=true FORMATTERS=junit suite=my_suite + + # Specify which headless driver to use. Supports PhantomJS, Selenium Webdriver and BrowserStack Webdriver. + # + # Available: :phantomjs, :selenium, :browserstack, :capybara_webkit + # PhantomJS: https://github.com/modeset/teaspoon/wiki/Using-PhantomJS + # Selenium Webdriver: https://github.com/modeset/teaspoon/wiki/Using-Selenium-WebDriver + # BrowserStack Webdriver: https://github.com/modeset/teaspoon/wiki/Using-BrowserStack-WebDriver + # Capybara Webkit: https://github.com/modeset/teaspoon/wiki/Using-Capybara-Webkit + #config.driver = :phantomjs + + # Specify additional options for the driver. + # + # PhantomJS: https://github.com/modeset/teaspoon/wiki/Using-PhantomJS + # Selenium Webdriver: https://github.com/modeset/teaspoon/wiki/Using-Selenium-WebDriver + # BrowserStack Webdriver: https://github.com/modeset/teaspoon/wiki/Using-BrowserStack-WebDriver + # Capybara Webkit: https://github.com/modeset/teaspoon/wiki/Using-Capybara-Webkit + #config.driver_options = nil + + # Specify the timeout for the driver. Specs are expected to complete within this time frame or the run will be + # considered a failure. This is to avoid issues that can arise where tests stall. + #config.driver_timeout = 180 + + # Specify a server to use with Rack (e.g. thin, mongrel). If nil is provided Rack::Server is used. + #config.server = nil + + # Specify a host to run on a specific host, otherwise Teaspoon will use 127.0.0.1. + #config.server_host = nil + + # Specify a port to run on a specific port, otherwise Teaspoon will use a random available port. + #config.server_port = nil + + # Timeout for starting the server in seconds. If your server is slow to start you may have to bump this, or you may + # want to lower this if you know it shouldn't take long to start. + #config.server_timeout = 20 + + # Force Teaspoon to fail immediately after a failing suite. Can be useful to make Teaspoon fail early if you have + # several suites, but in environments like CI this may not be desirable. + #config.fail_fast = true + + # Specify the formatters to use when outputting the results. + # Note: Output files can be specified by using `"junit>/path/to/output.xml"`. + # + # Available: :dot, :clean, :documentation, :json, :junit, :pride, :rspec_html, :snowday, :swayze_or_oprah, :tap, :tap_y, :teamcity + #config.formatters = [:dot] + + # Specify if you want color output from the formatters. + #config.color = true + + # Teaspoon pipes all console[log/debug/error] to $stdout. This is useful to catch places where you've forgotten to + # remove them, but in verbose applications this may not be desirable. + #config.suppress_log = false + + # COVERAGE REPORTS / THRESHOLD ASSERTIONS + # + # Coverage reports requires Istanbul (https://github.com/gotwarlost/istanbul) to add instrumentation to your code and + # display coverage statistics. + # + # Coverage configurations are similar to suites. You can define several, and use different ones under different + # conditions. + # + # To run with a specific coverage configuration + # - with the rake task: rake teaspoon USE_COVERAGE=[coverage_name] + # - with the cli: teaspoon --coverage=[coverage_name] + + # Specify that you always want a coverage configuration to be used. Otherwise, specify that you want coverage + # on the CLI. + # Set this to "true" or the name of your coverage config. + #config.use_coverage = nil + + # You can have multiple coverage configs by passing a name to config.coverage. + # e.g. config.coverage :ci do |coverage| + # The default coverage config name is :default. + config.coverage do |coverage| + # Which coverage reports Istanbul should generate. Correlates directly to what Istanbul supports. + # + # Available: text-summary, text, html, lcov, lcovonly, cobertura, teamcity + #coverage.reports = ["text-summary", "html"] + + # The path that the coverage should be written to - when there's an artifact to write to disk. + # Note: Relative to `config.root`. + #coverage.output_path = "coverage" + + # Assets to be ignored when generating coverage reports. Accepts an array of filenames or regular expressions. The + # default excludes assets from vendor, gems and support libraries. + #coverage.ignore = [%r{/lib/ruby/gems/}, %r{/vendor/assets/}, %r{/support/}, %r{/(.+)_helper.}] + + # Various thresholds requirements can be defined, and those thresholds will be checked at the end of a run. If any + # aren't met the run will fail with a message. Thresholds can be defined as a percentage (0-100), or nil. + #coverage.statements = nil + #coverage.functions = nil + #coverage.branches = nil + #coverage.lines = nil + end +end -- cgit v1.2.3 From b4a78c1118c568e7a46939736596975d66a809ea Mon Sep 17 00:00:00 2001 From: Thomas Haddad Date: Mon, 14 Nov 2016 15:55:27 +0100 Subject: Move test deps into different group Signed-off-by: Thomas Shawarma Haddad --- Gemfile | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Gemfile b/Gemfile index 8fdb446b2..4364b0ad2 100644 --- a/Gemfile +++ b/Gemfile @@ -150,8 +150,6 @@ end group :test, :development, :dev do gem 'fabrication', '~> 2.14.1' gem 'ffaker', '~> 2.1.0' - gem "teaspoon-jasmine" - gem "phantomjs" end group :test, :development do @@ -169,6 +167,8 @@ group :test, :development do gem 'rb-fsevent', require: RUBY_PLATFORM.include?('darwin') && 'rb-fsevent' gem 'transpec' gem 'shoulda-matchers' + gem "teaspoon-jasmine" + gem "phantomjs" end group :production do -- cgit v1.2.3 From 76445901cb5aa71e9847605cf9f499026d356c4e Mon Sep 17 00:00:00 2001 From: Thomas Haddad Date: Mon, 14 Nov 2016 17:23:29 +0100 Subject: Use es6 imports instead of old requires for more readability Signed-off-by: Thomas Shawarma Haddad --- .../javascripts/es6_browserified/actions/index.js | 58 +++++++++++----------- .../javascripts/es6_browserified/components/App.js | 8 +-- .../es6_browserified/components/BSelect2.js | 7 ++- .../es6_browserified/components/Todo.js | 7 ++- .../es6_browserified/components/TodoList.js | 7 ++- .../es6_browserified/containers/AddTodo.js | 10 ++-- .../es6_browserified/containers/VisibleTodoList.js | 14 ++---- .../javascripts/es6_browserified/form_helper.js | 18 +++---- .../javascripts/es6_browserified/reducers/index.js | 6 +-- .../javascripts/es6_browserified/reducers/todos.js | 4 +- .../javascripts/es6_browserified/stop_points.js | 14 +++--- 11 files changed, 72 insertions(+), 81 deletions(-) diff --git a/app/assets/javascripts/es6_browserified/actions/index.js b/app/assets/javascripts/es6_browserified/actions/index.js index de3bfc113..41d57d28c 100644 --- a/app/assets/javascripts/es6_browserified/actions/index.js +++ b/app/assets/javascripts/es6_browserified/actions/index.js @@ -1,32 +1,30 @@ -module.exports = { - addStop : () => { - return { - type: 'ADD_STOP' - } - }, - moveStopUp : (index) => { - return { - type: 'MOVE_STOP_UP', - index - } - }, - moveStopDown : (index) => { - return { - type: 'MOVE_STOP_DOWN', - index - } - }, - deleteStop: (index) => { - return { - type: 'DELETE_STOP', - index - } - }, - updateInputValue: (index, text) => { - return { - type : "UPDATE_INPUT_VALUE", - index, - text - } +export const addStop = () => { + return { + type: 'ADD_STOP' + } +} +export const moveStopUp = (index) => { + return { + type: 'MOVE_STOP_UP', + index + } +} +export const moveStopDown = (index) => { + return { + type: 'MOVE_STOP_DOWN', + index + } +} +export const deleteStop = (index) => { + return { + type: 'DELETE_STOP', + index + } +} +export const updateInputValue = (index, text) => { + return { + type : "UPDATE_INPUT_VALUE", + index, + text } } diff --git a/app/assets/javascripts/es6_browserified/components/App.js b/app/assets/javascripts/es6_browserified/components/App.js index 7488b0b39..d41c97217 100644 --- a/app/assets/javascripts/es6_browserified/components/App.js +++ b/app/assets/javascripts/es6_browserified/components/App.js @@ -1,6 +1,6 @@ -var React = require('react') -var AddTodo = require('../containers/AddTodo') -var VisibleTodoList = require('../containers/VisibleTodoList') +import React from 'react' +import AddTodo from '../containers/AddTodo' +import VisibleTodoList from '../containers/VisibleTodoList' const App = () => (
@@ -9,4 +9,4 @@ const App = () => (
) -module.exports = App +export default App diff --git a/app/assets/javascripts/es6_browserified/components/BSelect2.js b/app/assets/javascripts/es6_browserified/components/BSelect2.js index a78dc625f..6fe0f6307 100644 --- a/app/assets/javascripts/es6_browserified/components/BSelect2.js +++ b/app/assets/javascripts/es6_browserified/components/BSelect2.js @@ -1,6 +1,5 @@ -var React = require('react') -var PropTypes = require('react').PropTypes -var Select2 = require('react-select2') +import React, {PropTypes} from 'react' +import Select2 from 'react-select2' // get JSON full path @@ -124,4 +123,4 @@ const formatRepo = (props) => { // ) } -module.exports = BSelect3 +export default BSelect3 diff --git a/app/assets/javascripts/es6_browserified/components/Todo.js b/app/assets/javascripts/es6_browserified/components/Todo.js index 16e42eb3c..e5effe582 100644 --- a/app/assets/javascripts/es6_browserified/components/Todo.js +++ b/app/assets/javascripts/es6_browserified/components/Todo.js @@ -1,6 +1,5 @@ -var React = require('react') -var PropTypes = require('react').PropTypes -var BSelect2 = require('./BSelect2') +import React, {PropTypes} from 'react' +import BSelect2 from './BSelect2' const Container = {display: 'table', width: '100%'} const firstBlock = {display: 'table-cell', verticalAlign: 'middle'} @@ -56,4 +55,4 @@ Todo.propTypes = { value: PropTypes.object } -module.exports = Todo +export default Todo diff --git a/app/assets/javascripts/es6_browserified/components/TodoList.js b/app/assets/javascripts/es6_browserified/components/TodoList.js index e909f07bb..79967e336 100644 --- a/app/assets/javascripts/es6_browserified/components/TodoList.js +++ b/app/assets/javascripts/es6_browserified/components/TodoList.js @@ -1,6 +1,5 @@ -var React = require('react') -var PropTypes = require('react').PropTypes -var Todo = require('./Todo') +import React, {PropTypes} from 'react' +import Todo from './Todo' const TodoList = ({ todos, onDeleteClick, onMoveUpClick, onMoveDownClick, onChange }) => { return ( @@ -31,4 +30,4 @@ TodoList.propTypes = { onMoveDownClick: PropTypes.func.isRequired } -module.exports = TodoList +export default TodoList diff --git a/app/assets/javascripts/es6_browserified/containers/AddTodo.js b/app/assets/javascripts/es6_browserified/containers/AddTodo.js index 539b6f78e..52a3b55c6 100644 --- a/app/assets/javascripts/es6_browserified/containers/AddTodo.js +++ b/app/assets/javascripts/es6_browserified/containers/AddTodo.js @@ -1,13 +1,13 @@ -var React = require('react') -var connect = require('react-redux').connect -var addTodo = require('../actions').addStop +import React from 'react' +import { connect } from 'react-redux' +import { addStop } from '../actions' let AddTodo = ({ dispatch }) => { return (
{ e.preventDefault() - dispatch(addTodo()) + dispatch(addStop()) }}>