@vertisanpro/flowbite-react
Version:
Non-Official React components built for Flowbite and Tailwind CSS
190 lines (189 loc) • 10 kB
JavaScript
import { cleanup, render, screen } from '@testing-library/react';
import { BsDribbble, BsFacebook, BsGithub, BsInstagram, BsTwitter } from '@vertisanpro/react-icons/bs';
import React from 'react';
import { describe, expect, it } from 'vitest';
import { Flowbite } from '../Flowbite';
import { Footer } from './Footer';
describe('Components / Footer', () => {
describe('Rendering', () => {
it('should render an `<a>` with an `<img>` on `Footer.Brand href=".."`', () => {
render(React.createElement(Footer, null,
React.createElement(Footer.Brand, { alt: "Flowbite", href: "https://flowbite.com", src: "" }, "Flowbite")));
const a = screen.getByTestId('flowbite-footer-brand');
const img = screen.getByAltText('Flowbite');
expect(a).toBeInTheDocument();
expect(a).toContainElement(img);
});
});
it('should render an `<img>` on `Footer.Brand src=".."`', () => {
render(React.createElement(Footer, null,
React.createElement(Footer.Brand, { alt: "Flowbite", src: "" }, "Flowbite")));
const img = screen.getByAltText('Flowbite');
expect(img).toBeInTheDocument();
});
it('should render an `<a>` on `Footer.Copyright href=".."`', () => {
render(React.createElement(Footer, null,
React.createElement(Footer.Copyright, { by: "Flowbite", href: "https://flowbite.com", year: 2022 }, "Flowbite")));
expect(copyright()).toContainElement(screen.getByRole('link'));
});
it('should render an `<a>` on `Footer.Icon href=".."`', () => {
render(React.createElement(Footer, null,
React.createElement(Footer.Icon, { ariaLabel: "Icon", href: "/", icon: BsFacebook })));
const iconLink = screen.getAllByRole('link')[0];
expect(iconLink).toContainElement(icon());
});
describe('Theme', () => {
it('should use `base` classes', () => {
const theme = {
footer: {
root: {
base: 'text-gray-100',
},
},
};
render(React.createElement(Flowbite, { theme: { theme } },
React.createElement(TestFooter, null)));
expect(footer()).toHaveClass('text-gray-100');
});
it('should use `bgDark` classes', () => {
const theme = {
footer: {
root: {
bgDark: 'text-gray-100',
},
},
};
render(React.createElement(Flowbite, { theme: { theme } },
React.createElement(TestFooter, null)));
expect(footer()).toHaveClass('text-gray-100');
});
it('should use `container` classes', () => {
const theme = {
footer: {
root: {
container: 'text-gray-100',
},
},
};
render(React.createElement(Flowbite, { theme: { theme } },
React.createElement(TestFooter, null)));
expect(footer()).toHaveClass('text-gray-100');
});
describe('`Footer.Brand`', () => {
it('should use `brand` classes', () => {
const theme = {
footer: {
brand: {
base: 'text-gray-100',
img: 'text-gray-200',
span: 'text-gray-300',
},
},
};
render(React.createElement(Flowbite, { theme: { theme } },
React.createElement(Footer, null,
React.createElement(Footer.Brand, { alt: "Flowbite", href: "https://flowbite.com", src: "" }, "Flowbite"))));
expect(brand()).toHaveClass('text-gray-100');
expect(screen.getByRole('img')).toHaveClass('text-gray-200');
cleanup();
render(React.createElement(Flowbite, { theme: { theme } },
React.createElement(Footer, null,
React.createElement(Footer.Brand, { href: "/", src: "" }, "Flowbite"))));
expect(screen.getByTestId('flowbite-footer-brand-span')).toHaveClass('text-gray-300');
});
});
describe('`Footer.Copyright`', () => {
it('should use `copyright` classes', () => {
const theme = {
footer: {
copyright: {
base: 'text-gray-100',
href: 'text-gray-200',
span: 'text-gray-300',
},
},
};
render(React.createElement(Flowbite, { theme: { theme } },
React.createElement(Footer, null,
React.createElement(Footer.Copyright, { by: "Flowbite", year: 2022 }, "Test"))));
expect(copyright()).toHaveClass('text-gray-100');
expect(screen.getByTestId('flowbite-footer-copyright-span')).toHaveClass('text-gray-300');
cleanup();
render(React.createElement(Flowbite, { theme: { theme } },
React.createElement(Footer, null,
React.createElement(Footer.Copyright, { by: "Flowbite", href: "/", year: 2022 }, "Test"))));
expect(screen.getByRole('link')).toHaveClass('text-gray-200');
});
});
describe('`Footer.Icon`', () => {
it('should use `icon` classes', () => {
const theme = {
footer: {
icon: {
base: 'text-gray-800',
size: 'text-gray-900',
},
},
};
render(React.createElement(Flowbite, { theme: { theme } },
React.createElement(Footer, null,
React.createElement(Footer.Icon, { ariaLabel: "Icon", href: "/", icon: BsFacebook }))));
expect(icon()).toHaveClass('text-gray-800');
cleanup();
render(React.createElement(Flowbite, { theme: { theme } },
React.createElement(Footer, null,
React.createElement(Footer.Icon, { ariaLabel: "Icon", icon: BsFacebook }))));
expect(icon()).toHaveClass('text-gray-900');
});
});
describe('`Footer.Title`', () => {
it('should use `title` classes', () => {
const theme = {
footer: {
title: {
base: 'text-gray-100',
},
},
};
render(React.createElement(Flowbite, { theme: { theme } },
React.createElement(Footer.Title, { title: "Flowbite" })));
expect(title()).toHaveClass('text-gray-100');
});
});
});
});
const TestFooter = () => (React.createElement(Footer, { bgDark: true, container: true },
React.createElement("div", { className: "w-full" },
React.createElement("div", { className: "grid w-full justify-between sm:flex sm:justify-between md:flex md:grid-cols-1" },
React.createElement("div", null,
React.createElement(Footer.Brand, { href: "https://flowbite.com", src: "https://flowbite.com/docs/images/logo.svg", alt: "Flowbite Logo", name: "Flowbite" })),
React.createElement("div", { className: "grid grid-cols-2 gap-8 sm:mt-4 sm:grid-cols-3 sm:gap-6" },
React.createElement("div", null,
React.createElement(Footer.Title, { title: "about" }),
React.createElement(Footer.LinkGroup, { col: true },
React.createElement(Footer.Link, { href: "#" }, "Flowbite"),
React.createElement(Footer.Link, { href: "#" }, "Tailwind CSS"))),
React.createElement("div", null,
React.createElement(Footer.Title, { title: "Follow us" }),
React.createElement(Footer.LinkGroup, { col: true },
React.createElement(Footer.Link, { href: "#" }, "Github"),
React.createElement(Footer.Link, { href: "#" }, "Discord"))),
React.createElement("div", null,
React.createElement(Footer.Title, { title: "Legal" }),
React.createElement(Footer.LinkGroup, { col: true },
React.createElement(Footer.Link, { href: "#" }, "Privacy Policy"),
React.createElement(Footer.Link, { href: "#" }, "Terms & Conditions"))))),
React.createElement(Footer.Divider, null),
React.createElement("div", { className: "w-full sm:flex sm:items-center sm:justify-between" },
React.createElement(Footer.Copyright, { href: "#", by: "Flowbite\u2122", year: 2022 }),
React.createElement("div", { className: "mt-4 flex space-x-6 sm:mt-0 sm:justify-center" },
React.createElement(Footer.Icon, { href: "#", icon: BsFacebook }),
React.createElement(Footer.Icon, { href: "#", icon: BsInstagram }),
React.createElement(Footer.Icon, { href: "#", icon: BsTwitter }),
React.createElement(Footer.Icon, { href: "#", icon: BsGithub }),
React.createElement(Footer.Icon, { href: "#", icon: BsDribbble }))))));
const brand = () => screen.getByTestId('flowbite-footer-brand');
const copyright = () => screen.getByTestId('flowbite-footer-copyright');
const footer = () => screen.getByTestId('flowbite-footer');
const icon = () => screen.getByTestId('flowbite-footer-icon');
const title = () => screen.getByTestId('flowbite-footer-title');