workavia-calendar-front/__test__/components/CalendarResources.test.tsx

import CalendarResources from '@/components/Calendar/CalendarResources'
import { getCalendars } from '@/features/Calendars/CalendarApi'
import { addCalendarResourceAsync } from '@/features/Calendars/api/addCalendarResourceAsync'
import { act, fireEvent, screen, waitFor } from '@testing-library/react'
import { renderWithProviders } from '../utils/Renderwithproviders'

jest.mock('@/features/Calendars/CalendarApi')
jest.mock('@/features/Calendars/api/addCalendarResourceAsync')
jest.mock('@/components/Attendees/ResourceSearch', () => ({
  ResourceSearch: ({
    onChange
  }: {
    onChange: (
      event: null,
      value: { displayName: string; openpaasId: string }[]
    ) => void
  }) => (
    <div data-testid="resource-search">
      <button
        data-testid="mock-resource-search-select"
        onClick={() =>
          onChange(null, [
            { displayName: 'Room A', openpaasId: 'room-a-id' },
            { displayName: 'Room B', openpaasId: 'room-b-id' }
          ])
        }
      >
        Select Resources
      </button>
    </div>
  )
}))

const mockedGetCalendars = getCalendars as jest.Mock
const mockedAddCalendarResourceAsync =
  addCalendarResourceAsync as unknown as jest.Mock

describe('CalendarResources', () => {
  beforeEach(() => {
    jest.clearAllMocks()
  })

  const baseUser = {
    userData: {
      sub: 'test',
      email: 'test@test.com',
      sid: 'mockSid',
      openpaasId: 'user1'
    },
    tokens: { accessToken: 'token' }
  }

  const setup = (isOpen = true) => {
    const onClose = jest.fn()
    renderWithProviders(<CalendarResources onClose={onClose} open={isOpen} />, {
      user: baseUser
    })
    return { onClose }
  }

  it('renders correctly and closes on cancel', () => {
    const { onClose } = setup()

    expect(screen.getByText('calendar.browseResources')).toBeInTheDocument()

    const cancelButton = screen.getByRole('button', {
      name: 'common.cancel'
    })
    fireEvent.click(cancelButton)

    expect(onClose).toHaveBeenCalled()
  })

  it('does not render when isOpen is false', () => {
    setup(false)
    expect(
      screen.queryByText('calendar.browseResources')
    ).not.toBeInTheDocument()
  })

  it('fetches resource calendars and adds them using Promise.allSettled logic', async () => {
    const mockCalendarDataA = {
      _embedded: {
        'dav:calendar': [
          {
            _links: { self: { href: '/calendars/room-a-id/cal-a.json' } },
            'dav:name': 'Room A Calendar',
            'caldav:description': 'Main room A calendar',
            color: 'red'
          }
        ]
      }
    }

    mockedGetCalendars.mockImplementation(userId => {
      if (userId === 'room-a-id') return Promise.resolve(mockCalendarDataA)
      // Simulate failure for room-b
      if (userId === 'room-b-id')
        return Promise.reject(new Error('Failed fetching Room B'))
      return Promise.resolve([])
    })

    const mockDispatchResult = {
      unwrap: () => Promise.resolve({ type: 'success' })
    }
    mockedAddCalendarResourceAsync.mockReturnValue(() => mockDispatchResult)

    const { onClose } = setup()

    // Trigger resource selection
    const mockSelectBtn = screen.getByTestId('mock-resource-search-select')
    await act(async () => {
      fireEvent.click(mockSelectBtn)
    })

    // After selection, the button should be enabled and say Add
    const addButton = await screen.findByRole('button', {
      name: 'actions.add'
    })
    expect(addButton).not.toBeDisabled()

    // Click add to trigger addCalendarResourceAsync
    await act(async () => {
      fireEvent.click(addButton)
    })

    await waitFor(() => {
      // It should only have been called for Room A because Room B failed (Promise.allSettled)
      expect(mockedAddCalendarResourceAsync).toHaveBeenCalledTimes(1)

      const payload = mockedAddCalendarResourceAsync.mock.calls[0][0]
      expect(payload).toEqual(
        expect.objectContaining({
          userId: 'user1',
          calId: expect.any(String),
          cal: expect.objectContaining({
            cal: mockCalendarDataA._embedded['dav:calendar'][0]
          })
        })
      )
    })

    expect(onClose).toHaveBeenCalled()
  })

  it('adds existing user details fallback logic within submit handler', async () => {
    const mockCalendarDataA = {
      _embedded: {
        'dav:calendar': [
          {
            _links: { self: { href: '/calendars/room-a-id/cal-a.json' } },
            'dav:name': 'Room A Calendar',
            'caldav:description': 'Main room A calendar',
            color: 'red'
          }
        ]
      }
    }

    mockedGetCalendars.mockResolvedValueOnce(mockCalendarDataA)
    mockedGetCalendars.mockResolvedValueOnce([]) // Mock array of size 2 (for both A and B but second resolves empty)

    // Simulate successful API response
    const mockDispatchResult = {
      unwrap: () => Promise.resolve()
    }
    mockedAddCalendarResourceAsync.mockReturnValue(() => mockDispatchResult)

    const { onClose } = setup()

    // Trigger resource selection
    const mockSelectBtn = screen.getByTestId('mock-resource-search-select')
    await act(async () => {
      fireEvent.click(mockSelectBtn)
    })

    const addButton = await screen.findByRole('button', {
      name: 'actions.add'
    })
    await act(async () => {
      fireEvent.click(addButton)
    })

    await waitFor(() => {
      expect(onClose).toHaveBeenCalled()
    })
  })
})