From 9b3324fe349a62cfb2b5c1e55ed950a5ac280ddc Mon Sep 17 00:00:00 2001
From: Nicolas Ramz <nicolas.ramz@gmail.com>
Date: Mon, 12 Dec 2022 09:27:59 +0100
Subject: [PATCH] HamburgerMenu: rewrote using hooks + added tests

---
 src/components/HamburgerMenu.tsx              | 36 +++++++-----------
 .../__tests__/HamburgerMenu.test.tsx          | 38 +++++++++++++++++++
 2 files changed, 51 insertions(+), 23 deletions(-)
 create mode 100644 src/components/__tests__/HamburgerMenu.test.tsx

diff --git a/src/components/HamburgerMenu.tsx b/src/components/HamburgerMenu.tsx
index 69ae5bb6..5650f4f2 100644
--- a/src/components/HamburgerMenu.tsx
+++ b/src/components/HamburgerMenu.tsx
@@ -1,32 +1,22 @@
 import * as React from 'react'
 import { Menu, MenuItem, MenuDivider } from '@blueprintjs/core'
-import { withTranslation, WithTranslation } from 'react-i18next'
+import { useTranslation } from 'react-i18next'
 
-interface HamburgerProps extends WithTranslation {
+interface HamburgerProps {
     onOpenPrefs: () => void
     onOpenShortcuts: () => void
 }
 
-export class HamburgerMenuClass extends React.Component<HamburgerProps> {
-    constructor(props: HamburgerProps) {
-        super(props)
-    }
+export const HamburgerMenu = ({ onOpenPrefs, onOpenShortcuts }: HamburgerProps) => {
+    const { t } = useTranslation()
 
-    public render(): React.ReactNode {
-        const { t } = this.props
-
-        return (
-            <React.Fragment>
-                <Menu className="data-cy-app-menu">
-                    <MenuItem text={t('NAV.PREFS')} icon="cog" onClick={this.props.onOpenPrefs} />
-                    <MenuDivider />
-                    <MenuItem text={t('NAV.SHORTCUTS')} icon="lightbulb" onClick={this.props.onOpenShortcuts} />
-                </Menu>
-            </React.Fragment>
-        )
-    }
+    return (
+        <>
+            <Menu className="data-cy-app-menu">
+                <MenuItem text={t('NAV.PREFS')} icon="cog" onClick={onOpenPrefs} />
+                <MenuDivider />
+                <MenuItem text={t('NAV.SHORTCUTS')} icon="lightbulb" onClick={onOpenShortcuts} />
+            </Menu>
+        </>
+    )
 }
-
-const HamburgerMenu = withTranslation()(HamburgerMenuClass)
-
-export { HamburgerMenu }
diff --git a/src/components/__tests__/HamburgerMenu.test.tsx b/src/components/__tests__/HamburgerMenu.test.tsx
new file mode 100644
index 00000000..7584c59e
--- /dev/null
+++ b/src/components/__tests__/HamburgerMenu.test.tsx
@@ -0,0 +1,38 @@
+/**
+ * @jest-environment jsdom
+ */
+import React from 'react'
+import { screen, render, setup, t } from 'rtl'
+import { HamburgerMenu } from '../HamburgerMenu'
+
+describe('Badge', () => {
+    const PROPS = {
+        onOpenPrefs: jest.fn(),
+        onOpenShortcuts: jest.fn(),
+    }
+
+    beforeEach(() => jest.clearAllMocks())
+
+    it('should show badge', () => {
+        render(<HamburgerMenu {...PROPS} />)
+
+        expect(screen.getByText(t('NAV.PREFS'))).toBeInTheDocument()
+        expect(screen.getByText(t('NAV.SHORTCUTS'))).toBeInTheDocument()
+    })
+
+    it('should call onOpenPrefs when clicking on prefs menu item', async () => {
+        const { user } = setup(<HamburgerMenu {...PROPS} />)
+
+        await user.click(screen.getByText(t('NAV.PREFS')))
+
+        expect(PROPS.onOpenPrefs).toHaveBeenCalled()
+    })
+
+    it('should call onOpenSHortcuts when clicking on shortcuts menu item', async () => {
+        const { user } = setup(<HamburgerMenu {...PROPS} />)
+
+        await user.click(screen.getByText(t('NAV.SHORTCUTS')))
+
+        expect(PROPS.onOpenShortcuts).toHaveBeenCalled()
+    })
+})