Merge pull request #1163 from Cloudnest-Advisory/hotfix/new-master

Fix Species List Load 1161

Author: dadiorchen

src/components/Species.js

@@ -1,4 +1,5 @@
-import React, { useContext } from 'react';
+// import React, { useContext } from 'react';
+import React, { useContext, useEffect } from 'react';
 import { TextField, CircularProgress } from '@material-ui/core';
 import Autocomplete from '@material-ui/lab/Autocomplete';
 import { withStyles } from '@material-ui/styles';
@@ -18,7 +19,13 @@ const styles = () => {
 function Species(props) {
   // Verify also uses speciesInput so keep it on context
   const speciesContext = useContext(SpeciesContext);
-
+  // Make sure the list is populated when we land on Verify directly.
+  useEffect(() => {
+    // Prefer ensureLoaded(); fall back to load() if that’s what your context exposes.
+    speciesContext.ensureLoaded?.();
+    speciesContext.load?.();
+    // no await; Autocomplete will re-render when the list arrives
+  }, []);
   return (
     <>
       {speciesContext.isLoading ? (

src/components/tests/species.test.js

@@ -1,3 +1,4 @@
+import '../../testMocks/mockSpeciesContext';
 import React from 'react';
 import { BrowserRouter } from 'react-router-dom';
 import {
@@ -7,6 +8,7 @@ import {
   within,
   cleanup,
   waitForElementToBeRemoved,
+  waitFor,
 } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 // import { session, hasPermission, POLICIES } from '../models/auth';
@@ -20,6 +22,22 @@ import { SPECIES } from './fixtures';
 import * as loglevel from 'loglevel';
 const log = loglevel.getLogger('../tests/species.test');
 
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+const qc = new QueryClient({
+  defaultOptions: {
+    queries: { retry: false, refetchOnWindowFocus: false },
+  },
+});
+
+const SpeciesProviderWithOverrides = ({ children, overrides }) => {
+  const base = React.useContext(SpeciesContext);
+  return (
+    <SpeciesContext.Provider value={{ ...base, ...overrides }}>
+      {children}
+    </SpeciesContext.Provider>
+  );
+};
+
 describe('species management', () => {
   let api;
   let speciesValues;
@@ -67,13 +85,15 @@ describe('species management', () => {
   describe('<SpeciesView /> renders page', () => {
     beforeEach(async () => {
       render(
-        <BrowserRouter>
-          <AppProvider>
-            <SpeciesProvider value={speciesValues}>
-              <SpeciesView />
-            </SpeciesProvider>
-          </AppProvider>
-        </BrowserRouter>
+        <QueryClientProvider client={qc}>
+          <BrowserRouter>
+            <AppProvider>
+              <SpeciesProvider value={speciesValues}>
+                <SpeciesView />
+              </SpeciesProvider>
+            </AppProvider>
+          </BrowserRouter>
+        </QueryClientProvider>
       );
       await act(() => api.getSpecies());
     });
@@ -161,8 +181,10 @@ describe('species management', () => {
 
       afterEach(cleanup);
 
-      it('api.createSpecies should be called with "water melon"', () => {
-        expect(api.createSpecies.mock.calls[0][0].name).toBe('water melon');
+      it('api.createSpecies should be called with "water melon"', async () => {
+        await waitFor(() => {
+          expect(api.createSpecies.mock.calls[0][0].name).toBe('water melon');
+        });
       });
 
       // it('species list should be 3 (1 added)', () => {

src/components/tests/verify.test.js

@@ -40,6 +40,13 @@ import {
 import * as loglevel from 'loglevel';
 const log = loglevel.getLogger('../tests/verify.test');
 
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+const qc = new QueryClient({
+  defaultOptions: {
+    queries: { retry: false, refetchOnWindowFocus: false },
+  },
+});
+
 jest.setTimeout(7000);
 jest.mock('../../api/growers');
 jest.mock('../../api/treeTrackerApi');
@@ -111,19 +118,21 @@ describe('Verify', () => {
     beforeEach(async () => {
       render(
         <ThemeProvider theme={theme}>
-          <BrowserRouter>
-            <AppProvider value={{ orgList: ORGS }}>
-              <GrowerContext.Provider value={growerValues}>
-                <VerifyProvider value={verifyValues}>
-                  <SpeciesProvider value={speciesValues}>
-                    <TagsContext.Provider value={tagsValues}>
-                      <Verify />
-                    </TagsContext.Provider>
-                  </SpeciesProvider>
-                </VerifyProvider>
-              </GrowerContext.Provider>
-            </AppProvider>
-          </BrowserRouter>
+          <QueryClientProvider client={qc}>
+            <BrowserRouter>
+              <AppProvider value={{ orgList: ORGS }}>
+                <GrowerContext.Provider value={growerValues}>
+                  <VerifyProvider value={verifyValues}>
+                    <SpeciesProvider value={speciesValues}>
+                      <TagsContext.Provider value={tagsValues}>
+                        <Verify />
+                      </TagsContext.Provider>
+                    </SpeciesProvider>
+                  </VerifyProvider>
+                </GrowerContext.Provider>
+              </AppProvider>
+            </BrowserRouter>
+          </QueryClientProvider>
         </ThemeProvider>
       );
 

src/context/SpeciesContext.js

@@ -14,20 +14,29 @@ export const SpeciesContext = createContext({
   editSpecies: () => {},
   deleteSpecies: () => {},
   combineSpecies: () => {},
+  ensureLoaded: () => {},
 });
 
 export function SpeciesProvider({ children }) {
   const [speciesInput, setSpeciesInput] = useState('');
   const queryClient = useQueryClient();
 
-  const { data: speciesList = [], isLoading } = useQuery({
+  const { data: speciesList = [], isLoading, refetch } = useQuery({
     queryKey: ['species'],
     queryFn: () => api.getSpecies(), // API already has getSpecies
     staleTime: 1000 * 60 * 5, // cache for 5 mins
     refetchOnWindowFocus: false,
     enabled: false, // ✅ Disable automatic fetching until Home mounts
   });
 
+  // Manually trigger a load only when needed
+  const ensureLoaded = async () => {
+    const cached = queryClient.getQueryData(['species']);
+    if (!cached || cached.length === 0) {
+      await refetch();
+    }
+  };
+
   // only used by Species dropdown
   const onChange = (text) => {
     console.log('on change:"', text, '"');
@@ -86,6 +95,7 @@ export function SpeciesProvider({ children }) {
     editSpecies,
     deleteSpecies,
     combineSpecies,
+    ensureLoaded, // expose to components
   };
 
   return (

src/testMocks/mockSpeciesContext.js

@@ -0,0 +1,35 @@
+// Ensure path points to ../context from inside testMocks folder
+jest.mock('../context/SpeciesContext', () => {
+  const React = require('react');
+  const actual = jest.requireActual('../context/SpeciesContext');
+
+  const mockLoadSpeciesList = jest.fn();
+  const mockEnsureLoaded = jest.fn();
+
+  function WrappedSpeciesProvider(props) {
+    return React.createElement(
+      actual.SpeciesProvider,
+      null,
+      React.createElement(actual.SpeciesContext.Consumer, null, (ctx) =>
+        React.createElement(
+          actual.SpeciesContext.Provider,
+          {
+            value: {
+              ...ctx,
+              loadSpeciesList: mockLoadSpeciesList, // injected
+              ensureLoaded: mockEnsureLoaded, // optional
+            },
+          },
+          props.children
+        )
+      )
+    );
+  }
+
+  return {
+    ...actual,
+    SpeciesProvider: WrappedSpeciesProvider,
+    __mocks: { mockLoadSpeciesList, mockEnsureLoaded },
+  };
+});
+console.log('[TEST MOCK] SpeciesContext wrapper loaded');