import { render, screen } from '@testing-library/react';
import { describe, expect, it } from 'vitest';

import SkillsValidation from './SkillsValidation';

describe('SkillsValidation', () => {
  describe('given no skillsCategoryRadar prop', () => {
    it('should show the no-data overlay', () => {
      render(<SkillsValidation />);
      expect(screen.getByText('No Data Exists')).toBeInTheDocument();
    });
  });

  describe('given an empty skillsCategoryRadar array', () => {
    it('should show the no-data overlay', () => {
      render(<SkillsValidation skillsCategoryRadar={[]} />);
      expect(screen.getByText('No Data Exists')).toBeInTheDocument();
    });
  });

  describe('given data with all undefined values', () => {
    it('should show the no-data overlay', () => {
      render(
        <SkillsValidation
          skillsCategoryRadar={[
            { axis: 'Frontend & Mobile' },
            { axis: 'Backend & APIs' },
          ]}
        />,
      );
      expect(screen.getByText('No Data Exists')).toBeInTheDocument();
    });
  });

  describe('given data with all zero values', () => {
    it('should show the no-data overlay', () => {
      render(
        <SkillsValidation
          skillsCategoryRadar={[
            { axis: 'Frontend & Mobile', observed: 0, self_reported: 0, certified: 0 },
            { axis: 'Backend & APIs', observed: 0, self_reported: 0, certified: 0 },
          ]}
        />,
      );
      expect(screen.getByText('No Data Exists')).toBeInTheDocument();
    });
  });

  describe('given data with actual values', () => {
    it('should not show the no-data overlay', () => {
      render(
        <SkillsValidation
          skillsCategoryRadar={[
            { axis: 'Frontend & Mobile', observed: 60, self_reported: 40 },
            { axis: 'Backend & APIs', certified: 80 },
          ]}
        />,
      );
      expect(screen.queryByText('No Data Exists')).not.toBeInTheDocument();
    });
  });
});