|
| 1 | +import { createElement, type ComponentProps, type ReactNode } from 'react' |
| 2 | +import { renderToStaticMarkup } from 'react-dom/server' |
| 3 | +import { describe, expect, it, vi } from 'vitest' |
| 4 | +import type { RoomState } from '@/lib/api-types' |
| 5 | + |
| 6 | +vi.mock('next-intl', () => ({ |
| 7 | + useLocale: () => 'en', |
| 8 | + useTranslations: (namespace: string) => (key: string) => `${namespace}.${key}`, |
| 9 | +})) |
| 10 | + |
| 11 | +vi.mock('@/components/pwa/PushOptIn', () => ({ PushOptIn: () => null })) |
| 12 | +vi.mock('@/components/room/PeopleSection', () => ({ PeopleSection: () => null })) |
| 13 | +vi.mock('@/components/room/RoomEmblem', () => ({ |
| 14 | + RoomEmblem: ({ value }: { value: string | null }) => createElement('span', { 'data-room-emblem': value ?? 'auto' }), |
| 15 | +})) |
| 16 | +vi.mock('@/components/room/RoomExport', () => ({ RoomExport: () => null })) |
| 17 | +vi.mock('@/components/room/ThemePicker', () => ({ ThemePicker: () => null })) |
| 18 | +vi.mock('@/components/ui/BaseInput', () => ({ |
| 19 | + BaseInput: (props: ComponentProps<'input'>) => createElement('input', props), |
| 20 | +})) |
| 21 | +vi.mock('@/components/ui/Button', () => ({ |
| 22 | + Button: ({ |
| 23 | + children, |
| 24 | + icon: _icon, |
| 25 | + shadowSize: _shadowSize, |
| 26 | + ...props |
| 27 | + }: ComponentProps<'button'> & { icon?: string; shadowSize?: string }) => createElement('button', props, children), |
| 28 | +})) |
| 29 | +vi.mock('@/components/ui/CloseButton', () => ({ CloseButton: () => null })) |
| 30 | +vi.mock('@/components/ui/Drawer', () => ({ |
| 31 | + Drawer: ({ children }: { children?: ReactNode }) => children, |
| 32 | + DrawerContent: ({ children, ...props }: ComponentProps<'div'>) => createElement('div', props, children), |
| 33 | + DrawerHeader: ({ children, ...props }: ComponentProps<'div'>) => createElement('div', props, children), |
| 34 | + DrawerTitle: ({ children, ...props }: ComponentProps<'h2'>) => createElement('h2', props, children), |
| 35 | +})) |
| 36 | +vi.mock('@/components/ui/DrawerLayout', () => ({ |
| 37 | + DrawerActions: ({ children, ...props }: ComponentProps<'div'>) => createElement('div', props, children), |
| 38 | + DrawerBody: ({ children, ...props }: ComponentProps<'div'>) => createElement('div', props, children), |
| 39 | + drawerContentClass: '', |
| 40 | + drawerHeaderClass: '', |
| 41 | +})) |
| 42 | +vi.mock('@/components/ui/Doodle', () => ({ |
| 43 | + Doodle: ({ name }: { name: string }) => createElement('span', { 'data-rendered-doodle': name }), |
| 44 | +})) |
| 45 | +vi.mock('@/components/ui/Icon', () => ({ |
| 46 | + Icon: ({ name }: { name: string }) => createElement('span', { 'data-room-picker-icon': name }), |
| 47 | +})) |
| 48 | +vi.mock('@/components/ui/SettingRow', () => ({ |
| 49 | + SettingRow: ({ label, trailing }: { label: string; trailing?: ReactNode }) => |
| 50 | + createElement('div', null, label, trailing), |
| 51 | +})) |
| 52 | +vi.mock('@/components/ui/SlideToConfirm', () => ({ SlideToConfirm: () => null })) |
| 53 | +vi.mock('@/lib/analytics', () => ({ roomProps: () => ({}), track: () => undefined })) |
| 54 | +vi.mock('@/lib/clipboard', () => ({ copyText: async () => true })) |
| 55 | +vi.mock('@/lib/error-messages', () => ({ useErrorMessage: () => () => 'error' })) |
| 56 | +vi.mock('@/lib/queries', () => ({ |
| 57 | + useSetEmblem: () => ({ isPending: false, mutate: vi.fn() }), |
| 58 | + useSetRoomName: () => ({ isPending: false, mutate: vi.fn() }), |
| 59 | + useSetTheme: () => ({ isPending: false, mutate: vi.fn() }), |
| 60 | +})) |
| 61 | +vi.mock('@/lib/use-settings', () => ({ useFeedback: () => () => undefined })) |
| 62 | +vi.mock('./DeviceSheet', () => ({ DeviceSheet: () => null })) |
| 63 | +vi.mock('./HistorySheet', () => ({ HistorySheet: () => null })) |
| 64 | +vi.mock('./RoomDrawingEditor', () => ({ RoomDrawingEditor: () => null })) |
| 65 | + |
| 66 | +import { ROOM_DOODLES } from './DoodlePicker' |
| 67 | +import { SettingsSheet } from './SettingsSheet' |
| 68 | + |
| 69 | +const state: RoomState = { |
| 70 | + room: { |
| 71 | + id: 'room-1', |
| 72 | + slug: 'summer-trip', |
| 73 | + name: 'Summer trip', |
| 74 | + emoji: null, |
| 75 | + currency: 'USD', |
| 76 | + coverUrl: null, |
| 77 | + theme: null, |
| 78 | + createdAt: '2026-08-03T10:00:00.000Z', |
| 79 | + archivedAt: null, |
| 80 | + }, |
| 81 | + members: [], |
| 82 | + expenses: [], |
| 83 | + settlements: [], |
| 84 | + balances: {}, |
| 85 | + suggestedTransfers: [], |
| 86 | +} |
| 87 | + |
| 88 | +const renderSettings = () => |
| 89 | + renderToStaticMarkup( |
| 90 | + <SettingsSheet |
| 91 | + open |
| 92 | + onClose={() => undefined} |
| 93 | + room={state.room} |
| 94 | + members={state.members} |
| 95 | + state={state} |
| 96 | + identity={null} |
| 97 | + me={null} |
| 98 | + onShare={() => undefined} |
| 99 | + onForgetIdentity={() => undefined} |
| 100 | + onOpenCharacter={() => undefined} |
| 101 | + /> |
| 102 | + ) |
| 103 | + |
| 104 | +describe('SettingsSheet room drawing picker', () => { |
| 105 | + it('offers the custom drawing after every preset inside room settings', () => { |
| 106 | + const html = renderSettings() |
| 107 | + const offeredDrawings = [...html.matchAll(/data-doodle="([^"]+)"/g)].map((match) => match[1]) |
| 108 | + |
| 109 | + expect(offeredDrawings).toEqual([...ROOM_DOODLES, 'custom']) |
| 110 | + expect(html.indexOf('data-testid="room-card"')).toBeLessThan(html.indexOf('data-doodle="custom"')) |
| 111 | + expect(html).toContain('aria-label="room.create.drawYourOwn"') |
| 112 | + }) |
| 113 | + |
| 114 | + it('does not present the custom room drawing as a pencil room icon', () => { |
| 115 | + const html = renderSettings() |
| 116 | + |
| 117 | + expect(html).not.toContain('data-room-picker-icon="pencil"') |
| 118 | + expect(html).not.toContain('data-rendered-doodle="iconpencil"') |
| 119 | + }) |
| 120 | +}) |
0 commit comments