@patternfly/react-core 4.202.17 → 4.202.20

package/src/components/Nav/__tests__/Nav.test.tsx

@@ -1,6 +1,9 @@
 import * as React from 'react';
-import { mount } from 'enzyme';
-import { Nav } from '../Nav';
+
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { Nav, NavContext } from '../Nav';
 import { NavList } from '../NavList';
 import { NavGroup } from '../NavGroup';
 import { NavItem } from '../NavItem';
@@ -15,250 +18,218 @@ const props = {
   ]
 };
 
-// eslint-disable-next-line no-undef
-beforeEach(() => {
-  window.location.hash = '#link1';
-});
-
-const context = {
-  onSelect: () => undefined as any,
-  onToggle: () => undefined as any
-};
-
-test('Default Nav List', () => {
-  const view = mount(
-    <Nav className="test=nav-class">
-      <NavList className="test-nav-list-class">
-        {props.items.map(item => (
-          <NavItem to={item.to} key={item.to} className="test-nav-item-class">
-            {item.label}
-          </NavItem>
-        ))}
-      </NavList>
-    </Nav>,
-    { context }
-  );
-  expect(view).toMatchSnapshot();
-});
-
-test('Dark Nav List', () => {
-  const view = mount(
-    <Nav className="test=nav-class" theme="dark">
-      <NavList className="test-nav-list-class">
-        {props.items.map(item => (
-          <NavItem to={item.to} key={item.to} className="test-nav-item-class">
-            {item.label}
-          </NavItem>
-        ))}
-      </NavList>
-    </Nav>,
-    { context }
-  );
-  expect(view).toMatchSnapshot();
-});
-
-test('Default Nav List - Trigger item active update', () => {
-  window.location.hash = '#link2';
-  const view = mount(
-    <Nav>
-      <NavList>
-        {props.items.map(item => (
-          <NavItem to={item.to} key={item.to}>
-            {item.label}
-          </NavItem>
-        ))}
-      </NavList>
-    </Nav>,
-    { context }
-  );
-  view
-    .find({ href: '#link2' })
-    .first()
-    .simulate('click');
-  expect(view).toMatchSnapshot();
-});
+const renderNav = (ui: React.ReactElement<any, string | React.JSXElementConstructor<any>>) =>
+  render(<NavContext.Provider value={{ onSelect: jest.fn(), onToggle: jest.fn() }}>{ui}</NavContext.Provider>);
 
