import { GlIcon, GlBadge } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import GeoNodeHealthStatus from 'ee/geo_nodes_beta/components/header/geo_node_health_status.vue';
import { HEALTH_STATUS_UI } from 'ee/geo_nodes_beta/constants';

describe('GeoNodeHealthStatus', () => {
  let wrapper;

  const defaultProps = {
    status: 'Healthy',
  };

  const createComponent = (props) => {
    wrapper = shallowMount(GeoNodeHealthStatus, {
      propsData: {
        ...defaultProps,
        ...props,
      },
    });
  };

  afterEach(() => {
    wrapper.destroy();
  });

  const findGeoStatusBadge = () => wrapper.findComponent(GlBadge);
  const findGeoStatusIcon = () => wrapper.findComponent(GlIcon);
  const findGeoStatusText = () => wrapper.find('span');

  describe.each`
    status         | uiData
    ${undefined}   | ${HEALTH_STATUS_UI.unknown}
    ${'Healthy'}   | ${HEALTH_STATUS_UI.healthy}
    ${'Unhealthy'} | ${HEALTH_STATUS_UI.unhealthy}
    ${'Disabled'}  | ${HEALTH_STATUS_UI.disabled}
    ${'Unknown'}   | ${HEALTH_STATUS_UI.unknown}
    ${'Offline'}   | ${HEALTH_STATUS_UI.offline}
  `(`template`, ({ status, uiData }) => {
    beforeEach(() => {
      createComponent({ status });
    });

    describe(`when status is ${status}`, () => {
      it(`renders badge variant to ${uiData.variant}`, () => {
        expect(findGeoStatusBadge().attributes('variant')).toBe(uiData.variant);
      });

      it(`renders icon to ${uiData.icon}`, () => {
        expect(findGeoStatusIcon().attributes('name')).toBe(uiData.icon);
      });

      it(`renders status text to ${uiData.text}`, () => {
        expect(findGeoStatusText().text()).toBe(uiData.text);
      });
    });
  });
});
