feat(ResponsiveGrid): test & doc & ts

components/responsive-grid/__docs__/demo/basic/index.tsx

@@ -6,11 +6,12 @@ const { Cell } = ResponsiveGrid;
 
 const ds = ['desktop', 'tablet', 'phone'];
 
+type DemoState = { device: 'phone' | 'tablet' | 'desktop' };
 class Demo extends React.Component {
     state = {
         device: 'desktop',
     };
-    onChange = device => {
+    onChange = (device: DemoState['device']) => {
         this.setState({
             device,
         });
@@ -28,7 +29,7 @@ class Demo extends React.Component {
                 <br />
                 <br />
                 <div className={`list-item ${device}`}>
-                    <ResponsiveGrid gap={10} device={device}>
+                    <ResponsiveGrid gap={10} device={device as DemoState['device']}>
                         <Cell className="mygrid grid-12" colSpan={12}>
                             12
                         </Cell>

components/responsive-grid/__docs__/theme/index.tsx

@@ -0,0 +1,93 @@
+import React from 'react';
+import 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 ResponsiveGrid from '../../index';
+
+const i18nMap = {
+    'zh-cn': {
+        'responsive-grid': '栅格布局',
+        normal: '正常',
+    },
+    'en-us': {
+        'responsive-grid': 'ResponsiveGrid',
+        normal: 'Normal',
+    },
+};
+
+interface DemoState {
+    demoFunction: Record<string, DemoFunctionDefineForObject>;
+}
+interface DemoProps {
+    i18nMap: { [index: string]: string };
+}
+class RenderResponsiveGrid extends React.Component<DemoProps, DemoState> {
+    constructor(props: DemoProps) {
+        super(props);
+        this.state = {
+            demoFunction: {
+                hasChildren: {
+                    label: 'ResponsiveGrid使用',
+                    value: 'false',
+                    enum: [
+                        {
+                            label: '不独立使用',
+                            value: false,
+                        },
+                        {
+                            label: '独立使用',
+                            value: true,
+                        },
+                    ],
+                },
+            },
+        };
+    }
+
+    onFunctionChange = (demoFunction: DemoState['demoFunction']) => {
+        this.setState({ demoFunction });
+    };
+
+    render() {
+        const { i18nMap } = this.props;
+        const { demoFunction } = this.state;
+        const hasChildren = demoFunction.hasChildren.value === 'true';
+
+        return (
+            <Demo
+                title={i18nMap['responsive-grid']}
+                demoFunction={demoFunction}
+                onFunctionChange={this.onFunctionChange}
+            >
+                <Demo title={i18nMap['responsive-grid']}>
+                    <DemoGroup label={i18nMap.normal}>
+                        <ResponsiveGrid children={hasChildren} />
+                    </DemoGroup>
+                </Demo>
+            </Demo>
+        );
+    }
+}
+
+function render(i18nMap: DemoProps['i18nMap'], lang: string) {
+    ReactDOM.render(
+        <ConfigProvider locale={lang === 'en-us' ? enUS : zhCN}>
+            <div className="demo-container">
+                <RenderResponsiveGrid i18nMap={i18nMap} />
+            </div>
+        </ConfigProvider>,
+        document.getElementById('container')
+    );
+}
+
+window.renderDemo = function (lang = 'en-us') {
+    render(i18nMap[lang], lang);
+};
+
+renderDemo();
+
+initDemo('responsive-grid');

components/responsive-grid/__tests__/a11y-spec.js → components/responsive-grid/__tests__/a11y-spec.tsx

@@ -1,26 +1,13 @@
 import React from 'react';
-import Enzyme from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
 import ResponsiveGrid from '../index';
 import '../style';
-import { unmount, testReact } from '../../util/__tests__/legacy/a11y/validate';
+import { testReact } from '../../util/__tests__/a11y/validate';
 
-Enzyme.configure({ adapter: new Adapter() });
 const { Cell } = ResponsiveGrid;
-/* eslint-disable no-undef, react/jsx-filename-extension */
-describe('ResponsiveGrid A11y', () => {
-    let wrapper;
-
-    afterEach(() => {
-        if (wrapper) {
-            wrapper.unmount();
-            wrapper = null;
-        }
-        unmount();
-    });
 
-    it('should render', async () => {
-        wrapper = await testReact(
+describe('ResponsiveGrid A11y', () => {
+    it('should render', () => {
+        testReact(
             <ResponsiveGrid gap={10} device="desktop">
                 <Cell className="mygrid grid-12" colSpan={12}>
                     12
@@ -42,11 +29,10 @@ describe('ResponsiveGrid A11y', () => {
                 </Cell>
             </ResponsiveGrid>
         );
-        return wrapper;
     });
 
-    it('should render in tablet', async () => {
-        wrapper = await testReact(
+    it('should render in tablet', () => {
+        testReact(
             <ResponsiveGrid gap={10} device="tablet">
                 <Cell className="mygrid grid-12" colSpan={12}>
                     12
@@ -68,11 +54,10 @@ describe('ResponsiveGrid A11y', () => {
                 </Cell>
             </ResponsiveGrid>
         );
-        return wrapper;
     });
 
-    it('should render in phone', async () => {
-        wrapper = await testReact(
+    it('should render in phone', () => {
+        testReact(
             <ResponsiveGrid gap={10} device="phone">
                 <Cell className="mygrid grid-12" colSpan={12}>
                     12
@@ -94,6 +79,5 @@ describe('ResponsiveGrid A11y', () => {
                 </Cell>
             </ResponsiveGrid>
         );
-        return wrapper;
     });
 });