@envive-ai/react-hooks 0.2.10 → 0.3.0

package/src/contexts/graphqlContext/__tests__/graphqlContext.test.tsx

@@ -1,20 +1,17 @@
-import React from "react";
-import { render, screen, waitFor, act } from "@testing-library/react";
-import { Provider } from "jotai";
-import { useAtomValue } from "jotai";
-import { GraphQLProvider, useGraphQLClient } from "../graphqlContext";
-import { EnviveConfigProvider } from "src/contexts/enviveConfigContext/enviveConfigContext";
-import {
-  orgLevelApiKeyAtom,
-  baseUrlAtom,
-} from "src/atoms/envive/enviveConfig";
-import Logger from "src/application/logging/logger";
-import { getMerchantOrgIdQuery } from "src/application/models/graphql/queries/getMerchantOrgIdQuery";
+import React from 'react';
+import { render, screen, waitFor, act } from '@testing-library/react';
+import { Provider } from 'jotai';
+import { useAtomValue } from 'jotai';
+import { GraphQLProvider, useGraphQLClient } from '../graphqlContext';
+import { EnviveConfigProvider } from 'src/contexts/enviveConfigContext/enviveConfigContext';
+import { orgLevelApiKeyAtom, baseUrlAtom } from 'src/atoms/envive/enviveConfig';
+import Logger from 'src/application/logging/logger';
+import { getMerchantOrgIdQuery } from 'src/application/models/graphql/queries/getMerchantOrgIdQuery';
 
 // Mock the Logger to avoid console output in tests
-vi.spyOn(Logger, "logDebug").mockImplementation(() => {});
-vi.spyOn(Logger, "logWarn").mockImplementation(() => {});
-vi.spyOn(Logger, "logError").mockImplementation(() => {});
+vi.spyOn(Logger, 'logDebug').mockImplementation(() => {});
+vi.spyOn(Logger, 'logWarn').mockImplementation(() => {});
+vi.spyOn(Logger, 'logError').mockImplementation(() => {});
 
 // Mock fetch globally
 global.fetch = vi.fn();
