Как протестировать схему JSON с помощью AJV в TypeScript

Как вы можете проверить, соответствуют ли ваш запрос и ответ интерфейсам? Когда я был новичком в Jest, я использовал только toMatchSnapshot. С toMatchShot вы можете оставить моментальный снимок данных, который вы передаете в expect, если моментального снимка нет. Если есть, то Jest автоматически сравнивает существующее со значением, которое вы передали в expect.

Конечно, моментальное тестирование - это круто, особенно потому, что компоненты пользовательского интерфейса не меняются неожиданно. Однако, если данные, с которыми вы имеете дело, часто меняются, вы не можете гарантировать, что они всегда будут соответствовать вашим тестовым примерам.

TL;DR

• Проверить ответ API непросто, так как его значения всегда меняются. Таким образом, вместо сравнения значений мы можем проверять типы значений.
• typescript-json-schema предназначен для создания объектов схемы JSON.
• ajv предназначен для проверки ваших данных путем сравнения с объектом схемы JSON, созданным с помощью typescript-json-schema

Схема JSON будет для вас одним из решений

Схема JSON - это словарь, который позволяет вам аннотировать и проверять документы JSON.

Схема JSON - это документ для данных в формате JSON. Его легко поддерживать, читать и использовать.

Представим, что у вас есть объект JSON.

{
  "name": "john",
  "age": 30
}

Этот объект JSON преобразуется, как показано ниже, при прохождении через генератор схемы JSON.

{
  "definitions": {},
  "$schema": "http://json-schema.org/draft-07/schema#",
  "$id": "http://example.com/root.json",
  "type": "object",
  "title": "The Root Schema",
  "required": [
    "name",
    "age"
  ],
  "properties": {
    "name": {
      "$id": "#/properties/name",
      "type": "string",
      "title": "The Name Schema",
      "default": "",
      "examples": [
        "john"
      ],
      "pattern": "^(.*)$"
    },
    "age": {
      "$id": "#/properties/age",
      "type": "integer",
      "title": "The Age Schema",
      "default": 0,
      "examples": [
        30
      ]
    }
  }
}

Да, верно. Некоторые из вас могли заметить, что это похоже на AST. Потратьте немного времени, чтобы взглянуть на эту структуру. Что ты можешь видеть? В объекте мало свойств.

Мы сосредоточимся на свойствах. Он содержит все ключи исходного объекта, включая name и age. type описывает, какой тип собственности должен соответствовать. Обратите внимание, что это очень важно знать, когда речь идет о проверке схемы JSON, которую мы собираемся изучить.

Хорошо, я понял, что такое схема JSON. «Тогда как я могу преобразовать свой машинописный интерфейс в схему JSON?»

Хорошо. Существует действительно полезная библиотека, которая преобразует интерфейсы машинописного текста в файлы схемы JSON. Щелкните здесь, чтобы перейти на страницу GitHub TJS.

Я рекомендую вам сначала прочитать этот пост, в котором говорится о Jest.extend. Этот пост основан на предположении, что вы уже знаете, как создавать собственные сопоставления в Jest.

Шаг 1. Создайте структуру проекта

Давайте сначала создадим проект.

> npm init -y
> mkdir src

Затем установите необходимые пакеты.

> npm i -D jest ts-jest typescript @types/jest
> touch jest.config.js
> touch ./src/tsconfig.json

Эти параметры должны быть в файле tsconfig.json.

А вот и jest.config.js

Создайте папки для тестирования и набора текста.

> mkdir ./src/typings ./src/__tests__
> touch ./src/typings/index.d.ts

Что мы сейчас сделаем, так это создадим типизированный файл для машинописного текста, чтобы мы могли использовать его позже в наборе тестов. Напишите этот код в index.d.ts.

Чтобы Jest знать, что мы готовы зарегистрировать наш новый сопоставитель, создать новую папку и создать файл. Мы импортируем этот файл в тестовый файл и будем вызывать функцию перед всеми тестовыми случаями.

> mkdir ./src/hooks
> touch ./src/hooks/index.ts

extendJSCMatcher еще не завершена, мы завершим эту функцию позже.

И, наконец, создайте тестовый файл, и основная подготовка сделана.