-test('Simple Nav List', () => {
-  const view = mount(
-    <Nav>
-      <NavList>
-        {props.items.map(item => (
-          <NavItem to={item.to} key={item.to}>
-            {item.label}
-          </NavItem>
-        ))}
-      </NavList>
-    </Nav>,
-    { context }
-  );
-  expect(view).toMatchSnapshot();
-});
+describe('Nav', () => {
+  beforeEach(() => {
+    window.location.hash = '#link1';
+  });
 
-test('Expandable Nav List', () => {
-  const view = mount(
-    <Nav>
-      <NavList>
-        <NavExpandable id="grp-1" title="Section 1">
+  test('Default Nav List', () => {
+    const { asFragment } = renderNav(
+      <Nav className="test-nav-class">
+        <NavList className="test-nav-list-class">
           {props.items.map(item => (
-            <NavItem to={item.to} key={item.to}>
+            <NavItem to={item.to} key={item.to} className="test-nav-item-class">
               {item.label}
             </NavItem>
           ))}
-        </NavExpandable>
-      </NavList>
-    </Nav>,
-    { context }
-  );
-  expect(view).toMatchSnapshot();
-});
-
-test('Expandable Nav verify onExpand', () => {
-  const onExpandSpy = jest.fn();
-  const view = mount(
-    <Nav>
-      <NavList>
-        <NavExpandable id="grp-1" title="Section 1" onExpand={onExpandSpy}>
+        </NavList>
+      </Nav>
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('Dark Nav List', () => {
+    const { asFragment } = renderNav(
+      <Nav className="test=nav-class" theme="dark">
+        <NavList className="test-nav-list-class">
           {props.items.map(item => (
-            <NavItem to={item.to} key={item.to}>
+            <NavItem to={item.to} key={item.to} className="test-nav-item-class">
               {item.label}
             </NavItem>
           ))}
-        </NavExpandable>
-      </NavList>
-    </Nav>,
-    { context }
-  );
-  const btn = view.find('button');
-  btn.simulate('click');
-  expect(onExpandSpy).toBeCalled();
-});
-
-test('Expandable Nav List - Trigger toggle', () => {
-  window.location.hash = '#link2';
-  const view = mount(
-    <Nav>
-      <NavList>
-        <NavExpandable id="grp-1" title="Section 1" className="expandable-group" isExpanded>
+        </NavList>
+      </Nav>
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('Default Nav List - Trigger item active update', () => {
+    const { asFragment } = renderNav(
+      <Nav>
+        <NavList>
           {props.items.map(item => (
             <NavItem to={item.to} key={item.to}>
               {item.label}
             </NavItem>
           ))}
-        </NavExpandable>
-      </NavList>
-    </Nav>,
-    { context }
-  );
-  view
-    .find('li.expandable-group')
-    .first()
-    .simulate('click');
-  expect(view).toMatchSnapshot();
-});
+        </NavList>
+      </Nav>
+    );
+
+    userEvent.click(screen.getByText('Link 2'));
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('Expandable Nav List', () => {
+    const { asFragment } = renderNav(
+      <Nav>
+        <NavList>
+          <NavExpandable id="grp-1" title="Section 1">
+            {props.items.map(item => (
+              <NavItem to={item.to} key={item.to}>
+                {item.label}
+              </NavItem>
+            ))}
+          </NavExpandable>
+        </NavList>
+      </Nav>
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
 
-test('Expandable Nav List with aria label', () => {
-  const view = mount(
-    <Nav aria-label="Test">
-      <NavList>
-        <NavExpandable id="grp-1" title="Section 1" srText="Section 1 - Example sub-navigation">
+  test('Expandable Nav verify onExpand', () => {
+    const onExpand = jest.fn();
+
+    renderNav(
+      <Nav>
+        <NavList>
+          <NavExpandable id="grp-1" title="Section 1" onExpand={onExpand}>
+            {props.items.map(item => (
+              <NavItem to={item.to} key={item.to}>
+                {item.label}
+              </NavItem>
+            ))}
+          </NavExpandable>
+        </NavList>
+      </Nav>
+    );
+
+    userEvent.click(screen.getByRole('button'));
+    expect(onExpand).toBeCalled();
+  });
+
+  test('Expandable Nav List - Trigger toggle', () => {
+    window.location.hash = '#link2';
+
+    const { asFragment } = renderNav(
+      <Nav>
+        <NavList>
+          <NavExpandable id="grp-1" title="Section 1" className="expandable-group" isExpanded>
+            {props.items.map(item => (
+              <NavItem to={item.to} key={item.to}>
+                {item.label}
+              </NavItem>
+            ))}
+          </NavExpandable>
+        </NavList>
+      </Nav>
+    );
+
+    userEvent.click(screen.getByText('Section 1'));
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('Expandable Nav List with aria label', () => {
+    const { asFragment } = renderNav(
+      <Nav aria-label="Test">
+        <NavList>
+          <NavExpandable id="grp-1" title="Section 1" srText="Section 1 - Example sub-navigation">
+            {props.items.map(item => (
+              <NavItem to={item.to} key={item.to}>
+                {item.label}
+              </NavItem>
+            ))}
+          </NavExpandable>
+        </NavList>
+      </Nav>
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('Nav Grouped List', () => {
+    const { asFragment } = renderNav(
+      <Nav>
+        <NavGroup id="grp-1" title="Section 1">
+          <NavList>
+            {props.items.map(item => (
+              <NavItem to={item.to} key={`section1_${item.to}`}>
+                {item.label}
+              </NavItem>
+            ))}
+          </NavList>
+        </NavGroup>
+        <NavGroup id="grp-2" title="Section 2">
+          <NavList>
+            {props.items.map(item => (
+              <NavItem to={item.to} key={`section2_${item.to}`}>
+                {item.label}
+              </NavItem>
+            ))}
+          </NavList>
+        </NavGroup>
+      </Nav>
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('Horizontal Nav List', () => {
+    const { asFragment } = renderNav(
+      <Nav variant="horizontal">
+        <NavList>
           {props.items.map(item => (
             <NavItem to={item.to} key={item.to}>
               {item.label}
             </NavItem>
           ))}
-        </NavExpandable>
-      </NavList>
-    </Nav>,
-    { context }
-  );
-  expect(view).toMatchSnapshot();
-});
-
-test('Nav Grouped List', () => {
-  const view = mount(
-    <Nav>
-      <NavGroup id="grp-1" title="Section 1">
+        </NavList>
+      </Nav>
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('Horizontal SubNav List', () => {
+    const { asFragment } = renderNav(
+      <Nav variant="horizontal-subnav">
         <NavList>
           {props.items.map(item => (
-            <NavItem to={item.to} key={`section1_${item.to}`}>
+            <NavItem to={item.to} key={item.to}>
               {item.label}
             </NavItem>
           ))}
         </NavList>
-      </NavGroup>
-      <NavGroup id="grp-2" title="Section 2">
+      </Nav>
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('Tertiary Nav List', () => {
+    const { asFragment } = renderNav(
+      <Nav variant="tertiary">
         <NavList>
           {props.items.map(item => (
-            <NavItem to={item.to} key={`section2_${item.to}`}>
+            <NavItem to={item.to} key={item.to}>
               {item.label}
             </NavItem>
           ))}
         </NavList>
-      </NavGroup>
-    </Nav>,
-    { context }
-  );
-  expect(view).toMatchSnapshot();
-});
-
-test('Horizontal Nav List', () => {
-  const view = mount(
-    <Nav variant="horizontal">
-      <NavList>
-        {props.items.map(item => (
-          <NavItem to={item.to} key={item.to}>
-            {item.label}
-          </NavItem>
-        ))}
-      </NavList>
-    </Nav>,
-    { context }
-  );
-  expect(view).toMatchSnapshot();
-});
-
-test('Horizontal SubNav List', () => {
-  const view = mount(
-    <Nav variant="horizontal-subnav">
-      <NavList>
-        {props.items.map(item => (
-          <NavItem to={item.to} key={item.to}>
-            {item.label}
-          </NavItem>
-        ))}
-      </NavList>
-    </Nav>,
-    { context }
-  );
-  expect(view).toMatchSnapshot();
-});
-
-test('Tertiary Nav List', () => {
-  const view = mount(
-    <Nav variant="tertiary">
-      <NavList>
-        {props.items.map(item => (
-          <NavItem to={item.to} key={item.to}>
-            {item.label}
+      </Nav>
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('Nav List with custom item nodes', () => {
+    const { asFragment } = renderNav(
+      <Nav variant="tertiary">
+        <NavList>
+          <NavItem to="/components/nav#link1" className="test-nav-item-class">
+            <div className="my-custom-node">My custom node</div>
           </NavItem>
-        ))}
-      </NavList>
-    </Nav>,
-    { context }
-  );
-  expect(view).toMatchSnapshot();
-});
-
-test('Nav List with custom item nodes', () => {
-  const view = mount(
-    <Nav variant="tertiary">
-      <NavList>
-        <NavItem to="/components/nav#link1" className="test-nav-item-class">
-          <div className="my-custom-node">My custom node</div>
-        </NavItem>
-      </NavList>
-    </Nav>,
-    { context }
-  );
-  expect(view).toMatchSnapshot();
+        </NavList>
+      </Nav>
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
 });