diff --git a/packages/twenty-front/src/modules/object-record/record-calendar/record-calendar-card/components/__tests__/RecordCalendarCard.test.tsx b/packages/twenty-front/src/modules/object-record/record-calendar/record-calendar-card/components/__tests__/RecordCalendarCard.test.tsx new file mode 100644 index 0000000000..24263e6a72 --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-calendar/record-calendar-card/components/__tests__/RecordCalendarCard.test.tsx @@ -0,0 +1,126 @@ +import { fireEvent, render, screen } from '@testing-library/react'; + +import { RecordCalendarCard } from '@/object-record/record-calendar/record-calendar-card/components/RecordCalendarCard'; + +const mockOpenRecordFromIndexView = jest.fn(); +const mockUseGetCurrentViewOnly = jest.fn(); + +jest.mock('@/views/hooks/useGetCurrentViewOnly', () => ({ + useGetCurrentViewOnly: () => mockUseGetCurrentViewOnly(), +})); +jest.mock( + '@/object-record/record-index/hooks/useOpenRecordFromIndexView', + () => ({ + useOpenRecordFromIndexView: () => ({ + openRecordFromIndexView: mockOpenRecordFromIndexView, + }), + }), +); +jest.mock( + '@/ui/utilities/state/jotai/hooks/useAtomComponentFamilyState', + () => ({ useAtomComponentFamilyState: () => [false, jest.fn()] }), +); +jest.mock( + '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue', + () => ({ useAtomComponentStateValue: () => false }), +); +jest.mock( + '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow', + () => ({ useAvailableComponentInstanceIdOrThrow: () => 'calendar-id' }), +); +jest.mock('@/ui/utilities/state/jotai/hooks/useSetAtomComponentState', () => ({ + useSetAtomComponentState: () => jest.fn(), +})); +jest.mock('@/ui/layout/dropdown/hooks/useOpenDropdown', () => ({ + useOpenDropdown: () => ({ openDropdown: jest.fn() }), +})); +jest.mock( + '@/object-record/record-field-list/contexts/RecordFieldsScopeContext', + () => ({ + RecordFieldsScopeContextProvider: ({ + children, + }: { + children: React.ReactNode; + }) => children, + }), +); +jest.mock( + '@/object-record/record-calendar/record-calendar-card/anchored-portal/components/RecordCalendarCardCellHoveredPortal', + () => ({ RecordCalendarCardCellHoveredPortal: () => null }), +); +jest.mock( + '@/object-record/record-calendar/record-calendar-card/anchored-portal/components/RecordCalendarCardCellEditModePortal', + () => ({ RecordCalendarCardCellEditModePortal: () => null }), +); +jest.mock( + '@/object-record/record-calendar/record-calendar-card/components/RecordCalendarCardHeader', + () => ({ + RecordCalendarCardHeader: () =>
, + }), +); +jest.mock( + '@/object-record/record-calendar/record-calendar-card/components/RecordCalendarCardBody', + () => ({ + RecordCalendarCardBody: () =>
, + }), +); +jest.mock('@/object-record/record-card/components/RecordCard', () => ({ + RecordCard: ({ + children, + onClick, + }: { + children: React.ReactNode; + onClick?: () => void; + }) => ( + + ), +})); +jest.mock('twenty-ui/layout', () => ({ + AnimatedEaseInOut: ({ + children, + isOpen, + }: { + children: React.ReactNode; + isOpen: boolean; + }) => (isOpen ? children : null), +})); + +describe('RecordCalendarCard', () => { + beforeEach(() => { + jest.clearAllMocks(); + }); + + it('shows the full card body without making the whole card clickable', () => { + mockUseGetCurrentViewOnly.mockReturnValue({ + currentView: { isCompact: false }, + }); + + render(); + + expect(screen.getByTestId('card-header')).toBeInTheDocument(); + expect(screen.getByTestId('card-body')).toBeInTheDocument(); + + fireEvent.click(screen.getByTestId('record-card')); + + expect(mockOpenRecordFromIndexView).not.toHaveBeenCalled(); + }); + + it('hides the body and makes the whole compact card clickable', () => { + mockUseGetCurrentViewOnly.mockReturnValue({ + currentView: { isCompact: true }, + }); + + render(); + + expect(screen.getByTestId('card-header')).toBeInTheDocument(); + expect(screen.queryByTestId('card-body')).not.toBeInTheDocument(); + + fireEvent.click(screen.getByTestId('record-card')); + + expect(mockOpenRecordFromIndexView).toHaveBeenCalledWith({ + recordId: 'record-id', + }); + }); +}); diff --git a/packages/twenty-front/src/modules/object-record/record-calendar/time-grid/components/RecordCalendarTimeGrid.tsx b/packages/twenty-front/src/modules/object-record/record-calendar/time-grid/components/RecordCalendarTimeGrid.tsx index f1fc0ffb64..b5743a5dc6 100644 --- a/packages/twenty-front/src/modules/object-record/record-calendar/time-grid/components/RecordCalendarTimeGrid.tsx +++ b/packages/twenty-front/src/modules/object-record/record-calendar/time-grid/components/RecordCalendarTimeGrid.tsx @@ -111,8 +111,17 @@ const StyledDayNumber = styled.span<{ isToday: boolean }>` `; const StyledAllDayLabel = styled(StyledHeaderGutter)` - border-top: 1px solid ${themeCssVariables.border.color.light}; - height: 28px; + align-items: flex-start; + height: auto; + min-height: 28px; + padding-top: ${themeCssVariables.spacing[1]}; +`; + +const StyledAllDayGrid = styled.div<{ dayCount: number }>` + display: grid; + grid-template-columns: + ${RECORD_CALENDAR_WEEK_DIMENSIONS.timeGutterWidth}px + repeat(${({ dayCount }) => dayCount}, minmax(120px, 1fr)); `; const StyledGrid = styled.div<{ dayCount: number }>` @@ -568,22 +577,20 @@ export const RecordCalendarTimeGrid = ({ ); })} - {isAllDayView && ( - <> - {t`All day`} - {days.map(({ date }) => ( - - ))} - - )} + {isAllDayView && ( + + {t`All day`} + {days.map(({ date }) => ( + + ))} + + )} {isTimedView && ( { const recordIds = useAtomComponentFamilySelectorValue( @@ -43,16 +43,9 @@ export const RecordCalendarTimeGridAllDayCell = ({ return ( {allDayRecordIds.map((recordId) => ( - + + + ))} ); diff --git a/packages/twenty-front/src/modules/object-record/record-calendar/time-grid/components/__tests__/RecordCalendarTimeGridAllDayCell.test.tsx b/packages/twenty-front/src/modules/object-record/record-calendar/time-grid/components/__tests__/RecordCalendarTimeGridAllDayCell.test.tsx index 82376c2e18..255d3f677d 100644 --- a/packages/twenty-front/src/modules/object-record/record-calendar/time-grid/components/__tests__/RecordCalendarTimeGridAllDayCell.test.tsx +++ b/packages/twenty-front/src/modules/object-record/record-calendar/time-grid/components/__tests__/RecordCalendarTimeGridAllDayCell.test.tsx @@ -14,20 +14,10 @@ jest.mock( }), ); jest.mock( - '@/object-record/record-calendar/week/components/RecordCalendarWeekEvent', + '@/object-record/record-calendar/record-calendar-card/components/RecordCalendarCard', () => ({ - RecordCalendarWeekEvent: ({ - isAllDay, - recordId, - }: { - isAllDay: boolean; - recordId: string; - }) => ( -
+ RecordCalendarCard: ({ recordId }: { recordId: string }) => ( +
), }), ); @@ -44,41 +34,31 @@ describe('RecordCalendarTimeGridAllDayCell', () => { render( , ); expect( - screen.getAllByTestId('all-day-event').map((element) => ({ - isAllDay: element.dataset.isAllDay, - recordId: element.dataset.recordId, - })), - ).toEqual([ - { - isAllDay: 'true', - recordId: 'first', - }, - { - isAllDay: 'true', - recordId: 'second', - }, - { - isAllDay: 'true', - recordId: 'third', - }, - { - isAllDay: 'true', - recordId: 'fourth', - }, - { - isAllDay: 'true', - recordId: 'fifth', - }, - ]); + screen + .getAllByTestId('all-day-card') + .map((element) => element.dataset.recordId), + ).toEqual(['first', 'second', 'third', 'fourth', 'fifth']); expect(screen.queryByText(/^\+\d+$/)).not.toBeInTheDocument(); }); + + it('does not render DATE_TIME records in the all-day cell', () => { + mockUseAtomComponentFamilySelectorValue.mockReturnValue(['first']); + + render( + , + ); + + expect(screen.queryByTestId('all-day-card')).not.toBeInTheDocument(); + }); });