mirror of
https://github.com/SomboChea/ui
synced 2024-12-25 05:34:26 +07:00
fix: updated type to fix unit test
This commit is contained in:
parent
2f28ade710
commit
7cab3f289e
@ -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 () => {
|
||||
|
@ -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,
|
||||
}));
|
||||
};
|
||||
|
||||
|
@ -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>
|
||||
) : (
|
||||
|
@ -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};
|
||||
}
|
||||
|
@ -6,7 +6,7 @@ interface Props {
|
||||
text: string;
|
||||
capitalize?: boolean;
|
||||
weight?: string;
|
||||
modifiers?: null | undefined;
|
||||
modifiers?: any;
|
||||
}
|
||||
|
||||
const Wrapper = styled('div')`
|
||||
|
@ -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(),
|
||||
};
|
||||
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user