refactor: use React 18+ code, added tests, updated dependencies

Author: thorsten

jest.setup.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package.json

@@ -1,6 +1,6 @@
 {
   "name": "password.phpmyfaq.de",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "homepage": "https://password.phpmyfaq.de",
   "description": "Password Hash Generator Tool for phpMyFAQ",
   "private": true,
@@ -12,26 +12,28 @@
     "eject": "react-scripts eject"
   },
   "dependencies": {
-    "@testing-library/jest-dom": "^5.16.2",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^14.4.3",
-    "@types/jest": "^29.2.4",
-    "@types/node": "^18.11.13",
-    "@types/react": "^18.0.26",
-    "@types/react-copy-to-clipboard": "^5.0.2",
-    "@types/react-dom": "^18.0.9",
-    "bootstrap": "^5.2.0",
+    "@types/jest": "^29.5.13",
+    "@types/node": "^22.7.4",
+    "@types/react": "^18.3.10",
+    "@types/react-copy-to-clipboard": "^5.0.7",
+    "@types/react-dom": "^18.3.0",
+    "bootstrap": "^5.3.3",
     "buffer": "^6.0.3",
     "fast-sha256": "^1.3.0",
-    "react": "^18.2.0",
-    "react-bootstrap": "^2.7.0",
+    "react": "^18.3.1",
+    "react-bootstrap": "^2.10.5",
     "react-copy-to-clipboard": "^5.1.0",
-    "react-dom": "^18.2.0",
+    "react-dom": "^18.3.1",
     "react-scripts": "5.0.1",
-    "typescript": "~4.9.4"
+    "typescript": "~5.6.2"
   },
   "devDependencies": {
-    "jest-environment-jsdom": "^29.3.1"
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.5.0",
+    "@testing-library/react": "^16.0.1",
+    "@testing-library/user-event": "^14.5.2",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -47,5 +49,6 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  }
+  },
+  "packageManager": "[email protected]"
 }

src/components/App.tsx

@@ -1,4 +1,4 @@
-import { ChangeEvent, FormEvent, FunctionComponent, useState } from 'react';
+import React, { ChangeEvent, FormEvent, useState } from 'react';
 import Toast from 'react-bootstrap/Toast';
 import CopyToClipboard from 'react-copy-to-clipboard';
 
@@ -10,60 +10,95 @@ import { generateHash } from '../services/generateHash';
 import { InputReadonly } from './InputReadonly/InputReadonly';
 import { Footer } from './Footer/Footer';
 
-export const App: FunctionComponent = () => {
-  const title = 'Password Hash Generator Tool for phpMyFAQ';
+export const App: React.FC = () => {
+    const title = 'Password Hash Generator Tool for phpMyFAQ';
 
-  const [ salt, setSalt ] = useState('');
-  const [ userName, setUserName ] = useState('');
-  const [ password, setPassword ] = useState('');
-  const [ generatedHash, setGeneratedHash ] = useState('');
-  const [ showToast, setShowToast] = useState(false);
+    const [formData, setFormData] = useState({
+        salt: '',
+        userName: '',
+        password: '',
+        generatedHash: '',
+    });
+    const [showToast, setShowToast] = useState(false);
+    const [toastMessage, setToastMessage] = useState('');
 
-  const handleSaltChange = (event: ChangeEvent<HTMLInputElement>) => setSalt(event.target.value);
-  const handleUserNameChange = (event: ChangeEvent<HTMLInputElement>) => setUserName(event.target.value);
-  const handlePasswordChange = (event: ChangeEvent<HTMLInputElement>) => setPassword(event.target.value);
+    // Handle input change
+    const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
+        const { name, value } = event.target;
+        setFormData((prevData) => ({
+            ...prevData,
+            [name]: value,
+        }));
+    };
 
-  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-    const hash = generateHash(userName, password, salt);
-    setGeneratedHash(hash)
-  };
+    // Handle form submit
+    const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+        event.preventDefault();
+        const { userName, password, salt } = formData;
 
