測試討論

[s103071049]

嗨嗨，想跟大家討論一下這樣的情況會怎麼 mock 資料。這裡我是用 "axios-mock-adapter" 但我猜其他 mock library 應該也都差不多

當我們進入頁面時，在 rangepicker 會帶入今天的時間與上週的時間： [moment().subtract(7, "days"), moment()]

然後 call api，api 回來的內容會有在這段時間區間內更新的資料，ex:

 payload: [
          {
            id: "7b95747e-6da2-4926-835c-ad76da650723",
            reportDate: "2022-10-24",
            fileName: null,
            updateTime: null,
            updateUserName: null,
            updateUserEmplId: null,
            hasReport: false,
            fileId: null,
            uploadBlobId: null,
            uploadBlobName: null
          }
 ]

我自己在處理 api 時，是這麼寫，結果發現，嘿嘿，根本無法成功，因為他跟我們實際打的 api 不一樣，這裡的 queryString 是動態產生的壓根不是 "2022-10-18T16:00:00.111Z" & "2022-10-26T15:59:59.111Z"

 mock
    .onGet("/v1/etdControlFile/search", {
      params: {
        rStart: "2022-10-18T16:00:00.111Z",
        rEnd: "2022-10-26T15:59:59.111Z"
      }
    })
    .reply(
      200,
      {
        code: 0,
        msg: "",
        payload: [ 省略 ]
     }
   )

改成這樣，他就會吃我 index.js 裡面 call api 帶入的那些參數

 mock.onGet("/v1/etdControlFile/search").reply(
    200,

可是如此一來，我 response 部分的值就會失真。

這裡有幾個疑惑想跟大家討論

1. request params 是固定值的情況下才會寫嗎？如果是動態會變動的，會怎麼處裡？會把他 mock 起來嗎？有點怪。
2. 上述的這種動態情境，是不是後端寫 UT 會比較合宜？我的 request 不同，我 db select 出的值就不同。我只要確認該打的 api 有打到就好了。或者就算這個 api 他的 requset 值跟我 mock 的 response 值不同，也不是重點，這樣。

[cwc329]

有點看不懂你的提問，
首先，
使用 mock 的情境是在 unit test，
還是開發的時候後端 API 已經有文件但是還沒有實作所以先用 mock？

第二，

我自己在處理 api 時，是這麼寫，結果發現，嘿嘿，根本無法成功，因為他跟我們實際打的 api 不一樣，這裡的 queryString 是動態產生的壓根不是 "2022-10-18T16:00:00.111Z" & "2022-10-26T15:59:59.111Z"

這段其實有點難懂，
不太清楚 API 不 work 是因為 param 不對，
還是拿到的資料不符預期。

[aszx87410]

同樓上，要問一下你最後的目的到底是什麼，我先猜是測試好了

如果是測試的話，那 mock 完的 response 都是固定的，沒什麼問題

[s103071049]

目的是要寫前端的測試。
要比對畫面上是否符合使用者的操作

情境長這樣：
有一個搜尋時間的 rangePicker 每次進入這個頁面都會直接帶入當下時間並呼叫 api 拿到資料

我打算驗證以下事項

1. 第一次進到該頁面，datePicker UI 是否呈現當下時間
2. 第一次進到該頁面，以當下時間搜尋，列表是否呈現當下資料

因為每次進來的時間都不一樣， 但 mock 完後的 response 都是固定的，所以這邊會不知道怎麼達到我想驗證的 1 & 2

好像只能測試，當我成功進入這個頁面，是否有呼叫該 api 這樣

有點抽象，分享一下代碼：

// 我原本想做這件事，但因為 rStart & rEnd 每次進來的時間都不一樣，他不會是寫死的，所以這樣行不通
  mock
    .onGet("/v1/etdControlFile/search", {
      params: {
        rStart: "1666242000000",
        rEnd: "1666843200000"
      }
    }).reply(後續省略

// 實際上，上述做不動，只能做到下面這樣
test("render well - first enter the page", async () => {
  const mock = new MockAdapter(axios);

  mock.onGet("/v1/假資料假資料/search").reply(
    200,
    {
      code: 0,
      msg: "",
      payload: [
        {
          _isStatisticsDataUpdated: false,
          id: 8,
          criteriaDate: "1666846066984",
          createdAt: "2022-10-27T04:47:46.983Z",
          statisticsData: [],
          period: {
            id: 8,
            startTime: "1666242000000",
            endTime: "1666843200000",
            createdAt: "1666250522785",
            updatedAt: "1666250522785",
            status: "Closed",
            criteriaDate: null
          },
          blobInfo: {
            id: "ee912872-e244-416e-9f6d-81237658e74f",
            originalname: "假資料假資料 Report-20221027.xlsx",
            blobName:
              "Fake Report-20221027.xlsx-ae63f520-11b2-4cec-8b02-1607a8264713.xlsx"
          }
        }
      ]
    },
    {}
  );
  await waitFor(() => {
    customRender(<ControlFile setTitle={jest.fn} setLoading={jest.fn} />);
  });

  expect(mock.history.get.length).toBe(1);
});

[cwc329]

我打算驗證以下事項

1. 第一次進到該頁面，datePicker UI 是否呈現當下時間
2. 第一次進到該頁面，以當下時間搜尋，列表是否呈現當下資料

以我寫測試的經驗來說：
第一點的 datePicker 需要是需要測試的，但是應該不是在這個 component 來測試，需要測試的是這個 function 的 input 與 output 結果是否正確，也就是給定點擊的時間，看它給出的 range 是否為你預期的。
所以你寫的這個測試其實沒有涵蓋到第一點，因為你已經給定了 request 的開始與結束時間，並不是透過你的 util function 去處理的。

第二點的資料正確性，你這邊應該只要管你是否用對的 parameter 去 call api 以及 error handling 有沒有做好，還有資料回來是否有 render 在正確的位置。至於資料的正確性（是否是在某個時間區間）就不是這邊需要考慮的。
而從你寫的 expect 來看，你這邊也沒有涵蓋這些東西。

[aszx87410]

根據你想測的東西，我來寫的話大概會是：

1. 測試 datePicker UI 是否呈現當下時間，這個 render 出來看一下畫面上指定位置有沒有包含相對應的文字就知道了
2. mock API，並確認畫面上呈現的是不是 api response 的資訊，這邊 mock response 寫死是沒問題的，這邊只是要測「前端是不是根據 api response 來 render」
3. 測試前端是否用指定參數去 call API，這個有點像你本來想做的，不過「指定參數」這件事情其實就有點麻煩，我在想你可以試試看能不能 mock new Date() 之類的東西，讓當前時間變成你指定的內容，就會好做很多，如果沒辦法的話，就把範圍縮小，測說 call API 的指定參數的 day 是不是你預期中的 day 就好

第三點應該可以透過 mock fetch 或是你用的其他 library 來拿到參數

[s103071049]

感謝老師 與 cws329 大大的解惑 ! 非常感謝 > <

測試不寫，手動測試測到哭出來～ 謝謝大家的協助與幫忙