Fixed broken tests by using basename only in production

src/App.jsx

@@ -16,9 +16,11 @@ import UpdateDoc from './update-doc.jsx';
 // Import React styling
 import './App.css';
 
+const basename = process.env === 'production' ? "/~alpt22/editor" : "";
+
 export default function App() {
     return (
-        <Router basename="/~alpt22/editor">
+        <Router basename={basename}>
 
             <div className="App">
                 <Header />

src/__tests__/App.test.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { getByRole, render, screen, act, getByText } from '@testing-library/react';
 import App from '../App';
 import { getAll } from '../models/fetch';
+import { BrowserRouter } from "react-router-dom";
 
 jest.mock("../models/fetch", () => ({
     getAll: jest.fn(),

src/__tests__/new-doc.test.js

@@ -40,29 +40,30 @@ describe('Tests the new document component', () => {
     });
 
     test('submits form and navigates', async () => {
+        // Setup
         const mockNavigate = jest.fn();
         useNavigate.mockReturnValue(mockNavigate);
         const mockResponse = '123';
         addOne.mockResolvedValueOnce({
             json: jest.fn().mockResolvedValueOnce(mockResponse),
         });
 
+        // Act
         render(<NewDoc />);
 
-        fireEvent.change(screen.getByLabelText(/title/i), { target: { value: 'My Document' } });
-        // For some reason there needs to be a space after, or else it cut's of the whole word.
+        userEvent.type(screen.getByLabelText(/title/i), 'My Document');
+        // For some reason there needs to be a space after, or else it cuts of the whole word.
         userEvent.type(document.getElementsByClassName('ql-editor')[0], "This is the content ");
 
         fireEvent.click(screen.getByRole('button', { name: /create document/i }));
 
-
+        // Assert
         await waitFor(() => {
             expect(addOne).toHaveBeenCalledWith({
                 title: 'My Document',
                 content: '<p>This is the content</p>',
             });
             expect(mockNavigate).toHaveBeenCalledWith('/id/123');
         });
-
     });
 });

src/__tests__/update-doc.test.js

@@ -5,8 +5,6 @@ import { useParams, useNavigate } from 'react-router-dom';
 import UpdateDoc from '../update-doc.jsx';
 import { Quill } from 'react-quill';
 
-
-
 // Mock the navigate function for delete function
 jest.mock('react-router-dom', () => ({
     useNavigate: jest.fn(),

src/forms/new-form.jsx

@@ -36,7 +36,7 @@ export function NewForm() {
                 aria-invalid={errors.name ? "true" : "false"} 
                 type="text" 
                 name="title" 
-                required="true"
+                required={true}
                 {...register("title")} 
                 onInvalid={e => {
                     e.currentTarget.setCustomValidity("A document title is required");