@yuno-payments/dashboard-design-system 0.0.1

package/src/components/organisms/dialog/dialog.test.tsx

@@ -0,0 +1,525 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import * as React from 'react'
+import { createRoot } from 'react-dom/client'
+import { act } from 'react-dom/test-utils'
+import { Dialog } from './index'
+
+function render(ui: React.ReactElement) {
+  const container = document.createElement('div')
+  document.body.appendChild(container)
+  const root = createRoot(container)
+  act(() => {
+    root.render(ui)
+  })
+  return { container, root }
+}
+
+function getByText(container: HTMLElement, text: string) {
+  const el = Array.from(container.querySelectorAll('*')).find((n) => n.textContent?.includes(text))
+  if (!el) throw new Error(`Element with text "${text}" not found`)
+  return el as HTMLElement
+}
+
+function getByTestId(container: HTMLElement, testId: string) {
+  const el = container.querySelector(`[data-testid="${testId}"]`)
+  if (!el) throw new Error(`Element with data-testid="${testId}" not found`)
+  return el as HTMLElement
+}
+
+function queryByTestId(container: HTMLElement, testId: string) {
+  return container.querySelector(`[data-testid="${testId}"]`) as HTMLElement | null
+}
+
+function getByRole(container: HTMLElement, role: string, options?: { name?: string }) {
+  const elements = Array.from(container.querySelectorAll(`[role="${role}"]`))
+  if (options?.name) {
+    const el = elements.find((el) => {
+      const ariaLabel = el.getAttribute('aria-label')
+      return ariaLabel && ariaLabel.includes(options.name!)
+    })
+    if (!el) throw new Error(`Element with role "${role}" and name "${options.name}" not found`)
+    return el as HTMLElement
+  }
+  if (elements.length === 0) throw new Error(`Element with role "${role}" not found`)
+  return elements[0] as HTMLElement
+}
+
+describe('Dialog', () => {
+  beforeEach(() => {
+    document.body.innerHTML = ''
+    document.body.style.overflow = 'unset'
+  })
+
+  it('renders when open is true', () => {
+    const { container } = render(
+      <Dialog title="Test Dialog" open={true} closeIcon={() => {}}>
+        <p>Dialog content</p>
+      </Dialog>
+    )
+    
+    expect(getByText(container, 'Test Dialog')).toBeTruthy()
+    expect(getByText(container, 'Dialog content')).toBeTruthy()
+  })
+
+  it('does not render when open is false', () => {
+    const { container } = render(
+      <Dialog title="Test Dialog" open={false} closeIcon={() => {}}>
+        <p>Dialog content</p>
+      </Dialog>
+    )
+    
+    expect(container.firstChild).toBeNull()
+  })
+
+  it('renders title when provided', () => {
+    const { container } = render(
+      <Dialog title="Custom Title" open={true} closeIcon={() => {}}>
+        <p>Content</p>
+      </Dialog>
+    )
+    
+    expect(getByText(container, 'Custom Title')).toBeTruthy()
+  })
+
+  it('renders JSX title when provided', () => {
+    const jsxTitle = <span>JSX Title</span>
+    const { container } = render(
+      <Dialog title={jsxTitle} open={true} closeIcon={() => {}}>
+        <p>Content</p>
+      </Dialog>
+    )
+    
+    expect(getByText(container, 'JSX Title')).toBeTruthy()
+  })
+
+  it('calls closeIcon when close button is clicked', () => {
+    const handleClose = vi.fn()
+    const { container } = render(
+      <Dialog title="Test" open={true} closeIcon={handleClose}>
+        <p>Content</p>
+      </Dialog>
+    )
+    
+    const closeButton = getByTestId(container, 'close-button')
+    act(() => {
+      closeButton.click()
+    })
+    
+    expect(handleClose).toHaveBeenCalledTimes(1)
+  })
+
+  it('calls closeIcon when backdrop is clicked', () => {
+    const handleClose = vi.fn()
+    const { container } = render(
+      <Dialog title="Test" open={true} closeIcon={handleClose}>
+        <p>Content</p>
+      </Dialog>
+    )
+    
+    const backdrop = container.querySelector('.bg-black\\/25')
+    expect(backdrop).toBeTruthy()
+    
+    act(() => {
+      (backdrop as HTMLElement).click()
+    })
+    
+    expect(handleClose).toHaveBeenCalledTimes(1)
+  })
+
+  it('renders back button when backButtonAction is provided', () => {
+    const handleBack = vi.fn()
+    const { container } = render(
+      <Dialog title="Test" open={true} closeIcon={() => {}} backButtonAction={handleBack}>
+        <p>Content</p>
+      </Dialog>
+    )
+    
+    const backButton = getByTestId(container, 'back-button')
+    expect(backButton).toBeTruthy()
+    
+    act(() => {
+      backButton.click()
+    })
+    
+    expect(handleBack).toHaveBeenCalledTimes(1)
+  })
+
+  it('does not render back button when backButtonAction is not provided', () => {
+    const { container } = render(
+      <Dialog title="Test" open={true} closeIcon={() => {}}>
+        <p>Content</p>
+      </Dialog>
+    )
+    
+    expect(queryByTestId(container, 'back-button')).toBeNull()
+  })
+
+  it('renders other actions when provided', () => {
+    const otherActions = <button data-testid="custom-action">Custom</button>
+    const { container } = render(
+      <Dialog title="Test" open={true} closeIcon={() => {}} otherActions={otherActions}>
+        <p>Content</p>
+      </Dialog>
+    )
+    
+    expect(getByTestId(container, 'custom-action')).toBeTruthy()
+  })
+
+  it('renders buttons when provided', () => {
+    const buttons = [
+      {
+        variant: 'primary' as const,
+        label: 'Confirm',
+        event: vi.fn(),
+        testId: 'confirm-btn',
+      },
+      {
+        variant: 'secondary' as const,
+        label: 'Cancel',
+        event: vi.fn(),
+        testId: 'cancel-btn',
+      },
+    ]
+    
+    const { container } = render(
+      <Dialog title="Test" open={true} closeIcon={() => {}} buttons={buttons}>
+        <p>Content</p>
+      </Dialog>
+    )
+    
+    expect(getByTestId(container, 'confirm-btn')).toBeTruthy()
+    expect(getByTestId(container, 'cancel-btn')).toBeTruthy()
+  })
+
+  it('calls button event handlers when clicked', () => {
+    const handleConfirm = vi.fn()
+    const handleCancel = vi.fn()
+    const buttons = [
+      {
+        variant: 'primary' as const,
+        label: 'Confirm',
+        event: handleConfirm,
+        testId: 'confirm-btn',
+      },
+      {
+        variant: 'secondary' as const,
+        label: 'Cancel',
+        event: handleCancel,
+        testId: 'cancel-btn',
+      },
+    ]
+    
+    const { container } = render(
+      <Dialog title="Test" open={true} closeIcon={() => {}} buttons={buttons}>
+        <p>Content</p>
+      </Dialog>
+    )
+    
+    act(() => {
+      getByTestId(container, 'confirm-btn').click()
+    })
+    
+    act(() => {
+      getByTestId(container, 'cancel-btn').click()
+    })
+    
+    expect(handleConfirm).toHaveBeenCalledTimes(1)
+    expect(handleCancel).toHaveBeenCalledTimes(1)
+  })
+
+  it('does not render buttons when showActions is false', () => {
+    const buttons = [
+      {
+        variant: 'primary' as const,
+        label: 'Confirm',
+        event: vi.fn(),
+        testId: 'confirm-btn',
+      },
+    ]
+    
+    const { container } = render(
+      <Dialog title="Test" open={true} closeIcon={() => {}} buttons={buttons} showActions={false}>
+        <p>Content</p>
+      </Dialog>
+    )
+    
+    expect(queryByTestId(container, 'confirm-btn')).toBeNull()
+  })
+
+  it('does not render header when withHeader is false', () => {
+    const { container } = render(
+      <Dialog title="Test" open={true} closeIcon={() => {}} withHeader={false}>
+        <p>Content</p>
+      </Dialog>
+    )
+    
+    expect(() => getByText(container, 'Test')).toThrow()
+    expect(queryByTestId(container, 'close-button')).toBeNull()
+  })
+
+  it('applies custom className', () => {
+    const { container } = render(
+      <Dialog title="Test" open={true} closeIcon={() => {}} className="custom-class">
+        <p>Content</p>
+      </Dialog>
+    )
+    
+    const dialog = getByRole(container, 'dialog')
+    expect(dialog.className).toMatch(/custom-class/)
+  })
+
+  it('forwards ref correctly', () => {
+    const ref = { current: null }
+    render(
+      <Dialog ref={ref} title="Test" open={true} closeIcon={() => {}}>
+        <p>Content</p>
+      </Dialog>
+    )
+    
+    expect(ref.current).toBeTruthy()
+  })
+
+  it('passes through HTML attributes', () => {
+    const { container } = render(
+      <Dialog title="Test" open={true} closeIcon={() => {}} data-custom="value">
+        <p>Content</p>
+      </Dialog>
+    )
+    
+    const dialog = getByRole(container, 'dialog')
+    expect(dialog.getAttribute('data-custom')).toBe('value')
+  })
+
+  it('renders with start vertical alignment', () => {
+    const { container } = render(
+      <Dialog title="Test" open={true} closeIcon={() => {}} verticalAlign="start">
+        <p>Content</p>
+      </Dialog>
+    )
+    
+    const dialogContainer = container.querySelector('.items-start')
+    expect(dialogContainer).toBeTruthy()
+  })
+
+  it('renders with end vertical alignment', () => {
+    const { container } = render(
+      <Dialog title="Test" open={true} closeIcon={() => {}} verticalAlign="end">
+        <p>Content</p>
+      </Dialog>
+    )
+    
+    const dialogContainer = container.querySelector('.items-end')
+    expect(dialogContainer).toBeTruthy()
+  })
+
+  it('renders with center vertical alignment by default', () => {
+    const { container } = render(
+      <Dialog title="Test" open={true} closeIcon={() => {}}>
+        <p>Content</p>
+      </Dialog>
+    )
+    
+    const dialogContainer = container.querySelector('.items-center')
+    expect(dialogContainer).toBeTruthy()
+  })
+
+  it('handles button loading state', () => {
+    const buttons = [
+      {
+        variant: 'primary' as const,
+        label: 'Submit',
+        event: vi.fn(),
+        loading: true,
+        testId: 'submit-btn',
+      },
+    ]
+    
+    const { container } = render(
+      <Dialog title="Test" open={true} closeIcon={() => {}} buttons={buttons}>
+        <p>Content</p>
+      </Dialog>
+    )
+    
+    const button = getByTestId(container, 'submit-btn')
+    expect(button.textContent).toBe('Loading...')
+    expect(button.hasAttribute('disabled')).toBe(true)
+  })
+
+  it('handles button disabled state', () => {
+    const buttons = [
+      {
+        variant: 'primary' as const,
+        label: 'Submit',
+        event: vi.fn(),
+        disabled: true,
+        testId: 'submit-btn',
+      },
+    ]
+    
+    const { container } = render(
+      <Dialog title="Test" open={true} closeIcon={() => {}} buttons={buttons}>
+        <p>Content</p>
+      </Dialog>
+    )
+    
+    const button = getByTestId(container, 'submit-btn')
+    expect(button.hasAttribute('disabled')).toBe(true)
+  })
+
+  it('maps button variants correctly', () => {
+    const buttons = [
+      {
+        variant: 'primary' as const,
+        label: 'Primary',
+        event: vi.fn(),
+        testId: 'primary-btn',
+      },
+      {
+        variant: 'secondary' as const,
+        label: 'Secondary',
+        event: vi.fn(),
+        testId: 'secondary-btn',
+      },
+      {
+        variant: 'tertiary' as const,
+        label: 'Tertiary',
+        event: vi.fn(),
+        testId: 'tertiary-btn',
+      },
+    ]
+    
+    const { container } = render(
+      <Dialog title="Test" open={true} closeIcon={() => {}} buttons={buttons}>
+        <p>Content</p>
+      </Dialog>
+    )
+    
+    expect(getByTestId(container, 'primary-btn')).toBeTruthy()
+    expect(getByTestId(container, 'secondary-btn')).toBeTruthy()
+    expect(getByTestId(container, 'tertiary-btn')).toBeTruthy()
+  })
+
+  it('maps button sizes correctly', () => {
+    const buttons = [
+      {
+        variant: 'primary' as const,
+        label: 'Small',
+        event: vi.fn(),
+        size: 'small' as const,
+        testId: 'small-btn',
+      },
+      {
+        variant: 'primary' as const,
+        label: 'Medium',
+        event: vi.fn(),
+        size: 'medium' as const,
+        testId: 'medium-btn',
+      },
+      {
+        variant: 'primary' as const,
+        label: 'Large',
+        event: vi.fn(),
+        size: 'large' as const,
+        testId: 'large-btn',
+      },
+    ]
+    
+    const { container } = render(
+      <Dialog title="Test" open={true} closeIcon={() => {}} buttons={buttons}>
+        <p>Content</p>
+      </Dialog>
+    )
+    
+    expect(getByTestId(container, 'small-btn')).toBeTruthy()
+    expect(getByTestId(container, 'medium-btn')).toBeTruthy()
+    expect(getByTestId(container, 'large-btn')).toBeTruthy()
+  })
+
+  it('sets body overflow hidden when open', () => {
+    render(
+      <Dialog title="Test" open={true} closeIcon={() => {}}>
+        <p>Content</p>
+      </Dialog>
+    )
+    
+    expect(document.body.style.overflow).toBe('hidden')
+  })
+
+  it('resets body overflow when closed', () => {
+    const { root } = render(
+      <Dialog title="Test" open={true} closeIcon={() => {}}>
+        <p>Content</p>
+      </Dialog>
+    )
+    
+    expect(document.body.style.overflow).toBe('hidden')
+    
+    act(() => {
+      root.render(
+        <Dialog title="Test" open={false} closeIcon={() => {}}>
+          <p>Content</p>
+        </Dialog>
+      )
+    })
+    
+    expect(document.body.style.overflow).toBe('unset')
+  })
+
+  it('handles custom width and height', () => {
+    const { container } = render(
+      <Dialog 
+        title="Test" 
+        open={true} 
+        closeIcon={() => {}} 
+        widthContainer={600}
+        heightContainer={400}
+      >
+        <p>Content</p>
+      </Dialog>
+    )
+    
+    const dialog = getByRole(container, 'dialog')
+    expect(dialog.style.width).toBe('600px')
+    expect(dialog.style.height).toBe('400px')
+  })
+
+  it('handles JSX element as button label', () => {
+    const buttons = [
+      {
+        variant: 'primary' as const,
+        label: <span>JSX Label</span>,
+        event: vi.fn(),
+        testId: 'jsx-btn',
+      },
+    ]
+    
+    const { container } = render(
+      <Dialog title="Test" open={true} closeIcon={() => {}} buttons={buttons}>
+        <p>Content</p>
+      </Dialog>
+    )
+    
+    expect(getByText(container, 'JSX Label')).toBeTruthy()
+  })
+
+  it('handles button type attribute', () => {
+    const buttons = [
+      {
+        variant: 'primary' as const,
+        label: 'Submit',
+        event: vi.fn(),
+        type: 'submit' as const,
+        testId: 'submit-btn',
+      },
+    ]
+    
+    const { container } = render(
+      <Dialog title="Test" open={true} closeIcon={() => {}} buttons={buttons}>
+        <p>Content</p>
+      </Dialog>
+    )
+    
+    const button = getByTestId(container, 'submit-btn')
+    expect(button.getAttribute('type')).toBe('submit')
+  })
+})