Merge branch 'master' into test/form-lib

src/core/public/chrome/ui/header/collapsible_nav.test.tsx

@@ -21,34 +21,35 @@ import { mount, ReactWrapper } from 'enzyme';
 import React from 'react';
 import sinon from 'sinon';
 import { CollapsibleNav } from './collapsible_nav';
-import { AppCategory } from '../../../../types';
 import { DEFAULT_APP_CATEGORIES } from '../../..';
 import { StubBrowserStorage } from 'test_utils/stub_browser_storage';
+import { NavLink, RecentNavLink } from './nav_link';
 
 jest.mock('@elastic/eui/lib/services/accessibility/html_id_generator', () => ({
   htmlIdGenerator: () => () => 'mockId',
 }));
 
 const { kibana, observability, security, management } = DEFAULT_APP_CATEGORIES;
 
-function mockLink(label: string, category?: AppCategory) {
+function mockLink({ label = 'discover', category, onClick }: Partial<NavLink>) {
   return {
     key: label,
     label,
     href: label,
     isActive: true,
-    onClick: () => {},
+    onClick: onClick || (() => {}),
     category,
     'data-test-subj': label,
   };
 }
 
-function mockRecentNavLink(label: string) {
+function mockRecentNavLink({ label = 'recent', onClick }: Partial<RecentNavLink>) {
   return {
     href: label,
     label,
     title: label,
     'aria-label': label,
+    onClick,
   };
 }
 
@@ -67,6 +68,20 @@ function mockProps() {
   };
 }
 
+function expectShownNavLinksCount(component: ReactWrapper, count: number) {
+  expect(
+    component.find('.euiAccordion-isOpen a[data-test-subj^="collapsibleNavAppLink"]').length
+  ).toEqual(count);
+}
+
+function expectNavIsClosed(component: ReactWrapper) {
+  expectShownNavLinksCount(component, 0);
+}
+
+function clickGroup(component: ReactWrapper, group: string) {
+  component.find(`[data-test-subj="collapsibleNavGroup-${group}"] button`).simulate('click');
+}
+
 describe('CollapsibleNav', () => {
   // this test is mostly an "EUI works as expected" sanity check
   it('renders the default nav', () => {
@@ -88,16 +103,19 @@ describe('CollapsibleNav', () => {
   it('renders links grouped by category', () => {
     // just a test of category functionality, categories are not accurate
     const navLinks = [
-      mockLink('discover', kibana),
-      mockLink('siem', security),
-      mockLink('metrics', observability),
-      mockLink('monitoring', management),
-      mockLink('visualize', kibana),
-      mockLink('dashboard', kibana),
-      mockLink('canvas'), // links should be able to be rendered top level as well
-      mockLink('logs', observability),
+      mockLink({ label: 'discover', category: kibana }),
+      mockLink({ label: 'siem', category: security }),
+      mockLink({ label: 'metrics', category: observability }),
+      mockLink({ label: 'monitoring', category: management }),
+      mockLink({ label: 'visualize', category: kibana }),
+      mockLink({ label: 'dashboard', category: kibana }),
+      mockLink({ label: 'canvas' }), // links should be able to be rendered top level as well
+      mockLink({ label: 'logs', category: observability }),
+    ];
+    const recentNavLinks = [
+      mockRecentNavLink({ label: 'recent 1' }),
+      mockRecentNavLink({ label: 'recent 2' }),
     ];
-    const recentNavLinks = [mockRecentNavLink('recent 1'), mockRecentNavLink('recent 2')];
     const component = mount(
       <CollapsibleNav
         {...mockProps()}
@@ -110,28 +128,53 @@ describe('CollapsibleNav', () => {
   });
 
   it('remembers collapsible section state', () => {
-    function expectNavLinksCount(component: ReactWrapper, count: number) {
-      expect(
-        component.find('.euiAccordion-isOpen a[data-test-subj="collapsibleNavAppLink"]').length
-      ).toEqual(count);
-    }
-
-    const navLinks = [
-      mockLink('discover', kibana),
-      mockLink('siem', security),
-      mockLink('metrics', observability),
-      mockLink('monitoring', management),
-      mockLink('visualize', kibana),
-      mockLink('dashboard', kibana),
-      mockLink('logs', observability),
-    ];
-    const component = mount(<CollapsibleNav {...mockProps()} isOpen={true} navLinks={navLinks} />);
-    expectNavLinksCount(component, 7);
-    component.find('[data-test-subj="collapsibleNavGroup-kibana"] button').simulate('click');
-    expectNavLinksCount(component, 4);
+    const navLinks = [mockLink({ category: kibana }), mockLink({ category: observability })];
+    const recentNavLinks = [mockRecentNavLink({})];
+    const component = mount(
+      <CollapsibleNav
+        {...mockProps()}
+        isOpen={true}
+        navLinks={navLinks}
+        recentNavLinks={recentNavLinks}
+      />
+    );
+    expectShownNavLinksCount(component, 3);
+    clickGroup(component, 'kibana');
+    clickGroup(component, 'recentlyViewed');
+    expectShownNavLinksCount(component, 1);
     component.setProps({ isOpen: false });
-    expectNavLinksCount(component, 0); // double check the nav closed
+    expectNavIsClosed(component);
+    component.setProps({ isOpen: true });
+    expectShownNavLinksCount(component, 1);
+  });
+
+  it('closes the nav after clicking a link', () => {
+    const onClick = sinon.spy();
+    const onIsOpenUpdate = sinon.spy();
+    const navLinks = [mockLink({ category: kibana, onClick })];
+    const recentNavLinks = [mockRecentNavLink({ onClick })];
+    const component = mount(
+      <CollapsibleNav
+        {...mockProps()}
+        isOpen={true}
+        navLinks={navLinks}
+        recentNavLinks={recentNavLinks}
+      />
+    );
+    component.setProps({
+      onIsOpenUpdate: (isOpen: boolean) => {
+        component.setProps({ isOpen });
+        onIsOpenUpdate();
+      },
+    });
+
+    component.find('[data-test-subj="collapsibleNavGroup-recentlyViewed"] a').simulate('click');
+    expect(onClick.callCount).toEqual(1);
+    expect(onIsOpenUpdate.callCount).toEqual(1);
+    expectNavIsClosed(component);
     component.setProps({ isOpen: true });
-    expectNavLinksCount(component, 4);
+    component.find('[data-test-subj="collapsibleNavGroup-kibana"] a').simulate('click');
+    expect(onClick.callCount).toEqual(2);
+    expect(onIsOpenUpdate.callCount).toEqual(2);
   });
 });