Rails 5 Test Prescriptions 第9章 Testing-JavaScript: Integration Testing，❌挂一个问题webpacker::helper

• 使用Capybara进行JS的集成测试
• 谈论驱动
• 让测试通过
• Webpack in Development Mode

---

Js设计 是用户在网页上有好的体验的重要因素。 尽管如此，许多网页不测试JS。

部分原因是js难以测试。交互和逻辑是依靠用户在网页上的交互动作，这就难了。

Js框架也不支持简单的单元测试。同时工具变化也非常快。b本章使用的工具看起来有点老，如果你读的时候没有被彻底的antiquated废弃。

 

本章谈使用集成测试工具 Capybara来测试js，从客户端代码。

下章谈论单元测试JS，用JS工具，和Webpack支持（Rails5.1新增）

---

 

一个2个小时解决的教材bug：

 

创建project 时输入tasks不能跳转到projects页面

这个问题就应当是没有满足验证，所以不能存入数据库。使用对象.reload.属性 提示不存在对象。

使用valid?和erroes.message方法。 提示project.tasks 未通过验证。

在Task.new代码上哪块出现了问题了？ 之前没有问题，是否是由于增加了task属性，所以需要更新之前的自动化测试内容？？

在rails c控制器模拟新增和保存2个数据表的数据，发现了问题：

教材是先新增一个project,然后新增一组task,然后关联2方，最后save。这是❌的。

错误提示 [tasks is invalid]，无法写入数据库

应该是先保存一下project，然后可以新建task，然后使用project.task << [task..] 这样会自动的关联并保存task,和更新project。✌️

 

另外⚠️has_many的方法collection= (objects)是删除原先的，然后增加objects。草，教材也不审核。！！ 

  

使用factorybot, 桩件，因为不和数据库交互，所以可能就不能排除某些bug. 

集成测试则可以发现问题。 

当集成测试发现问题，需要排查单元测试

 

1. 是否同步更新了测试
2. 找不到的化，原生数据测试一下。 

 

 app/controllers/projects_controller

  def create

    @workflow = CreatesProject.new(

      name:params[:project][:name],

      task_string: params[:project][:tasks]

    )

    @workflow.create

    if @workflow.project.errors.empty?    #如过没有❌，即[]🈳️数组，则。。。

      redirect_to projects_path

    else

      @project = @workflow.project

      render :new

    end

  end

 

 

---

Integration-Testing JavaScript with Capybara 

 

在客户端使用JS来互动，省去了和服务器端的更新。方法有多种

 

 

目的：用上下按钮来调整浏览器DOM来改变排列顺序, 并发送一个更新请求到服务器端，来更新这个变化。

测试两件事：

 

1. 客户的交互改变的是DOM
2. 这个变化被发送到服务器，精准。 

 

把之前的测试分成两块，add the task , handles the reordering.

主要是第二块，通过使用css:nth-child(n)来定位 ,比如原先是第3行，点击👆，数据移动到第2行.(up改变的是DOM，而不是project_order ?)

⚠️ 使用:js来告诉程序用了JavaScripte。

  it "can reorder a task", :js do

    visit(project_path(project))

    within("#task_3") do

      click_on("up")

      expect(page).to have_selector("tbody:nth_child(2) .name", text:"Take Notes")

    end

    within('#task_2') do

      expect(page).to have_selector(".name", text:"Take Notes")

    end

  end

 

把现存的up/down链接的功能（发生请求到服务器端）卸下来。然后，让这两个链接 DOM classes和属性，这样你将使用JS作为结果。

 

---

 再谈驱动

要理解Capybara是在做什么和你需要去做什么来让JS 集成测试管用，你需要先了解驱动的知识。

Driver是Caypbara的一部分，管理一个网页，网页包含了一系列的DOM原素。

Capybara query language interacts with the driver,告诉驱动去点击按钮或填写表单，或者仅仅询问driver来返回DOM元素来匹配一个selector和其他

 

Capybara的默认驱动是Rack::Test

RSpec.configure do |config|

  config.before(:each, type: :system) do

    driven_by :rack_test

  end

end

但是Rack::Test不支持JavaScript解释器。所以在输出中会忽略任何JS。一旦要使用JS，驱动就不管用了。

 

Capybara可以用其他驱动来和js解释权互动:如Selenium, capybara-webkit,Poltergeist.

Rails5.1已经自带gem 'selenium-webdriver' ，这个应用的背景是ChromeDriver.

安装ChromDriver,去应用商店安装，或者使用homebrew: brew install chromedriver 

 然后在合适位置：

  config.before(:each, type: :system, js: true) do

    driven_by :selenium_chrome_headless

  end

 

现在，你需要告诉Capybara去使用JavaScript driver了。在RSpec，你能设置JS driver作为单独的测试。用:js metadata 

Prescription:

