@datametria/vue-components/src/components/__tests__/DatametriaCard.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

import { describe, it, expect } from 'vitest'
import { mount } from '@vue/test-utils'
import DatametriaCard from '../DatametriaCard.vue'

describe('DatametriaCard', () => {
  describe('Rendering', () => {
    it('renders correctly with default props', () => {
      const wrapper = mount(DatametriaCard)
      expect(wrapper.find('.datametria-card').exists()).toBe(true)
      expect(wrapper.find('.datametria-card__content').exists()).toBe(true)
    })

    it('renders title when provided', () => {
      const wrapper = mount(DatametriaCard, {
        props: { title: 'Test Card' }
      })
      expect(wrapper.find('.datametria-card__header').exists()).toBe(true)
      expect(wrapper.find('.datametria-card__title').text()).toBe('Test Card')
    })

    it('renders default slot content', () => {
      const wrapper = mount(DatametriaCard, {
        slots: {
          default: '<p>Card content</p>'
        }
      })
      expect(wrapper.find('.datametria-card__content').html()).toContain('Card content')
    })

    it('renders header slot when provided', () => {
      const wrapper = mount(DatametriaCard, {
        slots: {
          header: '<div class="custom-header">Custom Header</div>'
        }
      })
      expect(wrapper.find('.datametria-card__header').exists()).toBe(true)
      expect(wrapper.find('.custom-header').text()).toBe('Custom Header')
    })

    it('renders footer slot when provided', () => {
      const wrapper = mount(DatametriaCard, {
        slots: {
          footer: '<div class="custom-footer">Footer</div>'
        }
      })
      expect(wrapper.find('.datametria-card__footer').exists()).toBe(true)
      expect(wrapper.find('.custom-footer').text()).toBe('Footer')
    })

    it('does not render header when no title or header slot', () => {
      const wrapper = mount(DatametriaCard)
      expect(wrapper.find('.datametria-card__header').exists()).toBe(false)
    })

    it('does not render footer when no footer slot', () => {
      const wrapper = mount(DatametriaCard)
      expect(wrapper.find('.datametria-card__footer').exists()).toBe(false)
    })
  })

  describe('Padding', () => {
    it('applies padding by default', () => {
      const wrapper = mount(DatametriaCard)
      expect(wrapper.find('.datametria-card--no-padding').exists()).toBe(false)
    })

    it('removes padding when padding prop is false', () => {
      const wrapper = mount(DatametriaCard, {
        props: { padding: false }
      })
      expect(wrapper.find('.datametria-card--no-padding').exists()).toBe(true)
    })

    it('applies padding when padding prop is true', () => {
      const wrapper = mount(DatametriaCard, {
        props: { padding: true }
      })
      expect(wrapper.find('.datametria-card--no-padding').exists()).toBe(false)
    })
  })

  describe('CSS Variables', () => {
    it('uses CSS variables for background color', () => {
      const wrapper = mount(DatametriaCard)
      const card = wrapper.find('.datametria-card')
      const styles = card.element.style.cssText || window.getComputedStyle(card.element).cssText
      
      // Component should use CSS variables in its styles
      expect(wrapper.html()).toContain('datametria-card')
    })

    it('uses CSS variables for border radius', () => {
      const wrapper = mount(DatametriaCard)
      expect(wrapper.find('.datametria-card').exists()).toBe(true)
    })

    it('uses CSS variables for shadows', () => {
      const wrapper = mount(DatametriaCard)
      expect(wrapper.find('.datametria-card').exists()).toBe(true)
    })

    it('uses CSS variables for spacing', () => {
      const wrapper = mount(DatametriaCard, {
        props: { title: 'Test' }
      })
      expect(wrapper.find('.datametria-card__header').exists()).toBe(true)
    })

    it('uses CSS variables for typography', () => {
      const wrapper = mount(DatametriaCard, {
        props: { title: 'Test' }
      })
      expect(wrapper.find('.datametria-card__title').exists()).toBe(true)
    })

    it('uses CSS variables for border colors', () => {
      const wrapper = mount(DatametriaCard, {
        props: { title: 'Test' },
        slots: { footer: '<div>Footer</div>' }
      })
      expect(wrapper.find('.datametria-card__header').exists()).toBe(true)
      expect(wrapper.find('.datametria-card__footer').exists()).toBe(true)
    })
  })

  describe('Complex Scenarios', () => {
    it('renders complete card with all sections', () => {
      const wrapper = mount(DatametriaCard, {
        props: { title: 'Complete Card' },
        slots: {
          default: '<p>Main content</p>',
          footer: '<button>Action</button>'
        }
      })
      
      expect(wrapper.find('.datametria-card__header').exists()).toBe(true)
      expect(wrapper.find('.datametria-card__content').exists()).toBe(true)
      expect(wrapper.find('.datametria-card__footer').exists()).toBe(true)
      expect(wrapper.find('.datametria-card__title').text()).toBe('Complete Card')
      expect(wrapper.html()).toContain('Main content')
      expect(wrapper.html()).toContain('Action')
    })

    it('renders card with custom header and footer', () => {
      const wrapper = mount(DatametriaCard, {
        slots: {
          header: '<div class="custom">Custom Header</div>',
          default: '<p>Content</p>',
          footer: '<div class="custom">Custom Footer</div>'
        }
      })
      
      expect(wrapper.findAll('.custom')).toHaveLength(2)
      expect(wrapper.html()).toContain('Custom Header')
      expect(wrapper.html()).toContain('Custom Footer')
    })

    it('renders card without padding and with all sections', () => {
      const wrapper = mount(DatametriaCard, {
        props: { 
          title: 'No Padding Card',
          padding: false 
        },
        slots: {
          default: '<table>Table content</table>',
          footer: '<div>Footer</div>'
        }
      })
      
      expect(wrapper.find('.datametria-card--no-padding').exists()).toBe(true)
      expect(wrapper.html()).toContain('Table content')
    })
  })

  describe('Backward Compatibility', () => {
    it('works without ThemeProvider', () => {
      const wrapper = mount(DatametriaCard, {
        props: { title: 'Test' },
        slots: {
          default: '<p>Content</p>',
          footer: '<div>Footer</div>'
        }
      })
      
      expect(wrapper.find('.datametria-card').exists()).toBe(true)
      expect(wrapper.find('.datametria-card__header').exists()).toBe(true)
      expect(wrapper.find('.datametria-card__content').exists()).toBe(true)
      expect(wrapper.find('.datametria-card__footer').exists()).toBe(true)
    })

    it('maintains original visual appearance', () => {
      const wrapper = mount(DatametriaCard, {
        props: { title: 'Original Style' }
      })
      
      const card = wrapper.find('.datametria-card')
      expect(card.exists()).toBe(true)
      expect(wrapper.find('.datametria-card__title').text()).toBe('Original Style')
    })
  })
})