-  return <>
-    <div className="position-absolute w-100 d-flex flex-column p-4">
-      <Toast onClose={() => setShowToast(false)} show={showToast} delay={3000} style={{
-        position: 'absolute',
-        top: '1em',
-        right: '1em',
-      }} autohide>
-        <Toast.Header>
-          <strong className="mr-auto">{title}</strong>
-        </Toast.Header>
-        <Toast.Body>Generated hash successfully copied to clipboard!</Toast.Body>
-      </Toast>
-    </div>
-    <div className="App container">
-      <Header title={title}/>
-      <div className="row justify-content-md-center">
-        <div className="col-lg-6 col-sm-12">
-          <form onSubmit={handleSubmit}>
-            <Input label={'Your phpMyFAQ Salt'} onChange={handleSaltChange}/>
-            <Input label={'Your Username'} onChange={handleUserNameChange}/>
-            <InputPassword label={'New Password'} onChange={handlePasswordChange}/>
-            <Button type={ButtonType.SUBMIT}>Generate hash!</Button>
-            {
-              generatedHash &&
-              <div>
-                <InputReadonly label={'Generated Hash'} value={generatedHash}/>
-                <CopyToClipboard text={generatedHash} onCopy={() => setShowToast(true)}>
-                  <Button type={ButtonType.BUTTON}>Copy to clipboard</Button>
-                </CopyToClipboard>
-              </div>
-            }
-          </form>
-        </div>
-      </div>
-      <Footer/>
-    </div>
-  </>;
-}
+        if (!userName || !password || !salt) {
+            setToastMessage('Please fill in all fields.');
+            setShowToast(true);
+            return;
+        }
+
+        const hash = generateHash(userName, password, salt);
+        setFormData((prevData) => ({
+            ...prevData,
+            generatedHash: hash,
+        }));
+        setToastMessage('Hash generated successfully!');
+        setShowToast(true);
+    };
+
+    const { salt, userName, password, generatedHash } = formData;
+
+    return (
+        <>
+            {/* Toast Notification */}
+            <div className="position-absolute w-100 d-flex flex-column p-4">
+                <Toast
+                    onClose={() => setShowToast(false)}
+                    show={showToast}
+                    delay={3000}
+                    autohide
+                    style={{
+                        position: 'absolute',
+                        top: '1em',
+                        right: '1em',
+                    }}
+                >
+                    <Toast.Header>
+                        <strong className="mr-auto">{title}</strong>
+                    </Toast.Header>
+                    <Toast.Body>{toastMessage}</Toast.Body>
+                </Toast>
+            </div>
+
+            {/* Main Content */}
+            <div className="App container">
+                <Header title={title} />
+                <div className="row justify-content-md-center">
+                    <div className="col-lg-6 col-sm-12">
+                        <form onSubmit={handleSubmit}>
+                            <Input label="Your phpMyFAQ Salt" onChange={handleInputChange} value={salt} name="salt" required />
+                            <Input label="Your Username" onChange={handleInputChange} value={userName} name="userName" required />
+                            <InputPassword label="New Password" onChange={handleInputChange} value={password} name="password" required />
+                            <Button type={ButtonType.SUBMIT}>Generate hash!</Button>
+
+                            {generatedHash && (
+                                <div class="mt-4">
+                                    <InputReadonly label="Generated Hash" value={generatedHash} />
+                                    <CopyToClipboard text={generatedHash} onCopy={() => setToastMessage('Generated hash successfully copied to clipboard!')}>
+                                        <Button type={ButtonType.BUTTON}>Copy to clipboard</Button>
+                                    </CopyToClipboard>
+                                </div>
+                            )}
+                        </form>
+                    </div>
+                </div>
+                <Footer />
+            </div>
+        </>
+    );
+};

