Jak skonfigurować Jasmine w Rails 6?

Jak skonfigurować Jasmine w środowisku Rails 6 (gdzie Webpack zastępuje potok zasobów dla Javascript), aby móc testować moduły JavaScript, które napisałem dla mojej aplikacji?

Zainstalowałem klejnot jaśminu, uruchomiłem rails generate jasmine:installi zredagowałem, jasmine.ymlaby wskazać lokalizację mojego źródła Javascript i specyfikacji.

Problem polega na tym, że nie mogę użyć instrukcji importu / eksportu. (Na przykład, starając się załadować mój pierwszy moduł do wyników badań w tym błędów w Chrome: Uncaught SyntaxError: Unexpected token 'export')

Z tego, co mogę powiedzieć, muszę skonfigurować Jasmine, aby używała babel; ale nie mam szczęścia znaleźć instrukcji, jak to zrobić w nowym układzie Rails 6.

— Zack
źródło

Hej Zack, @Dofs, czy miałeś okazję rzucić okiem na moją odpowiedź? Czy to ci wystarcza, czy powinienem pomóc / zbadać głębiej?

— Sergey Mell,

Jeszcze nie. Styczeń i luty to najbardziej pracowite pory roku dla mojej regularnej pracy. Dam ci znać jak najszybciej.

— Zack

Tak, masz rację. Głównym problemem jasmine-gemjest to, że nie przepuszcza specyfikacji przez babel. Pozwól, że opublikuję najszybsze rozwiązanie twojego problemu, a następnie pomyślę o możliwym wdrożeniu podobnego podejścia w jasmine-gem.

Główną ideą jest przepuszczanie specyfikacji przez pakiet WWW szyn, o ile ma on wszystkie wymagane konfiguracje babel.

Zainstaluj, jasmine-coreponieważ nie będziemy używać jasmine-gemw tym rozwiązaniu
```
yarn add jasmine-core -D
```

Teraz utwórz dwa dodatkowe pakiety webpacka. Jeden jest dla Jasmine i będzie zawierał tylko Jasmine i biegacza testowego

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

I drugi dla kodu aplikacji i specyfikacji

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

Zwróć uwagę na swoje '../javascripts'i '../spec'ścieżki. Dla mnie to wyglądało '../../assets/javascripts'i '../../../spec'szanowało.

Następnie dodaj Webpack ProvidePlugin dla Jasmine (dodaj ten kod do 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',
}))

Dodaj stronę Jasmine Runner do swojej aplikacji

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

Teraz twój Jasmine powinien działać na /jasminetrasie

Ta odpowiedź została przygotowana na podstawie tego postu , jednak ponownie sprawdziłem instrukcje w ruby 2.6.3, szynach 6.0.2, dodałem odpowiednie zmiany do rekomendacji i udowodniłem, że to działa.

Daj mi znać, jeśli moja odpowiedź była dla Ciebie pomocna lub potrzebujesz dodatkowych informacji. Będę jednak pracował nad rozwiązaniem, które odniesie sukces w przypadku jasmineklejnotów lub podobnej implementacji.

— Sergey Mell
źródło

Czy mogę prosić o przetestowanie czegoś? Postępowałem zgodnie z tymi instrukcjami, jaśmin działa, ale nagle bootstrap.min.jsgeneruje błąd, który w zasadzie oznacza, jqueryże nie był wcześniej ładowany bootstrap. Jednak] Nie mogę znaleźć, co w tym kodzie zmienia kolejność ładowania JS ... zwłaszcza, że mój bootstrap jest ładowany przez CDN w układzie aplikacji po javascript_pack_tag 'application'linii i mój application.jsjuż ma require('jquery'). Jeśli masz tę konfigurację w środowisku lokalnym, czy możesz załadować bootstrap za pośrednictwem CDN w układzie aplikacji i sprawdzić, czy działa?

— James

Rozgryzłem to. W kroku 3 zastąpiono kod, który dodał wtyczkę jquery. Ta odpowiedź to naprawiła: stackoverflow.com/questions/51447443/…

— James