Redesign social conversations and shared music

apps/web/src/features/social/ChatMusic.test.tsx

@@ -0,0 +1,33 @@
+import { createI18n } from '@pipu/i18n';
+import { cleanup, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { I18nextProvider } from 'react-i18next';
+import { afterEach, describe, expect, it } from 'vitest';
+import { MessageText } from './ChatMusic';
+
+afterEach(cleanup);
+
+describe('message text', () => {
+  it('compacts a long URL while preserving its full destination when text is collapsed', async () => {
+    const i18n = await createI18n('ru');
+    const url = `https://example.com/music/${'long-path-'.repeat(90)}?share=abc`;
+    render(<I18nextProvider i18n={i18n}><MessageText text={`Послушай ${url}`} /></I18nextProvider>);
+    expect(screen.getByRole('link')).toHaveAttribute('href', url);
+    expect(screen.getByRole('link').textContent!.length).toBeLessThan(65);
+    const user = userEvent.setup();
+    await user.click(screen.getByRole('button', { name: 'Показать полностью' }));
+    expect(screen.getByRole('link')).toHaveAttribute('href', url);
+    expect(screen.getByRole('button', { name: 'Свернуть текст' })).toHaveAttribute('aria-expanded', 'true');
+  });
+
+  it('keeps encoded text and markup literal, with expansion for long messages', async () => {
+    const i18n = await createI18n('ru');
+    const text = `<script>alert(1)</script> ${'%D0%BC%20'.repeat(100)}`;
+    const { container } = render(<I18nextProvider i18n={i18n}><MessageText text={text} /></I18nextProvider>);
+    expect(container.querySelector('script')).toBeNull();
+    expect(container.textContent).toContain('%D0%BC%20');
+    expect(screen.queryByRole('link')).not.toBeInTheDocument();
+    await userEvent.setup().click(screen.getByRole('button', { name: 'Показать полностью' }));
+    expect(container.textContent).toContain(text);
+  });
+});