import React, {useState} from 'react';
import {Box, Container, Grid} from '@material-ui/core';
import DataTable from '@wolseley/component-library/components/data-table/data-table';
import Typography from '@wolseley/component-library/components/typography/typography';
import Notification from '@wolseley/component-library/components/notification/notification';
import Breadcrumbs from '@wolseley/component-library/components/breadcrumb/breadcrumb';
import Button from '@wolseley/component-library/components/button/button';
import TickSvg from '@wolseley/component-library/components/tick-svg/tick-svg';
import Router from 'next/router';
import {serverSideTranslations} from 'next-i18next/serverSideTranslations';
import ESpotPlaceholder from '@wolseley/component-library/components/eSpot-placeholder/eSpot-placeholder';
import Head from 'next/head';
import {GridCellParams} from '@material-ui/data-grid';
import Link from '@wolseley/component-library/components/link/link';
import {useTranslation} from 'next-i18next';
import {Hidden} from '@material-ui/core';
import {
getAddressAndAccountDetail,
getDeleteAddressApi,
} from '@wolseley/component-library/api/address-book/address-book';
import {colour} from '@wolseley/component-library/styles/theme/config';
const AddressBook = (props) => {
const {contacts, error} = props;
const [isError, setIsError] = useState(error);
const [addressList, setAddressList] = useState(contacts);
const [isdeletedActive, setisdeletedActive] = useState(true);
const [selectedAddress, setSelectedAddress] = useState([]);
const {t} = useTranslation(['common', 'my-account']);
const columnDefs = [
{
field: 'firstName',
headerName: t('my-account:my-address-book:name'),
width: 200,
renderCell: (params) => (
<Typography variant="body1" color="primary">
{params.value}
</Typography>
),
},
{
field: 'addressLine',
headerName: t('my-account:my-address-book:address'),
width: 250,
renderCell: (params: GridCellParams) => (
<Link href={`/myaccount/address-book/${params.row.addressId}`}>{params.value}</Link>
),
},
{
field: 'city',
headerName: `${t('my-account:my-address-book:city')}/${t('my-account:my-address-book:town')}`,
width: 200,
},
{field: `addressLine[2]`, headerName: t('my-account:my-address-book:county'), width: 200},
{field: 'zipCode', headerName: t('my-account:my-address-book:postCode'), width: 200},
{field: 'country', headerName: t('my-account:my-address-book:country'), width: 200},
{
field: 'primary',
headerName: t('my-account:my-address-book:type'),
width: 200,
renderCell: (params) => {
return params.value === 'false' ? '-' : <TickSvg color={colour.secondary}/>;
},
},
{
field: 'addressType',
headerName: t('my-account:my-address-book:shared'),
width: 200,
renderCell: (params) => {
return params.value === 'ShippingAndBilling' ? 'Both' : params.value;
},
},
];
const columnMobileDefs = [
{field: 'firstName', headerName: t('my-account:my-address-book:name'), width: 200},
{
field: 'primary',
headerName: t('my-account:my-address-book:type'),
width: 200,
renderCell: (params) => {
return params.value === 'false' ? '-' : <TickSvg color={colour.secondary}/>;
},
},
{
field: 'addressType',
headerName: t('my-account:my-address-book:shared'),
width: 200,
renderCell: (params) => {
return params.value === 'ShippingAndBilling' ? 'Both' : params.value;
},
},
];
const handleDelete = async (e) => {
setisdeletedActive(true);
try {
let result = null;
for (const id of selectedAddress) {
const {nickName} = addressList.filter((address) => address.addressId === id)[0];
result = await getDeleteAddressApi(nickName, id);
}
if (result) {
await getAddressAndAccountDetail()
.then((res) => {
setAddressList(res.getAddressList.contact);
})
.catch(() => {
setIsError(true);
});
}
} catch (e) {
setIsError(true);
}
};
const handleSelect = (params) => {
setSelectedAddress(params.selectionModel);
if (params.selectionModel.length > 0) {
setisdeletedActive(false);
} else {
setisdeletedActive(true);
}
};
addressList && addressList.forEach((address, idx) => (address.idx = idx));
return (
<>
<Head>
<title>{t('my-account:my-address-book:page-title')}</title>
</Head>
{isError ? (
<Notification type="error" title={t('common:error-without-status')}/>
) : (
<Container maxWidth="xl">
<Box my={5}>
<Breadcrumbs>
<Link href="/myaccount/dashboard">{t('navigation:my-account')}</Link>
<Typography color="secondary" variant="body2">
{t('navigation:address-book')}
</Typography>
</Breadcrumbs>
</Box>
<Box my={10}>
<Grid container justify="center">
<Grid item md={3}>
Menu
</Grid>
<Grid item md={9}>
<Grid container direction="column" justify="flex-start">
<Grid item>
<Box my={1}>
<Typography color="secondary" variant="h1">
{t('my-account:my-address-book:subTitle')}
</Typography>
</Box>
</Grid>
<Grid item>
<Box my={1}>
<Typography variant="body2" color="secondary">
{/* Cookies are not getting stored */}
Account: 7410W19 - INTERNET TEST ACCOUNT
</Typography>
</Box>
</Grid>
</Grid>
<ESpotPlaceholder content="eSpot" mt={5}/>
<Grid container justify="center">
<Grid item xs={12}>
<Box my={4}>
<Grid container justify="space-between">
<Button
dataTestId="redirect-test"
label={t('my-account:my-address-book:newAddress')}
variant="contained"
color="secondary"
onClick={() => Router.push('address-book/new')}
/>
<Button
label={t('common:deleteButton')}
variant="contained"
disabled={isdeletedActive}
color="default"
dataTestId="delete-test"
onClick={handleDelete}
/>
</Grid>
</Box>
<Hidden smDown>
<DataTable
dataTestId="table-test"
rows={addressList}
columns={columnDefs}
checkboxSelection
isRowSelectable={(params) => params.row.idx > 0}
pageSize={5}
onSelectionModelChange={handleSelect}
getRowId={(rows) => rows.addressId}
/>
</Hidden>
<Hidden mdUp>
<DataTable
dataTestId="table-test"
rows={addressList}
columns={columnMobileDefs}
checkboxSelection
isRowSelectable={(params) => params.row.idx > 0}
pageSize={5}
onSelectionModelChange={handleSelect}
getRowId={(rows) => rows.addressId}
/>
</Hidden>
</Grid>
</Grid>
<ESpotPlaceholder content="eSpot" mt={5}/>
</Grid>
</Grid>
</Box>
</Container>
)}
</>
);
};
export const getServerSideProps = async ({locale}) => {
let contacts = [];
let error = false;
await getAddressAndAccountDetail()
.then((res) => {
contacts = res.getAddressList.contact;
})
.catch(() => {
error = true;
});
return {
props: {
...(await serverSideTranslations(locale, ['common', 'my-account', 'navigation'])),
contacts,
error,
},
};
};
export default AddressBook;
以上文件与Data-Grid(Data-Table)自定义Material UI Data-Grid Component相关。在此代码中有一些部分，如 renderCell、handleDelete、handleSelect、isRowSelectable={(params) => params.row.idx > 0} 和 getRowId={(rows) => rows.addressId}。
所以这些部分需要使用 Jest 或 react-testing-library 在测试用例文件中进行测试。
我尝试了很多事情，但无法理解如何涵盖这些陈述。
请指导我的案例，它真的对我有很大帮助。