workavia-calendar-front/__test__/features/Settings/SettingUserSync.test.tsx

import SettingsPage from '@/features/Settings/SettingsPage'
import settingsReducer, {
  setIsBrowserDefaultTimeZone,
  setTimeZone
} from '@/features/Settings/SettingsSlice'
import userReducer, {
  getOpenPaasUserDataAsync,
  setTimezone as setUserTimeZone
} from '@/features/User/userSlice'
import { api } from '@/utils/apiUtils'
import { browserDefaultTimeZone } from '@/utils/timezone'
import { configureStore } from '@reduxjs/toolkit'
import { fireEvent, screen, waitFor } from '@testing-library/react'
import { renderWithProviders } from '../../utils/Renderwithproviders'

jest.mock('@/utils/apiUtils')

describe('Timezone synchronization after getOpenPaasUserDataAsync', () => {
  let apiGetSpy: jest.SpyInstance

  beforeEach(() => {
    jest.clearAllMocks()
    localStorage.clear()
    apiGetSpy = jest.spyOn(api, 'get')
  })

  afterEach(() => {
    apiGetSpy.mockRestore()
  })

  it('should sync timezone to both user and settings state after fetching user data', async () => {
    const mockUserData = {
      id: '667037022b752d0026472254',
      firstname: 'John',
      lastname: 'Doe',
      preferredEmail: ['test@test.com'],
      configurations: {
        modules: [
          {
            name: 'core',
            configurations: [
              { name: 'language', value: 'fr' },
              { name: 'datetime', value: { timeZone: 'Europe/Paris' } }
            ]
          }
        ]
      }
    }

    // Return a fake fetch-like response
    apiGetSpy.mockResolvedValue({
      json: async () => mockUserData
    })

    const store = configureStore({
      reducer: { user: userReducer, settings: settingsReducer },
      preloadedState: {
        user: {
          userData: {
            sub: 'test',
            email: 'test@test.com',
            family_name: 'Doe',
            name: 'John',
            sid: 'mockSid',
            openpaasId: '667037022b752d0026472254'
          },
          organiserData: null,
          tokens: null,
          coreConfig: { language: 'en', datetime: { timeZone: 'UTC' } },
          loading: false,
          error: null
        },
        settings: { language: 'en', timeZone: 'UTC', view: 'calendar' }
      }
    })

    const result = await store.dispatch(getOpenPaasUserDataAsync())

    expect(result.type).toBe('user/getOpenPaasUserData/fulfilled')

    const state = store.getState()
    expect(state.user.coreConfig.datetime.timeZone).toBe('Europe/Paris')
    expect(state.settings.timeZone).toBe('Europe/Paris')
    expect(localStorage.getItem('timeZone')).toBe('Europe/Paris')
  })

  it('should keep browser timezone if API response has no timezone configuration', async () => {
    const mockUserData = {
      id: '667037022b752d0026472254',
      firstname: 'John',
      lastname: 'Doe',
      preferredEmail: '[test@test.com](mailto:test@test.com)',
      configurations: {
        modules: [
          { name: 'core', configurations: [{ name: 'language', value: 'en' }] }
        ]
      }
    }

    apiGetSpy.mockResolvedValue({
      json: async () => mockUserData
    })

    const browserTimezone = browserDefaultTimeZone ?? 'UTC'

    const store = configureStore({
      reducer: { user: userReducer, settings: settingsReducer },
      preloadedState: {
        user: {
          userData: {
            sub: 'test',
            email: 'test@test.com',
            family_name: 'Doe',
            name: 'John',
            sid: 'mockSid',
            openpaasId: '667037022b752d0026472254'
          },
          organiserData: null,
          tokens: null,
          coreConfig: {
            language: 'en',
            datetime: { timeZone: browserTimezone }
          },
          loading: false,
          error: null
        },
        settings: {
          language: 'en',
          timeZone: browserTimezone,
          view: 'calendar'
        }
      }
    })

    const result = await store.dispatch(getOpenPaasUserDataAsync())

    expect(result.type).toBe('user/getOpenPaasUserData/fulfilled')

    const state = store.getState()
    expect(state.user.coreConfig.datetime.timeZone).toBe(null)
    expect(state.settings.timeZone).toBe(browserTimezone)
  })
})

// Mock localStorage
const localStorageMock = (() => {
  let store: Record<string, string> = {}
  return {
    getItem: (key: string) => store[key] || null,
    setItem: (key: string, value: string) => {
      store[key] = value
    },
    removeItem: (key: string) => {
      delete store[key]
    },
    clear: () => {
      store = {}
    }
  }
})()

Object.defineProperty(window, 'localStorage', {
  value: localStorageMock
})

