From a35fdbad6909753ae784860ce801663eb56d0f4a Mon Sep 17 00:00:00 2001
From: Drikus Roor <drikusroor@gmail.com>
Date: Fri, 14 Jun 2024 17:31:16 +0200
Subject: [PATCH 1/3] refactor: Convert Button component from JavaScript to
 TypeScript

---
 .../{Button.test.jsx => Button.test.tsx}      |  0
 .../Button/{Button.jsx => Button.tsx}         | 24 +++++++++++++------
 2 files changed, 17 insertions(+), 7 deletions(-)
 rename frontend/src/components/Button/{Button.test.jsx => Button.test.tsx} (100%)
 rename frontend/src/components/Button/{Button.jsx => Button.tsx} (77%)

diff --git a/frontend/src/components/Button/Button.test.jsx b/frontend/src/components/Button/Button.test.tsx
similarity index 100%
rename from frontend/src/components/Button/Button.test.jsx
rename to frontend/src/components/Button/Button.test.tsx
diff --git a/frontend/src/components/Button/Button.jsx b/frontend/src/components/Button/Button.tsx
similarity index 77%
rename from frontend/src/components/Button/Button.jsx
rename to frontend/src/components/Button/Button.tsx
index 46ea0378d..6ddfc7f85 100644
--- a/frontend/src/components/Button/Button.jsx
+++ b/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 (

From 8369e093f978e0cb94ada2a0d014b03e20dbc09c Mon Sep 17 00:00:00 2001
From: Drikus Roor <drikusroor@gmail.com>
Date: Fri, 14 Jun 2024 17:36:27 +0200
Subject: [PATCH 2/3] refactor: Convert audio.js to audio.ts

---
 frontend/src/util/{audio.js => audio.ts} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename frontend/src/util/{audio.js => audio.ts} (100%)

diff --git a/frontend/src/util/audio.js b/frontend/src/util/audio.ts
similarity index 100%
rename from frontend/src/util/audio.js
rename to frontend/src/util/audio.ts

From 504450cb20a458d2c716346e0e6f219fb87c6c02 Mon Sep 17 00:00:00 2001
From: Drikus Roor <drikusroor@gmail.com>
Date: Fri, 14 Jun 2024 18:24:25 +0200
Subject: [PATCH 3/3] fix(test): Fix Button tests after converting to TS

---
 .../src/components/Button/Button.test.tsx     | 34 +++++++++++--------
 1 file changed, 19 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/Button/Button.test.tsx b/frontend/src/components/Button/Button.test.tsx
index ec40ca6e5..5d4747276 100644
--- a/frontend/src/components/Button/Button.test.tsx
+++ b/frontend/src/components/Button/Button.test.tsx
@@ -1,43 +1,47 @@
 import React from 'react';
-import { fireEvent, render, screen } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 import Button from './Button';
-import { vi } from 'vitest';
+import { describe, expect, it, vi } from 'vitest';
 
 describe('Button component', () => {
 
     it('renders correctly', () => {
-        render(<Button title="Test Button" />);
-        const buttonElement = screen.getByText('Test Button');
-        expect(document.body.contains(buttonElement)).to.be.true;
+        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);
     });
 
-    test('calls onClick handler only once', () => {
+    it('calls onClick handler only once', () => {
         const mockOnClick = vi.fn();
-        render(<Button title="Test Button" onClick={mockOnClick} />);
+        const { getByText } = render(<Button title="Test Button" onClick={mockOnClick} />);
 
-        const button = screen.getByText('Test Button');
+        const button = getByText('Test Button');
         fireEvent.click(button);
         fireEvent.click(button); // second click
 
         expect(mockOnClick).toHaveBeenCalledTimes(1);
     });
 
-    test('does not call onClick when disabled is true', () => {
+    it('does not call onClick when disabled is true', () => {
         const mockOnClick = vi.fn();
-        render(<Button title="Test Button" onClick={mockOnClick} disabled={true} />);
+        const { getByText } = render(<Button title="Test Button" onClick={mockOnClick} disabled={true} />);
 
-        const button = screen.getByText('Test Button');
+        const button = getByText('Test Button');
         fireEvent.click(button);
 
         expect(mockOnClick).not.toHaveBeenCalled();
     });
 
-    test('applies custom class and style', () => {
+    it('applies custom class and style', () => {
+        const mockOnClick = vi.fn();
         const style = { backgroundColor: 'blue' };
-        render(<Button title="Test Button" className="custom-class" style={style} />);
+        const { getByText } = render(<Button title="Test Button" className="custom-class" style={style} onClick={mockOnClick} />);
 
-        const button = screen.getByText('Test Button');
-        expect(button.classList.contains('custom-class')).to.be.true;
+        const button = getByText('Test Button');
+        
+        expect(button.classList.contains('custom-class')).toBe(true);
         expect(button.style.backgroundColor).toBe('blue');
     });