Как настроить Жасмин в Rails 6?

Как настроить Jasmine в среде Rails 6 (где Webpack заменяет конвейер ресурсов для Javascript), чтобы я мог протестировать модули Javascript, которые я написал для своего приложения?

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

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

Из того, что я могу сказать, мне нужно настроить Жасмин на использование babel; но мне не повезло найти инструкции о том, как это сделать, в новом макете Rails 6.

— Zack
источник

Привет Зак, @Dofs, у тебя была возможность взглянуть на мой ответ? Это достаточно для вас, или я должен помочь / расследовать глубже?

— Сергей Мелл

Еще нет. Январь и февраль - самое загруженное время года для моей обычной работы. Я дам вам знать, как только смогу.

— Зак

Да, ты прав. Основная проблемаjasmine-gem том, что он не передает спецификации через babel. Позвольте мне опубликовать самое быстрое решение вашей проблемы, и после этого я подумаю о возможной реализации аналогичного подхода в 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 для Jasmine (добавьте этот код в 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',
}))

Добавить страницу жасмин раннер в ваше приложение

# 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маршруту

Этот ответ подготовлен на основе этого поста , однако я перепроверил инструкции на ruby 2.6.3, rails 6.0.2, добавил соответствующие изменения в рекомендации и докажу, что это работает.

Пожалуйста, дайте мне знать, если мой ответ был полезен для вас, или вам нужна дополнительная информация. Тем не менее, я собираюсь поработать над решением, которое преуспеет с jasmineгемом или аналогичной реализацией.

— Сергей Мелл
источник

Могу ли я попросить вас проверить что-нибудь? Я следовал этим инструкциям, жасмин работает, но внезапно bootstrap.min.jsвыдает ошибку, которая в основном означает, jqueryчто не загружалась раньше bootstrap. Тем не менее,] я не могу найти то, что в этом коде меняет порядок загрузки JS ... тем более, что мой загрузчик загружается через CDN в макете приложения после javascript_pack_tag 'application'строки, а у меня application.jsуже есть require('jquery'). Если у вас есть такая настройка в локальной среде, можете ли вы загрузить загрузчик через CDN в макете приложения и посмотреть, работает ли он?

— Джеймс

Я понял. Шаг 3 переопределял код, который добавил плагин jquery. Этот ответ исправил это: stackoverflow.com/questions/51447443/…

— Джеймс