我們在前面的練習中大部分的實作都是可以直接沿用，唯一需要重新處理的是 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 的時候就可以通過第一項看到商品的測試，接下來只需要繼續完善後端的實作，就可以讓所有的測試都能夠順利通過。