JSON-server. Тестируем front-end без back-end

В последние время по вечерам частенько играюсь с JavaScript и фреймворком angular.js. Сидишь себе, что-нибудь изобретаешь, и постоянно упираешься в одну и ту же проблему – чтобы нормально потестить новоиспеченное приложение необходимо принимать какие-нибудь данные с сервера.

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

Json-сервер. Строим велосипед

Сначала мне было лень что-то искать, и я решил проблему по-нашему, по-программерски. Написал небольшой скриптик, который отдавал подготовленный набор данных в формате json. Все дешево и сердито. Вроде данные возвращает, но нет возможности генерировать нормальную структуру пути (например, users/1/comments). Вдоволь поигравшись со своим велосипедом и получив ломку в виде «мне не хватает гибкости», мне пришлось выбросить свое творение и отправиться на GiHub в поиске чего-то более продвинутого.

Json-server – решение всех моих проблем

Поиск по ключевым словам “json server” сразу вывел меня на проект «json-server». На момент поиска проект насчитывал больше 7000 звездочек, а это один из признаков качества и популярности решения. Бегло прочитав описание, понял, что это то что мне и нужно, даже больше.

JSON-server позволяет решить сразу несколько проблем:

[ul]

Поднять простой web-сервер. Сгодится для быстрого тестирования;

Сгенерировать API на основании данных из json файла. Вот то что мне и нужно. Например, создаем файлик data.json и заполняем его фейковыми данными:

{
	"posts": [
		{ "id": 1, "title": "this is first post", "body": "Текст поста", "author": "Игорь Антонов"},
		{ "id": 1, "title": "this is first post", "body": "Текст поста", "author": "Игорь Антонов"},
		{ "id": 1, "title": "this is first post", "body": "Текст поста", "author": "Игорь Антонов"}
	],
}

Скармливаем подготовленный файл json-server и сразу получаем поднятый web-сервер с готовым API: http://localhost:3000/posts/1. Поскольку определенный функционал повторяется от проекта к проекту, я сразу себе сделал несколько заготовок и теперь постоянно их использую.

Возможность генерировать данные динамически. Если по каким-то причинам не нравится вариант подготовки данных заранее, то всегда можно их сформировать динамически, т.е. с помощью JavaScript. Тем более, что на том же GitHub есть различные приблуды для быстрого формирования фейковых данных.

Простой пример динамического формирования данных:

module.exports = function() {
	
	var data = { users: [] }
	
	for (var i = 0; i < 1000; i++) {
		data.users.push( { id: i, name: 'userok' + i, age: i } )		
	}
	
	return data;
}

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

Пример использования json-server

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

[ol]

Установка json-server с помощью NPM (Node Package Manager).

npm install -g json-server

Создаем новую директорию для тестового проекта и размещаем в ней файл со следующим содержимым:

mkdir test-project
touch data.json

Содержимое файла data.json:

{
  "posts": [
    {
      "id": 1,
      "title": "json-server",
      "author": "typicode"
    },
    {
      "id": 2,
      "title": "test!",
      "author": "Spider_NET"
    },
    {
      "id": 3,
      "title": "test!",
      "author": "lord=of-fear"
    }
  ],
  "comments": [
    {
      "id": 1,
      "body": "some comment",
      "postId": 1
    }
  ]
}

Запускаем json-server:

json-server  data.json –w

Открываем браузер и тестируем запрос: http://localhost:3000/posts/2 на выходе должны получить наши данные в json формате.

Берем на заметку

Посмотреть полную документацию и внести при желании свою лепту в развитие проекта всегда можно через репозиторий на git hub.