src/components/Button/Button.test.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { render, fireEvent, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { Button, ButtonType } from './Button';
+
+describe('Button Component', () => {
+    test('renders the button with the correct text', () => {
+        render(<Button type={ButtonType.BUTTON}>Click Me</Button>);
+        expect(screen.getByRole('button')).toHaveTextContent('Click Me');
+    });
+
+    test('renders the button with the correct type attribute', () => {
+        render(<Button type={ButtonType.SUBMIT}>Submit</Button>);
+        expect(screen.getByRole('button')).toHaveAttribute('type', 'submit');
+    });
+
+    test('calls onClick handler when clicked', () => {
+        const handleClick = jest.fn();
+        render(<Button type={ButtonType.BUTTON} onClick={handleClick}>Click Me</Button>);
+        fireEvent.click(screen.getByRole('button'));
+        expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+
+    test('does not call onClick when it is not provided', () => {
+        render(<Button type={ButtonType.BUTTON}>Click Me</Button>);
+        fireEvent.click(screen.getByRole('button'));
+        expect(screen.getByRole('button')).toBeInTheDocument();
+    });
+});

src/components/Button/Button.tsx

@@ -1,24 +1,24 @@
-import React, { FunctionComponent } from 'react';
+import React from 'react';
 
 export enum ButtonType {
-  BUTTON = 'button',
-  SUBMIT = 'submit'
+    BUTTON = 'button',
+    SUBMIT = 'submit'
 }
 
 interface ButtonProps {
-  type: ButtonType;
-  children: string;
-  onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+    type: ButtonType;
+    children: React.ReactNode;
+    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
 }
 
-export const Button: FunctionComponent<ButtonProps> = ({ type, children, onClick }) => {
-  return <>
-    <button
-      className="btn btn-primary btn-lg btn-block mt-4"
-      onClick={onClick}
-      typeof={type}
-    >
-      {children}
-    </button>
-    </>;
-}
+export const Button: React.FC<ButtonProps> = ({ type, children, onClick }) => {
+    return (
+        <button
+            className="btn btn-primary btn-lg btn-block mt-4"
+            onClick={onClick}
+            type={type} // Fixed the attribute name
+        >
+            {children}
+        </button>
+    );
+};

src/components/Footer/Footer.tsx

@@ -1,13 +1,14 @@
-import { FunctionComponent } from 'react';
+import React from 'react';
 
-export const Footer: FunctionComponent = () => {
-  return <>
-    <footer className="my-2 pt-2 text-white text-center text-small">
-      Made with <span role="img" aria-label="heart">❤</span>️ and <span role="img" aria-label="coffee">☕️</span>
-      <br/>
-      <span role="img">©</span> 2019 - 2023 <a target={'_blank'} rel={'noreferrer'} href={'https://www.rinne.info/'}>
-        Thorsten Rinne
-    </a>
-    </footer>
-  </>
-}
+export const Footer: React.FC = () => {
+    return (
+        <footer className="my-2 pt-2 text-white text-center text-small">
+            Made with <span role="img" aria-label="heart">❤</span> and <span role="img" aria-label="coffee">☕️</span>
+            <br />
+            <span role="img" aria-label="copyright">©</span> 2019 - 2024
+            <a target="_blank" rel="noreferrer" href="https://www.rinne.info/">
+                Thorsten Rinne
+            </a>
+        </footer>
+    );
+};

src/components/Header/Header.tsx

@@ -1,17 +1,17 @@
-import { FunctionComponent } from 'react';
+import React from 'react';
 import './Header.css';
 
 interface HeaderProps {
-  title: string;
+    title: string;
 }
 
-export const Header: FunctionComponent<HeaderProps> = ({ title }) => {
-  return <>
-    <header className="app-header">
-      <img src="./logo.png" className="phpmyfaq-logo" alt="phpMyFAQ Logo"/>
-      <h1 className="text-center">
-        {title}
-      </h1>
-    </header>
-  </>;
-}
+export const Header: React.FC<HeaderProps> = ({ title }) => {
+    return (
+        <header className="app-header">
+            <img src="./logo.png" className="phpmyfaq-logo" alt="phpMyFAQ company logo" />
+            <h1 className="text-center">
+                {title}
+            </h1>
+        </header>
+    );
+};

src/components/Input/Input.test.tsx

@@ -0,0 +1,37 @@
+// Input.test.tsx
+import React, { useState } from 'react';
+import { render, fireEvent, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { Input } from './Input';
+
+describe('Input Component', () => {
+    test('renders the input with the correct label', () => {
+        render(<Input label="Username" value="" name="username" onChange={() => {}} />);
+        expect(screen.getByLabelText('Username')).toBeInTheDocument();
+    });
+
+    test('renders the input with the correct value', () => {
+        render(<Input label="Username" value="JohnDoe" name="username" onChange={() => {}} />);
+        expect(screen.getByLabelText('Username')).toHaveValue('JohnDoe');
+    });
+
+    test('calls onChange handler when typing', () => {
+        const TestComponent = () => {
+            const [inputValue, setInputValue] = useState('');
+            const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+                setInputValue(e.target.value);
+            };
+
+            return <Input label="Username" value={inputValue} name="username" onChange={handleChange} />;
+        };
+
+        render(<TestComponent />);
+        fireEvent.change(screen.getByLabelText('Username'), { target: { value: 'JohnDoe' } });
+        expect(screen.getByLabelText('Username')).toHaveValue('JohnDoe');
+    });
+
+    test('renders required attribute when provided', () => {
+        render(<Input label="Username" value="" name="username" onChange={() => {}} required />);
+        expect(screen.getByLabelText('Username')).toBeRequired();
+    });
+});