@conorheffron/ironoc-frontend 9.1.3 → 9.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conorheffron/ironoc-frontend",
-  "version": "9.1.3",
+  "version": "9.1.5",
   "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';
@@ -65,6 +65,20 @@ 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'));
+  });
 });
 
 describe('Footer Component', () => {
@@ -109,4 +123,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/components/__tests__/Donate.test.js

@@ -57,7 +57,7 @@ const errorMocks = [
 describe('Donate Component', () => {
     it('renders loading spinner initially', () => {
         render(
-            <MockedProvider mocks={mocks} addTypename={true}>
+            <MockedProvider mocks={mocks}>
                 <Donate />
             </MockedProvider>
         );
@@ -68,7 +68,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 +81,7 @@ describe('Donate Component', () => {
 
     it('renders donate items after successful fetch', async () => {
         render(
-            <MockedProvider mocks={mocks} addTypename={true}>
+            <MockedProvider mocks={mocks}>
                 <Donate />
             </MockedProvider>
         );

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);
+  });
+});