useDialog.spec.ts 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
  1. // Copyright (C) 2012-2023 Zammad Foundation, https://zammad-foundation.org/
  2. import { flushPromises, mount } from '@vue/test-utils'
  3. import {
  4. destroyComponent,
  5. pushComponent,
  6. } from '@shared/components/DynamicInitializer/manage'
  7. import { getDialogMeta, useDialog } from '../useDialog'
  8. vi.mock('@shared/components/DynamicInitializer/manage', () => {
  9. return {
  10. destroyComponent: vi.fn(),
  11. pushComponent: vi.fn(),
  12. }
  13. })
  14. const inContext = (fn: () => void) => {
  15. const component = {
  16. setup() {
  17. fn()
  18. return () => null
  19. },
  20. }
  21. return mount(component)
  22. }
  23. describe('use dialog usage', () => {
  24. beforeEach(() => {
  25. const { dialogsOptions } = getDialogMeta()
  26. dialogsOptions.clear()
  27. })
  28. test('name and component are required', () => {
  29. // @ts-expect-error - component is required
  30. useDialog({ name: 'name' })
  31. // @ts-expect-error - name is required
  32. useDialog({
  33. component: vi.fn(),
  34. })
  35. useDialog({
  36. name: 'name',
  37. component: vi.fn(),
  38. })
  39. })
  40. test('adds and removes meta data', async () => {
  41. const vm = inContext(() => {
  42. useDialog({
  43. name: 'name',
  44. component: vi.fn(),
  45. })
  46. })
  47. const { dialogsOptions } = getDialogMeta()
  48. expect(dialogsOptions.size).toBe(1)
  49. expect(dialogsOptions.has('name')).toBe(true)
  50. vm.unmount()
  51. await flushPromises()
  52. expect(dialogsOptions.size).toBe(0)
  53. expect(dialogsOptions.has('name')).toBe(false)
  54. })
  55. test('opens and closes dialog', async () => {
  56. const component = vi.fn().mockResolvedValue({})
  57. const dialog = useDialog({
  58. name: 'name',
  59. component,
  60. })
  61. await dialog.open()
  62. const { dialogsOpened } = getDialogMeta()
  63. expect(dialog.isOpened.value).toBe(true)
  64. expect(component).toHaveBeenCalled()
  65. expect(dialogsOpened.value.has('name')).toBe(true)
  66. expect(pushComponent).toHaveBeenCalledWith(
  67. 'dialog',
  68. 'name',
  69. expect.anything(),
  70. {},
  71. )
  72. await dialog.close()
  73. expect(dialog.isOpened.value).toBe(false)
  74. expect(dialogsOpened.value.has('name')).toBe(false)
  75. expect(destroyComponent).toHaveBeenCalledWith('dialog', 'name')
  76. })
  77. test('prefetch starts loading', async () => {
  78. const component = vi.fn().mockResolvedValue({})
  79. const dialog = useDialog({
  80. name: 'name',
  81. component,
  82. })
  83. await dialog.prefetch()
  84. expect(component).toHaveBeenCalled()
  85. })
  86. test('hooks are called', async () => {
  87. const component = vi.fn().mockResolvedValue({})
  88. const beforeOpen = vi.fn()
  89. const afterClose = vi.fn()
  90. const dialog = useDialog({
  91. name: 'name',
  92. component,
  93. beforeOpen,
  94. afterClose,
  95. })
  96. await dialog.open()
  97. expect(beforeOpen).toHaveBeenCalled()
  98. expect(afterClose).not.toHaveBeenCalled()
  99. await dialog.close()
  100. expect(afterClose).toHaveBeenCalled()
  101. })
  102. })