# 一起玩 Cypress(4) - 使用JSON Schema驗證Json資料
###### tags: `Test` `Cypress`

## 介紹
JSON Schema算是一個詞彙表，提供你可以說明以及驗證JSON資料，其優點如下
* 描述資料格式
* 提供人和電腦都可閱讀的文件
* 提供資料驗證以便於自動化測試以及客戶端傳送的資料

> 上面文字全來自於官網:laughing:
> 這邊附上連結[json-schema](http://json-schema.org/specification.html)

這麼好用的東西接下來瞧瞧如何整合進`Cypress`內部使用

## 目錄
[TOC]

# 一、前言
因為工作需求需要再檢驗UI前先想先針對API傳遞的Json資料是否符合，因此就有了這一篇文章，因為這邊主要是協助可行性研究，所以會放在如何導入這部分，至於`json-schema`驗證規則及如何撰寫這邊不會提太太多，但文末有放上參考資料需要的人可以參閱。

# 二、使用介紹/實作步驟

這邊主要會使用[chai-json-schema](https://www.chaijs.com/plugins/chai-json-schema/)套件進行測試，其撰寫風格也要符合其規範，整體導入流程不算太困難就快速進入實作吧。

## 環境建立

直接快速安裝吧

npm install chai-json-schema

安裝完成後前往`cypress\support`資料夾底下將以下代碼填入其中，我的話是放在`e2e.js`檔案內部，依據個人需求再做調整

import chaiJsonSchema from 'chai-json-schema'; 
chai.use(chaiJsonSchema);

這樣就完成了(夠簡單吧)，緊接著開始來撰寫我們的測試了

> 這邊也是延續撰寫，如果不知道怎麼建立或是使用可以參考前幾篇文章[[一起玩 Cypress(1) - 初探及快速建立]](/OttG8UPkQE6ZuMUHrTVWZg)。

## 測試撰寫

因為我只想接測試JsonSchema能否執行和測試結果，所以就不走`BDD`的流程了，為了檢視方便會將程式碼寫在同一份

我們直接建立一個測試其路徑和檔名為`cypress\e2e\JsonSchema.cy.ts`，主要定義如下
* let Schema = 用來驗證JsonSchema的定義檔
* let JsonDataOK = 存放**正確**格式的Json資料
* let JsonDataNG = 存放**錯誤**格式的Json資料，其錯誤少了id結構

// cypress\e2e\JsonSchema.cy.ts
let Schema = {
  title: 'my Schema',
  type: 'object',
  required: ['id', 'name', 'email'],
  properties: {
    id: {
      type: 'integer',
    },
    email: {
      type: 'string',
    },
    body: {
      type: 'string',
    },
  },
}

describe('JsonSchema testing OK or NG', () => {
  it('Json OK', () => {
    let JsonDataOK = {
      "id": 10,
      "name": "cypress",
      "email": "[e-mail]",
    };
    
    expect(JsonDataOK).to.be.jsonSchema(Schema);
  });

  it('Json NG', () => {
    let JsonDataNG = {
      "name": "cypress",
      "email": "[e-mail]",
    };
  
    expect(JsonDataNG).to.be.jsonSchema(Schema);
  });
})

## 檢視結果

這邊可以看到測試是使用名稱為**my Schema**的測試結購來進行驗證，其測試失敗也會顯示出原因，我們制定的JsonSchema規則id為必要參數，所以`JsonDataNG`被檢驗出來錯誤，另一方面結構符合的則驗證成功。

測試結果如下：

# 結論
這邊算有點偷懶因為參考來源已經算很快速又清楚的講解，不過這邊還是紀錄成自己習慣的筆記方便閱讀。

<br/>

---

相關參考來源：
[Validate similar JSON structure with Cypress?](https://stackoverflow.com/questions/67437922/validate-similar-json-structure-with-cypress)
[Chai Assertion Library](https://www.chaijs.com/plugins/chai-json-schema/)
[資料驗證好幫手 - JSON Schema Validator](https://github.com/Hsueh-Jen/blog/issues/2)

<style>
code > span{ color: red;}
</style>