feat(Box): adjust ts & docs &test close alibaba-fusion#4566

components/box/__docs__/demo/wrap/index.tsx

@@ -6,7 +6,7 @@ class BoxDemo extends React.Component {
     state = {
         wrap: true,
     };
-    onSwitchChange = checked => {
+    onSwitchChange = (checked: boolean) => {
         this.setState({
             wrap: checked,
         });

components/box/__docs__/theme/index.tsx

@@ -0,0 +1,93 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import '../../../demo-helper/style';
+import { Demo, DemoGroup, initDemo, DemoFunctionDefineForObject } from '../../../demo-helper';
+import ConfigProvider from '../../../config-provider';
+import zhCN from '../../../locale/zh-cn';
+import enUS from '../../../locale/en-us';
+import '../../style';
+import Box from '../../index';
+
+const i18nMap = {
+    'zh-cn': {
+        box: '弹性布局',
+        normal: '正常',
+    },
+    'en-us': {
+        box: 'Box',
+        normal: 'Normal',
+    },
+};
+interface RenderBoxState {
+    demoFunction: Record<string, DemoFunctionDefineForObject>;
+}
+
+interface RenderBoxProps {
+    i18nMap: { [index: string]: string };
+}
+class RenderBox extends React.Component<RenderBoxProps, RenderBoxState> {
+    constructor(props: RenderBoxProps) {
+        super(props);
+        this.state = {
+            demoFunction: {
+                hasChildren: {
+                    label: 'Box使用',
+                    value: 'false',
+                    enum: [
+                        {
+                            label: '不独立使用',
+                            value: false,
+                        },
+                        {
+                            label: '独立使用',
+                            value: true,
+                        },
+                    ],
+                },
+            },
+        };
+    }
+
+    onFunctionChange = (demoFunction: any) => {
+        this.setState({ demoFunction });
+    };
+
+    render() {
+        const { i18nMap } = this.props;
+        const { demoFunction } = this.state;
+        const hasChildren = demoFunction ? demoFunction.hasChildren.value === 'true' : null;
+
+        return (
+            <Demo
+                title={i18nMap.box}
+                demoFunction={demoFunction}
+                onFunctionChange={this.onFunctionChange}
+            >
+                <Demo title={i18nMap.box}>
+                    <DemoGroup label={i18nMap.normal}>
+                        <Box children={hasChildren} />
+                    </DemoGroup>
+                </Demo>
+            </Demo>
+        );
+    }
+}
+
+function render(i18nMap: { box: string; normal: string }, lang: string) {
+    ReactDOM.render(
+        <ConfigProvider locale={lang === 'en-us' ? enUS : zhCN}>
+            <div className="demo-container">
+                <RenderBox i18nMap={i18nMap} />
+            </div>
+        </ConfigProvider>,
+        document.getElementById('container')
+    );
+}
+
+window.renderDemo = function (lang = 'en-us') {
+    render(i18nMap[lang], lang);
+};
+
+renderDemo();
+
+initDemo('box');

components/box/__tests__/a11y-spec.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import Box from '../index';
+import '../style';
+import { testReact } from '../../util/__tests__/a11y/validate';
+
+describe('Box A11y', () => {
+    describe('Box A11y', () => {
+        it('should render', async () => {
+            await testReact(<Box />);
+        });
+    });
+});

components/box/__tests__/index-spec.tsx

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import Box from '../index';
+import '../style';
+
+describe('Box', () => {
+    it('should render', () => {
+        cy.mount(
+            <Box direction="row" wrap className="border-box" spacing={30}>
+                <Box
+                    className="border-box height-100 width-150"
+                    direction="row"
+                    wrap
+                    spacing={8}
+                    padding={10}
+                >
+                    <Box className="border-box height-30 width-30 dashed" />
+                    <Box className="border-box height-30 width-30" />
+                    <Box className="border-box height-30 width-30" />
+                    <Box className="border-box height-30 width-30" />
+                    <Box
+                        className="border-box height-30 width-30 dashed"
+                        margin={[3, 6]}
+                        style={{ marginRight: 10 }}
+                    />
+                    <Box className="border-box height-30 width-30" />
+                </Box>
+
+                <Box className="border-box height-100 width-150" />
+                <Box className="border-box height-100 width-150" />
+                <Box className="border-box height-100 width-150" />
+                <Box className="border-box height-100 width-150" />
+                <Box className="border-box height-100 width-150" />
+                <Box className="border-box height-100 width-150" />
+                <Box className="border-box height-100 width-150" />
+            </Box>
+        );
+        cy.get('.next-box').should('exist');
+    });
+
+    it('justify should work when wrap and spacing setted', () => {
+        cy.mount(
+            <Box className="test" wrap spacing={20} direction="row" justify="center">
+                <Box className="box-180-50" />
+                <Box className="box-180-50" />
+                <Box className="box-180-50" />
+                <Box className="box-180-50" />
+            </Box>
+        );
+        cy.get('.test').should('have.css', 'justify-content', 'center');
+    });
+});