Files
workavia-calendar-front/__test__/components/Calendar.timezone.test.tsx
T
lethemanh cadfa70e60 #708 apply strictier linting rules (#717)
* #708 apply strictier linting rules and fix simple eslint bugs

* #708 fix eslint errors relate to promise

* #708 fix eslint import/no-extraneous-dependencies

* #708 fix eslint errors of react-hook

* #708 enable eslint check for typescript

---------

Co-authored-by: lethemanh <lethemanh@lethemanhs-MacBook-Pro.local>
2026-04-01 17:15:10 +02:00

107 lines
3.3 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
import CalendarLayout from '@/components/Calendar/CalendarLayout'
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('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)
})
})