pipu-music/apps/web/e2e/social.spec.ts

import { expect, test } from '@playwright/test';

for (const width of [320, 800, 1280]) {
  test(`friends, messages and sharing at ${width}px`, async ({ page }, info) => {
    await page.setViewportSize({ width, height: 900 });
    await page.emulateMedia({ reducedMotion: width === 1280 ? 'no-preference' : 'reduce' });
    await page.addInitScript(() => localStorage.setItem('pipu.locale', 'ru'));
    if (width === 800) await page.addInitScript(() => Object.defineProperty(navigator, 'share', { configurable: true, value: async (data: ShareData) => { sessionStorage.setItem('shared-url', data.url ?? ''); } }));
    await page.goto('/login');
    await page.getByLabel('Логин', { exact: true }).fill('alice');
    await page.getByRole('textbox', { name: 'Пароль', exact: true }).fill('alice-password');
    await page.getByRole('button', { name: 'Войти', exact: true }).click();
    const openFriends = async () => {
      if (width < 768) await page.getByRole('button', { name: 'Ещё', exact: true }).click();
      await page.getByRole('link', { name: 'Друзья и общение', exact: true }).click();
    };
    await openFriends();
    if (width === 800) await page.evaluate(() => { document.documentElement.dataset.theme = 'light'; });
    await page.getByRole('button', { name: /moderator Начать разговор/ }).click();
    await expect(page.getByRole('region', { name: 'Написать', exact: true }).getByText('Не в сети', { exact: true })).toBeVisible();
    await expect(page.getByRole('region', { name: 'Написать', exact: true }).getByRole('button', { name: 'Слушать вместе', exact: true })).toBeDisabled();
    await expect(page.getByRole('region', { name: 'Написать', exact: true })).toHaveCSS('animation-name', width === 1280 ? /conversationIn/ : 'none');
    if (width === 800) expect((await page.getByRole('textbox', { name: 'Сообщение', exact: true }).boundingBox())!.width).toBeGreaterThan(180);
    await page.getByRole('textbox', { name: 'Сообщение', exact: true }).fill('Привет! Нашёл музыку для нашей поездки 🎵');
    await page.getByRole('button', { name: 'Отправить', exact: true }).click();
    await expect(page.getByText('Привет! Нашёл музыку для нашей поездки 🎵', { exact: true })).toBeVisible();
    await expect(page.getByRole('textbox', { name: 'Сообщение', exact: true })).toBeEmpty();
    await page.getByRole('button', { name: 'Действия с сообщением', exact: true }).click();
    await expect(page.getByRole('menuitem', { name: 'Удалить для всех', exact: true })).toBeVisible();
    await page.getByRole('menuitem', { name: '❤️', exact: true }).click();
    await expect(page.getByRole('button', { name: '❤️ 1', exact: true })).toBeVisible();
    await page.screenshot({ path: info.outputPath('conversation.png'), fullPage: true });
    await page.getByRole('combobox', { name: 'Поиск', exact: true }).fill('кино');
    await page.getByRole('combobox', { name: 'Поиск', exact: true }).press('Enter');
    await page.getByRole('listitem').first().click();
    await page.getByRole('contentinfo', { name: 'Плеер' }).getByRole('button', { name: 'Поделиться треком', exact: true }).click();
    await expect(page.getByRole('dialog').getByRole('button', { name: 'Скопировать ссылку', exact: true })).toBeVisible();
    if (width === 800) {
      await page.getByRole('dialog').getByRole('button', { name: 'Отправить в приложение', exact: true }).click();
      await expect.poll(() => page.evaluate(() => sessionStorage.getItem('shared-url'))).toContain('/track/');
    }
    await page.getByRole('dialog').getByRole('button', { name: 'moderator · Отправить', exact: true }).click();
    await expect(page.getByRole('button', { name: 'moderator · Отправлено', exact: true })).toBeDisabled();
    await page.screenshot({ path: info.outputPath('share-music.png') });
    await page.getByRole('dialog').getByRole('button', { name: 'Закрыть', exact: true }).click();
    await openFriends();
    await page.getByRole('button', { name: /moderator/ }).filter({ has: page.locator('strong') }).click();
    await expect(page.getByRole('link', { name: 'Открыть трек', exact: true })).toBeVisible();
    await page.getByRole('button', { name: 'Музыка из переписки', exact: true }).click();
    await expect(page.getByRole('link', { name: 'Открыть трек', exact: true })).toBeVisible();
    await expect(page.getByRole('textbox', { name: 'Сообщение', exact: true })).toHaveCount(0);
    await page.screenshot({ path: info.outputPath('shared-music.png'), fullPage: true });
    await page.getByRole('button', { name: 'Переписка', exact: true }).click();
    const longMessage = '%20%D0%BC%D1%83%D0%B7%D1%8B%D0%BA%D0%B0'.repeat(45);
    await page.getByRole('textbox', { name: 'Сообщение', exact: true }).fill(longMessage);
    await page.getByRole('button', { name: 'Отправить', exact: true }).click();
    await expect(page.getByRole('button', { name: 'Показать полностью', exact: true })).toBeVisible();
    await page.getByRole('button', { name: 'Показать полностью', exact: true }).click();
    await expect(page.getByRole('button', { name: 'Свернуть текст', exact: true }).locator('..')).toContainText(longMessage);
    await page.getByRole('button', { name: 'Свернуть текст', exact: true }).click();
    if (width === 320) {
      await page.getByRole('button', { name: 'Назад к сообщениям', exact: true }).click();
      await expect(page.getByRole('searchbox', { name: 'Найти диалог', exact: true })).toBeVisible();
      await expect(page.getByRole('textbox', { name: 'Сообщение', exact: true })).toBeHidden();
      await page.getByRole('button', { name: /moderator/ }).filter({ has: page.locator('strong') }).click();
      await page.setViewportSize({ width, height: 560 });
    }
    await expect.poll(async () => {
      const composerBox = (await page.getByRole('textbox', { name: 'Сообщение', exact: true }).boundingBox())!;
      const playerBox = (await page.getByRole('contentinfo', { name: 'Плеер' }).boundingBox())!;
      return composerBox.y + composerBox.height - playerBox.y;
    }).toBeLessThanOrEqual(0);
    await expect.poll(() => page.evaluate(() => {
      const main = document.querySelector('main')!;
      return Math.max(document.documentElement.scrollWidth - innerWidth, main.scrollWidth - main.clientWidth);
    })).toBeLessThanOrEqual(1);
    await page.getByRole('link', { name: 'Открыть трек', exact: true }).click();
    await expect(page.getByRole('heading', { name: 'Группа крови', exact: true })).toBeVisible();
  });
}