@arnonsang/react-loading
Version:
A highly customizable React loading component library with 17 beautiful animations, and flexible children API
185 lines (184 loc) • 10.9 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = __importDefault(require("react"));
var react_2 = require("@testing-library/react");
require("@testing-library/jest-dom");
var index_1 = __importDefault(require("../index"));
describe('Loading Component', function () {
it('renders without crashing', function () {
(0, react_2.render)(react_1.default.createElement(index_1.default, null));
expect(react_2.screen.getByText('Loading...')).toBeInTheDocument();
});
it('renders with default spinner variant', function () {
var container = (0, react_2.render)(react_1.default.createElement(index_1.default, null)).container;
expect(container.querySelector('.loading-spinner')).toBeInTheDocument();
expect(container.querySelector('.loading-md')).toBeInTheDocument();
});
it('renders custom text', function () {
(0, react_2.render)(react_1.default.createElement(index_1.default, { text: "Please wait..." }));
expect(react_2.screen.getByText('Please wait...')).toBeInTheDocument();
});
it('hides text when hideText is true', function () {
(0, react_2.render)(react_1.default.createElement(index_1.default, { text: "Loading...", hideText: true }));
expect(react_2.screen.queryByText('Loading...')).not.toBeInTheDocument();
});
it('applies custom className', function () {
var container = (0, react_2.render)(react_1.default.createElement(index_1.default, { className: "custom-class" })).container;
expect(container.querySelector('.custom-class')).toBeInTheDocument();
});
it('renders fullPage mode', function () {
var container = (0, react_2.render)(react_1.default.createElement(index_1.default, { fullPage: true })).container;
expect(container.querySelector('.loading-fullpage')).toBeInTheDocument();
});
describe('Variants', function () {
var variants = [
{ variant: 'spinner', selector: '.loading-spinner' },
{ variant: 'dots', selector: '.loading-dots' },
{ variant: 'pulse', selector: '.loading-pulse' },
{ variant: 'skeleton', selector: '.loading-skeleton' },
{ variant: 'bars', selector: '.loading-bars' },
{ variant: 'bubbles', selector: '.loading-bubbles' },
{ variant: 'cylon', selector: '.loading-cylon' },
{ variant: 'spinningBubbles', selector: '.loading-spinning-bubbles' },
{ variant: 'ripple', selector: '.loading-ripple' },
{ variant: 'wave', selector: '.loading-wave' },
{ variant: 'orbit', selector: '.loading-orbit' },
{ variant: 'bounce', selector: '.loading-bounce' },
{ variant: 'snake', selector: '.loading-snake' },
{ variant: 'grid', selector: '.loading-grid' },
{ variant: 'heart', selector: '.loading-heart' },
{ variant: 'spiral', selector: '.loading-spiral' }
];
variants.forEach(function (_a) {
var variant = _a.variant, selector = _a.selector;
it("renders ".concat(variant, " variant correctly"), function () {
var container = (0, react_2.render)(react_1.default.createElement(index_1.default, { variant: variant })).container;
expect(container.querySelector(selector)).toBeInTheDocument();
});
});
it('renders blank variant with no content', function () {
var container = (0, react_2.render)(react_1.default.createElement(index_1.default, { variant: "blank" })).container;
expect(container.querySelector('.loading-container')).toBeInTheDocument();
expect(container.querySelector('.loading-spinner')).not.toBeInTheDocument();
});
});
describe('Sizes', function () {
it('renders extra small size', function () {
var container = (0, react_2.render)(react_1.default.createElement(index_1.default, { size: "xs" })).container;
expect(container.querySelector('.loading-xs')).toBeInTheDocument();
});
it('renders small size', function () {
var container = (0, react_2.render)(react_1.default.createElement(index_1.default, { size: "sm" })).container;
expect(container.querySelector('.loading-sm')).toBeInTheDocument();
});
it('renders medium size (default)', function () {
var container = (0, react_2.render)(react_1.default.createElement(index_1.default, { size: "md" })).container;
expect(container.querySelector('.loading-md')).toBeInTheDocument();
});
it('renders large size', function () {
var container = (0, react_2.render)(react_1.default.createElement(index_1.default, { size: "lg" })).container;
expect(container.querySelector('.loading-lg')).toBeInTheDocument();
});
it('renders extra large size', function () {
var container = (0, react_2.render)(react_1.default.createElement(index_1.default, { size: "xl" })).container;
expect(container.querySelector('.loading-xl')).toBeInTheDocument();
});
it('renders 2xl size', function () {
var container = (0, react_2.render)(react_1.default.createElement(index_1.default, { size: "2xl" })).container;
expect(container.querySelector('.loading-2xl')).toBeInTheDocument();
});
});
describe('Colors and Themes', function () {
it('applies custom color via CSS variable', function () {
var container = (0, react_2.render)(react_1.default.createElement(index_1.default, { color: "#ff0000" })).container;
var loadingContainer = container.querySelector('.loading-container');
expect(loadingContainer).toHaveStyle('--loading-color: #ff0000');
});
it('applies theme color', function () {
var container = (0, react_2.render)(react_1.default.createElement(index_1.default, { themeColor: "red" })).container;
var loadingContainer = container.querySelector('.loading-container');
expect(loadingContainer).toHaveStyle('--loading-color: #f56565');
});
it('custom color overrides theme color', function () {
var container = (0, react_2.render)(react_1.default.createElement(index_1.default, { themeColor: "blue", color: "#ff0000" })).container;
var loadingContainer = container.querySelector('.loading-container');
expect(loadingContainer).toHaveStyle('--loading-color: #ff0000');
});
});
describe('Custom Dimensions', function () {
it('applies custom width and height', function () {
var container = (0, react_2.render)(react_1.default.createElement(index_1.default, { width: 100, height: 50 })).container;
var loadingContainer = container.querySelector('.loading-container');
expect(loadingContainer).toHaveStyle('width: 100px');
expect(loadingContainer).toHaveStyle('height: 50px');
});
it('applies string dimensions', function () {
var container = (0, react_2.render)(react_1.default.createElement(index_1.default, { width: "200px", height: "100px" })).container;
var loadingContainer = container.querySelector('.loading-container');
expect(loadingContainer).toHaveStyle('width: 200px');
expect(loadingContainer).toHaveStyle('height: 100px');
});
});
describe('Animation Delay', function () {
it('applies animation delay', function () {
var container = (0, react_2.render)(react_1.default.createElement(index_1.default, { delay: 500 })).container;
var loadingContainer = container.querySelector('.loading-container');
expect(loadingContainer).toHaveStyle('animation-delay: 500ms');
});
});
describe('Dots Variant Specific', function () {
it('renders three dots', function () {
var container = (0, react_2.render)(react_1.default.createElement(index_1.default, { variant: "dots" })).container;
var dots = container.querySelectorAll('.loading-dot');
expect(dots).toHaveLength(3);
});
});
describe('Skeleton Variant Specific', function () {
it('renders skeleton lines', function () {
var container = (0, react_2.render)(react_1.default.createElement(index_1.default, { variant: "skeleton" })).container;
var lines = container.querySelectorAll('.skeleton-line');
expect(lines).toHaveLength(3);
});
});
describe('Bars Variant Specific', function () {
it('renders five bars', function () {
var container = (0, react_2.render)(react_1.default.createElement(index_1.default, { variant: "bars" })).container;
var bars = container.querySelectorAll('.bar');
expect(bars).toHaveLength(5);
});
});
describe('Snake Variant Specific', function () {
it('renders eight snake segments', function () {
var container = (0, react_2.render)(react_1.default.createElement(index_1.default, { variant: "snake" })).container;
var segments = container.querySelectorAll('.snake-segment');
expect(segments).toHaveLength(8);
});
});
describe('Grid Variant Specific', function () {
it('renders nine grid squares', function () {
var container = (0, react_2.render)(react_1.default.createElement(index_1.default, { variant: "grid" })).container;
var squares = container.querySelectorAll('.grid-square');
expect(squares).toHaveLength(9);
});
});
describe('Spiral Variant Specific', function () {
it('renders six spiral dots', function () {
var container = (0, react_2.render)(react_1.default.createElement(index_1.default, { variant: "spiral" })).container;
var dots = container.querySelectorAll('.spiral-dot');
expect(dots).toHaveLength(6);
});
});
describe('Accessibility', function () {
it('has proper loading text for screen readers', function () {
(0, react_2.render)(react_1.default.createElement(index_1.default, { text: "Loading content" }));
expect(react_2.screen.getByText('Loading content')).toBeInTheDocument();
});
it('maintains accessibility with custom text', function () {
(0, react_2.render)(react_1.default.createElement(index_1.default, { text: "Please wait while we process your request" }));
expect(react_2.screen.getByText('Please wait while we process your request')).toBeInTheDocument();
});
});
});