@@ -30,7 +27,7 @@ const MockGraphQLComponent: React.FC = () => {
         data-testid="execute-query-btn"
         onClick={async () => {
           try {
-            const result = await client.executeQuery("query { test }");
+            const result = await client.executeQuery('query { test }');
             (window as any).lastQueryResult = result;
           } catch (error) {
             (window as any).lastQueryError = error;
@@ -76,8 +73,8 @@ const AtomReaderComponent: React.FC = () => {
 
   return (
     <div data-testid="atom-reader">
-      <div data-testid="atom-api-key">{apiKey || "not-set"}</div>
-      <div data-testid="atom-base-url">{baseUrl || "not-set"}</div>
+      <div data-testid="atom-api-key">{apiKey || 'not-set'}</div>
+      <div data-testid="atom-base-url">{baseUrl || 'not-set'}</div>
     </div>
   );
 };
@@ -101,7 +98,7 @@ const TestWrapper: React.FC<{
   );
 };
 
-describe("GraphQLProvider", () => {
+describe('GraphQLProvider', () => {
   beforeEach(() => {
     vi.clearAllMocks();
     (global.fetch as any).mockClear();
@@ -114,54 +111,48 @@ describe("GraphQLProvider", () => {
     delete (window as any).lastConfigError;
   });
 
-  describe("Provider Integration with Jotai Store", () => {
-    it("should read atoms correctly when provider is mounted", async () => {
+  describe('Provider Integration with Jotai Store', () => {
+    it('should read atoms correctly when provider is mounted', async () => {
       const testConfig = {
-        orgLevelApiKey: "test-api-key",
-        baseUrl: "https://test-api.example.com",
+        orgLevelApiKey: 'test-api-key',
+        baseUrl: 'https://test-api.example.com',
       };
 
       render(
         <TestWrapper {...testConfig}>
           <AtomReaderComponent />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       await waitFor(() => {
-        expect(screen.getByTestId("atom-api-key")).toHaveTextContent(
-          testConfig.orgLevelApiKey
-        );
+        expect(screen.getByTestId('atom-api-key')).toHaveTextContent(testConfig.orgLevelApiKey);
       });
 
-      expect(screen.getByTestId("atom-base-url")).toHaveTextContent(
-        testConfig.baseUrl
-      );
+      expect(screen.getByTestId('atom-base-url')).toHaveTextContent(testConfig.baseUrl);
     });
   });
 
-  describe("useGraphQLClient Hook Integration", () => {
-    it("should provide GraphQL context through useGraphQLClient hook", async () => {
+  describe('useGraphQLClient Hook Integration', () => {
+    it('should provide GraphQL context through useGraphQLClient hook', async () => {
       render(
         <TestWrapper
           orgLevelApiKey="test-key"
           baseUrl="https://test-api.example.com"
         >
           <MockGraphQLComponent />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       await waitFor(() => {
-        expect(screen.getByTestId("is-ready")).toHaveTextContent("true");
+        expect(screen.getByTestId('is-ready')).toHaveTextContent('true');
       });
 
       // Verify all context methods are accessible
-      expect(screen.getByTestId("graphql-component")).toBeInTheDocument();
+      expect(screen.getByTestId('graphql-component')).toBeInTheDocument();
     });
 
-    it("should throw error when used outside of GraphQLProvider", () => {
-      const consoleSpy = vi
-        .spyOn(console, "error")
-        .mockImplementation(() => {});
+    it('should throw error when used outside of GraphQLProvider', () => {
+      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
 
       const TestComponent: React.FC = () => {
         try {
@@ -175,64 +166,64 @@ describe("GraphQLProvider", () => {
       render(
         <Provider>
           <TestComponent />
-        </Provider>
+        </Provider>,
       );
 
-      expect(screen.getByTestId("error")).toHaveTextContent(
-        "useGraphQLClient must be used within a GraphQLProvider"
+      expect(screen.getByTestId('error')).toHaveTextContent(
+        'useGraphQLClient must be used within a GraphQLProvider',
       );
 
       consoleSpy.mockRestore();
     });
   });
 
-  describe("isReady State", () => {
-    it("should be false when orgLevelApiKey is missing", async () => {
+  describe('isReady State', () => {
+    it('should be false when orgLevelApiKey is missing', async () => {
       render(
         <TestWrapper baseUrl="https://test-api.example.com">
           <MockGraphQLComponent />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       await waitFor(() => {
-        expect(screen.getByTestId("is-ready")).toHaveTextContent("false");
+        expect(screen.getByTestId('is-ready')).toHaveTextContent('false');
       });
     });
 
-    it("should be true when baseUrl is missing but has default value", async () => {
+    it('should be true when baseUrl is missing but has default value', async () => {
       // Note: baseUrlAtom has a default value, so isReady will be true
       // even if baseUrl is not explicitly provided
       render(
         <TestWrapper orgLevelApiKey="test-key">
           <MockGraphQLComponent />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       await waitFor(() => {
-        expect(screen.getByTestId("is-ready")).toHaveTextContent("true");
+        expect(screen.getByTestId('is-ready')).toHaveTextContent('true');
       });
     });
 
-    it("should be true when all required dependencies are present", async () => {
+    it('should be true when all required dependencies are present', async () => {
       render(
         <TestWrapper
           orgLevelApiKey="test-key"
           baseUrl="https://test-api.example.com"
         >
           <MockGraphQLComponent />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       await waitFor(() => {
-        expect(screen.getByTestId("is-ready")).toHaveTextContent("true");
+        expect(screen.getByTestId('is-ready')).toHaveTextContent('true');
       });
     });
   });
 
-  describe("executeQuery", () => {
-    it("should execute a GraphQL query successfully", async () => {
+  describe('executeQuery', () => {
+    it('should execute a GraphQL query successfully', async () => {
       const mockResponse = {
-        data: { test: "result" },
+        data: { test: 'result' },
       };
 
       (global.fetch as any).mockResolvedValueOnce({
@@ -246,37 +237,34 @@ describe("GraphQLProvider", () => {
           baseUrl="https://test-api.example.com"
         >
           <MockGraphQLComponent />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       await waitFor(() => {
-        expect(screen.getByTestId("is-ready")).toHaveTextContent("true");
+        expect(screen.getByTestId('is-ready')).toHaveTextContent('true');
       });
 
       await act(async () => {
-        screen.getByTestId("execute-query-btn").click();
+        screen.getByTestId('execute-query-btn').click();
       });
 
       await waitFor(() => {
         expect((window as any).lastQueryResult).toEqual(mockResponse.data);
       });
 
-      expect(global.fetch).toHaveBeenCalledWith(
-        "https://test-api.example.com/v1/graphql",
-        {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-            Authorization: "Bearer test-key",
-          },
-          body: JSON.stringify({ query: "query { test }", variables: undefined }),
-        }
-      );
+      expect(global.fetch).toHaveBeenCalledWith('https://test-api.example.com/v1/graphql', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: 'Bearer test-key',
+        },
+        body: JSON.stringify({ query: 'query { test }', variables: undefined }),
+      });
     });
 
-    it("should execute a query with variables", async () => {
+    it('should execute a query with variables', async () => {
       const mockResponse = {
-        data: { result: "success" },
+        data: { result: 'success' },
       };
 
       (global.fetch as any).mockResolvedValueOnce({
@@ -288,11 +276,9 @@ describe("GraphQLProvider", () => {
         const client = useGraphQLClient();
         React.useEffect(() => {
           if (client.isReady) {
-            client
-              .executeQuery("query Test($id: String)", { id: "123" })
-              .then((result) => {
-                (window as any).lastQueryResult = result;
-              });
+            client.executeQuery('query Test($id: String)', { id: '123' }).then(result => {
+              (window as any).lastQueryResult = result;
+            });
           }
         }, [client]);
 
@@ -305,38 +291,33 @@ describe("GraphQLProvider", () => {
           baseUrl="https://test-api.example.com"
         >
           <TestComponent />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       await waitFor(() => {
         expect((window as any).lastQueryResult).toEqual(mockResponse.data);
       });
 
-      expect(global.fetch).toHaveBeenCalledWith(
-        "https://test-api.example.com/v1/graphql",
-        {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-            Authorization: "Bearer test-key",
-          },
-          body: JSON.stringify({
-            query: "query Test($id: String)",
-            variables: { id: "123" },
-          }),
-        }
-      );
+      expect(global.fetch).toHaveBeenCalledWith('https://test-api.example.com/v1/graphql', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: 'Bearer test-key',
+        },
+        body: JSON.stringify({
+          query: 'query Test($id: String)',
+          variables: { id: '123' },
+        }),
+      });
     });
 
-    it("should throw error when client is not ready", async () => {
+    it('should throw error when client is not ready', async () => {
       const TestComponent: React.FC = () => {
         const client = useGraphQLClient();
         React.useEffect(() => {
-          client
-            .executeQuery("query { test }")
-            .catch((error) => {
-              (window as any).lastQueryError = error;
-            });
+          client.executeQuery('query { test }').catch(error => {
+            (window as any).lastQueryError = error;
+          });
         }, [client]);
 
         return <div>Test</div>;
@@ -345,21 +326,21 @@ describe("GraphQLProvider", () => {
       render(
         <TestWrapper baseUrl="https://test-api.example.com">
           <TestComponent />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       await waitFor(() => {
         expect((window as any).lastQueryError).toBeDefined();
         expect((window as any).lastQueryError.message).toBe(
-          "GraphQL client not ready - missing apiKey or baseUrl"
+          'GraphQL client not ready - missing apiKey or baseUrl',
         );
       });
     });
 
-    it("should throw error when fetch fails", async () => {
+    it('should throw error when fetch fails', async () => {
       (global.fetch as any).mockResolvedValueOnce({
         ok: false,
-        statusText: "Internal Server Error",
+        statusText: 'Internal Server Error',
       });
 
       render(
@@ -368,29 +349,27 @@ describe("GraphQLProvider", () => {
           baseUrl="https://test-api.example.com"
         >
           <MockGraphQLComponent />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       await waitFor(() => {
-        expect(screen.getByTestId("is-ready")).toHaveTextContent("true");
+        expect(screen.getByTestId('is-ready')).toHaveTextContent('true');
       });
 
       await act(async () => {
-        screen.getByTestId("execute-query-btn").click();
+        screen.getByTestId('execute-query-btn').click();
       });
 
       await waitFor(() => {
         expect((window as any).lastQueryError).toBeDefined();
-        expect((window as any).lastQueryError.message).toContain(
-          "GraphQL request failed"
-        );
+        expect((window as any).lastQueryError.message).toContain('GraphQL request failed');
       });
     });
 
-    it("should throw error when GraphQL response contains errors", async () => {
+    it('should throw error when GraphQL response contains errors', async () => {
       const mockResponse = {
         data: null,
-        errors: [{ message: "GraphQL error" }],
+        errors: [{ message: 'GraphQL error' }],
       };
 
       (global.fetch as any).mockResolvedValueOnce({
@@ -404,29 +383,27 @@ describe("GraphQLProvider", () => {
           baseUrl="https://test-api.example.com"
         >
           <MockGraphQLComponent />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       await waitFor(() => {
-        expect(screen.getByTestId("is-ready")).toHaveTextContent("true");
+        expect(screen.getByTestId('is-ready')).toHaveTextContent('true');
       });
 
       await act(async () => {
-        screen.getByTestId("execute-query-btn").click();
+        screen.getByTestId('execute-query-btn').click();
       });
 
       await waitFor(() => {
         expect((window as any).lastQueryError).toBeDefined();
-        expect((window as any).lastQueryError.message).toContain(
-          "GraphQL errors"
-        );
+        expect((window as any).lastQueryError.message).toContain('GraphQL errors');
       });
     });
   });
 
-  describe("getOrgId", () => {
-    it("should fetch and return org ID successfully", async () => {
-      const mockOrgId = "org-123";
+  describe('getOrgId', () => {
+    it('should fetch and return org ID successfully', async () => {
+      const mockOrgId = 'org-123';
       const mockResponse = {
         data: {
           me: {
@@ -448,15 +425,15 @@ describe("GraphQLProvider", () => {
           baseUrl="https://test-api.example.com"
         >
           <MockGraphQLComponent />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       await waitFor(() => {
-        expect(screen.getByTestId("is-ready")).toHaveTextContent("true");
+        expect(screen.getByTestId('is-ready')).toHaveTextContent('true');
       });
 
       await act(async () => {
-        screen.getByTestId("get-org-id-btn").click();
+        screen.getByTestId('get-org-id-btn').click();
       });
 
       await waitFor(() => {
@@ -464,17 +441,17 @@ describe("GraphQLProvider", () => {
       });
 
       expect(global.fetch).toHaveBeenCalledWith(
-        "https://test-api.example.com/v1/graphql",
+        'https://test-api.example.com/v1/graphql',
         expect.objectContaining({
           body: JSON.stringify({
             query: getMerchantOrgIdQuery,
             variables: undefined,
           }),
-        })
+        }),
       );
     });
 
-    it("should return undefined when org ID is not available", async () => {
+    it('should return undefined when org ID is not available', async () => {
       const mockResponse = {
         data: {
           me: {
@@ -494,15 +471,15 @@ describe("GraphQLProvider", () => {
           baseUrl="https://test-api.example.com"
         >
           <MockGraphQLComponent />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       await waitFor(() => {
-        expect(screen.getByTestId("is-ready")).toHaveTextContent("true");
+        expect(screen.getByTestId('is-ready')).toHaveTextContent('true');
       });
 
       await act(async () => {
-        screen.getByTestId("get-org-id-btn").click();
+        screen.getByTestId('get-org-id-btn').click();
       });
 
       await waitFor(() => {
@@ -510,12 +487,12 @@ describe("GraphQLProvider", () => {
       });
     });
 
-    it("should return undefined when org.id is empty string", async () => {
+    it('should return undefined when org.id is empty string', async () => {
       const mockResponse = {
         data: {
           me: {
             org: {
-              id: "",
+              id: '',
             },
           },
         },
@@ -532,15 +509,15 @@ describe("GraphQLProvider", () => {
           baseUrl="https://test-api.example.com"
         >
           <MockGraphQLComponent />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       await waitFor(() => {
-        expect(screen.getByTestId("is-ready")).toHaveTextContent("true");
+        expect(screen.getByTestId('is-ready')).toHaveTextContent('true');
       });
 
       await act(async () => {
-        screen.getByTestId("get-org-id-btn").click();
+        screen.getByTestId('get-org-id-btn').click();
       });
 
       await waitFor(() => {
@@ -549,15 +526,15 @@ describe("GraphQLProvider", () => {
     });
   });
 
-  describe("getColorsAndFrontendConfig", () => {
-    it("should fetch and return colors and frontend config successfully", async () => {
+  describe('getColorsAndFrontendConfig', () => {
+    it('should fetch and return colors and frontend config successfully', async () => {
       const mockColorsConfig = {
-        accent_primary: "#FF0000",
-        accent_secondary: "#00FF00",
-        background_dark: "#000000",
+        accent_primary: '#FF0000',
+        accent_secondary: '#00FF00',
+        background_dark: '#000000',
       };
       const mockFrontendConfig = {
-        merchant_override_css: "test-css",
+        merchant_override_css: 'test-css',
         page_variants: [],
       };
 
@@ -587,15 +564,15 @@ describe("GraphQLProvider", () => {
           baseUrl="https://test-api.example.com"
         >
           <MockGraphQLComponent />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       await waitFor(() => {
-        expect(screen.getByTestId("is-ready")).toHaveTextContent("true");
+        expect(screen.getByTestId('is-ready')).toHaveTextContent('true');
       });
 
       await act(async () => {
-        screen.getByTestId("get-config-btn").click();
+        screen.getByTestId('get-config-btn').click();
       });
 
       await waitFor(() => {
@@ -606,7 +583,7 @@ describe("GraphQLProvider", () => {
       });
     });
 
-    it("should handle missing colors and frontend config gracefully", async () => {
+    it('should handle missing colors and frontend config gracefully', async () => {
       const mockResponse = {
         data: {
           me: {
@@ -626,15 +603,15 @@ describe("GraphQLProvider", () => {
           baseUrl="https://test-api.example.com"
         >
           <MockGraphQLComponent />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       await waitFor(() => {
-        expect(screen.getByTestId("is-ready")).toHaveTextContent("true");
+        expect(screen.getByTestId('is-ready')).toHaveTextContent('true');
       });
 
       await act(async () => {
-        screen.getByTestId("get-config-btn").click();
+        screen.getByTestId('get-config-btn').click();
       });
 
       await waitFor(() => {
@@ -645,10 +622,10 @@ describe("GraphQLProvider", () => {
       });
     });
 
-    it("should handle errors and return undefined configs", async () => {
-      const logErrorSpy = vi.spyOn(Logger, "logError");
+    it('should handle errors and return undefined configs', async () => {
+      const logErrorSpy = vi.spyOn(Logger, 'logError');
 
-      (global.fetch as any).mockRejectedValueOnce(new Error("Network error"));
+      (global.fetch as any).mockRejectedValueOnce(new Error('Network error'));
 
       render(
         <TestWrapper
@@ -656,15 +633,15 @@ describe("GraphQLProvider", () => {
           baseUrl="https://test-api.example.com"
         >
           <MockGraphQLComponent />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       await waitFor(() => {
-        expect(screen.getByTestId("is-ready")).toHaveTextContent("true");
+        expect(screen.getByTestId('is-ready')).toHaveTextContent('true');
       });
 
       await act(async () => {
-        screen.getByTestId("get-config-btn").click();
+        screen.getByTestId('get-config-btn').click();
       });
 
       await waitFor(() => {
@@ -673,19 +650,19 @@ describe("GraphQLProvider", () => {
         expect(config.colorsConfig).toBeUndefined();
         expect(config.frontendConfig).toBeUndefined();
         expect(logErrorSpy).toHaveBeenCalledWith(
-          "Error fetching graphql colors and frontend config",
-          expect.any(Error)
+          'Error fetching graphql colors and frontend config',
+          expect.any(Error),
         );
       });
     });
 
-    it("should transform snake_case to camelCase", async () => {
+    it('should transform snake_case to camelCase', async () => {
       const mockColorsConfig = {
-        accent_primary: "#FF0000",
-        accent_secondary: "#00FF00",
+        accent_primary: '#FF0000',
+        accent_secondary: '#00FF00',
       };
       const mockFrontendConfig = {
-        merchant_override_css: "test-css",
+        merchant_override_css: 'test-css',
         page_variants: [],
       };
 
@@ -723,12 +700,8 @@ describe("GraphQLProvider", () => {
           <div>
             {config && (
               <div data-testid="config-display">
-                <div data-testid="has-colors">
-                  {config.colorsConfig ? "yes" : "no"}
-                </div>
-                <div data-testid="has-frontend">
-                  {config.frontendConfig ? "yes" : "no"}
-                </div>
+                <div data-testid="has-colors">{config.colorsConfig ? 'yes' : 'no'}</div>
+                <div data-testid="has-frontend">{config.frontendConfig ? 'yes' : 'no'}</div>
               </div>
             )}
           </div>
@@ -741,18 +714,18 @@ describe("GraphQLProvider", () => {
           baseUrl="https://test-api.example.com"
         >
           <TestComponent />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       await waitFor(() => {
-        expect(screen.getByTestId("has-colors")).toHaveTextContent("yes");
-        expect(screen.getByTestId("has-frontend")).toHaveTextContent("yes");
+        expect(screen.getByTestId('has-colors')).toHaveTextContent('yes');
+        expect(screen.getByTestId('has-frontend')).toHaveTextContent('yes');
       });
     });
   });
 
-  describe("Context Value Memoization", () => {
-    it("should maintain stable context value references", async () => {
+  describe('Context Value Memoization', () => {
+    it('should maintain stable context value references', async () => {
       let contextValue1: any;
       let contextValue2: any;
 
@@ -775,7 +748,7 @@ describe("GraphQLProvider", () => {
         >
           <Component1 />
           <Component2 />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       await waitFor(() => {
@@ -787,4 +760,3 @@ describe("GraphQLProvider", () => {
     });
   });
 });
-