Comment configurer Jasmine dans Rails 6?

Comment configurer Jasmine dans l'environnement Rails 6 (où Webpack remplace le pipeline d'actifs pour Javascript) afin que je puisse tester les modules Javascript que j'ai écrits pour mon application?

J'ai installé la gemme de jasmin, ai couru rails generate jasmine:installet édité jasmine.ymlpour pointer vers l'emplacement de ma source et de mes spécifications Javascript.

Le problème est que je ne peux pas utiliser d'instructions d'importation / exportation. (Par exemple, en essayant de charger mon premier module aux résultats des tests dans cette erreur dans Chrome: Uncaught SyntaxError: Unexpected token 'export')

D'après ce que je peux dire, j'ai besoin de configurer Jasmine pour utiliser babel; mais, je n'ai pas de chance de trouver des instructions sur la façon de le faire dans la nouvelle disposition de Rails 6.

— Zack
source

Hé Zack, @Dofs, avez-vous eu l'occasion de jeter un œil à ma réponse? Cela vous suffit-il ou devrais-je aider / enquêter plus en profondeur?

— Sergey Mell

Pas encore. Janvier et février sont les périodes les plus occupées de l'année pour mon travail régulier. Je vous le ferai savoir dès que possible.

— Zack

Oui tu as raison. Le principal problème dejasmine-gem est qu'il ne transmet pas la spécification via babel. Permettez-moi de publier la solution la plus rapide à votre problème et après cela, je penserai à la mise en œuvre possible d'une approche similaire en jasmine-gem.

L'idée principale est de diriger les spécifications à travers le webpack de rails tant qu'il a toutes les configurations babel requises.

Installez jasmine-corecar nous n'utiliserons pas jasmine-gemdans cette solution
```
yarn add jasmine-core -D
```

Créez maintenant deux packs Webpack supplémentaires. L'un est pour Jasmine et ne contiendra que Jasmine et le testeur

// app/javascript/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'

Et le second pour votre code d'application et les spécifications

// app/javascript/packs/specs.js

// First load your regular JavaScript (copy all the JavaScript imports from your main pack).
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) }

Faites attention à vos chemins '../javascripts'et '../spec'. Pour moi, cela ressemblait '../../assets/javascripts'et '../../../spec'respectueusement.

Ajoutez ensuite le Webpack ProviderPlugin pour Jasmine (ajoutez ce code à config/webpack/environment.js)

// config/webpack/environment.js

const webpack = require('webpack')

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

Ajouter la page Jasmine Ranner à votre application

# config/routes.rb

Rails.application.routes.draw do
  # ...

  if Rails.env.development? || Rails.env.test?
    get 'jasmine', to: 'jasmine#index'
  end
end

# app/controllers/jasmine_controller.rb

class JasmineController < ApplicationController
  layout false

  def index
  end
end

# app/views/jasmine/index.html.haml

<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <%= stylesheet_pack_tag 'jasmine', :media => 'all' %>
</head>
<body>
  <%= javascript_pack_tag 'jasmine' %>
  <%= javascript_pack_tag 'specs' %>
</body>
</html>

Maintenant, votre Jasmine devrait fonctionner sur la /jasmineroute

Cette réponse est préparée sur la base de ce post , cependant, j'ai revérifié les instructions sur ruby 2.6.3, rails 6.0.2, ajouté les modifications appropriées aux recommandations et prouvé que cela fonctionne.

Veuillez me faire savoir si ma réponse vous a été utile ou si vous avez besoin d'informations supplémentaires. Cependant, je vais travailler sur une solution qui réussira avec jasminegem ou une implémentation similaire.

— Sergey Mell
source

Puis-je vous demander de tester quelque chose? J'ai suivi ces instructions, jasmine fonctionne, mais bootstrap.min.jsjette soudainement une erreur qui signifie essentiellement qu'il jqueryn'est pas chargé avant bootstrap. Cependant,] je ne trouve pas ce qui change dans l'ordre de chargement de JS dans ce code ... d'autant plus que mon bootstrap est chargé via CDN dans la mise en page de l'application après la javascript_pack_tag 'application'ligne et que mon a application.jsdéjà un require('jquery'). Si vous avez cette configuration dans un environnement local, pouvez-vous charger le bootstrap via CDN dans la disposition de l'application et voir si cela fonctionne?

— James

Je l'ai compris. L'étape 3 remplaçait le code qui a ajouté le plugin jquery. Cette réponse l'a corrigé: stackoverflow.com/questions/51447443/…

— james