From 856ee6d65cee27ea69569e60290e2a45b9a795f9 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Sun, 19 Sep 2021 11:17:56 +0200
Subject: [PATCH] Created MainHeader test

---
 src/common/MainHeader.tsx       |  2 +-
 test/common/MainHeader.test.tsx | 62 +++++++++++++++++++++++++++++++++
 2 files changed, 63 insertions(+), 1 deletion(-)
 create mode 100644 test/common/MainHeader.test.tsx

diff --git a/src/common/MainHeader.tsx b/src/common/MainHeader.tsx
index 4c213a7b..245a0499 100644
--- a/src/common/MainHeader.tsx
+++ b/src/common/MainHeader.tsx
@@ -31,7 +31,7 @@ const MainHeader = (ServersDropdown: FC) => ({ location }: RouteComponentProps)
       <Collapse navbar isOpen={isOpen}>
         <Nav navbar className="ml-auto">
           <NavItem>
-            <NavLink tag={Link} to={'/settings'} active={pathname === settingsPath}>
+            <NavLink tag={Link} to={settingsPath} active={pathname === settingsPath}>
               <FontAwesomeIcon icon={cogsIcon} />&nbsp; Settings
             </NavLink>
           </NavItem>
diff --git a/test/common/MainHeader.test.tsx b/test/common/MainHeader.test.tsx
new file mode 100644
index 00000000..58a3dfeb
--- /dev/null
+++ b/test/common/MainHeader.test.tsx
@@ -0,0 +1,62 @@
+import { shallow, ShallowWrapper } from 'enzyme';
+import { Mock } from 'ts-mockery';
+import { match } from 'react-router';
+import { History, Location } from 'history';
+import { Collapse, NavbarToggler, NavLink } from 'reactstrap';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import createMainHeader from '../../src/common/MainHeader';
+
+describe('<MainHeader />', () => {
+  const ServersDropdown = () => null;
+  const MainHeader = createMainHeader(ServersDropdown);
+  let wrapper: ShallowWrapper;
+
+  const createWrapper = (pathname = '') => {
+    const location = Mock.of<Location>({ pathname });
+
+    wrapper = shallow(<MainHeader history={Mock.all<History>()} location={location} match={Mock.all<match>()} />);
+
+    return wrapper;
+  };
+
+  afterEach(() => wrapper?.unmount());
+
+  test('ServersDropdown is rendered', () => {
+    const wrapper = createWrapper();
+
+    expect(wrapper.find(ServersDropdown)).toHaveLength(1);
+  });
+
+  test.each([
+    [ '/foo', false ],
+    [ '/bar', false ],
+    [ '/settings', true ],
+  ])('link to settings is only active when current path is settings', (currentPath, isActive) => {
+    const wrapper = createWrapper(currentPath);
+    const settingsLink = wrapper.find(NavLink);
+
+    expect(settingsLink.prop('active')).toEqual(isActive);
+  });
+
+  test('expected class is rendered based on the nav bar state', () => {
+    const wrapper = createWrapper();
+
+    expect(wrapper.find(NavbarToggler).find(FontAwesomeIcon).prop('className')).toEqual('main-header__toggle-icon');
+    wrapper.find(NavbarToggler).simulate('click');
+    expect(wrapper.find(NavbarToggler).find(FontAwesomeIcon).prop('className')).toEqual(
+      'main-header__toggle-icon main-header__toggle-icon--opened',
+    );
+    wrapper.find(NavbarToggler).simulate('click');
+    expect(wrapper.find(NavbarToggler).find(FontAwesomeIcon).prop('className')).toEqual('main-header__toggle-icon');
+  });
+
+  test('opens Collapse when clicking toggle', () => {
+    const wrapper = createWrapper();
+
+    expect(wrapper.find(Collapse).prop('isOpen')).toEqual(false);
+    wrapper.find(NavbarToggler).simulate('click');
+    expect(wrapper.find(Collapse).prop('isOpen')).toEqual(true);
+    wrapper.find(NavbarToggler).simulate('click');
+    expect(wrapper.find(Collapse).prop('isOpen')).toEqual(false);
+  });
+});