import React from 'react';
import { cleanup } from '@testing-library/react';
import { render } from '../../utils/theme-render-wrapper';
import { Tenant } from './tenant';

afterEach(cleanup);

describe('<Tenant />', () => {
  it(`Should render Tenant with basic props`, () => {
    const content = 'Active';
    const subtitle = 'Details';
    const { getByTestId } = render(
      <Tenant
        title="Tenant"
        subtitle={subtitle}
        companyIconProps={{
          domain: 'https://xd.adobe.com/'
        }}
        companyStatusProps={{
          content,
          colorObj: {
            backgroundColor: '#FFFFFF',
            color: '#FFFFFF'
          }
        }}
      />
    );

    const subtitleEl = getByTestId('subtitle');
    expect(subtitleEl?.textContent).toBe(subtitle);

    const companyStatusEl = getByTestId('coloredTextWithBG');
    expect(companyStatusEl?.textContent).toBe(content);
  });

  it(`Should render Tenant with all props`, () => {
    const { getByTestId } = render(
      <Tenant
        title="Tenant"
        subtitle="Details"
        companyIconProps={{
          domain: 'https://xd.adobe.com/',
          badgeProps: {
            badgeContent: (
              <img
                src="https://res.cloudinary.com/dmbi4u5ho/image/upload/v1622983118/moldova_ucbxye.svg"
                // Add correct country name in 'alt'
                alt="flag"
                width="16px"
                height="16px"
              />
            )
          }
        }}
        companyStatusProps={{
          content: 'Active',
          colorObj: {
            backgroundColor: '#FFFFFF',
            color: '#FFFFFF'
          }
        }}
        subTexts={['One', 'Two', 'Three']}
      />
    );

    const companyStatusEl = getByTestId('coloredTextWithBG');
    expect(companyStatusEl?.textContent).toBe('Active');

    const subTextsEl = getByTestId('subTexts');
    expect(subTextsEl?.textContent).toBe('OneTwoThree');
  });
});