@conorheffron/ironoc-frontend 7.0.2 → 7.1.2

package/package.json

@@ -1,8 +1,10 @@
 {
   "name": "@conorheffron/ironoc-frontend",
-  "version": "7.0.2",
+  "version": "7.1.2",
   "private": false,
   "dependencies": {
+    "@fontsource/montserrat": "^5.1.1",
+    "@fontsource/open-sans": "^5.1.1",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^0.28.0",
     "bootstrap": "5.1",
@@ -15,11 +17,12 @@
     "react-dom": "^18.3.1",
     "react-router-dom": "^5.3.0",
     "reactstrap": "^8.10.0",
+    "recharts": "^3.0.0-alpha.5",
     "web-vitals": "^4.2.3"
   },
   "scripts": {
     "start": "react-scripts start",
-    "build": "CI=false && react-scripts build",
+    "build": "CI=false && GENERATE_SOURCEMAP=false react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },

package/src/App.css

@@ -37,6 +37,16 @@
     }
 }
 
+.App-header, .body, .table-headers, .table, .mb-3 {
+    font-family: "Open Sans";
+    font-size: 1.4em;
+}
+
+.nav-bar, .ft, h1, h3 {
+    font-family: "Montserrat";
+    font-size: 1.1em;
+}
+
 .carousel-caption {
 	top: 0;
 	bottom: auto;
@@ -74,6 +84,10 @@
     width: 51;
 }
 
+.carousel-caption {
+    font-family: "Open Sans";
+}
+
 .carousel-caption h3, h5 {
     color: navy;
 }
@@ -94,3 +108,15 @@ p a {
     height: auto;
     margin: 0 auto;
 }
+
+.overview-text {
+    display: block;
+    font-size: 1rem; /* Adjust the base font-size as needed */
+    line-height: 1.5;
+    white-space: normal;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+    max-height: 200px; /* Set a max height to avoid overflow */
+    overflow: hidden;
+    text-overflow: ellipsis; /* Add ellipsis for text overflow */
+}

package/src/App.js

@@ -3,6 +3,7 @@ import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
 import './App.css';
 import Home from './components/Home';
 import CoffeeHome from './components/CoffeeHome';
+import Donate from './components/Donate';
 import NotFound from './components/NotFound';
 import About from './components/About';
 import RepoDetails from './components/RepoDetails';
@@ -11,21 +12,32 @@ import ControlledCarousel from './components/ControlledCarousel';
 
 class App extends Component {
   render() {
+    // Default props
+    const {
+      forceRefresh = true,
+      routes = [
+        { path: '/', exact: true, component: Home },
+        { path: '/about', exact: true, component: About },
+        { path: '/portfolio', exact: true, component: ControlledCarousel },
+        { path: '/projects', exact: true, component: RepoDetails },
+        { path: '/projects/:id', component: RepoDetails },
+        { path: '/issues/:id/:repo', component: RepoIssues },
+        { path: '/brews', exact: true, component: CoffeeHome },
+        { path: '/donate', exact: true, component: Donate },
+        { path: '*', component: NotFound }
+      ]
+    } = this.props;
+
     return (
-        <Router forceRefresh={true}>
-          <Switch>
-            <Route path='/' exact={true} component={Home}/>
-            <Route path='/about' exact={true} component={About}/>
-            <Route path='/portfolio' exact={true} component={ControlledCarousel}/>
-            <Route path='/projects' exact={true} component={RepoDetails}/>
-            <Route path='/projects/:id' component={RepoDetails}/>
-            <Route path='/issues/:id/:repo' component={RepoIssues}/>
-            <Route path='/brews' exact={true} component={CoffeeHome}/>
-            <Route path="*" component={NotFound} />
-          </Switch>
-        </Router>
-    )
+      <Router forceRefresh={forceRefresh}>
+        <Switch>
+          {routes.map((route, index) => (
+            <Route key={index} path={route.path} exact={route.exact} component={route.component} />
+          ))}
+        </Switch>
+      </Router>
+    );
   }
 }
 
