@conorheffron/ironoc-frontend 9.1.4 → 9.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conorheffron/ironoc-frontend",
-  "version": "9.1.4",
+  "version": "9.1.6",
   "private": false,
   "license": "GPL-3.0-or-later",
   "dependencies": {
@@ -13,7 +13,7 @@
     "@graphiql/plugin-explorer": "^5.1.1",
     "@graphiql/react": "^0.37.1",
     "@testing-library/user-event": "^14.6.1",
-    "axios": "^1.12.2",
+    "axios": "^1.15.2",
     "bootstrap": "5.3",
     "graphql": "^16.11.0",
     "history": "^5.3.0",

package/src/App.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen, waitFor } from '@testing-library/react';
+import { render, screen, waitFor, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import Home from './components/Home';
 import App from './App';
@@ -9,6 +9,11 @@ import AppNavBar from './AppNavbar';
 import About from './components/About';
 import Footer from './Footer';
 import { Router, useLocation, MemoryRouter } from 'react-router';
+import { trackClickOut } from './utils/activityTracker';
+
+jest.mock('./utils/activityTracker', () => ({
+  trackClickOut: jest.fn(),
+}));
 
 describe('AppNavBar', () => {
   test('renders AppNavBar component correctly', () => {
@@ -65,6 +70,27 @@ describe('AppNavBar', () => {
     expect(homeLink).toBeInTheDocument();
     expect(homeLink.closest('a')).toHaveAttribute('href', '/');
   });
+
+  test('toggles collapsed navbar state when toggler is clicked', async () => {
+    const { container } = render(<AppNavBar />);
+    const toggler = container.querySelector('.navbar-toggler');
+    const collapse = container.querySelector('.navbar-collapse');
+
+    expect(toggler).toBeInTheDocument();
+    expect(collapse).toBeInTheDocument();
+    expect(collapse).not.toHaveClass('show');
+    fireEvent.click(toggler);
+    await waitFor(() => expect(collapse).toHaveClass('show'));
+    fireEvent.click(toggler);
+    await waitFor(() => expect(collapse).not.toHaveClass('show'));
+  });
+
+  test('tracks click-outs for GitHub project links', () => {
+    render(<AppNavBar />);
+    const githubProjectLink = screen.getByText('iRonoc-DB');
+    fireEvent.click(githubProjectLink);
+    expect(trackClickOut).toHaveBeenCalledWith('github', 'https://github.com/conorheffron/ironoc-db');
+  });
 });
 
 describe('Footer Component', () => {
@@ -109,4 +135,21 @@ describe('Footer Component', () => {
     await waitFor(() => expect(fetch).toHaveBeenCalledTimes(1));
     await waitFor(() => expect(screen.getByText('© 2025 by Conor Heffron |')).toBeInTheDocument());
   });
+
+  test('handles non-ok fetch responses', async () => {
+    const textMock = jest.fn(() => Promise.resolve('unexpected-version'));
+    fetch.mockImplementationOnce(() =>
+      Promise.resolve({
+        ok: false,
+        text: textMock,
+      })
+    );
+
+    render(<Footer />);
+    await waitFor(() => expect(fetch).toHaveBeenCalledTimes(1));
+    await waitFor(() => {
+      expect(textMock).not.toHaveBeenCalled();
+      expect(screen.queryByText('unexpected-version')).not.toBeInTheDocument();
+    });
+  });
 });

package/src/AppNavbar.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import "bootstrap/dist/css/bootstrap.min.css";
 import {Navbar, NavbarText, Container, Collapse, NavbarBrand, NavbarToggler, Nav, UncontrolledDropdown, DropdownToggle, DropdownItem, DropdownMenu } from "reactstrap";
 import logo from './img/robot-logo.png';
+import { trackClickOut } from './utils/activityTracker';
 import "@fontsource/montserrat/700.css";
 import "@fontsource/open-sans/400-italic.css";
 
@@ -34,6 +35,10 @@ class AppNavBar extends Component {
         this.setState({ isOpen: !this.state.isOpen });
     };
 
+    handleGitHubClick = (target) => {
+        trackClickOut('github', target);
+    };
+
     render() {
         const { color, light, dark, fixed, container, expand, className, isOpen } = this.state;
 
@@ -76,12 +81,12 @@ class AppNavBar extends Component {
                                 <UncontrolledDropdown inNavbar nav>
                                     <DropdownToggle caret nav>GitHub Projects</DropdownToggle>
                                     <DropdownMenu end>
-                                        <DropdownItem target="_blank" href="https://github.com/conorheffron/ironoc">iRonoc</DropdownItem>
+                                        <DropdownItem target="_blank" href="https://github.com/conorheffron/ironoc" onClick={() => this.handleGitHubClick('https://github.com/conorheffron/ironoc')}>iRonoc</DropdownItem>
                                         <DropdownItem divider />
-                                        <DropdownItem target="_blank" href="https://github.com/conorheffron/ironoc-db">iRonoc-DB</DropdownItem>
-                                        <DropdownItem target="_blank" href="https://github.com/conorheffron/booking-sys">Booking System Sample</DropdownItem>
-                                        <DropdownItem target="_blank" href="https://github.com/conorheffron/nba-stats">NBA Stats Analysis</DropdownItem>
-                                        <DropdownItem target="_blank" href="https://github.com/conorheffron/ironoc-pytest">PyTest GitHub Client Package</DropdownItem>
+                                        <DropdownItem target="_blank" href="https://github.com/conorheffron/ironoc-db" onClick={() => this.handleGitHubClick('https://github.com/conorheffron/ironoc-db')}>iRonoc-DB</DropdownItem>
+                                        <DropdownItem target="_blank" href="https://github.com/conorheffron/booking-sys" onClick={() => this.handleGitHubClick('https://github.com/conorheffron/booking-sys')}>Booking System Sample</DropdownItem>
+                                        <DropdownItem target="_blank" href="https://github.com/conorheffron/nba-stats" onClick={() => this.handleGitHubClick('https://github.com/conorheffron/nba-stats')}>NBA Stats Analysis</DropdownItem>
+                                        <DropdownItem target="_blank" href="https://github.com/conorheffron/ironoc-pytest" onClick={() => this.handleGitHubClick('https://github.com/conorheffron/ironoc-pytest')}>PyTest GitHub Client Package</DropdownItem>
                                     </DropdownMenu>
                                 </UncontrolledDropdown>
                                 <UncontrolledDropdown inNavbar nav>

package/src/components/Donate.js

@@ -8,6 +8,7 @@ import AppNavbar from '../AppNavbar';
 import red from '../img/red-bg.png';
 import { Container } from 'reactstrap';
 import LoadingSpinner from '.././LoadingSpinner';
+import { trackClickOut } from '../utils/activityTracker';
 
 // Define the GraphQL query to fetch donate items
 export const GET_DONATE_ITEMS = gql`
@@ -78,6 +79,58 @@ class Donate extends Component {
             );
         }
 
+    return (
+        <div className="App">
+            <AppNavbar />
+            <Container>
+                <Carousel className="App-header">
+                    {donateItems.map((item, index) => (
+                        <Carousel.Item key={index} interval={500}>
+                            <img className="d-block w-100" src={red} alt={item.alt} />
+
+                            <Carousel.Caption>
+                                <h1 className="mb-3">
+                                    <span style={{ textDecoration: 'underline' }}>{item.name}</span>
+                                </h1>
+
+                                <p>
+                                    <b>Contact & Help by Phone: </b>
+                                    <span dangerouslySetInnerHTML={{ __html: item.phone }} />
+                                </p>
+
+                                <p>
+                                    <b>Home page: </b>
+                                    <a
+                                        href={item.link}
+                                        target="_blank"
+                                        rel="noreferrer"
+                                        onClick={() => trackClickOut('charity', item.link)}
+                                    >
+                                        {item.link}
+                                    </a>
+                                </p>
+
+                                <p className="overview-text">
+                                    <b>Overview:</b> Founded in {item.founded}, {item.overview}
+                                </p>
+
+                                <p>
+                                    <a
+                                        href={item.donate}
+                                        target="_blank"
+                                        rel="noreferrer"
+                                        onClick={() => trackClickOut('charity', item.donate)}
+                                    >
+                                        Donate here
+                                    </a>
+                                </p>
+                            </Carousel.Caption>
+                        </Carousel.Item>
+                    ))}
+                </Carousel>
+            </Container>
+        </div>
+    );
         return (
             <div className="App">
                 <AppNavbar />

package/src/components/RepoIssues.js

@@ -6,7 +6,6 @@ import { useParams, useNavigate } from 'react-router';
 import {
   MaterialReactTable,
   useMaterialReactTable,
-  type MRT_ColumnDef,
 } from 'material-react-table';
 import { darken, lighten, useTheme } from '@mui/material';
 
@@ -126,7 +125,13 @@ const RepoIssues = () => {
     data: repoIssueList,
     enableFacetedValues: true,
     enableStickyHeader: true,
-    initialState: { showColumnFilters: true },
+    initialState: {
+      showColumnFilters: true,
+      columnVisibility: {
+        state: false,
+        body: false,
+      },
+    },
     muiTablePaperProps: {
       elevation: 0,
       sx: {

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

@@ -1,8 +1,13 @@
 import React from 'react';
-import { render, screen, waitFor } from '@testing-library/react';
+import { render, screen, waitFor, fireEvent } from '@testing-library/react';
 import { MockedProvider } from '@apollo/client/testing';
 import Donate, { GET_DONATE_ITEMS } from '../Donate';
 import '@testing-library/jest-dom';
+import { trackClickOut } from '../../utils/activityTracker';
+
+jest.mock('../../utils/activityTracker', () => ({
+    trackClickOut: jest.fn(),
+}));
 
 // Mock data for testing
 const mockDonateItems = [
@@ -57,7 +62,7 @@ const errorMocks = [
 describe('Donate Component', () => {
     it('renders loading spinner initially', () => {
         render(
-            <MockedProvider mocks={mocks} addTypename={true}>
+            <MockedProvider mocks={mocks}>
                 <Donate />
             </MockedProvider>
         );
@@ -68,7 +73,7 @@ describe('Donate Component', () => {
 
     it('renders error message when GraphQL query fails', async () => {
         render(
-            <MockedProvider mocks={errorMocks} addTypename={true}>
+            <MockedProvider mocks={errorMocks}>
                 <Donate />
             </MockedProvider>
         );
@@ -81,7 +86,7 @@ describe('Donate Component', () => {
 
     it('renders donate items after successful fetch', async () => {
         render(
-            <MockedProvider mocks={mocks} addTypename={true}>
+            <MockedProvider mocks={mocks}>
                 <Donate />
             </MockedProvider>
         );
@@ -94,4 +99,27 @@ describe('Donate Component', () => {
             });
         });
     });
+
+    it('tracks charity click-outs for donate and homepage links', async () => {
+        render(
+            <MockedProvider mocks={mocks}>
+                <Donate />
+            </MockedProvider>
+        );
+
+        await waitFor(() => {
+            expect(screen.getByText('Item 1')).toBeInTheDocument();
+        });
+
+        const donateLink = document.querySelector('a[href="https://example.com/donate1"]');
+        const homepageLink = document.querySelector('a[href="https://example.com/home1"]');
+        expect(donateLink).toBeInTheDocument();
+        expect(homepageLink).toBeInTheDocument();
+
+        fireEvent.click(donateLink);
+        fireEvent.click(homepageLink);
+
+        expect(trackClickOut).toHaveBeenCalledWith('charity', 'https://example.com/donate1');
+        expect(trackClickOut).toHaveBeenCalledWith('charity', 'https://example.com/home1');
+    });
 });

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import RepoIssues from '../RepoIssues';
+import { useMaterialReactTable } from 'material-react-table';
 
 // Mock react-router
 jest.mock('react-router', () => ({
@@ -10,7 +11,11 @@ jest.mock('react-router', () => ({
 
 // Mock react-bootstrap
 jest.mock('react-bootstrap', () => ({
-  Container: ({ children, ...props }) => <div data-testid="container" {...props}>{children}</div>,
+  Container: ({ children, fluid, ...props }) => (
+    <div data-testid="container" data-fluid={fluid ? 'true' : undefined} {...props}>
+      {children}
+    </div>
+  ),
   InputGroup: ({ children, ...props }) => <div data-testid="input-group" {...props}>{children}</div>,
   Form: {
     Control: ({ ...props }) => <input data-testid="form-control" {...props} />,
@@ -50,14 +55,23 @@ import { useParams, useNavigate } from 'react-router';
 
 describe('RepoIssues', () => {
   const mockNavigate = jest.fn();
+  const mockIssuesResponse = [];
 
   beforeEach(() => {
     jest.clearAllMocks();
     useNavigate.mockReturnValue(mockNavigate);
+    global.fetch = jest.fn(() =>
+      Promise.resolve({
+        json: () => Promise.resolve(mockIssuesResponse),
+      })
+    );
+    window.fetch = global.fetch;
   });
 
   it('shows loading spinner and navbar initially', () => {
     useParams.mockReturnValue({ id: 'user', repo: 'repo' });
+    global.fetch = jest.fn(() => new Promise(() => {}));
+    window.fetch = global.fetch;
     render(<RepoIssues />);
     expect(screen.getByTestId('navbar')).toBeInTheDocument();
     expect(screen.getByTestId('spinner')).toBeInTheDocument();
@@ -78,6 +92,7 @@ describe('RepoIssues', () => {
         ]),
       })
     );
+    window.fetch = global.fetch;
     render(<RepoIssues />);
     await waitFor(() =>
       expect(screen.queryByTestId('spinner')).not.toBeInTheDocument()
@@ -85,9 +100,30 @@ describe('RepoIssues', () => {
     expect(screen.getByTestId('mrt-table')).toBeInTheDocument();
   });
 
+  it('hides state and description columns by default', async () => {
+    useParams.mockReturnValue({ id: 'user', repo: 'repo' });
+    render(<RepoIssues />);
+    await waitFor(() =>
+      expect(screen.queryByTestId('spinner')).not.toBeInTheDocument()
+    );
+
+    expect(useMaterialReactTable).toHaveBeenCalledWith(
+      expect.objectContaining({
+        initialState: expect.objectContaining({
+          showColumnFilters: true,
+          columnVisibility: {
+            state: false,
+            body: false,
+          },
+        }),
+      })
+    );
+  });
+
   it('navigates on form submit', async () => {
     useParams.mockReturnValue({ id: 'user', repo: 'repo' });
     global.fetch = jest.fn(() => Promise.resolve({ json: () => Promise.resolve([]) }));
+    window.fetch = global.fetch;
     render(<RepoIssues />);
     await waitFor(() => expect(screen.queryByTestId('spinner')).not.toBeInTheDocument());
     const input = screen.getByTestId('form-control');

package/src/index.test.js

@@ -0,0 +1,54 @@
+const mockRender = jest.fn();
+const mockCreateRoot = jest.fn(() => ({
+  render: mockRender,
+}));
+
+const elementContainsClassName = (node, className) => {
+  if (!node) {
+    return false;
+  }
+
+  if (Array.isArray(node)) {
+    return node.some((child) => elementContainsClassName(child, className));
+  }
+
+  if (typeof node !== 'object') {
+    return false;
+  }
+
+  const nodeClassName = node.props && typeof node.props.className === 'string'
+    ? node.props.className.split(/\s+/)
+    : [];
+
+  if (nodeClassName.includes(className)) {
+    return true;
+  }
+
+  return elementContainsClassName(node.props && node.props.children, className);
+};
+
+describe('index entrypoint', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    mockCreateRoot.mockReset();
+    mockCreateRoot.mockImplementation(() => ({ render: mockRender }));
+    mockRender.mockReset();
+    document.body.innerHTML = '<div id="root"></div>';
+  });
+
+  test('renders application wrapper into root element', () => {
+    jest.isolateModules(() => {
+      jest.doMock('react-dom/client', () => ({
+        createRoot: mockCreateRoot,
+      }));
+      jest.doMock('./App', () => () => null);
+      jest.doMock('./AppNavbar', () => () => null);
+      jest.doMock('./Footer', () => () => null);
+      require('./index');
+    });
+
+    expect(mockCreateRoot).toHaveBeenCalledWith(document.getElementById('root'));
+    expect(mockRender).toHaveBeenCalledTimes(1);
+    expect(elementContainsClassName(mockRender.mock.calls[0][0], 'app-wrapper')).toBe(true);
+  });
+});

package/src/reportWebVitals.test.js

@@ -0,0 +1,60 @@
+describe('reportWebVitals', () => {
+  test('does nothing when callback is not provided', async () => {
+    const getCLSMock = jest.fn();
+    const getFIDMock = jest.fn();
+    const getFCPMock = jest.fn();
+    const getLCPMock = jest.fn();
+    const getTTFBMock = jest.fn();
+
+    jest.resetModules();
+    jest.isolateModules(() => {
+      jest.doMock('web-vitals', () => ({
+        getCLS: getCLSMock,
+        getFID: getFIDMock,
+        getFCP: getFCPMock,
+        getLCP: getLCPMock,
+        getTTFB: getTTFBMock,
+      }));
+
+      const reportWebVitals = require('./reportWebVitals').default;
+      reportWebVitals();
+    });
+    await new Promise(resolve => setTimeout(resolve, 0));
+
+    expect(getCLSMock).not.toHaveBeenCalled();
+    expect(getFIDMock).not.toHaveBeenCalled();
+    expect(getFCPMock).not.toHaveBeenCalled();
+    expect(getLCPMock).not.toHaveBeenCalled();
+    expect(getTTFBMock).not.toHaveBeenCalled();
+  });
+
+  test('forwards callback to web-vitals metrics', async () => {
+    const getCLSMock = jest.fn();
+    const getFIDMock = jest.fn();
+    const getFCPMock = jest.fn();
+    const getLCPMock = jest.fn();
+    const getTTFBMock = jest.fn();
+    const onPerfEntry = function onPerfEntry() {};
+
+    jest.resetModules();
+    jest.isolateModules(() => {
+      jest.doMock('web-vitals', () => ({
+        getCLS: getCLSMock,
+        getFID: getFIDMock,
+        getFCP: getFCPMock,
+        getLCP: getLCPMock,
+        getTTFB: getTTFBMock,
+      }));
+
+      const reportWebVitals = require('./reportWebVitals').default;
+      reportWebVitals(onPerfEntry);
+    });
+    await new Promise(resolve => setTimeout(resolve, 0));
+
+    expect(getCLSMock).toHaveBeenCalledWith(onPerfEntry);
+    expect(getFIDMock).toHaveBeenCalledWith(onPerfEntry);
+    expect(getFCPMock).toHaveBeenCalledWith(onPerfEntry);
+    expect(getLCPMock).toHaveBeenCalledWith(onPerfEntry);
+    expect(getTTFBMock).toHaveBeenCalledWith(onPerfEntry);
+  });
+});

package/src/utils/activityTracker.js

@@ -0,0 +1,24 @@
+export const trackClickOut = (category, target) => {
+  if (!category || !target) {
+    return;
+  }
+
+  const payload = JSON.stringify({ category, target });
+
+  try {
+    if (typeof navigator !== 'undefined' && navigator.sendBeacon) {
+      const blob = new Blob([payload], { type: 'application/json' });
+      navigator.sendBeacon('/api/activity/click-out', blob);
+      return;
+    }
+
+    fetch('/api/activity/click-out', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: payload,
+      keepalive: true
+    }).catch(() => null);
+  } catch {
+    // no-op to avoid blocking navigation
+  }
+};