ApiTester

Introduction

The ApiTester component is a comprehensive API testing tool that provides a testing interface for multiple API endpoints. It supports parameter configuration, quick testing, request sending, and result display, making it an ideal tool for developing and debugging API interfaces.

Component Features:

• Supports multiple HTTP methods (GET, POST, PUT, DELETE, PATCH)
• Supports various parameter types (text, number, select, checkbox, radio, etc.)
• Supports parameter validation (required, min, max, regex pattern, etc.)
• Supports quick testing with preset parameter combinations
• Supports custom request header configuration
• Displays detailed response information and response time
• Comprehensive error handling and user feedback

Examples

---
/**
 * @component ApiTesterExample
 * @description API测试组件主要示例
 */
import { ApiTester } from '@coffic/cosy-ui';

const sampleEndpoints = [
  {
    name: '获取用户信息',
    method: 'GET',
    path: '/api/users/1',
    description: '根据用户ID获取用户详细信息',
  },
  {
    name: '创建用户',
    method: 'POST',
    path: '/api/users',
    description: '创建新用户',
    params: [
      {
        name: 'username',
        placeholder: '请输入用户名',
        type: 'text',
        required: true,
      },
      {
        name: 'email',
        placeholder: '请输入邮箱',
        type: 'text',
        required: true,
        validation: {
          pattern: '^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$',
          message: '请输入有效的邮箱地址',
        },
      },
    ],
  },
  {
    name: '用户登录',
    method: 'POST',
    path: '/api/auth/login',
    description: '用户登录认证',
    params: [
      {
        name: 'username',
        placeholder: '用户名',
        type: 'text',
        required: true,
      },
      {
        name: 'password',
        placeholder: '密码',
        type: 'text',
        required: true,
      },
    ],
    quickTests: [
      {
        label: '测试账号',
        values: {
          username: 'testuser',
          password: 'testpass',
        },
        description: '使用测试账号快速登录',
      },
    ],
  },
];
---

<ApiTester
  endpoints={sampleEndpoints}
  title="用户API测试"
  description="测试用户相关的所有API接口"
/>

Props

endpoints

List of API endpoint configurations, each containing name, method, path, description, parameters, and other information.

---
import { ApiTester } from '@coffic/cosy-ui';

const sampleEndpoints = [
  {
    name: '获取用户信息',
    method: 'GET',
    path: '/api/users/1',
    description: '根据用户ID获取用户详细信息',
  },
  {
    name: '创建用户',
    method: 'POST',
    path: '/api/users',
    description: '创建新用户',
    params: [
      {
        name: 'username',
        placeholder: '请输入用户名',
        type: 'text',
        required: true,
      },
    ],
  },
];
---

<ApiTester endpoints={sampleEndpoints} title="端点配置示例" />

title

Component title, displayed at the top of the page.

---
import { ApiTester } from '@coffic/cosy-ui';

const sampleEndpoints = [
  {
    name: '获取用户信息',
    method: 'GET',
    path: '/api/users/1',
    description: '根据用户ID获取用户详细信息',
  },
];
---

<ApiTester endpoints={sampleEndpoints} title="自定义标题示例" />

description

Component description, used to explain the purpose and scope of API testing.

---
import { ApiTester } from '@coffic/cosy-ui';

const sampleEndpoints = [
  {
    name: '获取用户信息',
    method: 'GET',
    path: '/api/users/1',
    description: '根据用户ID获取用户详细信息',
  },
];
---

<ApiTester
  endpoints={sampleEndpoints}
  title="用户API测试"
  description="这是一个详细的描述，说明API测试的用途和范围。可以包含多行文本内容。"
/>

showHeaders

Whether to display the request header configuration area. When set to true, users can customize request headers.

---
import { ApiTester } from '@coffic/cosy-ui';

const endpointsWithHeaders = [
  {
    name: '获取用户列表',
    method: 'GET',
    path: '/api/users',
    description: '获取用户列表，支持分页和筛选',
  },
];
---

<ApiTester
  endpoints={endpointsWithHeaders}
  title="请求头配置示例"
  showHeaders={true}
  defaultHeaders={{
    Authorization: 'Bearer your-token-here',
    'X-API-Version': 'v1',
  }}
/>

defaultHeaders

Default request header configuration, which can preset common authentication information, etc.

---
import { ApiTester } from '@coffic/cosy-ui';

const endpointsWithHeaders = [
  {
    name: '获取用户列表',
    method: 'GET',
    path: '/api/users',
    description: '获取用户列表，支持分页和筛选',
  },
];
---

<ApiTester
  endpoints={endpointsWithHeaders}
  title="默认请求头示例"
  showHeaders={true}
  defaultHeaders={{
    Authorization: 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...',
    'X-API-Version': 'v1',
    'Accept-Language': 'zh-CN',
  }}
/>

