wix-style-react/src/RadarChart/test/RadarChart.spec.js

wix-style-react

import React from 'react';
import { createRendererWithUniDriver, cleanup } from '../../../test/utils/unit';

import RadarChart from '../RadarChart';
import { radarChartPrivateDriverFactory } from './RadarChart.private.uni.driver';

describe(RadarChart.displayName, () => {
  const render = createRendererWithUniDriver(radarChartPrivateDriverFactory);

  afterEach(cleanup);

  describe('scale prop', () => {
    it('should render 2 scale lines by default', async () => {
      const { driver } = render(<RadarChart />);

      expect(await driver.getScaleLinesCount()).toEqual(2);
    });

    it('should render [when] given scale property', async () => {
      const scale = [
        { value: 25, label: '25%' },
        { value: 50, label: '50%' },
        { value: 75, label: '75%' },
        { value: 100, label: '100%' },
      ];

      const { driver } = render(<RadarChart scale={scale} />);

      expect(await driver.getScaleLinesCount()).toEqual(4);
    });
  });

  describe('data prop', () => {
    it('should render no data by default', async () => {
      const { driver } = render(<RadarChart />);

      expect(await driver.getDataItemsCount()).toEqual(0);
    });

    it('should render data property [when] given', async () => {
      const data = [
        {
          value: 10,
          label: 'Site Sessions',
        },
        {
          value: 20,
          label: 'Visitors',
        },
        {
          value: 30,
          label: 'Total Orders',
        },
      ];

      const { driver } = render(<RadarChart data={data} />);

      expect(await driver.getDataItemsCount()).toEqual(3);
    });
  });

  describe('disabled prop', () => {
    it('should render disabled [when] given', async () => {
      const data = [
        {
          value: 10,
          label: 'Site Sessions',
        },
        {
          value: 20,
          label: 'Visitors',
        },
        {
          value: 30,
          label: 'Total Orders',
        },
      ];
      const { driver } = render(<RadarChart data={data} disabled />);

      expect(await driver.isDisabled()).toEqual(true);
    });
  });

  describe('hoverIndex prop', () => {
    it('hover index is changed when hoverIndex prop is changed', async () => {
      const data = [
        {
          value: 10,
          label: 'Site Sessions',
        },
        {
          value: 20,
          label: 'Visitors',
        },
        {
          value: 30,
          label: 'Total Orders',
        },
      ];
      const { driver, rerender } = render(
        <RadarChart data={data} hoverIndex={2} />,
      );

      expect(await driver.getHoverIndex()).toEqual('2');
      rerender(<RadarChart hoverIndex={1} />);
      expect(await driver.getHoverIndex()).toEqual('1');
    });
  });
});