fix: updated type to fix unit test

This commit is contained in:
Griffithtp 2019-06-25 23:29:53 +01:00
parent 2f28ade710
commit 7cab3f289e
7 changed files with 42 additions and 23 deletions

View File

@ -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 () => {

View File

@ -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,
}));
};

View File

@ -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>
) : (

View File

@ -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};
}

View File

@ -6,7 +6,7 @@ interface Props {
text: string;
capitalize?: boolean;
weight?: string;
modifiers?: null | undefined;
modifiers?: any;
}
const Wrapper = styled('div')`

View File

@ -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(),
};

View File

@ -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;