@vertisanpro/flowbite-react
Version:
Non-Official React components built for Flowbite and Tailwind CSS
38 lines (37 loc) • 2.06 kB
JavaScript
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import React from 'react';
import { describe, expect, it } from 'vitest';
import { Navbar } from './Navbar';
describe.concurrent('Navbar', () => {
describe.concurrent('A11y', () => {
it('should have `role="navigation"`', () => {
render(React.createElement(Navbar, null));
expect(screen.getByRole('navigation')).toBeInTheDocument();
});
});
describe.concurrent('Keyboard interactions', () => {
it('should hide/show `Navbar.Menu` when `Space` is pressed on `Navbar.Toggle`', async () => {
const user = userEvent.setup();
render(React.createElement(NavbarTest, null));
const collapse = screen.getByTestId('flowbite-navbar-collapse');
const toggle = screen.getByTestId('flowbite-navbar-toggle');
expect(collapse).toHaveClass('hidden');
await user.click(toggle);
expect(collapse).not.toHaveClass('hidden');
await user.click(toggle);
expect(collapse).toHaveClass('hidden');
});
});
});
const NavbarTest = () => (React.createElement(Navbar, null,
React.createElement(Navbar.Brand, { href: "https://flowbite.com/" },
React.createElement("img", { src: "https://flowbite.com/docs/images/logo.svg", className: "mr-3 h-6 sm:h-9", alt: "Flowbite Logo" }),
React.createElement("span", { className: "self-center whitespace-nowrap text-xl font-semibold dark:text-white" }, "Flowbite")),
React.createElement(Navbar.Toggle, null),
React.createElement(Navbar.Collapse, null,
React.createElement(Navbar.Link, { href: "/navbars", active: true }, "Home"),
React.createElement(Navbar.Link, { href: "/navbars" }, "About"),
React.createElement(Navbar.Link, { href: "/navbars" }, "Services"),
React.createElement(Navbar.Link, { href: "/navbars" }, "Pricing"),
React.createElement(Navbar.Link, { href: "/navbars" }, "Contact"))));