@datametria/vue-components/src/theme/__tests__/presets.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 Presets Tests
 * @author Vander Loto - CTO DATAMETRIA
 * @date 13/11/2025
 */

import { describe, it, expect } from 'vitest'
import { datametriaTheme, defaultTheme } from '../presets'

describe('Theme Presets', () => {
  describe('DATAMETRIA Theme', () => {
    it('should have correct name', () => {
      expect(datametriaTheme.name).toBe('DATAMETRIA')
    })

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

    it('should have semantic colors', () => {
      expect(datametriaTheme.tokens.colors.success).toBe('#10b981')
      expect(datametriaTheme.tokens.colors.warning).toBe('#f59e0b')
      expect(datametriaTheme.tokens.colors.error).toBe('#ef4444')
      expect(datametriaTheme.tokens.colors.info).toBe('#06b6d4')
    })

    it('should have complete neutral scale', () => {
      const neutralKeys = ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900']
      neutralKeys.forEach(key => {
        expect(datametriaTheme.tokens.colors.neutral).toHaveProperty(key)
      })
    })

    it('should have typography tokens', () => {
      expect(datametriaTheme.tokens.typography.fontFamily.sans).toBeDefined()
      expect(datametriaTheme.tokens.typography.fontSize.base).toBe('1rem')
      expect(datametriaTheme.tokens.typography.fontWeight.bold).toBe(700)
    })

    it('should have spacing tokens', () => {
      expect(datametriaTheme.tokens.spacing[0]).toBe('0')
      expect(datametriaTheme.tokens.spacing[4]).toBe('1rem')
      expect(datametriaTheme.tokens.spacing[8]).toBe('2rem')
    })

    it('should have radius tokens', () => {
      expect(datametriaTheme.tokens.radius.none).toBe('0')
      expect(datametriaTheme.tokens.radius.md).toBe('0.375rem')
      expect(datametriaTheme.tokens.radius.full).toBe('9999px')
    })

    it('should have shadow tokens', () => {
      expect(datametriaTheme.tokens.shadows.none).toBe('none')
      expect(datametriaTheme.tokens.shadows.md).toContain('rgba')
    })

    it('should have transition tokens', () => {
      expect(datametriaTheme.tokens.transitions.fast).toContain('150ms')
      expect(datametriaTheme.tokens.transitions.base).toContain('200ms')
      expect(datametriaTheme.tokens.transitions.slow).toContain('300ms')
    })

    it('should have all required token categories', () => {
      expect(datametriaTheme.tokens).toHaveProperty('colors')
      expect(datametriaTheme.tokens).toHaveProperty('typography')
      expect(datametriaTheme.tokens).toHaveProperty('spacing')
      expect(datametriaTheme.tokens).toHaveProperty('radius')
      expect(datametriaTheme.tokens).toHaveProperty('shadows')
      expect(datametriaTheme.tokens).toHaveProperty('transitions')
    })
  })

  describe('Default Theme', () => {
    it('should have correct name', () => {
      expect(defaultTheme.name).toBe('Default')
    })

    it('should have generic brand colors', () => {
      expect(defaultTheme.tokens.colors.primary).toBe('#3b82f6')
      expect(defaultTheme.tokens.colors.secondary).toBe('#8b5cf6')
    })

    it('should have semantic colors', () => {
      expect(defaultTheme.tokens.colors.success).toBe('#10b981')
      expect(defaultTheme.tokens.colors.warning).toBe('#f59e0b')
      expect(defaultTheme.tokens.colors.error).toBe('#ef4444')
      expect(defaultTheme.tokens.colors.info).toBe('#06b6d4')
    })

    it('should have complete neutral scale', () => {
      const neutralKeys = ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900']
      neutralKeys.forEach(key => {
        expect(defaultTheme.tokens.colors.neutral).toHaveProperty(key)
      })
    })

    it('should have typography tokens', () => {
      expect(defaultTheme.tokens.typography.fontFamily.sans).toBeDefined()
      expect(defaultTheme.tokens.typography.fontSize.base).toBe('1rem')
      expect(defaultTheme.tokens.typography.fontWeight.bold).toBe(700)
    })

    it('should have all required token categories', () => {
      expect(defaultTheme.tokens).toHaveProperty('colors')
      expect(defaultTheme.tokens).toHaveProperty('typography')
      expect(defaultTheme.tokens).toHaveProperty('spacing')
      expect(defaultTheme.tokens).toHaveProperty('radius')
      expect(defaultTheme.tokens).toHaveProperty('shadows')
      expect(defaultTheme.tokens).toHaveProperty('transitions')
    })
  })

  describe('Theme Comparison', () => {
    it('should have different primary colors', () => {
      expect(datametriaTheme.tokens.colors.primary).not.toBe(defaultTheme.tokens.colors.primary)
    })

    it('should have different secondary colors', () => {
      expect(datametriaTheme.tokens.colors.secondary).not.toBe(defaultTheme.tokens.colors.secondary)
    })

    it('should have same semantic colors', () => {
      expect(datametriaTheme.tokens.colors.success).toBe(defaultTheme.tokens.colors.success)
      expect(datametriaTheme.tokens.colors.warning).toBe(defaultTheme.tokens.colors.warning)
      expect(datametriaTheme.tokens.colors.error).toBe(defaultTheme.tokens.colors.error)
    })

    it('should have same neutral scale', () => {
      expect(datametriaTheme.tokens.colors.neutral).toEqual(defaultTheme.tokens.colors.neutral)
    })

    it('should have same spacing scale', () => {
      expect(datametriaTheme.tokens.spacing).toEqual(defaultTheme.tokens.spacing)
    })

    it('should have same radius scale', () => {
      expect(datametriaTheme.tokens.radius).toEqual(defaultTheme.tokens.radius)
    })
  })

  describe('Theme Validation', () => {
    it('DATAMETRIA theme should be valid', () => {
      expect(datametriaTheme.name).toBeTruthy()
      expect(datametriaTheme.tokens).toBeDefined()
      expect(typeof datametriaTheme.tokens.colors.primary).toBe('string')
    })

    it('Default theme should be valid', () => {
      expect(defaultTheme.name).toBeTruthy()
      expect(defaultTheme.tokens).toBeDefined()
      expect(typeof defaultTheme.tokens.colors.primary).toBe('string')
    })

    it('should have valid hex colors', () => {
      const hexRegex = /^#[0-9A-Fa-f]{6}$/
      expect(datametriaTheme.tokens.colors.primary).toMatch(hexRegex)
      expect(defaultTheme.tokens.colors.primary).toMatch(hexRegex)
    })

    it('should have valid rem values', () => {
      expect(datametriaTheme.tokens.spacing[4]).toMatch(/rem$/)
      expect(defaultTheme.tokens.spacing[4]).toMatch(/rem$/)
    })
  })
})