Bagaimana cara mengkonfigurasi Jasmine in Rails 6?

Bagaimana cara mengkonfigurasi Jasmine di lingkungan Rails 6 (di mana Webpack mengganti pipeline aset untuk Javascript) sehingga saya dapat menguji modul Javascript yang saya tulis untuk aplikasi saya?

Saya memasang permata melati, berlari rails generate jasmine:install, dan diedit jasmine.ymluntuk menunjuk ke lokasi sumber dan spesifikasi Javascript saya.

Masalahnya adalah saya tidak bisa menggunakan pernyataan impor / ekspor. (Misalnya, mencoba untuk memuat modul pertama saya ke hasil tes dalam kesalahan ini di Chrome: Uncaught SyntaxError: Unexpected token 'export')

Dari apa yang bisa saya katakan, saya perlu mengatur Jasmine untuk menggunakan babel; tapi, saya tidak beruntung menemukan instruksi tentang cara melakukan ini di layout Rails 6 yang baru.

— Zack
sumber

Hei Zack, @Dofs, apakah Anda memiliki kesempatan untuk melihat jawaban saya? Apakah itu cukup untuk Anda atau haruskah saya bantu / selidiki lebih dalam?

— Sergey Mell

Belum. Januari dan Februari adalah waktu tersibuk dalam setahun untuk pekerjaan rutin saya. Saya akan memberi tahu Anda secepatnya.

— Zack

Ya kau benar. Masalah utama jasmine-gemadalah bahwa itu tidak menyalurkan spec melalui babel. Biarkan saya memposting solusi tercepat untuk masalah Anda dan setelah itu, saya akan memikirkan kemungkinan implementasi dari pendekatan serupa di jasmine-gem.

Gagasan utamanya adalah menyalurkan spesifikasi melalui webpack rel selama ia memiliki semua konfigurasi babel yang diperlukan.

Instal jasmine-corekarena kami tidak akan menggunakan jasmine-gemdalam solusi ini
```
yarn add jasmine-core -D
```

Sekarang buat dua paket webpack tambahan. Satu untuk Jasmine dan hanya akan berisi Jasmine dan pelari ujian

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

Dan yang kedua untuk kode aplikasi Anda dan spesifikasi

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

Perhatikan jalan '../javascripts'dan Anda '../spec'. Bagi saya itu terlihat seperti '../../assets/javascripts'dan dengan '../../../spec'hormat.

Kemudian tambahkan Webpack ProvidPlugin untuk Jasmine (tambahkan kode ini ke 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',
}))

Tambahkan halaman pelari Jasmine ke aplikasi Anda

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

Sekarang Jasmine Anda harus bekerja pada /jasminerute

Jawaban ini disiapkan berdasarkan posting ini , namun, saya telah memeriksa kembali instruksi pada ruby 2.6.3, rail 6.0.2, menambahkan perubahan yang sesuai pada rekomendasi dan membuktikan bahwa ini berhasil.

Tolong, beri tahu saya jika jawaban saya bermanfaat bagi Anda atau Anda memerlukan informasi tambahan. Namun, saya akan bekerja pada solusi yang akan berhasil dengan jasminegem atau implementasi serupa.

— Sergey Mell
sumber

Bisakah saya meminta Anda untuk menguji sesuatu? Saya mengikuti instruksi ini, melati berfungsi, tetapi tiba bootstrap.min.js- tiba ada kesalahan yang pada dasarnya berarti jquerytidak dimuat sebelumnya bootstrap. Namun,] Saya tidak dapat menemukan apa dalam kode ini yang mengubah urutan pemuatan JS ... terutama karena bootstrap saya dimuat melalui CDN dalam tata letak aplikasi setelah javascript_pack_tag 'application'baris dan saya application.jssudah punya require('jquery'). Jika Anda memiliki pengaturan ini di lingkungan lokal, dapatkah Anda memuat bootstrap melalui CDN dalam tata letak aplikasi, dan melihat apakah itu berfungsi?

— james

Saya menemukan jawabannya. Langkah 3 mengganti kode yang menambahkan plugin jquery. Jawaban ini diperbaiki: stackoverflow.com/questions/51447443/…

— james