Come configurare Jasmine in Rails 6?

Come configuro Jasmine nell'ambiente Rails 6 (dove Webpack sostituisce la pipeline delle risorse per Javascript) in modo da poter testare i moduli Javascript che ho scritto per la mia app?

Ho installato la gemma di gelsomino, eseguito rails generate jasmine:installe modificato jasmine.ymlper indicare la posizione della mia sorgente Javascript e le mie specifiche.

Il problema è che non riesco a utilizzare le istruzioni di importazione / esportazione. (Per esempio, il tentativo di caricare il mio primo modulo per i risultati dei test in questo errore in Chrome: Uncaught SyntaxError: Unexpected token 'export')

Da quello che posso dire, ho bisogno di impostare Jasmine per usare Babel; ma non ho fortuna a trovare le istruzioni su come farlo nel nuovo layout di Rails 6.

— Zack
fonte

Ehi Zack, @Dofs, hai avuto la possibilità di dare un'occhiata alla mia risposta? È abbastanza per te o dovrei aiutare / indagare più a fondo?

— Sergey Mell,

Non ancora. Gennaio e febbraio sono i periodi più intensi dell'anno per il mio lavoro normale. Ti farò sapere appena posso.

— Zack

Sì hai ragione. Il problema principale jasmine-gemè che non convoglia le specifiche attraverso babel. Consentitemi di pubblicare la soluzione più rapida al vostro problema e, successivamente, penserò alla possibile implementazione di un approccio simile in jasmine-gem.

L'idea principale è di convogliare le specifiche attraverso il webpack delle rotaie purché abbia tutte le configurazioni babel richieste.

Installa jasmine-corepoiché non utilizzeremo jasmine-gemquesta soluzione
```
yarn add jasmine-core -D
```

Ora crea due pacchetti webpack aggiuntivi. Uno è per Jasmine e conterrà solo Jasmine e il test runner

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

E il secondo per il codice dell'applicazione e le specifiche

// 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) }

Presta attenzione al tuo '../javascripts'e ai tuoi '../spec'percorsi. Per me sembrava '../../assets/javascripts'e '../../../spec'rispettoso.

Quindi aggiungere il Webpack ProvidePlugin per Jasmine (aggiungere questo codice a 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',
}))

Aggiungi la pagina di Jasmine Ranner alla tua applicazione

# 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>

Ora il tuo Jasmine dovrebbe funzionare /jasmine rotta

Questa risposta è preparata sulla base di questo post , tuttavia, ho ricontrollato le istruzioni su ruby 2.6.3, rails 6.0.2, ho aggiunto le opportune modifiche alle raccomandazioni e ho dimostrato che funziona.

Per favore, fatemi sapere se la mia risposta è stata utile per voi o se avete bisogno di ulteriori informazioni. Tuttavia, lavorerò su una soluzione che avrà successo con jasminegem o un'implementazione simile.

— Sergey Mell
fonte

Posso chiederti di provare qualcosa? Ho seguito queste istruzioni, il gelsomino sta funzionando, ma improvvisamente bootstrap.min.jssta lanciando un errore che sostanzialmente significa che jquerynon è stato caricato prima bootstrap. Tuttavia,] Non riesco a trovare ciò che in questo codice cambia l'ordine di caricamento di JS ... soprattutto perché il mio bootstrap viene caricato tramite CDN nel layout dell'applicazione dopo la javascript_pack_tag 'application'riga e il mio application.jsha già un require('jquery'). Se si dispone di questa configurazione in un ambiente locale, è possibile caricare bootstrap tramite CDN nel layout dell'applicazione e vedere se funziona?

— james

L'avevo capito. Il passaggio 3 stava sovrascrivendo il codice che ha aggiunto il plugin jquery. Questa risposta l'ha risolto: stackoverflow.com/questions/51447443/…

— james