Skip to content

Commit

Permalink
adds more specs
Browse files Browse the repository at this point in the history
  • Loading branch information
@nytai
nytai committed Jan 4, 2020
1 parent 76d5a47 commit 78e5b1f
Show file tree
Hide file tree
Showing 6 changed files with 175 additions and 39 deletions.
134 changes: 129 additions & 5 deletions superset/assets/spec/javascripts/components/ListView/ListView_spec.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,30 +18,154 @@
*/
import React from 'react';
import { mount } from 'enzyme';
import { act } from 'react-dom/test-utils';
import { MenuItem, Pagination } from 'react-bootstrap';

import ListView from 'src/components/ListView/ListView';

describe('ListView', () => {
const mockedProps = {
title: 'Data Table',
columns: [
{
accessor: 'id',
Header: 'ID',
sortable: true,
},
{
accessor: 'name',
Header: 'Name',
filterable: true,
},
],
data: [],
count: 0,
data: [
{ id: 1, name: 'data 1' },
{ id: 2, name: 'data 2' },
],
count: 2,
pageSize: 1,
fetchData: jest.fn(() => []),
loading: false,
};
const wrapper = mount(<ListView {...mockedProps} />);

it('renders', () => {
expect(wrapper.find(ListView)).toHaveLength(1);
afterEach(() => {
mockedProps.fetchData.mockClear();
});

it('calls fetchData on mount', () => {
expect(mockedProps.fetchData).toHaveBeenCalled();
expect(wrapper.find(ListView)).toHaveLength(1);
expect(mockedProps.fetchData.mock.calls[0]).toMatchInlineSnapshot(`
Array [
Object {
"filters": Object {},
"pageIndex": 0,
"pageSize": 1,
"sortBy": Array [],
},
]
`);
});

it('calls fetchData on sort', () => {
wrapper
.find('[data-test="sort-header"]')
.first()
.simulate('click');
expect(mockedProps.fetchData.mock.calls[0]).toMatchInlineSnapshot(`
Array [
Object {
"filters": Object {},
"pageIndex": 0,
"pageSize": 1,
"sortBy": Array [
Object {
"desc": false,
"id": "id",
},
],
},
]
`);
});

it('calls fetchData on filter', () => {
act(() => {
wrapper
.find('.dropdown-toggle')
.children('button')
.props()
.onClick();

wrapper
.find(MenuItem)
.props()
.onSelect({ id: 'name', Header: 'name' });
});
wrapper.update();

act(() => {
wrapper.find('.filter-inputs input[type="text"]').prop('onChange')({
currentTarget: { value: 'foo' },
});
});
wrapper.update();

act(() => {
wrapper
.find('[data-test="apply-filters"]')
.last()
.prop('onClick')();
});
wrapper.update();

expect(mockedProps.fetchData.mock.calls[0]).toMatchInlineSnapshot(`
Array [
Object {
"filters": Object {
"name": Object {
"filterId": "sw",
"filterValue": "foo",
},
},
"pageIndex": 0,
"pageSize": 1,
"sortBy": Array [
Object {
"desc": false,
"id": "id",
},
],
},
]
`);
});

it('calls fetchData on page change', () => {
act(() => {
wrapper.find(Pagination).prop('onSelect')(2);
});
wrapper.update();

expect(mockedProps.fetchData.mock.calls[0]).toMatchInlineSnapshot(`
Array [
Object {
"filters": Object {
"name": Object {
"filterId": "sw",
"filterValue": "foo",
},
},
"pageIndex": 1,
"pageSize": 1,
"sortBy": Array [
Object {
"desc": false,
"id": "id",
},
],
},
]
`);
});
});
17 changes: 15 additions & 2 deletions superset/assets/spec/javascripts/views/dashboardList/DashboardList_spec.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ const store = mockStore({});
const dashboardsInfoEndpoint = 'glob:*/api/v1/dashboard/_info*';
const dashboardsEndpoint = 'glob:*/api/v1/dashboard/?*';

const mockDashboards = [...new Array(3)].map(i => ({
const mockDashboards = [...new Array(3)].map((_, i) => ({
id: i,
url: 'url',
dashboard_title: `title ${i}`,
Expand All @@ -53,7 +53,6 @@ fetchMock.get(dashboardsEndpoint, {
});

describe('DashboardList', () => {
beforeEach(fetchMock.resetHistory);
const mockedProps = {};
const wrapper = mount(<DashboardList {...mockedProps} />, {
context: { store },
Expand All @@ -66,4 +65,18 @@ describe('DashboardList', () => {
it('renders a ListView', () => {
expect(wrapper.find(ListView)).toHaveLength(1);
});

it('fetches info', () => {
const callsI = fetchMock.calls(/dashboard\/_info/);
expect(callsI).toHaveLength(1);
});

it('fetches data', () => {
wrapper.update();
const callsD = fetchMock.calls(/dashboard\/\?q/);
expect(callsD).toHaveLength(1);
expect(callsD[0][0]).toMatchInlineSnapshot(
`"/http//localhost/api/v1/dashboard/?q={%22order_column%22:%22changed_on%22,%22order_direction%22:%22desc%22,%22page%22:0,%22page_size%22:25}"`,
);
});
});
50 changes: 25 additions & 25 deletions superset/assets/src/components/ListView/ListView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
* under the License.
*/
import { t } from '@superset-ui/translation';
import React, { FunctionComponent } from 'react';
import React, { FunctionComponent, useMemo } from 'react';
import {
Button,
Col,
Expand All @@ -44,7 +44,6 @@ interface Props {
className?: string;
title?: string;
initialSort?: SortColumn[];
filterable?: boolean;
filterTypes?: FilterTypeMap;
}

Expand All @@ -58,7 +57,6 @@ const ListView: FunctionComponent<Props> = ({
initialSort = [],
className = '',
title = '',
filterable = false,
filterTypes = {},
}) => {
const {
Expand All @@ -85,7 +83,8 @@ const ListView: FunctionComponent<Props> = ({
initialPageSize,
initialSort,
});
const filterableColumns = columns.filter((c) => c.filterable);
const filterableColumns = useMemo(() => columns.filter((c) => c.filterable), [columns]);
const filterable = Boolean(columns.length);

const removeFilterAndApply = (index: number) => {
const updated = removeFromList(filterToggles, index);
Expand Down Expand Up @@ -125,15 +124,16 @@ const ListView: FunctionComponent<Props> = ({
Header,
id: id || accessor,
}))
.map((filter: FilterToggle) => (
.map((ft: FilterToggle) => (
<MenuItem
key={filter.id}
eventKey={filter}
onSelect={(fltr: FilterToggle) =>
setFilterToggles([...filterToggles, fltr])
key={ft.id}
eventKey={ft}
onSelect={(fltr: FilterToggle) => {
setFilterToggles([...filterToggles, fltr]);
}
}
>
{filter.Header}
{ft.Header}
</MenuItem>
))}
</DropdownButton>
Expand All @@ -143,7 +143,7 @@ const ListView: FunctionComponent<Props> = ({
</Row>
<hr />
{filterToggles.map((ft, i) => (
<div key={`${ft.Header}-${i}`}>
<div key={`${ft.Header}-${i}`} className='filter-inputs'>
<Row>
<Col className='text-center filter-column' md={2}>
<span>{ft.Header}</span>
Expand Down Expand Up @@ -193,28 +193,28 @@ const ListView: FunctionComponent<Props> = ({
<br />
</div>
))}
{filterToggles.length > 0 && (
{filterToggles.length && (
<>
<Row>
<Col md={10} />
<Col md={2}>
{filterToggles.length > 0 && (
<Button
disabled={filtersApplied ? true : false}
bsStyle='primary'
onClick={applyFilters}
bsSize='small'
>
Apply
</Button>
)}
<Button
data-test='apply-filters'
disabled={filtersApplied ? true : false}
bsStyle='primary'
onClick={applyFilters}
bsSize='small'
>
Apply
</Button>
</Col>
</Row>
<br />{' '}
<br />
</>
)}
</div>
)}
)
}
<div className='body'>
<TableCollection
getTableProps={getTableProps}
Expand Down Expand Up @@ -247,7 +247,7 @@ const ListView: FunctionComponent<Props> = ({
of <strong>{count}</strong>
</span>
</div>
</div>
</div >
);
};

Expand Down
2 changes: 1 addition & 1 deletion superset/assets/src/components/ListView/TableCollection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ export default function TableCollection({
{headerGroups.map((headerGroup) => (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map((column: any) => (
<th {...column.getHeaderProps(column.getSortByToggleProps())}>
<th {...column.getHeaderProps(column.getSortByToggleProps())} data-test='sort-header'>
{column.render('Header')}
{' '}
{column.sortable && (
Expand Down
10 changes: 5 additions & 5 deletions superset/assets/src/components/ListView/utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,11 +53,11 @@ function updateInList(list: any[], index: number, update: any): any[] {
// convert filters from UI objects to data objects
export function convertFilters(fts: FilterToggle[]) {
return fts
.filter((ft) => ft.filterValue)
.reduce((acc, elem) => {
acc[elem.id] = {
filterId: elem.filterId || 'sw',
filterValue: elem.filterValue,
.filter(ft => ft.filterValue)
.reduce((acc, ft) => {
acc[ft.id] = {
filterId: ft.filterId || 'sw',
filterValue: ft.filterValue,
};
return acc;
}, {});
Expand Down
1 change: 0 additions & 1 deletion superset/assets/src/views/dashboardList/DashboardList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -254,7 +254,6 @@ class DashboardList extends React.PureComponent<Props, State> {
fetchData={this.fetchData}
loading={this.state.loading}
initialSort={this.initialSort}
filterable={true}
filterTypes={this.state.filterTypes}
/>
</Panel>
Expand Down

0 comments on commit 78e5b1f

Please sign in to comment.