From 43859e8653b00b7e4cbb78bbe2750643355e99d5 Mon Sep 17 00:00:00 2001 From: Chris L Date: Thu, 6 Jan 2022 15:36:22 +0100 Subject: [PATCH] Use MUI Dialog component instead of custom overlay #164 --- src/Components/App/index.jsx | 38 ++++++------ .../AppSettings/__tests__/index.test.jsx | 7 ++- src/Components/AppSettings/index.jsx | 4 ++ src/Components/Input/Checkbox/style.scss | 4 ++ .../MelodyEditor/__tests__/index.test.jsx | 31 +++++++--- src/Components/MelodyEditor/index.jsx | 20 +++--- src/Components/Overlay/index.jsx | 62 ++++++++++++------- src/Components/Overlay/style.scss | 33 ---------- src/Containers/App/__tests__/index.test.jsx | 11 +++- 9 files changed, 115 insertions(+), 95 deletions(-) delete mode 100644 src/Components/Overlay/style.scss diff --git a/src/Components/App/index.jsx b/src/Components/App/index.jsx index daf21a37f..8b55361e9 100644 --- a/src/Components/App/index.jsx +++ b/src/Components/App/index.jsx @@ -114,25 +114,25 @@ function App({ /> - {appSettings.show && - } - - {melodies.show && - } + + + diff --git a/src/Components/AppSettings/__tests__/index.test.jsx b/src/Components/AppSettings/__tests__/index.test.jsx index e281493d9..a6df91cc1 100644 --- a/src/Components/AppSettings/__tests__/index.test.jsx +++ b/src/Components/AppSettings/__tests__/index.test.jsx @@ -28,12 +28,13 @@ describe('AppSettings', () => { ); expect(screen.getByText(/settingsHeader/i)).toBeInTheDocument(); - expect(screen.getByText(/close/i)).toBeInTheDocument(); + expect(screen.getByTestId('CloseIcon')).toBeInTheDocument(); }); it('should handle clicks on checkbox', () => { @@ -51,6 +52,7 @@ describe('AppSettings', () => { ); @@ -71,11 +73,12 @@ describe('AppSettings', () => { ); - userEvent.click(screen.getByText(/close/i)); + userEvent.click(screen.getByTestId('CloseIcon')); expect(onClose).toHaveBeenCalled(); }); }); diff --git a/src/Components/AppSettings/index.jsx b/src/Components/AppSettings/index.jsx index 153f03daa..e07715d6f 100644 --- a/src/Components/AppSettings/index.jsx +++ b/src/Components/AppSettings/index.jsx @@ -11,6 +11,7 @@ function AppSettings({ settings, onClose, onUpdate, + open, }) { const { t } = useTranslation('settings'); @@ -45,7 +46,9 @@ function AppSettings({
{settingElements} @@ -58,6 +61,7 @@ function AppSettings({ AppSettings.propTypes = { onClose: PropTypes.func.isRequired, onUpdate: PropTypes.func.isRequired, + open: PropTypes.bool.isRequired, settings: PropTypes.shape().isRequired, }; diff --git a/src/Components/Input/Checkbox/style.scss b/src/Components/Input/Checkbox/style.scss index 4dcf1a17d..fa6b306c1 100644 --- a/src/Components/Input/Checkbox/style.scss +++ b/src/Components/Input/Checkbox/style.scss @@ -4,6 +4,10 @@ padding-bottom: 5px; margin-top: 2px; + .input-wrapper { + display: inline-block; + } + &:last-child { border-bottom: none; } diff --git a/src/Components/MelodyEditor/__tests__/index.test.jsx b/src/Components/MelodyEditor/__tests__/index.test.jsx index 4038d36d5..77d679367 100644 --- a/src/Components/MelodyEditor/__tests__/index.test.jsx +++ b/src/Components/MelodyEditor/__tests__/index.test.jsx @@ -50,6 +50,7 @@ describe('MelodyEditor', () => { onDelete={onDelete} onSave={onSave} onWrite={onWrite} + open writing={false} /> ); @@ -58,13 +59,13 @@ describe('MelodyEditor', () => { expect(screen.getAllByText(/common:melodyEditorAccept/i).length).toEqual(1); expect(screen.queryByText(/common:melodyEditorStop/i)).not.toBeInTheDocument(); expect(screen.getAllByText(/Please supply a value and an onChange parameter./i).length).toEqual(2); - expect(screen.getByText(/close/i)).toBeInTheDocument(); + expect(screen.getByTestId('CloseIcon')).toBeInTheDocument(); expect(screen.getByText(/write/i)).toBeInTheDocument(); userEvent.click(screen.getByText(/write/i)); expect(onWrite).not.toHaveBeenCalled(); - userEvent.click(screen.getByText(/close/i)); + userEvent.click(screen.getByTestId('CloseIcon')); expect(onClose).toHaveBeenCalled(); }); @@ -81,6 +82,7 @@ describe('MelodyEditor', () => { onDelete={onDelete} onSave={onSave} onWrite={onWrite} + open writing={false} /> ); @@ -94,7 +96,7 @@ describe('MelodyEditor', () => { expect(screen.getAllByText(/common:melodyEditorAccept/i).length).toEqual(4); expect(screen.queryByText(/common:melodyEditorStop/i)).not.toBeInTheDocument(); expect(screen.queryByText(/Please supply a value and an onChange parameter./i)).not.toBeInTheDocument(); - expect(screen.getByText(/close/i)).toBeInTheDocument(); + expect(screen.getByTestId('CloseIcon')).toBeInTheDocument(); expect(screen.getByText(/write/i)).toBeInTheDocument(); const acceptButtons = screen.getAllByText(/common:melodyEditorAccept/i); @@ -104,7 +106,7 @@ describe('MelodyEditor', () => { userEvent.click(screen.getByText(/write/i)); expect(onWrite).toHaveBeenCalled(); - userEvent.click(screen.getByText(/close/i)); + userEvent.click(screen.getByTestId('CloseIcon')); expect(onClose).toHaveBeenCalled(); }); @@ -121,6 +123,7 @@ describe('MelodyEditor', () => { onDelete={onDelete} onSave={onSave} onWrite={onWrite} + open writing={false} /> ); @@ -134,7 +137,7 @@ describe('MelodyEditor', () => { expect(screen.getAllByText(/common:melodyEditorAccept/i).length).toEqual(4); expect(screen.queryByText(/common:melodyEditorStop/i)).not.toBeInTheDocument(); expect(screen.queryByText(/Please supply a value and an onChange parameter./i)).not.toBeInTheDocument(); - expect(screen.getByText(/close/i)).toBeInTheDocument(); + expect(screen.getByTestId('CloseIcon')).toBeInTheDocument(); expect(screen.getByText(/write/i)).toBeInTheDocument(); const acceptButtons = screen.getAllByText(/common:melodyEditorAccept/i); @@ -156,6 +159,7 @@ describe('MelodyEditor', () => { onDelete={onDelete} onSave={onSave} onWrite={onWrite} + open writing /> ); @@ -169,13 +173,13 @@ describe('MelodyEditor', () => { expect(screen.getAllByText(/common:melodyEditorAccept/i).length).toEqual(4); expect(screen.queryByText(/common:melodyEditorStop/i)).not.toBeInTheDocument(); expect(screen.queryByText(/Please supply a value and an onChange parameter./i)).not.toBeInTheDocument(); - expect(screen.getByText(/close/i)).toBeInTheDocument(); + expect(screen.getByTestId('CloseIcon')).toBeInTheDocument(); expect(screen.getByText(/write/i)).toBeInTheDocument(); userEvent.click(screen.getByText(/write/i)); expect(onWrite).not.toHaveBeenCalled(); - userEvent.click(screen.getByText(/close/i)); + userEvent.click(screen.getByTestId('CloseIcon')); expect(onClose).toHaveBeenCalled(); }); @@ -192,6 +196,7 @@ describe('MelodyEditor', () => { onDelete={onDelete} onSave={onSave} onWrite={onWrite} + open writing={false} /> ); @@ -201,7 +206,7 @@ describe('MelodyEditor', () => { expect(screen.getAllByText(/common:melodyEditorAccept/i).length).toEqual(1); expect(screen.queryByText(/common:melodyEditorStop/i)).not.toBeInTheDocument(); expect(screen.queryByText(/Please supply a value and an onChange parameter./i)).not.toBeInTheDocument(); - expect(screen.getByText(/close/i)).toBeInTheDocument(); + expect(screen.getByTestId('CloseIcon')).toBeInTheDocument(); expect(screen.getByText(/write/i)).toBeInTheDocument(); expect(screen.getByRole(/checkbox/i)).toBeInTheDocument(); @@ -235,6 +240,7 @@ describe('MelodyEditor', () => { onDelete={onDelete} onSave={onSave} onWrite={onWrite} + open writing={false} /> ); @@ -261,6 +267,7 @@ describe('MelodyEditor', () => { onDelete={onDelete} onSave={onSave} onWrite={onWrite} + open selected="Bluejay Default" writing={false} /> @@ -289,6 +296,7 @@ describe('MelodyEditor', () => { onDelete={onDelete} onSave={onSave} onWrite={onWrite} + open selected="Bluejay Default" writing={false} /> @@ -319,6 +327,7 @@ describe('MelodyEditor', () => { onDelete={onDelete} onSave={onSave} onWrite={onWrite} + open writing={false} /> ); @@ -326,7 +335,9 @@ describe('MelodyEditor', () => { userEvent.click(screen.getByText(/common:melodyEditorSave/i)); expect(onSave).not.toHaveBeenCalled(); - fireEvent.change(container.querySelector('input[type=text]'), { + expect(screen.getByTestId('saveMelodyName')).toBeInTheDocument(); + + fireEvent.change(screen.getByTestId('saveMelodyName'), { target: { name: "", value: "TestName", @@ -360,6 +371,7 @@ describe('MelodyEditor', () => { onDelete={onDelete} onSave={onSave} onWrite={onWrite} + open writing={false} /> ); @@ -397,6 +409,7 @@ describe('MelodyEditor', () => { onDelete={onDelete} onSave={onSave} onWrite={onWrite} + open writing={false} /> ); diff --git a/src/Components/MelodyEditor/index.jsx b/src/Components/MelodyEditor/index.jsx index 31316ba7b..0f2b0a740 100644 --- a/src/Components/MelodyEditor/index.jsx +++ b/src/Components/MelodyEditor/index.jsx @@ -27,6 +27,7 @@ function SaveMelody({ onSave }) { return (
- + +
}
- -
+
+ + ); } @@ -408,6 +413,7 @@ MelodyEditor.propTypes = { onDelete: PropTypes.func.isRequired, onSave: PropTypes.func.isRequired, onWrite: PropTypes.func.isRequired, + open: PropTypes.bool.isRequired, writing: PropTypes.bool.isRequired, }; diff --git a/src/Components/Overlay/index.jsx b/src/Components/Overlay/index.jsx index 824df6496..ebe97ccbb 100644 --- a/src/Components/Overlay/index.jsx +++ b/src/Components/Overlay/index.jsx @@ -1,46 +1,62 @@ -import { useTranslation } from 'react-i18next'; import PropTypes from 'prop-types'; import React from 'react'; -import './style.scss'; +import Dialog from '@mui/material/Dialog'; +import DialogTitle from '@mui/material/DialogTitle'; +import DialogContent from '@mui/material/DialogContent'; +import IconButton from '@mui/material/IconButton'; +import CloseIcon from '@mui/icons-material/Close'; function Overlay({ children, headline, + maxWidth, onClose, + open, }) { - const { t } = useTranslation('settings'); + return( + + + {headline} - return ( -
-
- -
-
theme.palette.grey[500], + }} > - {t('closeText')} -
- -

- {headline} -

+ + + + {children} -
-
+ +
); } -Overlay.defaultProps = { children: null }; + +Overlay.defaultProps = { + children: null, + maxWidth: 'sm', + open: false, +}; Overlay.propTypes = { children: PropTypes.element, headline: PropTypes.string.isRequired, + maxWidth: PropTypes.string, onClose: PropTypes.func.isRequired, + open: PropTypes.bool, }; export default Overlay; diff --git a/src/Components/Overlay/style.scss b/src/Components/Overlay/style.scss deleted file mode 100644 index 62efa8a56..000000000 --- a/src/Components/Overlay/style.scss +++ /dev/null @@ -1,33 +0,0 @@ -.overlay { - position: fixed; - width: 100%; - height: 100%; - left: 0px; - top: 0px; - z-index: 2; - display: flex; - justify-content: center; - align-items: center; - - .overlay__wrapper { - padding: 10px; - background: white; - max-width: 500px; - width: 80%; - position: relative; - - .overlay__close { - cursor: pointer; - position: absolute; - top: 10px; - right: 10px; - font-weight: bold; - } - - h3 { - padding-bottom: 5px; - margin-bottom: 10px; - border-bottom: 1px solid silver; - } - } -} diff --git a/src/Containers/App/__tests__/index.test.jsx b/src/Containers/App/__tests__/index.test.jsx index 2a20fdd2e..42ba5e2b9 100644 --- a/src/Containers/App/__tests__/index.test.jsx +++ b/src/Containers/App/__tests__/index.test.jsx @@ -20,6 +20,7 @@ describe('App', () => { test('should render container', () => { render(); + expect(screen.getByRole('button', { name: /settings/i })).toBeInTheDocument(); expect(screen.getByAltText(/Discord/i)).toBeInTheDocument(); @@ -29,12 +30,18 @@ describe('App', () => { // Ensure that the footer is there expect(screen.getByText(/statusbarPortUtilization/i)).toBeInTheDocument(); expect(screen.getByText(/statusbarPacketError/i)).toBeInTheDocument(); + }); + + test('should open the settings', () => { + render(); - // Click the Settings userEvent.click(screen.getByRole('button', { name: /settings/i })); expect(screen.getByText(/settingsHeader/i)).toBeInTheDocument(); + }); + + test('should open the melody editor', () => { + render(); - // Open Melody editor userEvent.click(screen.getByRole('button', { name: /openMelodyEditor/i })); expect(screen.getByText(/melodyEditorHeader/i)).toBeInTheDocument(); });