Test ConfigLoader

Author: velopert

src/containers/velog/ConfigLoader.tsx

@@ -2,22 +2,31 @@ import React, { useEffect } from 'react';
 import { Query, QueryResult } from 'react-apollo';
 import { connect } from 'react-redux';
 import { GET_VELOG_CONFIG, VelogConfig } from '../../lib/graphql/user';
+import { setUserLogo } from '../../modules/header';
 
 export interface ConfigLoaderProps {
   username: string;
 }
 
 interface ConfigEffectProps {
   velogConfig: VelogConfig;
+  setUserLogo: typeof setUserLogo;
 }
-const ConfigEffect: React.FC<ConfigEffectProps> = ({ velogConfig }) => {
+
+const ConfigEffect: React.FC<ConfigEffectProps> = ({
+  velogConfig,
+  setUserLogo,
+}) => {
   useEffect(() => {
-    console.log(velogConfig);
-  }, [velogConfig]);
+    setUserLogo(velogConfig);
+  }, [setUserLogo, velogConfig]);
   return null;
 };
 
-const ConfigEffectContainer = connect(() => ({}));
+const ConfigEffectContainer = connect(
+  () => ({}),
+  { setUserLogo },
+)(ConfigEffect);
 
 const ConfigLoader: React.FC<ConfigLoaderProps> = ({ username }) => {
   return (
@@ -32,7 +41,7 @@ const ConfigLoader: React.FC<ConfigLoaderProps> = ({ username }) => {
         }
         if (error || loading) return null;
         if (!data) return null;
-        return <ConfigEffect velogConfig={data.velog_config} />;
+        return <ConfigEffectContainer velogConfig={data.velog_config} />;
       }}
     </Query>
   );

src/containers/velog/__tests__/ConfigLoader.test.tsx

@@ -4,6 +4,7 @@ import ConfigLoader, { ConfigLoaderProps } from '../ConfigLoader';
 import { MockedProvider } from 'react-apollo/test-utils';
 import { GET_VELOG_CONFIG } from '../../../lib/graphql/user';
 import renderWithRedux from '../../../lib/renderWithRedux';
+import waitUntil from '../../../lib/waitUntil';
 
 describe('ConfigLoader', () => {
   const setup = (props: Partial<ConfigLoaderProps> = {}) => {
@@ -35,9 +36,13 @@ describe('ConfigLoader', () => {
   it('renders properly', () => {
     setup();
   });
-  it('matches snapshot', async () => {
-    // const { container } = setup();
-    // await waitForDomChange({ container });
-    // expect(container).toMatchSnapshot();
+  it('loads GET_VELOG_CONFIG and dispatches setUserLogo', async () => {
+    const { store } = setup();
+    const userLogo = store.getState().header.userLogo;
+    await waitUntil(() => store.getState().header.userLogo !== userLogo);
+    expect(store.getState().header.userLogo).toHaveProperty(
+      'title',
+      'VELOPERT.LOG',
+    );
   });
 });

src/containers/velog/__tests__/__snapshots__/ConfigLoader.test.tsx.snap

@@ -0,0 +1,43 @@
+type WaitUntilOptions = {
+  interval: number;
+  timeout: number;
+};
+
+const defaultOptions: WaitUntilOptions = {
+  interval: 50,
+  timeout: 6000,
+};
+
+type ConditionCallback = () => boolean;
+
+const waitUntil = (
+  conditionCallback: ConditionCallback,
+  options: Partial<WaitUntilOptions> = {},
+) => {
+  const { interval, timeout } = { ...defaultOptions, ...options };
+  const promise = new Promise((resolve, reject) => {
+    let timeoutId: null | number = null;
+
+    setTimeout(() => {
+      const e = new Error('waitUntil time out');
+      e.name = 'WaitUntilTimeoutError';
+      reject(e);
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      }
+    }, timeout);
+
+    const check = () => {
+      if (conditionCallback()) {
+        return resolve();
+      }
+      timeoutId = setTimeout(check, interval);
+    };
+
+    check();
+  });
+
+  return promise;
+};
+
+export default waitUntil;

src/lib/waitUntil.ts

@@ -9,7 +9,7 @@ type UserLogo = {
   logo_image: string | null;
 };
 
-interface HeaderState {
+export interface HeaderState {
   custom: boolean;
   userLogo: null | UserLogo;
 }

src/modules/header.ts

@@ -1,15 +1,18 @@
 import { combineReducers } from 'redux';
 import core, { CoreState } from './core';
 import write, { WriteState } from './write';
+import header, { HeaderState } from './header';
 
 export type RootState = {
   core: CoreState;
   write: WriteState;
+  header: HeaderState;
 };
 
 const rootReducer = combineReducers({
   core,
   write,
+  header,
 });
 
 export default rootReducer;