110 lines
4.2 KiB
TypeScript
110 lines
4.2 KiB
TypeScript
import React from 'react'
|
|
import { render, screen } from '@testing-library/react'
|
|
import { describe, expect, it } from 'vitest'
|
|
|
|
import { PrivacyPage } from '@/components/privacy-page'
|
|
|
|
describe('PrivacyPage ShadCN UI Consistency', () => {
|
|
it('uses standardized heading and body scales with ShadCN primitives', () => {
|
|
render(<PrivacyPage />)
|
|
|
|
// Verify main container uses ShadCN background tokens
|
|
const mainContainer = document.querySelector('.min-h-screen')
|
|
expect(mainContainer).toHaveClass('bg-background', 'text-foreground')
|
|
|
|
// Verify heading uses consistent font classes and scale
|
|
const mainHeading = screen.getByText('Privacy Policy')
|
|
expect(mainHeading).toHaveClass('font-playfair', 'text-5xl', 'lg:text-7xl')
|
|
|
|
// Verify body text uses consistent muted foreground token
|
|
const bodyText = screen.getByText(/We respect your privacy/)
|
|
expect(bodyText).toHaveClass('text-muted-foreground')
|
|
|
|
// Verify no ad-hoc color classes are used
|
|
const htmlContent = document.documentElement.innerHTML
|
|
expect(htmlContent).not.toContain('text-white')
|
|
expect(htmlContent).not.toContain('text-gray-300')
|
|
expect(htmlContent).not.toContain('bg-white/5')
|
|
expect(htmlContent).not.toContain('border-white/10')
|
|
|
|
// Verify ShadCN design tokens are consistently used
|
|
expect(htmlContent).toContain('text-muted-foreground')
|
|
expect(htmlContent).toContain('bg-background')
|
|
expect(htmlContent).toContain('text-foreground')
|
|
})
|
|
|
|
it('uses ShadCN primitives correctly throughout the page', () => {
|
|
render(<PrivacyPage />)
|
|
|
|
// Verify Alert primitive is present and properly structured
|
|
const alert = screen.getByRole('alert')
|
|
expect(alert).toHaveAttribute('data-slot', 'alert')
|
|
|
|
// Verify Badge primitive is present
|
|
const badge = screen.getByText('Last updated: 2025-09-16')
|
|
expect(badge).toBeInTheDocument()
|
|
|
|
// Verify Card primitives are present (multiple cards should exist)
|
|
const cards = document.querySelectorAll('[data-slot="card"]')
|
|
expect(cards.length).toBeGreaterThan(0)
|
|
|
|
// Verify Card headers and content use proper ShadCN structure
|
|
const cardHeaders = document.querySelectorAll('[data-slot="card-header"]')
|
|
expect(cardHeaders.length).toBeGreaterThan(0)
|
|
|
|
const cardContents = document.querySelectorAll('[data-slot="card-content"]')
|
|
expect(cardContents.length).toBeGreaterThan(0)
|
|
|
|
// Verify all CardContent uses muted foreground token
|
|
const cardContentElements = document.querySelectorAll('[data-slot="card-content"]')
|
|
cardContentElements.forEach(element => {
|
|
expect(element).toHaveClass('text-muted-foreground')
|
|
})
|
|
})
|
|
|
|
it('maintains consistent spacing and typography patterns', () => {
|
|
render(<PrivacyPage />)
|
|
|
|
// Verify consistent spacing classes are used
|
|
const htmlContent = document.documentElement.innerHTML
|
|
expect(htmlContent).toContain('space-y-3')
|
|
expect(htmlContent).toContain('gap-6')
|
|
expect(htmlContent).toContain('px-8')
|
|
expect(htmlContent).toContain('lg:px-16')
|
|
|
|
// Verify consistent text sizing
|
|
expect(htmlContent).toContain('text-xl')
|
|
expect(htmlContent).toContain('leading-relaxed')
|
|
|
|
// Verify grid layout consistency
|
|
expect(htmlContent).toContain('grid-cols-1')
|
|
expect(htmlContent).toContain('lg:grid-cols-2')
|
|
|
|
// Verify responsive design patterns
|
|
expect(htmlContent).toContain('max-w-4xl')
|
|
expect(htmlContent).toContain('max-w-6xl')
|
|
})
|
|
|
|
it('uses proper icon integration with ShadCN components', () => {
|
|
render(<PrivacyPage />)
|
|
|
|
// Verify icons are properly integrated without ad-hoc color classes
|
|
const infoIcon = document.querySelector('.lucide-info')
|
|
expect(infoIcon).toBeInTheDocument()
|
|
|
|
// Verify icons use consistent sizing
|
|
const htmlContent = document.documentElement.innerHTML
|
|
expect(htmlContent).toContain('w-5 h-5')
|
|
|
|
// Verify icons don't have ad-hoc color overrides
|
|
expect(htmlContent).not.toContain('text-white')
|
|
})
|
|
|
|
it('applies motion classes with reduced-motion safeguard', () => {
|
|
render(<PrivacyPage />)
|
|
const html = document.documentElement.innerHTML
|
|
expect(html).toContain('animate-in')
|
|
expect(html).toContain('motion-reduce:animate-none')
|
|
})
|
|
})
|