用Capybara的JS 集成测能力 ，尽量要少。 最好在每个层测试，JS测试尽量独立。

 

 

---

 

Making the Test Pass 

 在本章你将建立JS和没有用到单元测试。下一章你将使用Js单元测试工具和学习测试驱动的JS功能 test-drive JavaScript features

 

• Jquery不再是默认
• Webpage 集成了，通过gem Webpacker 

 

Webpackke 是一个可选的替代：全面兼容Rails asset pipeline.

用于写Javascript， C o f fe e script， Typescript,和其他语言。并建立它们进入JS文件（能够传到浏览器）

 

它的优点是灵活，全面兼容了JS，让JS，css工具建立到Rails project中。

you can continue to use for images, fonts, sounds, and other assets.

 

You can even have some JavaScript code managed by the asset pipeline, and other code processed via Webpack.

All of this is managed by Yarn, which is enabled by default.

 

Rails使用 Yarn 来管理Javascript package。

 

 

https://yarnpkg.com/zh-Hans/ 

Rails 5.1 allows managing JavaScript dependencies from NPM via Yarn.

 

This will make it easy to use libraries like React, VueJS or any other library from NPM world.

The Yarn support is integrated with the asset pipeline so that all dependencies will work seamlessly with the Rails 5.1 app.

 

安装Webpacker，使用gem,https://github.com/rails/webpacker

 create  config/webpacker.yml

 

Copying webpack core config

      create  config/webpack  #环境设置

      create  config/webpack/development.js

      create  config/webpack/environment.js

      create  config/webpack/production.js

      create  config/webpack/test.js

Copying .postcssrc.yml to app root directory

      create  .postcssrc.yml

Copying .babelrc to app root directory

      create  .babelrc

Creating JavaScript app source directory

      create  app/javascript #用于开发

      create  app/javascript/packs/application.js

       apply  /Users/chentianwei/.rvm/gems/ruby-2.5.0/gems/webpacker-3.5.3/lib/install/binstubs.rb

  Copying binstubs

       exist    bin

      create    bin/webpack

      create    bin/webpack-dev-server

Adding configurations

      append  .gitignore

Installing all JavaScript dependencies

         run  yarn add @rails/webpacker@3.5 --tilde from "."

yarn add v1.5.1

 

 

使用jQuery：

 

 yarn add jquery 

 然后就可以在package.json文件中看到独立安装的list,这和使用bundler's Gemfile 一样。

yarn.lock 则等同于Gemfile.lock , 这个文件很大，几千行代码。。。

{

  "name": "gatherer",

  "private": true,

  "dependencies": {

    "@rails/webpacker": "3.5",

    "jquery": "^3.3.1"

  },

  "devDependencies": {

    "webpack-dev-server": "2.11.2"

  }

}

然后在config/webpack/environment.js中注册jQuery，让其他模块可以使用它的方法。

在第二行：添加下面的代码。 

const webpack = require("webpack")

environment.plugins.append(

  "Provide",

  new webpack.ProvidePlugin({

    $: "jquery",

    jQuery: "jquery",

    jquery: "jquery",

    "window.jQuery": "jquery"

  })

)

现在就可以使用javascript代码在javascript/packs目录中的一个文件里了。

建立projects.js，然后复制了现成的代码。

 

最后，把刚刚建立的文件projects.js打包📦included进需要用到的视图文件中去。

You can then link the JavaScript pack in Rails views using the javascript_pack_tag helper. 

相似的教程：https://www.cnblogs.com/chentianwei/p/8819091.html 

本文是放到views/layouts/application.html.erb中的<head>标签中。

<%= javascript_pack_tag "projects"%> 所有视图文件都可以用了。

 

 系统测试都不能通过，提示：

 

 

Failure/Error: <%= javascript_pack_tag "projects" %>

     ActionView::Template::Error:

       undefined method `javascript_pack_tag' for #<#<Class:0x00007f8c7b4b4e98>:0x00007f8c7b4be448>

       Did you mean?      javascript_path

                         javascript_tag

猜测是安装jQuery的问题。没有正确安装。 网上没有找到合适的答案。

---

 

Webpack in Developer Mode 

  webpack-dev-server在Rails development server内默认运行。但你可以把它们分开：

 好处：

1. 分开跑允许compile发生在当文件改变时而不是当你点击页面时，你会发现更快。
2.  能够给你live reload while editing.

安装 gem "foreman"

在Procfile文件中设置：

rails: bundle exec rails server

webpack: bin/webpack-dev-server 

在这个文件，标记了每个进程：a rails server执行，bundle exec rails server

a web pack server运行bin/webpack-dev-server

在命令行输入：

foreman start，两个processes 都会跑起来。默认的Rails server改变为localhost:5000 

 

 

---

总结：

从外部的客户端来测试Javascript. 作者建议节俭的使用这些驱动。