Блог

 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 amp;amp; 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;
 

Приведенный выше файл связан с Сеткой данных(Таблицей данных), настраивающей компонент сетки данных пользовательского интерфейса материала. В этом коде есть несколько разделов, таких как renderCell , handleDelete , handleSelect , isRowSelectable={(params) => params.row.idx > 0} , и getRowId={(rows) => rows.addressId} .
Поэтому эти части необходимо протестировать в файле тестового примера с помощью Jest или библиотеки реактивного тестирования.
Я перепробовал много вещей, но не смог понять, как охватить эти утверждения.
Пожалуйста, помогите мне с делами, это действительно мне очень помогает.