8294d6ee49
- Created `qa-test-output-after-fix.txt` and `qa-test-output.txt` to log results of certificate page authentication tests. - Added `build.sh` for deterministic backend builds in CI, utilizing `go list` for efficiency. - Introduced `codeql_scan.sh` for CodeQL database creation and analysis for Go and JavaScript/TypeScript. - Implemented `dockerfile_check.sh` to validate Dockerfiles for base image and package manager mismatches. - Added `sourcery_precommit_wrapper.sh` to facilitate Sourcery CLI usage in pre-commit hooks.
113 lines
3.8 KiB
TypeScript
113 lines
3.8 KiB
TypeScript
import { render, screen } from '@testing-library/react'
|
|
import { describe, it, expect } from 'vitest'
|
|
import { CharonLoader, CharonCoinLoader, CerberusLoader, ConfigReloadOverlay } from '../LoadingStates'
|
|
|
|
describe('CharonLoader', () => {
|
|
it('renders boat animation with accessibility label', () => {
|
|
render(<CharonLoader />)
|
|
expect(screen.getByRole('status')).toHaveAttribute('aria-label', 'Loading')
|
|
})
|
|
|
|
it('renders with different sizes', () => {
|
|
const { rerender } = render(<CharonLoader size="sm" />)
|
|
expect(screen.getByRole('status')).toBeInTheDocument()
|
|
|
|
rerender(<CharonLoader size="lg" />)
|
|
expect(screen.getByRole('status')).toBeInTheDocument()
|
|
})
|
|
})
|
|
|
|
describe('CharonCoinLoader', () => {
|
|
it('renders coin animation with accessibility label', () => {
|
|
render(<CharonCoinLoader />)
|
|
expect(screen.getByRole('status')).toHaveAttribute('aria-label', 'Authenticating')
|
|
})
|
|
|
|
it('renders with different sizes', () => {
|
|
const { rerender } = render(<CharonCoinLoader size="sm" />)
|
|
expect(screen.getByRole('status')).toBeInTheDocument()
|
|
|
|
rerender(<CharonCoinLoader size="lg" />)
|
|
expect(screen.getByRole('status')).toBeInTheDocument()
|
|
})
|
|
})
|
|
|
|
describe('CerberusLoader', () => {
|
|
it('renders guardian animation with accessibility label', () => {
|
|
render(<CerberusLoader />)
|
|
expect(screen.getByRole('status')).toHaveAttribute('aria-label', 'Security Loading')
|
|
})
|
|
|
|
it('renders with different sizes', () => {
|
|
const { rerender } = render(<CerberusLoader size="sm" />)
|
|
expect(screen.getByRole('status')).toBeInTheDocument()
|
|
|
|
rerender(<CerberusLoader size="lg" />)
|
|
expect(screen.getByRole('status')).toBeInTheDocument()
|
|
})
|
|
})
|
|
|
|
describe('ConfigReloadOverlay', () => {
|
|
it('renders with Charon theme (default)', () => {
|
|
render(<ConfigReloadOverlay />)
|
|
expect(screen.getByText('Ferrying configuration...')).toBeInTheDocument()
|
|
expect(screen.getByText('Charon is crossing the Styx')).toBeInTheDocument()
|
|
})
|
|
|
|
it('renders with Coin theme', () => {
|
|
render(
|
|
<ConfigReloadOverlay
|
|
message="Paying the ferryman..."
|
|
submessage="Your obol grants passage"
|
|
type="coin"
|
|
/>
|
|
)
|
|
expect(screen.getByText('Paying the ferryman...')).toBeInTheDocument()
|
|
expect(screen.getByText('Your obol grants passage')).toBeInTheDocument()
|
|
})
|
|
|
|
it('renders with Cerberus theme', () => {
|
|
render(
|
|
<ConfigReloadOverlay
|
|
message="Cerberus awakens..."
|
|
submessage="Guardian of the gates stands watch"
|
|
type="cerberus"
|
|
/>
|
|
)
|
|
expect(screen.getByText('Cerberus awakens...')).toBeInTheDocument()
|
|
expect(screen.getByText('Guardian of the gates stands watch')).toBeInTheDocument()
|
|
})
|
|
|
|
it('renders with custom messages', () => {
|
|
render(
|
|
<ConfigReloadOverlay
|
|
message="Custom message"
|
|
submessage="Custom submessage"
|
|
type="charon"
|
|
/>
|
|
)
|
|
expect(screen.getByText('Custom message')).toBeInTheDocument()
|
|
expect(screen.getByText('Custom submessage')).toBeInTheDocument()
|
|
})
|
|
|
|
it('applies correct theme colors', () => {
|
|
const { container, rerender } = render(<ConfigReloadOverlay type="charon" />)
|
|
let overlay = container.querySelector('.bg-blue-950\\/90')
|
|
expect(overlay).toBeInTheDocument()
|
|
|
|
rerender(<ConfigReloadOverlay type="coin" />)
|
|
overlay = container.querySelector('.bg-amber-950\\/90')
|
|
expect(overlay).toBeInTheDocument()
|
|
|
|
rerender(<ConfigReloadOverlay type="cerberus" />)
|
|
overlay = container.querySelector('.bg-red-950\\/90')
|
|
expect(overlay).toBeInTheDocument()
|
|
})
|
|
|
|
it('renders as full-screen overlay with high z-index', () => {
|
|
const { container } = render(<ConfigReloadOverlay />)
|
|
const overlay = container.querySelector('.fixed.inset-0.z-50')
|
|
expect(overlay).toBeInTheDocument()
|
|
})
|
|
})
|