|
| 1 | +/** |
| 2 | + * ObjectUI |
| 3 | + * Copyright (c) 2024-present ObjectStack Inc. |
| 4 | + * |
| 5 | + * This source code is licensed under the MIT license found in the |
| 6 | + * LICENSE file in the root directory of this source tree. |
| 7 | + */ |
| 8 | + |
| 9 | +import { describe, it, expect, vi } from 'vitest'; |
| 10 | +import { render, screen, fireEvent } from '@testing-library/react'; |
| 11 | +import '@testing-library/jest-dom'; |
| 12 | +import React from 'react'; |
| 13 | + |
| 14 | +// Mock UI components – Sheet always renders all children so we can test content |
| 15 | +vi.mock('@object-ui/components', () => ({ |
| 16 | + Button: ({ children, onClick, ...props }: any) => ( |
| 17 | + <button onClick={onClick} {...props}>{children}</button> |
| 18 | + ), |
| 19 | + Badge: ({ children, onClick, variant, ...props }: any) => ( |
| 20 | + <span data-variant={variant} onClick={onClick} role="button" {...props}>{children}</span> |
| 21 | + ), |
| 22 | + Sheet: ({ children }: any) => <div data-testid="sheet">{children}</div>, |
| 23 | + SheetContent: ({ children }: any) => <div data-testid="sheet-content">{children}</div>, |
| 24 | + SheetHeader: ({ children }: any) => <div>{children}</div>, |
| 25 | + SheetTitle: ({ children, className }: any) => <div className={className}>{children}</div>, |
| 26 | + SheetTrigger: ({ children }: any) => <>{children}</>, |
| 27 | +})); |
| 28 | + |
| 29 | +vi.mock('lucide-react', () => ({ |
| 30 | + Bell: () => <span data-testid="bell-icon">🔔</span>, |
| 31 | + Plus: () => <span>+</span>, |
| 32 | + Pencil: () => <span>✏</span>, |
| 33 | + Trash2: () => <span>🗑</span>, |
| 34 | + MessageSquare: () => <span>💬</span>, |
| 35 | + Filter: () => <span>🔍</span>, |
| 36 | +})); |
| 37 | + |
| 38 | +import { ActivityFeed, type ActivityItem } from '../components/ActivityFeed'; |
| 39 | + |
| 40 | +const sampleActivities: ActivityItem[] = [ |
| 41 | + { id: '1', type: 'create', objectName: 'Lead', user: 'Alice', description: 'Created lead Alpha', timestamp: new Date().toISOString() }, |
| 42 | + { id: '2', type: 'update', objectName: 'Contact', user: 'Bob', description: 'Updated contact Beta', timestamp: new Date().toISOString() }, |
| 43 | + { id: '3', type: 'delete', objectName: 'Task', user: 'Charlie', description: 'Deleted task Gamma', timestamp: new Date().toISOString() }, |
| 44 | + { id: '4', type: 'comment', objectName: 'Lead', user: 'Diana', description: 'Commented on Delta', timestamp: new Date().toISOString() }, |
| 45 | +]; |
| 46 | + |
| 47 | +describe('ActivityFeed filters', () => { |
| 48 | + it('renders all activities by default', () => { |
| 49 | + // Sheet mock renders all children unconditionally so content is visible |
| 50 | + render(<ActivityFeed activities={sampleActivities} />); |
| 51 | + |
| 52 | + expect(screen.getByText('Created lead Alpha')).toBeInTheDocument(); |
| 53 | + expect(screen.getByText('Updated contact Beta')).toBeInTheDocument(); |
| 54 | + expect(screen.getByText('Deleted task Gamma')).toBeInTheDocument(); |
| 55 | + expect(screen.getByText('Commented on Delta')).toBeInTheDocument(); |
| 56 | + }); |
| 57 | + |
| 58 | + it('toggling a filter type hides matching activities', () => { |
| 59 | + render(<ActivityFeed activities={sampleActivities} />); |
| 60 | + |
| 61 | + // Open the filter panel |
| 62 | + const filterBtn = screen.getByText('Filter'); |
| 63 | + fireEvent.click(filterBtn); |
| 64 | + |
| 65 | + // Toggle off the "create" filter badge |
| 66 | + const createBadge = screen.getByText('create'); |
| 67 | + fireEvent.click(createBadge); |
| 68 | + |
| 69 | + // The "create" activity should be hidden |
| 70 | + expect(screen.queryByText('Created lead Alpha')).not.toBeInTheDocument(); |
| 71 | + |
| 72 | + // Other activities should remain |
| 73 | + expect(screen.getByText('Updated contact Beta')).toBeInTheDocument(); |
| 74 | + expect(screen.getByText('Deleted task Gamma')).toBeInTheDocument(); |
| 75 | + expect(screen.getByText('Commented on Delta')).toBeInTheDocument(); |
| 76 | + }); |
| 77 | + |
| 78 | + it('shows all filter toggle badges', () => { |
| 79 | + render(<ActivityFeed activities={sampleActivities} />); |
| 80 | + |
| 81 | + // Open the filter panel |
| 82 | + const filterBtn = screen.getByText('Filter'); |
| 83 | + fireEvent.click(filterBtn); |
| 84 | + |
| 85 | + expect(screen.getByText('create')).toBeInTheDocument(); |
| 86 | + expect(screen.getByText('update')).toBeInTheDocument(); |
| 87 | + expect(screen.getByText('delete')).toBeInTheDocument(); |
| 88 | + expect(screen.getByText('comment')).toBeInTheDocument(); |
| 89 | + }); |
| 90 | +}); |
0 commit comments