change context to support test fakes

source/Application.js

@@ -3,18 +3,14 @@ import Eaglescope from './components/Eaglescope/Eaglescope';
 import ConfigContextProvider from './contexts/ConfigContext';
 import DataContextProvider from './contexts/DataContext';
 import 'bootstrap/dist/css/bootstrap.css';
-import 'bootstrap'; // <-- JS File
+import 'bootstrap';
 
-// style
-
-function APP() {
+function APP({ overrideConfig, overrideData }) {
   const query = new URLSearchParams(window.location.search);
   const configUrl = query.get('configurl') || './config/wines.json';
-
-  //
   return (
-    <ConfigContextProvider configName={configUrl}>
-      <DataContextProvider>
+    <ConfigContextProvider configName={configUrl} overrideConfig={overrideConfig}>
+      <DataContextProvider overrideData={overrideData}>
         <Eaglescope />
       </DataContextProvider>
     </ConfigContextProvider>

source/contexts/ConfigContext.js

@@ -4,28 +4,49 @@ import useFetch from '../hooks/useFetch';
 
 export const ConfigContext = createContext();
 
-export default function ConfigContextProvider({ children, configName }) {
-  const {
-    error: configError,
-    data: config,
-    isPending: configLoading,
-    setData: setConfig,
-  } = useFetch(`${configName}`);
+export default function ConfigContextProvider({ children, configName, overrideConfig }) {
+  let configData;
+
+  if (overrideConfig) {
+    // If overrideConfig is provided, use it directly
+    configData = {
+      error: false,
+      data: overrideConfig,
+      isPending: false,
+      setData: console.error,
+    };
+  } else {
+    // Otherwise, fetch the data using useFetch
+    const {
+      error: configError,
+      data: config,
+      isPending: configLoading,
+      setData: setConfig,
+    } = useFetch(`${configName}`);
+
+    configData = {
+      error: configError,
+      data: config,
+      isPending: configLoading,
+      setData: setConfig,
+    };
+  }
 
   const memoConfig = useMemo(
     () => ({
-      configError,
-      config,
-      configLoading,
-      setConfig,
+      configError: configData.error,
+      config: configData.data,
+      configLoading: configData.isPending,
+      setConfig: configData.setData,
     }),
-    [config, configLoading, configError],
+    [configData],
   );
 
   return <ConfigContext.Provider value={memoConfig}>{children}</ConfigContext.Provider>;
 }
 
 ConfigContextProvider.propTypes = {
-  children: PropTypes.shape().isRequired,
+  children: PropTypes.node.isRequired,
   configName: PropTypes.string.isRequired,
+  overrideConfig: PropTypes.object, // Optional parameter to override configuration data
 };

source/contexts/DataContext.js

@@ -62,14 +62,21 @@ function filterData(data, filters) {
 
 export const DataContext = createContext();
 
-export default function DataContextProvider({ children }) {
+export default function DataContextProvider({ children, overrideData }) {
   const { config } = useContext(ConfigContext);
   const [loading, setLoading] = useState(true);
   const [filteredData, setFilteredData] = useState([]);
   const filtersRef = useRef();
   const [filters, setFilters] = useState([]);
-  const { error: dataError, data } = useFetch(config?.DATA_RESOURCE_URL, config?.DATA_FORMAT);
-
+  let data;
+  let dataError;
+  if (overrideData) {
+    data = overrideData;
+  } else {
+    const { error, data: fetchedData } = useFetch(config?.DATA_RESOURCE_URL, config?.DATA_FORMAT);
+    dataError = error;
+    data = fetchedData;
+  }
   const addFiltersHandler = (toAddFilters) => {
     const oldFilters = [...filtersRef.current];
     // remove first

tests/App.test.js

@@ -1,31 +1,22 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 
-const useFetch = jest.fn()
-
-import { ConfigContext } from '../source/contexts/ConfigContext';
 import App from '../source/Application';
 
+import testConfig from '../config/wines.json';
+import testData from '../config/wines_data.json';
 
 
-describe('App', () => {
-  beforeEach(() => {
-    // Mock the return value of useFetch
-    useFetch.mockReturnValue({
-      error: null,
-      data: { /* Dummy config data */ },
-      isPending: false,
-      setData: jest.fn(),
-    });
-  });
 
+describe('App', () => {
   test('renders more than 0 visible items with react-grid-item class', async () => {
-    render(
-      <ConfigContext.Provider value={{ /* Dummy config data */ }}>
-        <App />
-      </ConfigContext.Provider>
+    const container = render(
+        <App overrideConfig={testConfig} overrideData={testData}/>
     );
 
-    // Your test assertions here
+    await waitFor(() => {
+        const items = container.getAllByClassName('react-grid-item');
+        expect(items.length).toBeGreaterThan(0);
+      });
   });
 });