mirror of
https://github.com/lowdefy/lowdefy.git
synced 2025-04-12 15:40:30 +08:00
Merge pull request #168 from lowdefy/blocks-antd-progress
feat(blocksAntd): progress examples (no diff status normal OR active)
This commit is contained in:
Sam
GitHub
commit
5a5f3ebde3
@ -7,6 +7,7 @@ module.exports = {
|
||||
'<rootDir>/dist/',
|
||||
'<rootDir>/tests/',
|
||||
'runRenderTests.js',
|
||||
'runMockRenderTests.js',
|
||||
'runMethodTests.js',
|
||||
'runBlockSchemaTests.js',
|
||||
'mockBlock.js',
|
||||
|
||||
@ -24,6 +24,7 @@ import mediaToCssObject from './mediaToCssObject.js';
|
||||
import mockBlock from './mockBlock';
|
||||
import runBlockSchemaTests from './runBlockSchemaTests';
|
||||
import runMethodTests from './runMethodTests';
|
||||
import runMockRenderTests from './runMockRenderTests';
|
||||
import runRenderTests from './runRenderTests';
|
||||
import Skeleton from './Skeleton/Skeleton';
|
||||
import SkeletonAvatar from './Skeleton/SkeletonAvatar';
|
||||
@ -45,6 +46,7 @@ export {
|
||||
mockBlock,
|
||||
runBlockSchemaTests,
|
||||
runMethodTests,
|
||||
runMockRenderTests,
|
||||
runRenderTests,
|
||||
Skeleton,
|
||||
SkeletonAvatar,
|
||||
|
||||
43
packages/blockTools/src/runMockRenderTests.js
Normal file
43
packages/blockTools/src/runMockRenderTests.js
Normal file
@ -0,0 +1,43 @@
|
||||
/*
|
||||
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 React from 'react';
|
||||
import { type } from '@lowdefy/helpers';
|
||||
|
||||
import mockBlock from './mockBlock';
|
||||
|
||||
const runMockRenderTests = ({ Block, enzyme, examples, logger, meta, mock }) => {
|
||||
const { before, methods, getProps } = mockBlock({ meta, logger });
|
||||
|
||||
beforeEach(() => {
|
||||
before();
|
||||
});
|
||||
const values = meta.values
|
||||
? [type.enforceType(meta.valueType, null), ...meta.values]
|
||||
: [type.enforceType(meta.valueType, null)];
|
||||
|
||||
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();
|
||||
});
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
export default runMockRenderTests;
|
||||
@ -1,6 +1,100 @@
|
||||
- id: default
|
||||
type: Progress
|
||||
- id: properties.percent
|
||||
- id: "properties.percent"
|
||||
type: Progress
|
||||
properties:
|
||||
percent: 30
|
||||
percent: 30
|
||||
- id: "properties.type: circle"
|
||||
type: Progress
|
||||
properties:
|
||||
type: circle
|
||||
percent: 30
|
||||
- id: "properties.type: dashboard"
|
||||
type: Progress
|
||||
properties:
|
||||
type: dashboard
|
||||
percent: 30
|
||||
- id: "properties.showInfo: false"
|
||||
type: Progress
|
||||
properties:
|
||||
showInfo: false
|
||||
percent: 30
|
||||
- id: "properties.status: success"
|
||||
type: Progress
|
||||
properties:
|
||||
status: success
|
||||
percent: 30
|
||||
- id: "properties.status: exception"
|
||||
type: Progress
|
||||
properties:
|
||||
status: exception
|
||||
percent: 30
|
||||
- id: "properties.status: normal"
|
||||
type: Progress
|
||||
properties:
|
||||
status: normal
|
||||
percent: 30
|
||||
- id: "properties.status: active"
|
||||
type: Progress
|
||||
properties:
|
||||
status: active
|
||||
percent: 30
|
||||
- id: "properties.strokeLinecap: square "
|
||||
type: Progress
|
||||
properties:
|
||||
strokeLinecap: square
|
||||
percent: 30
|
||||
- id: "properties.strokeColor: '#e91e63'"
|
||||
type: Progress
|
||||
properties:
|
||||
strokeColor: "#e91e63"
|
||||
percent: 30
|
||||
- id: "properties.trailColor: '#ff9800'"
|
||||
type: Progress
|
||||
properties:
|
||||
trailColor: "#ff9800"
|
||||
percent: 30
|
||||
- id: "properties.strokeColor: '#e91e63' trailColor: '#ff9800'"
|
||||
type: Progress
|
||||
properties:
|
||||
strokeColor: "#e91e63"
|
||||
trailColor: "#ff9800"
|
||||
percent: 30
|
||||
- id: "properties.strokeWidth: 18"
|
||||
type: Progress
|
||||
properties:
|
||||
strokeWidth: 18
|
||||
percent: 30
|
||||
- id: "properties.width: 180"
|
||||
type: Progress
|
||||
properties:
|
||||
width: 180
|
||||
type: circle
|
||||
percent: 30
|
||||
- id: "properties.gapDegree: 60"
|
||||
type: Progress
|
||||
properties:
|
||||
gapDegree: 60
|
||||
type: circle
|
||||
percent: 30
|
||||
- id: "properties.gapPosition: left"
|
||||
type: Progress
|
||||
properties:
|
||||
gapPosition: left
|
||||
gapDegree: 60
|
||||
type: circle
|
||||
percent: 30
|
||||
- id: "properties.gapPosition: right"
|
||||
type: Progress
|
||||
properties:
|
||||
gapPosition: right
|
||||
gapDegree: 60
|
||||
type: circle
|
||||
percent: 30
|
||||
- id: "properties.gapPosition: bottom"
|
||||
type: Progress
|
||||
properties:
|
||||
gapPosition: bottom
|
||||
gapDegree: 60
|
||||
type: circle
|
||||
percent: 30
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
},
|
||||
"showInfo": {
|
||||
"type": "boolean",
|
||||
"default": false,
|
||||
"default": true,
|
||||
"description": "Whether to display the progress value and the status icon."
|
||||
},
|
||||
"percent": {
|
||||
@ -25,6 +25,7 @@
|
||||
"status": {
|
||||
"type": "string",
|
||||
"enum": ["success", "exception", "normal", "active"],
|
||||
"default": "active",
|
||||
"description": "Set the status of the Progress."
|
||||
},
|
||||
"strokeLinecap": {
|
||||
@ -63,6 +64,7 @@
|
||||
"gapPosition": {
|
||||
"type": "string",
|
||||
"enum": ["top", "bottom", "left", "right"],
|
||||
"default": "top",
|
||||
"description": "The gap position."
|
||||
}
|
||||
}
|
||||
|
||||
36
packages/blocksAntd/tests/Progress.mock.test.js
Normal file
36
packages/blocksAntd/tests/Progress.mock.test.js
Normal file
@ -0,0 +1,36 @@
|
||||
/*
|
||||
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 { Progress } from 'antd';
|
||||
|
||||
Enzyme.configure({ adapter: new Adapter() });
|
||||
import ProgressBlock from '../src/blocks/Progress/Progress';
|
||||
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());
|
||||
});
|
||||
|
||||
const mock = {
|
||||
name: 'default',
|
||||
fn: Progress,
|
||||
};
|
||||
|
||||
runMockRenderTests({ examples, Block: ProgressBlock, meta, mock, enzyme: { mount } });
|
||||
23
packages/blocksAntd/tests/Progress.test.js
Normal file
23
packages/blocksAntd/tests/Progress.test.js
Normal file
@ -0,0 +1,23 @@
|
||||
/*
|
||||
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 { runBlockSchemaTests, runRenderTests } from '@lowdefy/block-tools';
|
||||
import ProgressBlock from '../src/blocks/Progress/Progress';
|
||||
import examples from '../demo/examples/Progress.yaml';
|
||||
import meta from '../src/blocks/Progress/Progress.json';
|
||||
|
||||
runRenderTests({ examples, Block: ProgressBlock, meta });
|
||||
runBlockSchemaTests({ examples, meta });
|
||||
@ -0,0 +1,457 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Render default - value[0] - default 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"gapDegree": undefined,
|
||||
"gapPosition": undefined,
|
||||
"id": "default",
|
||||
"percent": undefined,
|
||||
"showInfo": undefined,
|
||||
"status": undefined,
|
||||
"steps": undefined,
|
||||
"strokeColor": undefined,
|
||||
"strokeLinecap": undefined,
|
||||
"strokeWidth": undefined,
|
||||
"success": undefined,
|
||||
"trailColor": undefined,
|
||||
"type": undefined,
|
||||
"width": undefined,
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Render properties.gapDegree: 60 - value[0] - default 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"gapDegree": 60,
|
||||
"gapPosition": undefined,
|
||||
"id": "properties.gapDegree: 60",
|
||||
"percent": 30,
|
||||
"showInfo": undefined,
|
||||
"status": undefined,
|
||||
"steps": undefined,
|
||||
"strokeColor": undefined,
|
||||
"strokeLinecap": undefined,
|
||||
"strokeWidth": undefined,
|
||||
"success": undefined,
|
||||
"trailColor": undefined,
|
||||
"type": "circle",
|
||||
"width": undefined,
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Render properties.gapPosition: bottom - value[0] - default 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"gapDegree": 60,
|
||||
"gapPosition": "bottom",
|
||||
"id": "properties.gapPosition: bottom",
|
||||
"percent": 30,
|
||||
"showInfo": undefined,
|
||||
"status": undefined,
|
||||
"steps": undefined,
|
||||
"strokeColor": undefined,
|
||||
"strokeLinecap": undefined,
|
||||
"strokeWidth": undefined,
|
||||
"success": undefined,
|
||||
"trailColor": undefined,
|
||||
"type": "circle",
|
||||
"width": undefined,
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Render properties.gapPosition: left - value[0] - default 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"gapDegree": 60,
|
||||
"gapPosition": "left",
|
||||
"id": "properties.gapPosition: left",
|
||||
"percent": 30,
|
||||
"showInfo": undefined,
|
||||
"status": undefined,
|
||||
"steps": undefined,
|
||||
"strokeColor": undefined,
|
||||
"strokeLinecap": undefined,
|
||||
"strokeWidth": undefined,
|
||||
"success": undefined,
|
||||
"trailColor": undefined,
|
||||
"type": "circle",
|
||||
"width": undefined,
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Render properties.gapPosition: right - value[0] - default 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"gapDegree": 60,
|
||||
"gapPosition": "right",
|
||||
"id": "properties.gapPosition: right",
|
||||
"percent": 30,
|
||||
"showInfo": undefined,
|
||||
"status": undefined,
|
||||
"steps": undefined,
|
||||
"strokeColor": undefined,
|
||||
"strokeLinecap": undefined,
|
||||
"strokeWidth": undefined,
|
||||
"success": undefined,
|
||||
"trailColor": undefined,
|
||||
"type": "circle",
|
||||
"width": undefined,
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Render properties.percent - value[0] - default 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"gapDegree": undefined,
|
||||
"gapPosition": undefined,
|
||||
"id": "properties.percent",
|
||||
"percent": 30,
|
||||
"showInfo": undefined,
|
||||
"status": undefined,
|
||||
"steps": undefined,
|
||||
"strokeColor": undefined,
|
||||
"strokeLinecap": undefined,
|
||||
"strokeWidth": undefined,
|
||||
"success": undefined,
|
||||
"trailColor": undefined,
|
||||
"type": undefined,
|
||||
"width": undefined,
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Render properties.showInfo: false - value[0] - default 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"gapDegree": undefined,
|
||||
"gapPosition": undefined,
|
||||
"id": "properties.showInfo: false",
|
||||
"percent": 30,
|
||||
"showInfo": false,
|
||||
"status": undefined,
|
||||
"steps": undefined,
|
||||
"strokeColor": undefined,
|
||||
"strokeLinecap": undefined,
|
||||
"strokeWidth": undefined,
|
||||
"success": undefined,
|
||||
"trailColor": undefined,
|
||||
"type": undefined,
|
||||
"width": undefined,
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Render properties.status: active - value[0] - default 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"gapDegree": undefined,
|
||||
"gapPosition": undefined,
|
||||
"id": "properties.status: active",
|
||||
"percent": 30,
|
||||
"showInfo": undefined,
|
||||
"status": "active",
|
||||
"steps": undefined,
|
||||
"strokeColor": undefined,
|
||||
"strokeLinecap": undefined,
|
||||
"strokeWidth": undefined,
|
||||
"success": undefined,
|
||||
"trailColor": undefined,
|
||||
"type": undefined,
|
||||
"width": undefined,
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Render properties.status: exception - value[0] - default 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"gapDegree": undefined,
|
||||
"gapPosition": undefined,
|
||||
"id": "properties.status: exception",
|
||||
"percent": 30,
|
||||
"showInfo": undefined,
|
||||
"status": "exception",
|
||||
"steps": undefined,
|
||||
"strokeColor": undefined,
|
||||
"strokeLinecap": undefined,
|
||||
"strokeWidth": undefined,
|
||||
"success": undefined,
|
||||
"trailColor": undefined,
|
||||
"type": undefined,
|
||||
"width": undefined,
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Render properties.status: normal - value[0] - default 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"gapDegree": undefined,
|
||||
"gapPosition": undefined,
|
||||
"id": "properties.status: normal",
|
||||
"percent": 30,
|
||||
"showInfo": undefined,
|
||||
"status": "normal",
|
||||
"steps": undefined,
|
||||
"strokeColor": undefined,
|
||||
"strokeLinecap": undefined,
|
||||
"strokeWidth": undefined,
|
||||
"success": undefined,
|
||||
"trailColor": undefined,
|
||||
"type": undefined,
|
||||
"width": undefined,
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Render properties.status: success - value[0] - default 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"gapDegree": undefined,
|
||||
"gapPosition": undefined,
|
||||
"id": "properties.status: success",
|
||||
"percent": 30,
|
||||
"showInfo": undefined,
|
||||
"status": "success",
|
||||
"steps": undefined,
|
||||
"strokeColor": undefined,
|
||||
"strokeLinecap": undefined,
|
||||
"strokeWidth": undefined,
|
||||
"success": undefined,
|
||||
"trailColor": undefined,
|
||||
"type": undefined,
|
||||
"width": undefined,
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Render properties.strokeColor: '#e91e63' trailColor: '#ff9800' - value[0] - default 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"gapDegree": undefined,
|
||||
"gapPosition": undefined,
|
||||
"id": "properties.strokeColor: '#e91e63' trailColor: '#ff9800'",
|
||||
"percent": 30,
|
||||
"showInfo": undefined,
|
||||
"status": undefined,
|
||||
"steps": undefined,
|
||||
"strokeColor": "#e91e63",
|
||||
"strokeLinecap": undefined,
|
||||
"strokeWidth": undefined,
|
||||
"success": undefined,
|
||||
"trailColor": "#ff9800",
|
||||
"type": undefined,
|
||||
"width": undefined,
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Render properties.strokeColor: '#e91e63' - value[0] - default 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"gapDegree": undefined,
|
||||
"gapPosition": undefined,
|
||||
"id": "properties.strokeColor: '#e91e63'",
|
||||
"percent": 30,
|
||||
"showInfo": undefined,
|
||||
"status": undefined,
|
||||
"steps": undefined,
|
||||
"strokeColor": "#e91e63",
|
||||
"strokeLinecap": undefined,
|
||||
"strokeWidth": undefined,
|
||||
"success": undefined,
|
||||
"trailColor": undefined,
|
||||
"type": undefined,
|
||||
"width": undefined,
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Render properties.strokeLinecap: square - value[0] - default 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"gapDegree": undefined,
|
||||
"gapPosition": undefined,
|
||||
"id": "properties.strokeLinecap: square ",
|
||||
"percent": 30,
|
||||
"showInfo": undefined,
|
||||
"status": undefined,
|
||||
"steps": undefined,
|
||||
"strokeColor": undefined,
|
||||
"strokeLinecap": "square",
|
||||
"strokeWidth": undefined,
|
||||
"success": undefined,
|
||||
"trailColor": undefined,
|
||||
"type": undefined,
|
||||
"width": undefined,
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Render properties.strokeWidth: 18 - value[0] - default 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"gapDegree": undefined,
|
||||
"gapPosition": undefined,
|
||||
"id": "properties.strokeWidth: 18",
|
||||
"percent": 30,
|
||||
"showInfo": undefined,
|
||||
"status": undefined,
|
||||
"steps": undefined,
|
||||
"strokeColor": undefined,
|
||||
"strokeLinecap": undefined,
|
||||
"strokeWidth": 18,
|
||||
"success": undefined,
|
||||
"trailColor": undefined,
|
||||
"type": undefined,
|
||||
"width": undefined,
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Render properties.trailColor: '#ff9800' - value[0] - default 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"gapDegree": undefined,
|
||||
"gapPosition": undefined,
|
||||
"id": "properties.trailColor: '#ff9800'",
|
||||
"percent": 30,
|
||||
"showInfo": undefined,
|
||||
"status": undefined,
|
||||
"steps": undefined,
|
||||
"strokeColor": undefined,
|
||||
"strokeLinecap": undefined,
|
||||
"strokeWidth": undefined,
|
||||
"success": undefined,
|
||||
"trailColor": "#ff9800",
|
||||
"type": undefined,
|
||||
"width": undefined,
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Render properties.type: circle - value[0] - default 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"gapDegree": undefined,
|
||||
"gapPosition": undefined,
|
||||
"id": "properties.type: circle",
|
||||
"percent": 30,
|
||||
"showInfo": undefined,
|
||||
"status": undefined,
|
||||
"steps": undefined,
|
||||
"strokeColor": undefined,
|
||||
"strokeLinecap": undefined,
|
||||
"strokeWidth": undefined,
|
||||
"success": undefined,
|
||||
"trailColor": undefined,
|
||||
"type": "circle",
|
||||
"width": undefined,
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Render properties.type: dashboard - value[0] - default 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"gapDegree": undefined,
|
||||
"gapPosition": undefined,
|
||||
"id": "properties.type: dashboard",
|
||||
"percent": 30,
|
||||
"showInfo": undefined,
|
||||
"status": undefined,
|
||||
"steps": undefined,
|
||||
"strokeColor": undefined,
|
||||
"strokeLinecap": undefined,
|
||||
"strokeWidth": undefined,
|
||||
"success": undefined,
|
||||
"trailColor": undefined,
|
||||
"type": "dashboard",
|
||||
"width": undefined,
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Render properties.width: 180 - value[0] - default 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"gapDegree": undefined,
|
||||
"gapPosition": undefined,
|
||||
"id": "properties.width: 180",
|
||||
"percent": 30,
|
||||
"showInfo": undefined,
|
||||
"status": undefined,
|
||||
"steps": undefined,
|
||||
"strokeColor": undefined,
|
||||
"strokeLinecap": undefined,
|
||||
"strokeWidth": undefined,
|
||||
"success": undefined,
|
||||
"trailColor": undefined,
|
||||
"type": "circle",
|
||||
"width": 180,
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
989
packages/blocksAntd/tests/__snapshots__/Progress.test.js.snap
Normal file
989
packages/blocksAntd/tests/__snapshots__/Progress.test.js.snap
Normal file
@ -0,0 +1,989 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Render default - value[0] 1`] = `
|
||||
<div
|
||||
className="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
|
||||
id="default"
|
||||
>
|
||||
<div
|
||||
className="ant-progress-outer"
|
||||
>
|
||||
<div
|
||||
className="ant-progress-inner"
|
||||
>
|
||||
<div
|
||||
className="ant-progress-bg"
|
||||
style={
|
||||
Object {
|
||||
"background": undefined,
|
||||
"borderRadius": "",
|
||||
"height": 8,
|
||||
"width": "0%",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
className="ant-progress-text"
|
||||
title="0%"
|
||||
>
|
||||
0%
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Render properties.gapDegree: 60 - value[0] 1`] = `
|
||||
<div
|
||||
className="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
|
||||
id="properties.gapDegree: 60"
|
||||
>
|
||||
<div
|
||||
className="ant-progress-inner"
|
||||
style={
|
||||
Object {
|
||||
"fontSize": 24,
|
||||
"height": 120,
|
||||
"width": 120,
|
||||
}
|
||||
}
|
||||
>
|
||||
<svg
|
||||
className="ant-progress-circle"
|
||||
style={Object {}}
|
||||
viewBox="0 0 100 100"
|
||||
>
|
||||
<path
|
||||
className="ant-progress-circle-trail"
|
||||
d="M 50,50 m 0,-47
|
||||
a 47,47 0 1 1 0,94
|
||||
a 47,47 0 1 1 0,-94"
|
||||
fillOpacity="0"
|
||||
stroke={null}
|
||||
strokeLinecap="round"
|
||||
strokeWidth={6}
|
||||
style={
|
||||
Object {
|
||||
"stroke": null,
|
||||
"strokeDasharray": "235.30970943744057px 295.3097094374406px",
|
||||
"strokeDashoffset": "-30px",
|
||||
"transition": "stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s",
|
||||
}
|
||||
}
|
||||
/>
|
||||
<path
|
||||
className="ant-progress-circle-path"
|
||||
d="M 50,50 m 0,-47
|
||||
a 47,47 0 1 1 0,94
|
||||
a 47,47 0 1 1 0,-94"
|
||||
fillOpacity="0"
|
||||
opacity={1}
|
||||
stroke=""
|
||||
strokeLinecap="round"
|
||||
strokeWidth={6}
|
||||
style={
|
||||
Object {
|
||||
"stroke": null,
|
||||
"strokeDasharray": "70.59291283123217px 295.3097094374406px",
|
||||
"strokeDashoffset": "-30px",
|
||||
"transition": "stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</svg>
|
||||
<span
|
||||
className="ant-progress-text"
|
||||
title="30%"
|
||||
>
|
||||
30%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Render properties.gapPosition: bottom - value[0] 1`] = `
|
||||
<div
|
||||
className="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
|
||||
id="properties.gapPosition: bottom"
|
||||
>
|
||||
<div
|
||||
className="ant-progress-inner"
|
||||
style={
|
||||
Object {
|
||||
"fontSize": 24,
|
||||
"height": 120,
|
||||
"width": 120,
|
||||
}
|
||||
}
|
||||
>
|
||||
<svg
|
||||
className="ant-progress-circle"
|
||||
style={Object {}}
|
||||
viewBox="0 0 100 100"
|
||||
>
|
||||
<path
|
||||
className="ant-progress-circle-trail"
|
||||
d="M 50,50 m 0,47
|
||||
a 47,47 0 1 1 0,-94
|
||||
a 47,47 0 1 1 0,94"
|
||||
fillOpacity="0"
|
||||
stroke={null}
|
||||
strokeLinecap="round"
|
||||
strokeWidth={6}
|
||||
style={
|
||||
Object {
|
||||
"stroke": null,
|
||||
"strokeDasharray": "235.30970943744057px 295.3097094374406px",
|
||||
"strokeDashoffset": "-30px",
|
||||
"transition": "stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s",
|
||||
}
|
||||
}
|
||||
/>
|
||||
<path
|
||||
className="ant-progress-circle-path"
|
||||
d="M 50,50 m 0,47
|
||||
a 47,47 0 1 1 0,-94
|
||||
a 47,47 0 1 1 0,94"
|
||||
fillOpacity="0"
|
||||
opacity={1}
|
||||
stroke=""
|
||||
strokeLinecap="round"
|
||||
strokeWidth={6}
|
||||
style={
|
||||
Object {
|
||||
"stroke": null,
|
||||
"strokeDasharray": "70.59291283123217px 295.3097094374406px",
|
||||
"strokeDashoffset": "-30px",
|
||||
"transition": "stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</svg>
|
||||
<span
|
||||
className="ant-progress-text"
|
||||
title="30%"
|
||||
>
|
||||
30%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Render properties.gapPosition: left - value[0] 1`] = `
|
||||
<div
|
||||
className="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
|
||||
id="properties.gapPosition: left"
|
||||
>
|
||||
<div
|
||||
className="ant-progress-inner"
|
||||
style={
|
||||
Object {
|
||||
"fontSize": 24,
|
||||
"height": 120,
|
||||
"width": 120,
|
||||
}
|
||||
}
|
||||
>
|
||||
<svg
|
||||
className="ant-progress-circle"
|
||||
style={Object {}}
|
||||
viewBox="0 0 100 100"
|
||||
>
|
||||
<path
|
||||
className="ant-progress-circle-trail"
|
||||
d="M 50,50 m -47,0
|
||||
a 47,47 0 1 1 94,0
|
||||
a 47,47 0 1 1 -94,0"
|
||||
fillOpacity="0"
|
||||
stroke={null}
|
||||
strokeLinecap="round"
|
||||
strokeWidth={6}
|
||||
style={
|
||||
Object {
|
||||
"stroke": null,
|
||||
"strokeDasharray": "235.30970943744057px 295.3097094374406px",
|
||||
"strokeDashoffset": "-30px",
|
||||
"transition": "stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s",
|
||||
}
|
||||
}
|
||||
/>
|
||||
<path
|
||||
className="ant-progress-circle-path"
|
||||
d="M 50,50 m -47,0
|
||||
a 47,47 0 1 1 94,0
|
||||
a 47,47 0 1 1 -94,0"
|
||||
fillOpacity="0"
|
||||
opacity={1}
|
||||
stroke=""
|
||||
strokeLinecap="round"
|
||||
strokeWidth={6}
|
||||
style={
|
||||
Object {
|
||||
"stroke": null,
|
||||
"strokeDasharray": "70.59291283123217px 295.3097094374406px",
|
||||
"strokeDashoffset": "-30px",
|
||||
"transition": "stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</svg>
|
||||
<span
|
||||
className="ant-progress-text"
|
||||
title="30%"
|
||||
>
|
||||
30%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Render properties.gapPosition: right - value[0] 1`] = `
|
||||
<div
|
||||
className="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
|
||||
id="properties.gapPosition: right"
|
||||
>
|
||||
<div
|
||||
className="ant-progress-inner"
|
||||
style={
|
||||
Object {
|
||||
"fontSize": 24,
|
||||
"height": 120,
|
||||
"width": 120,
|
||||
}
|
||||
}
|
||||
>
|
||||
<svg
|
||||
className="ant-progress-circle"
|
||||
style={Object {}}
|
||||
viewBox="0 0 100 100"
|
||||
>
|
||||
<path
|
||||
className="ant-progress-circle-trail"
|
||||
d="M 50,50 m 47,0
|
||||
a 47,47 0 1 1 -94,0
|
||||
a 47,47 0 1 1 94,0"
|
||||
fillOpacity="0"
|
||||
stroke={null}
|
||||
strokeLinecap="round"
|
||||
strokeWidth={6}
|
||||
style={
|
||||
Object {
|
||||
"stroke": null,
|
||||
"strokeDasharray": "235.30970943744057px 295.3097094374406px",
|
||||
"strokeDashoffset": "-30px",
|
||||
"transition": "stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s",
|
||||
}
|
||||
}
|
||||
/>
|
||||
<path
|
||||
className="ant-progress-circle-path"
|
||||
d="M 50,50 m 47,0
|
||||
a 47,47 0 1 1 -94,0
|
||||
a 47,47 0 1 1 94,0"
|
||||
fillOpacity="0"
|
||||
opacity={1}
|
||||
stroke=""
|
||||
strokeLinecap="round"
|
||||
strokeWidth={6}
|
||||
style={
|
||||
Object {
|
||||
"stroke": null,
|
||||
"strokeDasharray": "70.59291283123217px 295.3097094374406px",
|
||||
"strokeDashoffset": "-30px",
|
||||
"transition": "stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</svg>
|
||||
<span
|
||||
className="ant-progress-text"
|
||||
title="30%"
|
||||
>
|
||||
30%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Render properties.percent - value[0] 1`] = `
|
||||
<div
|
||||
className="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
|
||||
id="properties.percent"
|
||||
>
|
||||
<div
|
||||
className="ant-progress-outer"
|
||||
>
|
||||
<div
|
||||
className="ant-progress-inner"
|
||||
>
|
||||
<div
|
||||
className="ant-progress-bg"
|
||||
style={
|
||||
Object {
|
||||
"background": undefined,
|
||||
"borderRadius": "",
|
||||
"height": 8,
|
||||
"width": "30%",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
className="ant-progress-text"
|
||||
title="30%"
|
||||
>
|
||||
30%
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Render properties.showInfo: false - value[0] 1`] = `
|
||||
<div
|
||||
className="ant-progress ant-progress-line ant-progress-status-normal ant-progress-default"
|
||||
id="properties.showInfo: false"
|
||||
>
|
||||
<div
|
||||
className="ant-progress-outer"
|
||||
>
|
||||
<div
|
||||
className="ant-progress-inner"
|
||||
>
|
||||
<div
|
||||
className="ant-progress-bg"
|
||||
style={
|
||||
Object {
|
||||
"background": undefined,
|
||||
"borderRadius": "",
|
||||
"height": 8,
|
||||
"width": "30%",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Render properties.status: active - value[0] 1`] = `
|
||||
<div
|
||||
className="ant-progress ant-progress-line ant-progress-status-active ant-progress-show-info ant-progress-default"
|
||||
id="properties.status: active"
|
||||
>
|
||||
<div
|
||||
className="ant-progress-outer"
|
||||
>
|
||||
<div
|
||||
className="ant-progress-inner"
|
||||
>
|
||||
<div
|
||||
className="ant-progress-bg"
|
||||
style={
|
||||
Object {
|
||||
"background": undefined,
|
||||
"borderRadius": "",
|
||||
"height": 8,
|
||||
"width": "30%",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
className="ant-progress-text"
|
||||
title="30%"
|
||||
>
|
||||
30%
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Render properties.status: exception - value[0] 1`] = `
|
||||
<div
|
||||
className="ant-progress ant-progress-line ant-progress-status-exception ant-progress-show-info ant-progress-default"
|
||||
id="properties.status: exception"
|
||||
>
|
||||
<div
|
||||
className="ant-progress-outer"
|
||||
>
|
||||
<div
|
||||
className="ant-progress-inner"
|
||||
>
|
||||
<div
|
||||
className="ant-progress-bg"
|
||||
style={
|
||||
Object {
|
||||
"background": undefined,
|
||||
"borderRadius": "",
|
||||
"height": 8,
|
||||
"width": "30%",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
className="ant-progress-text"
|
||||
>
|
||||
<span
|
||||
aria-label="close-circle"
|
||||
className="anticon anticon-close-circle"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className=""
|
||||
data-icon="close-circle"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Render properties.status: normal - value[0] 1`] = `
|
||||
<div
|
||||
className="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
|
||||
id="properties.status: normal"
|
||||
>
|
||||
<div
|
||||
className="ant-progress-outer"
|
||||
>
|
||||
<div
|
||||
className="ant-progress-inner"
|
||||
>
|
||||
<div
|
||||
className="ant-progress-bg"
|
||||
style={
|
||||
Object {
|
||||
"background": undefined,
|
||||
"borderRadius": "",
|
||||
"height": 8,
|
||||
"width": "30%",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
className="ant-progress-text"
|
||||
title="30%"
|
||||
>
|
||||
30%
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Render properties.status: success - value[0] 1`] = `
|
||||
<div
|
||||
className="ant-progress ant-progress-line ant-progress-status-success ant-progress-show-info ant-progress-default"
|
||||
id="properties.status: success"
|
||||
>
|
||||
<div
|
||||
className="ant-progress-outer"
|
||||
>
|
||||
<div
|
||||
className="ant-progress-inner"
|
||||
>
|
||||
<div
|
||||
className="ant-progress-bg"
|
||||
style={
|
||||
Object {
|
||||
"background": undefined,
|
||||
"borderRadius": "",
|
||||
"height": 8,
|
||||
"width": "30%",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
className="ant-progress-text"
|
||||
>
|
||||
<span
|
||||
aria-label="check-circle"
|
||||
className="anticon anticon-check-circle"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className=""
|
||||
data-icon="check-circle"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Render properties.strokeColor: '#e91e63' trailColor: '#ff9800' - value[0] 1`] = `
|
||||
<div
|
||||
className="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
|
||||
id="properties.strokeColor: '#e91e63' trailColor: '#ff9800'"
|
||||
>
|
||||
<div
|
||||
className="ant-progress-outer"
|
||||
>
|
||||
<div
|
||||
className="ant-progress-inner"
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#ff9800",
|
||||
}
|
||||
}
|
||||
>
|
||||
<div
|
||||
className="ant-progress-bg"
|
||||
style={
|
||||
Object {
|
||||
"background": "#e91e63",
|
||||
"borderRadius": "",
|
||||
"height": 8,
|
||||
"width": "30%",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
className="ant-progress-text"
|
||||
title="30%"
|
||||
>
|
||||
30%
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Render properties.strokeColor: '#e91e63' - value[0] 1`] = `
|
||||
<div
|
||||
className="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
|
||||
id="properties.strokeColor: '#e91e63'"
|
||||
>
|
||||
<div
|
||||
className="ant-progress-outer"
|
||||
>
|
||||
<div
|
||||
className="ant-progress-inner"
|
||||
>
|
||||
<div
|
||||
className="ant-progress-bg"
|
||||
style={
|
||||
Object {
|
||||
"background": "#e91e63",
|
||||
"borderRadius": "",
|
||||
"height": 8,
|
||||
"width": "30%",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
className="ant-progress-text"
|
||||
title="30%"
|
||||
>
|
||||
30%
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Render properties.strokeLinecap: square - value[0] 1`] = `
|
||||
<div
|
||||
className="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
|
||||
id="properties.strokeLinecap: square "
|
||||
>
|
||||
<div
|
||||
className="ant-progress-outer"
|
||||
>
|
||||
<div
|
||||
className="ant-progress-inner"
|
||||
>
|
||||
<div
|
||||
className="ant-progress-bg"
|
||||
style={
|
||||
Object {
|
||||
"background": undefined,
|
||||
"borderRadius": 0,
|
||||
"height": 8,
|
||||
"width": "30%",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
className="ant-progress-text"
|
||||
title="30%"
|
||||
>
|
||||
30%
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Render properties.strokeWidth: 18 - value[0] 1`] = `
|
||||
<div
|
||||
className="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
|
||||
id="properties.strokeWidth: 18"
|
||||
>
|
||||
<div
|
||||
className="ant-progress-outer"
|
||||
>
|
||||
<div
|
||||
className="ant-progress-inner"
|
||||
>
|
||||
<div
|
||||
className="ant-progress-bg"
|
||||
style={
|
||||
Object {
|
||||
"background": undefined,
|
||||
"borderRadius": "",
|
||||
"height": 18,
|
||||
"width": "30%",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
className="ant-progress-text"
|
||||
title="30%"
|
||||
>
|
||||
30%
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Render properties.trailColor: '#ff9800' - value[0] 1`] = `
|
||||
<div
|
||||
className="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
|
||||
id="properties.trailColor: '#ff9800'"
|
||||
>
|
||||
<div
|
||||
className="ant-progress-outer"
|
||||
>
|
||||
<div
|
||||
className="ant-progress-inner"
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#ff9800",
|
||||
}
|
||||
}
|
||||
>
|
||||
<div
|
||||
className="ant-progress-bg"
|
||||
style={
|
||||
Object {
|
||||
"background": undefined,
|
||||
"borderRadius": "",
|
||||
"height": 8,
|
||||
"width": "30%",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
className="ant-progress-text"
|
||||
title="30%"
|
||||
>
|
||||
30%
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Render properties.type: circle - value[0] 1`] = `
|
||||
<div
|
||||
className="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
|
||||
id="properties.type: circle"
|
||||
>
|
||||
<div
|
||||
className="ant-progress-inner"
|
||||
style={
|
||||
Object {
|
||||
"fontSize": 24,
|
||||
"height": 120,
|
||||
"width": 120,
|
||||
}
|
||||
}
|
||||
>
|
||||
<svg
|
||||
className="ant-progress-circle"
|
||||
style={Object {}}
|
||||
viewBox="0 0 100 100"
|
||||
>
|
||||
<path
|
||||
className="ant-progress-circle-trail"
|
||||
d="M 50,50 m 0,-47
|
||||
a 47,47 0 1 1 0,94
|
||||
a 47,47 0 1 1 0,-94"
|
||||
fillOpacity="0"
|
||||
stroke={null}
|
||||
strokeLinecap="round"
|
||||
strokeWidth={6}
|
||||
style={
|
||||
Object {
|
||||
"stroke": null,
|
||||
"strokeDasharray": "295.3097094374406px 295.3097094374406px",
|
||||
"strokeDashoffset": "-0px",
|
||||
"transition": "stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s",
|
||||
}
|
||||
}
|
||||
/>
|
||||
<path
|
||||
className="ant-progress-circle-path"
|
||||
d="M 50,50 m 0,-47
|
||||
a 47,47 0 1 1 0,94
|
||||
a 47,47 0 1 1 0,-94"
|
||||
fillOpacity="0"
|
||||
opacity={1}
|
||||
stroke=""
|
||||
strokeLinecap="round"
|
||||
strokeWidth={6}
|
||||
style={
|
||||
Object {
|
||||
"stroke": null,
|
||||
"strokeDasharray": "88.59291283123217px 295.3097094374406px",
|
||||
"strokeDashoffset": "-0px",
|
||||
"transition": "stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</svg>
|
||||
<span
|
||||
className="ant-progress-text"
|
||||
title="30%"
|
||||
>
|
||||
30%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Render properties.type: dashboard - value[0] 1`] = `
|
||||
<div
|
||||
className="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
|
||||
id="properties.type: dashboard"
|
||||
>
|
||||
<div
|
||||
className="ant-progress-inner"
|
||||
style={
|
||||
Object {
|
||||
"fontSize": 24,
|
||||
"height": 120,
|
||||
"width": 120,
|
||||
}
|
||||
}
|
||||
>
|
||||
<svg
|
||||
className="ant-progress-circle"
|
||||
style={Object {}}
|
||||
viewBox="0 0 100 100"
|
||||
>
|
||||
<path
|
||||
className="ant-progress-circle-trail"
|
||||
d="M 50,50 m 0,47
|
||||
a 47,47 0 1 1 0,-94
|
||||
a 47,47 0 1 1 0,94"
|
||||
fillOpacity="0"
|
||||
stroke={null}
|
||||
strokeLinecap="round"
|
||||
strokeWidth={6}
|
||||
style={
|
||||
Object {
|
||||
"stroke": null,
|
||||
"strokeDasharray": "220.30970943744057px 295.3097094374406px",
|
||||
"strokeDashoffset": "-37.5px",
|
||||
"transition": "stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s",
|
||||
}
|
||||
}
|
||||
/>
|
||||
<path
|
||||
className="ant-progress-circle-path"
|
||||
d="M 50,50 m 0,47
|
||||
a 47,47 0 1 1 0,-94
|
||||
a 47,47 0 1 1 0,94"
|
||||
fillOpacity="0"
|
||||
opacity={1}
|
||||
stroke=""
|
||||
strokeLinecap="round"
|
||||
strokeWidth={6}
|
||||
style={
|
||||
Object {
|
||||
"stroke": null,
|
||||
"strokeDasharray": "66.09291283123217px 295.3097094374406px",
|
||||
"strokeDashoffset": "-37.5px",
|
||||
"transition": "stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</svg>
|
||||
<span
|
||||
className="ant-progress-text"
|
||||
title="30%"
|
||||
>
|
||||
30%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Render properties.width: 180 - value[0] 1`] = `
|
||||
<div
|
||||
className="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
|
||||
id="properties.width: 180"
|
||||
>
|
||||
<div
|
||||
className="ant-progress-inner"
|
||||
style={
|
||||
Object {
|
||||
"fontSize": 33,
|
||||
"height": 180,
|
||||
"width": 180,
|
||||
}
|
||||
}
|
||||
>
|
||||
<svg
|
||||
className="ant-progress-circle"
|
||||
style={Object {}}
|
||||
viewBox="0 0 100 100"
|
||||
>
|
||||
<path
|
||||
className="ant-progress-circle-trail"
|
||||
d="M 50,50 m 0,-47
|
||||
a 47,47 0 1 1 0,94
|
||||
a 47,47 0 1 1 0,-94"
|
||||
fillOpacity="0"
|
||||
stroke={null}
|
||||
strokeLinecap="round"
|
||||
strokeWidth={6}
|
||||
style={
|
||||
Object {
|
||||
"stroke": null,
|
||||
"strokeDasharray": "295.3097094374406px 295.3097094374406px",
|
||||
"strokeDashoffset": "-0px",
|
||||
"transition": "stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s",
|
||||
}
|
||||
}
|
||||
/>
|
||||
<path
|
||||
className="ant-progress-circle-path"
|
||||
d="M 50,50 m 0,-47
|
||||
a 47,47 0 1 1 0,94
|
||||
a 47,47 0 1 1 0,-94"
|
||||
fillOpacity="0"
|
||||
opacity={1}
|
||||
stroke=""
|
||||
strokeLinecap="round"
|
||||
strokeWidth={6}
|
||||
style={
|
||||
Object {
|
||||
"stroke": null,
|
||||
"strokeDasharray": "88.59291283123217px 295.3097094374406px",
|
||||
"strokeDashoffset": "-0px",
|
||||
"transition": "stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</svg>
|
||||
<span
|
||||
className="ant-progress-text"
|
||||
title="30%"
|
||||
>
|
||||
30%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Test Schema default 1`] = `true`;
|
||||
|
||||
exports[`Test Schema default 2`] = `null`;
|
||||
|
||||
exports[`Test Schema properties.gapDegree: 60 1`] = `true`;
|
||||
|
||||
exports[`Test Schema properties.gapDegree: 60 2`] = `null`;
|
||||
|
||||
exports[`Test Schema properties.gapPosition: bottom 1`] = `true`;
|
||||
|
||||
exports[`Test Schema properties.gapPosition: bottom 2`] = `null`;
|
||||
|
||||
exports[`Test Schema properties.gapPosition: left 1`] = `true`;
|
||||
|
||||
exports[`Test Schema properties.gapPosition: left 2`] = `null`;
|
||||
|
||||
exports[`Test Schema properties.gapPosition: right 1`] = `true`;
|
||||
|
||||
exports[`Test Schema properties.gapPosition: right 2`] = `null`;
|
||||
|
||||
exports[`Test Schema properties.percent 1`] = `true`;
|
||||
|
||||
exports[`Test Schema properties.percent 2`] = `null`;
|
||||
|
||||
exports[`Test Schema properties.showInfo: false 1`] = `true`;
|
||||
|
||||
exports[`Test Schema properties.showInfo: false 2`] = `null`;
|
||||
|
||||
exports[`Test Schema properties.status: active 1`] = `true`;
|
||||
|
||||
exports[`Test Schema properties.status: active 2`] = `null`;
|
||||
|
||||
exports[`Test Schema properties.status: exception 1`] = `true`;
|
||||
|
||||
exports[`Test Schema properties.status: exception 2`] = `null`;
|
||||
|
||||
exports[`Test Schema properties.status: normal 1`] = `true`;
|
||||
|
||||
exports[`Test Schema properties.status: normal 2`] = `null`;
|
||||
|
||||
exports[`Test Schema properties.status: success 1`] = `true`;
|
||||
|
||||
exports[`Test Schema properties.status: success 2`] = `null`;
|
||||
|
||||
exports[`Test Schema properties.strokeColor: '#e91e63' trailColor: '#ff9800' 1`] = `true`;
|
||||
|
||||
exports[`Test Schema properties.strokeColor: '#e91e63' trailColor: '#ff9800' 2`] = `null`;
|
||||
|
||||
exports[`Test Schema properties.strokeColor: '#e91e63' 1`] = `true`;
|
||||
|
||||
exports[`Test Schema properties.strokeColor: '#e91e63' 2`] = `null`;
|
||||
|
||||
exports[`Test Schema properties.strokeLinecap: square 1`] = `true`;
|
||||
|
||||
exports[`Test Schema properties.strokeLinecap: square 2`] = `null`;
|
||||
|
||||
exports[`Test Schema properties.strokeWidth: 18 1`] = `true`;
|
||||
|
||||
exports[`Test Schema properties.strokeWidth: 18 2`] = `null`;
|
||||
|
||||
exports[`Test Schema properties.trailColor: '#ff9800' 1`] = `true`;
|
||||
|
||||
exports[`Test Schema properties.trailColor: '#ff9800' 2`] = `null`;
|
||||
|
||||
exports[`Test Schema properties.type: circle 1`] = `true`;
|
||||
|
||||
exports[`Test Schema properties.type: circle 2`] = `null`;
|
||||
|
||||
exports[`Test Schema properties.type: dashboard 1`] = `true`;
|
||||
|
||||
exports[`Test Schema properties.type: dashboard 2`] = `null`;
|
||||
|
||||
exports[`Test Schema properties.width: 180 1`] = `true`;
|
||||
|
||||
exports[`Test Schema properties.width: 180 2`] = `null`;
|
||||
Loading…
x
Reference in New Issue
Block a user