test: add updateTheme tests

celo-org · May 20, 2022 · 07f625c · 07f625c
1 parent 039b6a7
commit 07f625c
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 13 deletions.
diff --git a/packages/react-celo/__tests__/react-celo-provider.tsx b/packages/react-celo/__tests__/react-celo-provider.tsx
@@ -6,8 +6,8 @@ import React, { ReactElement } from 'react';
 
 import { Mainnet } from '../src/constants';
 import { CeloProvider, CeloProviderProps } from '../src/react-celo-provider';
-import { Network } from '../src/types';
-import { UseCelo, useCelo } from '../src/use-celo';
+import { Maybe, Network, Theme } from '../src/types';
+import { UseCelo, useCelo, useCeloInternal } from '../src/use-celo';
 
 interface RenderArgs {
   providerProps: Partial<CeloProviderProps>;
@@ -79,11 +79,19 @@ describe('CeloProvider', () => {
   });
 
   describe('hook interface', () => {
-    const renderUseCK = (props: Partial<CeloProviderProps>) =>
+    const renderUseCelo = (props: Partial<CeloProviderProps>) =>
       renderHookInCKProvider<UseCelo>(useCelo, {
         providerProps: props,
       });
 
+    const renderUseCeloInternal = (props: Partial<CeloProviderProps>) =>
+      renderHookInCKProvider<UseCelo & { theme: Maybe<Theme> }>(
+        useCeloInternal,
+        {
+          providerProps: props,
+        }
+      );
+
     describe('regarding networks', () => {
       const networks: Network[] = [
         {
@@ -111,21 +119,21 @@ describe('CeloProvider', () => {
       ];
 
       it('defaults to Celo Mainnet', () => {
-        const hookReturn = renderUseCK({});
+        const hookReturn = renderUseCelo({});
         expect(hookReturn.result.current.network).toEqual(Mainnet);
         hookReturn.unmount();
       });
 
       it('supports passing other networks', () => {
-        const hookReturn = renderUseCK({ networks, network: networks[0] });
+        const hookReturn = renderUseCelo({ networks, network: networks[0] });
         expect(hookReturn.result.current.networks).toEqual(networks);
 
         expect(hookReturn.result.current.network).toEqual(networks[0]);
         hookReturn.unmount();
       });
 
       it('updates the Current network', async () => {
-        const { result, rerender, unmount } = renderUseCK({ networks });
+        const { result, rerender, unmount } = renderUseCelo({ networks });
 
         // TODO Need to determine behavior when network is not in networks
         expect(result.current.network).toEqual(Mainnet);
@@ -144,12 +152,12 @@ describe('CeloProvider', () => {
     describe('regarding feeCurrency', () => {
       describe('when none given', () => {
         it('defaults to CELO', () => {
-          const { result, unmount } = renderUseCK({});
+          const { result, unmount } = renderUseCelo({});
           expect(result.current.feeCurrency).toEqual(CeloContract.GoldToken);
           unmount();
         });
         it('does not set any feeCurrency on the kit', () => {
-          const { result, unmount } = renderUseCK({});
+          const { result, unmount } = renderUseCelo({});
           expect(result.current.walletType).toEqual('Unauthenticated');
           expect(result.current.kit.connection.defaultFeeCurrency).toEqual(
             undefined
@@ -160,7 +168,7 @@ describe('CeloProvider', () => {
 
       describe('when feeCurrency WhitelistToken passed', () => {
         it('sets that as the feeCurrency', () => {
-          const { result } = renderUseCK({
+          const { result } = renderUseCelo({
             feeCurrency: CeloContract.StableTokenBRL,
           });
 
@@ -172,11 +180,44 @@ describe('CeloProvider', () => {
         it.todo('sets on the kit');
 
         it('allows updating feeCurrency', () => {
-          const { result } = renderUseCK({});
+          const { result } = renderUseCelo({});
 
           expect(result.current.supportsFeeCurrency).toBe(false);
         });
       });
     });
+
+    it('updates the current theme', () => {
+      const { result, rerender } = renderUseCeloInternal({ theme: null });
+
+      // FIXME Need to determine behavior when network is not in networks
+      expect(result.current.network).toEqual(Mainnet);
+
+      act(() => {
+        result.current.updateTheme({
+          background: '#000',
+          primary: '#000',
+          secondary: '#000',
+          muted: '#000',
+          error: '#000',
+          text: '#000',
+          textSecondary: '#000',
+          textTertiary: '#000',
+        });
+      });
+
+      rerender();
+
+      expect(result.current.theme).toEqual({
+        background: '#000',
+        primary: '#000',
+        secondary: '#000',
+        muted: '#000',
+        error: '#000',
+        text: '#000',
+        textSecondary: '#000',
+        textTertiary: '#000',
+      });
+    });
   });
 });
diff --git a/packages/react-celo/__tests__/utils/react-celo-reducer.test.ts b/packages/react-celo/__tests__/utils/react-celo-reducer.test.ts
@@ -19,6 +19,7 @@ const initialState: ReducerState = {
   address: null,
   feeCurrency: CeloContract.GoldToken,
   connectionCallback: null,
+  theme: null,
 };
 
 describe('reducer', () => {

diff --git a/packages/react-celo/src/use-celo.tsx b/packages/react-celo/src/use-celo.tsx
@@ -105,14 +105,15 @@ interface UseCeloInternal extends UseCelo {
   connectionCallback: Maybe<(connector: Connector | false) => void>;
   initConnector: (connector: Connector) => Promise<void>;
   pendingActionCount: number;
+  theme: Maybe<Theme>;
 }
 
 /**
  * useCelo with internal methods exposed. Package use only.
  */
 export const useCeloInternal = (): UseCeloInternal => {
   const [
-    { pendingActionCount, connectionCallback },
+    { pendingActionCount, connectionCallback, theme },
     _dispatch,
     { initConnector },
   ] = useReactCeloContext();
@@ -122,5 +123,6 @@ export const useCeloInternal = (): UseCeloInternal => {
     connectionCallback,
     initConnector,
     pendingActionCount,
+    theme,
   };
 };
diff --git a/packages/react-celo/src/utils/useTheme.ts b/packages/react-celo/src/utils/useTheme.ts
@@ -1,8 +1,8 @@
 import { useEffect, useState } from 'react';
 
-import { useReactCeloContext } from '../react-celo-provider';
 import defaultTheme from '../theme/default';
 import { Mode, Theme } from '../types';
+import { useCeloInternal } from '../use-celo';
 
 class ModeState {
   private _mode = Mode.Light;
@@ -60,7 +60,7 @@ if (typeof MutationObserver !== 'undefined') {
 }
 
 export default function useTheme(): Theme {
-  const [{ theme }] = useReactCeloContext();
+  const { theme } = useCeloInternal();
   const [mode, setMode] = useState(state.mode);
 
   useEffect(() => {