mirror of
https://github.com/ansible/awx.git
synced 2026-01-13 02:50:02 -03:30
Merge pull request #6035 from keithjgrant/lists-to-hooks
Refactor remaining lists to hooks Reviewed-by: https://github.com/apps/softwarefactory-project-zuul
This commit is contained in:
softwarefactory-project-zuul[bot]
GitHub
commit
a2b169626a
@ -1,11 +1,12 @@
|
||||
import React, { Component } from 'react';
|
||||
import { withRouter } from 'react-router-dom';
|
||||
import React, { useState, useCallback, useEffect } from 'react';
|
||||
import { useLocation, useRouteMatch } from 'react-router-dom';
|
||||
import { withI18n } from '@lingui/react';
|
||||
|
||||
import { t } from '@lingui/macro';
|
||||
import { Card, PageSection } from '@patternfly/react-core';
|
||||
|
||||
import { InventoriesAPI } from '@api';
|
||||
import useRequest, { useDeleteItems } from '@util/useRequest';
|
||||
import AlertModal from '@components/AlertModal';
|
||||
import DatalistToolbar from '@components/DataListToolbar';
|
||||
import ErrorDetail from '@components/ErrorDetail';
|
||||
@ -23,225 +24,172 @@ const QS_CONFIG = getQSConfig('inventory', {
|
||||
order_by: 'name',
|
||||
});
|
||||
|
||||
class InventoriesList extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
function InventoryList({ i18n }) {
|
||||
const location = useLocation();
|
||||
const match = useRouteMatch();
|
||||
const [selected, setSelected] = useState([]);
|
||||
|
||||
this.state = {
|
||||
hasContentLoading: true,
|
||||
contentError: null,
|
||||
deletionError: null,
|
||||
selected: [],
|
||||
const {
|
||||
result: { inventories, itemCount, actions },
|
||||
error: contentError,
|
||||
isLoading,
|
||||
request: fetchInventories,
|
||||
} = useRequest(
|
||||
useCallback(async () => {
|
||||
const params = parseQueryString(QS_CONFIG, location.search);
|
||||
const [response, actionsResponse] = await Promise.all([
|
||||
InventoriesAPI.read(params),
|
||||
InventoriesAPI.readOptions(),
|
||||
]);
|
||||
return {
|
||||
inventories: response.data.results,
|
||||
itemCount: response.data.count,
|
||||
actions: actionsResponse.data.actions,
|
||||
};
|
||||
}, [location]),
|
||||
{
|
||||
inventories: [],
|
||||
itemCount: 0,
|
||||
};
|
||||
|
||||
this.loadInventories = this.loadInventories.bind(this);
|
||||
this.handleSelectAll = this.handleSelectAll.bind(this);
|
||||
this.handleSelect = this.handleSelect.bind(this);
|
||||
this.handleInventoryDelete = this.handleInventoryDelete.bind(this);
|
||||
this.handleDeleteErrorClose = this.handleDeleteErrorClose.bind(this);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.loadInventories();
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
const { location } = this.props;
|
||||
|
||||
if (location !== prevProps.location) {
|
||||
this.loadInventories();
|
||||
actions: {},
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
handleDeleteErrorClose() {
|
||||
this.setState({ deletionError: null });
|
||||
}
|
||||
useEffect(() => {
|
||||
fetchInventories();
|
||||
}, [fetchInventories]);
|
||||
|
||||
handleSelectAll(isSelected) {
|
||||
const { inventories } = this.state;
|
||||
const selected = isSelected ? [...inventories] : [];
|
||||
this.setState({ selected });
|
||||
}
|
||||
const isAllSelected =
|
||||
selected.length === inventories.length && selected.length > 0;
|
||||
const {
|
||||
isLoading: isDeleteLoading,
|
||||
deleteItems: deleteTeams,
|
||||
deletionError,
|
||||
clearDeletionError,
|
||||
} = useDeleteItems(
|
||||
useCallback(async () => {
|
||||
return Promise.all(selected.map(team => InventoriesAPI.destroy(team.id)));
|
||||
}, [selected]),
|
||||
{
|
||||
qsConfig: QS_CONFIG,
|
||||
allItemsSelected: isAllSelected,
|
||||
fetchItems: fetchInventories,
|
||||
}
|
||||
);
|
||||
|
||||
handleSelect(inventory) {
|
||||
const { selected } = this.state;
|
||||
if (selected.some(s => s.id === inventory.id)) {
|
||||
this.setState({ selected: selected.filter(s => s.id !== inventory.id) });
|
||||
const handleInventoryDelete = async () => {
|
||||
await deleteTeams();
|
||||
setSelected([]);
|
||||
};
|
||||
|
||||
const hasContentLoading = isDeleteLoading || isLoading;
|
||||
const canAdd = actions && actions.POST;
|
||||
|
||||
const handleSelectAll = isSelected => {
|
||||
setSelected(isSelected ? [...inventories] : []);
|
||||
};
|
||||
|
||||
const handleSelect = row => {
|
||||
if (selected.some(s => s.id === row.id)) {
|
||||
setSelected(selected.filter(s => s.id !== row.id));
|
||||
} else {
|
||||
this.setState({ selected: selected.concat(inventory) });
|
||||
setSelected(selected.concat(row));
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
async handleInventoryDelete() {
|
||||
const { selected, itemCount } = this.state;
|
||||
|
||||
this.setState({ hasContentLoading: true });
|
||||
try {
|
||||
await Promise.all(
|
||||
selected.map(({ id }) => {
|
||||
return InventoriesAPI.destroy(id);
|
||||
})
|
||||
);
|
||||
this.setState({ itemCount: itemCount - selected.length });
|
||||
} catch (err) {
|
||||
this.setState({ deletionError: err });
|
||||
} finally {
|
||||
await this.loadInventories();
|
||||
}
|
||||
}
|
||||
|
||||
async loadInventories() {
|
||||
const { location } = this.props;
|
||||
const { actions: cachedActions } = this.state;
|
||||
const params = parseQueryString(QS_CONFIG, location.search);
|
||||
|
||||
let optionsPromise;
|
||||
if (cachedActions) {
|
||||
optionsPromise = Promise.resolve({ data: { actions: cachedActions } });
|
||||
} else {
|
||||
optionsPromise = InventoriesAPI.readOptions();
|
||||
}
|
||||
|
||||
const promises = Promise.all([InventoriesAPI.read(params), optionsPromise]);
|
||||
|
||||
this.setState({ contentError: null, hasContentLoading: true });
|
||||
|
||||
try {
|
||||
const [
|
||||
const addButton = (
|
||||
<AddDropDownButton
|
||||
key="add"
|
||||
dropdownItems={[
|
||||
{
|
||||
data: { count, results },
|
||||
label: i18n._(t`Inventory`),
|
||||
url: `${match.url}/inventory/add/`,
|
||||
},
|
||||
{
|
||||
data: { actions },
|
||||
label: i18n._(t`Smart Inventory`),
|
||||
url: `${match.url}/smart_inventory/add/`,
|
||||
},
|
||||
] = await promises;
|
||||
|
||||
this.setState({
|
||||
actions,
|
||||
itemCount: count,
|
||||
inventories: results,
|
||||
selected: [],
|
||||
});
|
||||
} catch (err) {
|
||||
this.setState({ contentError: err });
|
||||
} finally {
|
||||
this.setState({ hasContentLoading: false });
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
contentError,
|
||||
hasContentLoading,
|
||||
deletionError,
|
||||
inventories,
|
||||
itemCount,
|
||||
selected,
|
||||
actions,
|
||||
} = this.state;
|
||||
const { match, i18n } = this.props;
|
||||
const canAdd =
|
||||
actions && Object.prototype.hasOwnProperty.call(actions, 'POST');
|
||||
const isAllSelected =
|
||||
selected.length === inventories.length && selected.length !== 0;
|
||||
const addButton = (
|
||||
<AddDropDownButton
|
||||
key="add"
|
||||
dropdownItems={[
|
||||
{
|
||||
label: i18n._(t`Inventory`),
|
||||
url: `${match.url}/inventory/add/`,
|
||||
},
|
||||
{
|
||||
label: i18n._(t`Smart Inventory`),
|
||||
url: `${match.url}/smart_inventory/add/`,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
);
|
||||
return (
|
||||
<PageSection>
|
||||
<Card>
|
||||
<PaginatedDataList
|
||||
contentError={contentError}
|
||||
hasContentLoading={hasContentLoading}
|
||||
items={inventories}
|
||||
itemCount={itemCount}
|
||||
pluralizedItemName={i18n._(t`Inventories`)}
|
||||
qsConfig={QS_CONFIG}
|
||||
onRowClick={this.handleSelect}
|
||||
toolbarSearchColumns={[
|
||||
{
|
||||
name: i18n._(t`Name`),
|
||||
key: 'name',
|
||||
isDefault: true,
|
||||
},
|
||||
{
|
||||
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
|
||||
showExpandCollapse
|
||||
isAllSelected={isAllSelected}
|
||||
onSelectAll={this.handleSelectAll}
|
||||
qsConfig={QS_CONFIG}
|
||||
additionalControls={[
|
||||
...(canAdd ? [addButton] : []),
|
||||
<ToolbarDeleteButton
|
||||
key="delete"
|
||||
onDelete={this.handleInventoryDelete}
|
||||
itemsToDelete={selected}
|
||||
pluralizedItemName="Inventories"
|
||||
/>,
|
||||
]}
|
||||
/>
|
||||
)}
|
||||
renderItem={inventory => (
|
||||
<InventoryListItem
|
||||
key={inventory.id}
|
||||
value={inventory.name}
|
||||
inventory={inventory}
|
||||
detailUrl={
|
||||
inventory.kind === 'smart'
|
||||
? `${match.url}/smart_inventory/${inventory.id}/details`
|
||||
: `${match.url}/inventory/${inventory.id}/details`
|
||||
}
|
||||
onSelect={() => this.handleSelect(inventory)}
|
||||
isSelected={selected.some(row => row.id === inventory.id)}
|
||||
/>
|
||||
)}
|
||||
emptyStateControls={canAdd && addButton}
|
||||
/>
|
||||
</Card>
|
||||
<AlertModal
|
||||
isOpen={deletionError}
|
||||
variant="error"
|
||||
title={i18n._(t`Error!`)}
|
||||
onClose={this.handleDeleteErrorClose}
|
||||
>
|
||||
{i18n._(t`Failed to delete one or more inventories.`)}
|
||||
<ErrorDetail error={deletionError} />
|
||||
</AlertModal>
|
||||
</PageSection>
|
||||
);
|
||||
}
|
||||
]}
|
||||
/>
|
||||
);
|
||||
return (
|
||||
<PageSection>
|
||||
<Card>
|
||||
<PaginatedDataList
|
||||
contentError={contentError}
|
||||
hasContentLoading={hasContentLoading}
|
||||
items={inventories}
|
||||
itemCount={itemCount}
|
||||
pluralizedItemName={i18n._(t`Inventories`)}
|
||||
qsConfig={QS_CONFIG}
|
||||
onRowClick={handleSelect}
|
||||
toolbarSearchColumns={[
|
||||
{
|
||||
name: i18n._(t`Name`),
|
||||
key: 'name',
|
||||
isDefault: true,
|
||||
},
|
||||
{
|
||||
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
|
||||
showExpandCollapse
|
||||
isAllSelected={isAllSelected}
|
||||
onSelectAll={handleSelectAll}
|
||||
qsConfig={QS_CONFIG}
|
||||
additionalControls={[
|
||||
...(canAdd ? [addButton] : []),
|
||||
<ToolbarDeleteButton
|
||||
key="delete"
|
||||
onDelete={handleInventoryDelete}
|
||||
itemsToDelete={selected}
|
||||
pluralizedItemName={i18n._(t`Inventories`)}
|
||||
/>,
|
||||
]}
|
||||
/>
|
||||
)}
|
||||
renderItem={inventory => (
|
||||
<InventoryListItem
|
||||
key={inventory.id}
|
||||
value={inventory.name}
|
||||
inventory={inventory}
|
||||
detailUrl={
|
||||
inventory.kind === 'smart'
|
||||
? `${match.url}/smart_inventory/${inventory.id}/details`
|
||||
: `${match.url}/inventory/${inventory.id}/details`
|
||||
}
|
||||
onSelect={() => handleSelect(inventory)}
|
||||
isSelected={selected.some(row => row.id === inventory.id)}
|
||||
/>
|
||||
)}
|
||||
emptyStateControls={canAdd && addButton}
|
||||
/>
|
||||
</Card>
|
||||
<AlertModal
|
||||
isOpen={deletionError}
|
||||
variant="error"
|
||||
title={i18n._(t`Error!`)}
|
||||
onClose={clearDeletionError}
|
||||
>
|
||||
{i18n._(t`Failed to delete one or more inventories.`)}
|
||||
<ErrorDetail error={deletionError} />
|
||||
</AlertModal>
|
||||
</PageSection>
|
||||
);
|
||||
}
|
||||
|
||||
export { InventoriesList as _InventoriesList };
|
||||
export default withI18n()(withRouter(InventoriesList));
|
||||
export default withI18n()(InventoryList);
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
import React from 'react';
|
||||
import { act } from 'react-dom/test-utils';
|
||||
import { InventoriesAPI } from '@api';
|
||||
import { mountWithContexts, waitForElement } from '@testUtils/enzymeHelpers';
|
||||
import { mountWithContexts } from '@testUtils/enzymeHelpers';
|
||||
|
||||
import InventoriesList, { _InventoriesList } from './InventoryList';
|
||||
import InventoryList from './InventoryList';
|
||||
|
||||
jest.mock('@api');
|
||||
|
||||
@ -117,7 +118,7 @@ const mockInventories = [
|
||||
},
|
||||
];
|
||||
|
||||
describe('<InventoriesList />', () => {
|
||||
describe('<InventoryList />', () => {
|
||||
beforeEach(() => {
|
||||
InventoriesAPI.read.mockResolvedValue({
|
||||
data: {
|
||||
@ -140,186 +141,174 @@ describe('<InventoriesList />', () => {
|
||||
jest.clearAllMocks();
|
||||
});
|
||||
|
||||
test('initially renders successfully', () => {
|
||||
mountWithContexts(
|
||||
<InventoriesList
|
||||
match={{ path: '/inventories', url: '/inventories' }}
|
||||
location={{ search: '', pathname: '/inventories' }}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
test('Inventories are retrieved from the api and the components finishes loading', async done => {
|
||||
const loadInventories = jest.spyOn(
|
||||
_InventoriesList.prototype,
|
||||
'loadInventories'
|
||||
);
|
||||
const wrapper = mountWithContexts(<InventoriesList />);
|
||||
await waitForElement(
|
||||
wrapper,
|
||||
'InventoriesList',
|
||||
el => el.state('hasContentLoading') === true
|
||||
);
|
||||
expect(loadInventories).toHaveBeenCalled();
|
||||
await waitForElement(
|
||||
wrapper,
|
||||
'InventoriesList',
|
||||
el => el.state('hasContentLoading') === false
|
||||
);
|
||||
expect(wrapper.find('InventoryListItem').length).toBe(3);
|
||||
done();
|
||||
});
|
||||
|
||||
test('handleSelect is called when a inventory list item is selected', async done => {
|
||||
const handleSelect = jest.spyOn(_InventoriesList.prototype, 'handleSelect');
|
||||
const wrapper = mountWithContexts(<InventoriesList />);
|
||||
await waitForElement(
|
||||
wrapper,
|
||||
'InventoriesList',
|
||||
el => el.state('hasContentLoading') === false
|
||||
);
|
||||
await wrapper
|
||||
.find('input#select-inventory-1')
|
||||
.closest('DataListCheck')
|
||||
.props()
|
||||
.onChange();
|
||||
expect(handleSelect).toBeCalled();
|
||||
await waitForElement(
|
||||
wrapper,
|
||||
'InventoriesList',
|
||||
el => el.state('selected').length === 1
|
||||
);
|
||||
done();
|
||||
});
|
||||
|
||||
test('handleSelectAll is called when a inventory list item is selected', async done => {
|
||||
const handleSelectAll = jest.spyOn(
|
||||
_InventoriesList.prototype,
|
||||
'handleSelectAll'
|
||||
);
|
||||
const wrapper = mountWithContexts(<InventoriesList />);
|
||||
await waitForElement(
|
||||
wrapper,
|
||||
'InventoriesList',
|
||||
el => el.state('hasContentLoading') === false
|
||||
);
|
||||
wrapper
|
||||
.find('Checkbox#select-all')
|
||||
.props()
|
||||
.onChange(true);
|
||||
expect(handleSelectAll).toBeCalled();
|
||||
await waitForElement(
|
||||
wrapper,
|
||||
'InventoriesList',
|
||||
el => el.state('selected').length === 3
|
||||
);
|
||||
done();
|
||||
});
|
||||
|
||||
test('delete button is disabled if user does not have delete capabilities on a selected inventory', async done => {
|
||||
const wrapper = mountWithContexts(<InventoriesList />);
|
||||
wrapper.find('InventoriesList').setState({
|
||||
inventories: mockInventories,
|
||||
itemCount: 3,
|
||||
isInitialized: true,
|
||||
selected: mockInventories.slice(0, 2),
|
||||
test('should load and render inventories', async () => {
|
||||
let wrapper;
|
||||
await act(async () => {
|
||||
wrapper = mountWithContexts(<InventoryList />);
|
||||
});
|
||||
await waitForElement(
|
||||
wrapper,
|
||||
'ToolbarDeleteButton * button',
|
||||
el => el.getDOMNode().disabled === false
|
||||
);
|
||||
wrapper.find('InventoriesList').setState({
|
||||
selected: mockInventories,
|
||||
});
|
||||
await waitForElement(
|
||||
wrapper,
|
||||
'ToolbarDeleteButton * button',
|
||||
el => el.getDOMNode().disabled === true
|
||||
);
|
||||
done();
|
||||
wrapper.update();
|
||||
|
||||
expect(wrapper.find('InventoryListItem')).toHaveLength(3);
|
||||
});
|
||||
|
||||
test('api is called to delete inventories for each selected inventory.', () => {
|
||||
InventoriesAPI.destroy = jest.fn();
|
||||
const wrapper = mountWithContexts(<InventoriesList />);
|
||||
wrapper.find('InventoriesList').setState({
|
||||
inventories: mockInventories,
|
||||
itemCount: 3,
|
||||
isInitialized: true,
|
||||
isModalOpen: true,
|
||||
selected: mockInventories.slice(0, 2),
|
||||
test('should select inventory when checked', async () => {
|
||||
let wrapper;
|
||||
await act(async () => {
|
||||
wrapper = mountWithContexts(<InventoryList />);
|
||||
});
|
||||
wrapper.find('ToolbarDeleteButton').prop('onDelete')();
|
||||
wrapper.update();
|
||||
|
||||
await act(async () => {
|
||||
wrapper
|
||||
.find('InventoryListItem')
|
||||
.first()
|
||||
.invoke('onSelect')();
|
||||
});
|
||||
wrapper.update();
|
||||
|
||||
expect(
|
||||
wrapper
|
||||
.find('InventoryListItem')
|
||||
.first()
|
||||
.prop('isSelected')
|
||||
).toEqual(true);
|
||||
});
|
||||
|
||||
test('should select all', async () => {
|
||||
let wrapper;
|
||||
await act(async () => {
|
||||
wrapper = mountWithContexts(<InventoryList />);
|
||||
});
|
||||
wrapper.update();
|
||||
|
||||
await act(async () => {
|
||||
wrapper.find('DataListToolbar').invoke('onSelectAll')(true);
|
||||
});
|
||||
wrapper.update();
|
||||
|
||||
const items = wrapper.find('InventoryListItem');
|
||||
expect(items).toHaveLength(3);
|
||||
items.forEach(item => {
|
||||
expect(item.prop('isSelected')).toEqual(true);
|
||||
});
|
||||
|
||||
expect(
|
||||
wrapper
|
||||
.find('InventoryListItem')
|
||||
.first()
|
||||
.prop('isSelected')
|
||||
).toEqual(true);
|
||||
});
|
||||
|
||||
test('should disable delete button', async () => {
|
||||
let wrapper;
|
||||
await act(async () => {
|
||||
wrapper = mountWithContexts(<InventoryList />);
|
||||
});
|
||||
wrapper.update();
|
||||
|
||||
await act(async () => {
|
||||
wrapper
|
||||
.find('InventoryListItem')
|
||||
.at(2)
|
||||
.invoke('onSelect')();
|
||||
});
|
||||
wrapper.update();
|
||||
|
||||
expect(wrapper.find('ToolbarDeleteButton button').prop('disabled')).toEqual(
|
||||
true
|
||||
);
|
||||
});
|
||||
|
||||
test('should call delete api', async () => {
|
||||
let wrapper;
|
||||
await act(async () => {
|
||||
wrapper = mountWithContexts(<InventoryList />);
|
||||
});
|
||||
wrapper.update();
|
||||
|
||||
await act(async () => {
|
||||
wrapper
|
||||
.find('InventoryListItem')
|
||||
.at(0)
|
||||
.invoke('onSelect')();
|
||||
});
|
||||
wrapper.update();
|
||||
await act(async () => {
|
||||
wrapper
|
||||
.find('InventoryListItem')
|
||||
.at(1)
|
||||
.invoke('onSelect')();
|
||||
});
|
||||
wrapper.update();
|
||||
await act(async () => {
|
||||
wrapper.find('ToolbarDeleteButton').invoke('onDelete')();
|
||||
});
|
||||
|
||||
expect(InventoriesAPI.destroy).toHaveBeenCalledTimes(2);
|
||||
});
|
||||
|
||||
test('error is shown when inventory not successfully deleted from api', async done => {
|
||||
test('should show deletion error', async () => {
|
||||
InventoriesAPI.destroy.mockRejectedValue(
|
||||
new Error({
|
||||
response: {
|
||||
config: {
|
||||
method: 'delete',
|
||||
url: '/api/v2/inventories/1',
|
||||
url: '/api/v2/inventory/1',
|
||||
},
|
||||
data: 'An error occurred',
|
||||
},
|
||||
})
|
||||
);
|
||||
const wrapper = mountWithContexts(<InventoriesList />);
|
||||
wrapper.find('InventoriesList').setState({
|
||||
inventories: mockInventories,
|
||||
itemCount: 1,
|
||||
isInitialized: true,
|
||||
isModalOpen: true,
|
||||
selected: mockInventories.slice(0, 1),
|
||||
let wrapper;
|
||||
await act(async () => {
|
||||
wrapper = mountWithContexts(<InventoryList />);
|
||||
});
|
||||
wrapper.find('ToolbarDeleteButton').prop('onDelete')();
|
||||
await waitForElement(
|
||||
wrapper,
|
||||
'Modal',
|
||||
el => el.props().isOpen === true && el.props().title === 'Error!'
|
||||
);
|
||||
wrapper.update();
|
||||
expect(InventoriesAPI.read).toHaveBeenCalledTimes(1);
|
||||
await act(async () => {
|
||||
wrapper
|
||||
.find('InventoryListItem')
|
||||
.at(0)
|
||||
.invoke('onSelect')();
|
||||
});
|
||||
wrapper.update();
|
||||
|
||||
done();
|
||||
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 with ability to POST', async done => {
|
||||
const wrapper = mountWithContexts(<InventoriesList />);
|
||||
await waitForElement(
|
||||
wrapper,
|
||||
'InventoriesList',
|
||||
el => el.state('hasContentLoading') === true
|
||||
);
|
||||
await waitForElement(
|
||||
wrapper,
|
||||
'InventoriesList',
|
||||
el => el.state('hasContentLoading') === false
|
||||
);
|
||||
test('Add button shown for users without ability to POST', async () => {
|
||||
let wrapper;
|
||||
await act(async () => {
|
||||
wrapper = mountWithContexts(<InventoryList />);
|
||||
});
|
||||
wrapper.update();
|
||||
|
||||
expect(wrapper.find('ToolbarAddButton').length).toBe(1);
|
||||
done();
|
||||
});
|
||||
|
||||
test('Add button hidden for users without ability to POST', async done => {
|
||||
InventoriesAPI.readOptions.mockResolvedValue({
|
||||
data: {
|
||||
actions: {
|
||||
GET: {},
|
||||
test('Add button hidden for users without ability to POST', async () => {
|
||||
InventoriesAPI.readOptions = () =>
|
||||
Promise.resolve({
|
||||
data: {
|
||||
actions: {
|
||||
GET: {},
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
let wrapper;
|
||||
await act(async () => {
|
||||
wrapper = mountWithContexts(<InventoryList />);
|
||||
});
|
||||
const wrapper = mountWithContexts(<InventoriesList />);
|
||||
await waitForElement(
|
||||
wrapper,
|
||||
'InventoriesList',
|
||||
el => el.state('hasContentLoading') === true
|
||||
);
|
||||
await waitForElement(
|
||||
wrapper,
|
||||
'InventoriesList',
|
||||
el => el.state('hasContentLoading') === false
|
||||
);
|
||||
wrapper.update();
|
||||
|
||||
expect(wrapper.find('ToolbarAddButton').length).toBe(0);
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
import React, { Component, Fragment } from 'react';
|
||||
import { withRouter } from 'react-router-dom';
|
||||
import React, { Fragment, useState, useEffect, useCallback } from 'react';
|
||||
import { useLocation, useRouteMatch } from 'react-router-dom';
|
||||
import { withI18n } from '@lingui/react';
|
||||
import { t } from '@lingui/macro';
|
||||
import { Card, PageSection } from '@patternfly/react-core';
|
||||
|
||||
import { ProjectsAPI } from '@api';
|
||||
import useRequest, { useDeleteItems } from '@util/useRequest';
|
||||
import AlertModal from '@components/AlertModal';
|
||||
import DataListToolbar from '@components/DataListToolbar';
|
||||
import ErrorDetail from '@components/ErrorDetail';
|
||||
@ -22,231 +23,179 @@ const QS_CONFIG = getQSConfig('project', {
|
||||
order_by: 'name',
|
||||
});
|
||||
|
||||
class ProjectsList extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
function ProjectList({ i18n }) {
|
||||
const location = useLocation();
|
||||
const match = useRouteMatch();
|
||||
const [selected, setSelected] = useState([]);
|
||||
|
||||
this.state = {
|
||||
hasContentLoading: true,
|
||||
contentError: null,
|
||||
deletionError: null,
|
||||
const {
|
||||
result: { projects, itemCount, actions },
|
||||
error: contentError,
|
||||
isLoading,
|
||||
request: fetchProjects,
|
||||
} = useRequest(
|
||||
useCallback(async () => {
|
||||
const params = parseQueryString(QS_CONFIG, location.search);
|
||||
const [response, actionsResponse] = await Promise.all([
|
||||
ProjectsAPI.read(params),
|
||||
ProjectsAPI.readOptions(),
|
||||
]);
|
||||
return {
|
||||
projects: response.data.results,
|
||||
itemCount: response.data.count,
|
||||
actions: actionsResponse.data.actions,
|
||||
};
|
||||
}, [location]),
|
||||
{
|
||||
projects: [],
|
||||
selected: [],
|
||||
itemCount: 0,
|
||||
actions: null,
|
||||
};
|
||||
|
||||
this.handleSelectAll = this.handleSelectAll.bind(this);
|
||||
this.handleSelect = this.handleSelect.bind(this);
|
||||
this.handleProjectDelete = this.handleProjectDelete.bind(this);
|
||||
this.handleDeleteErrorClose = this.handleDeleteErrorClose.bind(this);
|
||||
this.loadProjects = this.loadProjects.bind(this);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.loadProjects();
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
const { location } = this.props;
|
||||
if (location !== prevProps.location) {
|
||||
this.loadProjects();
|
||||
actions: {},
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
handleSelectAll(isSelected) {
|
||||
const { projects } = this.state;
|
||||
useEffect(() => {
|
||||
fetchProjects();
|
||||
}, [fetchProjects]);
|
||||
|
||||
const selected = isSelected ? [...projects] : [];
|
||||
this.setState({ selected });
|
||||
}
|
||||
const isAllSelected =
|
||||
selected.length === projects.length && selected.length > 0;
|
||||
const {
|
||||
isLoading: isDeleteLoading,
|
||||
deleteItems: deleteProjects,
|
||||
deletionError,
|
||||
clearDeletionError,
|
||||
} = useDeleteItems(
|
||||
useCallback(async () => {
|
||||
return Promise.all(selected.map(({ id }) => ProjectsAPI.destroy(id)));
|
||||
}, [selected]),
|
||||
{
|
||||
qsConfig: QS_CONFIG,
|
||||
allItemsSelected: isAllSelected,
|
||||
fetchItems: fetchProjects,
|
||||
}
|
||||
);
|
||||
|
||||
handleSelect(row) {
|
||||
const { selected } = this.state;
|
||||
const handleProjectDelete = async () => {
|
||||
await deleteProjects();
|
||||
setSelected([]);
|
||||
};
|
||||
|
||||
const hasContentLoading = isDeleteLoading || isLoading;
|
||||
const canAdd = actions && actions.POST;
|
||||
|
||||
const handleSelectAll = isSelected => {
|
||||
setSelected(isSelected ? [...projects] : []);
|
||||
};
|
||||
|
||||
const handleSelect = row => {
|
||||
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 {
|
||||
this.setState({ selected: selected.concat(row) });
|
||||
setSelected(selected.concat(row));
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
handleDeleteErrorClose() {
|
||||
this.setState({ deletionError: null });
|
||||
}
|
||||
|
||||
async handleProjectDelete() {
|
||||
const { selected } = this.state;
|
||||
|
||||
this.setState({ hasContentLoading: true });
|
||||
try {
|
||||
await Promise.all(
|
||||
selected.map(project => ProjectsAPI.destroy(project.id))
|
||||
);
|
||||
} catch (err) {
|
||||
this.setState({ deletionError: err });
|
||||
} finally {
|
||||
await this.loadProjects();
|
||||
}
|
||||
}
|
||||
|
||||
async loadProjects() {
|
||||
const { location } = this.props;
|
||||
const { actions: cachedActions } = this.state;
|
||||
const params = parseQueryString(QS_CONFIG, location.search);
|
||||
|
||||
let optionsPromise;
|
||||
if (cachedActions) {
|
||||
optionsPromise = Promise.resolve({ data: { actions: cachedActions } });
|
||||
} else {
|
||||
optionsPromise = ProjectsAPI.readOptions();
|
||||
}
|
||||
|
||||
const promises = Promise.all([ProjectsAPI.read(params), optionsPromise]);
|
||||
|
||||
this.setState({ contentError: null, hasContentLoading: true });
|
||||
try {
|
||||
const [
|
||||
{
|
||||
data: { count, results },
|
||||
},
|
||||
{
|
||||
data: { actions },
|
||||
},
|
||||
] = await promises;
|
||||
this.setState({
|
||||
actions,
|
||||
itemCount: count,
|
||||
projects: results,
|
||||
selected: [],
|
||||
});
|
||||
} catch (err) {
|
||||
this.setState({ contentError: err });
|
||||
} finally {
|
||||
this.setState({ hasContentLoading: false });
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
actions,
|
||||
itemCount,
|
||||
contentError,
|
||||
hasContentLoading,
|
||||
deletionError,
|
||||
selected,
|
||||
projects,
|
||||
} = this.state;
|
||||
const { match, i18n } = this.props;
|
||||
|
||||
const canAdd =
|
||||
actions && Object.prototype.hasOwnProperty.call(actions, 'POST');
|
||||
const isAllSelected =
|
||||
selected.length > 0 && selected.length === projects.length;
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<PageSection>
|
||||
<Card>
|
||||
<PaginatedDataList
|
||||
contentError={contentError}
|
||||
hasContentLoading={hasContentLoading}
|
||||
items={projects}
|
||||
itemCount={itemCount}
|
||||
pluralizedItemName={i18n._(t`Projects`)}
|
||||
qsConfig={QS_CONFIG}
|
||||
onRowClick={this.handleSelect}
|
||||
toolbarSearchColumns={[
|
||||
{
|
||||
name: i18n._(t`Name`),
|
||||
key: 'name',
|
||||
isDefault: true,
|
||||
},
|
||||
{
|
||||
name: i18n._(t`Type`),
|
||||
key: 'type',
|
||||
options: [
|
||||
[``, i18n._(t`Manual`)],
|
||||
[`git`, i18n._(t`Git`)],
|
||||
[`hg`, i18n._(t`Mercurial`)],
|
||||
[`svn`, i18n._(t`Subversion`)],
|
||||
[`insights`, i18n._(t`Red Hat Insights`)],
|
||||
],
|
||||
},
|
||||
{
|
||||
name: i18n._(t`SCM URL`),
|
||||
key: 'scm_url',
|
||||
},
|
||||
{
|
||||
name: i18n._(t`Modified By (Username)`),
|
||||
key: 'modified_by__username',
|
||||
},
|
||||
{
|
||||
name: i18n._(t`Created By (Username)`),
|
||||
key: 'created_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.handleProjectDelete}
|
||||
itemsToDelete={selected}
|
||||
pluralizedItemName={i18n._(t`Projects`)}
|
||||
/>,
|
||||
]}
|
||||
/>
|
||||
)}
|
||||
renderItem={o => (
|
||||
<ProjectListItem
|
||||
key={o.id}
|
||||
project={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 projects.`)}
|
||||
<ErrorDetail error={deletionError} />
|
||||
</AlertModal>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<Fragment>
|
||||
<PageSection>
|
||||
<Card>
|
||||
<PaginatedDataList
|
||||
contentError={contentError}
|
||||
hasContentLoading={hasContentLoading}
|
||||
items={projects}
|
||||
itemCount={itemCount}
|
||||
pluralizedItemName={i18n._(t`Projects`)}
|
||||
qsConfig={QS_CONFIG}
|
||||
onRowClick={handleSelect}
|
||||
toolbarSearchColumns={[
|
||||
{
|
||||
name: i18n._(t`Name`),
|
||||
key: 'name',
|
||||
isDefault: true,
|
||||
},
|
||||
{
|
||||
name: i18n._(t`Type`),
|
||||
key: 'type',
|
||||
options: [
|
||||
[``, i18n._(t`Manual`)],
|
||||
[`git`, i18n._(t`Git`)],
|
||||
[`hg`, i18n._(t`Mercurial`)],
|
||||
[`svn`, i18n._(t`Subversion`)],
|
||||
[`insights`, i18n._(t`Red Hat Insights`)],
|
||||
],
|
||||
},
|
||||
{
|
||||
name: i18n._(t`SCM URL`),
|
||||
key: 'scm_url',
|
||||
},
|
||||
{
|
||||
name: i18n._(t`Modified By (Username)`),
|
||||
key: 'modified_by__username',
|
||||
},
|
||||
{
|
||||
name: i18n._(t`Created By (Username)`),
|
||||
key: 'created_by__username',
|
||||
},
|
||||
]}
|
||||
toolbarSortColumns={[
|
||||
{
|
||||
name: i18n._(t`Name`),
|
||||
key: 'name',
|
||||
},
|
||||
]}
|
||||
renderToolbar={props => (
|
||||
<DataListToolbar
|
||||
{...props}
|
||||
showSelectAll
|
||||
isAllSelected={isAllSelected}
|
||||
onSelectAll={handleSelectAll}
|
||||
qsConfig={QS_CONFIG}
|
||||
additionalControls={[
|
||||
...(canAdd
|
||||
? [
|
||||
<ToolbarAddButton
|
||||
key="add"
|
||||
linkTo={`${match.url}/add`}
|
||||
/>,
|
||||
]
|
||||
: []),
|
||||
<ToolbarDeleteButton
|
||||
key="delete"
|
||||
onDelete={handleProjectDelete}
|
||||
itemsToDelete={selected}
|
||||
pluralizedItemName={i18n._(t`Projects`)}
|
||||
/>,
|
||||
]}
|
||||
/>
|
||||
)}
|
||||
renderItem={o => (
|
||||
<ProjectListItem
|
||||
key={o.id}
|
||||
project={o}
|
||||
detailUrl={`${match.url}/${o.id}`}
|
||||
isSelected={selected.some(row => row.id === o.id)}
|
||||
onSelect={() => handleSelect(o)}
|
||||
/>
|
||||
)}
|
||||
emptyStateControls={
|
||||
canAdd ? (
|
||||
<ToolbarAddButton key="add" linkTo={`${match.url}/add`} />
|
||||
) : null
|
||||
}
|
||||
/>
|
||||
</Card>
|
||||
</PageSection>
|
||||
<AlertModal
|
||||
isOpen={deletionError}
|
||||
variant="error"
|
||||
title={i18n._(t`Error!`)}
|
||||
onClose={clearDeletionError}
|
||||
>
|
||||
{i18n._(t`Failed to delete one or more projects.`)}
|
||||
<ErrorDetail error={deletionError} />
|
||||
</AlertModal>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
export { ProjectsList as _ProjectsList };
|
||||
export default withI18n()(withRouter(ProjectsList));
|
||||
export default withI18n()(ProjectList);
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import React from 'react';
|
||||
import { act } from 'react-dom/test-utils';
|
||||
import { ProjectsAPI } from '@api';
|
||||
import { mountWithContexts, waitForElement } from '@testUtils/enzymeHelpers';
|
||||
|
||||
import ProjectsList, { _ProjectsList } from './ProjectList';
|
||||
import { mountWithContexts } from '@testUtils/enzymeHelpers';
|
||||
import ProjectList from './ProjectList';
|
||||
|
||||
jest.mock('@api');
|
||||
|
||||
@ -63,7 +63,7 @@ const mockProjects = [
|
||||
},
|
||||
];
|
||||
|
||||
describe('<ProjectsList />', () => {
|
||||
describe('<ProjectList />', () => {
|
||||
beforeEach(() => {
|
||||
ProjectsAPI.read.mockResolvedValue({
|
||||
data: {
|
||||
@ -86,117 +86,114 @@ describe('<ProjectsList />', () => {
|
||||
jest.clearAllMocks();
|
||||
});
|
||||
|
||||
test('initially renders successfully', () => {
|
||||
mountWithContexts(
|
||||
<ProjectsList
|
||||
match={{ path: '/projects', url: '/projects' }}
|
||||
location={{ search: '', pathname: '/projects' }}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
test('Projects are retrieved from the api and the components finishes loading', async done => {
|
||||
const loadProjects = jest.spyOn(_ProjectsList.prototype, 'loadProjects');
|
||||
const wrapper = mountWithContexts(<ProjectsList />);
|
||||
await waitForElement(
|
||||
wrapper,
|
||||
'ProjectsList',
|
||||
el => el.state('hasContentLoading') === true
|
||||
);
|
||||
expect(loadProjects).toHaveBeenCalled();
|
||||
await waitForElement(
|
||||
wrapper,
|
||||
'ProjectsList',
|
||||
el => el.state('hasContentLoading') === false
|
||||
);
|
||||
done();
|
||||
});
|
||||
|
||||
test('handleSelect is called when a project list item is selected', async done => {
|
||||
const handleSelect = jest.spyOn(_ProjectsList.prototype, 'handleSelect');
|
||||
const wrapper = mountWithContexts(<ProjectsList />);
|
||||
await waitForElement(
|
||||
wrapper,
|
||||
'ProjectsList',
|
||||
el => el.state('hasContentLoading') === false
|
||||
);
|
||||
await wrapper
|
||||
.find('input#select-project-1')
|
||||
.closest('DataListCheck')
|
||||
.props()
|
||||
.onChange();
|
||||
expect(handleSelect).toBeCalled();
|
||||
await waitForElement(
|
||||
wrapper,
|
||||
'ProjectsList',
|
||||
el => el.state('selected').length === 1
|
||||
);
|
||||
done();
|
||||
});
|
||||
|
||||
test('handleSelectAll is called when select all checkbox is clicked', async done => {
|
||||
const handleSelectAll = jest.spyOn(
|
||||
_ProjectsList.prototype,
|
||||
'handleSelectAll'
|
||||
);
|
||||
const wrapper = mountWithContexts(<ProjectsList />);
|
||||
await waitForElement(
|
||||
wrapper,
|
||||
'ProjectsList',
|
||||
el => el.state('hasContentLoading') === false
|
||||
);
|
||||
wrapper
|
||||
.find('Checkbox#select-all')
|
||||
.props()
|
||||
.onChange(true);
|
||||
expect(handleSelectAll).toBeCalled();
|
||||
await waitForElement(
|
||||
wrapper,
|
||||
'ProjectsList',
|
||||
el => el.state('selected').length === 3
|
||||
);
|
||||
done();
|
||||
});
|
||||
|
||||
test('delete button is disabled if user does not have delete capabilities on a selected project', async done => {
|
||||
const wrapper = mountWithContexts(<ProjectsList />);
|
||||
wrapper.find('ProjectsList').setState({
|
||||
projects: mockProjects,
|
||||
itemCount: 3,
|
||||
isInitialized: true,
|
||||
selected: mockProjects.slice(0, 1),
|
||||
test('should load and render projects', async () => {
|
||||
let wrapper;
|
||||
await act(async () => {
|
||||
wrapper = mountWithContexts(<ProjectList />);
|
||||
});
|
||||
await waitForElement(
|
||||
wrapper,
|
||||
'ToolbarDeleteButton * button',
|
||||
el => el.getDOMNode().disabled === false
|
||||
);
|
||||
wrapper.find('ProjectsList').setState({
|
||||
selected: mockProjects,
|
||||
});
|
||||
await waitForElement(
|
||||
wrapper,
|
||||
'ToolbarDeleteButton * button',
|
||||
el => el.getDOMNode().disabled === true
|
||||
);
|
||||
done();
|
||||
wrapper.update();
|
||||
|
||||
expect(wrapper.find('ProjectListItem')).toHaveLength(3);
|
||||
});
|
||||
|
||||
test('api is called to delete projects for each selected project.', () => {
|
||||
ProjectsAPI.destroy = jest.fn();
|
||||
const wrapper = mountWithContexts(<ProjectsList />);
|
||||
wrapper.find('ProjectsList').setState({
|
||||
projects: mockProjects,
|
||||
itemCount: 2,
|
||||
isInitialized: true,
|
||||
isModalOpen: true,
|
||||
selected: mockProjects.slice(0, 2),
|
||||
test('should select project when checked', async () => {
|
||||
let wrapper;
|
||||
await act(async () => {
|
||||
wrapper = mountWithContexts(<ProjectList />);
|
||||
});
|
||||
wrapper.find('ToolbarDeleteButton').prop('onDelete')();
|
||||
wrapper.update();
|
||||
|
||||
await act(async () => {
|
||||
wrapper
|
||||
.find('ProjectListItem')
|
||||
.first()
|
||||
.invoke('onSelect')();
|
||||
});
|
||||
wrapper.update();
|
||||
|
||||
expect(
|
||||
wrapper
|
||||
.find('ProjectListItem')
|
||||
.first()
|
||||
.prop('isSelected')
|
||||
).toEqual(true);
|
||||
});
|
||||
|
||||
test('should select all', async () => {
|
||||
let wrapper;
|
||||
await act(async () => {
|
||||
wrapper = mountWithContexts(<ProjectList />);
|
||||
});
|
||||
wrapper.update();
|
||||
|
||||
await act(async () => {
|
||||
wrapper.find('DataListToolbar').invoke('onSelectAll')(true);
|
||||
});
|
||||
wrapper.update();
|
||||
|
||||
const items = wrapper.find('ProjectListItem');
|
||||
expect(items).toHaveLength(3);
|
||||
items.forEach(item => {
|
||||
expect(item.prop('isSelected')).toEqual(true);
|
||||
});
|
||||
|
||||
expect(
|
||||
wrapper
|
||||
.find('ProjectListItem')
|
||||
.first()
|
||||
.prop('isSelected')
|
||||
).toEqual(true);
|
||||
});
|
||||
|
||||
test('should disable delete button', async () => {
|
||||
let wrapper;
|
||||
await act(async () => {
|
||||
wrapper = mountWithContexts(<ProjectList />);
|
||||
});
|
||||
wrapper.update();
|
||||
|
||||
await act(async () => {
|
||||
wrapper
|
||||
.find('ProjectListItem')
|
||||
.at(2)
|
||||
.invoke('onSelect')();
|
||||
});
|
||||
wrapper.update();
|
||||
|
||||
expect(wrapper.find('ToolbarDeleteButton button').prop('disabled')).toEqual(
|
||||
true
|
||||
);
|
||||
});
|
||||
|
||||
test('should call delete api', async () => {
|
||||
let wrapper;
|
||||
await act(async () => {
|
||||
wrapper = mountWithContexts(<ProjectList />);
|
||||
});
|
||||
wrapper.update();
|
||||
|
||||
await act(async () => {
|
||||
wrapper
|
||||
.find('ProjectListItem')
|
||||
.at(0)
|
||||
.invoke('onSelect')();
|
||||
});
|
||||
wrapper.update();
|
||||
await act(async () => {
|
||||
wrapper
|
||||
.find('ProjectListItem')
|
||||
.at(1)
|
||||
.invoke('onSelect')();
|
||||
});
|
||||
wrapper.update();
|
||||
await act(async () => {
|
||||
wrapper.find('ToolbarDeleteButton').invoke('onDelete')();
|
||||
});
|
||||
|
||||
expect(ProjectsAPI.destroy).toHaveBeenCalledTimes(2);
|
||||
});
|
||||
|
||||
test('error is shown when project not successfully deleted from api', async done => {
|
||||
test('should show deletion error', async () => {
|
||||
ProjectsAPI.destroy.mockRejectedValue(
|
||||
new Error({
|
||||
response: {
|
||||
@ -208,60 +205,55 @@ describe('<ProjectsList />', () => {
|
||||
},
|
||||
})
|
||||
);
|
||||
const wrapper = mountWithContexts(<ProjectsList />);
|
||||
wrapper.find('ProjectsList').setState({
|
||||
projects: mockProjects,
|
||||
itemCount: 1,
|
||||
isInitialized: true,
|
||||
isModalOpen: true,
|
||||
selected: mockProjects.slice(0, 1),
|
||||
let wrapper;
|
||||
await act(async () => {
|
||||
wrapper = mountWithContexts(<ProjectList />);
|
||||
});
|
||||
wrapper.find('ToolbarDeleteButton').prop('onDelete')();
|
||||
await waitForElement(
|
||||
wrapper,
|
||||
'Modal',
|
||||
el => el.props().isOpen === true && el.props().title === 'Error!'
|
||||
);
|
||||
wrapper.update();
|
||||
expect(ProjectsAPI.read).toHaveBeenCalledTimes(1);
|
||||
await act(async () => {
|
||||
wrapper
|
||||
.find('ProjectListItem')
|
||||
.at(0)
|
||||
.invoke('onSelect')();
|
||||
});
|
||||
wrapper.update();
|
||||
|
||||
done();
|
||||
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 => {
|
||||
const wrapper = mountWithContexts(<ProjectsList />);
|
||||
await waitForElement(
|
||||
wrapper,
|
||||
'ProjectsList',
|
||||
el => el.state('hasContentLoading') === true
|
||||
);
|
||||
await waitForElement(
|
||||
wrapper,
|
||||
'ProjectsList',
|
||||
el => el.state('hasContentLoading') === false
|
||||
);
|
||||
test('Add button shown for users without ability to POST', async () => {
|
||||
let wrapper;
|
||||
await act(async () => {
|
||||
wrapper = mountWithContexts(<ProjectList />);
|
||||
});
|
||||
wrapper.update();
|
||||
|
||||
expect(wrapper.find('ToolbarAddButton').length).toBe(1);
|
||||
done();
|
||||
});
|
||||
|
||||
test('Add button hidden for users without ability to POST', async done => {
|
||||
ProjectsAPI.readOptions.mockResolvedValue({
|
||||
data: {
|
||||
actions: {
|
||||
GET: {},
|
||||
test('Add button hidden for users without ability to POST', async () => {
|
||||
ProjectsAPI.readOptions = () =>
|
||||
Promise.resolve({
|
||||
data: {
|
||||
actions: {
|
||||
GET: {},
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
let wrapper;
|
||||
await act(async () => {
|
||||
wrapper = mountWithContexts(<ProjectList />);
|
||||
});
|
||||
const wrapper = mountWithContexts(<ProjectsList />);
|
||||
await waitForElement(
|
||||
wrapper,
|
||||
'ProjectsList',
|
||||
el => el.state('hasContentLoading') === true
|
||||
);
|
||||
await waitForElement(
|
||||
wrapper,
|
||||
'ProjectsList',
|
||||
el => el.state('hasContentLoading') === false
|
||||
);
|
||||
wrapper.update();
|
||||
|
||||
expect(wrapper.find('ToolbarAddButton').length).toBe(0);
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
import React, { Component, Fragment } from 'react';
|
||||
import { withRouter } from 'react-router-dom';
|
||||
import React, { Fragment, useState, useEffect, useCallback } from 'react';
|
||||
import { useLocation, useRouteMatch } from 'react-router-dom';
|
||||
import { withI18n } from '@lingui/react';
|
||||
import { t } from '@lingui/macro';
|
||||
import { Card, PageSection } from '@patternfly/react-core';
|
||||
|
||||
import { TeamsAPI } from '@api';
|
||||
import useRequest, { useDeleteItems } from '@util/useRequest';
|
||||
import AlertModal from '@components/AlertModal';
|
||||
import DataListToolbar from '@components/DataListToolbar';
|
||||
import ErrorDetail from '@components/ErrorDetail';
|
||||
@ -22,218 +23,167 @@ const QS_CONFIG = getQSConfig('team', {
|
||||
order_by: 'name',
|
||||
});
|
||||
|
||||
class TeamsList extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
function TeamList({ i18n }) {
|
||||
const location = useLocation();
|
||||
const match = useRouteMatch();
|
||||
const [selected, setSelected] = useState([]);
|
||||
|
||||
this.state = {
|
||||
hasContentLoading: true,
|
||||
contentError: null,
|
||||
deletionError: null,
|
||||
const {
|
||||
result: { teams, itemCount, actions },
|
||||
error: contentError,
|
||||
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: [],
|
||||
selected: [],
|
||||
itemCount: 0,
|
||||
actions: null,
|
||||
};
|
||||
|
||||
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();
|
||||
actions: {},
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
handleSelectAll(isSelected) {
|
||||
const { teams } = this.state;
|
||||
useEffect(() => {
|
||||
fetchTeams();
|
||||
}, [fetchTeams]);
|
||||
|
||||
const selected = isSelected ? [...teams] : [];
|
||||
this.setState({ selected });
|
||||
}
|
||||
const isAllSelected = selected.length === teams.length && selected.length > 0;
|
||||
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 { selected } = this.state;
|
||||
const handleTeamDelete = async () => {
|
||||
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)) {
|
||||
this.setState({ selected: selected.filter(s => s.id !== row.id) });
|
||||
setSelected(selected.filter(s => s.id !== row.id));
|
||||
} else {
|
||||
this.setState({ selected: selected.concat(row) });
|
||||
setSelected(selected.concat(row));
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
handleDeleteErrorClose() {
|
||||
this.setState({ deletionError: null });
|
||||
}
|
||||
|
||||
async handleTeamDelete() {
|
||||
const { selected } = this.state;
|
||||
|
||||
this.setState({ hasContentLoading: true });
|
||||
try {
|
||||
await Promise.all(selected.map(team => TeamsAPI.destroy(team.id)));
|
||||
} catch (err) {
|
||||
this.setState({ deletionError: err });
|
||||
} finally {
|
||||
await this.loadTeams();
|
||||
}
|
||||
}
|
||||
|
||||
async loadTeams() {
|
||||
const { location } = this.props;
|
||||
const { actions: cachedActions } = this.state;
|
||||
const params = parseQueryString(QS_CONFIG, location.search);
|
||||
|
||||
let optionsPromise;
|
||||
if (cachedActions) {
|
||||
optionsPromise = Promise.resolve({ data: { actions: cachedActions } });
|
||||
} else {
|
||||
optionsPromise = TeamsAPI.readOptions();
|
||||
}
|
||||
|
||||
const promises = Promise.all([TeamsAPI.read(params), optionsPromise]);
|
||||
|
||||
this.setState({ contentError: null, hasContentLoading: true });
|
||||
try {
|
||||
const [
|
||||
{
|
||||
data: { count, results },
|
||||
},
|
||||
{
|
||||
data: { actions },
|
||||
},
|
||||
] = await promises;
|
||||
this.setState({
|
||||
actions,
|
||||
itemCount: count,
|
||||
teams: results,
|
||||
selected: [],
|
||||
});
|
||||
} catch (err) {
|
||||
this.setState({ contentError: err });
|
||||
} finally {
|
||||
this.setState({ hasContentLoading: false });
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
actions,
|
||||
itemCount,
|
||||
contentError,
|
||||
hasContentLoading,
|
||||
deletionError,
|
||||
selected,
|
||||
teams,
|
||||
} = this.state;
|
||||
const { match, i18n } = this.props;
|
||||
|
||||
const canAdd =
|
||||
actions && Object.prototype.hasOwnProperty.call(actions, 'POST');
|
||||
const isAllSelected =
|
||||
selected.length > 0 && selected.length === teams.length;
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<PageSection>
|
||||
<Card>
|
||||
<PaginatedDataList
|
||||
contentError={contentError}
|
||||
hasContentLoading={hasContentLoading}
|
||||
items={teams}
|
||||
itemCount={itemCount}
|
||||
pluralizedItemName={i18n._(t`Teams`)}
|
||||
qsConfig={QS_CONFIG}
|
||||
onRowClick={this.handleSelect}
|
||||
toolbarSearchColumns={[
|
||||
{
|
||||
name: i18n._(t`Name`),
|
||||
key: 'name',
|
||||
isDefault: true,
|
||||
},
|
||||
{
|
||||
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>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<Fragment>
|
||||
<PageSection>
|
||||
<Card>
|
||||
<PaginatedDataList
|
||||
contentError={contentError}
|
||||
hasContentLoading={hasContentLoading}
|
||||
items={teams}
|
||||
itemCount={itemCount}
|
||||
pluralizedItemName={i18n._(t`Teams`)}
|
||||
qsConfig={QS_CONFIG}
|
||||
onRowClick={handleSelect}
|
||||
toolbarSearchColumns={[
|
||||
{
|
||||
name: i18n._(t`Name`),
|
||||
key: 'name',
|
||||
isDefault: true,
|
||||
},
|
||||
{
|
||||
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={handleSelectAll}
|
||||
qsConfig={QS_CONFIG}
|
||||
additionalControls={[
|
||||
...(canAdd
|
||||
? [
|
||||
<ToolbarAddButton
|
||||
key="add"
|
||||
linkTo={`${match.url}/add`}
|
||||
/>,
|
||||
]
|
||||
: []),
|
||||
<ToolbarDeleteButton
|
||||
key="delete"
|
||||
onDelete={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={() => handleSelect(o)}
|
||||
/>
|
||||
)}
|
||||
emptyStateControls={
|
||||
canAdd ? (
|
||||
<ToolbarAddButton key="add" linkTo={`${match.url}/add`} />
|
||||
) : null
|
||||
}
|
||||
/>
|
||||
</Card>
|
||||
</PageSection>
|
||||
<AlertModal
|
||||
isOpen={deletionError}
|
||||
variant="error"
|
||||
title={i18n._(t`Error!`)}
|
||||
onClose={clearDeletionError}
|
||||
>
|
||||
{i18n._(t`Failed to delete one or more teams.`)}
|
||||
<ErrorDetail error={deletionError} />
|
||||
</AlertModal>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
export { TeamsList as _TeamsList };
|
||||
export default withI18n()(withRouter(TeamsList));
|
||||
export default withI18n()(TeamList);
|
||||
|
||||
@ -1,12 +1,13 @@
|
||||
import React from 'react';
|
||||
import { act } from 'react-dom/test-utils';
|
||||
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');
|
||||
|
||||
const mockAPITeamsList = {
|
||||
const mockAPITeamList = {
|
||||
data: {
|
||||
count: 3,
|
||||
results: [
|
||||
@ -50,15 +51,14 @@ const mockAPITeamsList = {
|
||||
warningMsg: 'message',
|
||||
};
|
||||
|
||||
describe('<TeamsList />', () => {
|
||||
let wrapper;
|
||||
|
||||
describe('<TeamList />', () => {
|
||||
beforeEach(() => {
|
||||
TeamsAPI.read = () =>
|
||||
TeamsAPI.read = jest.fn(() =>
|
||||
Promise.resolve({
|
||||
data: mockAPITeamsList.data,
|
||||
});
|
||||
TeamsAPI.readOptions = () =>
|
||||
data: mockAPITeamList.data,
|
||||
})
|
||||
);
|
||||
TeamsAPI.readOptions = jest.fn(() =>
|
||||
Promise.resolve({
|
||||
data: {
|
||||
actions: {
|
||||
@ -66,105 +66,119 @@ describe('<TeamsList />', () => {
|
||||
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 () => {
|
||||
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('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,
|
||||
test('should load and render teams', async () => {
|
||||
let wrapper;
|
||||
await act(async () => {
|
||||
wrapper = mountWithContexts(<TeamList />);
|
||||
});
|
||||
wrapper.find('ToolbarDeleteButton').prop('onDelete')();
|
||||
expect(TeamsAPI.destroy).toHaveBeenCalledTimes(
|
||||
component.state('selected').length
|
||||
);
|
||||
wrapper.update();
|
||||
|
||||
expect(wrapper.find('TeamListItem')).toHaveLength(3);
|
||||
});
|
||||
|
||||
test('call loadTeams after team(s) have been deleted', () => {
|
||||
const fetchTeams = jest.spyOn(_TeamsList.prototype, 'loadTeams');
|
||||
const event = { preventDefault: () => {} };
|
||||
wrapper = mountWithContexts(<TeamsList />);
|
||||
wrapper.find('TeamsList').setState({
|
||||
teams: mockAPITeamsList.data.results,
|
||||
itemCount: 3,
|
||||
isInitialized: true,
|
||||
selected: mockAPITeamsList.data.results.slice(0, 1),
|
||||
test('should select team when checked', async () => {
|
||||
let wrapper;
|
||||
await act(async () => {
|
||||
wrapper = mountWithContexts(<TeamList />);
|
||||
});
|
||||
const component = wrapper.find('TeamsList');
|
||||
component.instance().handleTeamDelete(event);
|
||||
expect(fetchTeams).toBeCalled();
|
||||
wrapper.update();
|
||||
|
||||
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(
|
||||
new Error({
|
||||
response: {
|
||||
@ -176,40 +190,41 @@ describe('<TeamsList />', () => {
|
||||
},
|
||||
})
|
||||
);
|
||||
|
||||
wrapper = mountWithContexts(<TeamsList />);
|
||||
wrapper.find('TeamsList').setState({
|
||||
teams: mockAPITeamsList.data.results,
|
||||
itemCount: 3,
|
||||
isInitialized: true,
|
||||
selected: mockAPITeamsList.data.results.slice(0, 1),
|
||||
let wrapper;
|
||||
await act(async () => {
|
||||
wrapper = mountWithContexts(<TeamList />);
|
||||
});
|
||||
wrapper.find('ToolbarDeleteButton').prop('onDelete')();
|
||||
await waitForElement(
|
||||
wrapper,
|
||||
'Modal',
|
||||
el => el.props().isOpen === true && el.props().title === 'Error!'
|
||||
);
|
||||
done();
|
||||
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')();
|
||||
});
|
||||
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 => {
|
||||
wrapper = mountWithContexts(<TeamsList />);
|
||||
await waitForElement(
|
||||
wrapper,
|
||||
'TeamsList',
|
||||
el => el.state('hasContentLoading') === true
|
||||
);
|
||||
await waitForElement(
|
||||
wrapper,
|
||||
'TeamsList',
|
||||
el => el.state('hasContentLoading') === false
|
||||
);
|
||||
test('Add button shown for users without ability to POST', async () => {
|
||||
let wrapper;
|
||||
await act(async () => {
|
||||
wrapper = mountWithContexts(<TeamList />);
|
||||
});
|
||||
wrapper.update();
|
||||
|
||||
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 = () =>
|
||||
Promise.resolve({
|
||||
data: {
|
||||
@ -218,18 +233,12 @@ describe('<TeamsList />', () => {
|
||||
},
|
||||
},
|
||||
});
|
||||
wrapper = mountWithContexts(<TeamsList />);
|
||||
await waitForElement(
|
||||
wrapper,
|
||||
'TeamsList',
|
||||
el => el.state('hasContentLoading') === true
|
||||
);
|
||||
await waitForElement(
|
||||
wrapper,
|
||||
'TeamsList',
|
||||
el => el.state('hasContentLoading') === false
|
||||
);
|
||||
let wrapper;
|
||||
await act(async () => {
|
||||
wrapper = mountWithContexts(<TeamList />);
|
||||
});
|
||||
wrapper.update();
|
||||
|
||||
expect(wrapper.find('ToolbarAddButton').length).toBe(0);
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user