Posted about 1 month ago. Visible to the public. Linked content. Auto-destruct in 4 days

Updated: Adding Jasmine JavaScript specs to a Webpack(er) project

ProvidePlugin acrobatics are no longer needed for recent jasmine-core.

They are still needed if you use jasmine-ajax.

Changes

  • 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](/makandra/75556/attachments/9076)
  • # Step 1: Install Jasmine
  • ```
  • 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.
  • ```js
  • // 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'
  • ```
  • ```js
  • // 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
  • ```js
  • // 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
  • -
  • -```js
  • -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
  • +# Step 3: Add a /jasmine page in Rails
  • ```ruby
  • # config/routes.rb
  • Rails.application.routes.draw do
  • # ...
  • if Rails.env.development? || Rails.env.test?
  • get 'jasmine', to: 'jasmine#index'
  • end
  • end
  • ```
  • ```ruby
  • # app/controllers/jasmine_controller.rb
  • class JasmineController < ApplicationController
  • layout false
  • def index
  • end
  • end
  • ```
  • ```haml
  • -# app/views/jasmine/index.html.haml
  • !!!
  • %html
  • %head
  • = stylesheet_pack_tag 'jasmine', :media => 'all'
  • %link{href: image_pack_tag('jasmine_favicon.png'), rel: 'icon', type: 'image/png'}
  • %body
  • = javascript_pack_tag 'jasmine'
  • = javascript_pack_tag 'specs'
  • ```
  • -# Step 5: Enjoy
  • +# Step 4: Enjoy
  • Go to `/jasmine` and see your (hopefully) working setup.
  • # Bonus step: add jasmine-ajax
  • To add the [jasmine-ajax](/makandra/30333) addon, you need to
  • ```
  • yarn add jasmine-ajax
  • ```
  • Then add it to the pack
  • ```js
  • // app/webpack/packs/spec.js
  • // after the other jasmine imports
  • import 'jasmine-ajax'
  • ```
  • -You also need a customer provider. Add a file
  • +## Fixing missing `getJasmineRequireObj()`
  • +
  • +If you get this error:
  • +
  • +```text
  • +Uncaught ReferenceError: getJasmineRequireObj is not defined
  • +```
  • +
  • +then you need a manually expose `getJasmineRequireObj()` to your specs.
  • +
  • +Add a file
  • ```js
  • // 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:
  • +Then expose the provider in your `config/environment.js`:
  • ```js
  • +const webpack = require('webpack')
  • +
  • environment.plugins.prepend('Provide', new webpack.ProvidePlugin({
  • - jasmineRequire: 'jasmine-core/lib/jasmine-core/jasmine.js', // already there
  • getJasmineRequireObj: ['spec/support/jasmine_provider.js', 'default'],
  • }))
  • ```

makandra has been working exclusively with Ruby on Rails since 2007. Our laser focus on a single technology has made us a leader in this space.

Owner of this card:

Avatar
Henning Koch
Last edit:
about 1 month ago
by Henning Koch
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Henning Koch to makandra dev
This website uses short-lived cookies to improve usability.
Accept or learn more