Як налаштувати Жасмін в Rails 6?

Як налаштувати Jasmine в середовищі Rails 6 (де Webpack замінює конвеєр активів на Javascript), щоб я міг перевірити модулі Javascript, написані для свого додатка?

Я встановив дорогоцінний камінь жасмину, побіг rails generate jasmine:installта відредагував, jasmine.ymlщоб вказати на розташування мого джерела та технічні характеристики Javascript.

Проблема полягає в тому, що я не можу використовувати заяви про імпорт / експорт. (Наприклад, при спробі завантажити мій перший модуль для результатів тестування в цих помилках в Chrome: Uncaught SyntaxError: Unexpected token 'export')

З того, що я можу сказати, мені потрібно налаштувати Жасмін, щоб використовувати вавилон; але мені не пощастило знайти інструкції, як це зробити в новому макеті Rails 6.

— Зак
джерело

Ей, Зак, @Dofs, ти мав шанс поглянути на мою відповідь? Вам цього достатньо чи я повинен допомогти / розслідувати глибше?

— Сергій Мелл

Ще ні. Січень і лютий - найнаситніша пора року для моєї регулярної роботи. Я повідомлю вас, як тільки зможу.

— Зак

Так, ви праві. Основна проблема jasmine-gemполягає в тому, що він не пропускає спекуляцію через вавило. Дозвольте мені опублікувати якнайшвидше рішення вашої проблеми, і після цього я подумаю про можливу реалізацію подібного підходу вjasmine-gem .

Основна ідея полягає в тому, щоб прокладати характеристики через веб-пакет рейок до тих пір, поки він має всі необхідні конфігурації штабеля.

Встановити, jasmine-coreоскільки ми не будемо використовувати jasmine-gemв цьому рішенні
```
yarn add jasmine-core -D
```

Тепер створіть два додаткових пакети веб-упаковки. Один призначений для Жасмін і буде містити тільки Жасмін та тестувальний бігун

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

А другий - для вашого коду програми та специфікацій

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

Зверніть увагу на свої '../javascripts'та '../spec'шляхи. Для мене це виглядало так '../../assets/javascripts'і '../../../spec'поважно.

Потім додайте веб-пакет ProvidePlugin для Жасмін (додайте цей код до 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',
}))

Додайте в програму сторінку Jasmine ranner

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

Тепер ваша Жасмін повинна працювати на /jasmineмаршруті

Ця відповідь підготовлена на основі цього допису , проте я переглянув інструкції щодо рубіну 2.6.3, рейки 6.0.2, додав відповідні зміни до рекомендацій та довів, що це працює.

Будь ласка, дайте мені знати, чи була моя відповідь корисною для вас чи вам потрібна додаткова інформація. Однак я буду працювати над рішенням, яке вдасться досягти з jasmineдорогоцінним каменем або подібною реалізацією.

— Сергій Мелл
джерело

Чи можу я попросити вас протестувати щось? Я дотримувався цих інструкцій, жасмін працює, але раптом bootstrap.min.jsкидає помилку, яка в основному означає jquery, що не завантажується раніше bootstrap. Однак,] я не можу знайти те, що в цьому коді змінює порядок завантаження JS ... тим більше, що мій завантажувальний файл завантажується через CDN в макеті програми після javascript_pack_tag 'application'рядка, і у мене application.jsвже є a require('jquery'). Якщо у вас є налаштування в локальному середовищі, чи можете ви завантажувати завантажувальний інструмент через CDN в макет програми, і подивитися, чи працює він?

— Джеймс

Я зрозумів це. Крок 3 змінив код, який додав плагін jquery. Ця відповідь виправила: stackoverflow.com/questions/51447443/…

— Джеймс