@vertisanpro/flowbite-react
Version:
Non-Official React components built for Flowbite and Tailwind CSS
58 lines (57 loc) • 3.58 kB
JavaScript
import { render, screen } from '@testing-library/react';
import React from 'react';
import { describe, expect, it } from 'vitest';
import { Timeline } from './Timeline';
describe.concurrent('Components / Timeline', () => {
describe('Rendering horizontal mode', () => {
it('should have className items-base', () => {
render(React.createElement(TestTimelineNoIcon, { horizontal: true }));
expect(timeline()).toBeInTheDocument();
expect(timeline()).toHaveClass('items-base');
});
it('should remove margin-top when do not icon', () => {
render(React.createElement(TestTimelineNoIcon, { horizontal: true }));
expect(timelinePoint()).toBeInTheDocument();
expect(timelinePoint().childNodes[0]).not.toHaveClass('mt-1.5');
});
it('should show icon when render', () => {
render(React.createElement(TestTimelineWithIcon, { horizontal: true }));
expect(timelinePoint()).toBeInTheDocument();
expect(timelinePoint().childNodes[0]).toContainHTML('svg');
});
});
describe('Rendering vertical mode', () => {
it('should have margin-top when do not icon', () => {
render(React.createElement(TestTimelineNoIcon, { horizontal: false }));
expect(timelinePoint()).toBeInTheDocument();
expect(timelinePoint().childNodes[0]).toHaveClass('mt-1.5');
});
it('should show icon when render', () => {
render(React.createElement(TestTimelineWithIcon, { horizontal: false }));
expect(timelinePoint()).toBeInTheDocument();
expect(timelinePoint().childNodes[0]).toContainHTML('svg');
});
});
});
const TestTimelineNoIcon = ({ horizontal, className }) => {
return (React.createElement(Timeline, { horizontal: horizontal, className: className },
React.createElement(Timeline.Item, null,
React.createElement(Timeline.Point, null),
React.createElement(Timeline.Content, null,
React.createElement(Timeline.Time, null, "February 2022"),
React.createElement(Timeline.Title, null, "Application UI code in Tailwind CSS"),
React.createElement(Timeline.Body, null, "Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.")))));
};
const TestTimelineWithIcon = ({ horizontal, className }) => {
return (React.createElement(Timeline, { horizontal: horizontal, className: className },
React.createElement(Timeline.Item, null,
React.createElement(Timeline.Point, { icon: IconSVG }),
React.createElement(Timeline.Content, null,
React.createElement(Timeline.Time, null, "February 2022"),
React.createElement(Timeline.Title, null, "Application UI code in Tailwind CSS"),
React.createElement(Timeline.Body, null, "Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.")))));
};
const IconSVG = () => (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-4 w-4 text-gray-500", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor" },
React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M\n 5 13l4 4L19 7" })));
const timeline = () => screen.getByTestId('timeline-component');
const timelinePoint = () => screen.getByTestId('timeline-point');