devperf/frontend/__tests__/components/OKRProgressBars.test.ts

/**
 * Component tests for OKRProgressBars.
 * Validates rendering with OKR objective data.
 */
import { describe, it, expect } from 'vitest';
import { mount } from '@vue/test-utils';
import OKRProgressBars from '@/components/charts/OKRProgressBars.vue';

const mockObjectives = [
  {
    id: 'o1',
    title: 'Improve delivery rate to 85%',
    ownerName: 'Alice',
    progress: 72,
    keyResults: [
      { title: 'Sprint delivery > 80%', current: 80, target: 100, unit: '%' },
      { title: 'Reduce bug density', current: 0.08, target: 0.05, unit: '/kloc' },
    ],
  },
  {
    id: 'o2',
    title: 'Ship v2.0 platform',
    ownerName: 'Bob',
    progress: 45,
    keyResults: [
      { title: 'Core features completed', current: 3, target: 5, unit: 'features' },
    ],
  },
];

describe('OKRProgressBars', () => {
  it('should mount with objectives data', () => {
    const wrapper = mount(OKRProgressBars, {
      props: { objectives: mockObjectives },
    });
    expect(wrapper.exists()).toBe(true);
  });

  it('should have chart container', () => {
    const wrapper = mount(OKRProgressBars, {
      props: { objectives: mockObjectives },
    });
    expect(wrapper.find('.okr-progress-bars').exists()).toBe(true);
  });

  it('should handle empty objectives', () => {
    const wrapper = mount(OKRProgressBars, {
      props: { objectives: [] },
    });
    expect(wrapper.exists()).toBe(true);
  });

  it('should handle single objective', () => {
    const wrapper = mount(OKRProgressBars, {
      props: { objectives: [mockObjectives[0]] },
    });
    expect(wrapper.exists()).toBe(true);
  });
});