mirror of
https://github.com/ansible/awx.git
synced 2026-03-01 08:48:46 -03:30
convert TeamList to hooks
This commit is contained in:
Keith Grant
@@ -1,10 +1,11 @@
|
|||||||
import React, { Component, Fragment } from 'react';
|
import React, { Fragment, useState, useEffect, useCallback } from 'react';
|
||||||
import { withRouter } from 'react-router-dom';
|
import { useLocation, useRouteMatch } from 'react-router-dom';
|
||||||
import { withI18n } from '@lingui/react';
|
import { withI18n } from '@lingui/react';
|
||||||
import { t } from '@lingui/macro';
|
import { t } from '@lingui/macro';
|
||||||
import { Card, PageSection } from '@patternfly/react-core';
|
import { Card, PageSection } from '@patternfly/react-core';
|
||||||
|
|
||||||
import { TeamsAPI } from '@api';
|
import { TeamsAPI } from '@api';
|
||||||
|
import useRequest, { useDeleteItems } from '@util/useRequest';
|
||||||
import AlertModal from '@components/AlertModal';
|
import AlertModal from '@components/AlertModal';
|
||||||
import DataListToolbar from '@components/DataListToolbar';
|
import DataListToolbar from '@components/DataListToolbar';
|
||||||
import ErrorDetail from '@components/ErrorDetail';
|
import ErrorDetail from '@components/ErrorDetail';
|
||||||
@@ -22,218 +23,167 @@ const QS_CONFIG = getQSConfig('team', {
|
|||||||
order_by: 'name',
|
order_by: 'name',
|
||||||
});
|
});
|
||||||
|
|
||||||
class TeamsList extends Component {
|
function TeamList({ i18n }) {
|
||||||
constructor(props) {
|
const location = useLocation();
|
||||||
super(props);
|
const match = useRouteMatch();
|
||||||
|
const [selected, setSelected] = useState([]);
|
||||||
|
|
||||||
this.state = {
|
const {
|
||||||
hasContentLoading: true,
|
result: { teams, itemCount, actions },
|
||||||
contentError: null,
|
error: contentError,
|
||||||
deletionError: null,
|
isLoading,
|
||||||
|
request: fetchTeams,
|
||||||
|
} = useRequest(
|
||||||
|
useCallback(async () => {
|
||||||
|
const params = parseQueryString(QS_CONFIG, location.search);
|
||||||
|
const [response, actionsResponse] = await Promise.all([
|
||||||
|
TeamsAPI.read(params),
|
||||||
|
TeamsAPI.readOptions(),
|
||||||
|
]);
|
||||||
|
return {
|
||||||
|
teams: response.data.results,
|
||||||
|
itemCount: response.data.count,
|
||||||
|
actions: actionsResponse.data.actions,
|
||||||
|
};
|
||||||
|
}, [location]),
|
||||||
|
{
|
||||||
teams: [],
|
teams: [],
|
||||||
selected: [],
|
|
||||||
itemCount: 0,
|
itemCount: 0,
|
||||||
actions: null,
|
actions: {},
|
||||||
};
|
|
||||||
|
|
||||||
this.handleSelectAll = this.handleSelectAll.bind(this);
|
|
||||||
this.handleSelect = this.handleSelect.bind(this);
|
|
||||||
this.handleTeamDelete = this.handleTeamDelete.bind(this);
|
|
||||||
this.handleDeleteErrorClose = this.handleDeleteErrorClose.bind(this);
|
|
||||||
this.loadTeams = this.loadTeams.bind(this);
|
|
||||||
}
|
|
||||||
|
|
||||||
componentDidMount() {
|
|
||||||
this.loadTeams();
|
|
||||||
}
|
|
||||||
|
|
||||||
componentDidUpdate(prevProps) {
|
|
||||||
const { location } = this.props;
|
|
||||||
if (location !== prevProps.location) {
|
|
||||||
this.loadTeams();
|
|
||||||
}
|
}
|
||||||
}
|
);
|
||||||
|
|
||||||
handleSelectAll(isSelected) {
|
useEffect(() => {
|
||||||
const { teams } = this.state;
|
fetchTeams();
|
||||||
|
}, [fetchTeams]);
|
||||||
|
|
||||||
const selected = isSelected ? [...teams] : [];
|
const isAllSelected = selected.length === teams.length && selected.length > 0;
|
||||||
this.setState({ selected });
|
const {
|
||||||
}
|
isLoading: isDeleteLoading,
|
||||||
|
deleteItems: deleteTeams,
|
||||||
|
deletionError,
|
||||||
|
clearDeletionError,
|
||||||
|
} = useDeleteItems(
|
||||||
|
useCallback(async () => {
|
||||||
|
return Promise.all(selected.map(team => TeamsAPI.destroy(team.id)));
|
||||||
|
}, [selected]),
|
||||||
|
{
|
||||||
|
qsConfig: QS_CONFIG,
|
||||||
|
allItemsSelected: isAllSelected,
|
||||||
|
fetchItems: fetchTeams,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
handleSelect(row) {
|
const handleTeamDelete = async () => {
|
||||||
const { selected } = this.state;
|
await deleteTeams();
|
||||||
|
setSelected([]);
|
||||||
|
};
|
||||||
|
|
||||||
|
const hasContentLoading = isDeleteLoading || isLoading;
|
||||||
|
const canAdd = actions && actions.POST;
|
||||||
|
|
||||||
|
const handleSelectAll = isSelected => {
|
||||||
|
setSelected(isSelected ? [...teams] : []);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSelect = row => {
|
||||||
if (selected.some(s => s.id === row.id)) {
|
if (selected.some(s => s.id === row.id)) {
|
||||||
this.setState({ selected: selected.filter(s => s.id !== row.id) });
|
setSelected(selected.filter(s => s.id !== row.id));
|
||||||
} else {
|
} else {
|
||||||
this.setState({ selected: selected.concat(row) });
|
setSelected(selected.concat(row));
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
handleDeleteErrorClose() {
|
return (
|
||||||
this.setState({ deletionError: null });
|
<Fragment>
|
||||||
}
|
<PageSection>
|
||||||
|
<Card>
|
||||||
async handleTeamDelete() {
|
<PaginatedDataList
|
||||||
const { selected } = this.state;
|
contentError={contentError}
|
||||||
|
hasContentLoading={hasContentLoading}
|
||||||
this.setState({ hasContentLoading: true });
|
items={teams}
|
||||||
try {
|
itemCount={itemCount}
|
||||||
await Promise.all(selected.map(team => TeamsAPI.destroy(team.id)));
|
pluralizedItemName={i18n._(t`Teams`)}
|
||||||
} catch (err) {
|
qsConfig={QS_CONFIG}
|
||||||
this.setState({ deletionError: err });
|
onRowClick={handleSelect}
|
||||||
} finally {
|
toolbarSearchColumns={[
|
||||||
await this.loadTeams();
|
{
|
||||||
}
|
name: i18n._(t`Name`),
|
||||||
}
|
key: 'name',
|
||||||
|
isDefault: true,
|
||||||
async loadTeams() {
|
},
|
||||||
const { location } = this.props;
|
{
|
||||||
const { actions: cachedActions } = this.state;
|
name: i18n._(t`Organization Name`),
|
||||||
const params = parseQueryString(QS_CONFIG, location.search);
|
key: 'organization__name',
|
||||||
|
},
|
||||||
let optionsPromise;
|
{
|
||||||
if (cachedActions) {
|
name: i18n._(t`Created By (Username)`),
|
||||||
optionsPromise = Promise.resolve({ data: { actions: cachedActions } });
|
key: 'created_by__username',
|
||||||
} else {
|
},
|
||||||
optionsPromise = TeamsAPI.readOptions();
|
{
|
||||||
}
|
name: i18n._(t`Modified By (Username)`),
|
||||||
|
key: 'modified_by__username',
|
||||||
const promises = Promise.all([TeamsAPI.read(params), optionsPromise]);
|
},
|
||||||
|
]}
|
||||||
this.setState({ contentError: null, hasContentLoading: true });
|
toolbarSortColumns={[
|
||||||
try {
|
{
|
||||||
const [
|
name: i18n._(t`Name`),
|
||||||
{
|
key: 'name',
|
||||||
data: { count, results },
|
},
|
||||||
},
|
]}
|
||||||
{
|
renderToolbar={props => (
|
||||||
data: { actions },
|
<DataListToolbar
|
||||||
},
|
{...props}
|
||||||
] = await promises;
|
showSelectAll
|
||||||
this.setState({
|
isAllSelected={isAllSelected}
|
||||||
actions,
|
onSelectAll={handleSelectAll}
|
||||||
itemCount: count,
|
qsConfig={QS_CONFIG}
|
||||||
teams: results,
|
additionalControls={[
|
||||||
selected: [],
|
...(canAdd
|
||||||
});
|
? [
|
||||||
} catch (err) {
|
<ToolbarAddButton
|
||||||
this.setState({ contentError: err });
|
key="add"
|
||||||
} finally {
|
linkTo={`${match.url}/add`}
|
||||||
this.setState({ hasContentLoading: false });
|
/>,
|
||||||
}
|
]
|
||||||
}
|
: []),
|
||||||
|
<ToolbarDeleteButton
|
||||||
render() {
|
key="delete"
|
||||||
const {
|
onDelete={handleTeamDelete}
|
||||||
actions,
|
itemsToDelete={selected}
|
||||||
itemCount,
|
pluralizedItemName={i18n._(t`Teams`)}
|
||||||
contentError,
|
/>,
|
||||||
hasContentLoading,
|
]}
|
||||||
deletionError,
|
/>
|
||||||
selected,
|
)}
|
||||||
teams,
|
renderItem={o => (
|
||||||
} = this.state;
|
<TeamListItem
|
||||||
const { match, i18n } = this.props;
|
key={o.id}
|
||||||
|
team={o}
|
||||||
const canAdd =
|
detailUrl={`${match.url}/${o.id}`}
|
||||||
actions && Object.prototype.hasOwnProperty.call(actions, 'POST');
|
isSelected={selected.some(row => row.id === o.id)}
|
||||||
const isAllSelected =
|
onSelect={() => handleSelect(o)}
|
||||||
selected.length > 0 && selected.length === teams.length;
|
/>
|
||||||
|
)}
|
||||||
return (
|
emptyStateControls={
|
||||||
<Fragment>
|
canAdd ? (
|
||||||
<PageSection>
|
<ToolbarAddButton key="add" linkTo={`${match.url}/add`} />
|
||||||
<Card>
|
) : null
|
||||||
<PaginatedDataList
|
}
|
||||||
contentError={contentError}
|
/>
|
||||||
hasContentLoading={hasContentLoading}
|
</Card>
|
||||||
items={teams}
|
</PageSection>
|
||||||
itemCount={itemCount}
|
<AlertModal
|
||||||
pluralizedItemName={i18n._(t`Teams`)}
|
isOpen={deletionError}
|
||||||
qsConfig={QS_CONFIG}
|
variant="error"
|
||||||
onRowClick={this.handleSelect}
|
title={i18n._(t`Error!`)}
|
||||||
toolbarSearchColumns={[
|
onClose={clearDeletionError}
|
||||||
{
|
>
|
||||||
name: i18n._(t`Name`),
|
{i18n._(t`Failed to delete one or more teams.`)}
|
||||||
key: 'name',
|
<ErrorDetail error={deletionError} />
|
||||||
isDefault: true,
|
</AlertModal>
|
||||||
},
|
</Fragment>
|
||||||
{
|
);
|
||||||
name: i18n._(t`Organization Name`),
|
|
||||||
key: 'organization__name',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: i18n._(t`Created By (Username)`),
|
|
||||||
key: 'created_by__username',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: i18n._(t`Modified By (Username)`),
|
|
||||||
key: 'modified_by__username',
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
toolbarSortColumns={[
|
|
||||||
{
|
|
||||||
name: i18n._(t`Name`),
|
|
||||||
key: 'name',
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
renderToolbar={props => (
|
|
||||||
<DataListToolbar
|
|
||||||
{...props}
|
|
||||||
showSelectAll
|
|
||||||
isAllSelected={isAllSelected}
|
|
||||||
onSelectAll={this.handleSelectAll}
|
|
||||||
qsConfig={QS_CONFIG}
|
|
||||||
additionalControls={[
|
|
||||||
...(canAdd
|
|
||||||
? [
|
|
||||||
<ToolbarAddButton
|
|
||||||
key="add"
|
|
||||||
linkTo={`${match.url}/add`}
|
|
||||||
/>,
|
|
||||||
]
|
|
||||||
: []),
|
|
||||||
<ToolbarDeleteButton
|
|
||||||
key="delete"
|
|
||||||
onDelete={this.handleTeamDelete}
|
|
||||||
itemsToDelete={selected}
|
|
||||||
pluralizedItemName={i18n._(t`Teams`)}
|
|
||||||
/>,
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
renderItem={o => (
|
|
||||||
<TeamListItem
|
|
||||||
key={o.id}
|
|
||||||
team={o}
|
|
||||||
detailUrl={`${match.url}/${o.id}`}
|
|
||||||
isSelected={selected.some(row => row.id === o.id)}
|
|
||||||
onSelect={() => this.handleSelect(o)}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
emptyStateControls={
|
|
||||||
canAdd ? (
|
|
||||||
<ToolbarAddButton key="add" linkTo={`${match.url}/add`} />
|
|
||||||
) : null
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</Card>
|
|
||||||
</PageSection>
|
|
||||||
<AlertModal
|
|
||||||
isOpen={deletionError}
|
|
||||||
variant="error"
|
|
||||||
title={i18n._(t`Error!`)}
|
|
||||||
onClose={this.handleDeleteErrorClose}
|
|
||||||
>
|
|
||||||
{i18n._(t`Failed to delete one or more teams.`)}
|
|
||||||
<ErrorDetail error={deletionError} />
|
|
||||||
</AlertModal>
|
|
||||||
</Fragment>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export { TeamsList as _TeamsList };
|
export default withI18n()(TeamList);
|
||||||
export default withI18n()(withRouter(TeamsList));
|
|
||||||
|
|||||||
@@ -1,12 +1,13 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import { act } from 'react-dom/test-utils';
|
||||||
import { TeamsAPI } from '@api';
|
import { TeamsAPI } from '@api';
|
||||||
import { mountWithContexts, waitForElement } from '@testUtils/enzymeHelpers';
|
import { mountWithContexts } from '@testUtils/enzymeHelpers';
|
||||||
|
|
||||||
import TeamsList, { _TeamsList } from './TeamList';
|
import TeamList from './TeamList';
|
||||||
|
|
||||||
jest.mock('@api');
|
jest.mock('@api');
|
||||||
|
|
||||||
const mockAPITeamsList = {
|
const mockAPITeamList = {
|
||||||
data: {
|
data: {
|
||||||
count: 3,
|
count: 3,
|
||||||
results: [
|
results: [
|
||||||
@@ -50,15 +51,14 @@ const mockAPITeamsList = {
|
|||||||
warningMsg: 'message',
|
warningMsg: 'message',
|
||||||
};
|
};
|
||||||
|
|
||||||
describe('<TeamsList />', () => {
|
describe('<TeamList />', () => {
|
||||||
let wrapper;
|
|
||||||
|
|
||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
TeamsAPI.read = () =>
|
TeamsAPI.read = jest.fn(() =>
|
||||||
Promise.resolve({
|
Promise.resolve({
|
||||||
data: mockAPITeamsList.data,
|
data: mockAPITeamList.data,
|
||||||
});
|
})
|
||||||
TeamsAPI.readOptions = () =>
|
);
|
||||||
|
TeamsAPI.readOptions = jest.fn(() =>
|
||||||
Promise.resolve({
|
Promise.resolve({
|
||||||
data: {
|
data: {
|
||||||
actions: {
|
actions: {
|
||||||
@@ -66,105 +66,119 @@ describe('<TeamsList />', () => {
|
|||||||
POST: {},
|
POST: {},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
});
|
})
|
||||||
});
|
|
||||||
|
|
||||||
test('initially renders succesfully', () => {
|
|
||||||
mountWithContexts(<TeamsList />);
|
|
||||||
});
|
|
||||||
|
|
||||||
test('Selects one team when row is checked', async () => {
|
|
||||||
wrapper = mountWithContexts(<TeamsList />);
|
|
||||||
await waitForElement(
|
|
||||||
wrapper,
|
|
||||||
'TeamsList',
|
|
||||||
el => el.state('hasContentLoading') === false
|
|
||||||
);
|
);
|
||||||
expect(
|
|
||||||
wrapper
|
|
||||||
.find('input[type="checkbox"]')
|
|
||||||
.findWhere(n => n.prop('checked') === true).length
|
|
||||||
).toBe(0);
|
|
||||||
wrapper
|
|
||||||
.find('TeamListItem')
|
|
||||||
.at(0)
|
|
||||||
.find('DataListCheck')
|
|
||||||
.props()
|
|
||||||
.onChange(true);
|
|
||||||
wrapper.update();
|
|
||||||
expect(
|
|
||||||
wrapper
|
|
||||||
.find('input[type="checkbox"]')
|
|
||||||
.findWhere(n => n.prop('checked') === true).length
|
|
||||||
).toBe(1);
|
|
||||||
});
|
});
|
||||||
|
|
||||||
test('Select all checkbox selects and unselects all rows', async () => {
|
test('should load and render teams', async () => {
|
||||||
wrapper = mountWithContexts(<TeamsList />);
|
let wrapper;
|
||||||
await waitForElement(
|
await act(async () => {
|
||||||
wrapper,
|
wrapper = mountWithContexts(<TeamList />);
|
||||||
'TeamsList',
|
|
||||||
el => el.state('hasContentLoading') === false
|
|
||||||
);
|
|
||||||
expect(
|
|
||||||
wrapper
|
|
||||||
.find('input[type="checkbox"]')
|
|
||||||
.findWhere(n => n.prop('checked') === true).length
|
|
||||||
).toBe(0);
|
|
||||||
wrapper
|
|
||||||
.find('Checkbox#select-all')
|
|
||||||
.props()
|
|
||||||
.onChange(true);
|
|
||||||
wrapper.update();
|
|
||||||
expect(
|
|
||||||
wrapper
|
|
||||||
.find('input[type="checkbox"]')
|
|
||||||
.findWhere(n => n.prop('checked') === true).length
|
|
||||||
).toBe(4);
|
|
||||||
wrapper
|
|
||||||
.find('Checkbox#select-all')
|
|
||||||
.props()
|
|
||||||
.onChange(false);
|
|
||||||
wrapper.update();
|
|
||||||
expect(
|
|
||||||
wrapper
|
|
||||||
.find('input[type="checkbox"]')
|
|
||||||
.findWhere(n => n.prop('checked') === true).length
|
|
||||||
).toBe(0);
|
|
||||||
});
|
|
||||||
|
|
||||||
test('api is called to delete Teams for each team in selected.', () => {
|
|
||||||
wrapper = mountWithContexts(<TeamsList />);
|
|
||||||
const component = wrapper.find('TeamsList');
|
|
||||||
wrapper.find('TeamsList').setState({
|
|
||||||
teams: mockAPITeamsList.data.results,
|
|
||||||
itemCount: 3,
|
|
||||||
isInitialized: true,
|
|
||||||
isModalOpen: mockAPITeamsList.isModalOpen,
|
|
||||||
selected: mockAPITeamsList.data.results,
|
|
||||||
});
|
});
|
||||||
wrapper.find('ToolbarDeleteButton').prop('onDelete')();
|
wrapper.update();
|
||||||
expect(TeamsAPI.destroy).toHaveBeenCalledTimes(
|
|
||||||
component.state('selected').length
|
expect(wrapper.find('TeamListItem')).toHaveLength(3);
|
||||||
);
|
|
||||||
});
|
});
|
||||||
|
|
||||||
test('call loadTeams after team(s) have been deleted', () => {
|
test('should select team when checked', async () => {
|
||||||
const fetchTeams = jest.spyOn(_TeamsList.prototype, 'loadTeams');
|
let wrapper;
|
||||||
const event = { preventDefault: () => {} };
|
await act(async () => {
|
||||||
wrapper = mountWithContexts(<TeamsList />);
|
wrapper = mountWithContexts(<TeamList />);
|
||||||
wrapper.find('TeamsList').setState({
|
|
||||||
teams: mockAPITeamsList.data.results,
|
|
||||||
itemCount: 3,
|
|
||||||
isInitialized: true,
|
|
||||||
selected: mockAPITeamsList.data.results.slice(0, 1),
|
|
||||||
});
|
});
|
||||||
const component = wrapper.find('TeamsList');
|
wrapper.update();
|
||||||
component.instance().handleTeamDelete(event);
|
|
||||||
expect(fetchTeams).toBeCalled();
|
await act(async () => {
|
||||||
|
wrapper
|
||||||
|
.find('TeamListItem')
|
||||||
|
.first()
|
||||||
|
.invoke('onSelect')();
|
||||||
|
});
|
||||||
|
wrapper.update();
|
||||||
|
|
||||||
|
expect(
|
||||||
|
wrapper
|
||||||
|
.find('TeamListItem')
|
||||||
|
.first()
|
||||||
|
.prop('isSelected')
|
||||||
|
).toEqual(true);
|
||||||
});
|
});
|
||||||
|
|
||||||
test('error is shown when team not successfully deleted from api', async done => {
|
test('should select all', async () => {
|
||||||
|
let wrapper;
|
||||||
|
await act(async () => {
|
||||||
|
wrapper = mountWithContexts(<TeamList />);
|
||||||
|
});
|
||||||
|
wrapper.update();
|
||||||
|
|
||||||
|
await act(async () => {
|
||||||
|
wrapper.find('DataListToolbar').invoke('onSelectAll')(true);
|
||||||
|
});
|
||||||
|
wrapper.update();
|
||||||
|
|
||||||
|
const items = wrapper.find('TeamListItem');
|
||||||
|
expect(items).toHaveLength(3);
|
||||||
|
items.forEach(item => {
|
||||||
|
expect(item.prop('isSelected')).toEqual(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(
|
||||||
|
wrapper
|
||||||
|
.find('TeamListItem')
|
||||||
|
.first()
|
||||||
|
.prop('isSelected')
|
||||||
|
).toEqual(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should call delete api', async () => {
|
||||||
|
let wrapper;
|
||||||
|
await act(async () => {
|
||||||
|
wrapper = mountWithContexts(<TeamList />);
|
||||||
|
});
|
||||||
|
wrapper.update();
|
||||||
|
|
||||||
|
await act(async () => {
|
||||||
|
wrapper
|
||||||
|
.find('TeamListItem')
|
||||||
|
.at(0)
|
||||||
|
.invoke('onSelect')();
|
||||||
|
});
|
||||||
|
wrapper.update();
|
||||||
|
await act(async () => {
|
||||||
|
wrapper
|
||||||
|
.find('TeamListItem')
|
||||||
|
.at(1)
|
||||||
|
.invoke('onSelect')();
|
||||||
|
});
|
||||||
|
wrapper.update();
|
||||||
|
await act(async () => {
|
||||||
|
wrapper.find('ToolbarDeleteButton').invoke('onDelete')();
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(TeamsAPI.destroy).toHaveBeenCalledTimes(2);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should re-fetch teams after team(s) have been deleted', async () => {
|
||||||
|
let wrapper;
|
||||||
|
await act(async () => {
|
||||||
|
wrapper = mountWithContexts(<TeamList />);
|
||||||
|
});
|
||||||
|
wrapper.update();
|
||||||
|
expect(TeamsAPI.read).toHaveBeenCalledTimes(1);
|
||||||
|
await act(async () => {
|
||||||
|
wrapper
|
||||||
|
.find('TeamListItem')
|
||||||
|
.at(0)
|
||||||
|
.invoke('onSelect')();
|
||||||
|
});
|
||||||
|
wrapper.update();
|
||||||
|
await act(async () => {
|
||||||
|
wrapper.find('ToolbarDeleteButton').invoke('onDelete')();
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(TeamsAPI.read).toHaveBeenCalledTimes(2);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should show deletion error', async () => {
|
||||||
TeamsAPI.destroy.mockRejectedValue(
|
TeamsAPI.destroy.mockRejectedValue(
|
||||||
new Error({
|
new Error({
|
||||||
response: {
|
response: {
|
||||||
@@ -176,40 +190,41 @@ describe('<TeamsList />', () => {
|
|||||||
},
|
},
|
||||||
})
|
})
|
||||||
);
|
);
|
||||||
|
let wrapper;
|
||||||
wrapper = mountWithContexts(<TeamsList />);
|
await act(async () => {
|
||||||
wrapper.find('TeamsList').setState({
|
wrapper = mountWithContexts(<TeamList />);
|
||||||
teams: mockAPITeamsList.data.results,
|
|
||||||
itemCount: 3,
|
|
||||||
isInitialized: true,
|
|
||||||
selected: mockAPITeamsList.data.results.slice(0, 1),
|
|
||||||
});
|
});
|
||||||
wrapper.find('ToolbarDeleteButton').prop('onDelete')();
|
wrapper.update();
|
||||||
await waitForElement(
|
expect(TeamsAPI.read).toHaveBeenCalledTimes(1);
|
||||||
wrapper,
|
await act(async () => {
|
||||||
'Modal',
|
wrapper
|
||||||
el => el.props().isOpen === true && el.props().title === 'Error!'
|
.find('TeamListItem')
|
||||||
);
|
.at(0)
|
||||||
done();
|
.invoke('onSelect')();
|
||||||
|
});
|
||||||
|
wrapper.update();
|
||||||
|
|
||||||
|
await act(async () => {
|
||||||
|
wrapper.find('ToolbarDeleteButton').invoke('onDelete')();
|
||||||
|
});
|
||||||
|
wrapper.update();
|
||||||
|
|
||||||
|
const modal = wrapper.find('Modal');
|
||||||
|
expect(modal).toHaveLength(1);
|
||||||
|
expect(modal.prop('title')).toEqual('Error!');
|
||||||
});
|
});
|
||||||
|
|
||||||
test('Add button shown for users without ability to POST', async done => {
|
test('Add button shown for users without ability to POST', async () => {
|
||||||
wrapper = mountWithContexts(<TeamsList />);
|
let wrapper;
|
||||||
await waitForElement(
|
await act(async () => {
|
||||||
wrapper,
|
wrapper = mountWithContexts(<TeamList />);
|
||||||
'TeamsList',
|
});
|
||||||
el => el.state('hasContentLoading') === true
|
wrapper.update();
|
||||||
);
|
|
||||||
await waitForElement(
|
|
||||||
wrapper,
|
|
||||||
'TeamsList',
|
|
||||||
el => el.state('hasContentLoading') === false
|
|
||||||
);
|
|
||||||
expect(wrapper.find('ToolbarAddButton').length).toBe(1);
|
expect(wrapper.find('ToolbarAddButton').length).toBe(1);
|
||||||
done();
|
|
||||||
});
|
});
|
||||||
|
|
||||||
test('Add button hidden for users without ability to POST', async done => {
|
test('Add button hidden for users without ability to POST', async () => {
|
||||||
TeamsAPI.readOptions = () =>
|
TeamsAPI.readOptions = () =>
|
||||||
Promise.resolve({
|
Promise.resolve({
|
||||||
data: {
|
data: {
|
||||||
@@ -218,18 +233,12 @@ describe('<TeamsList />', () => {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
wrapper = mountWithContexts(<TeamsList />);
|
let wrapper;
|
||||||
await waitForElement(
|
await act(async () => {
|
||||||
wrapper,
|
wrapper = mountWithContexts(<TeamList />);
|
||||||
'TeamsList',
|
});
|
||||||
el => el.state('hasContentLoading') === true
|
wrapper.update();
|
||||||
);
|
|
||||||
await waitForElement(
|
|
||||||
wrapper,
|
|
||||||
'TeamsList',
|
|
||||||
el => el.state('hasContentLoading') === false
|
|
||||||
);
|
|
||||||
expect(wrapper.find('ToolbarAddButton').length).toBe(0);
|
expect(wrapper.find('ToolbarAddButton').length).toBe(0);
|
||||||
done();
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user