Мокирование

Режим моков

Создавайте правила в UI (вкладка Mocks) или программно. Устаревший плоский API по-прежнему работает и проксирует в встроенную группу default:

const { addMock, removeMock } = useNetworkDashboard()

const rule = addMock({
  name: 'Mock /api/users',
  urlPattern: '/api/users',
  method: 'GET',
  enabled: true,
  response: {
    status: 200,
    body: [{ id: 1, name: 'Alice' }],
    delay: 200, // опциональная искусственная задержка в мс
  },
})

removeMock(rule.id)

Замоканные ответы логируются обычным образом с бейджем mock и metadata.mocked = true, так что вы можете сразу видеть, какие записи были перехвачены. Поддерживаются оба Fetch и XHR.

Группы моков

Правила можно организовать в именованные группы. Каждая группа имеет собственный переключатель включения/выключения — отключение группы приостанавливает все её правила без потери их индивидуальных состояний включённости. Группы сворачиваемые; двойной клик по имени группы переименовывает её инлайн.

const {
  addMockGroup,
  renameMockGroup,
  toggleMockGroup,
  removeMockGroup,
  addMockToGroup,
  updateMockInGroup,
  removeMockFromGroup,
  mockGroups, // Ref<readonly MockRulesGroup[]>
} = useNetworkDashboard()

// Создать группу
const groupId = addMockGroup('Auth mocks')

// Добавить в неё правило
addMockToGroup(groupId, {
  urlPattern: '/api/refresh',
  method: 'POST',
  response: {
    status: 401,
    body: { error: 'token_expired' },
    delay: 300,
  },
})

// Отключить всю группу (индивидуальные состояния правил сохраняются)
toggleMockGroup(groupId, false)

// Переименовать
renameMockGroup(groupId, 'Auth & Session')

// Удалить
removeMockGroup(groupId)

В UI клик по + в заголовке группы открывает инлайн-форму добавления/редактирования прямо внутри этой группы. Группы сохраняются в localStorage под ключом vue-network-dashboard:mockGroups, когда включён persistToStorage.

Импорт / экспорт конфигурации моков

Панель инструментов Mocks содержит кнопки Import и Export.

Export сериализует все группы и правила в JSON-файл (mock-config.json):

{
  "version": 1,
  "groups": [
    {
      "id": "grp_a1b2c3",
      "name": "Auth mocks",
      "enabled": true,
      "rules": [
        {
          "id": "rule_x7y8z9",
          "urlPattern": "/api/refresh",
          "method": "POST",
          "enabled": true,
          "response": { "status": 401, "body": { "error": "token_expired" }, "delay": 300 }
        }
      ]
    }
  ]
}

Import читает файл и вызывает replaceMockGroups(), который атомарно заменяет всю конфигурацию — без конфликтов ID, предсказуемое поведение.

// Программная замена
const { replaceMockGroups } = useNetworkDashboard()
replaceMockGroups(parsedGroups)

Типичные сценарии использования: переключение между заранее подготовленными файлами сценариев (счастливый путь, ошибки авторизации, недоступность бэкенда), обмен набором моков с коллегами или загрузка подготовленной конфигурации для демо без обращения к серверу.

Мок из лога

В детальном виде любого захваченного HTTP-запроса кликните Mock, чтобы создать правило мока, предзаполненное путём URL, методом, кодом статуса и телом ответа из этой записи лога. Вкладка Mocks открывается автоматически с новым правилом, готовым к редактированию или включению.

Условия мока

Правила моков можно сузить дополнительными условиями совпадения помимо URL и метода. Добавьте условия в редакторе правила в секции Conditions:

interface MockRule {
  // ...
  conditions?: {
    queryParams?: Record<string, string> // пары URL ?key=value (все должны совпасть)
    headers?: Record<string, string> // значения заголовков запроса (все должны совпасть)
    bodyFields?: Record<string, unknown> // значения полей JSON-тела (все должны совпасть)
  }
}

Все условия внутри правила объединяются через AND. Например, направьте один и тот же POST /api/search на разные ответы-моки в зависимости от поля в теле запроса:

// Возвращает результаты поиска для пользовательских запросов
dashboard.addMock({
  urlPattern: '/api/search',
  method: 'POST',
  conditions: { bodyFields: { type: 'user' } },
  response: { status: 200, body: { items: [{ id: 1, name: 'Alice' }] } },
})

// Возвращает пустой список для запросов по товарам
dashboard.addMock({
  urlPattern: '/api/search',
  method: 'POST',
  conditions: { bodyFields: { type: 'product' } },
  response: { status: 200, body: { items: [] } },
})

Трансформация ответа

Режим Transform позволяет изменить реальный ответ сервера, не заменяя его полностью. Запрос уходит на настоящий бэкенд; после получения ответа перехватчик применяет объявленные трансформации и возвращает изменённый Response в приложение. Запись лога помечается как mock, указывая, что ответ был изменён.

interface MockRule {
  mode?: 'mock' | 'transform' // по умолчанию: 'mock'
  transform?: {
    status?: number // Переопределить HTTP-код статуса
    headers?: Record<string, string> // Добавить или перезаписать заголовки ответа
    bodyMerge?: Record<string, unknown> // Глубоко слить поля в JSON-тело
    bodyDelete?: string[] // Удалить поля из JSON-тела
  }
}

Пример — внедрить флаг isAdmin и удалить внутреннее поле:

dashboard.addMock({
  urlPattern: '/api/me',
  method: 'GET',
  mode: 'transform',
  enabled: true,
  response: { status: 200 }, // обязательное поле; игнорируется в режиме transform
  transform: {
    bodyMerge: { isAdmin: true, beta: true },
    bodyDelete: ['internalId'],
  },
})

В UI переключайтесь между Mock и Transform через переключатель режима в редакторе правила — видимые поля формы обновляются соответственно.

Импорт OpenAPI

Кликните OpenAPI в панели инструментов Mocks, чтобы загрузить файл спецификации OpenAPI 3.x или Swagger 2.x в формате JSON. Парсер генерирует одно правило мока на каждую комбинацию path + method, строит пример тела ответа из схемы и добавляет все правила в новую группу, названную по info.title.

// Пример: загрузка спецификации Petstore → создаёт ~18 правил моков одним кликом
// Все правила добавляются в группу: "Swagger Petstore"

Сгенерированные правила используют mode: 'mock' со статусом 200 и телом, выведенным из первой успешной схемы ответа. Ссылки $ref разрешаются автоматически. Никаких внешних зависимостей — парсер занимает ~120 строк TypeScript.

После импорта правила можно включать по отдельности, редактировать или экспортировать как JSON-конфиг, как и любую другую группу моков.