-export default App;
+export default App;

package/src/App.test.js

@@ -1,97 +1,381 @@
 import React from 'react';
-import { render, screen, waitFor } from '@testing-library/react';
+import { render, screen, act, waitFor, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import Home from './components/Home';
 import axios from 'axios';
 import App from './App';
 import CoffeeCarousel from './components/CoffeeCarousel';
 import CoffeeHome from './components/CoffeeHome';
+import Donate from './components/Donate';
 import NotFound from './components/NotFound';
+import { createMemoryHistory } from 'history';
+import { Router, MemoryRouter } from 'react-router-dom';
+import RepoDetails from './components/RepoDetails';
+import RepoIssues from './components/RepoIssues';
+import LoadingSpinner from './LoadingSpinner';
+import AppNavBar from './AppNavbar';
 
 // Mocking axios
 jest.mock('axios');
 
-test('renders learn react link', () => {
-  render(<Home />);
-  const element = screen.getByText(/Home/i);
-  expect(element).toBeInTheDocument();
-});
-
 // Sample data for testing
 const coffeeItems = [
+  {
+    title: 'Espresso',
+    ingredients: ['Water', 'Coffee beans'],
+    image: 'https://example.com/espresso.jpg',
+  },
+  {
+    title: 'Cappuccino',
+    ingredients: ['Espresso', 'Steamed milk', 'Foam milk'],
+    image: 'https://example.com/cappuccino.jpg',
+  },
+];
+
+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']
+  }
+];
+
+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'
+  }
+];
+
+const donateItems = [
     {
-        title: 'Espresso',
-        ingredients: ['Water', 'Coffee beans'],
-        image: 'https://example.com/espresso.jpg',
+        donate: "https://www.jackandjill.ie/professionals/ways-to-donate/",
+        link: "https://www.jackandjill.ie",
+        img: "red1.png",
+        alt: "red1",
+        name: "The Jack and Jill Children’s Foundation",
+        overview: `The Jack and Jill Children’s Foundation is a nationwide charity that funds and provides in-home nursing care
+                   and respite support for children with severe to profound neurodevelopmental delay, up to the age of 6.
+                   This may include children with brain injury, genetic diagnosis, cerebral palsy and undiagnosed conditions.
+                   Another key part of our service is end-of-life care for all children up to the age of 6, irrespective of diagnosis.`,
+        founded: 1997,
+        phone: "+353 (045) 894 538"
     },
     {
-        title: 'Cappuccino',
-        ingredients: ['Espresso', 'Steamed milk', 'Foam milk'],
-        image: 'https://example.com/cappuccino.jpg',
-    },
+        donate: "https://vi.ie/supporting-us/donate-now/",
+        link: "https://linktr.ee/vision_ireland",
+        img: "red2.png",
+        alt: "red2",
+        name: "Vision Ireland, the new name for NCBI",
+        overview: `Vision Ireland, the name for NCBI is Ireland’s national charity working for the rising number of people affected by sight loss.
+                   Our practical and emotional advice and support help 8,000 people and their families confidently face their futures every year.`,
+        founded: 1931,
+        phone: "+353 (0)1 830 7033"
+    }
+    // Add more items as needed
 ];
 
