reactstrap
Version:
React Bootstrap components
79 lines • 2.59 kB
JavaScript
import React from 'react';
import { render, screen } from '@testing-library/react';
import '@testing-library/jest-dom';
import { Placeholder } from '..';
import { testForDefaultClass } from '../testUtils';
describe('Placeholder', function () {
it('should render with "placeholder" class', function () {
testForDefaultClass(Placeholder, 'placeholder');
});
it('should render column size', function () {
render( /*#__PURE__*/React.createElement(Placeholder, {
"data-testid": "test",
xs: 7
}));
expect(screen.getByTestId('test')).toHaveClass('col-7');
});
it('should render animation', function () {
render( /*#__PURE__*/React.createElement(Placeholder, {
"data-testid": "test",
tag: "p",
animation: "glow"
}));
expect(screen.getByTestId('test')).toHaveClass('placeholder-glow');
});
it('should render color', function () {
render( /*#__PURE__*/React.createElement(Placeholder, {
"data-testid": "test",
xs: 12,
color: "primary"
}));
expect(screen.getByTestId('test')).toHaveClass('bg-primary');
});
it('should render size', function () {
render( /*#__PURE__*/React.createElement(Placeholder, {
"data-testid": "test",
size: "lg",
xs: 12
}));
expect(screen.getByTestId('test')).toHaveClass('placeholder-lg');
});
it('should render different widths for different breakpoints', function () {
render( /*#__PURE__*/React.createElement(Placeholder, {
"data-testid": "test",
size: "lg",
xs: 12,
lg: 8
}));
var node = screen.getByTestId('test');
expect(node).toHaveClass('col-lg-8');
expect(node).toHaveClass('col-12');
});
it('should allow custom columns to be defined', function () {
render( /*#__PURE__*/React.createElement(Placeholder, {
"data-testid": "test",
widths: ['base', 'jumbo'],
base: "4",
jumbo: "6"
}));
var node = screen.getByTestId('test');
expect(node).toHaveClass('col-4');
expect(node).toHaveClass('col-jumbo-6');
});
it('should allow custom columns to be defined with objects', function () {
render( /*#__PURE__*/React.createElement(Placeholder, {
"data-testid": "test",
widths: ['base', 'jumbo', 'custom'],
custom: {
size: 1,
order: 2,
offset: 4
}
}));
var node = screen.getByTestId('test');
expect(node).toHaveClass('col-custom-1');
expect(node).toHaveClass('order-custom-2');
expect(node).toHaveClass('offset-custom-4');
expect(node).not.toHaveClass('col');
});
});