Posted 25 days ago. Visible to the public.

Adding Jasmine JavaScript specs to a Webpack(er) project

The goal is to get Jasmine specs running in a Rails project using Webpacker, with the browser based test runner. Should be easily adaptable to a pure Webpack setup.

Image

Step 1: Install Jasmine

Copy
yarn add jasmine-core

Step 2: Add two separate packs

Since we do not want to mix Jasmine into our regular Javascript, we will create two additional packs. The first only contains Jasmine and the test runner. The second will contain our normal application code and the specs themselves.

We cannot combine both into a single pack, since this will confuse Jasmine and cause it to swallow all backtraces.

Copy
// app/webpack/packs/jasmine.js import 'jasmine-core/lib/jasmine-core/jasmine.css' import 'jasmine-core/lib/jasmine-core/jasmine-html.js' import 'jasmine-core/lib/jasmine-core/boot.js' import 'jasmine-core/images/jasmine_favicon.png'
Copy
// app/webpack/packs/specs.js // First load your regular JavaScript (copy all the JavaScript imports from your main pack). // For example: import 'unpoly/dist/unpoly.js' let webpackContext = require.context('../javascripts', true, /\.js(\.erb)?$/) for(let key of webpackContext.keys()) { webpackContext(key) } // Then load the specs let specsContext = require.context('../spec', true, /\.js(\.erb)?$/) for(let key of specsContext.keys()) { specsContext(key) }

You packs might not live in app/webpack, so adjust depending on your setup.

Lastly, add a sample spec to app/webpack/spec/, like

Copy
// app/webpack/spec/test_spec.js describe('The truth', () => { it('is still true', () => { expect(true).toBe(true) }) })

Step 3: Add the Webpack ProvidePlugin for Jasmine

In your config/webpack/environment.js, add

Copy
const webpack = require('webpack') environment.plugins.prepend('Provide', new webpack.ProvidePlugin({ jasmineRequire: 'jasmine-core/lib/jasmine-core/jasmine.js', }))

Step 4: Add a /jasmine page in Rails

Copy
# config/routes.rb Rails.application.routes.draw do # ... if Rails.env.development? || Rails.env.test? get 'jasmine', to: 'jasmine#index' end end
Copy
# app/controllers/jasmine_controller.rb class JasmineController < ApplicationController layout false def index end end
Copy
-# app/views/jasmine/index.html.haml !!! %html %head = stylesheet_pack_tag 'jasmine', :media => 'all' %link{href: image_path('jasmine_favicon.png'), rel: 'icon', type: 'image/png'} %body = javascript_pack_tag 'jasmine' = javascript_pack_tag 'specs'

Step 5: Enjoy

Go to /jasmine and see your (hopefully) working setup.

Bonus step: add jasmine-ajax

To add the jasmine-ajax addon, you need to

Copy
yarn add jasmine-ajax

Then add it to the pack

Copy
// app/webpack/packs/spec.js // after the other jasmine imports import 'jasmine-ajax'

You also need a customer provider. Add a file

Copy
// app/webpack/spec/support/jasmine_provider.js import jasmineRequire from 'jasmine-core/lib/jasmine-core/jasmine.js' export default function getJasmineRequireObj() { return jasmineRequire; }

Then in your config/environment.js, add another option to the Provide plugin:

Copy
environment.plugins.prepend('Provide', new webpack.ProvidePlugin({ jasmineRequire: 'jasmine-core/lib/jasmine-core/jasmine.js', // already there getJasmineRequireObj: ['spec/support/jasmine_provider.js', 'default'], }))

By refactoring problematic code and creating automated tests, makandra can vastly improve the maintainability of your Rails application.

Owner of this card:

Avatar
Tobias Kraze
Last edit:
22 days ago
by Dominik Schöler
Attachments:
jasmine_specs.png
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Tobias Kraze to makandra dev
This website uses cookies to improve usability and analyze traffic.
Accept or learn more