@vertisanpro/flowbite-react
Version:
Non-Official React components built for Flowbite and Tailwind CSS
37 lines (36 loc) • 2.11 kB
JavaScript
import { render, screen } from '@testing-library/react';
import React from 'react';
import { describe, expect, it } from 'vitest';
import { Rating } from './Rating';
describe.concurrent('Components / Rating', () => {
describe.concurrent('Rendering', () => {
it('should fill each bar by the specified percentaged when using `Rating.Advanced`', () => {
render(React.createElement(AdvancedRating, null));
expect(bars()[0]).toHaveStyle('width: 70%');
expect(bars()[1]).toHaveStyle('width: 17%');
expect(bars()[2]).toHaveStyle('width: 8%');
expect(bars()[3]).toHaveStyle('width: 4%');
expect(bars()[4]).toHaveStyle('width: 1%');
});
it('should visually distinguish unfilled stars in gray', () => {
render(React.createElement(AdvancedRating, null));
expect(stars()[4]).toHaveClass('text-gray-300');
});
});
});
const AdvancedRating = () => (React.createElement("div", { className: "flex flex-col gap-4" },
React.createElement(Rating, { className: "pt-3" },
React.createElement(Rating.Star, null),
React.createElement(Rating.Star, null),
React.createElement(Rating.Star, null),
React.createElement(Rating.Star, null),
React.createElement(Rating.Star, { filled: false }),
React.createElement("p", { className: "ml-2 text-sm font-medium text-gray-500 dark:text-gray-400" }, "4.95 out of 5")),
React.createElement("p", { className: "pb-3 text-sm font-medium text-gray-500 dark:text-gray-400" }, "1,745 global ratings"),
React.createElement(Rating.Advanced, { percentFilled: 70 }, "5 star"),
React.createElement(Rating.Advanced, { percentFilled: 17 }, "4 star"),
React.createElement(Rating.Advanced, { percentFilled: 8 }, "3 star"),
React.createElement(Rating.Advanced, { percentFilled: 4 }, "2 star"),
React.createElement(Rating.Advanced, { percentFilled: 1 }, "1 star")));
const bars = () => screen.getAllByTestId('flowbite-rating-fill');
const stars = () => screen.getAllByTestId('flowbite-rating-star');