Add NavBar test

Author: acelaya

src/tailwind/navigation/NavBar.tsx

@@ -11,7 +11,11 @@ import type { RequiredReactNode } from '../types';
 import type { DropdownProps } from './Dropdown';
 import { Dropdown as BaseDropdown } from './Dropdown';
 
-const MenuItem: FC<LinkProps & { active?: boolean }> = ({ className, active, ...props }) => (
+type ItemProps = {
+  active?: boolean;
+};
+
+const MenuItem: FC<LinkProps & ItemProps> = ({ className, active, ...props }) => (
   <li role="menuitem" className="tw:w-full tw:flex">
     <Link
       className={clsx(
@@ -29,18 +33,22 @@ const MenuItem: FC<LinkProps & { active?: boolean }> = ({ className, active, ...
   </li>
 );
 
-const Dropdown: FC<Omit<DropdownProps, 'menuAlignment' | 'buttonVariant' | 'menuOffset'>> = (
-  { containerClassName, buttonClassName, menuClassName, ...props },
+const Dropdown: FC<Omit<DropdownProps, 'menuAlignment' | 'buttonVariant' | 'menuOffset'> & ItemProps> = (
+  { containerClassName, buttonClassName, menuClassName, active, ...props },
 ) => {
   return (
     <li role="menuitem" className="tw:w-full tw:flex">
       <BaseDropdown
         containerClassName={clsx('tw:max-md:w-full', containerClassName)}
         buttonVariant="text"
         buttonClassName={clsx(
-          'tw:text-white tw:opacity-60 tw:highlight:opacity-100 tw:transition-opacity',
           'tw:px-2 tw:py-3',
           'tw:max-md:w-full tw:max-md:px-3 tw:max-md:py-2',
+          'tw:text-white tw:highlight:opacity-100 tw:transition-opacity',
+          {
+            'tw:opacity-60': !active,
+            'tw:opacity-100': active,
+          },
           buttonClassName,
         )}
         menuAlignment="right"

test/tailwind/navigation/NavBar.test.tsx

@@ -0,0 +1,34 @@
+import { screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router';
+import { Dropdown, NavBar } from '../../../src/tailwind';
+import { checkAccessibility } from '../../__helpers__/accessibility';
+import { renderWithEvents } from '../../__helpers__/setUpTest';
+
+describe('<NavBar />', () => {
+  const setUp = () => renderWithEvents(
+    <MemoryRouter>
+      <NavBar brand="Brand">
+        <NavBar.MenuItem to="/">Foo</NavBar.MenuItem>
+        <NavBar.MenuItem to="/">Bar</NavBar.MenuItem>
+        <NavBar.MenuItem to="/" active>Baz</NavBar.MenuItem>
+        <NavBar.Dropdown buttonContent="Options">
+          <Dropdown.Item>One</Dropdown.Item>
+          <Dropdown.Item>Two</Dropdown.Item>
+          <Dropdown.Item selected>Three</Dropdown.Item>
+        </NavBar.Dropdown>
+      </NavBar>
+    </MemoryRouter>,
+  );
+
+  it('passes a11y checks', () => checkAccessibility(setUp()));
+
+  it('can toggle menu', async () => {
+    const { user } = setUp();
+
+    expect(screen.queryByRole('menu')).not.toBeInTheDocument();
+    await user.click(screen.getByLabelText('Show menu'));
+    expect(screen.getByRole('menu')).toBeInTheDocument();
+    await user.click(screen.getByLabelText('Hide menu'));
+    expect(screen.queryByRole('menu')).not.toBeInTheDocument();
+  });
+});