> touch ./src/__tests__/jsc.spec.ts

Шаг 2. Создайте интерфейсы и пакеты

Если вы до сих пор хорошо следуете инструкциям, проект должен быть таким, как показано ниже.

node_modules
src
  __tests__
    jsc.spec.ts
  hooks
    index.ts
  typings
    index.d.ts
jest.config.js
package-lock.json
package.json

Поскольку мы собираемся использовать собственные модули узлов (path и fs), нам нужно установить некоторый тип пакета определений. Кроме того, вот наши герои, пакеты проверки схемы JSON и генераторы схемы JSON.

> npm i -D @types/node typescript-json-schema ajv

Пока вы используете машинописный текст, вы должны установить пакет @types/node, чтобы использовать собственные модули узлов, такие как path или fs. Нажмите здесь, чтобы узнать больше о @ types / node.

typescript-json-schema - замечательная библиотека для создания интерфейсов машинописного текста к файлам схемы JSON. Несмотря на то, что руководство не очень хорошее, вы можете написать простой пример.

ajv - это самый быстрый валидатор схемы JSON для Node.js и браузера. То, что он делает, прямо противоположно тому, что делаетtypescript-json-schema. ajv проверяет, правильно ли написан данный объект на основе данной схемы. Если объект не соответствует схеме, он возвращает объект ошибки.

Теперь нам нужно создать папку для интерфейсов.

> mkdir ./src/models
> touch ./src/models/ISchool.ts

В файле интерфейса будет 3 полезной нагрузки.

Шаг 3. Напишите код для создания схемы JSON

Сделайте иерархию папок утилит, как показано ниже.

utils
  index.ts
  jsc.ts
  validate.ts

Перво-наперво, давайте начнем с index.ts.

Это простая конвейерная функция, но если вы этого не понимаете или не знаете, что такое конвейерная функция, я рекомендую вам прочитать эту статью. Обратите внимание, что здесь нет возвращаемого значения. Мы просто вызовем эту функцию в другом файле.

Теперь поговорим о пакете typescript-json-schema. Вам нужно запомнить несколько шагов.

1. import the package
2. generate the object called program
3. generate the object called generator, using program

Вся картина кажется довольно простой. И есть только пара параметров, которые нужно передать для №2 и №3.

В generator есть несколько методов. Один из них - getUserSymbols, который получает все символы. В списке много символов, как вы могли видеть, запустив console.dir(generator.getUserSymbols()), посмотрите на самые верхние 3 элемента.

// all symbols
[ 'StudentInterface',
  'TeacherInterface',
  'SchoolInterface',
  'BaseComment',
  'CommentBlock',
  ...
]

Это интерфейсы машинописного текста, которые вы написали ранее. Это потому, что вы добавили дополнительные файлы в функцию генератора программ.

console.log(files);
// ['..yourPath/ISchoolts']

На этот раз попробуйте console.log(generator.getSchemaForSymbol(‘StudentInterface’)) и посмотрите, что будет после.

// this is the schema object
{ type: 'object',
  properties:
   { name: { type: 'string' },
     age: { type: 'number' },
     address: { type: 'string' } },
  required: [ 'age', 'name' ],
  '$schema': 'http://json-schema.org/draft-07/schema#' 
}

Теперь вы создали объекты схемы!

Наконец, вы можете сохранить эти объекты схемы в каталоге schema.

Шаг 4: Подтвердите схему JSON с помощью ajv

Это будет последний шаг. Поскольку мы создали файлы схемы JSON в папке schema, пришло время использовать ajv.

Откройте файл validate.ts и напишите этот код.

Есть еще несколько способов использовать ajv, щелкните здесь, чтобы проверить. Если validate не обнаруживает ошибок, то сообщение об ошибке от errorText () - Нет ошибок.

Запустите этот файл и посмотрите, какой результат вы получите.

> npx ts-node ./src/utils/validate.ts
// result
> data should have required property 'subject'

Попробуйте с другими объектами тестирования и посмотрите результат!

И мы забыли завершить созданный нами файл хуков шутки. Это буквально для тестового кода, поэтому, если вы не хотите запускать тесты, вы можете пропустить это.

Полный код

Я загрузил полные коды здесь с небольшим рефакторингом.