Como configurar o Jasmine no Rails 6?

Como configuro o Jasmine no ambiente do Rails 6 (onde o Webpack substitui o pipeline de ativos para Javascript) para que eu possa testar os módulos Javascript que escrevi para o meu aplicativo?

Eu instalei a jasmim, executei rails generate jasmine:installe editei jasmine.ymlpara apontar para o local da minha fonte e especificações do Javascript.

O problema é que não consigo usar instruções de importação / exportação. (Por exemplo, a tentativa de carregar o meu primeiro módulo para resultados de teste neste erro no Chrome: Uncaught SyntaxError: Unexpected token 'export')

Pelo que sei, preciso configurar o Jasmine para usar o babel; mas não estou tendo sorte em encontrar instruções sobre como fazer isso no novo layout do Rails 6.

ruby-on-rails jasmine babeljs es6-modules ruby-on-rails-6 Zack
fonte

Hey Zack, @ DOF, você teve a chance de dar uma olhada na minha resposta? É o suficiente para você ou devo ajudar / investigar mais profundamente?

Sergey Mell

Ainda não. Janeiro e fevereiro são as épocas mais movimentadas do ano para o meu trabalho regular. Avisarei assim que puder.

Zack

Sim, você está certo. O principal problema jasmine-gemé que ele não canaliza as especificações através do babel. Deixe-me postar a solução mais rápida para o seu problema e, depois disso, pensarei na possível implementação de uma abordagem semelhante no jasmine-gem.

A idéia principal é canalizar as especificações através do webpack rails, desde que ele tenha todas as configurações necessárias de babel.

Instale, jasmine-corepois não usaremos jasmine-gemnesta solução
```
yarn add jasmine-core -D
```

Agora crie dois pacotes webpack adicionais. Um é para Jasmine e conterá apenas Jasmine e o executor de teste

// 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 o segundo para o código do aplicativo e as especificações

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

Preste atenção aos seus '../javascripts'e '../spec'caminhos. Para mim, parecia '../../assets/javascripts'e '../../../spec'respeitosamente.

Em seguida, adicione o Webpack ProvidePlugin for Jasmine (adicione este código 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',
}))

Adicione a página do Jasmine runner ao seu aplicativo

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

Agora seu Jasmine deve funcionar na /jasminerota

Esta resposta foi preparada com base neste post . No entanto, verifiquei novamente as instruções no ruby 2.6.3, rails 6.0.2, adicionei alterações apropriadas às recomendações e provamos que isso funciona.

Por favor, deixe-me saber se minha resposta foi útil para você ou se você precisa de mais informações. No entanto, vou trabalhar em uma solução que terá êxito com jasminegem ou implementação semelhante.

Sergey Mell
fonte

Posso pedir para você testar alguma coisa? Segui estas instruções, o jasmim está funcionando, mas de repente bootstrap.min.jsestá lançando um erro que basicamente significa que jquerynão está sendo carregado antes bootstrap. No entanto,] não consigo encontrar o que neste código altera a ordem de carregamento do JS ... especialmente porque meu bootstrap está sendo carregado via CDN no layout do aplicativo após a javascript_pack_tag 'application'linha e o meu application.jsjá possui um require('jquery'). Se você tiver essa configuração em um ambiente local, poderá carregar o bootstrap via CDN no layout do aplicativo e ver se funciona?

james

Eu descobri. A etapa 3 substituiu o código que adicionou o plug-in jquery. Esta resposta foi corrigida: stackoverflow.com/questions/51447443/…

james

Como configurar o Jasmine no Rails 6?

Respostas: