feat(web): базовый клиент Фазы 1 — вход, серверы, комнаты, настройки
Клиент React 19 + TanStack Query + Zustand:
- вход (поле TOTP появляется на `auth.2fa_required`), регистрация с проверками
и учётом `registration_enabled`, онбординг первого входа с возможностью
пропустить, редирект `/` и страница `/status`;
- защита маршрутов: неавторизованных — на `/login`, без онбординга — на
`/onboarding`;
- оболочка `/app`: рейка серверов, сайдбар категорий и комнат, шапка сервера,
панель пользователя, модалки создания сервера и комнаты, экран «нет серверов»
со вступлением в главный сервер, заглушка комнаты до Фазы 2;
- настройки: профиль, безопасность (step-up, сессии, logout-all, 2FA с
локальным QR и кодами восстановления), внешний вид, админ-раздел инстанса;
- Gateway-клиент: HELLO/IDENTIFY/RESUME, heartbeat с ожиданием ACK,
экспоненциальное переподключение, разбор `INVALID_SESSION {reason,resumable}`;
- диспетчер событий: READY/RESUMED/USER_UPDATE/GUILD_UPDATE/GUILD_DELETE/
CHANNEL_* применяются к стору, GUILD_CREATE догружается по REST,
MEMBER_*/ROLE_* инвалидируют запросы участников, ролей и карточки сервера;
- i18n ru/en, 66 тестов Vitest, `check`/`lint`/`test`/`build` зелёные.
Серверные правки под клиент:
- `totp_enabled` в профиле (`GET /users/@me`, вход, регистрация) — клиенту
нужно знать, требовать ли код при step-up;
- `POST /auth/2fa/setup` отдаёт `otpauth_url` и `qr_png` (data-URI): QR-код
рисуется локально, внешние сервисы генерации QR не используются;
- права в ответах — имена (`VIEW_CHANNEL|SEND_MESSAGES`), клиент сверяет имена.
This commit is contained in:
+24
-43
@@ -1,10 +1,8 @@
|
||||
import { render, screen, waitFor } from '@testing-library/react';
|
||||
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
||||
import { describe, expect, it, vi } from 'vitest';
|
||||
import { describe, expect, it } from 'vitest';
|
||||
import { screen, waitFor } from '@testing-library/react';
|
||||
|
||||
import { App } from '@/App';
|
||||
import { installFetch, installFailingFetch, json, renderApp } from './helpers';
|
||||
import type { InstanceMeta } from '@/api/meta';
|
||||
import '@/i18n';
|
||||
|
||||
const meta: InstanceMeta = {
|
||||
name: 'glchat',
|
||||
@@ -22,42 +20,22 @@ const meta: InstanceMeta = {
|
||||
anti_bot_enabled: false,
|
||||
voice_enabled: false,
|
||||
web_push_enabled: false,
|
||||
oauth_enabled: false,
|
||||
passkeys_enabled: false,
|
||||
oauth_enabled: false,
|
||||
},
|
||||
};
|
||||
|
||||
const readyBody = { status: 'ready', version: 'test', checks: { database: 'ok' } };
|
||||
|
||||
function json(body: unknown, status = 200): Response {
|
||||
return new Response(JSON.stringify(body), {
|
||||
status,
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
});
|
||||
}
|
||||
/** Страница состояния — бывший лендинг Фазы 0, перенесён на маршрут /status. */
|
||||
describe('страница /status', () => {
|
||||
it('рендерит мету инстанса из API', async () => {
|
||||
installFetch([
|
||||
{ match: '/api/v1/meta', response: () => json(meta) },
|
||||
{ match: '/api/v1/readyz', response: () => json(readyBody) },
|
||||
]);
|
||||
|
||||
function renderApp() {
|
||||
const queryClient = new QueryClient({
|
||||
defaultOptions: { queries: { retry: false } },
|
||||
});
|
||||
return render(
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<App />
|
||||
</QueryClientProvider>,
|
||||
);
|
||||
}
|
||||
|
||||
describe('App', () => {
|
||||
it('renders instance metadata from the API', async () => {
|
||||
vi.stubGlobal(
|
||||
'fetch',
|
||||
vi.fn((input: RequestInfo | URL) => {
|
||||
const url = input instanceof Request ? input.url : String(input);
|
||||
return Promise.resolve(url.endsWith('/api/v1/meta') ? json(meta) : json(readyBody));
|
||||
}),
|
||||
);
|
||||
|
||||
renderApp();
|
||||
renderApp('/status');
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('v0.1.0-test')).toBeInTheDocument();
|
||||
@@ -67,13 +45,16 @@ describe('App', () => {
|
||||
expect(screen.getByTestId('connection-state')).toHaveTextContent('Сервер доступен');
|
||||
});
|
||||
|
||||
it('localizes a server error by its code and offers a retry', async () => {
|
||||
const fetchMock = vi.fn(() =>
|
||||
json({ error: { code: 'internal.error', message: 'boom' } }, 500),
|
||||
);
|
||||
vi.stubGlobal('fetch', fetchMock);
|
||||
it('локализует ошибку сервера по коду и предлагает повтор', async () => {
|
||||
installFetch([
|
||||
{
|
||||
match: '/api/v1/meta',
|
||||
response: () => json({ error: { code: 'internal.error', message: 'boom' } }, 500),
|
||||
},
|
||||
{ match: '/api/v1/readyz', response: () => json(readyBody) },
|
||||
]);
|
||||
|
||||
renderApp();
|
||||
renderApp('/status');
|
||||
|
||||
await waitFor(
|
||||
() => {
|
||||
@@ -84,10 +65,10 @@ describe('App', () => {
|
||||
expect(screen.getByRole('button', { name: 'Повторить' })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('falls back to a network message when the server is unreachable', async () => {
|
||||
vi.stubGlobal('fetch', vi.fn().mockRejectedValue(new TypeError('Failed to fetch')));
|
||||
it('показывает сообщение о недоступном сервере', async () => {
|
||||
installFailingFetch();
|
||||
|
||||
renderApp();
|
||||
renderApp('/status');
|
||||
|
||||
await waitFor(
|
||||
() => {
|
||||
|
||||
Reference in New Issue
Block a user