Sha256: 5cac887a4b1ec7e02f92b3768b09997379ab1e6e1c1453dd0b8ac67aa34f24d3
Contents?: true
Size: 1.96 KB
Versions: 40
Compression:
Stored size: 1.96 KB
Contents
import React from 'react';
import { render, screen } from '../../test-utils';
import Body from '../../../pb_body/_body';
const testSubject = 'body';
test('Hover Props: returns proper class name', () => {
const testIdColor = `${testSubject}-hover-color-red`;
render(
<Body
data={{ testid: testIdColor }}
hover={{ color: 'red' }}
text="Hi"
/>
);
let kit = screen.getByTestId(testIdColor);
let expectedClassName = `hover_color-red`;
expect(kit).toHaveClass(expectedClassName);
const testIdBackground = `${testSubject}-hover-background-blue`;
render(
<Body
data={{ testid: testIdBackground }}
hover={{ background: 'blue' }}
text="Hi"
/>
);
kit = screen.getByTestId(testIdBackground);
expectedClassName = `hover_background-blue`;
expect(kit).toHaveClass(expectedClassName);
const testIdShadow = `${testSubject}-hover-shadow-deep`;
render(
<Body
data={{ testid: testIdShadow }}
hover={{ shadow: 'deep' }}
text="Hi"
/>
);
kit = screen.getByTestId(testIdShadow);
expectedClassName = `hover_shadow_deep`;
expect(kit).toHaveClass(expectedClassName);
const testIdScale = `${testSubject}-hover-scale`;
render(
<Body
data={{ testid: testIdScale }}
hover={{ scale: 'xl' }}
text="Test"
/>
);
kit = screen.getByTestId(testIdScale);
expectedClassName = `hover_scale_xl`;
expect(kit).toHaveClass(expectedClassName);
const testIdMultiple = `${testSubject}-hover-multiple`;
render(
<Body
data={{ testid: testIdMultiple }}
hover={{
color: 'green',
background: 'error',
shadow: 'deeper',
scale: 'xl',
}}
text="Hi"
/>
);
kit = screen.getByTestId(testIdMultiple);
expect(kit).toHaveClass('hover_color-green');
expect(kit).toHaveClass('hover_background-error');
expect(kit).toHaveClass('hover_shadow_deeper');
expect(kit).toHaveClass('hover_scale_xl');
});
Version data entries
40 entries across 40 versions & 1 rubygems