Merge pull request #169 from lowdefy/blocks-antd-skeleton

feat(blocksAntd): skeleton examples
2025-04-12 15:40:30 +08:00 · 2020-11-20 14:30:45 +02:00 · 2020-11-20 14:30:45 +02:00 · 8b0cef4ed8
commit 8b0cef4ed8
parent 5a5f3ebde3 1e356a5080
16 changed files with 720 additions and 52 deletions
--- a/packages/blockTools/jest.config.js
+++ b/packages/blockTools/jest.config.js
@ -8,7 +8,7 @@ module.exports = {
    '<rootDir>/tests/',
    'runRenderTests.js',
    'runMockRenderTests.js',
-    'runMethodTests.js',
+    'runMockMethodTests.js',
    'runBlockSchemaTests.js',
    'mockBlock.js',
  ],
--- a/packages/blockTools/src/index.js
+++ b/packages/blockTools/src/index.js
@ -23,7 +23,7 @@ import makeCssClass from './makeCssClass.js';
 import mediaToCssObject from './mediaToCssObject.js';
 import mockBlock from './mockBlock';
 import runBlockSchemaTests from './runBlockSchemaTests';
-import runMethodTests from './runMethodTests';
+import runMockMethodTests from './runMockMethodTests';
 import runMockRenderTests from './runMockRenderTests';
 import runRenderTests from './runRenderTests';
 import Skeleton from './Skeleton/Skeleton';
