Wie konfiguriere ich Jasmine in Rails 6?

Wie konfiguriere ich Jasmine in der Rails 6-Umgebung (in der Webpack die Asset-Pipeline für Javascript ersetzt), damit ich die Javascript-Module testen kann, die ich für meine App geschrieben habe?

Ich habe den Jasmin-Edelstein installiert rails generate jasmine:install, ausgeführt und bearbeitet jasmine.yml, um auf den Speicherort meiner Javascript-Quelle und meiner Spezifikationen zu verweisen.

Das Problem ist, dass ich keine Import / Export-Anweisungen verwenden kann. (Zum Beispiel versuchen , meinen ersten Modul Testergebnisse in diesem Fehler in Chrome zu laden: Uncaught SyntaxError: Unexpected token 'export')

Nach allem, was ich sagen kann, muss ich Jasmine für die Verwendung von Babel einrichten. Ich habe jedoch kein Glück, Anweisungen dazu im neuen Rails 6-Layout zu finden.

— Zack
quelle

Hey Zack, @Dofs, hattest du die Gelegenheit, dir meine Antwort anzusehen? Ist es genug für dich oder sollte ich helfen / tiefer untersuchen?

— Sergey Mell

Noch nicht. Januar und Februar sind die geschäftigsten Zeiten des Jahres für meinen regulären Job. Ich werde es dich so schnell wie möglich wissen lassen.

— Zack

Ja, du hast Recht. Das Hauptproblem von jasmine-gemist, dass es die Spezifikation nicht durch babel leitet. Lassen Sie mich die schnellste Lösung für Ihr Problem veröffentlichen, und danach werde ich über die mögliche Implementierung eines ähnlichen Ansatzes in nachdenken jasmine-gem.

Die Hauptidee besteht darin, die Spezifikationen durch das Rails-Webpack zu leiten, solange alle erforderlichen Babel-Konfigurationen vorhanden sind.

Installieren Sie, jasmine-coreda wir jasmine-gemdiese Lösung nicht verwenden werden
```
yarn add jasmine-core -D
```

Erstellen Sie nun zwei zusätzliche Webpack-Pakete. Eine ist für Jasmine und enthält nur Jasmine und den Testläufer

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

Und die zweite für Ihren Anwendungscode und die Spezifikationen

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

Achten Sie auf Ihre '../javascripts'und '../spec'Pfade. Für mich sah es so aus '../../assets/javascripts'und '../../../spec'respektvoll.

Fügen Sie dann das Webpack ProvidePlugin für Jasmine hinzu (fügen Sie diesen Code hinzu 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',
}))

Fügen Sie Ihrer Anwendung die Jasmine-Rannerseite hinzu

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

Jetzt sollte dein Jasmin daran arbeiten /jasmine unterwegs arbeiten

Diese Antwort wird auf dieser Grundlage erstellt Beitrags erstellt . Ich habe jedoch die Anweisungen zu Ruby 2.6.3, Rails 6.0.2, erneut überprüft, entsprechende Änderungen an den Empfehlungen hinzugefügt und bewiesen, dass dies funktioniert.

Bitte lassen Sie mich wissen, ob meine Antwort für Sie hilfreich war oder Sie zusätzliche Informationen benötigen. Ich werde jedoch an einer Lösung arbeiten, die mit jasminegem oder einer ähnlichen Implementierung erfolgreich sein wird.

— Sergey Mell
quelle

Kann ich Sie bitten, etwas zu testen? Ich habe diese Anweisungen befolgt, Jasmin funktioniert, bootstrap.min.jswirft aber plötzlich einen Fehler aus, der im Grunde bedeutet, dass jqueryer vorher nicht geladen wird bootstrap. ] Ich kann jedoch nicht finden, was in diesem Code die JS-Ladereihenfolge ändert ... zumal mein Bootstrap über CDN im Anwendungslayout nach der javascript_pack_tag 'application'Zeile geladen wird und mein application.jsbereits eine hat require('jquery'). Wenn Sie dieses Setup in einer lokalen Umgebung haben, können Sie Bootstrap über CDN im Anwendungslayout laden und prüfen, ob es funktioniert?

— James

Ich habe es herausgefunden. Schritt 3 überschrieb den Code, der das jquery-Plugin hinzufügte. Diese Antwort hat das Problem

— James