MOON-436: Migrate tests of PrimaryNav, PrimaryNavItem & PrimaryNavItemsGroup

src/components/PrimaryNav/PrimaryNav.spec.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import {render, screen} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import {PrimaryNav} from './index';
+
+describe('PrimaryNav', () => {
+    const props = {
+        modeIcon: <img/>
+    };
+
+    it('should not be expanded initialy', () => {
+        render(<PrimaryNav {...props}/>);
+        expect(screen.getByRole('navigation')).toHaveAttribute('aria-expanded', 'false');
+    });
+
+    it('should expand when click on NavButton', () => {
+        render(<PrimaryNav {...props}/>);
+        userEvent.click(screen.getByRole('primary-nav-control'));
+        expect(screen.getByRole('navigation')).toHaveAttribute('aria-expanded', 'true');
+    });
+
+    it('should also work when not displaying modeIcon', () => {
+        render(<PrimaryNav/>);
+    });
+
+    it('should add extra attribute', () => {
+        render(<PrimaryNav data-custom="extra" {...props}/>);
+        expect(screen.getByRole('navigation')).toHaveAttribute('data-custom', 'extra');
+    });
+});

src/components/PrimaryNav/PrimaryNavItem/PrimaryNavItem.spec.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import {render, screen} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import {PrimaryNavItem} from './index';
+import {PrimaryNav} from '../PrimaryNav';
+
+describe('NavItem', () => {
+    it('should display a text children', () => {
+        render(<PrimaryNavItem label="Content children"/>);
+        expect(screen.queryByText('Content children')).toBeInTheDocument();
+    });
+
+    it('should add extra attribute', () => {
+        render(<PrimaryNavItem data-testid="primaryNav-item" data-custom="extra"/>);
+        expect(screen.getByTestId('primaryNav-item')).toHaveAttribute('data-custom', 'extra');
+    });
+
+    it('should add extra className', () => {
+        render(<PrimaryNavItem data-testid="primaryNav-item" className="extra"/>);
+        expect(screen.getByTestId('primaryNav-item')).toHaveClass('extra');
+    });
+
+    it('should display the icon', () => {
+        const Icon = () => <svg data-testid="primaryNav-icon"/>;
+        render(<PrimaryNavItem icon={<Icon/>}/>);
+        expect(screen.queryByTestId('primaryNav-icon')).toBeInTheDocument();
+    });
+
+    it('should set selected when given selected property', () => {
+        render(<PrimaryNavItem isSelected data-testid="primaryNav-item"/>);
+        expect(screen.getByTestId('primaryNav-item')).toHaveAttribute('aria-current', 'true');
+    });
+
+    it('should not set selected when not given selected property', () => {
+        render(<PrimaryNavItem data-testid="primaryNav-item"/>);
+        expect(screen.getByTestId('primaryNav-item')).toHaveAttribute('aria-current', 'false');
+    });
+
+    it('should display a link when given a url props', () => {
+        render(<PrimaryNavItem label="Content children" url="toto.com"/>);
+        expect(screen.getByRole('link')).toHaveAttribute('href', 'toto.com');
+    });
+
+    it('should display subtitle when given a subtitle props', () => {
+        render(<PrimaryNavItem subtitle="I'm a subtitle"/>);
+        expect(screen.queryByText('I\'m a subtitle')).toBeInTheDocument();
+    });
+
+    it('should display button', () => {
+        render(<PrimaryNavItem button={<div>hello</div>}/>);
+        expect(screen.queryByText('hello')).toBeInTheDocument();
+    });
+
+    it('should call onClick function', () => {
+        const onClick = jest.fn();
+        render(<PrimaryNav top={<PrimaryNavItem label="test me" onClick={onClick}/>}/>);
+        userEvent.click(screen.getByText('test me'));
+        expect(onClick).toHaveBeenCalled();
+    });
+});

src/components/PrimaryNav/PrimaryNavItem/PrimaryNavItem.tsx

@@ -76,6 +76,7 @@ export const PrimaryNavItem: React.FC<PrimaryNavItemProps> = ({
 
     return (
         <li
+            aria-current={isSelected}
             className={clsx(
                 'moonstone-primaryNavItem',
                 {'moonstone-selected': isSelected},

src/components/PrimaryNav/PrimaryNavItemsGroup/PrimaryNavItemsGroup.spec.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import {render, screen} from '@testing-library/react';
+import {PrimaryNavItemsGroup} from './index';
+
+describe('PrimaryNavItemsGroup', () => {
+    it('should render nothing when it\'s not expanded', () => {
+        render(
+            <PrimaryNavItemsGroup data-testid="primaryNav-itemsGroup" isDisplayedWhenCollapsed={false}>
+                <span>First child</span>
+                <span>Second child</span>
+            </PrimaryNavItemsGroup>);
+        expect(screen.queryByTestId('primaryNav-itemsGroup')).not.toBeInTheDocument();
+    });
+
+    it('should render something when it\'s expanded but not isDisplayedWhenCollapsed', () => {
+        render(
+            <PrimaryNavItemsGroup data-testid="primaryNav-itemsGroup">
+                <span>First child</span>
+                <span>Second child</span>
+            </PrimaryNavItemsGroup>);
+        expect(screen.queryByTestId('primaryNav-itemsGroup')).toBeInTheDocument();
+    });
+
+    it('should render something when it\'s expanded and isDisplayedWhenCollapsed', () => {
+        render(
+            <PrimaryNavItemsGroup isDisplayedWhenCollapsed data-testid="primaryNav-itemsGroup">
+                <span>First child</span>
+                <span>Second child</span>
+            </PrimaryNavItemsGroup>);
+        expect(screen.queryByTestId('primaryNav-itemsGroup')).toBeInTheDocument();
+    });
+
+    it('should render children when it\'s expanded and isDisplayedWhenCollapsed', () => {
+        render(
+            <PrimaryNavItemsGroup>
+                <span>First child</span>
+                <span>Second child</span>
+            </PrimaryNavItemsGroup>);
+        expect(screen.queryByText('First child')).toBeInTheDocument();
+    });
+
+    it('should add extra attribute', () => {
+        render(
+            <PrimaryNavItemsGroup data-testid="primaryNav-itemsGroup" data-custom="extra">
+                <span>First child</span>
+                <span>Second child</span>
+            </PrimaryNavItemsGroup>);
+        expect(screen.getByTestId('primaryNav-itemsGroup')).toHaveAttribute('data-custom', 'extra');
+    });
+});