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.

— 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