昨天我們透過 OpenAPI 3.0 與 JSON Schema 確立了前後端通訊的合約規格。然而在敏捷開發（Agile）的日常中，合約訂好之後，前端工程師往往會面臨一個尷尬的空窗期：

「後端工程師還在刻資料庫與商業邏輯，前端切版與狀態邏輯到底要拿什麼資料來測？」

很多開發者為了趕進度，會在前端手寫像 "name": "test1", "price": 100, "email": "a@a.com" 這樣敷衍的假資料。但這類資料不僅缺乏真實感，更容易掩蓋「長文字折行溢出（Text Overflow）」、「極端數值破版」或「各類狀態切換」的 UI 缺陷。

今天我們就來示範：如何讓 ChatGPT 扮演資深 QA 與資料產生器，只需依據 API Schema，就能在幾秒內產出極具真實感、涵蓋各種邊界情境的高品質 Mock Data！

一、Mock Data 生成專用提示詞模板（Mocking Prompting）

想要讓 AI 產出的假資料能夠直接拿來做 UI 壓力測試，不要只說「給我 5 筆假資料」，請使用以下包含邊界覆蓋的提示詞結構：

【Mock Data 生成提示詞範本】
請扮演前端測試與資料模擬專家。請依據以下 API 規格或 DTO 結構產出測試用的 JSON Mock Data：

[貼上昨日產出的 OpenAPI Schema 或 Java DTO]

生成要求如下：

1. 數量與結構：請產出 5 筆資料的 JSON Array，欄位型別與命名需嚴格符合規格。
2. 真實感細節：姓名需具備真實語意（中文/英文皆可）、日期需符合 ISO-8601 格式、電話需符合目標地區格式。
3. 邊界案例覆蓋（Boundary & Edge Cases）：
   • 第 1 筆：常規標準資料。
   • 第 2 筆：極短字串與最小數值（邊界下限）。
   • 第 3 筆：極長文字字串（測試前端 CSS 文字溢出與省略號 text-overflow: ellipsis）。
   • 第 4 筆：選填欄位皆為 null 或未定義（測試前端可選鏈 ?. 防呆）。
   • 第 5 筆：特殊符號與 XSS 探針字串（如 ,  ，測試前端轉義安全）。

二、實戰案例：電商商品列表 Mock Data 產出

假設我們的 API 端點為 GET /api/v1/products，回傳商品列表包含 productId, title, description, price, stock, tags, imageUrl, discountRate。

將上述提示詞送給 AI 後，生成的 JSON 資料兼具語意與邊界破壞測試能力：

[AI 生成的高質量 Mock Data JSON]
[
  {
    "productId": "prod-001",
    "title": "人體工學透氣網眼辦公椅",
    "description": "支援多向腰靠調節，長時間久坐不悶熱，專為居家辦公打造。",
    "price": 4500,
    "stock": 120,
    "tags": ["辦公家具", "人體工學"],
    "imageUrl": "https://picsum.photos/id/101/400/300",
    "discountRate": 0.85
  },
  {
    "productId": "prod-002",
    "title": "筆",
    "description": "短",
    "price": 1,
    "stock": 0,
    "tags": [],
    "imageUrl": "https://picsum.photos/id/102/400/300",
    "discountRate": null
  },
  {
    "productId": "prod-003",
    "title": "【旗艦款限量發售】超級極致專業人體工學電競可調升降電競桌附帶雙螢幕懸臂與智慧收納理線系統超長超長品名測試",
    "description": "這是一段非常冗長、超過兩百字且沒有適當換行的商品描述測試文字，用來測試前端卡片元件在面對超長文本時，是否會發生版面崩潰、高度破版，或者是否能正確觸發多行省略截斷（Line Clamp）效果。",
    "price": 999999,
    "stock": 9999,
    "tags": ["電競", "升降桌", "旗艦款", "周邊配件", "熱銷排行榜", "限時下殺"],
    "imageUrl": "https://picsum.photos/id/103/400/300",
    "discountRate": 0.5
  },
  {
    "productId": "prod-004",
    "title": "純棉基礎短袖 T-Shirt",
    "description": null,
    "price": 390,
    "stock": 45,
    "tags": ["服飾", "休閒"],
    "imageUrl": null,
    "discountRate": null
  },
  {
    "productId": "prod-005",
    "title": "<script>alert('XSS')</script> 測試商品",
    "description": "包含特殊字元 & < > \" ' 與 SQL 探針 '--",
    "price": 880,
    "stock": 10,
    "tags": ["<Security>"],
    "imageUrl": "https://picsum.photos/id/105/400/300",
    "discountRate": 0.9
  }
]

三、前端工程師的實務整合技巧

拿到了 AI 產出的這份 Mock Data，前端工程師可以透過以下兩種方式無痛開工：

1. 輕量方案：搭配 json-server 本地零成本跑 API

不安裝後端，只要在本機利用 Node.js 執行：
npx json-server --watch mock.json --port 3001
幾秒內就能獲得一個完整的 RESTful API（支援 GET、POST、PATCH、分頁與過濾）！

2. 前端專案攔截：MSW (Mock Service Worker)

在 Vue 或 React 專案中整合 MSW，直接攔截網路層請求並回傳這份 Mock Data：

[MSW 設定範例]
import { http, HttpResponse } from 'msw';
import mockProducts from './mockProducts.json';

export const handlers = [
  http.get('/api/v1/products', () => {
    return HttpResponse.json(mockProducts);
  }),
];
這樣在完全不更動 Axios / Fetch 端點路徑的前提下，前端就能在真實的網路環境下完整進行 UI 與狀態測試。

四、AI Mock Data 帶給團隊的實質好處

1. 提前發現 UI 破版盲點：
   在第 3 筆極長標題與描述的測試下，前端工程師能立刻發現 CSS 是否缺少 overflow: hidden 或 text-overflow: ellipsis，避免上線後才被使用者回報破版。
2. 提早驗證空值與 Null-safe：
   第 4 筆資料的 description 與 imageUrl 為 null，能有效測試畫面是否會噴出 TypeError: Cannot read properties of null，逼迫前端做好 Default Image 與可選鏈運算子（Optional Chaining ?.）。
3. 安全意識內建化：
   第 5 筆包含 XSS 字串的 Mock Data，能立刻檢驗 UI 框架是否有落實 HTML 轉義，防止未來的腳本注入漏洞。

今日小結與預告

今天我們示範了如何透過精準的提示詞，讓 AI 瞬間產出具備多種邊界案例的實戰級 Mock Data，讓前端工程師在後端尚未完工時就能百分之百推進開發與切版作業。