From 7cab3f289e4db2614215fbb0fe746f553c8303ce Mon Sep 17 00:00:00 2001
From: Griffithtp <griffithtp@gmail.com>
Date: Tue, 25 Jun 2019 23:29:53 +0100
Subject: [PATCH] fix: updated type to fix unit test

---
 src/App/App.test.tsx                |  2 +-
 src/App/App.tsx                     | 18 ++++++++++++++----
 src/components/Icon/Icon.tsx        |  4 ++--
 src/components/Icon/styles.ts       | 13 ++++++++++++-
 src/components/Label/Label.tsx      |  2 +-
 src/components/Login/Login.test.tsx |  2 --
 src/components/Login/Login.tsx      | 24 ++++++++++++------------
 7 files changed, 42 insertions(+), 23 deletions(-)

diff --git a/src/App/App.test.tsx b/src/App/App.test.tsx
index f3ef717..4f629fb 100644
--- a/src/App/App.test.tsx
+++ b/src/App/App.test.tsx
@@ -43,7 +43,7 @@ describe('App', () => {
     expect(wrapper.state().showLoginModal).toBeFalsy();
     handleToggleLoginModal();
     expect(wrapper.state('showLoginModal')).toBeTruthy();
-    expect(wrapper.state('error')).toEqual({});
+    expect(wrapper.state('error')).toEqual(undefined);
   });
 
   test('isUserAlreadyLoggedIn: token already available in storage', async () => {
diff --git a/src/App/App.tsx b/src/App/App.tsx
index 674e175..3190d52 100644
--- a/src/App/App.tsx
+++ b/src/App/App.tsx
@@ -14,14 +14,24 @@ import '../styles/typeface-roboto.scss';
 import '../styles/main.scss';
 import 'normalize.css';
 import Footer from '../components/Footer';
+import { FormError } from 'src/components/Login/Login';
 
 export const AppContext = React.createContext<{}>({});
 export const AppContextProvider = AppContext.Provider;
 export const AppContextConsumer = AppContext.Consumer;
 
-export default class App extends Component {
-  public state = {
-    error: {},
+interface AppStateInterface {
+  error?: FormError;
+  logoUrl: string;
+  user: {};
+  scope: string;
+  showLoginModal: boolean;
+  isUserLoggedIn: boolean;
+  packages: [];
+  isLoading: boolean;
+}
+export default class App extends Component<{}, AppStateInterface> {
+  public state: AppStateInterface = {
     // @ts-ignore
     logoUrl: window.VERDACCIO_LOGO,
     user: {},
@@ -112,7 +122,7 @@ export default class App extends Component {
     this.setState(prevState => ({
       // @ts-ignore
       showLoginModal: !prevState.showLoginModal,
-      error: {},
+      error: undefined,
     }));
   };
 
diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx
index 748d3b1..125d98a 100644
--- a/src/components/Icon/Icon.tsx
+++ b/src/components/Icon/Icon.tsx
@@ -61,14 +61,14 @@ export interface Props {
   size?: Breakpoint;
   pointer?: boolean;
   img?: boolean;
-  modifiers?: null | undefined;
+  // modifiers?: null | undefined;
 }
 
 const Icon: React.FC<Props> = ({ className, name, size = 'sm', img = false, pointer = false, ...props }) => {
   // @ts-ignore
   const title = capitalize(name);
   return img ? (
-    <ImgWrapper className={className} pointer={pointer} size={size} title={title} {...props}>
+    <ImgWrapper className={className} name={name} pointer={pointer} size={size} title={title} {...props}>
       <Img alt={title} src={Icons[name]} />
     </ImgWrapper>
   ) : (
diff --git a/src/components/Icon/styles.ts b/src/components/Icon/styles.ts
index 9bd3ba9..fe1c892 100644
--- a/src/components/Icon/styles.ts
+++ b/src/components/Icon/styles.ts
@@ -1,5 +1,7 @@
 import styled, { css } from 'react-emotion';
 import { Breakpoint } from '@material-ui/core/styles/createBreakpoints';
+import { StyledOtherComponent } from 'create-emotion-styled';
+import { DetailedHTMLProps, HTMLAttributes } from 'react';
 
 const getSize = (size: Breakpoint): string => {
   switch (size) {
@@ -31,7 +33,16 @@ export const Svg = styled('svg')`
   }
 `;
 
-export const ImgWrapper = styled('span')`
+export const ImgWrapper: StyledOtherComponent<
+  {
+    size?: Breakpoint;
+    pointer: any;
+    modifiers?: any;
+    name?: string | unknown;
+  },
+  DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>,
+  {}
+> = styled('span')`
   && {
     ${commonStyle};
   }
diff --git a/src/components/Label/Label.tsx b/src/components/Label/Label.tsx
index 95fa878..c9aa93b 100644
--- a/src/components/Label/Label.tsx
+++ b/src/components/Label/Label.tsx
@@ -6,7 +6,7 @@ interface Props {
   text: string;
   capitalize?: boolean;
   weight?: string;
-  modifiers?: null | undefined;
+  modifiers?: any;
 }
 
 const Wrapper = styled('div')`
diff --git a/src/components/Login/Login.test.tsx b/src/components/Login/Login.test.tsx
index aaf3e42..7f8289a 100644
--- a/src/components/Login/Login.test.tsx
+++ b/src/components/Login/Login.test.tsx
@@ -63,7 +63,6 @@ describe('<LoginModal />', () => {
   test('setCredentials - should set username and password in state', () => {
     const props = {
       visibility: true,
-      error: {},
       onCancel: () => {},
       onSubmit: () => {},
     };
@@ -80,7 +79,6 @@ describe('<LoginModal />', () => {
   test('validateCredentials: should validate credentials', async () => {
     const props = {
       visibility: true,
-      error: {},
       onCancel: () => {},
       onSubmit: jest.fn(),
     };
diff --git a/src/components/Login/Login.tsx b/src/components/Login/Login.tsx
index d8c0d67..9f56969 100644
--- a/src/components/Login/Login.tsx
+++ b/src/components/Login/Login.tsx
@@ -20,7 +20,7 @@ interface FormFields {
   helperText: string;
   value: string;
 }
-interface FormError {
+export interface FormError {
   type: string;
   title: string;
   description: string;
@@ -28,7 +28,7 @@ interface FormError {
 
 interface LoginModalProps {
   visibility: boolean;
-  error: Partial<FormError>;
+  error?: FormError;
   onCancel: () => void;
   onSubmit: (username: string, password: string) => void;
 }
@@ -38,11 +38,11 @@ interface LoginModalState {
     username: Partial<FormFields>;
     password: Partial<FormFields>;
   };
-  error: FormError;
+  error?: FormError;
 }
 
 export default class LoginModal extends Component<Partial<LoginModalProps>, LoginModalState> {
-  constructor(props) {
+  constructor(props: LoginModalProps) {
     super(props);
     this.state = {
       form: {
@@ -64,13 +64,13 @@ export default class LoginModal extends Component<Partial<LoginModalProps>, Logi
   }
 
   public render(): JSX.Element {
-    const { visibility, onCancel, error } = this.props as LoginModalProps;
+    const { visibility = true, onCancel = () => null, error } = this.props as LoginModalProps;
     return (
       <Dialog fullWidth={true} id={'login--form-container'} maxWidth={'xs'} onClose={onCancel} open={visibility}>
         <form noValidate={true} onSubmit={this.handleValidateCredentials}>
           <DialogTitle>{'Login'}</DialogTitle>
           <DialogContent>
-            {this.renderLoginError(error)}
+            {error && this.renderLoginError(error)}
             {this.renderNameField()}
             {this.renderPasswordField()}
           </DialogContent>
@@ -150,7 +150,7 @@ export default class LoginModal extends Component<Partial<LoginModalProps>, Logi
     });
   };
 
-  private renderErrorMessage(title, description): JSX.Element {
+  public renderErrorMessage(title, description): JSX.Element {
     return (
       <span>
         <div>
@@ -161,7 +161,7 @@ export default class LoginModal extends Component<Partial<LoginModalProps>, Logi
     );
   }
 
-  private renderMessage(title, description): JSX.Element {
+  public renderMessage(title, description): JSX.Element {
     return (
       <div className={classes.loginErrorMsg} id={'client-snackbar'}>
         <ErrorIcon className={classes.loginIcon} />
@@ -170,11 +170,11 @@ export default class LoginModal extends Component<Partial<LoginModalProps>, Logi
     );
   }
 
-  private renderLoginError({ type, title, description }: Partial<FormError>): JSX.Element | false {
+  public renderLoginError({ type, title, description }: FormError): JSX.Element | false {
     return type === 'error' && <SnackbarContent className={classes.loginError} message={this.renderMessage(title, description)} />;
   }
 
-  private renderNameField = () => {
+  public renderNameField = () => {
     const {
       form: { username },
     } = this.state;
@@ -187,7 +187,7 @@ export default class LoginModal extends Component<Partial<LoginModalProps>, Logi
     );
   };
 
-  private renderPasswordField = () => {
+  public renderPasswordField = () => {
     const {
       form: { password },
     } = this.state;
@@ -200,7 +200,7 @@ export default class LoginModal extends Component<Partial<LoginModalProps>, Logi
     );
   };
 
-  private renderActions = () => {
+  public renderActions = () => {
     const {
       form: { username, password },
     } = this.state;