@conorheffron/ironoc-frontend 9.1.6 → 9.1.8

package/README.md

@@ -2,6 +2,8 @@
 
 The ironoc UI built with react for personal portfolio website.
 
+[![Deploy to Amazon ECS](https://github.com/conorheffron/ironoc/actions/workflows/aws.yml/badge.svg)](https://github.com/conorheffron/ironoc/actions/workflows/aws.yml)
+
 [![Node.js Package](https://github.com/conorheffron/ironoc/actions/workflows/npm-publish-packages.yml/badge.svg)](https://github.com/conorheffron/ironoc/actions/workflows/npm-publish-packages.yml)
 
 [![Node.js CI](https://github.com/conorheffron/ironoc/actions/workflows/node.js.yml/badge.svg)](https://github.com/conorheffron/ironoc/actions/workflows/node.js.yml)

package/package.json

@@ -1,17 +1,20 @@
 {
   "name": "@conorheffron/ironoc-frontend",
-  "version": "9.1.6",
+  "version": "9.1.8",
   "private": false,
   "license": "GPL-3.0-or-later",
   "dependencies": {
     "@apollo/client": "^3.13.8",
     "@emotion/is-prop-valid": "^1.4.0",
-    "@emotion/react": "^11.14.0",
-    "@emotion/styled": "^11.14.1",
+    "@emotion/react": "11.14.0",
+    "@emotion/styled": "11.14.1",
     "@fontsource/montserrat": "^5.2.8",
     "@fontsource/open-sans": "^5.2.7",
     "@graphiql/plugin-explorer": "^5.1.1",
     "@graphiql/react": "^0.37.1",
+    "@mui/icons-material": "7.3.0",
+    "@mui/material": "7.3.0",
+    "@react-aria/ssr": "3.9.10",
     "@testing-library/user-event": "^14.6.1",
     "axios": "^1.15.2",
     "bootstrap": "5.3",
@@ -27,6 +30,7 @@
     "react-dom": "^19.2.0",
     "react-router": "^7.12.0",
     "react-router-dom": "^7.12.0",
+    "react-transition-group": "4.4.5",
     "reactstrap": "^9.2.3",
     "recharts": "^3.3.0",
     "web-vitals": "^5.1.0"
@@ -58,6 +62,7 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
     "jest": "^30.2.0",

package/src/App.css

@@ -24,6 +24,7 @@
     background-color: #1D428A;
     border-bottom-right-radius: 18%;
     border-bottom-left-radius: 18%;
+    overflow: hidden;
 }
 
 .App-link {
@@ -50,8 +51,8 @@
 }
 
 .carousel-caption {
-	top: 0;
-	bottom: auto;
+    top: 0;
+    bottom: auto;
 }
 
 .App-intro {
@@ -60,23 +61,23 @@
 }
 
 #my-intro {
-	padding-left: 15%;
-	padding-right: 15%;
+    padding-left: 15%;
+    padding-right: 15%;
 }
 
 .strava-badge {
-	display: inline-block;
-	background-color: #FC5200;
-	color: #fff;
-	padding: 5px 10px 5px 30px;
-	font-size: 11px;
-	font-family: Helvetica, Arial, sans-serif;
-	white-space: nowrap;
-	text-decoration: none;
-	background-repeat: no-repeat;
-	background-position: 10px center;
-	border-radius: 3px;
-	background-image: url('https://badges.strava.com/logo-strava-echelon.png')
+    display: inline-block;
+    background-color: #FC5200;
+    color: #fff;
+    padding: 5px 10px 5px 30px;
+    font-size: 11px;
+    font-family: Helvetica, Arial, sans-serif;
+    white-space: nowrap;
+    text-decoration: none;
+    background-repeat: no-repeat;
+    background-position: 10px center;
+    border-radius: 3px;
+    background-image: url('https://badges.strava.com/logo-strava-echelon.png')
 }
 
 .strava-badge-img {
@@ -107,7 +108,7 @@ footer p a {
 }
 
 .carousel-caption h3, h5 {
-    background-color:yellow;
+    background-color: yellow;
     width: 50%;
     height: auto;
     margin: 0 auto;
@@ -130,3 +131,89 @@ footer p a {
     overflow: hidden;
     text-overflow: ellipsis; /* Add ellipsis for text overflow */
 }
+
+.donate-carousel-item {
+    min-height: 90vh;
+    object-fit: cover;
+    border-bottom-right-radius: 18%;
+    border-bottom-left-radius: 18%;
+}
+
+.donate-carousel-bg {
+    min-height: 90vh;
+    object-fit: cover;
+    border-bottom-right-radius: 18%;
+    border-bottom-left-radius: 18%;
+}
+
+.donate-carousel-caption {
+    top: 50%;
+    bottom: auto;
+    left: 8%;
+    right: 8%;
+    transform: translateY(-50%);
+    padding: 1.25rem;
+    color: #ffffff;
+    background: rgba(0, 0, 0, 0.45);
+    border-radius: 1rem;
+}
+
+.donate-title {
+    font-size: clamp(1.5rem, 5vw, 3rem);
+}
+
+.donate-carousel-caption p {
+    font-size: clamp(0.9rem, 2.8vw, 1.2rem);
+    line-height: 1.45;
+}
+
+.donate-carousel-caption a {
+    color: yellow;
+    overflow-wrap: anywhere;
+}
+
+.donate-overview {
+    max-height: none;
+    overflow: visible;
+    text-overflow: initial;
+}
+
+@media (max-width: 576px) {
+    .donate-carousel-item {
+        min-height: auto;
+        border-bottom-right-radius: 18%;
+        border-bottom-left-radius: 18%;
+        overflow: hidden;
+    }
+
+    .donate-carousel-bg {
+        min-height: 720px;
+        border-bottom-right-radius: 18%;
+        border-bottom-left-radius: 18%;
+    }
+
+    .donate-carousel-caption {
+        top: 1rem;
+        left: 4%;
+        right: 4%;
+        transform: none;
+        padding: 0.85rem;
+        max-height: calc(100% - 2rem);
+        overflow-y: auto;
+    }
+
+    .donate-title {
+        font-size: 1.35rem;
+        margin-bottom: 0.75rem !important;
+    }
+
+    .donate-carousel-caption p {
+        font-size: 0.9rem;
+        line-height: 1.35;
+        margin-bottom: 0.65rem;
+    }
+
+    .donate-overview {
+        font-size: 0.85rem;
+    }
+}

package/src/App.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { BrowserRouter as Router, Routes, Route } from 'react-router';
-import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
+import { ApolloClient, InMemoryCache, ApolloProvider, HttpLink } from '@apollo/client';
 import './App.css';
 import Home from './components/Home';
 import CoffeeHome from './components/CoffeeHome';
@@ -31,7 +31,7 @@ class App extends Component {
 
     // Create Apollo Client for '/donate' route
     const donateClient = new ApolloClient({
-      uri: '/graphql', // Replace with your GraphQL endpoint
+      link: new HttpLink({ uri: '/graphql' }),
       cache: new InMemoryCache(),
     });
 

package/src/App.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen, waitFor, fireEvent } from '@testing-library/react';
+import { render, screen, waitFor, fireEvent, act } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import Home from './components/Home';
 import App from './App';
@@ -108,12 +108,15 @@ describe('Footer Component', () => {
     fetch.mockClear();
   });
 
-  test('renders without crashing', () => {
-    render(<Footer />);
+  test('renders without crashing', async () => {
+    await act(async () => {
+      render(<Footer />);
+    });
     expect(screen.getByText(/© 2025 by Conor Heffron/)).toBeInTheDocument();
   });
 
   test('initial state is set correctly', () => {
+    global.fetch = jest.fn(() => new Promise(() => {}));
     const { container } = render(<Footer />);
     const footerText = container.querySelector('.ft');
     expect(footerText).toHaveTextContent('© 2025 by Conor Heffron |');

package/src/components/CoffeeCarousel.js

@@ -12,6 +12,58 @@ function isValidUrl(url) {
     }
 }
 
+const brewTitleTranslations = {
+    'Svart Te': 'Black Tea',
+    'Islatte': 'Iced Latte',
+    'Islatte Mocha': 'Iced Mocha',
+    'Frapino Mocka': 'Frapino Mocha',
+    'Apelsinjuice': 'Orange Juice',
+    'Lemonad': 'Lemonade',
+};
+
+const ingredientTranslations = {
+    'Ångad mjölk': 'Steamed milk',
+    'Karamellsirap': 'Caramel syrup',
+    'Hett vatten': 'Hot water',
+    'Choklad': 'Chocolate',
+    'Mjölk': 'Milk',
+    'Te': 'Tea',
+    'Ingefära': 'Ginger',
+    'Kardemumma': 'Cardamom',
+    'Kanel': 'Cinnamon',
+    'Matcha-pulver': 'Matcha powder',
+    'Socker*': 'Sugar*',
+    'Kaffe': 'Coffee',
+    'Is': 'Ice',
+    'Sirap': 'Syrup',
+    'Vispgrädde*': 'Whipped cream*',
+    'Karamellsås': 'Caramel sauce',
+    'Färska Apelsiner': 'Fresh oranges',
+    'Citronsaft': 'Lemon juice',
+    'Kolsyrat vatten': 'Sparkling water',
+    'Honung': 'Honey',
+};
+
+function translateValue(value, translations) {
+    const trimmedValue = typeof value === 'string' ? value.trim() : value;
+    return translations[trimmedValue] || trimmedValue;
+}
+
+function translateIngredients(ingredients) {
+    if (Array.isArray(ingredients)) {
+        return ingredients
+            .map((ingredient) => translateValue(ingredient, ingredientTranslations))
+            .join(', ');
+    }
+    if (typeof ingredients === 'string') {
+        return ingredients
+            .split(',')
+            .map((ingredient) => translateValue(ingredient, ingredientTranslations))
+            .join(', ');
+    }
+    return '';
+}
+
 class CoffeeCarousel extends Component {
     render() {
         const { items } = this.props;
@@ -21,22 +73,23 @@ class CoffeeCarousel extends Component {
         );
         return (
             <Carousel className="App-header">
-                {validItems.map((item, index) => (
+                {validItems.map((item, index) => {
+                    const translatedTitle = translateValue(item.title, brewTitleTranslations);
+                    return (
                     <Carousel.Item key={index}>
-                        <img src={item.image} alt={item.title} />
+                        <img src={item.image} alt={translatedTitle} />
                         <Carousel.Caption>
-                            <h3>{item.title}</h3>
+                            <h3>{translatedTitle}</h3>
                             {item.ingredients && item.ingredients.length > 0 && (
                                 <h5>
                                     <b>Ingredients:</b>{' '}
-                                    {Array.isArray(item.ingredients)
-                                        ? item.ingredients.join(', ')
-                                        : item.ingredients}
+                                    {translateIngredients(item.ingredients)}
                                 </h5>
                             )}
                         </Carousel.Caption>
                     </Carousel.Item>
-                ))}
+                    );
+                })}
             </Carousel>
         );
     }

package/src/components/Donate.js

@@ -79,82 +79,52 @@ 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 />
                 <Container>
                     <Carousel className="App-header">
                         {donateItems.map((item, index) => (
-                            <Carousel.Item key={index} interval={500}>
-                                <a href={item.donate} target="_blank" rel="noreferrer">
-                                    <img className="d-block w-100" src={red} alt={item.alt} />
-                                    <Carousel.Caption>
-                                        <h1>
-                                            <u>{item.name}</u>
-                                        </h1><br />
-                                        <h8>
-                                            <b>Contact & Help by Phone: </b><span dangerouslySetInnerHTML={{ __html: item.phone }} />
-                                        </h8><br />
-                                        <h7>
-                                            <b>Home page: </b><a href={item.link} target="_blank" rel="noreferrer">{item.link}</a>
-                                        </h7><br /><br />
-                                        <h11 className="overview-text">
-                                            <b>Overview:</b> Founded in {item.founded}, {item.overview}
-                                        </h11>
-                                    </Carousel.Caption>
-                                </a>
+                            <Carousel.Item key={index} interval={500} className="donate-carousel-item">
+                                <img className="d-block w-100 donate-carousel-bg" src={red} alt={item.alt} />
+
+                                <Carousel.Caption className="donate-carousel-caption">
+                                    <h1 className="donate-title mb-3">
+                                        <span style={{ textDecoration: 'underline' }}>{item.name}</span>
+                                    </h1>
+
+                                    <p className="donate-phone">
+                                        <b>Contact & Help by Phone: </b>
+                                        <span dangerouslySetInnerHTML={{ __html: item.phone }} />
+                                    </p>
+
+                                    <p className="donate-link">
+                                        <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 donate-overview">
+                                        <b>Overview:</b> Founded in {item.founded}, {item.overview}
+                                    </p>
+
+                                    <p className="donate-action">
+                                        <a
+                                            href={item.donate}
+                                            target="_blank"
+                                            rel="noreferrer"
+                                            onClick={() => trackClickOut('charity', item.donate)}
+                                        >
+                                            Donate here
+                                        </a>
+                                    </p>
+                                </Carousel.Caption>
                             </Carousel.Item>
                         ))}
                     </Carousel>

package/src/components/RepoIssues.js

@@ -127,6 +127,7 @@ const RepoIssues = () => {
     enableStickyHeader: true,
     initialState: {
       showColumnFilters: true,
+      columnFilters: [{ id: 'state', value: ['open'] }],
       columnVisibility: {
         state: false,
         body: false,

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

@@ -61,4 +61,22 @@ describe('CoffeeCarousel', () => {
       // Ensure ingredients are NOT rendered
       expect(screen.queryByText('Ingredients:')).not.toBeInTheDocument();
   });
+
+  test('translates localized brew titles and ingredients', () => {
+      const localizedItems = [
+          {
+              image: 'https://image1.jpg',
+              title: 'Svart Te',
+              ingredients: ' Te , Unknown ingredient , Honung ',
+          },
+      ];
+
+      render(<CoffeeCarousel items={localizedItems} />);
+
+      expect(screen.getByText('Black Tea')).toBeInTheDocument();
+      expect(screen.getByAltText('Black Tea')).toBeInTheDocument();
+      expect(screen.getByText('Tea, Unknown ingredient, Honey')).toBeInTheDocument();
+      expect(screen.queryByText('Svart Te')).not.toBeInTheDocument();
+      expect(screen.queryByText('Te , Unknown ingredient , Honung')).not.toBeInTheDocument();
+  });
 });

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

@@ -1,4 +1,4 @@
-import { screen, render, waitFor } from '@testing-library/react';
+import { screen, render, waitFor, act } from '@testing-library/react';
 import axios from 'axios';
 import App from '../../App';
 import CoffeeHome from '../CoffeeHome';
@@ -25,12 +25,16 @@ describe('CoffeeHome', () => {
     axios.get.mockResolvedValueOnce({ data: coffeeItems });
   });
 
-  test('renders AppNavbar component', () => {
-    render(<App />);
+  test('renders AppNavbar component', async () => {
+    await act(async () => {
+      render(<App />);
+    });
     expect(screen.getByRole('banner')).toBeInTheDocument();
   });
 
   test('displays loading state initially', () => {
+    axios.get.mockReset();
+    axios.get.mockImplementation(() => new Promise(() => {}));
     render(<CoffeeHome />);
     expect(screen.getByText('Loading...')).toBeInTheDocument();
   });

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

@@ -1,4 +1,4 @@
-import { render, screen, waitFor } from '@testing-library/react';
+import { render, screen, waitFor, act } from '@testing-library/react';
 import App from '../../App';
 import { Router, MemoryRouter } from 'react-router';
 import ControlledCarousel from '../ControlledCarousel';
@@ -35,12 +35,16 @@ describe('Portfolio Controlled Carousel', () => {
     jest.restoreAllMocks();
   });
 
-  test('renders AppNavbar component', () => {
-    render(<App />);
+  test('renders AppNavbar component', async () => {
+    await act(async () => {
+      render(<App />);
+    });
     expect(screen.getByRole('banner')).toBeInTheDocument();
   });
 
   test('renders loading state initially', () => {
+    global.fetch.mockReset();
+    global.fetch.mockImplementation(() => new Promise(() => {}));
     render(<ControlledCarousel />);
     expect(screen.getByText('Loading...')).toBeInTheDocument();
   });

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

@@ -29,13 +29,28 @@ describe('RepoDetails Component', () => {
         delete global.fetch;
     });
 
-    test('renders loading spinner initially', () => {
+    test('renders loading spinner initially', async () => {
+        let resolveFetch;
+        global.fetch = jest.fn(
+            () =>
+                new Promise((resolve) => {
+                    resolveFetch = resolve;
+                })
+        );
+
         render(
             <MemoryRouter>
                 <RepoDetails />
             </MemoryRouter>
         );
+
         expect(screen.getByText(/loading/i)).toBeInTheDocument();
+
+        resolveFetch({
+            json: () => Promise.resolve([]),
+        });
+
+        await waitFor(() => expect(screen.queryByText(/loading/i)).not.toBeInTheDocument());
     });
 
     test('fetches and displays repo details isConor=True', async () => {
@@ -60,10 +75,11 @@ describe('RepoDetails Component', () => {
                 <RepoDetails />
             </MemoryRouter>
         );
-        await waitFor(() => expect(fetch).toHaveBeenCalledTimes(1));
-        expect(screen.getByText('conorheffron/ironoc')).toBeInTheDocument();
-        expect(screen.getByText('Ironoc framework')).toBeInTheDocument();
-        expect(screen.getByText('nodejs, serverless')).toBeInTheDocument();
+        await waitFor(() => {
+            expect(screen.getByText('conorheffron/ironoc')).toBeInTheDocument();
+            expect(screen.getByText('Ironoc framework')).toBeInTheDocument();
+            expect(screen.getByText('nodejs, serverless')).toBeInTheDocument();
+        });
 
         expect(screen.queryByRole('columnheader', { name: /Issues Count/i })).toBeInTheDocument();
         expect(screen.getByText('37')).toBeInTheDocument();

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

@@ -1,7 +1,9 @@
 import React from 'react';
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import RepoIssues from '../RepoIssues';
-import { useMaterialReactTable } from 'material-react-table';
+
+// Track useMaterialReactTable call opts for assertions (must start with 'mock' for Jest hoisting)
+const mockUseMRTOpts = [];
 
 // Mock react-router
 jest.mock('react-router', () => ({
@@ -27,16 +29,31 @@ jest.mock('react-bootstrap', () => ({
 jest.mock('../../AppNavbar', () => () => <div data-testid="navbar">Navbar</div>);
 jest.mock('../../LoadingSpinner', () => () => <div data-testid="spinner">Loading...</div>);
 
-// Mock MaterialReactTable and useMaterialReactTable
+// Mock MaterialReactTable and useMaterialReactTable.
+// useMaterialReactTable is a plain function (not jest.fn) so React 19 concurrent mode
+// commits re-renders correctly. Calls are tracked via mockUseMRTOpts for assertions.
+// columnFilters from initialState are applied to table.data so MaterialReactTable
+// only receives the filtered rows, allowing DOM-level assertions on visibility.
 jest.mock('material-react-table', () => ({
   MaterialReactTable: ({ table }) => (
     <div data-testid="mrt-table">
-      {table && table.data && table.data.map((issue, idx) => (
+      {(table?.data ?? []).map((issue, idx) => (
         <div key={idx} data-testid="mrt-row">{issue.title}</div>
       ))}
     </div>
   ),
-  useMaterialReactTable: jest.fn((opts) => opts),
+  useMaterialReactTable: (opts) => {
+    mockUseMRTOpts.push(opts);
+    const filters = opts?.initialState?.columnFilters ?? [];
+    let data = opts?.data ?? [];
+    filters.forEach((filter) => {
+      data = data.filter((row) => {
+        const val = row[filter.id];
+        return Array.isArray(filter.value) ? filter.value.includes(val) : val === filter.value;
+      });
+    });
+    return { ...opts, data };
+  },
 }));
 
 // Mock @mui/material theme functions
@@ -58,6 +75,7 @@ describe('RepoIssues', () => {
   const mockIssuesResponse = [];
 
   beforeEach(() => {
+    mockUseMRTOpts.length = 0;
     jest.clearAllMocks();
     useNavigate.mockReturnValue(mockNavigate);
     global.fetch = jest.fn(() =>
@@ -98,19 +116,21 @@ describe('RepoIssues', () => {
       expect(screen.queryByTestId('spinner')).not.toBeInTheDocument()
     );
     expect(screen.getByTestId('mrt-table')).toBeInTheDocument();
+    expect(screen.getByText('Test Issue')).toBeInTheDocument();
   });
 
-  it('hides state and description columns by default', async () => {
+  it('defaults to open issues while hiding state and description columns', async () => {
     useParams.mockReturnValue({ id: 'user', repo: 'repo' });
     render(<RepoIssues />);
     await waitFor(() =>
       expect(screen.queryByTestId('spinner')).not.toBeInTheDocument()
     );
 
-    expect(useMaterialReactTable).toHaveBeenCalledWith(
+    expect(mockUseMRTOpts).toContainEqual(
       expect.objectContaining({
         initialState: expect.objectContaining({
           showColumnFilters: true,
+          columnFilters: [{ id: 'state', value: ['open'] }],
           columnVisibility: {
             state: false,
             body: false,
@@ -120,6 +140,24 @@ describe('RepoIssues', () => {
     );
   });
 
+  it('renders open issues and excludes closed issues by default', async () => {
+    useParams.mockReturnValue({ id: 'user', repo: 'repo' });
+    global.fetch = jest.fn(() =>
+      Promise.resolve({
+        json: () => Promise.resolve([
+          { number: 1, state: 'open', labels: [], title: 'Open Issue', body: '' },
+          { number: 2, state: 'closed', labels: [], title: 'Closed Issue', body: '' },
+        ]),
+      })
+    );
+    window.fetch = global.fetch;
+    render(<RepoIssues />);
+    await waitFor(() =>
+      expect(screen.getByText('Open Issue')).toBeInTheDocument()
+    );
+    expect(screen.queryByText('Closed Issue')).not.toBeInTheDocument();
+  });
+
   it('navigates on form submit', async () => {
     useParams.mockReturnValue({ id: 'user', repo: 'repo' });
     global.fetch = jest.fn(() => Promise.resolve({ json: () => Promise.resolve([]) }));