@ -45,7 +45,7 @@ export {
  mediaToCssObject,
  mockBlock,
  runBlockSchemaTests,
-  runMethodTests,
+  runMockMethodTests,
  runMockRenderTests,
  runRenderTests,
  Skeleton,
--- a/packages/blockTools/src/runMockMethodTests.js
+++ b/packages/blockTools/src/runMockMethodTests.js
@ -19,7 +19,7 @@ import { type } from '@lowdefy/helpers';

 import mockBlock from './mockBlock';

-const runMethodTests = ({ Block, enzyme, examples, logger, meta, mocks }) => {
+const runMockMethodTests = ({ Block, enzyme, examples, logger, meta, mocks }) => {
  const { before, methods, getProps } = mockBlock({ meta, logger });

  beforeEach(() => {
@ -64,4 +64,4 @@ const runMethodTests = ({ Block, enzyme, examples, logger, meta, mocks }) => {
  });
 };

-export default runMethodTests;
+export default runMockMethodTests;
--- a/packages/blockTools/src/runMockRenderTests.js
+++ b/packages/blockTools/src/runMockRenderTests.js
@ -19,7 +19,7 @@ import { type } from '@lowdefy/helpers';

 import mockBlock from './mockBlock';

-const runMockRenderTests = ({ Block, enzyme, examples, logger, meta, mock }) => {
+const runMockRenderTests = ({ Block, enzyme, examples, logger, meta, mocks }) => {
  const { before, methods, getProps } = mockBlock({ meta, logger });

  beforeEach(() => {
@ -31,10 +31,12 @@ const runMockRenderTests = ({ Block, enzyme, examples, logger, meta, mock }) =>

  examples.forEach((ex) => {
    values.forEach((value, v) => {
-      test(`Render ${ex.id} - value[${v}] - ${mock.name}`, () => {
-        const Shell = () => <Block {...getProps(ex)} value={value} />;
-        enzyme.mount(<Shell />);
-        expect(mock.fn.mock.calls).toMatchSnapshot();
+      mocks.forEach((mock) => {
+        test(`Mock render - ${ex.id} - value[${v}] - ${mock.name}`, () => {
+          const Shell = () => <Block {...getProps(ex)} value={value} />;
+          enzyme.mount(<Shell />);
+          expect(mock.fn.mock.calls).toMatchSnapshot();
+        });
      });
    });
  });
--- a/packages/blocksAntd/demo/examples/Skeleton.yaml
+++ b/packages/blocksAntd/demo/examples/Skeleton.yaml
@ -3,4 +3,60 @@
 - id: properties.active
  type: Skeleton
  properties:
-    active: true
+    active: true
+- id: "properties.title boolean"
+  type: Skeleton
+  properties:
+    title: false
+- id: "properties.title object"
+  type: Skeleton
+  properties:
+    title:
+      width: 250
+- id: "properties.avatar boolean"
+  type: Skeleton
+  properties:
+    avatar: true
+- id: "properties.avatar object circle"
+  type: Skeleton
+  properties:
+    avatar:
+      shape: circle
+      size: large
+- id: "properties.avatar object square"
+  type: Skeleton
+  properties:
+    avatar:
+      shape: square
+      size: small
+- id: "properties.button object circle"
+  type: Skeleton
+  properties:
+    button:
+      shape: circle
+      size: large
+- id: "properties.button object round"
+  type: Skeleton
+  properties:
+    button:
+      shape: round
+      size: small
+- id: "properties.paragraph boolean"
+  type: Skeleton
+  properties:
+    paragraph: false
+- id: "properties.paragraph object width all"
+  type: Skeleton
+  properties:
+    paragraph:
+      rows: 3
+      width: 300
+- id: "properties.paragraph object width array"
+  type: Skeleton
+  properties:
+    paragraph:
+      rows: 3
+      width:
+        - 700
+        - 250
+        - 500
--- a/packages/blocksAntd/src/blocks/Skeleton/Skeleton.json
+++ b/packages/blocksAntd/src/blocks/Skeleton/Skeleton.json
@ -21,7 +21,7 @@
          "description": "Show paragraph and title radius when true."
        },
        "avatar": {
-          "anyOf": [
+          "oneOf": [
            {
              "type": "boolean",
              "default": false,
@ -55,7 +55,7 @@
          ]
        },
        "button": {
-          "anyOf": [
+          "oneOf": [
            {
              "type": "boolean",
              "default": false,
@ -81,7 +81,7 @@
          ]
        },
        "paragraph": {
-          "anyOf": [
+          "oneOf": [
            {
              "type": "boolean",
              "default": true,
@ -103,7 +103,7 @@
          ]
        },
        "title": {
-          "anyOf": [
+          "oneOf": [
            {
              "type": "boolean",
              "default": true,
--- a/packages/blocksAntd/tests/ConfirmModal.test.js
+++ b/packages/blocksAntd/tests/ConfirmModal.test.js
@ -14,7 +14,7 @@
  limitations under the License.
 */

-import { runBlockSchemaTests, runMethodTests } from '@lowdefy/block-tools';
+import { runBlockSchemaTests, runMockMethodTests } from '@lowdefy/block-tools';
 import Enzyme, { mount } from 'enzyme';
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import { Modal } from 'antd';
@ -57,5 +57,5 @@ const mocks = [
  },
 ];

-runMethodTests({ examples, Block: ConfirmModal, mocks, meta, enzyme: { mount } });
+runMockMethodTests({ examples, Block: ConfirmModal, mocks, meta, enzyme: { mount } });
 runBlockSchemaTests({ examples, meta });
--- a/packages/blocksAntd/tests/Drawer.test.js
+++ b/packages/blocksAntd/tests/Drawer.test.js
@ -14,7 +14,7 @@
  limitations under the License.
 */

-import { runBlockSchemaTests, runMethodTests } from '@lowdefy/block-tools';
+import { runBlockSchemaTests, runMockMethodTests } from '@lowdefy/block-tools';
 import Enzyme, { mount } from 'enzyme';
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import { Drawer } from 'antd';
@ -25,7 +25,7 @@ import examples from '../demo/examples/Drawer.yaml';
 import meta from '../src/blocks/Drawer/Drawer.json';

 jest.mock('antd/lib/drawer', () => {
-  return jest.fn((props) => props.toString());
+  return jest.fn(() => 'mocked');
 });

 const mocks = [
@ -35,5 +35,5 @@ const mocks = [
  },
 ];

-runMethodTests({ examples, Block: DrawerBlock, mocks, meta, enzyme: { mount } });
+runMockMethodTests({ examples, Block: DrawerBlock, mocks, meta, enzyme: { mount } });
 runBlockSchemaTests({ examples, meta });
--- a/packages/blocksAntd/tests/Message.test.js
+++ b/packages/blocksAntd/tests/Message.test.js
@ -14,7 +14,7 @@
  limitations under the License.
 */

-import { runBlockSchemaTests, runMethodTests } from '@lowdefy/block-tools';
+import { runBlockSchemaTests, runMockMethodTests } from '@lowdefy/block-tools';
 import Enzyme, { mount } from 'enzyme';
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import { message } from 'antd';
@ -57,5 +57,5 @@ const mocks = [
  },
 ];

-runMethodTests({ examples, Block: Message, meta, mocks, enzyme: { mount } });
+runMockMethodTests({ examples, Block: Message, meta, mocks, enzyme: { mount } });
 runBlockSchemaTests({ examples, meta });
--- a/packages/blocksAntd/tests/Modal.test.js
+++ b/packages/blocksAntd/tests/Modal.test.js
@ -14,7 +14,7 @@
  limitations under the License.
 */

-import { runBlockSchemaTests, runMethodTests } from '@lowdefy/block-tools';
+import { runBlockSchemaTests, runMockMethodTests } from '@lowdefy/block-tools';
 import Enzyme, { mount } from 'enzyme';
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import { Modal } from 'antd';
@ -25,7 +25,7 @@ import examples from '../demo/examples/Modal.yaml';
 import meta from '../src/blocks/Modal/Modal.json';

 jest.mock('antd/lib/modal', () => {
-  return jest.fn((props) => props.toString());
+  return jest.fn(() => 'mocked');
 });

 const mocks = [
@ -35,5 +35,5 @@ const mocks = [
  },
 ];

-runMethodTests({ examples, Block: ModalBlock, mocks, meta, enzyme: { mount } });
+runMockMethodTests({ examples, Block: ModalBlock, mocks, meta, enzyme: { mount } });
 runBlockSchemaTests({ examples, meta });
--- a/packages/blocksAntd/tests/Notification.test.js
+++ b/packages/blocksAntd/tests/Notification.test.js
@ -14,7 +14,7 @@
  limitations under the License.
 */

-import { runBlockSchemaTests, runMethodTests } from '@lowdefy/block-tools';
+import { runBlockSchemaTests, runMockMethodTests } from '@lowdefy/block-tools';
 import Enzyme, { mount } from 'enzyme';
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import { notification } from 'antd';
@ -52,5 +52,5 @@ const mocks = [
  },
 ];

-runMethodTests({ examples, Block: Notification, meta, mocks, enzyme: { mount } });
+runMockMethodTests({ examples, Block: Notification, meta, mocks, enzyme: { mount } });
 runBlockSchemaTests({ examples, meta });
--- a/packages/blocksAntd/tests/Progress.mock.test.js
+++ b/packages/blocksAntd/tests/Progress.mock.test.js
@ -25,12 +25,14 @@ import examples from '../demo/examples/Progress.yaml';
 import meta from '../src/blocks/Progress/Progress.json';

 jest.mock('antd/lib/progress', () => {
-  return jest.fn((props) => props.toString());
+  return jest.fn(() => 'mocked');
 });

-const mock = {
-  name: 'default',
-  fn: Progress,
-};
+const mocks = [
+  {
+    name: 'default',
+    fn: Progress,
+  },
+];

-runMockRenderTests({ examples, Block: ProgressBlock, meta, mock, enzyme: { mount } });
+runMockRenderTests({ examples, Block: ProgressBlock, meta, mocks, enzyme: { mount } });
--- a/packages/blocksAntd/tests/Skeleton.mock.test.js
+++ b/packages/blocksAntd/tests/Skeleton.mock.test.js
@ -0,0 +1,54 @@
+/*
+  Copyright 2020 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+import { runMockRenderTests } from '@lowdefy/block-tools';
+import Enzyme, { mount } from 'enzyme';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
+import { Skeleton } from 'antd';
+
+Enzyme.configure({ adapter: new Adapter() });
+import SkeletonBlock from '../src/blocks/Skeleton/Skeleton';
+import examples from '../demo/examples/Skeleton.yaml';
+import meta from '../src/blocks/Skeleton/Skeleton.json';
+
+jest.mock('antd/lib/skeleton', () => {
+  const skeleton = jest.fn(() => 'mocked');
+  skeleton.Avatar = jest.fn(() => 'mocked');
+  skeleton.Button = jest.fn(() => 'mocked');
+  skeleton.Input = jest.fn(() => 'mocked');
+  return skeleton;
+});
+
+const mocks = [
+  {
+    name: 'default',
+    fn: Skeleton,
+  },
+  {
+    name: 'Avatar',
+    fn: Skeleton.Avatar,
+  },
+  {
+    name: 'Button',
+    fn: Skeleton.Button,
+  },
+  {
+    name: 'Input',
+    fn: Skeleton.Input,
+  },
+];
+
+runMockRenderTests({ examples, Block: SkeletonBlock, meta, mocks, enzyme: { mount } });
--- a/packages/blocksAntd/tests/snapshots/Progress.mock.test.js.snap
+++ b/packages/blocksAntd/tests/snapshots/Progress.mock.test.js.snap
@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

-exports[`Render default - value[0] - default 1`] = `
+exports[`Mock render - default - value[0] - default 1`] = `
 Array [
  Array [
    Object {
@ -24,7 +24,7 @@ Array [
 ]
 `;

-exports[`Render properties.gapDegree: 60 - value[0] - default 1`] = `
+exports[`Mock render - properties.gapDegree: 60 - value[0] - default 1`] = `
 Array [
  Array [
    Object {
@ -48,7 +48,7 @@ Array [
 ]
 `;

-exports[`Render properties.gapPosition: bottom - value[0] - default 1`] = `
+exports[`Mock render - properties.gapPosition: bottom - value[0] - default 1`] = `
 Array [
  Array [
    Object {
@ -72,7 +72,7 @@ Array [
 ]
 `;

-exports[`Render properties.gapPosition: left - value[0] - default 1`] = `
+exports[`Mock render - properties.gapPosition: left - value[0] - default 1`] = `
 Array [
  Array [
    Object {
@ -96,7 +96,7 @@ Array [
 ]
 `;

-exports[`Render properties.gapPosition: right - value[0] - default 1`] = `
+exports[`Mock render - properties.gapPosition: right - value[0] - default 1`] = `
 Array [
  Array [
    Object {
@ -120,7 +120,7 @@ Array [
 ]
 `;

-exports[`Render properties.percent - value[0] - default 1`] = `
+exports[`Mock render - properties.percent - value[0] - default 1`] = `
 Array [
  Array [
    Object {
@ -144,7 +144,7 @@ Array [
 ]
 `;

-exports[`Render properties.showInfo: false - value[0] - default 1`] = `
+exports[`Mock render - properties.showInfo: false - value[0] - default 1`] = `
 Array [
  Array [
    Object {
@ -168,7 +168,7 @@ Array [
 ]
 `;

-exports[`Render properties.status: active - value[0] - default 1`] = `
+exports[`Mock render - properties.status: active - value[0] - default 1`] = `
 Array [
  Array [
    Object {
@ -192,7 +192,7 @@ Array [
 ]
 `;

-exports[`Render properties.status: exception - value[0] - default 1`] = `
+exports[`Mock render - properties.status: exception - value[0] - default 1`] = `
 Array [
  Array [
    Object {
@ -216,7 +216,7 @@ Array [
 ]
 `;

-exports[`Render properties.status: normal - value[0] - default 1`] = `
+exports[`Mock render - properties.status: normal - value[0] - default 1`] = `
 Array [
  Array [
    Object {
@ -240,7 +240,7 @@ Array [
 ]
 `;

-exports[`Render properties.status: success - value[0] - default 1`] = `
+exports[`Mock render - properties.status: success - value[0] - default 1`] = `
 Array [
  Array [
    Object {
@ -264,7 +264,7 @@ Array [
 ]
 `;

-exports[`Render properties.strokeColor: '#e91e63'  trailColor: '#ff9800' - value[0] - default 1`] = `
+exports[`Mock render - properties.strokeColor: '#e91e63'  trailColor: '#ff9800' - value[0] - default 1`] = `
 Array [
  Array [
    Object {
@ -288,7 +288,7 @@ Array [
 ]
 `;

-exports[`Render properties.strokeColor: '#e91e63' - value[0] - default 1`] = `
+exports[`Mock render - properties.strokeColor: '#e91e63' - value[0] - default 1`] = `
 Array [
  Array [
    Object {
@ -312,7 +312,7 @@ Array [
 ]
 `;

-exports[`Render properties.strokeLinecap: square  - value[0] - default 1`] = `
+exports[`Mock render - properties.strokeLinecap: square  - value[0] - default 1`] = `
 Array [
  Array [
    Object {
@ -336,7 +336,7 @@ Array [
 ]
 `;

-exports[`Render properties.strokeWidth: 18 - value[0] - default 1`] = `
+exports[`Mock render - properties.strokeWidth: 18 - value[0] - default 1`] = `
 Array [
  Array [
    Object {
@ -360,7 +360,7 @@ Array [
 ]
 `;

-exports[`Render properties.trailColor: '#ff9800' - value[0] - default 1`] = `
+exports[`Mock render - properties.trailColor: '#ff9800' - value[0] - default 1`] = `
 Array [
  Array [
    Object {
@ -384,7 +384,7 @@ Array [
 ]
 `;

-exports[`Render properties.type: circle - value[0] - default 1`] = `
+exports[`Mock render - properties.type: circle - value[0] - default 1`] = `
 Array [
  Array [
    Object {
@ -408,7 +408,7 @@ Array [
 ]
 `;

-exports[`Render properties.type: dashboard - value[0] - default 1`] = `
+exports[`Mock render - properties.type: dashboard - value[0] - default 1`] = `
 Array [
  Array [
    Object {
@ -432,7 +432,7 @@ Array [
 ]
 `;

-exports[`Render properties.width: 180 - value[0] - default 1`] = `
+exports[`Mock render - properties.width: 180 - value[0] - default 1`] = `
 Array [
  Array [
    Object {
--- a/packages/blocksAntd/tests/snapshots/Skeleton.mock.test.js.snap
+++ b/packages/blocksAntd/tests/snapshots/Skeleton.mock.test.js.snap
@ -0,0 +1,279 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Mock render - default - value[0] - Avatar 1`] = `Array []`;
+
+exports[`Mock render - default - value[0] - Button 1`] = `Array []`;
+
+exports[`Mock render - default - value[0] - Input 1`] = `Array []`;
+
+exports[`Mock render - default - value[0] - default 1`] = `
+Array [
+  Array [
+    Object {
+      "active": undefined,
+      "avatar": undefined,
+      "className": "css-0",
+      "id": "default",
+      "paragraph": undefined,
+      "round": undefined,
+      "title": undefined,
+    },
+    Object {},
+  ],
+]
+`;
+
+exports[`Mock render - properties.active - value[0] - Avatar 1`] = `Array []`;
+
+exports[`Mock render - properties.active - value[0] - Button 1`] = `Array []`;
+
+exports[`Mock render - properties.active - value[0] - Input 1`] = `Array []`;
+
+exports[`Mock render - properties.active - value[0] - default 1`] = `
+Array [
+  Array [
+    Object {
+      "active": true,
+      "avatar": undefined,
+      "className": "css-0",
+      "id": "properties.active",
+      "paragraph": undefined,
+      "round": undefined,
+      "title": undefined,
+    },
+    Object {},
+  ],
+]
+`;
+
+exports[`Mock render - properties.avatar boolean - value[0] - Avatar 1`] = `
+Array [
+  Array [
+    Object {
+      "active": undefined,
+      "className": "css-0",
+      "id": "properties.avatar boolean",
+      "shape": undefined,
+      "size": undefined,
+    },
+    Object {},
+  ],
+]
+`;
+
+exports[`Mock render - properties.avatar boolean - value[0] - Button 1`] = `Array []`;
+
+exports[`Mock render - properties.avatar boolean - value[0] - Input 1`] = `Array []`;
+
+exports[`Mock render - properties.avatar boolean - value[0] - default 1`] = `Array []`;
+
+exports[`Mock render - properties.avatar object circle - value[0] - Avatar 1`] = `
+Array [
+  Array [
+    Object {
+      "active": undefined,
+      "className": "css-0",
+      "id": "properties.avatar object circle",
+      "shape": "circle",
+      "size": "large",
+    },
+    Object {},
+  ],
+]
+`;
+
+exports[`Mock render - properties.avatar object circle - value[0] - Button 1`] = `Array []`;
+
+exports[`Mock render - properties.avatar object circle - value[0] - Input 1`] = `Array []`;
+
+exports[`Mock render - properties.avatar object circle - value[0] - default 1`] = `Array []`;
+
+exports[`Mock render - properties.avatar object square - value[0] - Avatar 1`] = `
+Array [
+  Array [
+    Object {
+      "active": undefined,
+      "className": "css-0",
+      "id": "properties.avatar object square",
+      "shape": "square",
+      "size": "small",
+    },
+    Object {},
+  ],
+]
+`;
+
+exports[`Mock render - properties.avatar object square - value[0] - Button 1`] = `Array []`;
+
+exports[`Mock render - properties.avatar object square - value[0] - Input 1`] = `Array []`;
+
+exports[`Mock render - properties.avatar object square - value[0] - default 1`] = `Array []`;
+
+exports[`Mock render - properties.button object circle - value[0] - Avatar 1`] = `Array []`;
+
+exports[`Mock render - properties.button object circle - value[0] - Button 1`] = `
+Array [
+  Array [
+    Object {
+      "active": undefined,
+      "className": "css-0",
+      "id": "properties.button object circle",
+      "shape": "circle",
+      "size": "large",
+    },
+    Object {},
+  ],
+]
+`;
+
+exports[`Mock render - properties.button object circle - value[0] - Input 1`] = `Array []`;
+
+exports[`Mock render - properties.button object circle - value[0] - default 1`] = `Array []`;
+
+exports[`Mock render - properties.button object round - value[0] - Avatar 1`] = `Array []`;
+
+exports[`Mock render - properties.button object round - value[0] - Button 1`] = `
+Array [
+  Array [
+    Object {
+      "active": undefined,
+      "className": "css-0",
+      "id": "properties.button object round",
+      "shape": "round",
+      "size": "small",
+    },
+    Object {},
+  ],
+]
+`;
+
+exports[`Mock render - properties.button object round - value[0] - Input 1`] = `Array []`;
+
+exports[`Mock render - properties.button object round - value[0] - default 1`] = `Array []`;
+
+exports[`Mock render - properties.paragraph boolean - value[0] - Avatar 1`] = `Array []`;
+
+exports[`Mock render - properties.paragraph boolean - value[0] - Button 1`] = `Array []`;
+
+exports[`Mock render - properties.paragraph boolean - value[0] - Input 1`] = `Array []`;
+
+exports[`Mock render - properties.paragraph boolean - value[0] - default 1`] = `
+Array [
+  Array [
+    Object {
+      "active": undefined,
+      "avatar": undefined,
+      "className": "css-0",
+      "id": "properties.paragraph boolean",
+      "paragraph": false,
+      "round": undefined,
+      "title": undefined,
+    },
+    Object {},
+  ],
+]
+`;
+
+exports[`Mock render - properties.paragraph object width all - value[0] - Avatar 1`] = `Array []`;
+
+exports[`Mock render - properties.paragraph object width all - value[0] - Button 1`] = `Array []`;
+
+exports[`Mock render - properties.paragraph object width all - value[0] - Input 1`] = `Array []`;
+
+exports[`Mock render - properties.paragraph object width all - value[0] - default 1`] = `
+Array [
+  Array [
+    Object {
+      "active": undefined,
+      "avatar": undefined,
+      "className": "css-0",
+      "id": "properties.paragraph object width all",
+      "paragraph": Object {
+        "rows": 3,
+        "width": 300,
+      },
+      "round": undefined,
+      "title": undefined,
+    },
+    Object {},
+  ],
+]
+`;
+
+exports[`Mock render - properties.paragraph object width array - value[0] - Avatar 1`] = `Array []`;
+
+exports[`Mock render - properties.paragraph object width array - value[0] - Button 1`] = `Array []`;
+
+exports[`Mock render - properties.paragraph object width array - value[0] - Input 1`] = `Array []`;
+
+exports[`Mock render - properties.paragraph object width array - value[0] - default 1`] = `
+Array [
+  Array [
+    Object {
+      "active": undefined,
+      "avatar": undefined,
+      "className": "css-0",
+      "id": "properties.paragraph object width array",
+      "paragraph": Object {
+        "rows": 3,
+        "width": Array [
+          700,
+          250,
+          500,
+        ],
+      },
+      "round": undefined,
+      "title": undefined,
+    },
+    Object {},
+  ],
+]
+`;
+
+exports[`Mock render - properties.title boolean - value[0] - Avatar 1`] = `Array []`;
+
+exports[`Mock render - properties.title boolean - value[0] - Button 1`] = `Array []`;
+
+exports[`Mock render - properties.title boolean - value[0] - Input 1`] = `Array []`;
+
+exports[`Mock render - properties.title boolean - value[0] - default 1`] = `
+Array [
+  Array [
+    Object {
+      "active": undefined,
+      "avatar": undefined,
+      "className": "css-0",
+      "id": "properties.title boolean",
+      "paragraph": undefined,
+      "round": undefined,
+      "title": false,
+    },
+    Object {},
+  ],
+]
+`;
+
+exports[`Mock render - properties.title object - value[0] - Avatar 1`] = `Array []`;
+
+exports[`Mock render - properties.title object - value[0] - Button 1`] = `Array []`;
+
+exports[`Mock render - properties.title object - value[0] - Input 1`] = `Array []`;
+
+exports[`Mock render - properties.title object - value[0] - default 1`] = `
+Array [
+  Array [
+    Object {
+      "active": undefined,
+      "avatar": undefined,
+      "className": "css-0",
+      "id": "properties.title object",
+      "paragraph": undefined,
+      "round": undefined,
+      "title": Object {
+        "width": 250,
+      },
+    },
+    Object {},
+  ],
+]
+`;
--- a/packages/blocksAntd/tests/snapshots/Skeleton.test.js.snap
+++ b/packages/blocksAntd/tests/snapshots/Skeleton.test.js.snap
@ -88,6 +88,241 @@ exports[`Render properties.active - value[0] 1`] = `
 </div>
 `;

+exports[`Render properties.avatar boolean - value[0] 1`] = `
+<div
+  className="ant-skeleton {} ant-skeleton-element"
+>
+  <span
+    className="ant-skeleton-avatar {} ant-skeleton-avatar-circle"
+    style={Object {}}
+  />
+</div>
+`;
+
+exports[`Render properties.avatar object circle - value[0] 1`] = `
+<div
+  className="ant-skeleton {} ant-skeleton-element"
+>
+  <span
+    className="ant-skeleton-avatar {} ant-skeleton-avatar-lg ant-skeleton-avatar-circle"
+    style={Object {}}
+  />
+</div>
+`;
+
+exports[`Render properties.avatar object square - value[0] 1`] = `
+<div
+  className="ant-skeleton {} ant-skeleton-element"
+>
+  <span
+    className="ant-skeleton-avatar {} ant-skeleton-avatar-sm ant-skeleton-avatar-square"
+    style={Object {}}
+  />
+</div>
+`;
+
+exports[`Render properties.button object circle - value[0] 1`] = `
+<div
+  className="ant-skeleton {} ant-skeleton-element"
+>
+  <span
+    className="ant-skeleton-button {} ant-skeleton-button-lg ant-skeleton-button-circle"
+    style={Object {}}
+  />
+</div>
+`;
+
+exports[`Render properties.button object round - value[0] 1`] = `
+<div
+  className="ant-skeleton {} ant-skeleton-element"
+>
+  <span
+    className="ant-skeleton-button {} ant-skeleton-button-sm ant-skeleton-button-round"
+    style={Object {}}
+  />
+</div>
+`;
+
+exports[`Render properties.paragraph boolean - value[0] 1`] = `
+<div
+  className="ant-skeleton {}"
+>
+  <div
+    className="ant-skeleton-content"
+  >
+    <h3
+      className="ant-skeleton-title"
+      style={
+        Object {
+          "width": undefined,
+        }
+      }
+    />
+  </div>
+</div>
+`;
+
+exports[`Render properties.paragraph object width all - value[0] 1`] = `
+<div
+  className="ant-skeleton {}"
+>
+  <div
+    className="ant-skeleton-content"
+  >
+    <h3
+      className="ant-skeleton-title"
+      style={
+        Object {
+          "width": "38%",
+        }
+      }
+    />
+    <ul
+      className="ant-skeleton-paragraph"
+    >
+      <li
+        style={
+          Object {
+            "width": undefined,
+          }
+        }
+      />
+      <li
+        style={
+          Object {
+            "width": undefined,
+          }
+        }
+      />
+      <li
+        style={
+          Object {
+            "width": 300,
+          }
+        }
+      />
+    </ul>
+  </div>
+</div>
+`;
+
+exports[`Render properties.paragraph object width array - value[0] 1`] = `
+<div
+  className="ant-skeleton {}"
+>
+  <div
+    className="ant-skeleton-content"
+  >
+    <h3
+      className="ant-skeleton-title"
+      style={
+        Object {
+          "width": "38%",
+        }
+      }
+    />
+    <ul
+      className="ant-skeleton-paragraph"
+    >
+      <li
+        style={
+          Object {
+            "width": 700,
+          }
+        }
+      />
+      <li
+        style={
+          Object {
+            "width": 250,
+          }
+        }
+      />
+      <li
+        style={
+          Object {
+            "width": 500,
+          }
+        }
+      />
+    </ul>
+  </div>
+</div>
+`;
+
+exports[`Render properties.title boolean - value[0] 1`] = `
+<div
+  className="ant-skeleton {}"
+>
+  <div
+    className="ant-skeleton-content"
+  >
+    <ul
+      className="ant-skeleton-paragraph"
+    >
+      <li
+        style={
+          Object {
+            "width": undefined,
+          }
+        }
+      />
+      <li
+        style={
+          Object {
+            "width": "61%",
+          }
+        }
+      />
+    </ul>
+  </div>
+</div>
+`;
+
+exports[`Render properties.title object - value[0] 1`] = `
+<div
+  className="ant-skeleton {}"
+>
+  <div
+    className="ant-skeleton-content"
+  >
+    <h3
+      className="ant-skeleton-title"
+      style={
+        Object {
+          "width": 250,
+        }
+      }
+    />
+    <ul
+      className="ant-skeleton-paragraph"
+    >
+      <li
+        style={
+          Object {
+            "width": undefined,
+          }
+        }
+      />
+      <li
+        style={
+          Object {
+            "width": undefined,
+          }
+        }
+      />
+      <li
+        style={
+          Object {
+            "width": "61%",
+          }
+        }
+      />
+    </ul>
+  </div>
+</div>
+`;
+
 exports[`Test Schema default 1`] = `true`;

 exports[`Test Schema default 2`] = `null`;
@ -95,3 +330,43 @@ exports[`Test Schema default 2`] = `null`;
 exports[`Test Schema properties.active 1`] = `true`;

 exports[`Test Schema properties.active 2`] = `null`;
+
+exports[`Test Schema properties.avatar boolean 1`] = `true`;
+
+exports[`Test Schema properties.avatar boolean 2`] = `null`;
+
+exports[`Test Schema properties.avatar object circle 1`] = `true`;
+
+exports[`Test Schema properties.avatar object circle 2`] = `null`;
+
+exports[`Test Schema properties.avatar object square 1`] = `true`;
+
+exports[`Test Schema properties.avatar object square 2`] = `null`;
+
+exports[`Test Schema properties.button object circle 1`] = `true`;
+
+exports[`Test Schema properties.button object circle 2`] = `null`;
+
+exports[`Test Schema properties.button object round 1`] = `true`;
+
+exports[`Test Schema properties.button object round 2`] = `null`;
+
+exports[`Test Schema properties.paragraph boolean 1`] = `true`;
+
+exports[`Test Schema properties.paragraph boolean 2`] = `null`;
+
+exports[`Test Schema properties.paragraph object width all 1`] = `true`;
+
+exports[`Test Schema properties.paragraph object width all 2`] = `null`;
+
+exports[`Test Schema properties.paragraph object width array 1`] = `true`;
+
+exports[`Test Schema properties.paragraph object width array 2`] = `null`;
+
+exports[`Test Schema properties.title boolean 1`] = `true`;
+
+exports[`Test Schema properties.title boolean 2`] = `null`;
+
+exports[`Test Schema properties.title object 1`] = `true`;
+
+exports[`Test Schema properties.title object 2`] = `null`;