Replaces the four legacy hardcoded emoji arrays (settings avatar,
onboarding-create, CreateCollectiveModal, manage-collective rename) with
`<EmojiPicker selected={…} onSelect={…} />`. The shared component
delivers ~280 codepoints across 4 tabs instead of the previous 8–24
per surface, with consistent layout and behaviour.
Backwards-incompatible testid change on the manage page: the old
`collective-emoji-option-{e}` per-cell testid is gone — every cell now
lives under the picker's `emoji-picker-cell-{e}` namespace. Two existing
specs (onboarding O-02 + rename MC-01a) are updated to drive the new
tab → cell flow.
New e2e file `tests/e2e/emoji-picker.test.ts` covers EP-E-01..02:
- EP-E-01 — Ana on /settings picks 🍎 from "Comida"; DB row updates.
- EP-E-02 — Eva on /onboarding creates a collective with 🐱 from
"Animales"; sidebar reflects the choice.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
68 lines
2.5 KiB
TypeScript
68 lines
2.5 KiB
TypeScript
/**
|
|
* MC-01 (rescued from Fase 7) — /collective/manage rename + emoji change.
|
|
*
|
|
* Admin (Ana) edits name + emoji inline; the value persists across reload.
|
|
* Member (Borja) does not see the editable inputs.
|
|
*
|
|
* Cleanup: restore the seed name + emoji in afterAll so downstream suites
|
|
* that hard-match "Casa García-López" / "🏠" don't break.
|
|
*/
|
|
import { test, expect } from '@playwright/test';
|
|
import { USERS } from '../fixtures/users.js';
|
|
import { loginAs } from '../fixtures/login.js';
|
|
import { closePool, sql, COLLECTIVE_ID } from '@colectivo/test-utils';
|
|
|
|
test.describe.configure({ mode: 'serial' });
|
|
|
|
test.describe('Rename collective (CU-H07)', () => {
|
|
test.afterAll(async () => {
|
|
await sql(`UPDATE public.collectives SET name = $1, emoji = $2 WHERE id = $3`, [
|
|
'Casa García-López',
|
|
'🏠',
|
|
COLLECTIVE_ID
|
|
]);
|
|
await closePool();
|
|
});
|
|
|
|
test('MC-01a: admin renames + changes emoji; value persists across reload', async ({
|
|
page
|
|
}) => {
|
|
await loginAs(page, USERS.ana);
|
|
await page.goto('/collective/manage');
|
|
|
|
const newName = `Casa renamed ${Date.now()}`;
|
|
const nameInput = page.getByTestId('collective-name-edit');
|
|
await expect(nameInput).toBeVisible({ timeout: 15_000 });
|
|
await nameInput.fill(newName);
|
|
await page.getByTestId('collective-name-save').click();
|
|
|
|
// Pick a different emoji from the new tabbed EmojiPicker (Fase 19).
|
|
// 🏡 lives in the "objects" tab; default is "faces".
|
|
await page.getByTestId('collective-emoji-toggle').click();
|
|
await page.getByTestId('emoji-picker-tab-objects').click();
|
|
await page.getByTestId('emoji-picker-cell-🏡').click();
|
|
|
|
// Reload and verify the inputs reflect the persisted value.
|
|
await page.reload();
|
|
await expect(page.getByTestId('collective-name-edit')).toHaveValue(newName, {
|
|
timeout: 15_000
|
|
});
|
|
|
|
const row = await sql('SELECT name, emoji FROM public.collectives WHERE id = $1', [
|
|
COLLECTIVE_ID
|
|
]);
|
|
expect(row.rows[0].name).toBe(newName);
|
|
expect(row.rows[0].emoji).toBe('🏡');
|
|
});
|
|
|
|
test('MC-01b: non-admin (Borja) does not see editable inputs', async ({ page }) => {
|
|
await loginAs(page, USERS.borja);
|
|
await page.goto('/collective/manage');
|
|
|
|
// Members list loads → page is hydrated; editable name input must be absent.
|
|
await expect(page.getByTestId(`member-row-${USERS.ana.id}`)).toBeVisible({ timeout: 15_000 });
|
|
await expect(page.getByTestId('collective-name-edit')).toHaveCount(0);
|
|
await expect(page.getByTestId('collective-emoji-toggle')).toHaveCount(0);
|
|
});
|
|
});
|