@conorheffron/ironoc-frontend 7.3.2 → 7.3.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conorheffron/ironoc-frontend",
-  "version": "7.3.2",
+  "version": "7.3.3",
   "private": false,
   "dependencies": {
     "@fontsource/montserrat": "^5.1.1",
@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.8.2",
     "bootstrap": "5.1",
+    "history": "^5.3.0",
     "react": "^18.3.1",
     "react-bootstrap": "^2.10.5",
     "react-bootstrap-carousel": "^4.1.1",
@@ -15,7 +16,8 @@
     "react-bootstrap-validation": "^0.1.11",
     "react-cookie": "^7.2.2",
     "react-dom": "^18.3.1",
-    "react-router-dom": "^5.3.0",
+    "react-router": "^7.5.2",
+    "react-router-dom": "^7.5.2",
     "reactstrap": "^8.10.0",
     "recharts": "^3.0.0-alpha.5",
     "web-vitals": "^4.2.3"

package/src/App.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
+import { BrowserRouter as Router, Routes, Route } from 'react-router';
 import './App.css';
 import Home from './components/Home';
 import CoffeeHome from './components/CoffeeHome';
@@ -30,11 +30,16 @@ class App extends Component {
 
     return (
       <Router forceRefresh={forceRefresh}>
-        <Switch>
+        <Routes>
           {routes.map((route, index) => (
-            <Route key={index} path={route.path} exact={route.exact} component={route.component} />
+            <Route
+              key={index}
+              path={route.path}
+              {...(route.exact ? { exact: true } : {})}
+              element={<route.component />}
+            />
           ))}
-        </Switch>
+        </Routes>
       </Router>
     );
   }

package/src/App.test.js

@@ -4,31 +4,11 @@ import '@testing-library/jest-dom';
 import Home from './components/Home';
 import App from './App';
 import { createMemoryHistory } from 'history';
-import { Router } from 'react-router-dom';
 import LoadingSpinner from './LoadingSpinner';
 import AppNavBar from './AppNavbar';
 import About from './components/About';
 import Footer from './Footer';
-
-describe('LoadingSpinner', () => {
-  test('renders LoadingSpinner component correctly', () => {
-    // Render the component
-    const { getByRole, getByText } = render(<LoadingSpinner />);
-
-    // Check if the button is present and disabled
-    const button = getByRole('button');
-    expect(button).toBeInTheDocument();
-    expect(button).toBeDisabled();
-
-    // Check if the spinner is present
-    const spinner = getByRole('button');
-    expect(spinner).toBeInTheDocument();
-
-    // Check if the button contains the text "Loading..."
-    const loadingText = getByText('Loading...');
-    expect(loadingText).toBeInTheDocument();
-  });
-});
+import { Router, useLocation, MemoryRouter } from 'react-router';
 
 describe('AppNavBar', () => {
   test('renders AppNavBar component correctly', () => {
@@ -87,18 +67,6 @@ describe('AppNavBar', () => {
   });
 });
 
-describe('App Component Routing', () => {
-  test("sends the user to about", () => {
-    const history = createMemoryHistory({ initialEntries: ["/about"] });
-    render(
-      <Router history={history}>
-        <App />
-      </Router>
-    );
-    expect(history.location.pathname).toBe("/about");
-  });
-});
-
 describe('Footer Component', () => {
   beforeEach(() => {
     // Mock the fetch API

package/src/components/RepoDetails.js

@@ -3,8 +3,17 @@ import { Button, ButtonGroup, Container, InputGroup, Table } from 'reactstrap';
 import '.././App.css';
 import Form from 'react-bootstrap/Form';
 import AppNavbar from '.././AppNavbar';
-import { Link } from 'react-router-dom';
 import LoadingSpinner from '.././LoadingSpinner';
+import { Link, useParams, useNavigate } from 'react-router';
+
+// Helper function to inject `params` and `navigate` into class-based components
+function withRouter(Component) {
+    return (props) => {
+        const params = useParams();
+        const navigate = useNavigate();
+        return <Component {...props} params={params} navigate={navigate} />;
+    };
+}
 
 class RepoDetails extends Component {
     constructor(props) {
@@ -26,21 +35,29 @@ class RepoDetails extends Component {
     onSubmit(event) {
         event.preventDefault();
         const { value } = this.state;
-        this.props.history.push(`/projects/${value}`, {
-            id: value
+        this.props.navigate(`/projects/${value}`, {
+            replace: true,
+            state: {
+                id: value
+            }
         });
+        this.props.navigate(0)
     }
 
     async componentDidMount() {
-        const { match: { params: { id } } } = this.props;
-        const response = await fetch(`/api/get-repo-detail?username=${id}`);
-        const body = await response.json();
-        this.setState({ repoDetailList: body, isLoading: false });
+        const { id } = this.props.params;
+        if (id) {
+            const response = await fetch(`/api/get-repo-detail?username=${id}`);
+            const body = await response.json();
+            this.setState({ repoDetailList: body, isLoading: false });
+        } else {
+            this.setState({ isLoading: false });
+        }
     }
 
     render() {
         const { repoDetailList = [], isLoading = true, value = '' } = this.state;
-        const { match: { params: { id: gitUser = '' } } } = this.props;
+        const { id: gitUser = '' } = this.props.params;
 
         if (isLoading) {
             return (
@@ -107,4 +124,4 @@ class RepoDetails extends Component {
     }
 }
 
-export default RepoDetails;
+export default withRouter(RepoDetails);

package/src/components/RepoIssues.js

@@ -4,6 +4,16 @@ import '.././App.css';
 import Form from 'react-bootstrap/Form';
 import AppNavbar from '.././AppNavbar';
 import LoadingSpinner from '.././LoadingSpinner';
+import { useParams, useNavigate } from 'react-router';
+
+// Helper function to inject `params` and `navigate` into class-based components
+function withRouter(Component) {
+    return (props) => {
+        const params = useParams();
+        const navigate = useNavigate();
+        return <Component {...props} params={params} navigate={navigate} />;
+    };
+}
 
 class RepoIssues extends Component {
     constructor(props) {
@@ -25,23 +35,31 @@ class RepoIssues extends Component {
     onSubmit(event) {
         event.preventDefault();
         const { value } = this.state;
-        const { match: { params: { id } }, history } = this.props;
-        history.push(`/issues/${id}/${value}`, {
-            id: id,
-            repo: value
+        const { id } = this.props.params;
+        this.props.navigate(`/issues/${id}/${value}`, {
+            replace: true,
+            state: {
+                id: id,
+                repo: value
+            }
         });
+        this.props.navigate(0)
     }
 
     async componentDidMount() {
-        const { match: { params: { id, repo } } } = this.props;
-        const response = await fetch(`/api/get-repo-issue/${id}/${repo}/`);
-        const body = await response.json();
-        this.setState({ repoIssueList: body, isLoading: false });
+        const { id, repo } = this.props.params;
+        if (id && repo) {
+            const response = await fetch(`/api/get-repo-issue/${id}/${repo}/`);
+            const body = await response.json();
+            this.setState({ repoIssueList: body, isLoading: false });
+        } else {
+            this.setState({ isLoading: false });
+        }
     }
 
     render() {
         const { repoIssueList = [], isLoading = true, value = '' } = this.state;
-        const { match: { params: { id = '', repo = '' } } } = this.props;
+        const { id = '', repo = '' } = this.props.params;
 
         if (isLoading) {
             return (
@@ -103,4 +121,4 @@ class RepoIssues extends Component {
     }
 }
 
-export default RepoIssues;
+export default withRouter(RepoIssues);

package/src/components/__tests__/Donate.test.js

@@ -1,7 +1,6 @@
 import { render, screen, waitFor } from '@testing-library/react';
 import App from '../../App';
-import { createMemoryHistory } from 'history';
-import { Router } from 'react-router-dom';
+import { Router, MemoryRouter } from 'react-router';
 import Donate from '../Donate';
 import LoadingSpinner from '../../LoadingSpinner';
 
@@ -49,12 +48,11 @@ describe('Donate', () => {
   });
 
   test('displays charity options after fetching data', async () => {
-    const history = createMemoryHistory();
     const { container } = render(
-      <Router history={history}>
-        <Donate />
-      </Router>
-    );
+        <MemoryRouter>
+          <Donate />
+        </MemoryRouter>
+      );
 
     // Wait for the component to finish loading
     await waitFor(() => {
@@ -73,4 +71,3 @@ describe('Donate', () => {
     expect(container.querySelector('.LoadingSpinner')).not.toBeInTheDocument();
   });
 });
-

package/src/components/__tests__/RepoDetails.test.js

@@ -1,83 +1,130 @@
-import { render, screen, waitFor } from '@testing-library/react';
-import App from '../../App';
-import { createMemoryHistory } from 'history';
-import { Router } from 'react-router-dom';
+import React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { MemoryRouter } from 'react-router';
 import RepoDetails from '../RepoDetails';
-import LoadingSpinner from '../../LoadingSpinner';
-
-const mockRepoDetails = [
-  {
-    name: 'repo1',
-    fullName: 'User/repo1',
-    repoUrl: 'https://github.com/User/repo1',
-    description: 'Description of repo1',
-    appHome: 'https://repo1.com',
-    topics: ['topic1', 'topic2']
-  },
-  {
-    name: 'repo2',
-    fullName: 'User/repo2',
-    repoUrl: 'https://github.com/User/repo2',
-    description: 'Description of repo2',
-    appHome: 'https://repo2.com',
-    topics: ['topic3', 'topic4']
-  }
-];
-
-describe('RepoDetails', () => {
-  beforeEach(() => {
-    jest.spyOn(global, 'fetch').mockResolvedValue({
-      json: jest.fn().mockResolvedValue(mockRepoDetails)
+
+jest.mock('react-router', () => ({
+    ...jest.requireActual('react-router'),
+    useParams: jest.fn(),
+    useNavigate: jest.fn(),
+}));
+
+describe('RepoDetails Component', () => {
+    const mockNavigate = jest.fn();
+    const mockParams = { id: 'testUser' };
+
+    beforeEach(() => {
+        require('react-router').useNavigate.mockReturnValue(mockNavigate);
+        require('react-router').useParams.mockReturnValue(mockParams);
+
+        global.fetch = jest.fn(() =>
+            Promise.resolve({
+                json: () =>
+                    Promise.resolve([
+                        {
+                            name: 'testRepo',
+                            repoUrl: 'https://github.com/testRepo',
+                            fullName: 'testUser/testRepo',
+                            description: 'Test repository description',
+                            appHome: 'https://example.com',
+                            topics: 'topic1, topic2',
+                        },
+                    ]),
+            })
+        );
     });
-  });
-
-  afterEach(() => {
-    jest.restoreAllMocks();
-  });
-
-  test('renders AppNavbar component', () => {
-    render(<App />);
-    expect(screen.getByRole('banner')).toBeInTheDocument();
-  });
-
-  test('renders loading state initially', () => {
-    render(<RepoDetails match={{ params: { id: 'User' } }} />);
-    expect(screen.getByText('Loading...')).toBeInTheDocument();
-  });
-
-  test('displays repo details after fetching data', async () => {
-    const history = createMemoryHistory();
-    const { container } = render(
-      <Router history={history}>
-        <RepoDetails match={{ params: { id: 'User' } }} />
-      </Router>
-    );
-
-    // Wait for the component to finish loading
-    await waitFor(() => {
-      expect(screen.queryByText('Loading...')).not.toBeInTheDocument();
+
+    afterEach(() => {
+        jest.clearAllMocks();
     });
 
-    // Check that repo details are displayed
-    mockRepoDetails.forEach(repo => {
-      expect(screen.getByText(repo.fullName)).toBeInTheDocument();
-      expect(screen.queryByText(repo.repoUrl)).not.toBeInTheDocument();
-      expect(screen.getByText(repo.description)).toBeInTheDocument();
-      expect(screen.queryByText(repo.appHome)).not.toBeInTheDocument();
-
-      repo.topics.forEach(topic => {
-        // Select the <td> element
-        const tdElement = screen.getByText((content, element) => {
-          // Ensure the element is a <td>
-          return element.tagName.toLowerCase() === 'td' && content.includes(topic);
-        });
-        // Check if the <td> contains the expected text
-        expect(tdElement).toBeInTheDocument();
-        expect(tdElement).toHaveTextContent(topic);
-      });
+    test('renders loading spinner initially', () => {
+        render(
+            <MemoryRouter>
+                <RepoDetails />
+            </MemoryRouter>
+        );
+
+        expect(screen.getByText(/loading/i)).toBeInTheDocument();
+    });
+
+    test('fetches and displays repo details', async () => {
+        render(
+            <MemoryRouter>
+                <RepoDetails />
+            </MemoryRouter>
+        );
+
+        await waitFor(() => expect(fetch).toHaveBeenCalledTimes(1));
+
+        expect(screen.getByText('testUser/testRepo')).toBeInTheDocument();
+        expect(screen.getByText('Test repository description')).toBeInTheDocument();
+        expect(screen.getByText('topic1, topic2')).toBeInTheDocument();
+    });
+
+
+    test('handles input change', async () => {
+        render(
+            <MemoryRouter>
+                <RepoDetails />
+            </MemoryRouter>
+        );
+
+        // Wait for the loading spinner to disappear
+        await waitFor(() => expect(screen.queryByText(/loading/i)).not.toBeInTheDocument());
+
+        const input = screen.getByPlaceholderText(/Enter GitHub User ID/i);
+        fireEvent.change(input, { target: { value: 'newUser' } });
+
+        expect(input.value).toBe('newUser');
+    });
+
+    test('displays table headers correctly', async () => {
+        render(
+            <MemoryRouter>
+                <RepoDetails />
+            </MemoryRouter>
+        );
+
+        // Wait for the loading spinner to disappear
+        await waitFor(() => expect(screen.queryByText(/loading/i)).not.toBeInTheDocument());
+
+        // Assert that table headers are displayed correctly using roles
+        const repositoryHeader = screen.getByRole('columnheader', { name: /Repository/i });
+        const descriptionHeader = screen.getByRole('columnheader', { name: /Description/i });
+        const appUrlHeader = screen.getByRole('columnheader', { name: /App URL/i });
+        const topicsHeader = screen.getByRole('columnheader', { name: /Topics/i });
+        const actionsHeader = screen.getByRole('columnheader', { name: /Actions/i });
+
+        expect(repositoryHeader).toBeInTheDocument();
+        expect(descriptionHeader).toBeInTheDocument();
+        expect(appUrlHeader).toBeInTheDocument();
+        expect(topicsHeader).toBeInTheDocument();
+        expect(actionsHeader).toBeInTheDocument();
     });
 
-    // Verify that the component does not show the loading spinner
-    expect(container.querySelector('.LoadingSpinner')).not.toBeInTheDocument();
-  });
+    test('navigates on form submission', async () => { // Make the function async
+        render(
+            <MemoryRouter>
+                <RepoDetails />
+            </MemoryRouter>
+        );
+
+        // Wait for the loading spinner to disappear
+        await waitFor(() => expect(screen.queryByText(/loading/i)).not.toBeInTheDocument());
+
+        // Use getByRole to target the input field and button
+        const input = screen.getByRole('textbox', { name: /Enter GitHub User ID/i });
+        const button = screen.getByRole('button', { name: /Search Projects/i });
+
+        // Simulate user input and form submission
+        fireEvent.change(input, { target: { value: 'newUser' } });
+        fireEvent.click(button);
+
+        // Assert that navigation was triggered with the correct arguments
+        expect(mockNavigate).toHaveBeenCalledWith('/projects/newUser', {
+            replace: true,
+            state: { id: 'newUser' },
+        });
+    });
 });

package/src/components/__tests__/RepoIssues.test.js

@@ -1,68 +1,121 @@
-import { render, screen, waitFor } from '@testing-library/react';
-import App from '../../App';
-import { createMemoryHistory } from 'history';
-import { Router } from 'react-router-dom';
+import React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { MemoryRouter } from 'react-router';
 import RepoIssues from '../RepoIssues';
-import LoadingSpinner from '../../LoadingSpinner';
-
-const mockRepoIssues = [
-  {
-    number: 1,
-    title: 'Issue 1',
-    body: 'https://github.com/User/repo/issues/1'
-  },
-  {
-    number: 2,
-    title: 'Issue 2',
-    body: 'https://github.com/User/repo/issues/2'
-  }
-];
-
-describe('RepoIssues', () => {
-  beforeEach(() => {
-    jest.spyOn(global, 'fetch').mockResolvedValue({
-      json: jest.fn().mockResolvedValue(mockRepoIssues)
+
+jest.mock('react-router', () => ({
+    ...jest.requireActual('react-router'),
+    useParams: jest.fn(),
+    useNavigate: jest.fn(),
+}));
+
+describe('RepoIssues Component', () => {
+    const mockNavigate = jest.fn();
+    const mockParams = { id: 'testUser', repo: 'testRepo' };
+
+    beforeEach(() => {
+        require('react-router').useNavigate.mockReturnValue(mockNavigate);
+        require('react-router').useParams.mockReturnValue(mockParams);
+
+        global.fetch = jest.fn(() =>
+            Promise.resolve({
+                json: () =>
+                    Promise.resolve([
+                        {
+                            number: 1,
+                            title: 'Test Issue Title',
+                            body: 'Test issue body description',
+                        },
+                    ]),
+            })
+        );
+    });
+
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+    test('renders loading spinner initially', () => {
+        render(
+            <MemoryRouter>
+                <RepoIssues />
+            </MemoryRouter>
+        );
+
+        expect(screen.getByText(/loading/i)).toBeInTheDocument();
+    });
+
+    test('fetches and displays repo issues', async () => {
+        render(
+            <MemoryRouter>
+                <RepoIssues />
+            </MemoryRouter>
+        );
+
+        await waitFor(() => expect(fetch).toHaveBeenCalledTimes(1));
+
+        expect(screen.getByText(/Test Issue Title/i)).toBeInTheDocument();
+        expect(screen.getByText(/Test issue body description/i)).toBeInTheDocument();
+        expect(screen.getByText(/1/i)).toBeInTheDocument();
     });
-  });
-
-  afterEach(() => {
-    jest.restoreAllMocks();
-  });
-
-  test('renders AppNavbar component', () => {
-    render(<App />);
-    expect(screen.getByRole('banner')).toBeInTheDocument();
-  });
-
-  test('renders loading state initially', () => {
-    render(<RepoIssues match={{ params: { id: 'User', repo: 'ironoc-test' } }} />);
-    expect(screen.getByText('Loading...')).toBeInTheDocument();
-  });
-
-  test('displays repo issues after fetching data', async () => {
-    const history = createMemoryHistory();
-    const { container } = render(
-      <Router history={history}>
-        <RepoIssues match={{ params: { id: 'conors-id', repo: 'ironoc-testing' } }} />
-      </Router>
-    );
-
-    // Wait for the component to finish loading
-    await waitFor(() => {
-      expect(screen.queryByText('Loading...')).not.toBeInTheDocument();
+
+    test('handles input change', async () => {
+        render(
+            <MemoryRouter>
+                <RepoIssues />
+            </MemoryRouter>
+        );
+
+        await waitFor(() => expect(fetch).toHaveBeenCalledTimes(1));
+
+        const input = screen.getByPlaceholderText(/Enter Project Name/i);
+        fireEvent.change(input, { target: { value: 'newRepo' } });
+
+        expect(input.value).toBe('newRepo');
     });
 
-    expect(screen.queryByText('conors-id')).toBeInTheDocument();
-    expect(screen.queryByText('ironoc-testing')).toBeInTheDocument();
+    test('navigates on form submission', async () => {
+        render(
+            <MemoryRouter>
+                <RepoIssues />
+            </MemoryRouter>
+        );
+
+        await waitFor(() => expect(fetch).toHaveBeenCalledTimes(1));
 
-    // Check that repo issues are displayed
-    mockRepoIssues.forEach(issue => {
-      expect(screen.getByText(issue.title)).toBeInTheDocument();
-      expect(screen.getByText(issue.body)).toBeInTheDocument();
-      expect(screen.getByText(issue.number)).toBeInTheDocument();
+        const input = screen.getByPlaceholderText(/Enter Project Name/i);
+        const button = screen.getByText(/Search Issues/i);
+
+        fireEvent.change(input, { target: { value: 'newRepo' } });
+        fireEvent.click(button);
+
+        expect(mockNavigate).toHaveBeenCalledWith('/issues/testUser/newRepo', {
+            replace: true,
+            state: {
+                id: 'testUser',
+                repo: 'newRepo',
+            },
+        });
     });
 
-    // Verify that the component does not show the loading spinner
-    expect(container.querySelector('.LoadingSpinner')).not.toBeInTheDocument();
-  });
+    test('displays table headers correctly', async () => {
+        render(
+            <MemoryRouter>
+                <RepoIssues />
+            </MemoryRouter>
+        );
+
+        // Wait for the loading spinner to disappear
+        await waitFor(() => expect(screen.queryByText(/loading/i)).not.toBeInTheDocument());
+
+        // Use getByRole for specific headers
+        const issueNoHeader = screen.getByRole('columnheader', { name: /Issue No./i });
+        const titleHeader = screen.getByRole('columnheader', { name: /Title/i });
+        const descriptionHeader = screen.getByRole('columnheader', { name: /Description/i });
+
+        // Assert that headers are in the document
+        expect(issueNoHeader).toBeInTheDocument();
+        expect(titleHeader).toBeInTheDocument();
+        expect(descriptionHeader).toBeInTheDocument();
+    });
 });

package/src/index.js

@@ -1,5 +1,5 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
 import reportWebVitals from './reportWebVitals';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import './index.css';
@@ -7,9 +7,9 @@ import App from './App';
 import AppNavBar from './AppNavbar';
 import Footer from './Footer';
 
-const root = ReactDOM.createRoot(document.getElementById('root'));
+const root = createRoot(document.getElementById('root'));
 root.render(
-  <React.StrictMode>
+  <StrictMode>
     <div className="app-wrapper">
         <AppNavBar />
         <div className="content-inner">
@@ -17,7 +17,7 @@ root.render(
         </div>
         <Footer />
     </div>
-  </React.StrictMode>
+  </StrictMode>
 );
 
 reportWebVitals();

package/src/setupTests.js

@@ -1 +1,4 @@
 import '@testing-library/jest-dom';
+import { TextEncoder } from 'util';
+
+global.TextEncoder = TextEncoder;