Camille Moussu
4e57f6b342
* 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>
108 lines
3.4 KiB
TypeScript
108 lines
3.4 KiB
TypeScript
import CalendarLayout from '@/components/Calendar/CalendarLayout'
|
||
import { CALENDAR_VIEWS } from '@/components/Calendar/utils/constants'
|
||
import { act, waitFor } from '@testing-library/react'
|
||
import { renderWithProviders } from '../utils/Renderwithproviders'
|
||
|
||
const PIVOT_UTC = new Date('2026-03-16T17:00:00Z')
|
||
|
||
const makeState = (timezone: string) => ({
|
||
user: {
|
||
userData: {
|
||
sub: 'test',
|
||
email: 'test@test.com',
|
||
sid: 'mockSid',
|
||
openpaasId: 'user1'
|
||
},
|
||
tokens: { accessToken: 'token' }
|
||
},
|
||
settings: { view: 'calendar', timeZone: timezone },
|
||
calendars: {
|
||
list: {
|
||
'user1/cal1': {
|
||
name: 'Calendar personal',
|
||
id: 'user1/cal1',
|
||
color: { light: '#FF0000', dark: '#000' },
|
||
owner: { emails: ['test@test.com'] },
|
||
events: {}
|
||
}
|
||
},
|
||
pending: false
|
||
}
|
||
})
|
||
|
||
describe('Calendar – dayHeaderContent respects selected timezone', () => {
|
||
afterEach(() => {
|
||
jest.useRealTimers()
|
||
})
|
||
|
||
async function renderAtPivotTime(timezone: string): Promise<string[]> {
|
||
// Set fake timers the same way the working test does — single chained call
|
||
jest.useFakeTimers().setSystemTime(PIVOT_UTC)
|
||
|
||
await act(async () => {
|
||
renderWithProviders(<CalendarLayout />, makeState(timezone))
|
||
})
|
||
|
||
// Advance past the debounce (300ms) like the working navigation test does
|
||
await act(async () => {
|
||
jest.advanceTimersByTime(300)
|
||
})
|
||
|
||
const calendarRef = window.__calendarRef
|
||
await waitFor(() => expect(calendarRef?.current).not.toBeNull())
|
||
|
||
await act(async () => {
|
||
calendarRef.current?.changeView(CALENDAR_VIEWS.timeGridWeek)
|
||
})
|
||
|
||
await waitFor(() => {
|
||
expect(document.querySelectorAll('.fc-col-header-cell').length).toBe(7)
|
||
})
|
||
|
||
return Array.from(document.querySelectorAll('.fc-col-header-cell')).map(
|
||
cell => cell.textContent ?? ''
|
||
)
|
||
}
|
||
|
||
it('UTC: Monday March 16 column exists', async () => {
|
||
const cells = await renderAtPivotTime('UTC')
|
||
const monday = cells.find(t => t.includes('16'))
|
||
expect(monday).toBeDefined()
|
||
expect(monday).toMatch(/MON/i)
|
||
})
|
||
|
||
it('Europe/Paris: Monday March 16 column exists (UTC+1, no day shift)', async () => {
|
||
const cells = await renderAtPivotTime('Europe/Paris')
|
||
const monday = cells.find(t => t.includes('16'))
|
||
expect(monday).toBeDefined()
|
||
expect(monday).toMatch(/MON/i)
|
||
})
|
||
|
||
it('Asia/Jakarta: Tuesday March 17 column exists (UTC+7, day shifts forward)', async () => {
|
||
const cells = await renderAtPivotTime('Asia/Jakarta')
|
||
const tuesday = cells.find(t => t.includes('17'))
|
||
expect(tuesday).toBeDefined()
|
||
expect(tuesday).toMatch(/TUE/i)
|
||
})
|
||
|
||
it('Asia/Jakarta: no column incorrectly labeled MON 17 – regression', async () => {
|
||
const cells = await renderAtPivotTime('Asia/Jakarta')
|
||
const wrongCell = cells.find(t => t.includes('17') && /MON/i.test(t))
|
||
expect(wrongCell).toBeUndefined()
|
||
})
|
||
|
||
it('Asia/Tokyo: Tuesday March 17 column exists (UTC+9)', async () => {
|
||
const cells = await renderAtPivotTime('Asia/Tokyo')
|
||
const tuesday = cells.find(t => t.includes('17'))
|
||
expect(tuesday).toBeDefined()
|
||
expect(tuesday).toMatch(/TUE/i)
|
||
})
|
||
|
||
it('America/New_York: Monday March 16 column exists (UTC-4, no day shift)', async () => {
|
||
const cells = await renderAtPivotTime('America/New_York')
|
||
const monday = cells.find(t => t.includes('16'))
|
||
expect(monday).toBeDefined()
|
||
expect(monday).toMatch(/MON/i)
|
||
})
|
||
})
|