ant-design/components/config-provider/__tests__/components.test.tsx

import dayjs from 'dayjs';
import customParseFormat from 'dayjs/plugin/customParseFormat';
import React from 'react';
import ConfigProvider from '..';
import Alert from '../../alert';
import Anchor from '../../anchor';
import AutoComplete from '../../auto-complete';
import Avatar from '../../avatar';
import BackTop from '../../back-top';
import Badge from '../../badge';
import Breadcrumb from '../../breadcrumb';
import Button from '../../button';
import Calendar from '../../calendar';
import Card from '../../card';
import Carousel from '../../carousel';
import Cascader from '../../cascader';
import Checkbox from '../../checkbox';
import Collapse from '../../collapse';
import DatePicker from '../../date-picker';
import Divider from '../../divider';
import Drawer from '../../drawer';
import Dropdown from '../../dropdown';
import Empty from '../../empty';
import Form from '../../form';
import { Col, Row } from '../../grid';
import Input from '../../input';
import InputNumber from '../../input-number';
import Layout from '../../layout';
import List from '../../list';
import Menu from '../../menu';
import Modal from '../../modal';
import Pagination from '../../pagination';
import Popconfirm from '../../popconfirm';
import Popover from '../../popover';
import Progress from '../../progress';
import Radio from '../../radio';
import Rate from '../../rate';
import Select from '../../select';
import Skeleton from '../../skeleton';
import type { SliderTooltipProps } from '../../slider';
import Slider from '../../slider';
// eslint-disable-next-line import/no-named-as-default
import { render } from '../../../tests/utils';
import Spin from '../../spin';
import Statistic from '../../statistic';
import Steps from '../../steps';
import Switch from '../../switch';
import type { ColumnsType } from '../../table';
import Table from '../../table';
import Tabs from '../../tabs';
import Tag from '../../tag';
import TimePicker from '../../time-picker';
import Timeline from '../../timeline';
import Tooltip from '../../tooltip';
import Transfer from '../../transfer';
import Tree from '../../tree';
import TreeSelect from '../../tree-select';
import Upload from '../../upload';

dayjs.extend(customParseFormat);
jest.mock('rc-util/lib/Portal');

