Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 7512857363 | |||
| c0137007ce |
@@ -0,0 +1,379 @@
|
|||||||
|
import { expect, test, type APIRequestContext, type Page } from '@playwright/test';
|
||||||
|
|
||||||
|
import {
|
||||||
|
apiAs,
|
||||||
|
createChannel,
|
||||||
|
createGuild,
|
||||||
|
createRole,
|
||||||
|
displayName,
|
||||||
|
dropStaleGuilds,
|
||||||
|
ensureProbe,
|
||||||
|
listChannels,
|
||||||
|
listRoles,
|
||||||
|
openApp,
|
||||||
|
openGuild,
|
||||||
|
pngBytes,
|
||||||
|
postWithRetry,
|
||||||
|
repeat429,
|
||||||
|
signIn,
|
||||||
|
stepUp,
|
||||||
|
trackLoads,
|
||||||
|
type Account,
|
||||||
|
type ProbeLogin,
|
||||||
|
type Session,
|
||||||
|
} from './support';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Realtime-матрица AGENT.md 11.6 для остатка Фазы 7: иконка и имя групповой
|
||||||
|
* беседы (D-070, D-075) и личные шаблоны серверов (7.3). Действие A видно
|
||||||
|
* второму браузеру без F5 и повторного входа — за прогон ни одной полной
|
||||||
|
* загрузки документа (`trackLoads` = 0). Запуск только по флагу, тест требует
|
||||||
|
* стенда:
|
||||||
|
*
|
||||||
|
* GLCHAT_E2E_REALTIME=1 GLCHAT_URL=https://gl.mhspx.su \
|
||||||
|
* PLAYWRIGHT_BROWSERS_PATH=../.cache/ms-playwright \
|
||||||
|
* npx playwright test e2e/realtime-phase7.spec.ts
|
||||||
|
*/
|
||||||
|
const enabled = process.env.GLCHAT_E2E_REALTIME === '1';
|
||||||
|
const API = '/api/v1';
|
||||||
|
const BASE_URL = process.env.GLCHAT_URL ?? 'https://gl.mhspx.su';
|
||||||
|
/** Префикс тестовых данных: по нему убираются серверы, шаблоны и группы прошлых прогонов. */
|
||||||
|
const PREFIX = 'Realtime E2E ';
|
||||||
|
/** Постоянные пробные аккаунты: A — владелец, B — второй браузер, C — третий участник. */
|
||||||
|
const OWNER_LOGIN: ProbeLogin = { username: 'rtprobe', password: 'Rt-Probe-Owner-9x' };
|
||||||
|
const MEMBER_LOGIN: ProbeLogin = { username: 'rtprobe2', password: 'Rt-Probe-Member-9x' };
|
||||||
|
const THIRD_LOGIN: ProbeLogin = { username: 'rtprobe3', password: 'Rt-Probe-Third-9x' };
|
||||||
|
|
||||||
|
let owner: Account;
|
||||||
|
let member: Account;
|
||||||
|
let third: Account;
|
||||||
|
|
||||||
|
test.describe('realtime: иконка и имя групповой беседы, личные шаблоны (Фаза 7)', () => {
|
||||||
|
test.skip(!enabled, 'нужен развёрнутый инстанс: GLCHAT_E2E_REALTIME=1');
|
||||||
|
|
||||||
|
// Лимит API — 120 запросов в минуту на сессию (AGENT.md 8.6): пауза между
|
||||||
|
// тестами даёт ведру лимита наполниться, иначе интерфейс получает 429.
|
||||||
|
test.afterEach(async () => {
|
||||||
|
await new Promise((resolve) => setTimeout(resolve, 4_000));
|
||||||
|
});
|
||||||
|
|
||||||
|
test.beforeAll(async ({ playwright }) => {
|
||||||
|
const ownerApi = await playwright.request.newContext({ baseURL: BASE_URL });
|
||||||
|
const memberApi = await playwright.request.newContext({ baseURL: BASE_URL });
|
||||||
|
const thirdApi = await playwright.request.newContext({ baseURL: BASE_URL });
|
||||||
|
try {
|
||||||
|
// Лимит входов — 5 в минуту на IP (AGENT.md 8.6): входы разносим по времени.
|
||||||
|
const ownerProbe = await ensureProbe(ownerApi, OWNER_LOGIN.username, OWNER_LOGIN.password);
|
||||||
|
await new Promise((resolve) => setTimeout(resolve, 2_000));
|
||||||
|
const memberProbe = await ensureProbe(
|
||||||
|
memberApi,
|
||||||
|
MEMBER_LOGIN.username,
|
||||||
|
MEMBER_LOGIN.password,
|
||||||
|
);
|
||||||
|
await new Promise((resolve) => setTimeout(resolve, 2_000));
|
||||||
|
const thirdProbe = await ensureProbe(thirdApi, THIRD_LOGIN.username, THIRD_LOGIN.password);
|
||||||
|
const ownerName = await displayName(ownerApi);
|
||||||
|
const memberName = await displayName(memberApi);
|
||||||
|
const thirdName = await displayName(thirdApi);
|
||||||
|
// Уборка данных прошлых прогонов: удаление серверов требует свежий step-up.
|
||||||
|
await stepUp(ownerApi, OWNER_LOGIN.password);
|
||||||
|
await dropStaleGuilds(ownerApi, PREFIX);
|
||||||
|
await dropStaleTemplates(ownerApi, PREFIX);
|
||||||
|
await dropStaleGroups(ownerApi, PREFIX, ownerProbe.id);
|
||||||
|
await stepUp(memberApi, MEMBER_LOGIN.password);
|
||||||
|
await dropStaleGuilds(memberApi, PREFIX);
|
||||||
|
// Браузерные сессии берём из тех же api-контекстов: лишние входы не
|
||||||
|
// тратятся, а наблюдатель входит формой уже внутри теста.
|
||||||
|
owner = {
|
||||||
|
...ownerProbe,
|
||||||
|
displayName: ownerName,
|
||||||
|
state: await ownerApi.storageState(),
|
||||||
|
browserState: await ownerApi.storageState(),
|
||||||
|
};
|
||||||
|
member = {
|
||||||
|
...memberProbe,
|
||||||
|
displayName: memberName,
|
||||||
|
state: await memberApi.storageState(),
|
||||||
|
browserState: await memberApi.storageState(),
|
||||||
|
};
|
||||||
|
third = {
|
||||||
|
...thirdProbe,
|
||||||
|
displayName: thirdName,
|
||||||
|
state: await thirdApi.storageState(),
|
||||||
|
browserState: await thirdApi.storageState(),
|
||||||
|
};
|
||||||
|
} finally {
|
||||||
|
await ownerApi.dispose();
|
||||||
|
await memberApi.dispose();
|
||||||
|
await thirdApi.dispose();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
test('26. Иконка и имя групповой беседы: у наблюдателя без перезагрузки', async ({
|
||||||
|
browser,
|
||||||
|
playwright,
|
||||||
|
}) => {
|
||||||
|
const ownerApi = await apiAs(playwright, owner.state);
|
||||||
|
const sessions: Session[] = [];
|
||||||
|
let groupId = '';
|
||||||
|
|
||||||
|
try {
|
||||||
|
// Группа — это минимум три человека (AGENT.md 7.8): владелец и два гостя.
|
||||||
|
const created = await postWithRetry(ownerApi, `${API}/users/@me/channels/group`, {
|
||||||
|
name: `${PREFIX}группа`,
|
||||||
|
recipient_ids: [member.id, third.id],
|
||||||
|
});
|
||||||
|
expect(created.ok(), `групповая беседа: ${await created.text()}`).toBeTruthy();
|
||||||
|
groupId = ((await created.json()) as { channel: { id: string } }).channel.id;
|
||||||
|
|
||||||
|
// Владелец — на подготовленной сессии, наблюдатель входит формой: пути разные.
|
||||||
|
sessions.push(await openApp(browser, owner.browserState));
|
||||||
|
sessions.push(await signIn(browser, { email: member.email, password: member.password }));
|
||||||
|
const [actor, observer] = sessions as [Session, Session];
|
||||||
|
await openGroupConversation(actor.page, groupId);
|
||||||
|
await openGroupConversation(observer.page, groupId);
|
||||||
|
|
||||||
|
// Считаем полные загрузки документа: F5 в сценарии быть не должно.
|
||||||
|
const loads = trackLoads(observer.page);
|
||||||
|
loads.reset();
|
||||||
|
|
||||||
|
// Владелец ставит иконку беседы через меню в шапке.
|
||||||
|
await actor.page.getByTestId('dm-owner-menu').click();
|
||||||
|
await actor.page.getByTestId('dm-icon-upload').click();
|
||||||
|
await actor.page.getByTestId('dm-icon-input').setInputFiles({
|
||||||
|
name: 'group-icon.png',
|
||||||
|
mimeType: 'image/png',
|
||||||
|
buffer: pngBytes(64, 64, [30, 110, 210]),
|
||||||
|
});
|
||||||
|
const actorHeader = actor.page.getByTestId('dm-group-header');
|
||||||
|
await expect(actorHeader.locator('img')).toHaveAttribute('src', /\/files\/\d+/u, {
|
||||||
|
timeout: 30_000,
|
||||||
|
});
|
||||||
|
|
||||||
|
// Наблюдатель: иконка приходит событием DM_CHANNEL_UPDATE в шапку и список.
|
||||||
|
const observerHeader = observer.page.getByTestId('dm-group-header');
|
||||||
|
await expect(observerHeader.locator('img')).toHaveAttribute('src', /\/files\/\d+/u, {
|
||||||
|
timeout: 20_000,
|
||||||
|
});
|
||||||
|
await expect(observer.page.getByTestId(`dm-link-${groupId}`).locator('img')).toHaveAttribute(
|
||||||
|
'src',
|
||||||
|
/\/files\/\d+/u,
|
||||||
|
{ timeout: 20_000 },
|
||||||
|
);
|
||||||
|
// Участник-не-владелец меню владельца не получает: права проверяет сервер.
|
||||||
|
await expect(observer.page.getByTestId('dm-owner-menu')).toHaveCount(0);
|
||||||
|
|
||||||
|
// Переименование: владелец через диалог, наблюдатель видит новое имя.
|
||||||
|
const renamed = `${PREFIX}кино ${Date.now()}`;
|
||||||
|
await actor.page.getByTestId('dm-owner-menu').click();
|
||||||
|
await actor.page.getByTestId('dm-group-rename').click();
|
||||||
|
const dialog = actor.page.getByRole('dialog', { name: 'Переименовать беседу' });
|
||||||
|
await expect(dialog).toBeVisible({ timeout: 20_000 });
|
||||||
|
// Поле открывается с текущим именем — его и правит владелец.
|
||||||
|
await expect(dialog.getByLabel('Название группы')).toHaveValue(`${PREFIX}группа`);
|
||||||
|
await dialog.getByLabel('Название группы').fill(renamed);
|
||||||
|
await dialog.getByRole('button', { name: 'Сохранить' }).click();
|
||||||
|
await expect(dialog).toBeHidden({ timeout: 20_000 });
|
||||||
|
await expect(actorHeader).toContainText(renamed, { timeout: 20_000 });
|
||||||
|
await expect(observerHeader).toContainText(renamed, { timeout: 20_000 });
|
||||||
|
await expect(observer.page.getByTestId(`dm-link-${groupId}`)).toContainText(renamed, {
|
||||||
|
timeout: 20_000,
|
||||||
|
});
|
||||||
|
|
||||||
|
// Имя сохранено на сервере, а не только нарисовано в браузере владельца.
|
||||||
|
const list = await repeat429(() => ownerApi.get(`${API}/users/@me/channels`));
|
||||||
|
expect(list.ok(), `список бесед: ${await list.text()}`).toBeTruthy();
|
||||||
|
const channels = ((await list.json()) as { channels: { id: string; name: string }[] })
|
||||||
|
.channels;
|
||||||
|
expect(channels.find((channel) => channel.id === groupId)?.name).toBe(renamed);
|
||||||
|
|
||||||
|
// Ни один шаг матрицы не потребовал перезагрузки страницы.
|
||||||
|
expect(loads.count(), 'наблюдатель обновлялся без полной загрузки документа').toBe(0);
|
||||||
|
} finally {
|
||||||
|
for (const session of sessions) {
|
||||||
|
await session.context.close();
|
||||||
|
}
|
||||||
|
if (groupId !== '') {
|
||||||
|
await dropGroup(ownerApi, { id: groupId, member_ids: [member.id, third.id] }, owner.id);
|
||||||
|
}
|
||||||
|
await ownerApi.dispose();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
test('27. Личные шаблоны: сервер по шаблону на другом устройстве без перезагрузки', async ({
|
||||||
|
browser,
|
||||||
|
playwright,
|
||||||
|
}) => {
|
||||||
|
const ownerApi = await apiAs(playwright, owner.state);
|
||||||
|
const sessions: Session[] = [];
|
||||||
|
const stamp = Date.now();
|
||||||
|
const sourceName = `${PREFIX}источник ${stamp}`;
|
||||||
|
const templateName = `${PREFIX}шаблон ${stamp}`;
|
||||||
|
const roomName = `tpl-room-${stamp}`;
|
||||||
|
const roleName = `tpl-role-${stamp}`;
|
||||||
|
const createdName = `${PREFIX}по шаблону ${stamp}`;
|
||||||
|
let sourceGuildId = '';
|
||||||
|
let createdGuildId = '';
|
||||||
|
let templateId = '';
|
||||||
|
|
||||||
|
try {
|
||||||
|
// Исходный сервер с отличимой структурой: по ней видно, что новый сервер
|
||||||
|
// собран именно из личного шаблона.
|
||||||
|
const source = await createGuild(ownerApi, sourceName);
|
||||||
|
sourceGuildId = source.id;
|
||||||
|
await createChannel(ownerApi, sourceGuildId, { name: roomName, type: 'text' });
|
||||||
|
await createRole(ownerApi, sourceGuildId, {
|
||||||
|
name: roleName,
|
||||||
|
permissions: 'VIEW_CHANNEL|SEND_MESSAGES',
|
||||||
|
});
|
||||||
|
|
||||||
|
// Первое устройство: сохраняем структуру личным шаблоном в настройках.
|
||||||
|
const device1 = await openApp(browser, owner.browserState);
|
||||||
|
sessions.push(device1);
|
||||||
|
await openGuild(device1.page, sourceName);
|
||||||
|
await device1.page.getByLabel('Настройки сервера').click();
|
||||||
|
const form = device1.page.getByTestId('guild-templates-form');
|
||||||
|
await expect(form).toBeVisible({ timeout: 30_000 });
|
||||||
|
await form.getByLabel('Название шаблона').fill(templateName);
|
||||||
|
await form.getByRole('button', { name: 'Сохранить шаблон' }).click();
|
||||||
|
await expect(device1.page.getByText('Шаблон сохранён.')).toBeVisible({ timeout: 20_000 });
|
||||||
|
|
||||||
|
// id шаблона берём по REST: им же наблюдатель выберет его в окне создания.
|
||||||
|
const mine = await repeat429(() => ownerApi.get(`${API}/guild-templates/mine`));
|
||||||
|
expect(mine.ok(), `свои шаблоны: ${await mine.text()}`).toBeTruthy();
|
||||||
|
const templates = ((await mine.json()) as { templates: { id: string; name: string }[] })
|
||||||
|
.templates;
|
||||||
|
templateId = templates.find((template) => template.name === templateName)?.id ?? '';
|
||||||
|
expect(templateId, 'шаблон сохранён на сервере').not.toBe('');
|
||||||
|
|
||||||
|
// Второе устройство того же пользователя: свой вход формой.
|
||||||
|
const device2 = await signIn(browser, { email: owner.email, password: owner.password });
|
||||||
|
sessions.push(device2);
|
||||||
|
const loads = trackLoads(device2.page);
|
||||||
|
loads.reset();
|
||||||
|
|
||||||
|
// Свои шаблоны видны в окне создания сервера: список читается при
|
||||||
|
// открытии, страницу перезагружать не нужно (у личных шаблонов нет
|
||||||
|
// отдельного события шлюза — они приватны владельцу).
|
||||||
|
await device2.page.getByLabel('Создать сервер').click();
|
||||||
|
const createDialog = device2.page.getByRole('dialog', { name: 'Создать сервер' });
|
||||||
|
const option = createDialog.getByTestId(`guild-template-personal-${templateId}`);
|
||||||
|
await expect(option).toBeVisible({ timeout: 20_000 });
|
||||||
|
await option.getByRole('radio').click();
|
||||||
|
await createDialog.getByLabel('Название сервера').fill(createdName);
|
||||||
|
await createDialog.getByRole('button', { name: 'Создать' }).click();
|
||||||
|
await expect(device2.page.getByTestId('guild-header')).toContainText(createdName, {
|
||||||
|
timeout: 30_000,
|
||||||
|
});
|
||||||
|
createdGuildId = device2.page.url().split('/app/')[1]?.split('/')[0] ?? '';
|
||||||
|
expect(createdGuildId, 'новый сервер открылся в приложении').not.toBe('');
|
||||||
|
|
||||||
|
// Структура нового сервера совпала с шаблоном: комната и роль на месте.
|
||||||
|
const createdChannels = await listChannels(ownerApi, createdGuildId);
|
||||||
|
expect(createdChannels.map((channel) => channel.name)).toContain(roomName);
|
||||||
|
const createdRoles = await listRoles(ownerApi, createdGuildId);
|
||||||
|
expect(createdRoles.map((role) => role.name)).toContain(roleName);
|
||||||
|
|
||||||
|
expect(loads.count(), 'окно создания сервера открылось без полной загрузки документа').toBe(
|
||||||
|
0,
|
||||||
|
);
|
||||||
|
} finally {
|
||||||
|
for (const session of sessions) {
|
||||||
|
await session.context.close();
|
||||||
|
}
|
||||||
|
await stepUp(ownerApi, OWNER_LOGIN.password).catch(() => undefined);
|
||||||
|
for (const guildId of [createdGuildId, sourceGuildId]) {
|
||||||
|
if (guildId !== '') {
|
||||||
|
await repeat429(() => ownerApi.delete(`${API}/guilds/${guildId}`)).catch(() => undefined);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (templateId !== '') {
|
||||||
|
await repeat429(() => ownerApi.delete(`${API}/guild-templates/${templateId}`)).catch(
|
||||||
|
() => undefined,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
await ownerApi.dispose();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
/** Открывает раздел «Друзья» и переходит в беседу по ссылке сайдбара. */
|
||||||
|
async function openGroupConversation(page: Page, channelId: string): Promise<void> {
|
||||||
|
await page.getByRole('link', { name: 'Друзья' }).click();
|
||||||
|
const link = page.getByTestId(`dm-link-${channelId}`);
|
||||||
|
await expect(link).toBeVisible({ timeout: 30_000 });
|
||||||
|
await link.click();
|
||||||
|
await expect(page.getByTestId('dm-group-header')).toBeVisible({ timeout: 30_000 });
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Беседа в списке `/users/@me/channels`: для уборки нужны её участники. */
|
||||||
|
interface DmChannelRef {
|
||||||
|
id: string;
|
||||||
|
name?: string;
|
||||||
|
is_group?: boolean;
|
||||||
|
member_ids?: string[];
|
||||||
|
recipients?: { user_id: string; is_self?: boolean }[];
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* dropGroup убирает тестовую группу: иконку снимаем до роспуска (иначе файл
|
||||||
|
* останется сиротой), участников удаляет владелец, а беседа без участников
|
||||||
|
* удаляется на сервере целиком.
|
||||||
|
*/
|
||||||
|
async function dropGroup(
|
||||||
|
api: APIRequestContext,
|
||||||
|
channel: DmChannelRef,
|
||||||
|
ownerId: string,
|
||||||
|
): Promise<void> {
|
||||||
|
await repeat429(() => api.delete(`${API}/channels/${channel.id}/icon`)).catch(() => undefined);
|
||||||
|
const others =
|
||||||
|
channel.member_ids ??
|
||||||
|
(channel.recipients ?? [])
|
||||||
|
.map((recipient) => recipient.user_id)
|
||||||
|
.filter((userId) => userId !== ownerId);
|
||||||
|
for (const userId of others) {
|
||||||
|
if (userId === ownerId) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
await repeat429(() => api.delete(`${API}/channels/${channel.id}/recipients/${userId}`)).catch(
|
||||||
|
() => undefined,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
await repeat429(() => api.delete(`${API}/channels/${channel.id}/recipients/${ownerId}`)).catch(
|
||||||
|
() => undefined,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/** dropStaleGroups убирает группы прошлых прогонов: их имена начинаются с префикса. */
|
||||||
|
async function dropStaleGroups(
|
||||||
|
api: APIRequestContext,
|
||||||
|
prefix: string,
|
||||||
|
ownerId: string,
|
||||||
|
): Promise<void> {
|
||||||
|
const response = await repeat429(() => api.get(`${API}/users/@me/channels`));
|
||||||
|
if (!response.ok()) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const { channels } = (await response.json()) as { channels: DmChannelRef[] };
|
||||||
|
for (const channel of channels) {
|
||||||
|
if (channel.is_group === true && (channel.name ?? '').startsWith(prefix)) {
|
||||||
|
await dropGroup(api, channel, ownerId);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** dropStaleTemplates убирает личные шаблоны прошлых прогонов (лимит — 20). */
|
||||||
|
async function dropStaleTemplates(api: APIRequestContext, prefix: string): Promise<void> {
|
||||||
|
const response = await repeat429(() => api.get(`${API}/guild-templates/mine`));
|
||||||
|
if (!response.ok()) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const { templates } = (await response.json()) as { templates: { id: string; name: string }[] };
|
||||||
|
for (const template of templates) {
|
||||||
|
if (template.name.startsWith(prefix)) {
|
||||||
|
await repeat429(() => api.delete(`${API}/guild-templates/${template.id}`)).catch(
|
||||||
|
() => undefined,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -12,6 +12,7 @@ import { useAuthorDirectory } from '@/components/chat/useAuthorDirectory';
|
|||||||
import { DmCallHistoryPanel } from '@/components/friends/DmCallHistoryPanel';
|
import { DmCallHistoryPanel } from '@/components/friends/DmCallHistoryPanel';
|
||||||
import { DmCallMenu } from '@/components/friends/DmCallMenu';
|
import { DmCallMenu } from '@/components/friends/DmCallMenu';
|
||||||
import { DmCallPanel } from '@/components/friends/DmCallPanel';
|
import { DmCallPanel } from '@/components/friends/DmCallPanel';
|
||||||
|
import { GroupRenameDialog } from '@/components/friends/GroupRenameDialog';
|
||||||
import { Avatar } from '@/components/ui/Avatar';
|
import { Avatar } from '@/components/ui/Avatar';
|
||||||
import { ErrorNotice } from '@/components/ui/ErrorNotice';
|
import { ErrorNotice } from '@/components/ui/ErrorNotice';
|
||||||
import { Menu, MenuItem } from '@/components/ui/Menu';
|
import { Menu, MenuItem } from '@/components/ui/Menu';
|
||||||
@@ -40,18 +41,19 @@ export function DirectMessageView({ channelId }: { channelId: string }) {
|
|||||||
const upsertDmChannel = useSessionStore((state) => state.upsertDmChannel);
|
const upsertDmChannel = useSessionStore((state) => state.upsertDmChannel);
|
||||||
const currentUser = useCurrentUser();
|
const currentUser = useCurrentUser();
|
||||||
|
|
||||||
// Иконку групповой беседы меняет только владелец (D-070): у 1:1 своей
|
// Иконку и имя групповой беседы меняет только владелец (D-070, D-075): у 1:1
|
||||||
// иконки нет — там показывается аватар собеседника.
|
// своей иконки нет — там показывается аватар собеседника.
|
||||||
const isOwner = channel?.is_group === true && channel.owner_id === currentUser.data?.id;
|
const isOwner = channel?.is_group === true && channel.owner_id === currentUser.data?.id;
|
||||||
const [iconMenuOpen, setIconMenuOpen] = useState(false);
|
const [ownerMenuOpen, setOwnerMenuOpen] = useState(false);
|
||||||
|
const [renameOpen, setRenameOpen] = useState(false);
|
||||||
const [iconError, setIconError] = useState<unknown>(null);
|
const [iconError, setIconError] = useState<unknown>(null);
|
||||||
const iconMenuRef = useRef<HTMLButtonElement | null>(null);
|
const ownerMenuRef = useRef<HTMLButtonElement | null>(null);
|
||||||
const iconInput = useRef<HTMLInputElement | null>(null);
|
const iconInput = useRef<HTMLInputElement | null>(null);
|
||||||
|
|
||||||
// Ответ сервера кладём в стор бесед: иконка появляется сразу и у владельца,
|
// Ответ сервера кладём в стор бесед: новое имя или иконка появляются сразу и
|
||||||
// а остальным участникам приходит DM_CHANNEL_UPDATE (AGENT.md 11.6). Список
|
// у владельца, а остальным участникам приходит DM_CHANNEL_UPDATE (AGENT.md
|
||||||
// перечитываем ещё и запросом: снятая иконка приходит пустым полем, а
|
// 11.6). Список перечитываем ещё и запросом: снятая иконка приходит пустым
|
||||||
// слияние в сторе пустое поле не затирает.
|
// полем, а слияние в сторе пустое поле не затирает.
|
||||||
const applyUpdated = (updated: Channel): void => {
|
const applyUpdated = (updated: Channel): void => {
|
||||||
setIconError(null);
|
setIconError(null);
|
||||||
upsertDmChannel(updated);
|
upsertDmChannel(updated);
|
||||||
@@ -178,17 +180,17 @@ export function DirectMessageView({ channelId }: { channelId: string }) {
|
|||||||
{isOwner ? (
|
{isOwner ? (
|
||||||
<>
|
<>
|
||||||
<button
|
<button
|
||||||
ref={iconMenuRef}
|
ref={ownerMenuRef}
|
||||||
type="button"
|
type="button"
|
||||||
aria-haspopup="menu"
|
aria-haspopup="menu"
|
||||||
aria-expanded={iconMenuOpen}
|
aria-expanded={ownerMenuOpen}
|
||||||
aria-label={t('friends.group.icon.menu')}
|
aria-label={t('friends.group.menu')}
|
||||||
title={t('friends.group.icon.menu')}
|
title={t('friends.group.menu')}
|
||||||
data-testid="dm-icon-menu"
|
data-testid="dm-owner-menu"
|
||||||
className="rounded-[var(--radius-sm)] px-1.5 text-base leading-none text-fg-muted transition-[color,background-color,transform] duration-[var(--duration-fast)] hover:bg-surface-3 hover:text-fg active:scale-95"
|
className="rounded-[var(--radius-sm)] px-1.5 text-base leading-none text-fg-muted transition-[color,background-color,transform] duration-[var(--duration-fast)] hover:bg-surface-3 hover:text-fg active:scale-95"
|
||||||
onClick={() => setIconMenuOpen((open) => !open)}
|
onClick={() => setOwnerMenuOpen((open) => !open)}
|
||||||
>
|
>
|
||||||
🖼
|
⋯
|
||||||
</button>
|
</button>
|
||||||
<input
|
<input
|
||||||
ref={iconInput}
|
ref={iconInput}
|
||||||
@@ -231,19 +233,29 @@ export function DirectMessageView({ channelId }: { channelId: string }) {
|
|||||||
|
|
||||||
{isOwner ? (
|
{isOwner ? (
|
||||||
<Menu
|
<Menu
|
||||||
open={iconMenuOpen}
|
open={ownerMenuOpen}
|
||||||
label={t('friends.group.icon.menu')}
|
label={t('friends.group.menu')}
|
||||||
anchorRef={iconMenuRef}
|
anchorRef={ownerMenuRef}
|
||||||
placement="bottom"
|
placement="bottom"
|
||||||
align="right"
|
align="right"
|
||||||
onClose={() => setIconMenuOpen(false)}
|
onClose={() => setOwnerMenuOpen(false)}
|
||||||
>
|
>
|
||||||
|
<MenuItem
|
||||||
|
icon="✏️"
|
||||||
|
data-testid="dm-group-rename"
|
||||||
|
onClick={() => {
|
||||||
|
setOwnerMenuOpen(false);
|
||||||
|
setRenameOpen(true);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{t('friends.group.rename')}
|
||||||
|
</MenuItem>
|
||||||
<MenuItem
|
<MenuItem
|
||||||
icon="🖼"
|
icon="🖼"
|
||||||
data-testid="dm-icon-upload"
|
data-testid="dm-icon-upload"
|
||||||
disabled={uploadIcon.isPending}
|
disabled={uploadIcon.isPending}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setIconMenuOpen(false);
|
setOwnerMenuOpen(false);
|
||||||
iconInput.current?.click();
|
iconInput.current?.click();
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
@@ -256,7 +268,7 @@ export function DirectMessageView({ channelId }: { channelId: string }) {
|
|||||||
data-testid="dm-icon-remove"
|
data-testid="dm-icon-remove"
|
||||||
disabled={removeIcon.isPending}
|
disabled={removeIcon.isPending}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setIconMenuOpen(false);
|
setOwnerMenuOpen(false);
|
||||||
removeIcon.mutate();
|
removeIcon.mutate();
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
@@ -266,6 +278,15 @@ export function DirectMessageView({ channelId }: { channelId: string }) {
|
|||||||
</Menu>
|
</Menu>
|
||||||
) : null}
|
) : null}
|
||||||
|
|
||||||
|
{isOwner ? (
|
||||||
|
<GroupRenameDialog
|
||||||
|
channel={channel}
|
||||||
|
open={renameOpen}
|
||||||
|
onClose={() => setRenameOpen(false)}
|
||||||
|
onRenamed={applyUpdated}
|
||||||
|
/>
|
||||||
|
) : null}
|
||||||
|
|
||||||
{iconError === null ? null : (
|
{iconError === null ? null : (
|
||||||
<div className="px-4 pt-2">
|
<div className="px-4 pt-2">
|
||||||
<ErrorNotice error={iconError} />
|
<ErrorNotice error={iconError} />
|
||||||
|
|||||||
@@ -0,0 +1,111 @@
|
|||||||
|
import { useEffect, useRef, useState } from 'react';
|
||||||
|
import { useMutation } from '@tanstack/react-query';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
|
||||||
|
import { renameGroupDirectChannel } from '@/api/friends';
|
||||||
|
import type { Channel } from '@/api/types';
|
||||||
|
import { ErrorNotice } from '@/components/ui/ErrorNotice';
|
||||||
|
import { Field } from '@/components/ui/Field';
|
||||||
|
import { Modal } from '@/components/ui/Modal';
|
||||||
|
import { Button } from '@/components/ui/primitives';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Переименование групповой беседы (AGENT.md 7.8, Фаза 7): имя задаёт владелец
|
||||||
|
* через `PATCH /channels/{id}`, остальным участникам его приносит
|
||||||
|
* `DM_CHANNEL_UPDATE`. Сервер требует 1–64 символа, поэтому пустое имя
|
||||||
|
* отправить нельзя — кнопка сохранения заблокирована.
|
||||||
|
*/
|
||||||
|
export function GroupRenameDialog({
|
||||||
|
channel,
|
||||||
|
open,
|
||||||
|
onClose,
|
||||||
|
onRenamed,
|
||||||
|
}: {
|
||||||
|
channel: Channel;
|
||||||
|
open: boolean;
|
||||||
|
onClose: () => void;
|
||||||
|
/** Ответ сервера: беседа с новым именем — кладём в стор и список бесед. */
|
||||||
|
onRenamed: (updated: Channel) => void;
|
||||||
|
}) {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const [name, setName] = useState(channel.name);
|
||||||
|
const formRef = useRef<HTMLFormElement | null>(null);
|
||||||
|
|
||||||
|
const rename = useMutation({
|
||||||
|
mutationFn: (value: string) => renameGroupDirectChannel(channel.id, value),
|
||||||
|
onSuccess: (updated) => {
|
||||||
|
onRenamed(updated);
|
||||||
|
onClose();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const { reset } = rename;
|
||||||
|
|
||||||
|
// Каждое открытие начинается с текущего имени: подстройка состояния под
|
||||||
|
// изменившийся проп во время рендера (тот же приём, что в `Modal`), эффект
|
||||||
|
// дал бы лишний кадр со старым черновиком.
|
||||||
|
const [wasOpen, setWasOpen] = useState(open);
|
||||||
|
if (wasOpen !== open) {
|
||||||
|
setWasOpen(open);
|
||||||
|
if (open) {
|
||||||
|
setName(channel.name);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Фокус ставим в поле: окно открывают ровно за тем, чтобы набрать имя.
|
||||||
|
useEffect(() => {
|
||||||
|
if (open) {
|
||||||
|
formRef.current?.querySelector('input')?.focus();
|
||||||
|
}
|
||||||
|
}, [open]);
|
||||||
|
|
||||||
|
const trimmed = name.trim();
|
||||||
|
|
||||||
|
/** Закрытие гасит отказ прошлой попытки: он не должен встречать при открытии. */
|
||||||
|
const close = (): void => {
|
||||||
|
reset();
|
||||||
|
onClose();
|
||||||
|
};
|
||||||
|
|
||||||
|
const submit = (): void => {
|
||||||
|
if (trimmed !== '' && !rename.isPending) {
|
||||||
|
rename.mutate(trimmed);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Modal
|
||||||
|
open={open}
|
||||||
|
title={t('friends.group.renameTitle')}
|
||||||
|
onClose={close}
|
||||||
|
footer={
|
||||||
|
<>
|
||||||
|
<Button variant="ghost" onClick={close}>
|
||||||
|
{t('common.cancel')}
|
||||||
|
</Button>
|
||||||
|
<Button onClick={submit} disabled={trimmed === '' || rename.isPending}>
|
||||||
|
{t(rename.isPending ? 'common.saving' : 'common.save')}
|
||||||
|
</Button>
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<form
|
||||||
|
ref={formRef}
|
||||||
|
data-testid="dm-rename-form"
|
||||||
|
onSubmit={(event) => {
|
||||||
|
event.preventDefault();
|
||||||
|
submit();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Field
|
||||||
|
label={t('friends.group.name')}
|
||||||
|
name="group_name"
|
||||||
|
value={name}
|
||||||
|
maxLength={64}
|
||||||
|
placeholder={t('friends.group.namePlaceholder')}
|
||||||
|
onChange={(event) => setName(event.target.value)}
|
||||||
|
/>
|
||||||
|
{rename.isError ? <ErrorNotice className="mt-3" error={rename.error} /> : null}
|
||||||
|
</form>
|
||||||
|
</Modal>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -445,8 +445,10 @@
|
|||||||
"create": "Create",
|
"create": "Create",
|
||||||
"members": "Members: {{count}}",
|
"members": "Members: {{count}}",
|
||||||
"open": "Open the group “{{name}}”, members: {{count}}",
|
"open": "Open the group “{{name}}”, members: {{count}}",
|
||||||
|
"menu": "Conversation menu",
|
||||||
|
"rename": "Rename",
|
||||||
|
"renameTitle": "Rename conversation",
|
||||||
"icon": {
|
"icon": {
|
||||||
"menu": "Conversation icon",
|
|
||||||
"upload": "Upload icon",
|
"upload": "Upload icon",
|
||||||
"remove": "Remove icon"
|
"remove": "Remove icon"
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -445,8 +445,10 @@
|
|||||||
"create": "Создать",
|
"create": "Создать",
|
||||||
"members": "Участников: {{count}}",
|
"members": "Участников: {{count}}",
|
||||||
"open": "Открыть группу «{{name}}», участников: {{count}}",
|
"open": "Открыть группу «{{name}}», участников: {{count}}",
|
||||||
|
"menu": "Меню беседы",
|
||||||
|
"rename": "Переименовать",
|
||||||
|
"renameTitle": "Переименовать беседу",
|
||||||
"icon": {
|
"icon": {
|
||||||
"menu": "Иконка беседы",
|
|
||||||
"upload": "Загрузить иконку",
|
"upload": "Загрузить иконку",
|
||||||
"remove": "Удалить иконку"
|
"remove": "Удалить иконку"
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -154,25 +154,25 @@ describe('иконка групповой беседы', () => {
|
|||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('меню иконки есть у владельца и отсутствует у участника', async () => {
|
it('меню владельца с иконкой есть у владельца и отсутствует у участника', async () => {
|
||||||
const channels = [groupChannel({ iconFileId: '777' })];
|
const channels = [groupChannel({ iconFileId: '777' })];
|
||||||
installFetch(dmRoutes(() => channels));
|
installFetch(dmRoutes(() => channels));
|
||||||
await openGroup();
|
await openGroup();
|
||||||
|
|
||||||
const menu = await screen.findByTestId('dm-icon-menu');
|
const menu = await screen.findByTestId('dm-owner-menu');
|
||||||
await userEvent.click(menu);
|
await userEvent.click(menu);
|
||||||
expect(await screen.findByTestId('dm-icon-upload')).toBeVisible();
|
expect(await screen.findByTestId('dm-icon-upload')).toBeVisible();
|
||||||
// Иконка уже есть: пункт удаления тоже доступен владельцу.
|
// Иконка уже есть: пункт удаления тоже доступен владельцу.
|
||||||
expect(screen.getByTestId('dm-icon-remove')).toBeVisible();
|
expect(screen.getByTestId('dm-icon-remove')).toBeVisible();
|
||||||
});
|
});
|
||||||
|
|
||||||
it('участник-не-владелец не видит меню иконки, но видит саму иконку', async () => {
|
it('участник-не-владелец не видит меню владельца, но видит саму иконку', async () => {
|
||||||
// Владелец беседы — Боб, текущий пользователь (Alice) только участник.
|
// Владелец беседы — Боб, текущий пользователь (Alice) только участник.
|
||||||
const channels = [groupChannel({ ownerId: 'user-2', iconFileId: '777' })];
|
const channels = [groupChannel({ ownerId: 'user-2', iconFileId: '777' })];
|
||||||
installFetch(dmRoutes(() => channels));
|
installFetch(dmRoutes(() => channels));
|
||||||
await openGroup();
|
await openGroup();
|
||||||
|
|
||||||
expect(screen.queryByTestId('dm-icon-menu')).toBeNull();
|
expect(screen.queryByTestId('dm-owner-menu')).toBeNull();
|
||||||
expect(screen.getByTestId('dm-group-header').querySelector('img')).toHaveAttribute(
|
expect(screen.getByTestId('dm-group-header').querySelector('img')).toHaveAttribute(
|
||||||
'src',
|
'src',
|
||||||
'/files/777',
|
'/files/777',
|
||||||
@@ -203,7 +203,7 @@ describe('иконка групповой беседы', () => {
|
|||||||
const link = await screen.findByTestId('dm-link-dm-group-1');
|
const link = await screen.findByTestId('dm-link-dm-group-1');
|
||||||
expect(link.querySelector('img')).toBeNull();
|
expect(link.querySelector('img')).toBeNull();
|
||||||
|
|
||||||
await userEvent.click(await screen.findByTestId('dm-icon-menu'));
|
await userEvent.click(await screen.findByTestId('dm-owner-menu'));
|
||||||
await userEvent.click(screen.getByTestId('dm-icon-upload'));
|
await userEvent.click(screen.getByTestId('dm-icon-upload'));
|
||||||
// Диалог выбора файла в jsdom не открывается: файл кладём в поле напрямую.
|
// Диалог выбора файла в jsdom не открывается: файл кладём в поле напрямую.
|
||||||
await userEvent.upload(screen.getByTestId('dm-icon-input'), imageFile());
|
await userEvent.upload(screen.getByTestId('dm-icon-input'), imageFile());
|
||||||
@@ -255,7 +255,7 @@ describe('иконка групповой беседы', () => {
|
|||||||
expect(link.querySelector('img')).toHaveAttribute('src', '/files/777');
|
expect(link.querySelector('img')).toHaveAttribute('src', '/files/777');
|
||||||
});
|
});
|
||||||
|
|
||||||
await userEvent.click(await screen.findByTestId('dm-icon-menu'));
|
await userEvent.click(await screen.findByTestId('dm-owner-menu'));
|
||||||
await userEvent.click(screen.getByTestId('dm-icon-remove'));
|
await userEvent.click(screen.getByTestId('dm-icon-remove'));
|
||||||
|
|
||||||
await waitFor(() => {
|
await waitFor(() => {
|
||||||
|
|||||||
@@ -0,0 +1,254 @@
|
|||||||
|
import { describe, expect, it } from 'vitest';
|
||||||
|
import { screen, waitFor, within } from '@testing-library/react';
|
||||||
|
import userEvent from '@testing-library/user-event';
|
||||||
|
|
||||||
|
import type { Relationships } from '@/api/friends';
|
||||||
|
import {
|
||||||
|
apiError,
|
||||||
|
bodyOf,
|
||||||
|
findRequest,
|
||||||
|
installFetch,
|
||||||
|
installGatewaySocket,
|
||||||
|
json,
|
||||||
|
makeReadySnapshot,
|
||||||
|
makeUser,
|
||||||
|
recordedRequests,
|
||||||
|
renderApp,
|
||||||
|
type FetchRoute,
|
||||||
|
} from './helpers';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Переименование групповой беседы (AGENT.md 7.8, D-075): пункт «Переименовать»
|
||||||
|
* в меню владельца, диалог с текущим именем и `PATCH /channels/{id}`. У
|
||||||
|
* остальных участников имя обновляется событием `DM_CHANNEL_UPDATE` — без
|
||||||
|
* перезагрузки и повторного входа (AGENT.md 11.6).
|
||||||
|
*/
|
||||||
|
|
||||||
|
const user = makeUser();
|
||||||
|
|
||||||
|
const instance = {
|
||||||
|
instance: {
|
||||||
|
name: 'glchat-test',
|
||||||
|
registration_enabled: true,
|
||||||
|
allow_guild_creation: true,
|
||||||
|
max_guilds_per_user: 5,
|
||||||
|
main_guild_id: 'g-main',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const friends: Relationships = { friends: [], incoming: [], outgoing: [], blocked: [] };
|
||||||
|
|
||||||
|
/** Групповая беседа в REST-форме: владелец настраивается. */
|
||||||
|
function groupChannel(options: { ownerId?: string; name?: string } = {}) {
|
||||||
|
return {
|
||||||
|
id: 'dm-group-1',
|
||||||
|
type: 'dm',
|
||||||
|
is_group: true,
|
||||||
|
name: options.name ?? 'Игровая',
|
||||||
|
member_count: 3,
|
||||||
|
owner_id: options.ownerId ?? user.id,
|
||||||
|
can_send: true,
|
||||||
|
can_view: true,
|
||||||
|
recipients: [
|
||||||
|
{
|
||||||
|
user_id: user.id,
|
||||||
|
username: 'alice',
|
||||||
|
display_name: 'Alice',
|
||||||
|
status: 'online',
|
||||||
|
visible_status: 'online',
|
||||||
|
is_owner: options.ownerId === undefined,
|
||||||
|
is_self: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
user_id: 'user-2',
|
||||||
|
username: 'bob',
|
||||||
|
display_name: 'Боб',
|
||||||
|
status: 'online',
|
||||||
|
visible_status: 'online',
|
||||||
|
is_owner: false,
|
||||||
|
is_self: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
user_id: 'user-3',
|
||||||
|
username: 'carol',
|
||||||
|
display_name: 'Кэрол',
|
||||||
|
status: 'offline',
|
||||||
|
visible_status: 'offline',
|
||||||
|
is_owner: false,
|
||||||
|
is_self: false,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Маршруты приложения: список бесед отдаётся из изменяемого состояния — так
|
||||||
|
* тест видит, что сервер уже принял новое имя.
|
||||||
|
*/
|
||||||
|
function dmRoutes(current: () => unknown[], extra: FetchRoute[] = []): FetchRoute[] {
|
||||||
|
return [
|
||||||
|
...extra,
|
||||||
|
{ match: '/api/v1/users/@me/relationships', response: () => json(friends) },
|
||||||
|
{ match: '/api/v1/users/@me/guilds', response: () => json({ guilds: [] }) },
|
||||||
|
{ match: '/api/v1/channels/dm-group-1/messages', response: () => json({ messages: [] }) },
|
||||||
|
{ match: '/api/v1/channels/dm-group-1/pins', response: () => json({ messages: [] }) },
|
||||||
|
{
|
||||||
|
match: '/api/v1/channels/dm-group-1/ack',
|
||||||
|
method: 'POST',
|
||||||
|
response: () => json({ ok: true }),
|
||||||
|
},
|
||||||
|
{ match: '/api/v1/users/@me/channels', response: () => json({ channels: current() }) },
|
||||||
|
{ match: '/api/v1/users/@me', response: () => json({ user }) },
|
||||||
|
{ match: '/api/v1/instance', response: () => json(instance) },
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Открывает беседу и ждёт её отрисовки в сайдбаре. */
|
||||||
|
async function openGroup() {
|
||||||
|
renderApp('/app/friends/dm-group-1');
|
||||||
|
const gateway = installGatewaySocket(makeReadySnapshot());
|
||||||
|
await gateway.greet();
|
||||||
|
await screen.findByTestId('dm-group-header');
|
||||||
|
return gateway;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Открывает диалог переименования из меню владельца. */
|
||||||
|
async function openRenameDialog() {
|
||||||
|
await userEvent.click(await screen.findByTestId('dm-owner-menu'));
|
||||||
|
await userEvent.click(await screen.findByTestId('dm-group-rename'));
|
||||||
|
return screen.findByRole('dialog', { name: 'Переименовать беседу' });
|
||||||
|
}
|
||||||
|
|
||||||
|
describe('переименование групповой беседы', () => {
|
||||||
|
it('владелец переименовывает беседу: имя меняется в шапке и в списке', async () => {
|
||||||
|
let channels = [groupChannel()];
|
||||||
|
const fetchMock = installFetch(
|
||||||
|
dmRoutes(
|
||||||
|
() => channels,
|
||||||
|
[
|
||||||
|
{
|
||||||
|
match: '/api/v1/channels/dm-group-1',
|
||||||
|
method: 'PATCH',
|
||||||
|
response: () => {
|
||||||
|
const updated = groupChannel({ name: 'Кино по пятницам' });
|
||||||
|
channels = [updated];
|
||||||
|
return json({ channel: updated });
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
),
|
||||||
|
);
|
||||||
|
await openGroup();
|
||||||
|
|
||||||
|
const dialog = await openRenameDialog();
|
||||||
|
// Поле уже заполнено текущим именем: переименование начинается с правки.
|
||||||
|
const field = within(dialog).getByLabelText('Название группы');
|
||||||
|
expect(field).toHaveValue('Игровая');
|
||||||
|
await userEvent.clear(field);
|
||||||
|
await userEvent.type(field, 'Кино по пятницам');
|
||||||
|
await userEvent.click(within(dialog).getByRole('button', { name: 'Сохранить' }));
|
||||||
|
|
||||||
|
await waitFor(() => {
|
||||||
|
expect(
|
||||||
|
bodyOf(findRequest(fetchMock, { url: '/channels/dm-group-1', method: 'PATCH' })),
|
||||||
|
).toEqual({ name: 'Кино по пятницам' });
|
||||||
|
});
|
||||||
|
// Диалог закрылся, а новое имя видно и в шапке, и в списке бесед.
|
||||||
|
await waitFor(() => {
|
||||||
|
expect(screen.queryByRole('dialog', { name: 'Переименовать беседу' })).toBeNull();
|
||||||
|
});
|
||||||
|
expect(screen.getByTestId('dm-group-header')).toHaveTextContent('Кино по пятницам');
|
||||||
|
expect(await screen.findByTestId('dm-link-dm-group-1')).toHaveTextContent('Кино по пятницам');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('пустое имя отправить нельзя: кнопка сохранения заблокирована', async () => {
|
||||||
|
const fetchMock = installFetch(dmRoutes(() => [groupChannel()]));
|
||||||
|
await openGroup();
|
||||||
|
|
||||||
|
const dialog = await openRenameDialog();
|
||||||
|
await userEvent.clear(within(dialog).getByLabelText('Название группы'));
|
||||||
|
|
||||||
|
expect(within(dialog).getByRole('button', { name: 'Сохранить' })).toBeDisabled();
|
||||||
|
// Пробелы именем не считаются: сервер обрезает их и отвечает отказом.
|
||||||
|
await userEvent.type(within(dialog).getByLabelText('Название группы'), ' ');
|
||||||
|
expect(within(dialog).getByRole('button', { name: 'Сохранить' })).toBeDisabled();
|
||||||
|
expect(
|
||||||
|
findRequest(fetchMock, { url: '/channels/dm-group-1', method: 'PATCH' }),
|
||||||
|
).toBeUndefined();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('отмена закрывает диалог без запроса и не запоминает черновик', async () => {
|
||||||
|
const fetchMock = installFetch(dmRoutes(() => [groupChannel()]));
|
||||||
|
await openGroup();
|
||||||
|
|
||||||
|
const dialog = await openRenameDialog();
|
||||||
|
await userEvent.clear(within(dialog).getByLabelText('Название группы'));
|
||||||
|
await userEvent.type(within(dialog).getByLabelText('Название группы'), 'Черновик');
|
||||||
|
await userEvent.click(within(dialog).getByRole('button', { name: 'Отмена' }));
|
||||||
|
|
||||||
|
await waitFor(() => {
|
||||||
|
expect(screen.queryByRole('dialog', { name: 'Переименовать беседу' })).toBeNull();
|
||||||
|
});
|
||||||
|
expect(
|
||||||
|
findRequest(fetchMock, { url: '/channels/dm-group-1', method: 'PATCH' }),
|
||||||
|
).toBeUndefined();
|
||||||
|
expect(screen.getByTestId('dm-group-header')).toHaveTextContent('Игровая');
|
||||||
|
|
||||||
|
// Второе открытие снова показывает текущее имя сервера, а не черновик.
|
||||||
|
const reopened = await openRenameDialog();
|
||||||
|
expect(within(reopened).getByLabelText('Название группы')).toHaveValue('Игровая');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('отказ сервера показывается в диалоге, имя остаётся прежним', async () => {
|
||||||
|
installFetch(
|
||||||
|
dmRoutes(
|
||||||
|
() => [groupChannel()],
|
||||||
|
[
|
||||||
|
{
|
||||||
|
match: '/api/v1/channels/dm-group-1',
|
||||||
|
method: 'PATCH',
|
||||||
|
response: () =>
|
||||||
|
apiError('validation.failed', 422, 'group name must be 1-64 characters'),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
),
|
||||||
|
);
|
||||||
|
await openGroup();
|
||||||
|
|
||||||
|
const dialog = await openRenameDialog();
|
||||||
|
const field = within(dialog).getByLabelText('Название группы');
|
||||||
|
await userEvent.clear(field);
|
||||||
|
await userEvent.type(field, 'Слишком длинное имя');
|
||||||
|
await userEvent.click(within(dialog).getByRole('button', { name: 'Сохранить' }));
|
||||||
|
|
||||||
|
// Окно не закрывается: пользователь видит причину и может исправить имя.
|
||||||
|
expect(await within(dialog).findByRole('alert')).toBeVisible();
|
||||||
|
expect(screen.getByTestId('dm-group-header')).toHaveTextContent('Игровая');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('участнику-не-владельцу пункт переименования недоступен', async () => {
|
||||||
|
installFetch(dmRoutes(() => [groupChannel({ ownerId: 'user-2' })]));
|
||||||
|
await openGroup();
|
||||||
|
|
||||||
|
expect(screen.queryByTestId('dm-group-rename')).toBeNull();
|
||||||
|
expect(screen.queryByTestId('dm-owner-menu')).toBeNull();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('событие DM_CHANNEL_UPDATE доносит новое имя без перезагрузки', async () => {
|
||||||
|
let channels = [groupChannel()];
|
||||||
|
const fetchMock = installFetch(dmRoutes(() => channels));
|
||||||
|
const gateway = await openGroup();
|
||||||
|
|
||||||
|
// Беседу переименовал владелец (возможно, с другого устройства): сервер
|
||||||
|
// сообщает об изменении события, а список перечитывается по REST.
|
||||||
|
channels = [groupChannel({ name: 'Новое имя' })];
|
||||||
|
gateway.dispatch('DM_CHANNEL_UPDATE', { channel_id: 'dm-group-1' });
|
||||||
|
|
||||||
|
await waitFor(() => {
|
||||||
|
expect(screen.getByTestId('dm-group-header')).toHaveTextContent('Новое имя');
|
||||||
|
});
|
||||||
|
expect(await screen.findByTestId('dm-link-dm-group-1')).toHaveTextContent('Новое имя');
|
||||||
|
// Имя пришло событием: своих PATCH-запросов тест не делал.
|
||||||
|
expect(recordedRequests(fetchMock).filter((request) => request.method === 'PATCH')).toEqual([]);
|
||||||
|
});
|
||||||
|
});
|
||||||
Reference in New Issue
Block a user