Skip to content

Commit

Permalink
Merge pull request #204 from glific/codebeat/code-cleanup
Browse files Browse the repository at this point in the history 
Code cleanup
  • Loading branch information
@kurund
kurund authored Jul 17, 2020
2 parents ef88a26 + 77bdec4 commit 8f44dbb
Show file tree
Hide file tree
Showing 10 changed files with 586 additions and 617 deletions.
90 changes: 36 additions & 54 deletions src/components/UI/DialogBox/DialogBox.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,61 +2,43 @@ import React from 'react';
import { mount } from 'enzyme';
import { DialogBox } from './DialogBox';

describe('<DialogBox', () => {
const mockCallbackCancel = jest.fn();
const mockCallbackOK = jest.fn();

it('should not display dialog box if open is false', () => {
const wrapper = mount(
<DialogBox
open={false}
message={'Are you sure?'}
handleOK={mockCallbackOK}
handleCancel={mockCallbackCancel}
/>
);

expect(wrapper.find('div.MuiDialog-root').exists()).toBe(false);
});

it('should display the same message as passed in the prop', () => {
const wrapper = mount(
<DialogBox
open
title={'Are you sure?'}
handleOk={mockCallbackOK}
handleCancel={mockCallbackCancel}
/>
);

expect(wrapper.find('h2.MuiTypography-root').text()).toBe('Are you sure?');
});

it('should check if callback method is called when cancel button is clicked', () => {
const wrapper = mount(
<DialogBox
open
title={'Are you sure?'}
handleOk={mockCallbackOK}
handleCancel={mockCallbackCancel}
/>
);
const mockCallbackCancel = jest.fn();
const mockCallbackOK = jest.fn();
const dialogBox = (
<DialogBox
open
title={'Are you sure?'}
handleOk={mockCallbackOK}
handleCancel={mockCallbackCancel}
/>
);

it('should not display dialog box if open is false', () => {
const wrapper = mount(
<DialogBox
open={false}
title={'Are you sure?'}
handleOk={mockCallbackOK}
handleCancel={mockCallbackCancel}
/>
);

expect(wrapper.find('div.MuiDialog-root').exists()).toBe(false);
});

wrapper.find('button[data-testid="cancel-button"]').simulate('click');
expect(mockCallbackCancel).toHaveBeenCalled();
});
it('should display the same message as passed in the prop', () => {
const wrapper = mount(dialogBox);
expect(wrapper.find('h2.MuiTypography-root').text()).toBe('Are you sure?');
});

it('should check if callback method is called when confirm button is clicked', () => {
const wrapper = mount(
<DialogBox
open
title={'Are you sure?'}
handleOk={mockCallbackOK}
handleCancel={mockCallbackCancel}
/>
);
it('should check if callback method is called when cancel button is clicked', () => {
const wrapper = mount(dialogBox);
wrapper.find('button[data-testid="cancel-button"]').simulate('click');
expect(mockCallbackCancel).toHaveBeenCalled();
});

wrapper.find('button.MuiButton-containedPrimary').simulate('click');
expect(mockCallbackOK).toHaveBeenCalled();
});
it('should check if callback method is called when confirm button is clicked', () => {
const wrapper = mount(dialogBox);
wrapper.find('button.MuiButton-containedPrimary').simulate('click');
expect(mockCallbackOK).toHaveBeenCalled();
});
165 changes: 97 additions & 68 deletions src/components/UI/Pager/Pager.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,83 +25,112 @@ interface PagerProps {
};
}
// Change name to Pager
export const Pager: React.SFC<PagerProps> = (props) => {
// Creates the rows for the table
const createRows = () => {
const createRow = (entry: any) => {
return Object.keys(entry).map((item: any, i: number) => {
return (
<TableCell
key={i}
className={`${styles.TableCell} ${props.columnStyles ? props.columnStyles[i] : null}`}
>
{entry[item]}
</TableCell>
);
});
};
return props.data.map((entry: any, i: number) => {

const createRows = (data: any, columnStyles: any) => {
const createRow = (entry: any) => {
return Object.keys(entry).map((item: any, i: number) => {
return (
<TableRow key={i} className={styles.TableRow}>
{createRow(entry)}
</TableRow>
<TableCell
key={i}
className={`${styles.TableCell} ${columnStyles ? columnStyles[i] : null}`}
>
{entry[item]}
</TableCell>
);
});
};
return data.map((entry: any, i: number) => {
return (
<TableRow key={i} className={styles.TableRow}>
{createRow(entry)}
</TableRow>
);
});
};

const tableHeadColumns = (
columnNames: Array<any>,
columnStyles: any,
tableVals: any,
handleTableChange: Function
) => (
<TableRow className={styles.TableHeadRow}>
{columnNames.map((name: string, i: number) => {
return (
<TableCell
key={i}
className={`${styles.TableCell} ${columnStyles ? columnStyles[i] : null}`}
>
{i !== columnNames.length - 1 ? (
<TableSortLabel
active={name === tableVals.sortCol}
direction={tableVals.sortDirection}
onClick={() => {
handleTableChange('sortCol', name);
handleTableChange(
'sortDirection',
tableVals.sortDirection === 'asc' ? 'desc' : 'asc'
);
}}
>
{name}
</TableSortLabel>
) : (
name
)}
</TableCell>
);
})}
</TableRow>
);

const pagination = (
columnNames: Array<any>,
totalRows: number,
handleTableChange: Function,
tableVals: any
) => (
<TablePagination
className={styles.FooterRow}
colSpan={columnNames.length}
count={totalRows}
onChangePage={(e, newPage) => {
handleTableChange('pageNum', newPage);
}}
onChangeRowsPerPage={(e) => {
handleTableChange('pageRows', parseInt(e.target.value, 10));
}}
page={tableVals.pageNum}
rowsPerPage={tableVals.pageRows}
rowsPerPageOptions={[10, 15, 20, 25, 30]} // for testing purposes, can be removed
/>
);

export const Pager: React.SFC<PagerProps> = (props) => {
// Creates the rows for the table

const rows = createRows(props.data, props.columnStyles);
const tableHead = tableHeadColumns(
props.columnNames,
props.columnStyles,
props.tableVals,
props.handleTableChange
);

const tablePagination = pagination(
props.columnNames,
props.totalRows,
props.handleTableChange,
props.tableVals
);

return (
<div className={styles.TableContainer}>
<Table className={styles.Table}>
<TableHead className={styles.TagListHeader}>
<TableRow className={styles.TableHeadRow}>
{props.columnNames.map((name: string, i: number) => {
return (
<TableCell
key={i}
className={`${styles.TableCell} ${
props.columnStyles ? props.columnStyles[i] : null
}`}
>
{i !== props.columnNames.length - 1 ? (
<TableSortLabel
active={name === props.tableVals.sortCol}
direction={props.tableVals.sortDirection}
onClick={() => {
props.handleTableChange('sortCol', name);
props.handleTableChange(
'sortDirection',
props.tableVals.sortDirection === 'asc' ? 'desc' : 'asc'
);
}}
>
{name}
</TableSortLabel>
) : (
name
)}
</TableCell>
);
})}
</TableRow>
</TableHead>
<TableBody>{createRows()}</TableBody>
<TableHead className={styles.TagListHeader}>{tableHead}</TableHead>
<TableBody>{rows}</TableBody>
<TableFooter className={styles.TableFooter}>
<TableRow>
<TablePagination
className={styles.FooterRow}
colSpan={props.columnNames.length}
count={props.totalRows}
onChangePage={(e, newPage) => {
props.handleTableChange('pageNum', newPage);
}}
onChangeRowsPerPage={(e) => {
props.handleTableChange('pageRows', parseInt(e.target.value, 10));
}}
page={props.tableVals.pageNum}
rowsPerPage={props.tableVals.pageRows}
rowsPerPageOptions={[10, 15, 20, 25, 30]} // for testing purposes, can be removed
/>
</TableRow>
<TableRow>{tablePagination}</TableRow>
</TableFooter>
</Table>
</div>
Expand Down
Loading

0 comments on commit 8f44dbb

Please sign in to comment.