@datametria/vue-components/src/theme/__tests__/tokens.test.ts

DATAMETRIA Vue.js 3 Component Library with Multi-Brand Theming - 51 components + 10 composables with theming support, WCAG 2.2 AA, dark mode, responsive system

/**
 * Theme Tokens Tests
 * @author Vander Loto - CTO DATAMETRIA
 * @date 13/11/2025
 */

import { describe, it, expect } from 'vitest'
import {
  defaultColors,
  defaultTypography,
  defaultSpacing,
  defaultRadius,
  defaultShadows,
  defaultTransitions,
  defaultTokens
} from '../tokens'

describe('Default Tokens', () => {
  describe('Colors', () => {
    it('should have all required color properties', () => {
      expect(defaultColors).toHaveProperty('primary')
      expect(defaultColors).toHaveProperty('secondary')
      expect(defaultColors).toHaveProperty('success')
      expect(defaultColors).toHaveProperty('warning')
      expect(defaultColors).toHaveProperty('error')
      expect(defaultColors).toHaveProperty('info')
      expect(defaultColors).toHaveProperty('neutral')
    })

    it('should have DATAMETRIA brand colors', () => {
      expect(defaultColors.primary).toBe('#0072CE')
      expect(defaultColors.secondary).toBe('#4B0078')
    })

    it('should have complete neutral scale', () => {
      const neutralKeys = ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900']
      neutralKeys.forEach(key => {
        expect(defaultColors.neutral).toHaveProperty(key)
        expect(typeof defaultColors.neutral[key as keyof typeof defaultColors.neutral]).toBe('string')
      })
    })

    it('should have valid hex color format', () => {
      const hexRegex = /^#[0-9A-Fa-f]{6}$/
      expect(defaultColors.primary).toMatch(hexRegex)
      expect(defaultColors.secondary).toMatch(hexRegex)
      expect(defaultColors.success).toMatch(hexRegex)
    })
  })

  describe('Typography', () => {
    it('should have font families', () => {
      expect(defaultTypography.fontFamily).toHaveProperty('sans')
      expect(defaultTypography.fontFamily).toHaveProperty('mono')
      expect(typeof defaultTypography.fontFamily.sans).toBe('string')
    })

    it('should have complete font size scale', () => {
      const sizeKeys = ['xs', 'sm', 'base', 'lg', 'xl', '2xl', '3xl', '4xl']
      sizeKeys.forEach(key => {
        expect(defaultTypography.fontSize).toHaveProperty(key)
      })
    })

    it('should have font weights', () => {
      expect(defaultTypography.fontWeight.normal).toBe(400)
      expect(defaultTypography.fontWeight.medium).toBe(500)
      expect(defaultTypography.fontWeight.semibold).toBe(600)
      expect(defaultTypography.fontWeight.bold).toBe(700)
    })

    it('should have line heights', () => {
      expect(defaultTypography.lineHeight.tight).toBe(1.25)
      expect(defaultTypography.lineHeight.normal).toBe(1.5)
      expect(defaultTypography.lineHeight.relaxed).toBe(1.75)
    })
  })

  describe('Spacing', () => {
    it('should have complete spacing scale', () => {
      const spacingKeys = ['0', '1', '2', '3', '4', '6', '8', '12', '16', '20', '24']
      spacingKeys.forEach(key => {
        expect(defaultSpacing).toHaveProperty(key)
      })
    })

    it('should have valid rem values', () => {
      expect(defaultSpacing[0]).toBe('0')
      expect(defaultSpacing[4]).toBe('1rem')
      expect(defaultSpacing[8]).toBe('2rem')
    })
  })

  describe('Radius', () => {
    it('should have all radius sizes', () => {
      expect(defaultRadius).toHaveProperty('none')
      expect(defaultRadius).toHaveProperty('sm')
      expect(defaultRadius).toHaveProperty('md')
      expect(defaultRadius).toHaveProperty('lg')
      expect(defaultRadius).toHaveProperty('xl')
      expect(defaultRadius).toHaveProperty('full')
    })

    it('should have valid values', () => {
      expect(defaultRadius.none).toBe('0')
      expect(defaultRadius.full).toBe('9999px')
    })
  })

  describe('Shadows', () => {
    it('should have all shadow sizes', () => {
      expect(defaultShadows).toHaveProperty('none')
      expect(defaultShadows).toHaveProperty('sm')
      expect(defaultShadows).toHaveProperty('md')
      expect(defaultShadows).toHaveProperty('lg')
      expect(defaultShadows).toHaveProperty('xl')
      expect(defaultShadows).toHaveProperty('2xl')
    })

    it('should have valid shadow values', () => {
      expect(defaultShadows.none).toBe('none')
      expect(defaultShadows.sm).toContain('rgba')
    })
  })

  describe('Transitions', () => {
    it('should have all transition speeds', () => {
      expect(defaultTransitions).toHaveProperty('fast')
      expect(defaultTransitions).toHaveProperty('base')
      expect(defaultTransitions).toHaveProperty('slow')
    })

    it('should have valid timing values', () => {
      expect(defaultTransitions.fast).toContain('ms')
      expect(defaultTransitions.base).toContain('cubic-bezier')
    })
  })

  describe('Complete Token Set', () => {
    it('should export complete default tokens', () => {
      expect(defaultTokens).toHaveProperty('colors')
      expect(defaultTokens).toHaveProperty('typography')
      expect(defaultTokens).toHaveProperty('spacing')
      expect(defaultTokens).toHaveProperty('radius')
      expect(defaultTokens).toHaveProperty('shadows')
      expect(defaultTokens).toHaveProperty('transitions')
    })

    it('should have consistent structure', () => {
      expect(defaultTokens.colors).toBe(defaultColors)
      expect(defaultTokens.typography).toBe(defaultTypography)
      expect(defaultTokens.spacing).toBe(defaultSpacing)
    })
  })
})