Rails 6'da Jasmine nasıl yapılandırılır?


9

Uygulamam için yazdığım Javascript modüllerini test edebilmem için Jasmine'i Rails 6 ortamında (Webpack'in Javascript için varlık boru hattının yerini aldığı) nasıl yapılandırabilirim?

Yasemin gemini yükledim, koştum rails generate jasmine:installve jasmine.ymlJavascript kaynağımın ve spesifikasyonların yerini gösterecek şekilde düzenledim .

Sorun, alma / verme ifadeleri kullanamıyorum olmasıdır. (Örneğin, teşebbüs Chrome'da bu hataya test sonuçlarına ilk modülü yüklemek için: Uncaught SyntaxError: Unexpected token 'export')

Söyleyebileceğim kadarıyla, babil'i kullanmak için Yasemin'i ayarlamam gerekiyor; ancak, yeni Rails 6 düzeninde bunun nasıl yapılacağı konusunda herhangi bir şans bulamıyorum.


Hey Zack, @Dofs, cevabıma bir göz atma şansın oldu mu? Bu sizin için yeterli mi yoksa daha derinlemesine yardım etmeli mi?
Sergey Mell

Henüz değil. Ocak ve Şubat, düzenli işim için yılın en yoğun zamanları. En kısa sürede size haber vereceğim.
Zack

Yanıtlar:


5

Evet haklısın. Asıl sorun jasmine-gem, özellikleri babilden geçirmemesidir. Sorununuza en hızlı çözümü sunmama izin verin ve bundan sonra benzer bir yaklaşımın olası uygulanmasını düşüneceğim jasmine-gem.

Ana fikir, gerekli tüm babel konfigürasyonlarına sahip olduğu sürece özellikleri raylar web paketinden geçirmektir.

  1. Bu çözümde jasmine-corekullanmayacağımızdan yükleyinjasmine-gem
    yarn add jasmine-core -D
  2. Şimdi iki ek web paketi paketi oluşturun. Biri Yasemin içindir ve sadece Yasemin ve test koşucusunu içerecektir

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

    İkincisi, uygulama kodunuz ve spesifikasyonlarınız için

    // 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'Ve '../spec'yollarınıza dikkat edin . Benim için öyle '../../assets/javascripts've '../../../spec'saygılı görünüyordu .

  3. Ardından Jasmine için Webpack ProvidePlugin'i ekleyin (bu kodu şuraya ekleyin 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. Jasmine ranner sayfasını uygulamanıza ekleyin

    # 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. Şimdi Yasemin'in /jasminerota üzerinde çalışmalı

Bu yanıtın temelinde hazırlanan yazı , ancak, ben Ruby 2.6.3 talimatları tekrar kontrol 6.0.2 raylar, katma önerilerine uygun değişiklikleri ve bu eserlerin kanıtlamak ettik.

Lütfen, cevabımın sizin için yararlı olup olmadığını veya bazı ek bilgilere ihtiyacınız olup olmadığını bize bildirin. Ancak, jasminemücevher veya benzeri bir uygulama ile başarılı olacak bir çözüm üzerinde çalışacağım .


Sizden bir şeyi test etmenizi isteyebilir miyim? Bu talimatları izledim, yasemin çalışıyor, ama aniden bootstrap.min.jsdaha jqueryönce yüklenmediği anlamına gelen bir hata atıyor bootstrap. Ancak,] Bu kodda JS yükleme sırasını değiştirenleri bulamıyorum ... özellikle benim bootstrap javascript_pack_tag 'application'satırdan sonra uygulama düzeninde CDN üzerinden yükleniyor ve application.jszaten bir var require('jquery'). Yerel bir ortamda bu kurulum varsa, uygulama düzeninde CDN üzerinden önyükleme yükleyebilir ve çalışıp çalışmadığını görebilirsiniz?
james

Bunu anladım. Adım 3, jquery eklentisini ekleyen kodu geçersiz kılıyordu. Bu cevap düzeltildi: stackoverflow.com/questions/51447443/…
james
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.