From 941717c7d447fc5a65cb9b9dbac5e2ee13640b2a Mon Sep 17 00:00:00 2001
From: jamaljsr <jamal@farrock.com>
Date: Tue, 21 Apr 2020 01:04:07 -0400
Subject: [PATCH] test: add unit tests for collapse icon

---
 .../components/layout/Layout.spec.tsx         | 24 +++++++++++++++++++
 app/src/components/NodeStatus.tsx             |  4 ++--
 app/src/components/layout/Layout.tsx          |  2 +-
 3 files changed, 27 insertions(+), 3 deletions(-)
 create mode 100644 app/src/__tests__/components/layout/Layout.spec.tsx

diff --git a/app/src/__tests__/components/layout/Layout.spec.tsx b/app/src/__tests__/components/layout/Layout.spec.tsx
new file mode 100644
index 00000000..a04d6853
--- /dev/null
+++ b/app/src/__tests__/components/layout/Layout.spec.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import { fireEvent } from '@testing-library/react';
+import { renderWithProviders } from 'util/tests';
+import Layout from 'components/layout/Layout';
+
+describe('Layout component', () => {
+  const render = () => {
+    return renderWithProviders(<Layout />);
+  };
+
+  it('should display the hamburger menu', () => {
+    const { getByTitle } = render();
+    expect(getByTitle('menu')).toBeInTheDocument();
+  });
+
+  it('should toggle collapsed state', () => {
+    const { getByTitle, store } = render();
+    expect(store.sidebarCollapsed).toBe(false);
+    fireEvent.click(getByTitle('menu'));
+    expect(store.sidebarCollapsed).toBe(true);
+    fireEvent.click(getByTitle('menu'));
+    expect(store.sidebarCollapsed).toBe(false);
+  });
+});
diff --git a/app/src/components/NodeStatus.tsx b/app/src/components/NodeStatus.tsx
index c6893064..b071833f 100644
--- a/app/src/components/NodeStatus.tsx
+++ b/app/src/components/NodeStatus.tsx
@@ -43,11 +43,11 @@ const NodeStatus: React.FC = () => {
     <Wrapper>
       <StatusTitle>Node Status</StatusTitle>
       <XLargeText block>
-        <BoltIcon />
+        <BoltIcon title="bolt" />
         {channelBalance.toLocaleString()} SAT
       </XLargeText>
       <SmallText block>
-        <BitcoinIcon />
+        <BitcoinIcon title="bitcoin" />
         {walletBalance.toLocaleString()}
       </SmallText>
       <Divider />
diff --git a/app/src/components/layout/Layout.tsx b/app/src/components/layout/Layout.tsx
index 8e166b64..7ce881f0 100644
--- a/app/src/components/layout/Layout.tsx
+++ b/app/src/components/layout/Layout.tsx
@@ -56,7 +56,7 @@ const Layout: React.FC = ({ children }) => {
   return (
     <Background>
       <Container>
-        <MenuIcon onClick={app.toggleSidebar} />
+        <MenuIcon title="menu" onClick={app.toggleSidebar} />
         <Aside collapsed={sidebarCollapsed}>
           <Sidebar />
         </Aside>