蒼時弦也
蒼時弦也
資深軟體工程師
發表於

匯入前端實作 - Cucumber 的文件測試法

這篇文章是 Cucumber 的文件測試法 系列的一部分。

我們在前面的練習中大部分的實作都是可以直接沿用,唯一需要重新處理的是 Cucumber 的步驟定義,他會受到使用的語言、框架需要重新撰寫,接下來我們會先將前端的實作搬移到 Rails 中讓專案能夠運作起來。

搬移前端實作

我們只需要把 Vite 專案中的 src/ 目錄下除了 main.ts 所有檔案複製到 Rails 專案的 app/javascript 目錄,然後針對 app/javascript/entrypoints/application.ts 進行修改。

1import { createApp } from 'vue'
2import { createPinia } from 'pinia'
3import App from '@/App.vue'
4
5const pinia = createPinia()
6const app = createApp(App)
7
8app.use(pinia)
9app.mount('#app')

實際上也就是原本的 src/main.ts 檔案的內容,並且將 import App from './App.vue' 修改為 import from '@/App.vue' 來配合新的檔案路徑相對關係。

另一方面,因為 ViteRuby 使用的模式預設沒有支援 import.meta 而且在統一由 Rails 作為 Web Server 的狀況下,我們基本上也不需要指定 API 伺服器的位置,因此將 app/javascript/api.ts 的內容稍做調整。

1const API_SERVER = ''
2
3// ...

因為我們還沒有安裝 Pinia 到專案中,因此還需要額外運行 yarn add [email protected] 將依賴的套件加入到裡面,這時候運行 ./bin/dev 會發現有一部分畫面無法顯示,這是因為後端的 API 還沒有被加入進來。

定義路由

這個階段的目標是確認前端順利被加入到專案中,因此我們先對 Rails 把所需的 API 路由定義下來,並且修改 config/routes.rb 將原本實作的 API 路由加入到專案裡面。

 1# ...
 2Rails.application.routes.draw do
 3  # ...
 4
 5  namespace :api do
 6    resources :products, only: %i[index]
 7    resource :cart, only: %i[show create]
 8    resource :checkout, only: %i[create]
 9  end
10end

並且針對這幾個路由加入對應的 Controller 並且死回傳內容。

 1# app/controllers/api/products_controller.rb
 2module Api
 3  class ProductsController < ActionController::API
 4    def index
 5      render json: [
 6        { id: 1, name: 'Ruby 秘笈', price: 100 },
 7        { id: 2, name: 'RSpec 秘笈', price: 150 }
 8      ]
 9    end
10  end
11end
 1# app/controllers/api/carts_controller.rb
 2module Api
 3  class CartsController < ActionController::API
 4    def show
 5      render json: []
 6    end
 7
 8    def create
 9      render json: []
10    end
11  end
12end
1# app/controllers/api/checkouts_controller.rb
2module Api
3  class CheckoutsController < ActionController::API
4    def create
5      render json: { text: '結帳成功' }
6    end
7  end
8end

這樣一來我們理論上要能夠通過一部分的測試,先將原本 Vite 專案下 features/products.feature 的內容放到 Rails 專案下,打開 features/step_definitons/common.rb 先將用於建立假資料的步驟定義進去,讓測試可以執行到場景的部分。

1# ...
2
3Given('這裡有一些商品') do |table|
4end
5
6Then('可以看見商品 {string}') do |name|
7  expect(page).to have_text(name)
8end

這樣一來,我們運行 bundle exec cucumber 的時候就可以通過第一項看到商品的測試,接下來只需要繼續完善後端的實作,就可以讓所有的測試都能夠順利通過。