describe('ConfigProvider', () => {
  describe('components', () => {
    function testPair(name: string, renderComponent: (props?: any) => React.ReactElement): void {
      const isArray = ['Menu', 'TimePicker', 'Tooltip'].includes(name);
      describe(`${name}`, () => {
        // normal
        it('normal', () => {
          const { container } = render(renderComponent({}));
          expect(isArray ? container.children : container.firstChild).toMatchSnapshot();
        });

        // prefixCls
        it('prefixCls', () => {
          const { container } = render(renderComponent({ prefixCls: `prefix-${name}` }));
          expect(isArray ? container.children : container.firstChild).toMatchSnapshot();
        });

        // configProvider
        it('configProvider', () => {
          const { container } = render(
            <ConfigProvider pageHeader={{ ghost: false }} prefixCls="config">
              {renderComponent({})}
            </ConfigProvider>,
          );
          expect(isArray ? container.children : container.firstChild).toMatchSnapshot();
        });

        it('configProvider componentSize large', () => {
          const { container } = render(
            <ConfigProvider componentSize="large" prefixCls="config">
              {renderComponent({})}
            </ConfigProvider>,
          );
          expect(isArray ? container.children : container.firstChild).toMatchSnapshot();
        });

        it('configProvider componentSize middle', () => {
          const { container } = render(
            <ConfigProvider componentSize="middle" prefixCls="config">
              {renderComponent({})}
            </ConfigProvider>,
          );
          expect(isArray ? container.children : container.firstChild).toMatchSnapshot();
        });

        it('configProvider componentSize small', () => {
          const { container } = render(
            <ConfigProvider componentSize="small" prefixCls="config">
              {renderComponent({})}
            </ConfigProvider>,
          );
          expect(isArray ? container.children : container.firstChild).toMatchSnapshot();
        });

        it('configProvider componentDisabled', () => {
          const { container } = render(
            <ConfigProvider componentDisabled prefixCls="config">
              {renderComponent({})}
            </ConfigProvider>,
          );
          expect(isArray ? container.children : container.firstChild).toMatchSnapshot();
        });

        it('configProvider virtual and dropdownMatchSelectWidth', () => {
          const { container } = render(
            <ConfigProvider virtual={false} dropdownMatchSelectWidth={false}>
              {renderComponent({})}
            </ConfigProvider>,
          );
          expect(isArray ? container.children : container.firstChild).toMatchSnapshot();
        });
      });
    }

    // Alert
    testPair('Alert', (props) => (
      <Alert {...props} message="Bamboo is Little Light" type="success" />
    ));

    // Anchor
    testPair('Anchor', (props) => (
      <Anchor {...props}>
        <Anchor.Link {...props} href="#bamboo" title="Little Light" />
      </Anchor>
    ));

    // AutoComplete
    testPair('AutoComplete', (props) => <AutoComplete {...props} />);

    // Avatar
    testPair('Avatar', (props) => <Avatar {...props} />);

    // BackTop
    testPair('BackTop', (props) => <BackTop visibilityHeight={0} {...props} />);

    // Badge
    testPair('Badge', (props) => {
      const newProps = { ...props };

      // Hook for additional `scrollNumberPrefixCls` prop
      if (props.prefixCls) {
        newProps.scrollNumberPrefixCls = 'prefix-scroll-number';
      }

      return (
        <div>
          <Badge {...newProps} count={5}>
            <span />
          </Badge>
          <Badge {...newProps} dot>
            <span />
          </Badge>
        </div>
      );
    });

    // Breadcrumb
    testPair('Breadcrumb', (props) => (
      <Breadcrumb {...props}>
        <Breadcrumb.Item {...props}>Bamboo</Breadcrumb.Item>
        <Breadcrumb.Item {...props}>Light</Breadcrumb.Item>
      </Breadcrumb>
    ));

    // Button
    testPair('Button', (props) => (
      <div>
        <Button {...props}>Bamboo</Button>
        <Button.Group {...props}>
          <Button {...props}>Little</Button>
          <Button {...props}>Light</Button>
        </Button.Group>
      </div>
    ));

    // Calendar
    testPair('Calendar', (props) => (
      <div>
        <Calendar {...props} value={dayjs('2000-09-03')} mode="month" />
        <Calendar {...props} value={dayjs('2000-09-03')} mode="year" />
      </div>
    ));

    // Card
    testPair('Card', (props) => (
      <Card {...props}>
        <Card.Grid {...props}>
          <Card.Meta {...props} />
        </Card.Grid>
      </Card>
    ));

    // Carousel
    testPair('Carousel', (props) => (
      <Carousel {...props}>
        <div>
          <h3>Bamboo</h3>
        </div>
        <div>
          <h3>Light</h3>
        </div>
      </Carousel>
    ));

    // Cascader
    testPair('Cascader', (props) => <Cascader {...props} options={[]} showSearch />);

    // Checkbox
    testPair('Checkbox', (props) => (
      <Checkbox.Group {...props}>
        <Checkbox {...props}>Bamboo</Checkbox>
      </Checkbox.Group>
    ));

    // Collapse
    testPair('Collapse', (props) => (
      <Collapse {...props}>
        <Collapse.Panel key="Collapse" header="Bamboo">
          <p>Light</p>
        </Collapse.Panel>
      </Collapse>
    ));

    // DatePicker
    describe('DatePicker', () => {
      testPair('DatePicker', (props) => (
        <div>
          <DatePicker {...props} />
        </div>
      ));

      // RangePicker
      testPair('RangePicker', (props) => (
        <div>
          <DatePicker.RangePicker {...props} />
        </div>
      ));

      // MonthPicker
      testPair('MonthPicker', (props) => (
        <div>
          <DatePicker.MonthPicker {...props} />
        </div>
      ));

      // WeekPicker
      testPair('WeekPicker', (props) => (
        <div>
          <DatePicker.WeekPicker {...props} />
        </div>
      ));
    });

    // Empty
    testPair('Empty', (props) => <Empty {...props} />);

    // Divider
    testPair('Divider', (props) => <Divider {...props} />);

    // Drawer
    testPair('Drawer', (props) => <Drawer {...props} open getContainer={false} />);

    // Dropdown
    testPair('Dropdown', (props) => <Dropdown.Button {...props}>Light</Dropdown.Button>);

    // Form
    testPair('Form', (props) => (
      <Form {...props}>
        <Form.Item {...props} validateStatus="error" help="Bamboo is Light">
          <Input {...props} />
        </Form.Item>
      </Form>
    ));

    // Grid
    testPair('Grid', (props) => {
      const rowProps: { prefixCls?: string } = {};
      const colProps: { prefixCls?: string } = {};
      if (props.prefixCls) {
        rowProps.prefixCls = 'prefix-row';
        colProps.prefixCls = 'prefix-col';
      }

      return (
        <Row {...rowProps}>
          <Col {...colProps} span={1} />
        </Row>
      );
    });

    // Input
    testPair('Input', (props) => (
      <div>
        <Input.Group {...props}>
          <Input {...props} />
          <Input.Search {...props} />
        </Input.Group>
        <Input.Password {...props} />
        <Input.TextArea {...props} />
      </div>
    ));

    // InputNumber
    testPair('InputNumber', (props) => <InputNumber {...props} />);

    // Layout
    testPair('Layout', (props) => {
      const siderProps: { prefixCls?: string } = {};
      const headerProps: { prefixCls?: string } = {};
      const contentProps: { prefixCls?: string } = {};
      const footerProps: { prefixCls?: string } = {};
      if (props.prefixCls) {
        siderProps.prefixCls = 'prefix-sider';
        headerProps.prefixCls = 'prefix-header';
        contentProps.prefixCls = 'prefix-content';
        footerProps.prefixCls = 'prefix-footer';
      }

      return (
        <Layout {...props}>
          <Layout.Sider {...siderProps} />
          <Layout {...props}>
            <Layout.Header {...headerProps} />
            <Layout.Content {...contentProps} />
            <Layout.Footer {...footerProps} />
          </Layout>
        </Layout>
      );
    });

    // List
    testPair('List', (props) => (
      <List
        {...props}
        itemLayout="horizontal"
        dataSource={['']}
        renderItem={() => (
          <List.Item {...props}>
            <List.Item.Meta
              {...props}
              avatar={<Avatar src="https://xsgames.co/randomusers/avatar.php?g=pixel" />}
              title="Ant Design"
              description="Ant Design, a design language for background applications, is refined by Ant UED Team"
            />
          </List.Item>
        )}
      />
    ));

    // Menu
    testPair('Menu', (props) => (
      <Menu {...props} defaultOpenKeys={['bamboo']} mode="inline">
        <Menu.SubMenu {...props} key="bamboo" title="bamboo">
          <Menu.ItemGroup {...props} key="g1" title="Item 1">
            <Menu.Item {...props} key="1">
              Light
            </Menu.Item>
          </Menu.ItemGroup>
        </Menu.SubMenu>
      </Menu>
    ));

    // Modal
    testPair('Modal', (props) => (
      <div>
        <Modal {...props} open getContainer={false}>
          Bamboo is Little Light
        </Modal>
      </div>
    ));

    // Pagination
    testPair('Pagination', (props) => (
      <div>
        <Pagination showSizeChanger showQuickJumper {...props} />
        <Pagination size="small" showSizeChanger showQuickJumper {...props} />
      </div>
    ));

    // Popconfirm
    testPair('Popconfirm', (props) => (
      <div>
        <Popconfirm {...props} open>
          <span>Bamboo</span>
        </Popconfirm>
      </div>
    ));

    // Popover
    testPair('Popover', (props) => (
      <div>
        <Popover {...props} open>
          <span>Light</span>
        </Popover>
      </div>
    ));

    // Progress
    testPair('Progress', (props) => <Progress {...props} />);

    // Radio
    testPair('Radio', (props) => (
      <div>
        <Radio.Group {...props}>
          <Radio {...props}>Bamboo</Radio>
        </Radio.Group>
        <Radio.Group {...props}>
          <Radio.Button {...props}>Light</Radio.Button>
        </Radio.Group>
      </div>
    ));

    // Rate
    testPair('Rate', (props) => <Rate {...props} />);

    // Select
    testPair('Select', (props) => (
      <Select {...props} open>
        <Select.OptGroup key="grp">
          <Select.Option key="Bamboo">Light</Select.Option>
        </Select.OptGroup>
      </Select>
    ));

    // Skeleton
    testPair('Skeleton', (props) => <Skeleton title avatar paragraph {...props} />);

    // Slider
    testPair('Slider', (props) => {
      const myProps = { ...props };
      const tooltip: SliderTooltipProps = {
        open: true,
      };

      if (myProps.prefixCls) {
        tooltip.prefixCls = `${myProps.prefixCls}-tooltip`;
      }
      return <Slider tooltip={tooltip} {...myProps} />;
    });

    // Spin
    testPair('Spin', (props) => <Spin {...props} />);

    // Statistic
    testPair('Statistic', (props) => <Statistic {...props} value={0} />);

    // Steps
    testPair('Steps', (props) => {
      const myProps = { ...props };
      if (props.prefixCls) {
        myProps.iconPrefix = 'prefixIcon';
      }
      return (
        <Steps
          {...props}
          items={[
            {
              title: 'Bamboo',
              description: 'Little Light',
            },
          ]}
        />
      );
    });

    // Switch
    testPair('Switch', (props) => <Switch {...props} />);

    // Table
    testPair('Table', (props) => {
      const columns: ColumnsType<any> = [
        {
          title: 'Name',
          dataIndex: 'name',
          filters: [
            { text: 'Joe', value: 'Joe' },
            {
              text: 'Submenu',
              value: 'Submenu',
              children: [{ text: 'Green', value: 'Green' }],
            },
          ],
          filterDropdownOpen: true,
          onFilter: (value, record) => record.name.indexOf(value) === 0,
          sorter: (a, b) => a.name.length - b.name.length,
        },
      ];

      const myProps = { ...props };
      if (props.prefixCls) {
        myProps.dropdownPrefixCls = 'prefix-dropdown';
      }

      return <Table columns={columns} {...props} />;
    });

    // Tabs
    testPair('Tabs', (props) => (
      <Tabs {...props}>
        <Tabs.TabPane tab="Bamboo" key="Light" />
      </Tabs>
    ));

    // Tags
    testPair('Tags', (props) => (
      <div>
        <Tag {...props}>Bamboo</Tag>
        <Tag.CheckableTag {...props}>Light</Tag.CheckableTag>
      </div>
    ));

    // TimePicker
    testPair('TimePicker', (props) => (
      <TimePicker {...props} open defaultOpenValue={dayjs('00:00:00', 'HH:mm:ss')} />
    ));

    // Timeline
    testPair('Timeline', (props) => (
      <Timeline {...props}>
        <Timeline.Item {...props}>Bamboo</Timeline.Item>
      </Timeline>
    ));

    // Tooltip
    testPair('Tooltip', (props) => (
      <Tooltip {...props} title="Bamboo" open>
        <span>Light</span>
      </Tooltip>
    ));

    // Transfer
    testPair('Transfer', (props) => <Transfer {...props} dataSource={[]} />);

    // Tree
    testPair('Tree', (props) => (
      <div>
        <Tree {...props}>
          <Tree.TreeNode title="bamboo" />
        </Tree>
        <Tree.DirectoryTree {...props}>
          <Tree.TreeNode title="bamboo" />
        </Tree.DirectoryTree>
      </div>
    ));

    // TreeSelect
    testPair('TreeSelect', (props) => (
      <TreeSelect {...props} open>
        <TreeSelect.TreeNode title="bamboo" value="light" />
      </TreeSelect>
    ));

    // Upload
    testPair('Upload', (props) => (
      <Upload {...props} defaultFileList={[{ uid: '1', name: 'xxx.png', status: 'done' }]}>
        <span />
      </Upload>
    ));
  });
});