+describe('Home', () => {
+  test('renders Home component', async () => {
+    await act(async () => {
+      render(<Home />);
+    });
+    const element = screen.getByText(/Home/i);
+    expect(element).toBeInTheDocument();
+  });
+});
+
 describe('CoffeeCarousel', () => {
-    test('renders carousel with coffee items', () => {
-        render(<CoffeeCarousel items={coffeeItems} />);
-
-        // Check that the carousel items are rendered
-        coffeeItems.forEach((item) => {
-            expect(screen.getByText(item.title)).toBeInTheDocument();
-            expect(screen.getByAltText(item.title)).toBeInTheDocument();
-            expect(screen.getByText('Ingredients: ' + item.ingredients.join(', '))).toBeInTheDocument();
-        });
+  test('renders carousel with coffee items', () => {
+    render(<CoffeeCarousel items={coffeeItems} />);
+
+    // Check that the carousel items are rendered
+    coffeeItems.forEach((item) => {
+      expect(screen.getByText(item.title)).toBeInTheDocument();
+      expect(screen.getByAltText(item.title)).toBeInTheDocument();
+      expect(screen.getByText(item.ingredients.join(', '))).toBeInTheDocument();
     });
+  });
 
-    test('renders carousel with correct number of items', () => {
-        render(<CoffeeCarousel items={coffeeItems} />);
+  test('renders carousel with correct number of items', () => {
+    render(<CoffeeCarousel items={coffeeItems} />);
 
-        // Check that the correct number of carousel items are rendered
-        const carouselItems = screen.getAllByRole('img');
+    // Check that the correct number of carousel items are rendered
+    const carouselItems = screen.getAllByRole('img');
 
-        expect(carouselItems.length).toBe(coffeeItems.length);
-    });
+    expect(carouselItems.length).toBe(coffeeItems.length);
+  });
 });
 
 describe('CoffeeHome', () => {
-    beforeEach(() => {
-        axios.get.mockResolvedValue({ data: coffeeItems });
+  beforeEach(() => {
+    axios.get.mockResolvedValueOnce({ data: coffeeItems });
+  });
+
+  test('renders AppNavbar component', () => {
+    render(<App />);
+    expect(screen.getByRole('banner')).toBeInTheDocument();
+  });
+
+  test('displays loading state initially', () => {
+    render(<CoffeeHome />);
+    expect(screen.getByText('Loading...')).toBeInTheDocument();
+  });
+
+  test('renders CoffeeCarousel component with coffee items', async () => {
+    render(<CoffeeHome />);
+
+    // Wait for the coffee items to be fetched and rendered
+    await waitFor(() => {
+      expect(screen.getByText('Espresso')).toBeInTheDocument();
+      expect(screen.getByText('Cappuccino')).toBeInTheDocument();
     });
+  });
+});
+
+describe('NotFound', () => {
+  test('renders AppNavbar component', () => {
+    render(<NotFound />);
+    expect(screen.getByRole('banner')).toBeInTheDocument();
+  });
+
+  test('displays 404 error message', () => {
+    render(<NotFound />);
+    expect(screen.getByText('404 - Page Not Found')).toBeInTheDocument();
+  });
+
+  test('displays the apology message', () => {
+    render(<NotFound />);
+    expect(screen.getByText('Sorry, the page you are looking for could not be found.')).toBeInTheDocument();
+  });
+});
 
-    test('renders AppNavbar component', () => {
-        render(<App />);
-        expect(screen.getByRole('banner')).toBeInTheDocument();
+describe('RepoDetails', () => {
+  beforeEach(() => {
+    jest.spyOn(global, 'fetch').mockResolvedValue({
+      json: jest.fn().mockResolvedValue(mockRepoDetails)
     });
+  });
 
-    test('displays loading state initially', () => {
-        render(<CoffeeHome />);
-        expect(screen.getByText('Loading...')).toBeInTheDocument();
+  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();
     });
 
-    test('renders CoffeeCarousel component with coffee items', async () => {
-        render(<CoffeeHome />);
+    // 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();
 
-        // Wait for the coffee items to be fetched and rendered
-        await waitFor(() => {
-            expect(screen.getByText('Espresso')).toBeInTheDocument();
-            expect(screen.getByText('Cappuccino')).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);
+      });
     });
+
+    // Verify that the component does not show the loading spinner
+    expect(container.querySelector('.LoadingSpinner')).not.toBeInTheDocument();
+  });
 });
 
-describe('NotFound', () => {
-    test('renders AppNavbar component', () => {
-        render(<NotFound />);
-        expect(screen.getByRole('banner')).toBeInTheDocument();
+describe('RepoIssues', () => {
+  beforeEach(() => {
+    jest.spyOn(global, 'fetch').mockResolvedValue({
+      json: jest.fn().mockResolvedValue(mockRepoIssues)
     });
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  test('renders AppNavbar component', () => {
+    render(<App />);
+    expect(screen.getByRole('banner')).toBeInTheDocument();
+  });
 
-    test('displays 404 error message', () => {
-        render(<NotFound />);
-        expect(screen.getByText('404 - Page Not Found')).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();
+    });
+
+    expect(screen.queryByText('conors-id')).toBeInTheDocument();
+    expect(screen.queryByText('ironoc-testing')).toBeInTheDocument();
+
+    // 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();
+    });
+
+    // Verify that the component does not show the loading spinner
+    expect(container.querySelector('.LoadingSpinner')).not.toBeInTheDocument();
+  });
+});
+
+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();
+  });
+});
+
+describe('AppNavBar', () => {
+  test('renders AppNavBar component correctly', () => {
+    // Render the component
+    render(<AppNavBar />);
+
+    // Check if the Navbar is present
+    const navbar = screen.getByRole('navigation');
+    expect(navbar).toBeInTheDocument();
+
+    // Check if the logo image is present
+    const logo = screen.getByAltText('');
+    expect(logo).toBeInTheDocument();
+    expect(logo).toHaveAttribute('src', 'robot-logo.png');
+
+    // Check if the "Brews" dropdown is present
+    const brewsDropdown = screen.getByText('Brews');
+    expect(brewsDropdown).toBeInTheDocument();
+
+    // Check if the "Portfolio" dropdown is present
+    const portfolioDropdown = screen.getByText('Portfolio');
+    expect(portfolioDropdown).toBeInTheDocument();
+
+    // Check if the "About" dropdown is present
+    const aboutDropdown = screen.getByText('About');
+    expect(aboutDropdown).toBeInTheDocument();
+
+    // Check if the "GitHub PM" dropdown is present
+    const githubPMDropdown = screen.getByText('GitHub PM');
+    expect(githubPMDropdown).toBeInTheDocument();
+
+    // Check if the "GitHub API" dropdown is present
+    const githubAPIDropdown = screen.getByText('GitHub API');
+    expect(githubAPIDropdown).toBeInTheDocument();
+
+    // Check if the "GitHub Projects" dropdown is present
+    const githubProjectsDropdown = screen.getByText('GitHub Projects');
+    expect(githubProjectsDropdown).toBeInTheDocument();
+
+    // Check if the "GitHub Projects" dropdown is present
+    const donateDropdown = screen.getByText('Charity Options');
+    expect(donateDropdown).toBeInTheDocument();
+
+    // Check if the "Home" link is present
+    const homeLink = screen.getByText('Home');
+    expect(homeLink).toBeInTheDocument();
+    expect(homeLink.closest('a')).toHaveAttribute('href', '/');
+  });
+});
+
+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('Donate Component', () => {
+    test('renders without crashing', () => {
+        render(<Donate items={donateItems} />);
+        expect(screen.getByText('The Jack and Jill Children’s Foundation')).toBeInTheDocument();
+        expect(screen.getByText('Vision Ireland, the new name for NCBI')).toBeInTheDocument();
     });
 
-    test('displays the apology message', () => {
-        render(<NotFound />);
-        expect(screen.getByText('Sorry, the page you are looking for could not be found.')).toBeInTheDocument();
+    test('renders all carousel items', () => {
+        render(<Donate items={donateItems} />);
+        donateItems.forEach(item => {
+            expect(screen.getByText(item.name)).toBeInTheDocument();
+            expect(screen.getByText(new RegExp(`Founded in ${item.founded}`))).toBeInTheDocument();
+            expect(screen.getByText(item.phone)).toBeInTheDocument();
+            expect(screen.getByText(new RegExp(item.link))).toBeInTheDocument();
+        });
+    });
+
+    test('renders images with correct alt text', () => {
+        render(<Donate items={donateItems} />);
+        donateItems.forEach(item => {
+            expect(screen.getByAltText(item.alt)).toBeInTheDocument();
+        });
     });
 });