Prepares test cases for HeaderLogo

Author: velopert

src/components/base/Header.tsx

@@ -11,6 +11,7 @@ import { logout } from '../../lib/api/auth';
 import storage from '../../lib/storage';
 import { UserLogo } from '../../modules/header';
 import { Link } from 'react-router-dom';
+import HeaderLogo from './HeaderLogo';
 
 const HeaderBlock = styled.div<{
   floating: boolean;
@@ -59,17 +60,6 @@ interface HeaderProps {
 
 const { useCallback } = React;
 
-const CustomLogo = styled(Link)``;
-
-const createFallbackTitle = (username: string | null) => {
-  if (!username) return null;
-  const lastChar = username.slice(-1).toLowerCase();
-  if (lastChar === 's') {
-    return `${username}' velog`;
-  }
-  return `${username}'s velog`;
-};
-
 const Header: React.SFC<HeaderProps> = ({
   floating,
   floatingMargin,
@@ -97,17 +87,11 @@ const Header: React.SFC<HeaderProps> = ({
       >
         <div className="wrapper">
           <div className="brand">
-            {custom ? (
-              userLogo ? (
-                <CustomLogo to="/">
-                  {userLogo.title
-                    ? userLogo.title
-                    : createFallbackTitle(velogUsername)}
-                </CustomLogo>
-              ) : null
-            ) : (
-              <Logo />
-            )}
+            <HeaderLogo
+              custom={custom}
+              userLogo={userLogo}
+              velogUsername={velogUsername}
+            />
           </div>
           <div className="right">
             {user ? (

src/components/base/HeaderLogo.tsx

@@ -1,18 +1,50 @@
 import * as React from 'react';
 import styled from 'styled-components';
+import { Link } from 'react-router-dom';
 import { Logo } from '../../static/svg';
 import { UserLogo } from '../../modules/header';
 
-const HeaderLogoBlock = styled.div``;
+const createFallbackTitle = (username: string | null) => {
+  if (!username) return null;
+  const lastChar = username.slice(-1).toLowerCase();
+  if (lastChar === 's') {
+    return `${username}' velog`;
+  }
+  return `${username}'s velog`;
+};
+
+const HeaderLogoBlock = styled(Link)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
 
 export interface HeaderLogoProps {
   custom: boolean;
   userLogo: UserLogo | null;
   velogUsername: string | null;
 }
 
-const HeaderLogo: React.FC<HeaderLogoProps> = props => {
-  return <HeaderLogoBlock />;
+const HeaderLogo: React.FC<HeaderLogoProps> = ({
+  custom,
+  userLogo,
+  velogUsername,
+}) => {
+  if (!custom) {
+    return (
+      <HeaderLogoBlock to="/">
+        <Logo data-testid="velog-logo" />
+      </HeaderLogoBlock>
+    );
+  }
+
+  if (!velogUsername) return null;
+  const velogPath = `/@${velogUsername}`;
+  return (
+    <HeaderLogoBlock to={velogPath}>
+      {createFallbackTitle(velogUsername)}
+    </HeaderLogoBlock>
+  );
 };
 
 export default HeaderLogo;

src/components/base/__tests__/HeaderLogo.test.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { render } from 'react-testing-library';
+import HeaderLogo, { HeaderLogoProps } from '../HeaderLogo';
+import { MemoryRouter } from 'react-router-dom';
+
+describe('HeaderLogo', () => {
+  const setup = (props: Partial<HeaderLogoProps> = {}) => {
+    const initialProps: HeaderLogoProps = {
+      custom: false,
+      userLogo: null,
+      velogUsername: null,
+    };
+    const utils = render(
+      <MemoryRouter>
+        <HeaderLogo {...initialProps} {...props} />
+      </MemoryRouter>,
+    );
+    return {
+      ...utils,
+    };
+  };
+
+  it('shows logo svg when custom is false', () => {
+    const { getByTestId } = setup();
+    getByTestId('velog-logo');
+  });
+
+  it('shows null when custom is true and data is not loaded', () => {});
+  it('shows custom velog title when custom is true data is loaded', () => {});
+  it('shows fallback velog title when velog title is null', () => {});
+});

src/components/velog/__tests__/VelogPageTemplate.test.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { MemoryRouter } from 'react-router-dom';
 import { render } from 'react-testing-library';
 import VelogPageTemplate, {
   VelogPageTemplateProps,
@@ -9,7 +10,9 @@ describe('VelogPageTemplate', () => {
   const setup = (props: Partial<VelogPageTemplateProps> = {}) => {
     const initialProps: VelogPageTemplateProps = {};
     const utils = renderWithRedux(
-      <VelogPageTemplate {...initialProps} {...props} />,
+      <MemoryRouter>
+        <VelogPageTemplate {...initialProps} {...props} />
+      </MemoryRouter>,
     );
     return {
       ...utils,