Test collapsable menu

onaio · May 24, 2024 · c3a0561 · c3a0561
1 parent 497aaa5
commit c3a0561
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 49 deletions.
diff --git a/app/src/components/page/Sidebar/index.tsx b/app/src/components/page/Sidebar/index.tsx
@@ -80,15 +80,16 @@ export const SidebarComponent: React.FC<SidebarProps> = (props: SidebarProps) =>
       breakpoint='md'
     >
       <div className={`logo ${collapsed ? 'small-logo' : 'main-logo'}`}>
-        <Link hidden={collapsed} to={URL_HOME}>
+        <Link id="main-logo" hidden={collapsed} to={URL_HOME}>
           <img src={MAIN_LOGO_SRC} alt="The logo" />
         </Link>
         <Button
+          id="collapsed-logo"
           hidden={!collapsed}
           onClick={() => setCollapsed(false)} type='link'
         >
           <img src={COLLAPSED_LOGO_SRC} alt="The logo" />
-        </Button>:
+        </Button>
         {!collapsed &&
           <Button className='collapse-icon'  onClick={() => setCollapsed(true)} type='link'><LeftOutlined /></Button>
         }

diff --git a/app/src/configs/__mocks__/env.ts b/app/src/configs/__mocks__/env.ts
@@ -10,6 +10,9 @@ export const ENABLE_OPENSRP_OAUTH = false;
 export const MAIN_LOGO_SRC =
   'https://github.com/OpenSRP/web/raw/master/app/src/assets/images/opensrp-logo-color.png';
 
+export const COLLAPSED_LOGO_SRC =
+  'https://github.com/OpenSRP/web/raw/main/app/src/assets/images/opensrp2-logo-small.png'
+
 export const PLAN_ASSIGNMENT_AT_GEO_LEVEL = 1;
 
 export const OPENSRP_LOGOUT_URL = 'https://opensrp-stage.smartregister.org/opensrp/logout.do';

diff --git a/app/src/containers/ConnectedSidebar/tests/__snapshots__/index.test.tsx.snap b/app/src/containers/ConnectedSidebar/tests/__snapshots__/index.test.tsx.snap
@@ -179,16 +179,35 @@ Object {
       className="ant-layout-sider-children"
     >
       <div
-        className="logo"
+        className="logo main-logo"
       >
         <Link
+          id="main-logo"
           to="/"
         >
           <img
             alt="The logo"
             src="https://github.com/OpenSRP/web/raw/master/app/src/assets/images/opensrp-logo-color.png"
           />
         </Link>
+        <Button
+          hidden={true}
+          id="collapsed-logo"
+          onClick={[Function]}
+          type="link"
+        >
+          <img
+            alt="The logo"
+            src="https://github.com/OpenSRP/web/raw/main/app/src/assets/images/opensrp2-logo-small.png"
+          />
+        </Button>
+        <Button
+          className="collapse-icon"
+          onClick={[Function]}
+          type="link"
+        >
+          <ForwardRef(LeftOutlined) />
+        </Button>
       </div>
       <Menu
         className="menu-dark"
@@ -372,28 +391,3 @@ Array [
   </SubMenu>,
 ]
 `;
-
-exports[`components/ConnectedSidebar shows the correct logo: Logo 1`] = `
-<div
-  className="logo"
->
-  <Link
-    to="/"
-  >
-    <LinkAnchor
-      href="/"
-      navigate={[Function]}
-    >
-      <a
-        href="/"
-        onClick={[Function]}
-      >
-        <img
-          alt="The logo"
-          src="https://github.com/OpenSRP/web/raw/master/app/src/assets/images/opensrp-logo-color.png"
-        />
-      </a>
-    </LinkAnchor>
-  </Link>
-</div>
-`;
diff --git a/app/src/containers/ConnectedSidebar/tests/index.test.tsx b/app/src/containers/ConnectedSidebar/tests/index.test.tsx
@@ -6,9 +6,10 @@ import { MemoryRouter } from 'react-router';
 import ConnectedSidebar from '..';
 import { store } from '@opensrp/store';
 import { act } from 'react-dom/test-utils';
-import toJson from 'enzyme-to-json';
 import { superUserRole } from '@opensrp/react-utils';
 import { RoleContext } from '@opensrp/rbac';
+import { fireEvent, render } from '@testing-library/react';
+import { COLLAPSED_LOGO_SRC, MAIN_LOGO_SRC } from '../../../configs/env';
 
 jest.mock('../../../configs/env');
 jest.mock('../../../configs/settings');
@@ -127,8 +128,8 @@ describe('components/ConnectedSidebar', () => {
     wrapper.unmount();
   });
 
-  it('shows the correct logo', () => {
-    const wrapper = mount(
+  it('shows the correct logo & collapse works as expected', () => {
+    render(
       <Provider store={store}>
         <MemoryRouter initialEntries={[{ pathname: `/draft`, hash: '', search: '', state: {} }]}>
           <RoleContext.Provider value={superUserRole}>
@@ -137,27 +138,21 @@ describe('components/ConnectedSidebar', () => {
         </MemoryRouter>
       </Provider>
     );
-    expect(toJson(wrapper.find('.logo'))).toMatchSnapshot('Logo');
-  });
-
-  it('shows version if available', () => {
-    const envModule = require('../../../configs/env');
-    envModule.OPENSRP_WEB_VERSION = 'v1.0.1';
+    const mainLogo = document.querySelector("#main-logo")
+    expect(mainLogo).toBeVisible() // menu not collapsed
+    expect(mainLogo?.querySelector('img')?.getAttribute('src')).toEqual(MAIN_LOGO_SRC)
+    const collapseLogo = document.querySelector('#collapsed-logo')
+    expect(collapseLogo).not.toBeVisible()
+    expect(collapseLogo?.querySelector('img')?.getAttribute('src')).toEqual(COLLAPSED_LOGO_SRC)
 
-    const wrapper = mount(
-      <Provider store={store}>
-        <MemoryRouter initialEntries={[{ pathname: `/draft`, hash: '', search: '', state: {} }]}>
-          <RoleContext.Provider value={superUserRole}>
-            <ConnectedSidebar />
-          </RoleContext.Provider>
-        </MemoryRouter>
-      </Provider>
-    );
-
-    const version = wrapper.find('.sidebar-version').text();
-    expect(version).toMatchInlineSnapshot(`"v1.0.1"`);
+    // collapse menu
+    const collapseIcon = document.querySelector(".collapse-icon")
+    fireEvent.click(collapseIcon as Element)
+    expect(document.querySelector("#main-logo")).not.toBeVisible()
+    expect(document.querySelector('#collapsed-logo')).toBeVisible()
   });
 
+
   it('correctly sets open keys', () => {
     const wrapper = mount(
       <Provider store={store}>