Nicholai/jan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: update dialog test case

Browse Source
This commit is contained in:
Faisal Amir 2025-09-25 13:24:06 +07:00
parent 8479b7c105
commit ba768d46e6
1 changed files with 114 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

127
web-app/src/components/ui/__tests__/dialog.test.tsx
View File

@ -2,6 +2,7 @@ import { render, screen, fireEvent } from '@testing-library/react'
import { describe, it, expect, vi } from 'vitest'
import userEvent from '@testing-library/user-event'
import React from 'react'
import '@testing-library/jest-dom'
import {
Dialog,
DialogTrigger,
@ -117,7 +118,7 @@ describe('Dialog Components', () => {
it('applies proper classes to dialog content', async () => {
const user = userEvent.setup()
render(
<Dialog>
<DialogTrigger>Open Dialog</DialogTrigger>
@ -128,27 +129,38 @@ describe('Dialog Components', () => {
</DialogContent>
</Dialog>
)
await user.click(screen.getByText('Open Dialog'))
const dialogContent = screen.getByRole('dialog')
expect(dialogContent).toHaveClass(
'bg-main-view',
'max-h-[calc(100%-80px)]',
'overflow-auto',
'border-main-view-fg/10',
'text-main-view-fg',
'fixed',
'top-[50%]',
'left-[50%]',
'z-50',
'z-[90]',
'grid',
'w-full',
'max-w-[calc(100%-2rem)]',
'translate-x-[-50%]',
'translate-y-[-50%]',
'border',
'gap-4',
'rounded-lg',
'shadow-lg'
'border',
'p-6',
'shadow-lg',
'duration-200',
'sm:max-w-lg'
)
})
it('applies proper classes to dialog header', async () => {
const user = userEvent.setup()
render(
<Dialog>
<DialogTrigger>Open Dialog</DialogTrigger>
@ -159,11 +171,11 @@ describe('Dialog Components', () => {
</DialogContent>
</Dialog>
)
await user.click(screen.getByText('Open Dialog'))
const dialogHeader = screen.getByText('Dialog Title').closest('div')
expect(dialogHeader).toHaveClass('flex', 'flex-col', 'gap-2', 'text-center')
expect(dialogHeader).toHaveClass('flex', 'flex-col', 'gap-2', 'text-center', 'sm:text-left')
})
it('applies proper classes to dialog title', async () => {
@ -299,7 +311,7 @@ describe('Dialog Components', () => {
it('supports onOpenChange callback', async () => {
const onOpenChange = vi.fn()
const user = userEvent.setup()
render(
<Dialog onOpenChange={onOpenChange}>
<DialogTrigger>Open Dialog</DialogTrigger>
@ -310,9 +322,98 @@ describe('Dialog Components', () => {
</DialogContent>
</Dialog>
)
await user.click(screen.getByText('Open Dialog'))
expect(onOpenChange).toHaveBeenCalledWith(true)
})
it('can hide close button when showCloseButton is false', async () => {
const user = userEvent.setup()
render(
<Dialog>
<DialogTrigger>Open Dialog</DialogTrigger>
<DialogContent showCloseButton={false}>
<DialogHeader>
<DialogTitle>Dialog Title</DialogTitle>
</DialogHeader>
</DialogContent>
</Dialog>
)
await user.click(screen.getByText('Open Dialog'))
expect(screen.queryByRole('button', { name: /close/i })).not.toBeInTheDocument()
})
it('shows close button by default', async () => {
const user = userEvent.setup()
render(
<Dialog>
<DialogTrigger>Open Dialog</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Dialog Title</DialogTitle>
</DialogHeader>
</DialogContent>
</Dialog>
)
await user.click(screen.getByText('Open Dialog'))
expect(screen.getByRole('button', { name: /close/i })).toBeInTheDocument()
})
it('accepts aria-describedby prop', async () => {
const user = userEvent.setup()
render(
<Dialog>
<DialogTrigger>Open Dialog</DialogTrigger>
<DialogContent aria-describedby="custom-description">
<DialogHeader>
<DialogTitle>Dialog Title</DialogTitle>
</DialogHeader>
<p id="custom-description">Custom description text</p>
</DialogContent>
</Dialog>
)
await user.click(screen.getByText('Open Dialog'))
const dialogContent = screen.getByRole('dialog')
expect(dialogContent).toHaveAttribute('aria-describedby', 'custom-description')
})
it('applies data-slot attributes to components', async () => {
const user = userEvent.setup()
render(
<Dialog>
<DialogTrigger>Open Dialog</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Dialog Title</DialogTitle>
<DialogDescription>Dialog description</DialogDescription>
</DialogHeader>
<div>Dialog body content</div>
<DialogFooter>
<button>Footer button</button>
</DialogFooter>
</DialogContent>
</Dialog>
)
expect(screen.getByText('Open Dialog')).toHaveAttribute('data-slot', 'dialog-trigger')
await user.click(screen.getByText('Open Dialog'))
expect(screen.getByRole('dialog')).toHaveAttribute('data-slot', 'dialog-content')
expect(screen.getByText('Dialog Title').closest('div')).toHaveAttribute('data-slot', 'dialog-header')
expect(screen.getByText('Dialog Title')).toHaveAttribute('data-slot', 'dialog-title')
expect(screen.getByText('Dialog description')).toHaveAttribute('data-slot', 'dialog-description')
expect(screen.getByText('Footer button').closest('div')).toHaveAttribute('data-slot', 'dialog-footer')
})
})