import * as React from 'react';
import { render, screen } from '@testing-library/react';
import Hero from './Hero';
import { Button } from '../Button';
import color from '../../styles/colors';
import RGBToHex from '../../utils/rgbToHex';
const testTitle = 'never test a Hero';
const testBgURL =
'https://moralis.io/wp-content/uploads/2021/07/hero_new_img.svg';
const testSubTitle = 'sub titles add context';
const testHeight = '400px';
const testChildren = ;
describe('Hero - Demo', () => {
it('renders the component', () => {
render();
const element = screen.getByTestId('test-hero');
expect(element).not.toBeNull();
});
it('renders the title', () => {
render();
const title = screen.getByTestId('test-hero_title');
expect(title).not.toBeNull();
expect(title.textContent).toBe(testTitle);
const styles = title && getComputedStyle(title);
const colorAsHex = RGBToHex(styles?.color);
expect(colorAsHex).toBe(color.greyDark.toLocaleLowerCase());
});
it('renders the background image and color', () => {
render();
const element = screen.getByTestId('test-hero');
expect(element).not.toBeNull();
const styles = element && getComputedStyle(element);
expect(styles?.backgroundImage).toBe(`url(${testBgURL})`);
const colorAsHex = RGBToHex(styles?.backgroundColor);
expect(colorAsHex).toBe(color.greyLight.toLocaleLowerCase());
});
});
describe('Hero - customized height', () => {
it('renders the component', () => {
render(
,
);
const element = screen.getByTestId('test-hero');
expect(element).not.toBeNull();
});
it('renders the title', () => {
render();
const title = screen.getByTestId('test-hero_title');
expect(title).not.toBeNull();
expect(title.textContent).toBe(testTitle);
});
it('renders the background image', () => {
render();
const element = screen.getByTestId('test-hero');
expect(element).not.toBeNull();
const styles = element && getComputedStyle(element);
expect(styles?.backgroundImage).toBe(`url(${testBgURL})`);
});
it('renders the component with custom height', () => {
render(
,
);
const element = screen.getByTestId('test-hero');
expect(element).not.toBeNull();
const styles = element && getComputedStyle(element);
expect(styles?.height).toBe(testHeight);
});
it('renders the component with sub title', () => {
render(
,
);
const subTitle = screen.getByTestId('test-hero_text');
expect(subTitle).not.toBeNull();
expect(subTitle.textContent).toBe(testSubTitle);
});
it('renders the component with children', () => {
render(
,
);
const element = screen.getByTestId('test-button');
expect(element).not.toBeNull();
});
});