describe('Timezone Logic - Backend to Frontend Flow', () => {
  let store: any

  beforeEach(() => {
    localStorageMock.clear()
    store = configureStore({
      reducer: {
        settings: settingsReducer,
        user: userReducer
      },
      preloadedState: {
        user: {
          userData: {
            sub: 'test',
            email: 'test@test.com',
            family_name: 'Doe',
            name: 'John',
            sid: 'mockSid',
            openpaasId: '667037022b752d0026472254'
          },
          organiserData: null,
          tokens: null,
          coreConfig: { language: 'en', datetime: { timeZone: 'UTC' } },
          loading: false,
          error: null
        },
        settings: { language: 'en', timeZone: 'UTC', view: 'calendar' }
      }
    })
  })

  describe('Backend Response Handling', () => {
    test('Backend returns NULL => Should use browser default timezone', async () => {
      const backendResponse = {
        firstname: 'John',
        lastname: 'Doe',
        id: '123',
        preferredEmail: 'john@example.com',
        configurations: {
          modules: [
            {
              name: 'core',
              configurations: [
                {
                  name: 'datetime',
                  value: {
                    timeZone: null
                  }
                }
              ]
            }
          ]
        }
      }

      await store.dispatch(
        getOpenPaasUserDataAsync.fulfilled(backendResponse, '', undefined)
      )

      const settingsState = store.getState().settings
      const userState = store.getState().user

      expect(settingsState.timeZone).toBe(browserDefaultTimeZone)
      expect(settingsState.isBrowserDefaultTimeZone).toBe(true)
      expect(userState.coreConfig.datetime.timeZone).toBe(null)
      expect(localStorage.getItem('timeZone')).toBe(browserDefaultTimeZone)
    })

    test('Backend returns SPECIFIC VALUE => Should use that value', async () => {
      const specificTimezone = 'America/New_York'
      const backendResponse = {
        firstname: 'Jane',
        lastname: 'Smith',
        id: '456',
        preferredEmail: 'jane@example.com',
        configurations: {
          modules: [
            {
              name: 'core',
              configurations: [
                {
                  name: 'datetime',
                  value: {
                    timeZone: specificTimezone
                  }
                }
              ]
            }
          ]
        }
      }

      await store.dispatch(
        getOpenPaasUserDataAsync.fulfilled(backendResponse, '', undefined)
      )

      const settingsState = store.getState().settings
      const userState = store.getState().user

      expect(settingsState.timeZone).toBe(specificTimezone)
      expect(settingsState.isBrowserDefaultTimeZone).toBe(false)
      expect(userState.coreConfig.datetime.timeZone).toBe(specificTimezone)
      expect(localStorage.getItem('timeZone')).toBe(specificTimezone)
    })

    test('Backend returns NO datetime config => Should use browser default', async () => {
      const backendResponse = {
        firstname: 'Bob',
        lastname: 'Johnson',
        id: '789',
        preferredEmail: 'bob@example.com',
        configurations: {
          modules: [
            {
              name: 'core',
              configurations: [
                // No datetime config
              ]
            }
          ]
        }
      }

      await store.dispatch(
        getOpenPaasUserDataAsync.fulfilled(backendResponse, '', undefined)
      )

      const settingsState = store.getState().settings
      const userState = store.getState().user

      expect(settingsState.timeZone).toBe(browserDefaultTimeZone)
      expect(settingsState.isBrowserDefaultTimeZone).toBe(true)
      expect(userState.coreConfig.datetime.timeZone).toBe(null)
      expect(localStorage.getItem('timeZone')).toBe(browserDefaultTimeZone)
    })
  })

  test('Settings state ALWAYS has a concrete value (never null)', () => {
    // Test 1: Browser default scenario
    store.dispatch(setIsBrowserDefaultTimeZone(true))
    let settingsState = store.getState().settings

    expect(settingsState.timeZone).toBe(browserDefaultTimeZone)
    expect(settingsState.timeZone).not.toBe(null)

    // Test 2: Specific timezone scenario
    store.dispatch(setTimeZone('Europe/Paris'))
    settingsState = store.getState().settings

    expect(settingsState.timeZone).toBe('Europe/Paris')
    expect(settingsState.timeZone).not.toBe(null)
  })

  describe('User Actions - Changing Timezone', () => {
    beforeEach(() => {
      ;(api.patch as jest.Mock).mockResolvedValue({ status: 204 })
    })
    test('User enables browser default => Settings gets browser TZ, User gets null', async () => {
      const { store } = renderWithProviders(<SettingsPage />, {
        user: {
          userData: { sub: 'test' },
          organiserData: null,
          tokens: null,
          coreConfig: {
            language: 'en',
            datetime: { timeZone: 'America/Los_Angeles' }
          },
          loading: false,
          error: null
        },
        settings: {
          language: 'en',
          timeZone: 'America/Los_Angeles',
          isBrowserDefaultTimeZone: false,
          view: 'settings'
        }
      })

      const browserDefaultSwitch = screen.getAllByLabelText(
        'settings.timeZoneBrowserDefault'
      )[0]
      expect(browserDefaultSwitch).toBeInTheDocument()

      // Enable browser default
      fireEvent.click(browserDefaultSwitch)

      await waitFor(() => {
        const state = store.getState()
        expect(state.settings.isBrowserDefaultTimeZone).toBe(true)
      })
      await waitFor(() => {
        const state = store.getState()
        expect(state.settings.timeZone).toBe(browserDefaultTimeZone)
      })
      await waitFor(() => {
        const state = store.getState()
        expect(state.user.coreConfig.datetime.timeZone).toBe(null)
      })
    })

    test('User selects specific timezone => Both states get the value', async () => {
      const { store } = renderWithProviders(<SettingsPage />, {
        user: {
          userData: { sub: 'test' },
          organiserData: null,
          tokens: null,
          coreConfig: { language: 'en', datetime: { timeZone: null } },
          loading: false,
          error: null
        },
        settings: {
          language: 'en',
          timeZone: browserDefaultTimeZone,
          isBrowserDefaultTimeZone: true,
          view: 'settings'
        }
      })

      const browserDefaultSwitch = screen.getAllByLabelText(
        'settings.timeZoneBrowserDefault'
      )[0]

      // Disable browser default so manual selector appears
      fireEvent.click(browserDefaultSwitch)

      // Now timezone combobox is visible
      const timezoneInput = screen.getAllByRole('combobox')[1]

      // Type to filter options
      fireEvent.change(timezoneInput, {
        target: { value: 'Australia/Sydney' }
      })

      // Select from autocomplete dropdown
      const option = await screen.findByText(/Australia\/Sydney/i)
      fireEvent.click(option)

      await waitFor(() => {
        const state = store.getState()
        expect(state.settings.isBrowserDefaultTimeZone).toBe(false)
      })
      await waitFor(() => {
        const state = store.getState()
        expect(state.settings.timeZone).toBe('Australia/Sydney')
      })
      await waitFor(() => {
        const state = store.getState()
        expect(state.user.coreConfig.datetime.timeZone).toBe('Australia/Sydney')
      })
    })
  })

  describe('LocalStorage Persistence', () => {
    test('LocalStorage always stores concrete values (browser TZ or specific TZ)', () => {
      // Scenario 1: Browser default
      store.dispatch(setTimeZone(browserDefaultTimeZone))
      expect(localStorage.getItem('timeZone')).toBe(browserDefaultTimeZone)
      expect(localStorage.getItem('timeZone')).not.toBe('null')

      // Scenario 2: Specific timezone
      store.dispatch(setTimeZone('Africa/Cairo'))
      expect(localStorage.getItem('timeZone')).toBe('Africa/Cairo')
    })
  })

  test('Full user journey: Backend null -> User changes -> Backend saves', async () => {
    // Step 1: Backend returns null
    const backendResponseNull = {
      firstname: 'Test',
      lastname: 'User',
      id: '999',
      preferredEmail: 'test@example.com',
      configurations: {
        modules: [
          {
            name: 'core',
            configurations: [
              {
                name: 'datetime',
                value: { timeZone: null }
              }
            ]
          }
        ]
      }
    }

    await store.dispatch(
      getOpenPaasUserDataAsync.fulfilled(backendResponseNull, '', undefined)
    )

    // Verify initial state
    expect(store.getState().settings.timeZone).toBe(browserDefaultTimeZone)
    expect(store.getState().user.coreConfig.datetime.timeZone).toBe(null)

    // Step 2: User changes to specific timezone
    const userSelectedTZ = 'Europe/London'
    store.dispatch(setIsBrowserDefaultTimeZone(false))
    store.dispatch(setTimeZone(userSelectedTZ))
    store.dispatch(setUserTimeZone(userSelectedTZ))

    expect(store.getState().settings.timeZone).toBe(userSelectedTZ)
    expect(store.getState().user.coreConfig.datetime.timeZone).toBe(
      userSelectedTZ
    )

    // Step 3: User switches back to browser default
    store.dispatch(setIsBrowserDefaultTimeZone(true))
    store.dispatch(setUserTimeZone(null))
    store.dispatch(setTimeZone(browserDefaultTimeZone))

    expect(store.getState().settings.timeZone).toBe(browserDefaultTimeZone)
    expect(store.getState().user.coreConfig.datetime.timeZone).toBe(null)
  })
})