showResponseTime

Whether to display response time. When set to true, request duration will be shown in the results.

---
import { ApiTester } from '@coffic/cosy-ui';

const sampleEndpoints = [
  {
    name: '获取用户信息',
    method: 'GET',
    path: '/api/users/1',
    description: '根据用户ID获取用户详细信息',
  },
];
---

<ApiTester
  endpoints={sampleEndpoints}
  title="响应时间显示示例"
  showResponseTime={true}
/>

showRequestDetails

Whether to display request details. When set to true, complete request URL and other information will be shown.

---
import { ApiTester } from '@coffic/cosy-ui';

const sampleEndpoints = [
  {
    name: '获取用户信息',
    method: 'GET',
    path: '/api/users/1',
    description: '根据用户ID获取用户详细信息',
  },
];
---

<ApiTester
  endpoints={sampleEndpoints}
  title="请求详情显示示例"
  showRequestDetails={true}
/>

class

Custom CSS class name for overriding default styles.

---
import { ApiTester } from '@coffic/cosy-ui';

const sampleEndpoints = [
  {
    name: '获取用户信息',
    method: 'GET',
    path: '/api/users/1',
    description: '根据用户ID获取用户详细信息',
  },
];
---

<ApiTester
  endpoints={sampleEndpoints}
  title="自定义样式示例"
  class="border-2 border-primary rounded-xl p-6"
/>

Endpoint Configuration

Each API endpoint supports the following configuration options:

name

Endpoint name, displayed in the card title.

method

HTTP request method, supports GET, POST, PUT, DELETE, PATCH.

path

API endpoint path, can be a relative path or absolute URL.

description

Endpoint description, used to explain the purpose of the API.

params

Request parameter configuration, supports various input types and validation rules.

quickTests

Quick test configuration, preset common parameter combinations.

Parameter Types

text

Text input box, supports arbitrary text content.

number

Number input box, supports numeric input and range validation.

select

Dropdown selector, choose value from preset options.

textarea

Multi-line text input box, suitable for long text content.

checkbox

Checkbox, suitable for boolean parameters.

radio

Radio button, choose one value from multiple options.

Quick Testing

The quick testing feature allows users to quickly fill forms through preset parameter combinations, improving testing efficiency. Each quick test contains:

• label: Display name
• values: Parameter value object
• description: Description information (optional)

Usage Examples

Basic Usage

<ApiTester 
  endpoints={[
    {
      name: 'Get User Info',
      method: 'GET',
      path: '/api/users/1',
      description: 'Get user detailed information by user ID'
    }
  ]} 
/>

API with Parameters

<ApiTester 
  endpoints={[
    {
      name: 'Create User',
      method: 'POST',
      path: '/api/users',
      description: 'Create a new user',
      params: [
        {
          name: 'username',
          placeholder: 'Please enter username',
          type: 'text',
          required: true
        },
        {
          name: 'email',
          placeholder: 'Please enter email',
          type: 'text',
          required: true,
          validation: {
            pattern: '^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$',
            message: 'Please enter a valid email address'
          }
        }
      ]
    }
  ]} 
/>

API with Quick Tests

<ApiTester 
  endpoints={[
    {
      name: 'User Login',
      method: 'POST',
      path: '/api/auth/login',
      description: 'User authentication login',
      params: [
        {
          name: 'username',
          placeholder: 'Username',
          type: 'text',
          required: true
        },
        {
          name: 'password',
          placeholder: 'Password',
          type: 'text',
          required: true
        }
      ],
      quickTests: [
        {
          label: 'Test Account',
          values: {
            username: 'testuser',
            password: 'testpass'
          },
          description: 'Quick login with test account'
        }
      ]
    }
  ]} 
/>

With Request Header Configuration

<ApiTester 
  endpoints={endpoints}
  showHeaders={true}
  defaultHeaders={{
    'Authorization': 'Bearer your-token-here',
    'X-API-Version': 'v1'
  }}
  showResponseTime={true}
  showRequestDetails={true}
/>

Important Notes

1. CORS Issues: If the API being tested is not on the same domain as the current page, you may encounter cross-origin restrictions
2. HTTPS Requirements: Modern browsers require HTTPS pages to only request HTTPS APIs
3. Parameter Validation: It’s recommended to add validation rules for important parameters to improve testing accuracy
4. Error Handling: The component automatically handles network errors and response parsing errors
5. Security: Don’t store sensitive information like real passwords in quick tests

Best Practices

1. Parameter Naming: Use clear parameter names for easy understanding and maintenance
2. Validation Rules: Add appropriate validation for required parameters and format-sensitive parameters
3. Quick Tests: Preset common testing scenarios to improve development efficiency
4. Error Messages: Provide meaningful error prompts to help users quickly locate problems
5. Response Handling: Adjust display methods based on the actual response format of the API