Merge pull request #1126 from Amsterdam-Music-Lab/ts/convert-button-ts

Refactor: Convert Button component & audio utility to TypeScript

frontend/src/components/Button/Button.test.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { fireEvent, render } from '@testing-library/react';
+import Button from './Button';
+import { describe, expect, it, vi } from 'vitest';
+
+describe('Button component', () => {
+
+    it('renders correctly', () => {
+        const mockOnClick = vi.fn();
+        const { getByText } = render(<Button title="Test Button" onClick={mockOnClick} />);
+        const buttonElement = getByText('Test Button');
+
+        expect(document.body.contains(buttonElement)).toBe(true);
+    });
+
+    it('calls onClick handler only once', () => {
+        const mockOnClick = vi.fn();
+        const { getByText } = render(<Button title="Test Button" onClick={mockOnClick} />);
+
+        const button = getByText('Test Button');
+        fireEvent.click(button);
+        fireEvent.click(button); // second click
+
+        expect(mockOnClick).toHaveBeenCalledTimes(1);
+    });
+
+    it('does not call onClick when disabled is true', () => {
+        const mockOnClick = vi.fn();
+        const { getByText } = render(<Button title="Test Button" onClick={mockOnClick} disabled={true} />);
+
+        const button = getByText('Test Button');
+        fireEvent.click(button);
+
+        expect(mockOnClick).not.toHaveBeenCalled();
+    });
+
+    it('applies custom class and style', () => {
+        const mockOnClick = vi.fn();
+        const style = { backgroundColor: 'blue' };
+        const { getByText } = render(<Button title="Test Button" className="custom-class" style={style} onClick={mockOnClick} />);
+
+        const button = getByText('Test Button');
+
+        expect(button.classList.contains('custom-class')).toBe(true);
+        expect(button.style.backgroundColor).toBe('blue');
+    });
+
+});

frontend/src/components/Button/Button.jsx → frontend/src/components/Button/Button.tsx

@@ -2,6 +2,16 @@ import React, { useRef } from "react";
 import classNames from "classnames";
 import { audioInitialized } from "../../util/audio";
 
+interface ButtonProps {
+    title: string;
+    onClick: (value: string) => void;
+    className?: string;
+    padding?: string;
+    style?: React.CSSProperties;
+    disabled?: boolean;
+    value?: string;
+}
+
 // Button is a button that can only be clicked one time
 const Button = ({
     title,
@@ -11,7 +21,7 @@ const Button = ({
     style = {},
     disabled = false,
     value = "",
-}) => {
+}: ButtonProps) => {
     const clicked = useRef(false);
 
     // Only handle the first click
@@ -28,12 +38,12 @@ const Button = ({
     // Without the browser having registered any user interaction (e.g. click)
     const touchEvent = audioInitialized
         ? {
-              onTouchStart: (e) => {
-                  e.stopPropagation();
-                  clickOnce();
-                  return false;
-              },
-          }
+            onTouchStart: (e) => {
+                e.stopPropagation();
+                clickOnce();
+                return false;
+            },
+        }
         : {};
 
     return (