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

9

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

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

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

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

Zack
источник
Привет Зак, @Dofs, у тебя была возможность взглянуть на мой ответ? Это достаточно для вас, или я должен помочь / расследовать глубже?
Сергей Мелл
Еще нет. Январь и февраль - самое загруженное время года для моей обычной работы. Я дам вам знать, как только смогу.
Зак

Ответы:

5

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

Основная идея заключается в том, чтобы передать спецификации через веб-пакет рельсов, если он имеет все необходимые конфигурации бабки.

  1. Установите, jasmine-coreтак как мы не будем использовать jasmine-gemв этом решении
    yarn add jasmine-core -D
  2. Теперь создайте два дополнительных пакета веб-пакетов. Один для Жасмин и будет содержать только Жасмин и тестовый бегун

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

  3. Затем добавьте веб-пакет 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',
    }))
  4. Добавить страницу жасмин раннер в ваше приложение

    # 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>
  5. Теперь ваш Жасмин должен работать по /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/…
Джеймс