Персональный блог Игоря Антонова aka "spider_net"

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


Рубрика: JavaScript -> Программирование
Метки: | | | | | | | |
Просмотров: 5244
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.

    Оставьте комментарий!
    comments powered by HyperComments