zammad/app/frontend/apps/desktop/composables/__tests__/useOverlayContainer.spec.ts

// Copyright (C) 2012-2024 Zammad Foundation, https://zammad-foundation.org/

import { flushPromises, mount } from '@vue/test-utils'
import { useRoute, type RouteLocationNormalizedLoadedGeneric } from 'vue-router'

import {
  destroyComponent,
  pushComponent,
} from '#shared/components/DynamicInitializer/manage.ts'

import {
  getOverlayContainerMeta,
  useOverlayContainer,
} from '../useOverlayContainer.ts'

vi.mock('#shared/components/DynamicInitializer/manage.ts', () => {
  return {
    destroyComponent: vi.fn(),
    pushComponent: vi.fn(),
  }
})

vi.mock('vue-router', () => ({
  useRoute: vi.fn(),
}))

const mockedUseRoute = vi.mocked(useRoute)

const inContext = (
  fn: () => void,
  route: Partial<RouteLocationNormalizedLoadedGeneric>,
) => {
  mockedUseRoute.mockReturnValue(route as RouteLocationNormalizedLoadedGeneric)

  const component = {
    setup() {
      fn()
      return () => null
    },
  }
  return mount(component)
}

describe('use dialog usage', () => {
  beforeEach(() => {
    const { options } = getOverlayContainerMeta('dialog')
    options.clear()
  })

  test('name and component are required', () => {
    inContext(
      () => {
        // @ts-expect-error - component is required
        useOverlayContainer('dialog', { name: 'name' })
      },
      {
        path: '/example',
      },
    )

    inContext(
      () => {
        // @ts-expect-error - name is required
        useOverlayContainer('dialog', {
          component: vi.fn(),
        })
      },
      {
        path: '/example',
      },
    )

    inContext(
      () => {
        useOverlayContainer('dialog', {
          name: 'name',
          component: vi.fn(),
        })
      },
      {
        path: '/example',
      },
    )
  })

  test('adds and removes meta data', async () => {
    const vm = inContext(
      () => {
        useOverlayContainer('dialog', {
          name: 'name',
          component: vi.fn(),
        })
      },
      {
        path: '/example',
      },
    )
    const { options } = getOverlayContainerMeta('dialog')

    expect(options.size).toBe(1)
    expect(options.has('name_/example')).toBe(true)

    vm.unmount()

    await flushPromises()

    expect(options.size).toBe(0)
    expect(options.has('name_/example')).toBe(false)
  })

  test('opens and closes dialog', async () => {
    const component = vi.fn().mockResolvedValue({})

    let dialog!: ReturnType<typeof useOverlayContainer>

    inContext(
      () => {
        dialog = useOverlayContainer('dialog', {
          name: 'name',
          component,
        })
      },
      {
        path: '/example',
      },
    )

    await dialog.open()

    const { opened } = getOverlayContainerMeta('dialog')

    expect(dialog.isOpened.value).toBe(true)
    expect(component).toHaveBeenCalled()
    expect(opened.value.has('name_/example')).toBe(true)
    expect(pushComponent).toHaveBeenCalledWith(
      'dialog',
      'name_/example',
      expect.anything(),
      {},
    )

    await dialog.close()

    expect(dialog.isOpened.value).toBe(false)
    expect(opened.value.has('name_/example')).toBe(false)
    expect(destroyComponent).toHaveBeenCalledWith('dialog', 'name_/example')
  })

  test('prefetch starts loading', async () => {
    const component = vi.fn().mockResolvedValue({})

    let dialog!: ReturnType<typeof useOverlayContainer>
    inContext(
      () => {
        dialog = useOverlayContainer('dialog', {
          name: 'name',
          component,
        })
      },
      {
        path: '/example',
      },
    )

    await dialog.prefetch()
    expect(component).toHaveBeenCalled()
  })

  test('hooks are called', async () => {
    const component = vi.fn().mockResolvedValue({})
    const beforeOpen = vi.fn()
    const afterClose = vi.fn()

    let flyout!: ReturnType<typeof useOverlayContainer>
    inContext(
      () => {
        flyout = useOverlayContainer('flyout', {
          name: 'name',
          component,
          beforeOpen,
          afterClose,
        })
      },
      {
        path: '/example',
      },
    )

    await flyout.open()

    expect(beforeOpen).toHaveBeenCalled()
    expect(afterClose).not.toHaveBeenCalled()

    await flyout.close()

    expect(afterClose).toHaveBeenCalled()
  })
})