eduvia/workavia-calendar-front
11
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[#668] Tablet view (#716)

Browse Source 
* draft for tablet view
* adapt sidebar to tablet view
* split menubar to handle tablet and desktop separatly
* split sidebar to handle tablet and desktop separatly
* prettier day navigationin tablet view
* added missing translations
* coderabbit comments
* fix UI of view switcher on tablet, remove hard text
* fix style of selected view option
* fix wrong I18n key
* extracted menubar recurring components to own files
* adjust test case of calendar component
* refactor function change calendar view

Co-authored-by: Camille Moussu <cmoussu@linagora.com>
Co-authored-by: lethemanh <lethemanh@lethemanhs-MacBook-Pro.local>
This commit is contained in:
Camille Moussu
2026-04-03 08:49:37 +02:00
committed by GitHub
parent c1d3cf5f3d
commit 4e57f6b342
36 changed files with 1549 additions and 576 deletions
Download Patch File Download Diff File Expand all files Collapse all files
__test__/components/Calendar.test.tsx
+93 -15
View File
@@ -1,5 +1,6 @@
import CalendarApp from '@/components/Calendar/Calendar'
import CalendarLayout from '@/components/Calendar/CalendarLayout'
import { CALENDAR_VIEWS } from '@/components/Calendar/utils/constants'
import * as calendarDetailThunks from '@/features/Calendars/services'
import * as servicesModule from '@/features/Calendars/services'
import { searchUsers } from '@/features/User/userAPI'
@@ -14,7 +15,16 @@ const mockedSearchUsers = searchUsers as jest.MockedFunction<typeof searchUsers>
// Test wrapper component to provide calendarRef
function CalendarTestWrapper() {
const calendarRef = useRef(null)
return <CalendarApp calendarRef={calendarRef} />
return (
<CalendarApp
setCurrentView={jest.fn()}
onViewChange={jest.fn()}
openSidebar={false}
onCloseSidebar={jest.fn()}
currentView="timeGridWeek"
calendarRef={calendarRef}
/>
)
}
describe('CalendarSelection', () => {
@@ -143,7 +153,14 @@ describe('CalendarSelection', () => {
const mockCalendarRef = { current: null }
await act(async () => {
renderWithProviders(
<CalendarApp calendarRef={mockCalendarRef} />,
<CalendarApp
setCurrentView={jest.fn()}
onViewChange={jest.fn()}
openSidebar={false}
onCloseSidebar={jest.fn()}
currentView="timeGridWeek"
calendarRef={mockCalendarRef}
/>,
preloadedState
)
})
@@ -159,7 +176,14 @@ describe('CalendarSelection', () => {
const mockCalendarRef = { current: null }
await act(async () => {
renderWithProviders(
<CalendarApp calendarRef={mockCalendarRef} />,
<CalendarApp
setCurrentView={jest.fn()}
onViewChange={jest.fn()}
openSidebar={false}
onCloseSidebar={jest.fn()}
currentView="timeGridWeek"
calendarRef={mockCalendarRef}
/>,
preloadedState
)
})
@@ -194,7 +218,14 @@ describe('CalendarSelection', () => {
)
await act(async () => {
renderWithProviders(
<CalendarApp calendarRef={mockCalendarRef} />,
<CalendarApp
setCurrentView={jest.fn()}
onViewChange={jest.fn()}
openSidebar={false}
onCloseSidebar={jest.fn()}
currentView="timeGridWeek"
calendarRef={mockCalendarRef}
/>,
preloadedState
)
})
@@ -207,7 +238,14 @@ describe('CalendarSelection', () => {
const mockCalendarRef = { current: null }
await act(async () => {
renderWithProviders(
<CalendarApp calendarRef={mockCalendarRef} />,
<CalendarApp
setCurrentView={jest.fn()}
onViewChange={jest.fn()}
openSidebar={false}
onCloseSidebar={jest.fn()}
currentView="timeGridWeek"
calendarRef={mockCalendarRef}
/>,
preloadedState
)
})
@@ -423,8 +461,9 @@ describe('calendar Availability search', () => {
})
const calendarApi = calendarRef.current
expect(calendarApi).not.toBeNull()
await act(async () => {
calendarApi.changeView('dayGridMonth')
calendarApi?.changeView(CALENDAR_VIEWS.dayGridMonth)
})
await waitFor(() => {
expect(screen.queryAllByRole('columnheader').length).toBe(14)
@@ -472,9 +511,10 @@ describe('calendar Availability search', () => {
const calendarRef = window.__calendarRef
const calendarApi = calendarRef.current
expect(calendarApi).not.toBeNull()
await act(async () => {
calendarApi.changeView('dayGridMonth')
calendarApi?.changeView(CALENDAR_VIEWS.dayGridMonth)
fireEvent.click(screen.getByTestId('ChevronRightIcon'))
})
@@ -554,7 +594,14 @@ describe('calendar Availability search', () => {
await act(async () => {
renderWithProviders(
<CalendarApp calendarRef={{ current: null }} />,
<CalendarApp
setCurrentView={jest.fn()}
onViewChange={jest.fn()}
openSidebar={false}
onCloseSidebar={jest.fn()}
currentView="timeGridWeek"
calendarRef={{ current: null }}
/>,
stateWithManyCalendars
)
})
@@ -612,7 +659,14 @@ describe('calendar Availability search', () => {
await act(async () => {
renderWithProviders(
<CalendarApp calendarRef={{ current: null }} />,
<CalendarApp
setCurrentView={jest.fn()}
onViewChange={jest.fn()}
openSidebar={false}
onCloseSidebar={jest.fn()}
currentView="timeGridWeek"
calendarRef={{ current: null }}
/>,
calendarsWithSelected
)
})
@@ -646,10 +700,20 @@ describe('calendar Availability search', () => {
)
await act(async () => {
renderWithProviders(<CalendarApp calendarRef={{ current: null }} />, {
...preloadedState,
calendars: { ...preloadedState.calendars, pending: false }
})
renderWithProviders(
<CalendarApp
setCurrentView={jest.fn()}
onViewChange={jest.fn()}
openSidebar={false}
onCloseSidebar={jest.fn()}
currentView="timeGridWeek"
calendarRef={{ current: null }}
/>,
{
...preloadedState,
calendars: { ...preloadedState.calendars, pending: false }
}
)
})
await waitFor(
@@ -682,7 +746,14 @@ describe('calendar Availability search', () => {
await act(async () => {
renderWithProviders(
<CalendarApp calendarRef={{ current: null }} />,
<CalendarApp
setCurrentView={jest.fn()}
onViewChange={jest.fn()}
openSidebar={false}
onCloseSidebar={jest.fn()}
currentView="timeGridWeek"
calendarRef={{ current: null }}
/>,
stateWithUndefinedCalendars
)
})
@@ -701,7 +772,14 @@ describe('calendar Availability search', () => {
await act(async () => {
renderWithProviders(
<CalendarApp calendarRef={{ current: null }} />,
<CalendarApp
setCurrentView={jest.fn()}
onViewChange={jest.fn()}
openSidebar={false}
onCloseSidebar={jest.fn()}
currentView="timeGridWeek"
calendarRef={{ current: null }}
/>,
stateWithUndefinedTemp
)
})