5-11敏捷开发rails的章节： Rspec（使用方法） ，Slim(使用操作简介)

Rspec: test

Slim :可以取代ERB的模版语言。(简单了解了以下，方便写代码，但我觉得不方便读。还是用原生的html)

Webpack管理css: 不再使用app/assets/stylesheets。

以上都是可选的。

总文档连接：

RSpec.info/documentation/

---

Rspec  (点击查看文档)

an alternative to MiniTest。

开发者喜欢Rspec,因为测试读起来像英语： the test reads like English.

        RSpec.describe Cart ​do​

​

​   let(​:cart​)     { Cart.create }

​   let(​:book_one​) { products(​:ruby​) }

​   let(​:book_two​) { products(​:two​) }

​

​   before ​do​

​     cart.add_product(book_one).save!

​     cart.add_product(book_two).save!

​   ​end​

​

​   it ​"can have multiple products added"​ ​do​

​     expect(cart.line_items.size).to eq(2)

​   ​end​

​

​   it ​"calculates the total price of all products"​ ​do​

​     expect(cart.total_price).to eq(book_one.price + book_two.price)

​   ​end​

​ ​end​ 

---

推荐的测试书： Effective Testing with RSpec 3. (有详解。)

以下只是基本用法，和如何配置。

1. 添加gem。

group :development, :test do

gem 'rspec-rails'

end

2 .安装rspec

>rails generate rspec:install

create .rspec

create spec

create spec/spec_helper.rb

create spec/rails_helper.rb

3. 运行代码，查看是否安装成功

> bin/rails spec   #No examples found.

4. 还有一行代码：bundle exec rspec  在bin文件夹中加入spec文件

如果只运行子集subset：

如果是model：  bundle exec rspec spec/models，

如果是control中的AccountController

bundle exec rspec spec/controllers/accounts_controller_spec.rb

⚠️：可以使用gem 'spring-commands-rspec'提高应用的启动速度。改为执行：

bundle exec spring binstub rspec

5. Generator.（详细文档： list of all generators.）

安装后，如果使用rails generate model 和 rails generate controller
 RSpec将生成 spec文件代替Test::Unit test文件。

也可以独立使用RSpec，例如运行rails generate rspec:model会生成一个model spec 。

bin/rails generate spec:model Cart

​  create  spec/models/cart_spec.rb

开始测试：

1. route

如果是从程序开始便使用了RSpec.那么固件在spec/fixtures中。本例子是在中途使用的，所以需要在spec/rails_helper.rb 中配置导向路径：

把config.fixture_path = "#{::Rails.root}/spec/fixtures" 改成

config.fixture_path = "#{::Rails.root}/test/fixtures"

2. cart_spec.rb

subject, let都是声明变量，但subject是核心。let是辅助。

test本身和标准的Rails test不一样：

1. 不叫test,叫examples.
2. 惯例是每个例子只做一次断言assertion。
3. Assertions本身也不一样，expect(actual_value).to eq(expected_value) ,可读性强
4. 逻辑强，先要使用使用before do...end把产品加入购物车，然后再断言it "text" do...end。
5. 如果相同的数据，进行不同目的的测试。需要用contest "text" do .. end
6. 和标准Rails test的区别：describe , contest ,it 之后的文本描述增加了可读性
7. rails spec SPEC_OPTS="--format=doc"  显示测试的结构。在.rspec文件内加上  ”--format documentation“

RSpec.describe Cart, type: :model do

  fixtures :products

  subject(:cart) {Cart.new} #声明了变量cart,之后会用到。

  let(:book_one) { products(:ruby)}   #let 声明了其他变量

  let(:book_two) { products(:two)}

  describe "#add_product" do

    context "adding unique products" do

      before do

        cart.add_product(book_one).save!

        cart.add_product(book_two).save!

      end

      it "has two line items" do

        expect(cart.line_items.size).to eq(2)

      end

      it "has a total price of the two items" do

        expect(cart.total_price).to eq(book_one.price + book_two.price)

      end

    end

    context "adding duplicate products" do

      before do

        cart.add_product(book_one).save!

        cart.add_product(book_one).save!

      end

      it "has one line item" do

        expect(cart.line_items.size).to eq(1)

      end

      it "has a line item with a quantity of 2" do

        expect(cart.line_items.first.quantity).to eq(2)

      end

      it "has a total price of twice the product's price" do

        expect(cart.total_price).to eq(book_one.price * 2)

      end

    end

  end  #RSpec.describe的块。

  #subject和let看起来做了一样的工作，区别是subject对象是测试的焦点，let是辅助

  # pending "add some examples to (or delete) #{__FILE__}"

end

---

Serving CSS via Webpack

5.1后Rails全面支持Webpack.所以现在可以配置Webpack去服务CSS.

点击：文档代码

第一步：移动文件scss。

1. 1.移动application.scss到javascript/packs
2. 2.新建目录packs/css
3. 3. 把其他scss移动到css中

第二步：在application.scss中，import所有scss文件。例子：@import "css/adim.scss";

原因：

//= require_tree. 和//= require_self。这两行代码的作用是告诉Sprockets包含所有scss文件。但是Webpack不支持这两条directives,所有需要手动添加scss文件到application.scss中。CSS文件实际是Sass文件，Sass文件可以使用@import载入外部文件。所以，我们要一条条的载入外部scss文件。

第三步： 改变application layout。然后从新启动程序。

把stylesheet_link_tag改为stylesheet_pack_tag

第四步，安装cssnext。yarn add postcss-cssnext

解释：cssnext.(点击查看)一个css插件，可以帮助使用最新的css syntax,通过转化让浏览器支持最新功能。