mirror of
https://github.com/lowdefy/lowdefy.git
synced 2025-04-06 15:30:30 +08:00
fix: Update all block tests.
This commit is contained in:
Gervwyk
parent
ca09c8c1a5
commit
5f0528d938
31
.pnp.cjs
generated
31
.pnp.cjs
generated
@ -5280,6 +5280,7 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
|
||||
["@testing-library/react", "virtual:04055f037dce009b6d437327a3df2c0a05f0436e14e2b705672dd0d1e0a3dfd29d8d62e0db8cb7e152c4b95e36ad3ccd6a68c9e962121dec9e597b25e0481519#npm:12.1.2"],
|
||||
["@testing-library/user-event", "virtual:04055f037dce009b6d437327a3df2c0a05f0436e14e2b705672dd0d1e0a3dfd29d8d62e0db8cb7e152c4b95e36ad3ccd6a68c9e962121dec9e597b25e0481519#npm:13.5.0"],
|
||||
["jest", "virtual:4a7337632ff6e9ee5a1c45a62a9ff4cc325a9367b21424babda93e269fe01b671e885bc41bdeebafb83c81f2a8eebbf0102043354a4e58905f61c8c3387cda1e#npm:27.3.1"],
|
||||
["jest-canvas-mock", "npm:2.3.1"],
|
||||
["jest-serializer-html", "npm:7.1.0"],
|
||||
["jest-transform-yaml", "npm:0.1.2"],
|
||||
["react", "npm:17.0.2"],
|
||||
@ -11521,6 +11522,15 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
|
||||
"linkType": "HARD",
|
||||
}]
|
||||
]],
|
||||
["cssfontparser", [
|
||||
["npm:1.2.1", {
|
||||
"packageLocation": "./.yarn/cache/cssfontparser-npm-1.2.1-f48947509b-952d487cdd.zip/node_modules/cssfontparser/",
|
||||
"packageDependencies": [
|
||||
["cssfontparser", "npm:1.2.1"]
|
||||
],
|
||||
"linkType": "HARD",
|
||||
}]
|
||||
]],
|
||||
["cssnano-preset-simple", [
|
||||
["npm:3.0.0", {
|
||||
"packageLocation": "./.yarn/cache/cssnano-preset-simple-npm-3.0.0-42fae6d1e4-03ad717960.zip/node_modules/cssnano-preset-simple/",
|
||||
@ -16327,6 +16337,17 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
|
||||
"linkType": "HARD",
|
||||
}]
|
||||
]],
|
||||
["jest-canvas-mock", [
|
||||
["npm:2.3.1", {
|
||||
"packageLocation": "./.yarn/cache/jest-canvas-mock-npm-2.3.1-75424c30ba-82606d348c.zip/node_modules/jest-canvas-mock/",
|
||||
"packageDependencies": [
|
||||
["jest-canvas-mock", "npm:2.3.1"],
|
||||
["cssfontparser", "npm:1.2.1"],
|
||||
["moo-color", "npm:1.0.2"]
|
||||
],
|
||||
"linkType": "HARD",
|
||||
}]
|
||||
]],
|
||||
["jest-changed-files", [
|
||||
["npm:27.3.0", {
|
||||
"packageLocation": "./.yarn/cache/jest-changed-files-npm-27.3.0-97edea84fa-add4a688ad.zip/node_modules/jest-changed-files/",
|
||||
@ -18823,6 +18844,16 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
|
||||
"linkType": "HARD",
|
||||
}]
|
||||
]],
|
||||
["moo-color", [
|
||||
["npm:1.0.2", {
|
||||
"packageLocation": "./.yarn/cache/moo-color-npm-1.0.2-2779af0966-9425438cf1.zip/node_modules/moo-color/",
|
||||
"packageDependencies": [
|
||||
["moo-color", "npm:1.0.2"],
|
||||
["color-name", "npm:1.1.4"]
|
||||
],
|
||||
"linkType": "HARD",
|
||||
}]
|
||||
]],
|
||||
["mri", [
|
||||
["npm:1.1.4", {
|
||||
"packageLocation": "./.yarn/cache/mri-npm-1.1.4-d22a399f26-e65b9aed3b.zip/node_modules/mri/",
|
||||
|
||||
BIN
.yarn/cache/cssfontparser-npm-1.2.1-f48947509b-952d487cdd.zip
vendored
Normal file
BIN
.yarn/cache/cssfontparser-npm-1.2.1-f48947509b-952d487cdd.zip
vendored
Normal file
Binary file not shown.
BIN
.yarn/cache/jest-canvas-mock-npm-2.3.1-75424c30ba-82606d348c.zip
vendored
Normal file
BIN
.yarn/cache/jest-canvas-mock-npm-2.3.1-75424c30ba-82606d348c.zip
vendored
Normal file
Binary file not shown.
BIN
.yarn/cache/moo-color-npm-1.0.2-2779af0966-9425438cf1.zip
vendored
Normal file
BIN
.yarn/cache/moo-color-npm-1.0.2-2779af0966-9425438cf1.zip
vendored
Normal file
Binary file not shown.
@ -4,10 +4,7 @@ exports[`default 1`] = `
|
||||
Object {
|
||||
"basePath": "",
|
||||
"blockId": "undefined_id",
|
||||
"components": Object {
|
||||
"Icon": [Function],
|
||||
"Link": [Function],
|
||||
},
|
||||
"components": Object {},
|
||||
"content": Object {},
|
||||
"events": Object {},
|
||||
"list": Array [],
|
||||
|
||||
@ -39,4 +39,5 @@ const mocks = [
|
||||
name: 'Affix',
|
||||
},
|
||||
];
|
||||
|
||||
runMockRenderTests({ examples, meta, mocks, schema, tests });
|
||||
|
||||
@ -23,5 +23,5 @@ import schema from './schema.json';
|
||||
|
||||
const { meta, tests } = block;
|
||||
|
||||
runRenderTests({ examples, Block, meta, schema });
|
||||
runRenderTests({ examples, Block, meta, schema, tests });
|
||||
runBlockSchemaTests({ examples, meta, schema });
|
||||
|
||||
@ -23,5 +23,5 @@ import schema from './schema.json';
|
||||
|
||||
const { meta, tests } = block;
|
||||
|
||||
runRenderTests({ examples, Block, meta, schema });
|
||||
runRenderTests({ examples, Block, meta, schema, tests });
|
||||
runBlockSchemaTests({ examples, meta, schema });
|
||||
|
||||
@ -14,26 +14,23 @@
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
import useRunAfterUpdate from './useRunAfterUpdate.js';
|
||||
import { useRef, useLayoutEffect } from 'react';
|
||||
const useLayoutEffect = jest.fn();
|
||||
const current = jest.fn();
|
||||
const ref = { current };
|
||||
const useRef = () => ref;
|
||||
|
||||
jest.mock('react', () => {
|
||||
const useLayoutEffect = jest.fn();
|
||||
const ref = { current: jest.fn() };
|
||||
const useRef = () => ref;
|
||||
return { useLayoutEffect, useRef };
|
||||
});
|
||||
|
||||
const ref = useRef();
|
||||
const { current } = ref;
|
||||
|
||||
beforeEach(() => {
|
||||
ref.current.mockReset();
|
||||
useLayoutEffect.mockReset();
|
||||
useLayoutEffect.mockImplementation((fn) => fn());
|
||||
});
|
||||
|
||||
test('default call', () => {
|
||||
test('default call', async () => {
|
||||
const useRunAfterUpdateFn = await import('./useRunAfterUpdate.js');
|
||||
const useRunAfterUpdate = useRunAfterUpdateFn.default;
|
||||
const res = useRunAfterUpdate();
|
||||
expect(useLayoutEffect).toHaveBeenCalledTimes(1);
|
||||
expect(current).toBeCalledTimes(1);
|
||||
|
||||
@ -14,13 +14,12 @@
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
// TODO use link
|
||||
import React from 'react';
|
||||
import { get, type } from '@lowdefy/helpers';
|
||||
import { blockDefaultProps } from '@lowdefy/block-utils';
|
||||
|
||||
const Strong = ({ children, strong }) => (strong ? <b>{children}</b> : <>{children}</>);
|
||||
const Tag = ({ blockId, children, className, disabled, href, Link, newTab, rel, onClick }) =>
|
||||
const Tag = ({ blockId, children, className, disabled, href, Link, newTab, onClick, rel }) =>
|
||||
disabled ? (
|
||||
<span id={blockId} className={className}>
|
||||
{children}
|
||||
|
||||
@ -1,37 +0,0 @@
|
||||
/*
|
||||
Copyright 2020-2021 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.
|
||||
*/
|
||||
|
||||
// TODO: test by mocking next link
|
||||
|
||||
// import { runMockRenderTests } from '@lowdefy/block-dev';
|
||||
|
||||
// import Block from './Anchor.js';
|
||||
// import examples from './examples.yaml';
|
||||
// import block from './index.js';
|
||||
// import schema from './schema.json';
|
||||
|
||||
// const { meta } = metaObj;
|
||||
|
||||
// const mocks = [
|
||||
// {
|
||||
// name: 'default',
|
||||
// fn: jest.fn(),
|
||||
// },
|
||||
// ];
|
||||
|
||||
// runMockRenderTests({ examples, Block, meta, mocks, schema });
|
||||
|
||||
test('null', () => {});
|
||||
@ -17,10 +17,11 @@
|
||||
import { runBlockSchemaTests, runRenderTests } from '@lowdefy/block-dev';
|
||||
|
||||
import Block from './Anchor.js';
|
||||
import examples from './examples.yaml';
|
||||
import block from './index.js';
|
||||
import examples from './examples.yaml';
|
||||
import schema from './schema.json';
|
||||
|
||||
const { meta } = block;
|
||||
runRenderTests({ examples, Block, meta, schema });
|
||||
const { meta, tests } = block;
|
||||
|
||||
runRenderTests({ examples, Block, meta, schema, tests });
|
||||
runBlockSchemaTests({ examples, meta, schema });
|
||||
|
||||
@ -88,7 +88,6 @@ exports[`Render properties.icon and properties.title - value[0] 1`] = `
|
||||
>
|
||||
<svg
|
||||
class="emotion-1"
|
||||
components="[object Object]"
|
||||
data-testid="AiOutlineExclamationCircle"
|
||||
id="properties.icon and properties.title_icon"
|
||||
/>
|
||||
@ -106,7 +105,6 @@ exports[`Render properties.icon object - value[0] 1`] = `
|
||||
>
|
||||
<svg
|
||||
class="emotion-1"
|
||||
components="[object Object]"
|
||||
data-testid="AiOutlineExclamationCircle"
|
||||
id="properties.icon object_icon"
|
||||
/>
|
||||
@ -124,7 +122,6 @@ exports[`Render properties.icon string - value[0] 1`] = `
|
||||
>
|
||||
<svg
|
||||
class="emotion-1"
|
||||
components="[object Object]"
|
||||
data-testid="AiOutlineExclamationCircle"
|
||||
id="properties.icon string_icon"
|
||||
/>
|
||||
@ -144,7 +141,6 @@ exports[`Render properties.icon, properties.title and properties.disabled - valu
|
||||
>
|
||||
<svg
|
||||
class="emotion-1"
|
||||
components="[object Object]"
|
||||
data-testid="AiOutlineExclamationCircle"
|
||||
id="properties.icon, properties.title and properties.disabled_icon"
|
||||
/>
|
||||
@ -198,7 +194,6 @@ exports[`Render properties.style with icon - value[0] 1`] = `
|
||||
>
|
||||
<svg
|
||||
class="emotion-1"
|
||||
components="[object Object]"
|
||||
data-testid="AiOutlineExclamationCircle"
|
||||
id="properties.style with icon_icon"
|
||||
/>
|
||||
|
||||
@ -24,8 +24,8 @@ import examples from './examples.yaml';
|
||||
import block from './index.js';
|
||||
import schema from './schema.json';
|
||||
|
||||
const { meta } = block;
|
||||
runRenderTests({ examples, Block, meta, schema });
|
||||
const { meta, tests } = block;
|
||||
runRenderTests({ examples, Block, meta, schema, tests });
|
||||
runBlockSchemaTests({ examples, meta, schema });
|
||||
|
||||
const { before, methods, getProps } = mockBlock({ meta, schema });
|
||||
|
||||
@ -23,8 +23,8 @@ import examples from './examples.yaml';
|
||||
import block from './index.js';
|
||||
import schema from './schema.json';
|
||||
|
||||
const { meta } = block;
|
||||
runRenderTests({ examples, Block, meta, schema });
|
||||
const { meta, tests } = block;
|
||||
runRenderTests({ examples, Block, meta, schema, tests });
|
||||
runBlockSchemaTests({ examples, meta, schema });
|
||||
|
||||
const { before, methods, getProps } = mockBlock({ meta, schema });
|
||||
|
||||
@ -23,8 +23,8 @@ import examples from './examples.yaml';
|
||||
import block from './index.js';
|
||||
import schema from './schema.json';
|
||||
|
||||
const { meta } = block;
|
||||
runRenderTests({ examples, Block, meta, schema });
|
||||
const { meta, tests } = block;
|
||||
runRenderTests({ examples, Block, meta, schema, tests });
|
||||
runBlockSchemaTests({ examples, meta, schema });
|
||||
|
||||
const { before, methods, getProps } = mockBlock({ meta, schema });
|
||||
|
||||
@ -21,6 +21,6 @@ import examples from './examples.yaml';
|
||||
import block from './index.js';
|
||||
import schema from './schema.json';
|
||||
|
||||
const { meta } = block;
|
||||
runRenderTests({ examples, Block, meta, schema });
|
||||
const { meta, tests } = block;
|
||||
runRenderTests({ examples, Block, meta, schema, tests });
|
||||
runBlockSchemaTests({ examples, meta, schema });
|
||||
|
||||
@ -3,7 +3,6 @@
|
||||
exports[`Render default - value[0] 1`] = `
|
||||
<svg
|
||||
class="emotion-0"
|
||||
components="[object Object]"
|
||||
data-testid="AiOutlineExclamationCircle"
|
||||
id="default"
|
||||
type="Icon"
|
||||
@ -13,7 +12,6 @@ exports[`Render default - value[0] 1`] = `
|
||||
exports[`Render properties.color - value[0] 1`] = `
|
||||
<svg
|
||||
class="emotion-0"
|
||||
components="[object Object]"
|
||||
data-testid="AiOutlineExclamationCircle"
|
||||
id="properties.color"
|
||||
size="25"
|
||||
@ -24,7 +22,6 @@ exports[`Render properties.color - value[0] 1`] = `
|
||||
exports[`Render properties.disableLoadingIcon: true - value[0] 1`] = `
|
||||
<svg
|
||||
class="emotion-0"
|
||||
components="[object Object]"
|
||||
data-testid="AiOutlineExclamationCircle"
|
||||
id="properties.disableLoadingIcon: true"
|
||||
type="Icon"
|
||||
@ -34,7 +31,6 @@ exports[`Render properties.disableLoadingIcon: true - value[0] 1`] = `
|
||||
exports[`Render properties.icon - value[0] 1`] = `
|
||||
<svg
|
||||
class="emotion-0"
|
||||
components="[object Object]"
|
||||
data-testid="AiOutlineExclamationCircle"
|
||||
id="properties.icon"
|
||||
type="Icon"
|
||||
@ -44,7 +40,6 @@ exports[`Render properties.icon - value[0] 1`] = `
|
||||
exports[`Render properties.rotate: 90 - value[0] 1`] = `
|
||||
<svg
|
||||
class="emotion-0"
|
||||
components="[object Object]"
|
||||
data-testid="AiOutlineExclamationCircle"
|
||||
id="properties.rotate: 90"
|
||||
rotate="90"
|
||||
@ -56,7 +51,6 @@ exports[`Render properties.rotate: 90 - value[0] 1`] = `
|
||||
exports[`Render properties.size: 30 - value[0] 1`] = `
|
||||
<svg
|
||||
class="emotion-0"
|
||||
components="[object Object]"
|
||||
data-testid="AiOutlineExclamationCircle"
|
||||
id="properties.size: 30"
|
||||
size="30"
|
||||
@ -88,7 +82,6 @@ exports[`Render properties.spin: true - value[0] 1`] = `
|
||||
|
||||
<svg
|
||||
class="emotion-0 emotion-1"
|
||||
components="[object Object]"
|
||||
data-testid="AiOutlineExclamationCircle"
|
||||
id="properties.spin: true"
|
||||
size="30"
|
||||
@ -103,7 +96,6 @@ exports[`Render properties.style: border: 1px solid red - value[0] 1`] = `
|
||||
|
||||
<svg
|
||||
class="emotion-0"
|
||||
components="[object Object]"
|
||||
data-testid="AiOutlineExclamationCircle"
|
||||
id="properties.style: border: 1px solid red"
|
||||
type="Icon"
|
||||
|
||||
@ -24,8 +24,8 @@ import examples from './examples.yaml';
|
||||
import block from './index.js';
|
||||
import schema from './schema.json';
|
||||
|
||||
const { meta } = block;
|
||||
runRenderTests({ examples, Block, meta, schema });
|
||||
const { meta, tests } = block;
|
||||
runRenderTests({ examples, Block, meta, schema, tests });
|
||||
runBlockSchemaTests({ examples, meta, schema });
|
||||
|
||||
const { before, methods, getProps } = mockBlock({ meta, schema });
|
||||
|
||||
@ -24,8 +24,8 @@ import examples from './examples.yaml';
|
||||
import block from './index.js';
|
||||
import schema from './schema.json';
|
||||
|
||||
const { meta } = block;
|
||||
runRenderTests({ examples, Block, meta, schema });
|
||||
const { meta, tests } = block;
|
||||
runRenderTests({ examples, Block, meta, schema, tests });
|
||||
runBlockSchemaTests({ examples, meta, schema });
|
||||
|
||||
const { before, methods, getProps } = mockBlock({ meta, schema });
|
||||
|
||||
@ -24,8 +24,8 @@ import examples from './examples.yaml';
|
||||
import block from './index.js';
|
||||
import schema from './schema.json';
|
||||
|
||||
const { meta } = block;
|
||||
runRenderTests({ examples, Block, meta, schema });
|
||||
const { meta, tests } = block;
|
||||
runRenderTests({ examples, Block, meta, schema, tests });
|
||||
runBlockSchemaTests({ examples, schema });
|
||||
|
||||
const { before, methods, getProps } = mockBlock({ meta, schema });
|
||||
|
||||
@ -58,6 +58,7 @@
|
||||
"@testing-library/react": "12.1.2",
|
||||
"@testing-library/user-event": "13.5.0",
|
||||
"jest": "27.3.1",
|
||||
"jest-canvas-mock": "2.3.1",
|
||||
"jest-serializer-html": "7.1.0",
|
||||
"jest-transform-yaml": "0.1.2"
|
||||
},
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
import React, { useState } from 'react';
|
||||
import { ChromePicker } from 'react-color';
|
||||
import { blockDefaultProps } from '@lowdefy/block-utils';
|
||||
import Label from '@lowdefy/blocks-antd/blocks/Label/Label.js';
|
||||
import Label from '@lowdefy/blocks-antd/dist/blocks/Label/Label.js';
|
||||
|
||||
const Selector = ({ blockId, loading, methods, properties, required, validation, value }) => {
|
||||
const [color, setColor] = useState(value || properties.defaultColor || '#000000');
|
||||
|
||||
@ -13,28 +13,34 @@
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
import 'jest-canvas-mock';
|
||||
import { runMockRenderTests } from '@lowdefy/block-dev';
|
||||
import { ChromePicker } from 'react-color';
|
||||
|
||||
import Block from './ChromeColorSelector.js';
|
||||
import examples from './examples.yaml';
|
||||
import block from './index.js';
|
||||
import examples from './examples.yaml';
|
||||
import schema from './schema.json';
|
||||
|
||||
const { meta } = block;
|
||||
const { meta, tests } = block;
|
||||
|
||||
jest.mock('react-color', () => {
|
||||
const selectors = {
|
||||
ChromePicker: jest.fn((props) => props.toString()),
|
||||
ChromePicker: jest.fn(() => 'mocked'),
|
||||
};
|
||||
return selectors;
|
||||
});
|
||||
|
||||
const mocks = [
|
||||
{
|
||||
name: 'default',
|
||||
fn: ChromePicker,
|
||||
getMockFns: async () => {
|
||||
const antd = await import('react-color');
|
||||
return [antd.ChromePicker];
|
||||
},
|
||||
getBlock: async () => {
|
||||
const Block = await import('./ChromeColorSelector.js');
|
||||
return Block.default;
|
||||
},
|
||||
name: 'ChromeColorSelector',
|
||||
},
|
||||
];
|
||||
|
||||
runMockRenderTests({ examples, Block, meta, mocks });
|
||||
runMockRenderTests({ examples, meta, mocks, schema, tests });
|
||||
|
||||
@ -14,6 +14,7 @@
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
import 'jest-canvas-mock';
|
||||
import { runBlockSchemaTests, runRenderTests } from '@lowdefy/block-dev';
|
||||
|
||||
import Block from './ChromeColorSelector.js';
|
||||
@ -21,7 +22,7 @@ import examples from './examples.yaml';
|
||||
import block from './index.js';
|
||||
import schema from './schema.json';
|
||||
|
||||
const { meta } = block;
|
||||
const { meta, tests } = block;
|
||||
|
||||
runRenderTests({ examples, Block, meta, schema });
|
||||
runRenderTests({ examples, Block, meta, schema, tests });
|
||||
runBlockSchemaTests({ examples, meta, schema });
|
||||
|
||||
@ -0,0 +1,97 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Mock render - default - value[0] - ChromeColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"className": "{\\"style\\":[{\\"marginBottom\\":\\"0px !important\\"},null]}",
|
||||
"color": "#000000",
|
||||
"disableAlpha": undefined,
|
||||
"id": "default_input",
|
||||
"onChange": [Function],
|
||||
"onChangeComplete": [Function],
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - defaultColor - value[0] - ChromeColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"className": "{\\"style\\":[{\\"marginBottom\\":\\"0px !important\\"},null]}",
|
||||
"color": "#FF0000",
|
||||
"disableAlpha": undefined,
|
||||
"id": "defaultColor_input",
|
||||
"onChange": [Function],
|
||||
"onChangeComplete": [Function],
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - disableAlpha - value[0] - ChromeColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"className": "{\\"style\\":[{\\"marginBottom\\":\\"0px !important\\"},null]}",
|
||||
"color": "#000000",
|
||||
"disableAlpha": true,
|
||||
"id": "disableAlpha_input",
|
||||
"onChange": [Function],
|
||||
"onChangeComplete": [Function],
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - inputStyle - value[0] - ChromeColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"className": "{\\"style\\":[{\\"marginBottom\\":\\"0px !important\\"},{\\"border\\":\\"3px solid blue\\"}]}",
|
||||
"color": "#000000",
|
||||
"disableAlpha": undefined,
|
||||
"id": "inputStyle_input",
|
||||
"onChange": [Function],
|
||||
"onChangeComplete": [Function],
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - label-disabled - value[0] - ChromeColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"className": "{\\"style\\":[{\\"marginBottom\\":\\"0px !important\\"},null]}",
|
||||
"color": "#000000",
|
||||
"disableAlpha": undefined,
|
||||
"id": "label-disabled_input",
|
||||
"onChange": [Function],
|
||||
"onChangeComplete": [Function],
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - title - value[0] - ChromeColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"className": "{\\"style\\":[{\\"marginBottom\\":\\"0px !important\\"},null]}",
|
||||
"color": "#000000",
|
||||
"disableAlpha": undefined,
|
||||
"id": "title_input",
|
||||
"onChange": [Function],
|
||||
"onChangeComplete": [Function],
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
File diff suppressed because it is too large
Load Diff
@ -17,7 +17,7 @@
|
||||
import React from 'react';
|
||||
import { CirclePicker } from 'react-color';
|
||||
import { blockDefaultProps } from '@lowdefy/block-utils';
|
||||
import Label from '@lowdefy/blocks-antd/blocks/Label/Label.js';
|
||||
import Label from '@lowdefy/blocks-antd/dist/blocks/Label/Label.js';
|
||||
|
||||
const Selector = ({ blockId, loading, methods, properties, required, validation, value }) => {
|
||||
return (
|
||||
|
||||
@ -15,26 +15,32 @@
|
||||
*/
|
||||
|
||||
import { runMockRenderTests } from '@lowdefy/block-dev';
|
||||
import { CirclePicker } from 'react-color';
|
||||
|
||||
import Block from './CircleColorSelector.js';
|
||||
import examples from './examples.yaml';
|
||||
import block from './index.js';
|
||||
import examples from './examples.yaml';
|
||||
import schema from './schema.json';
|
||||
|
||||
const { meta } = block;
|
||||
const { meta, tests } = block;
|
||||
|
||||
jest.mock('react-color', () => {
|
||||
const selectors = {
|
||||
CirclePicker: jest.fn((props) => props.toString()),
|
||||
CirclePicker: jest.fn(() => 'mocked'),
|
||||
};
|
||||
return selectors;
|
||||
});
|
||||
|
||||
const mocks = [
|
||||
{
|
||||
name: 'default',
|
||||
fn: CirclePicker,
|
||||
getMockFns: async () => {
|
||||
const antd = await import('react-color');
|
||||
return [antd.CirclePicker];
|
||||
},
|
||||
getBlock: async () => {
|
||||
const Block = await import('./CircleColorSelector.js');
|
||||
return Block.default;
|
||||
},
|
||||
name: 'CircleColorSelector',
|
||||
},
|
||||
];
|
||||
|
||||
runMockRenderTests({ examples, Block, meta, mocks });
|
||||
runMockRenderTests({ examples, meta, mocks, schema, tests });
|
||||
|
||||
@ -21,7 +21,7 @@ import examples from './examples.yaml';
|
||||
import block from './index.js';
|
||||
import schema from './schema.json';
|
||||
|
||||
const { meta } = block;
|
||||
const { meta, tests } = block;
|
||||
|
||||
runRenderTests({ examples, Block, meta, schema });
|
||||
runRenderTests({ examples, Block, meta, schema, tests });
|
||||
runBlockSchemaTests({ examples, meta, schema });
|
||||
|
||||
@ -0,0 +1,208 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Mock render - circleSize - value[0] - CircleColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"circleSize": 50,
|
||||
"circleSpacing": 14,
|
||||
"color": "#000000",
|
||||
"colors": undefined,
|
||||
"id": "circleSize_input",
|
||||
"onChangeComplete": [Function],
|
||||
"width": "100%",
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - circleSpacing - value[0] - CircleColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"circleSize": 28,
|
||||
"circleSpacing": 1,
|
||||
"color": "#000000",
|
||||
"colors": undefined,
|
||||
"id": "circleSpacing_input",
|
||||
"onChangeComplete": [Function],
|
||||
"width": "100%",
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - colors - value[0] - CircleColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"circleSize": 28,
|
||||
"circleSpacing": 14,
|
||||
"color": "#000000",
|
||||
"colors": Array [
|
||||
"#123456",
|
||||
"#abc345",
|
||||
],
|
||||
"id": "colors_input",
|
||||
"onChangeComplete": [Function],
|
||||
"width": "100%",
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - default - value[0] - CircleColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"circleSize": 28,
|
||||
"circleSpacing": 14,
|
||||
"color": "#000000",
|
||||
"colors": undefined,
|
||||
"id": "default_input",
|
||||
"onChangeComplete": [Function],
|
||||
"width": "100%",
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - defaultColor - value[0] - CircleColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"circleSize": 28,
|
||||
"circleSpacing": 14,
|
||||
"color": "#FF0000",
|
||||
"colors": undefined,
|
||||
"id": "defaultColor_input",
|
||||
"onChangeComplete": [Function],
|
||||
"width": "100%",
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - inputStyle - value[0] - CircleColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"circleSize": 28,
|
||||
"circleSpacing": 14,
|
||||
"color": "#000000",
|
||||
"colors": undefined,
|
||||
"id": "inputStyle_input",
|
||||
"onChangeComplete": [Function],
|
||||
"width": "100%",
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - label-disabled - value[0] - CircleColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"circleSize": 28,
|
||||
"circleSpacing": 14,
|
||||
"color": "#000000",
|
||||
"colors": undefined,
|
||||
"id": "label-disabled_input",
|
||||
"onChangeComplete": [Function],
|
||||
"width": "100%",
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - showValue - value[0] - CircleColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"circleSize": 28,
|
||||
"circleSpacing": 14,
|
||||
"color": "#000000",
|
||||
"colors": undefined,
|
||||
"id": "showValue_input",
|
||||
"onChangeComplete": [Function],
|
||||
"width": "100%",
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - showValue, value - value[0] - CircleColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"circleSize": 28,
|
||||
"circleSpacing": 14,
|
||||
"color": "#000000",
|
||||
"colors": undefined,
|
||||
"id": "showValue, value_input",
|
||||
"onChangeComplete": [Function],
|
||||
"width": "100%",
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - title - value[0] - CircleColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"circleSize": 28,
|
||||
"circleSpacing": 14,
|
||||
"color": "#000000",
|
||||
"colors": undefined,
|
||||
"id": "title_input",
|
||||
"onChangeComplete": [Function],
|
||||
"width": "100%",
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - valueStyle - value[0] - CircleColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"circleSize": 28,
|
||||
"circleSpacing": 14,
|
||||
"color": "#000000",
|
||||
"colors": undefined,
|
||||
"id": "valueStyle_input",
|
||||
"onChangeComplete": [Function],
|
||||
"width": "100%",
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - width - value[0] - CircleColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"circleSize": 28,
|
||||
"circleSpacing": 14,
|
||||
"color": "#000000",
|
||||
"colors": undefined,
|
||||
"id": "width_input",
|
||||
"onChangeComplete": [Function],
|
||||
"width": 200,
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
File diff suppressed because it is too large
Load Diff
@ -17,7 +17,7 @@
|
||||
import React from 'react';
|
||||
import { BlockPicker } from 'react-color';
|
||||
import { blockDefaultProps } from '@lowdefy/block-utils';
|
||||
import Label from '@lowdefy/blocks-antd/blocks/Label/Label';
|
||||
import Label from '@lowdefy/blocks-antd/dist/blocks/Label/Label.js';
|
||||
|
||||
const Selector = ({ blockId, loading, methods, properties, required, validation, value }) => {
|
||||
return (
|
||||
|
||||
@ -15,26 +15,32 @@
|
||||
*/
|
||||
|
||||
import { runMockRenderTests } from '@lowdefy/block-dev';
|
||||
import { BlockPicker } from 'react-color';
|
||||
|
||||
import Block from './ColorSelector.js';
|
||||
import examples from './examples.yaml';
|
||||
import block from './index.js';
|
||||
import examples from './examples.yaml';
|
||||
import schema from './schema.json';
|
||||
|
||||
const { meta } = block;
|
||||
const { meta, tests } = block;
|
||||
|
||||
jest.mock('react-color', () => {
|
||||
const selectors = {
|
||||
BlockPicker: jest.fn((props) => props.toString()),
|
||||
BlockPicker: jest.fn(() => 'mocked'),
|
||||
};
|
||||
return selectors;
|
||||
});
|
||||
|
||||
const mocks = [
|
||||
{
|
||||
name: 'default',
|
||||
fn: BlockPicker,
|
||||
getMockFns: async () => {
|
||||
const antd = await import('react-color');
|
||||
return [antd.BlockPicker];
|
||||
},
|
||||
getBlock: async () => {
|
||||
const Block = await import('./ColorSelector.js');
|
||||
return Block.default;
|
||||
},
|
||||
name: 'ColorSelector',
|
||||
},
|
||||
];
|
||||
|
||||
runMockRenderTests({ examples, Block, meta, mocks });
|
||||
runMockRenderTests({ examples, meta, mocks, schema, tests });
|
||||
|
||||
@ -21,7 +21,7 @@ import examples from './examples.yaml';
|
||||
import block from './index.js';
|
||||
import schema from './schema.json';
|
||||
|
||||
const { meta } = block;
|
||||
const { meta, tests } = block;
|
||||
|
||||
runRenderTests({ examples, Block, meta, schema });
|
||||
runRenderTests({ examples, Block, meta, schema, tests });
|
||||
runBlockSchemaTests({ examples, meta, schema });
|
||||
|
||||
@ -0,0 +1,123 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Mock render - colors - value[0] - ColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"className": "{\\"style\\":[{\\"marginBottom\\":\\"0px !important\\"},null]}",
|
||||
"color": "#000000",
|
||||
"colors": Array [
|
||||
"#123456",
|
||||
"#abc345",
|
||||
],
|
||||
"id": "colors_input",
|
||||
"onChangeComplete": [Function],
|
||||
"triangle": "hide",
|
||||
"width": "100%",
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - default - value[0] - ColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"className": "{\\"style\\":[{\\"marginBottom\\":\\"0px !important\\"},null]}",
|
||||
"color": "#000000",
|
||||
"colors": undefined,
|
||||
"id": "default_input",
|
||||
"onChangeComplete": [Function],
|
||||
"triangle": "hide",
|
||||
"width": "100%",
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - defaultColor - value[0] - ColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"className": "{\\"style\\":[{\\"marginBottom\\":\\"0px !important\\"},null]}",
|
||||
"color": "#FF0000",
|
||||
"colors": undefined,
|
||||
"id": "defaultColor_input",
|
||||
"onChangeComplete": [Function],
|
||||
"triangle": "hide",
|
||||
"width": "100%",
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - inputStyle - value[0] - ColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"className": "{\\"style\\":[{\\"marginBottom\\":\\"0px !important\\"},{\\"border\\":\\"3px solid blue\\"}]}",
|
||||
"color": "#000000",
|
||||
"colors": undefined,
|
||||
"id": "inputStyle_input",
|
||||
"onChangeComplete": [Function],
|
||||
"triangle": "hide",
|
||||
"width": "100%",
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - label-disabled - value[0] - ColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"className": "{\\"style\\":[{\\"marginBottom\\":\\"0px !important\\"},null]}",
|
||||
"color": "#000000",
|
||||
"colors": undefined,
|
||||
"id": "label-disabled_input",
|
||||
"onChangeComplete": [Function],
|
||||
"triangle": "hide",
|
||||
"width": "100%",
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - title - value[0] - ColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"className": "{\\"style\\":[{\\"marginBottom\\":\\"0px !important\\"},null]}",
|
||||
"color": "#000000",
|
||||
"colors": undefined,
|
||||
"id": "title_input",
|
||||
"onChangeComplete": [Function],
|
||||
"triangle": "hide",
|
||||
"width": "100%",
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - width - value[0] - ColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"className": "{\\"style\\":[{\\"marginBottom\\":\\"0px !important\\"},null]}",
|
||||
"color": "#000000",
|
||||
"colors": undefined,
|
||||
"id": "width_input",
|
||||
"onChangeComplete": [Function],
|
||||
"triangle": "hide",
|
||||
"width": 200,
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
File diff suppressed because it is too large
Load Diff
@ -17,7 +17,7 @@
|
||||
import React from 'react';
|
||||
import { CompactPicker } from 'react-color';
|
||||
import { blockDefaultProps } from '@lowdefy/block-utils';
|
||||
import Label from '@lowdefy/blocks-antd/blocks/Label/Label.js';
|
||||
import Label from '@lowdefy/blocks-antd/dist/blocks/Label/Label.js';
|
||||
|
||||
const Selector = ({ blockId, loading, methods, properties, required, validation, value }) => {
|
||||
return (
|
||||
|
||||
@ -15,26 +15,32 @@
|
||||
*/
|
||||
|
||||
import { runMockRenderTests } from '@lowdefy/block-dev';
|
||||
import { CompactPicker } from 'react-color';
|
||||
|
||||
import Block from './CompactColorSelector.js';
|
||||
import examples from './examples.yaml';
|
||||
import block from './index.js';
|
||||
import examples from './examples.yaml';
|
||||
import schema from './schema.json';
|
||||
|
||||
const { meta } = block;
|
||||
const { meta, tests } = block;
|
||||
|
||||
jest.mock('react-color', () => {
|
||||
const selectors = {
|
||||
CompactPicker: jest.fn((props) => props.toString()),
|
||||
CompactPicker: jest.fn(() => 'mocked'),
|
||||
};
|
||||
return selectors;
|
||||
});
|
||||
|
||||
const mocks = [
|
||||
{
|
||||
name: 'default',
|
||||
fn: CompactPicker,
|
||||
getMockFns: async () => {
|
||||
const antd = await import('react-color');
|
||||
return [antd.CompactPicker];
|
||||
},
|
||||
getBlock: async () => {
|
||||
const Block = await import('./CompactColorSelector.js');
|
||||
return Block.default;
|
||||
},
|
||||
name: 'CompactColorSelector',
|
||||
},
|
||||
];
|
||||
|
||||
runMockRenderTests({ examples, Block, meta, mocks });
|
||||
runMockRenderTests({ examples, meta, mocks, schema, tests });
|
||||
|
||||
@ -21,7 +21,7 @@ import examples from './examples.yaml';
|
||||
import block from './index.js';
|
||||
import schema from './schema.json';
|
||||
|
||||
const { meta } = block;
|
||||
const { meta, tests } = block;
|
||||
|
||||
runRenderTests({ examples, Block, meta, schema });
|
||||
runRenderTests({ examples, Block, meta, schema, tests });
|
||||
runBlockSchemaTests({ examples, meta, schema });
|
||||
|
||||
@ -0,0 +1,94 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Mock render - colors - value[0] - CompactColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"className": "{\\"style\\":[{\\"marginBottom\\":\\"0px !important\\"},null]}",
|
||||
"color": "#000000",
|
||||
"colors": Array [
|
||||
"#123456",
|
||||
"#abc345",
|
||||
],
|
||||
"id": "colors_input",
|
||||
"onChangeComplete": [Function],
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - default - value[0] - CompactColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"className": "{\\"style\\":[{\\"marginBottom\\":\\"0px !important\\"},null]}",
|
||||
"color": "#000000",
|
||||
"colors": undefined,
|
||||
"id": "default_input",
|
||||
"onChangeComplete": [Function],
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - defaultColor - value[0] - CompactColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"className": "{\\"style\\":[{\\"marginBottom\\":\\"0px !important\\"},null]}",
|
||||
"color": "#FF0000",
|
||||
"colors": undefined,
|
||||
"id": "defaultColor_input",
|
||||
"onChangeComplete": [Function],
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - inputStyle - value[0] - CompactColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"className": "{\\"style\\":[{\\"marginBottom\\":\\"0px !important\\"},{\\"border\\":\\"3px solid blue\\"}]}",
|
||||
"color": "#000000",
|
||||
"colors": undefined,
|
||||
"id": "inputStyle_input",
|
||||
"onChangeComplete": [Function],
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - label-disabled - value[0] - CompactColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"className": "{\\"style\\":[{\\"marginBottom\\":\\"0px !important\\"},null]}",
|
||||
"color": "#000000",
|
||||
"colors": undefined,
|
||||
"id": "label-disabled_input",
|
||||
"onChangeComplete": [Function],
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - title - value[0] - CompactColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"className": "{\\"style\\":[{\\"marginBottom\\":\\"0px !important\\"},null]}",
|
||||
"color": "#000000",
|
||||
"colors": undefined,
|
||||
"id": "title_input",
|
||||
"onChangeComplete": [Function],
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
File diff suppressed because it is too large
Load Diff
@ -17,7 +17,7 @@
|
||||
import React from 'react';
|
||||
import { GithubPicker } from 'react-color';
|
||||
import { blockDefaultProps } from '@lowdefy/block-utils';
|
||||
import Label from '@lowdefy/blocks-antd/blocks/Label/Label.js';
|
||||
import Label from '@lowdefy/blocks-antd/dist/blocks/Label/Label.js';
|
||||
|
||||
const Selector = ({ blockId, loading, methods, properties, required, validation, value }) => {
|
||||
return (
|
||||
|
||||
@ -15,26 +15,32 @@
|
||||
*/
|
||||
|
||||
import { runMockRenderTests } from '@lowdefy/block-dev';
|
||||
import { GithubPicker } from 'react-color';
|
||||
|
||||
import Block from './GithubColorSelector.js';
|
||||
import examples from './examples.yaml';
|
||||
import block from './index.js';
|
||||
import examples from './examples.yaml';
|
||||
import schema from './schema.json';
|
||||
|
||||
const { meta } = block;
|
||||
const { meta, tests } = block;
|
||||
|
||||
jest.mock('react-color', () => {
|
||||
const selectors = {
|
||||
GithubPicker: jest.fn((props) => props.toString()),
|
||||
GithubPicker: jest.fn(() => 'mocked'),
|
||||
};
|
||||
return selectors;
|
||||
});
|
||||
|
||||
const mocks = [
|
||||
{
|
||||
name: 'default',
|
||||
fn: GithubPicker,
|
||||
getMockFns: async () => {
|
||||
const antd = await import('react-color');
|
||||
return [antd.GithubPicker];
|
||||
},
|
||||
getBlock: async () => {
|
||||
const Block = await import('./GithubColorSelector.js');
|
||||
return Block.default;
|
||||
},
|
||||
name: 'GithubColorSelector',
|
||||
},
|
||||
];
|
||||
|
||||
runMockRenderTests({ examples, Block, meta, mocks });
|
||||
runMockRenderTests({ examples, meta, mocks, schema, tests });
|
||||
|
||||
@ -21,7 +21,7 @@ import examples from './examples.yaml';
|
||||
import block from './index.js';
|
||||
import schema from './schema.json';
|
||||
|
||||
const { meta } = block;
|
||||
const { meta, tests } = block;
|
||||
|
||||
runRenderTests({ examples, Block, meta, schema });
|
||||
runRenderTests({ examples, Block, meta, schema, tests });
|
||||
runBlockSchemaTests({ examples, meta, schema });
|
||||
|
||||
@ -0,0 +1,157 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Mock render - colors - value[0] - GithubColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"className": "{\\"style\\":[{\\"marginBottom\\":\\"0px !important\\"},null]}",
|
||||
"color": "#000000",
|
||||
"colors": Array [
|
||||
"#123456",
|
||||
"#abc345",
|
||||
],
|
||||
"id": "colors_input",
|
||||
"onChangeComplete": [Function],
|
||||
"triangle": "hide",
|
||||
"width": "100%",
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - default - value[0] - GithubColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"className": "{\\"style\\":[{\\"marginBottom\\":\\"0px !important\\"},null]}",
|
||||
"color": "#000000",
|
||||
"colors": undefined,
|
||||
"id": "default_input",
|
||||
"onChangeComplete": [Function],
|
||||
"triangle": "hide",
|
||||
"width": "100%",
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - defaultColor - value[0] - GithubColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"className": "{\\"style\\":[{\\"marginBottom\\":\\"0px !important\\"},null]}",
|
||||
"color": "#FF0000",
|
||||
"colors": undefined,
|
||||
"id": "defaultColor_input",
|
||||
"onChangeComplete": [Function],
|
||||
"triangle": "hide",
|
||||
"width": "100%",
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - inputStyle - value[0] - GithubColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"className": "{\\"style\\":[{\\"marginBottom\\":\\"0px !important\\"},{\\"border\\":\\"3px solid blue\\"}]}",
|
||||
"color": "#000000",
|
||||
"colors": undefined,
|
||||
"id": "inputStyle_input",
|
||||
"onChangeComplete": [Function],
|
||||
"triangle": "hide",
|
||||
"width": "100%",
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - label-disabled - value[0] - GithubColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"className": "{\\"style\\":[{\\"marginBottom\\":\\"0px !important\\"},null]}",
|
||||
"color": "#000000",
|
||||
"colors": undefined,
|
||||
"id": "label-disabled_input",
|
||||
"onChangeComplete": [Function],
|
||||
"triangle": "hide",
|
||||
"width": "100%",
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - title - value[0] - GithubColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"className": "{\\"style\\":[{\\"marginBottom\\":\\"0px !important\\"},null]}",
|
||||
"color": "#000000",
|
||||
"colors": undefined,
|
||||
"id": "title_input",
|
||||
"onChangeComplete": [Function],
|
||||
"triangle": "hide",
|
||||
"width": "100%",
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - triangle-top-left - value[0] - GithubColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"className": "{\\"style\\":[{\\"marginBottom\\":\\"0px !important\\"},null]}",
|
||||
"color": "#000000",
|
||||
"colors": undefined,
|
||||
"id": "triangle-top-left_input",
|
||||
"onChangeComplete": [Function],
|
||||
"triangle": "top-left",
|
||||
"width": "100%",
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - triangle-top-right - value[0] - GithubColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"className": "{\\"style\\":[{\\"marginBottom\\":\\"0px !important\\"},null]}",
|
||||
"color": "#000000",
|
||||
"colors": undefined,
|
||||
"id": "triangle-top-right_input",
|
||||
"onChangeComplete": [Function],
|
||||
"triangle": "top-right",
|
||||
"width": "100%",
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - width - value[0] - GithubColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"className": "{\\"style\\":[{\\"marginBottom\\":\\"0px !important\\"},null]}",
|
||||
"color": "#000000",
|
||||
"colors": undefined,
|
||||
"id": "width_input",
|
||||
"onChangeComplete": [Function],
|
||||
"triangle": "hide",
|
||||
"width": 200,
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
File diff suppressed because it is too large
Load Diff
@ -17,7 +17,7 @@
|
||||
import React from 'react';
|
||||
import { SliderPicker } from 'react-color';
|
||||
import { blockDefaultProps } from '@lowdefy/block-utils';
|
||||
import Label from '@lowdefy/blocks-antd/blocks/Label/Label.js';
|
||||
import Label from '@lowdefy/blocks-antd/dist/blocks/Label/Label.js';
|
||||
|
||||
const Selector = ({ blockId, loading, methods, properties, required, validation, value }) => {
|
||||
return (
|
||||
|
||||
@ -15,26 +15,32 @@
|
||||
*/
|
||||
|
||||
import { runMockRenderTests } from '@lowdefy/block-dev';
|
||||
import { SliderPicker } from 'react-color';
|
||||
|
||||
import Block from './SliderColorSelector.js';
|
||||
import examples from './examples.yaml';
|
||||
import block from './index.js';
|
||||
import examples from './examples.yaml';
|
||||
import schema from './schema.json';
|
||||
|
||||
const { meta } = block;
|
||||
const { meta, tests } = block;
|
||||
|
||||
jest.mock('react-color', () => {
|
||||
const selectors = {
|
||||
SliderPicker: jest.fn((props) => props.toString()),
|
||||
SliderPicker: jest.fn(() => 'mocked'),
|
||||
};
|
||||
return selectors;
|
||||
});
|
||||
|
||||
const mocks = [
|
||||
{
|
||||
name: 'default',
|
||||
fn: SliderPicker,
|
||||
getMockFns: async () => {
|
||||
const antd = await import('react-color');
|
||||
return [antd.SliderPicker];
|
||||
},
|
||||
getBlock: async () => {
|
||||
const Block = await import('./SliderColorSelector.js');
|
||||
return Block.default;
|
||||
},
|
||||
name: 'SliderColorSelector',
|
||||
},
|
||||
];
|
||||
|
||||
runMockRenderTests({ examples, Block, meta, mocks });
|
||||
runMockRenderTests({ examples, meta, mocks, schema, tests });
|
||||
|
||||
@ -21,7 +21,7 @@ import examples from './examples.yaml';
|
||||
import block from './index.js';
|
||||
import schema from './schema.json';
|
||||
|
||||
const { meta } = block;
|
||||
const { meta, tests } = block;
|
||||
|
||||
runRenderTests({ examples, Block, meta, schema });
|
||||
runRenderTests({ examples, Block, meta, schema, tests });
|
||||
runBlockSchemaTests({ examples, meta, schema });
|
||||
|
||||
@ -0,0 +1,85 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Mock render - colors - value[0] - SliderColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"className": "{\\"style\\":[{\\"marginBottom\\":\\"0px !important\\"},null]}",
|
||||
"color": "#000000",
|
||||
"id": "colors_input",
|
||||
"onChangeComplete": [Function],
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - default - value[0] - SliderColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"className": "{\\"style\\":[{\\"marginBottom\\":\\"0px !important\\"},null]}",
|
||||
"color": "#000000",
|
||||
"id": "default_input",
|
||||
"onChangeComplete": [Function],
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - defaultColor - value[0] - SliderColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"className": "{\\"style\\":[{\\"marginBottom\\":\\"0px !important\\"},null]}",
|
||||
"color": "#11FF00",
|
||||
"id": "defaultColor_input",
|
||||
"onChangeComplete": [Function],
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - inputStyle - value[0] - SliderColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"className": "{\\"style\\":[{\\"marginBottom\\":\\"0px !important\\"},{\\"border\\":\\"3px solid blue\\"}]}",
|
||||
"color": "#000000",
|
||||
"id": "inputStyle_input",
|
||||
"onChangeComplete": [Function],
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - label-disabled - value[0] - SliderColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"className": "{\\"style\\":[{\\"marginBottom\\":\\"0px !important\\"},null]}",
|
||||
"color": "#000000",
|
||||
"id": "label-disabled_input",
|
||||
"onChangeComplete": [Function],
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - title - value[0] - SliderColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"className": "{\\"style\\":[{\\"marginBottom\\":\\"0px !important\\"},null]}",
|
||||
"color": "#000000",
|
||||
"id": "title_input",
|
||||
"onChangeComplete": [Function],
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
@ -0,0 +1,839 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Render colors - value[0] 1`] = `
|
||||
.emotion-0 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.emotion-1 {
|
||||
white-space: normal;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.emotion-2 {
|
||||
height: -webkit-fit-content!important;
|
||||
height: -moz-fit-content!important;
|
||||
height: fit-content!important;
|
||||
min-height: 32px;
|
||||
}
|
||||
|
||||
.emotion-4 {
|
||||
margin-bottom: 0px!important;
|
||||
}
|
||||
|
||||
<div
|
||||
class="ant-row ant-form-item emotion-0"
|
||||
id="colors"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-form-item-label ant-form-item-label-left emotion-1 ant-col-xs-24 ant-col-sm-24"
|
||||
>
|
||||
<label
|
||||
class="emotion-2"
|
||||
for="colors_input"
|
||||
title="colors"
|
||||
>
|
||||
<span
|
||||
class="emotion-3"
|
||||
>
|
||||
colors
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-24"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input-content"
|
||||
>
|
||||
<div
|
||||
class="slider-picker emotion-4"
|
||||
>
|
||||
<div
|
||||
style="height: 12px; position: relative;"
|
||||
>
|
||||
<div
|
||||
style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px;"
|
||||
>
|
||||
<div
|
||||
class="hue-horizontal"
|
||||
style="padding: 0px 2px; position: relative; height: 100%;"
|
||||
>
|
||||
<style>
|
||||
|
||||
.hue-horizontal {
|
||||
background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0
|
||||
33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
|
||||
background: -webkit-linear-gradient(to right, #f00 0%, #ff0
|
||||
17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
|
||||
}
|
||||
|
||||
.hue-vertical {
|
||||
background: linear-gradient(to top, #f00 0%, #ff0 17%, #0f0 33%,
|
||||
#0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
|
||||
background: -webkit-linear-gradient(to top, #f00 0%, #ff0 17%,
|
||||
#0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
|
||||
}
|
||||
|
||||
</style>
|
||||
<div
|
||||
style="position: absolute; left: 0%;"
|
||||
>
|
||||
<div
|
||||
style="width: 14px; height: 14px; border-radius: 6px; transform: translate(-7px, -1px); background-color: rgb(248, 248, 248); box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
style="margin-top: 20px;"
|
||||
>
|
||||
<div
|
||||
style="box-sizing: border-box; width: 20%; padding-right: 1px; float: left;"
|
||||
>
|
||||
<div
|
||||
style="height: 12px; background: rgb(230, 179, 179); cursor: pointer; border-radius: 2px 0 0 2px;"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style="box-sizing: border-box; width: 20%; padding-right: 1px; float: left;"
|
||||
>
|
||||
<div
|
||||
style="height: 12px; background: rgb(210, 121, 121); cursor: pointer;"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style="box-sizing: border-box; width: 20%; padding-right: 1px; float: left;"
|
||||
>
|
||||
<div
|
||||
style="height: 12px; background: rgb(191, 64, 64); cursor: pointer;"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style="box-sizing: border-box; width: 20%; padding-right: 1px; float: left;"
|
||||
>
|
||||
<div
|
||||
style="height: 12px; background: rgb(134, 45, 45); cursor: pointer;"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style="box-sizing: border-box; width: 20%; padding-right: 1px; float: left;"
|
||||
>
|
||||
<div
|
||||
style="height: 12px; background: rgb(77, 25, 25); cursor: pointer; border-radius: 0 2px 2px 0;"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style="clear: both;"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Render default - value[0] 1`] = `
|
||||
.emotion-0 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.emotion-1 {
|
||||
white-space: normal;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.emotion-2 {
|
||||
height: -webkit-fit-content!important;
|
||||
height: -moz-fit-content!important;
|
||||
height: fit-content!important;
|
||||
min-height: 32px;
|
||||
}
|
||||
|
||||
.emotion-4 {
|
||||
margin-bottom: 0px!important;
|
||||
}
|
||||
|
||||
<div
|
||||
class="ant-row ant-form-item emotion-0"
|
||||
id="default"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-form-item-label ant-form-item-label-left emotion-1 ant-col-xs-24 ant-col-sm-24"
|
||||
>
|
||||
<label
|
||||
class="emotion-2"
|
||||
for="default_input"
|
||||
title="default"
|
||||
>
|
||||
<span
|
||||
class="emotion-3"
|
||||
>
|
||||
default
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-24"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input-content"
|
||||
>
|
||||
<div
|
||||
class="slider-picker emotion-4"
|
||||
>
|
||||
<div
|
||||
style="height: 12px; position: relative;"
|
||||
>
|
||||
<div
|
||||
style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px;"
|
||||
>
|
||||
<div
|
||||
class="hue-horizontal"
|
||||
style="padding: 0px 2px; position: relative; height: 100%;"
|
||||
>
|
||||
<style>
|
||||
|
||||
.hue-horizontal {
|
||||
background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0
|
||||
33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
|
||||
background: -webkit-linear-gradient(to right, #f00 0%, #ff0
|
||||
17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
|
||||
}
|
||||
|
||||
.hue-vertical {
|
||||
background: linear-gradient(to top, #f00 0%, #ff0 17%, #0f0 33%,
|
||||
#0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
|
||||
background: -webkit-linear-gradient(to top, #f00 0%, #ff0 17%,
|
||||
#0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
|
||||
}
|
||||
|
||||
</style>
|
||||
<div
|
||||
style="position: absolute; left: 0%;"
|
||||
>
|
||||
<div
|
||||
style="width: 14px; height: 14px; border-radius: 6px; transform: translate(-7px, -1px); background-color: rgb(248, 248, 248); box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
style="margin-top: 20px;"
|
||||
>
|
||||
<div
|
||||
style="box-sizing: border-box; width: 20%; padding-right: 1px; float: left;"
|
||||
>
|
||||
<div
|
||||
style="height: 12px; background: rgb(230, 179, 179); cursor: pointer; border-radius: 2px 0 0 2px;"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style="box-sizing: border-box; width: 20%; padding-right: 1px; float: left;"
|
||||
>
|
||||
<div
|
||||
style="height: 12px; background: rgb(210, 121, 121); cursor: pointer;"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style="box-sizing: border-box; width: 20%; padding-right: 1px; float: left;"
|
||||
>
|
||||
<div
|
||||
style="height: 12px; background: rgb(191, 64, 64); cursor: pointer;"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style="box-sizing: border-box; width: 20%; padding-right: 1px; float: left;"
|
||||
>
|
||||
<div
|
||||
style="height: 12px; background: rgb(134, 45, 45); cursor: pointer;"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style="box-sizing: border-box; width: 20%; padding-right: 1px; float: left;"
|
||||
>
|
||||
<div
|
||||
style="height: 12px; background: rgb(77, 25, 25); cursor: pointer; border-radius: 0 2px 2px 0;"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style="clear: both;"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Render defaultColor - value[0] 1`] = `
|
||||
.emotion-0 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.emotion-1 {
|
||||
white-space: normal;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.emotion-2 {
|
||||
height: -webkit-fit-content!important;
|
||||
height: -moz-fit-content!important;
|
||||
height: fit-content!important;
|
||||
min-height: 32px;
|
||||
}
|
||||
|
||||
.emotion-4 {
|
||||
margin-bottom: 0px!important;
|
||||
}
|
||||
|
||||
<div
|
||||
class="ant-row ant-form-item emotion-0"
|
||||
id="defaultColor"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-form-item-label ant-form-item-label-left emotion-1 ant-col-xs-24 ant-col-sm-24"
|
||||
>
|
||||
<label
|
||||
class="emotion-2"
|
||||
for="defaultColor_input"
|
||||
title="defaultColor"
|
||||
>
|
||||
<span
|
||||
class="emotion-3"
|
||||
>
|
||||
defaultColor
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-24"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input-content"
|
||||
>
|
||||
<div
|
||||
class="slider-picker emotion-4"
|
||||
>
|
||||
<div
|
||||
style="height: 12px; position: relative;"
|
||||
>
|
||||
<div
|
||||
style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px;"
|
||||
>
|
||||
<div
|
||||
class="hue-horizontal"
|
||||
style="padding: 0px 2px; position: relative; height: 100%;"
|
||||
>
|
||||
<style>
|
||||
|
||||
.hue-horizontal {
|
||||
background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0
|
||||
33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
|
||||
background: -webkit-linear-gradient(to right, #f00 0%, #ff0
|
||||
17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
|
||||
}
|
||||
|
||||
.hue-vertical {
|
||||
background: linear-gradient(to top, #f00 0%, #ff0 17%, #0f0 33%,
|
||||
#0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
|
||||
background: -webkit-linear-gradient(to top, #f00 0%, #ff0 17%,
|
||||
#0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
|
||||
}
|
||||
|
||||
</style>
|
||||
<div
|
||||
style="position: absolute; left: 32.22222222222223%;"
|
||||
>
|
||||
<div
|
||||
style="width: 14px; height: 14px; border-radius: 6px; transform: translate(-7px, -1px); background-color: rgb(248, 248, 248); box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
style="margin-top: 20px;"
|
||||
>
|
||||
<div
|
||||
style="box-sizing: border-box; width: 20%; padding-right: 1px; float: left;"
|
||||
>
|
||||
<div
|
||||
style="height: 12px; background: rgb(179, 179, 179); cursor: pointer; border-radius: 2px 0 0 2px;"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style="box-sizing: border-box; width: 20%; padding-right: 1px; float: left;"
|
||||
>
|
||||
<div
|
||||
style="height: 12px; background: rgb(121, 121, 121); cursor: pointer;"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style="box-sizing: border-box; width: 20%; padding-right: 1px; float: left;"
|
||||
>
|
||||
<div
|
||||
style="height: 12px; background: rgb(64, 64, 64); cursor: pointer;"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style="box-sizing: border-box; width: 20%; padding-right: 1px; float: left;"
|
||||
>
|
||||
<div
|
||||
style="height: 12px; background: rgb(45, 45, 45); cursor: pointer;"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style="box-sizing: border-box; width: 20%; padding-right: 1px; float: left;"
|
||||
>
|
||||
<div
|
||||
style="height: 12px; background: rgb(25, 25, 25); cursor: pointer; border-radius: 0 2px 2px 0;"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style="clear: both;"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Render inputStyle - value[0] 1`] = `
|
||||
.emotion-0 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.emotion-1 {
|
||||
white-space: normal;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.emotion-2 {
|
||||
height: -webkit-fit-content!important;
|
||||
height: -moz-fit-content!important;
|
||||
height: fit-content!important;
|
||||
min-height: 32px;
|
||||
}
|
||||
|
||||
.emotion-4 {
|
||||
margin-bottom: 0px!important;
|
||||
border: 3px solid blue;
|
||||
}
|
||||
|
||||
<div
|
||||
class="ant-row ant-form-item emotion-0"
|
||||
id="inputStyle"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-form-item-label ant-form-item-label-left emotion-1 ant-col-xs-24 ant-col-sm-24"
|
||||
>
|
||||
<label
|
||||
class="emotion-2"
|
||||
for="inputStyle_input"
|
||||
title="inputStyle"
|
||||
>
|
||||
<span
|
||||
class="emotion-3"
|
||||
>
|
||||
inputStyle
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-24"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input-content"
|
||||
>
|
||||
<div
|
||||
class="slider-picker emotion-4"
|
||||
>
|
||||
<div
|
||||
style="height: 12px; position: relative;"
|
||||
>
|
||||
<div
|
||||
style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px;"
|
||||
>
|
||||
<div
|
||||
class="hue-horizontal"
|
||||
style="padding: 0px 2px; position: relative; height: 100%;"
|
||||
>
|
||||
<style>
|
||||
|
||||
.hue-horizontal {
|
||||
background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0
|
||||
33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
|
||||
background: -webkit-linear-gradient(to right, #f00 0%, #ff0
|
||||
17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
|
||||
}
|
||||
|
||||
.hue-vertical {
|
||||
background: linear-gradient(to top, #f00 0%, #ff0 17%, #0f0 33%,
|
||||
#0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
|
||||
background: -webkit-linear-gradient(to top, #f00 0%, #ff0 17%,
|
||||
#0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
|
||||
}
|
||||
|
||||
</style>
|
||||
<div
|
||||
style="position: absolute; left: 0%;"
|
||||
>
|
||||
<div
|
||||
style="width: 14px; height: 14px; border-radius: 6px; transform: translate(-7px, -1px); background-color: rgb(248, 248, 248); box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
style="margin-top: 20px;"
|
||||
>
|
||||
<div
|
||||
style="box-sizing: border-box; width: 20%; padding-right: 1px; float: left;"
|
||||
>
|
||||
<div
|
||||
style="height: 12px; background: rgb(230, 179, 179); cursor: pointer; border-radius: 2px 0 0 2px;"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style="box-sizing: border-box; width: 20%; padding-right: 1px; float: left;"
|
||||
>
|
||||
<div
|
||||
style="height: 12px; background: rgb(210, 121, 121); cursor: pointer;"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style="box-sizing: border-box; width: 20%; padding-right: 1px; float: left;"
|
||||
>
|
||||
<div
|
||||
style="height: 12px; background: rgb(191, 64, 64); cursor: pointer;"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style="box-sizing: border-box; width: 20%; padding-right: 1px; float: left;"
|
||||
>
|
||||
<div
|
||||
style="height: 12px; background: rgb(134, 45, 45); cursor: pointer;"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style="box-sizing: border-box; width: 20%; padding-right: 1px; float: left;"
|
||||
>
|
||||
<div
|
||||
style="height: 12px; background: rgb(77, 25, 25); cursor: pointer; border-radius: 0 2px 2px 0;"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style="clear: both;"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Render label-disabled - value[0] 1`] = `
|
||||
.emotion-0 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.emotion-1 {
|
||||
margin-bottom: 0px!important;
|
||||
}
|
||||
|
||||
<div
|
||||
class="ant-row ant-form-item emotion-0"
|
||||
id="label-disabled"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-24"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input-content"
|
||||
>
|
||||
<div
|
||||
class="slider-picker emotion-1"
|
||||
>
|
||||
<div
|
||||
style="height: 12px; position: relative;"
|
||||
>
|
||||
<div
|
||||
style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px;"
|
||||
>
|
||||
<div
|
||||
class="hue-horizontal"
|
||||
style="padding: 0px 2px; position: relative; height: 100%;"
|
||||
>
|
||||
<style>
|
||||
|
||||
.hue-horizontal {
|
||||
background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0
|
||||
33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
|
||||
background: -webkit-linear-gradient(to right, #f00 0%, #ff0
|
||||
17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
|
||||
}
|
||||
|
||||
.hue-vertical {
|
||||
background: linear-gradient(to top, #f00 0%, #ff0 17%, #0f0 33%,
|
||||
#0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
|
||||
background: -webkit-linear-gradient(to top, #f00 0%, #ff0 17%,
|
||||
#0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
|
||||
}
|
||||
|
||||
</style>
|
||||
<div
|
||||
style="position: absolute; left: 0%;"
|
||||
>
|
||||
<div
|
||||
style="width: 14px; height: 14px; border-radius: 6px; transform: translate(-7px, -1px); background-color: rgb(248, 248, 248); box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
style="margin-top: 20px;"
|
||||
>
|
||||
<div
|
||||
style="box-sizing: border-box; width: 20%; padding-right: 1px; float: left;"
|
||||
>
|
||||
<div
|
||||
style="height: 12px; background: rgb(230, 179, 179); cursor: pointer; border-radius: 2px 0 0 2px;"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style="box-sizing: border-box; width: 20%; padding-right: 1px; float: left;"
|
||||
>
|
||||
<div
|
||||
style="height: 12px; background: rgb(210, 121, 121); cursor: pointer;"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style="box-sizing: border-box; width: 20%; padding-right: 1px; float: left;"
|
||||
>
|
||||
<div
|
||||
style="height: 12px; background: rgb(191, 64, 64); cursor: pointer;"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style="box-sizing: border-box; width: 20%; padding-right: 1px; float: left;"
|
||||
>
|
||||
<div
|
||||
style="height: 12px; background: rgb(134, 45, 45); cursor: pointer;"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style="box-sizing: border-box; width: 20%; padding-right: 1px; float: left;"
|
||||
>
|
||||
<div
|
||||
style="height: 12px; background: rgb(77, 25, 25); cursor: pointer; border-radius: 0 2px 2px 0;"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style="clear: both;"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Render title - value[0] 1`] = `
|
||||
.emotion-0 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.emotion-1 {
|
||||
white-space: normal;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.emotion-2 {
|
||||
height: -webkit-fit-content!important;
|
||||
height: -moz-fit-content!important;
|
||||
height: fit-content!important;
|
||||
min-height: 32px;
|
||||
}
|
||||
|
||||
.emotion-4 {
|
||||
margin-bottom: 0px!important;
|
||||
}
|
||||
|
||||
<div
|
||||
class="ant-row ant-form-item emotion-0"
|
||||
id="title"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-form-item-label ant-form-item-label-left emotion-1 ant-col-xs-24 ant-col-sm-24"
|
||||
>
|
||||
<label
|
||||
class="emotion-2"
|
||||
for="title_input"
|
||||
title="The color selector"
|
||||
>
|
||||
<span
|
||||
class="emotion-3"
|
||||
>
|
||||
The color selector
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-24"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input-content"
|
||||
>
|
||||
<div
|
||||
class="slider-picker emotion-4"
|
||||
>
|
||||
<div
|
||||
style="height: 12px; position: relative;"
|
||||
>
|
||||
<div
|
||||
style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px;"
|
||||
>
|
||||
<div
|
||||
class="hue-horizontal"
|
||||
style="padding: 0px 2px; position: relative; height: 100%;"
|
||||
>
|
||||
<style>
|
||||
|
||||
.hue-horizontal {
|
||||
background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0
|
||||
33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
|
||||
background: -webkit-linear-gradient(to right, #f00 0%, #ff0
|
||||
17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
|
||||
}
|
||||
|
||||
.hue-vertical {
|
||||
background: linear-gradient(to top, #f00 0%, #ff0 17%, #0f0 33%,
|
||||
#0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
|
||||
background: -webkit-linear-gradient(to top, #f00 0%, #ff0 17%,
|
||||
#0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
|
||||
}
|
||||
|
||||
</style>
|
||||
<div
|
||||
style="position: absolute; left: 0%;"
|
||||
>
|
||||
<div
|
||||
style="width: 14px; height: 14px; border-radius: 6px; transform: translate(-7px, -1px); background-color: rgb(248, 248, 248); box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
style="margin-top: 20px;"
|
||||
>
|
||||
<div
|
||||
style="box-sizing: border-box; width: 20%; padding-right: 1px; float: left;"
|
||||
>
|
||||
<div
|
||||
style="height: 12px; background: rgb(230, 179, 179); cursor: pointer; border-radius: 2px 0 0 2px;"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style="box-sizing: border-box; width: 20%; padding-right: 1px; float: left;"
|
||||
>
|
||||
<div
|
||||
style="height: 12px; background: rgb(210, 121, 121); cursor: pointer;"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style="box-sizing: border-box; width: 20%; padding-right: 1px; float: left;"
|
||||
>
|
||||
<div
|
||||
style="height: 12px; background: rgb(191, 64, 64); cursor: pointer;"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style="box-sizing: border-box; width: 20%; padding-right: 1px; float: left;"
|
||||
>
|
||||
<div
|
||||
style="height: 12px; background: rgb(134, 45, 45); cursor: pointer;"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style="box-sizing: border-box; width: 20%; padding-right: 1px; float: left;"
|
||||
>
|
||||
<div
|
||||
style="height: 12px; background: rgb(77, 25, 25); cursor: pointer; border-radius: 0 2px 2px 0;"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style="clear: both;"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Test Schema colors 1`] = `true`;
|
||||
|
||||
exports[`Test Schema colors 2`] = `null`;
|
||||
|
||||
exports[`Test Schema default 1`] = `true`;
|
||||
|
||||
exports[`Test Schema default 2`] = `null`;
|
||||
|
||||
exports[`Test Schema defaultColor 1`] = `true`;
|
||||
|
||||
exports[`Test Schema defaultColor 2`] = `null`;
|
||||
|
||||
exports[`Test Schema inputStyle 1`] = `true`;
|
||||
|
||||
exports[`Test Schema inputStyle 2`] = `null`;
|
||||
|
||||
exports[`Test Schema label-disabled 1`] = `true`;
|
||||
|
||||
exports[`Test Schema label-disabled 2`] = `null`;
|
||||
|
||||
exports[`Test Schema title 1`] = `true`;
|
||||
|
||||
exports[`Test Schema title 2`] = `null`;
|
||||
@ -17,7 +17,7 @@
|
||||
import React from 'react';
|
||||
import { SwatchesPicker } from 'react-color';
|
||||
import { blockDefaultProps } from '@lowdefy/block-utils';
|
||||
import Label from '@lowdefy/blocks-antd/blocks/Label/Label.js';
|
||||
import Label from '@lowdefy/blocks-antd/dist/blocks/Label/Label.js';
|
||||
|
||||
const Selector = ({ blockId, loading, methods, properties, required, validation, value }) => {
|
||||
return (
|
||||
|
||||
@ -15,26 +15,32 @@
|
||||
*/
|
||||
|
||||
import { runMockRenderTests } from '@lowdefy/block-dev';
|
||||
import { SwatchesPicker } from 'react-color';
|
||||
|
||||
import Block from './SwatchesColorSelector.js';
|
||||
import examples from './examples.yaml';
|
||||
import block from './index.js';
|
||||
import examples from './examples.yaml';
|
||||
import schema from './schema.json';
|
||||
|
||||
const { meta } = block;
|
||||
const { meta, tests } = block;
|
||||
|
||||
jest.mock('react-color', () => {
|
||||
const selectors = {
|
||||
SwatchesPicker: jest.fn((props) => props.toString()),
|
||||
SwatchesPicker: jest.fn(() => 'mocked'),
|
||||
};
|
||||
return selectors;
|
||||
});
|
||||
|
||||
const mocks = [
|
||||
{
|
||||
name: 'default',
|
||||
fn: SwatchesPicker,
|
||||
getMockFns: async () => {
|
||||
const antd = await import('react-color');
|
||||
return [antd.SwatchesPicker];
|
||||
},
|
||||
getBlock: async () => {
|
||||
const Block = await import('./SwatchesColorSelector.js');
|
||||
return Block.default;
|
||||
},
|
||||
name: 'SwatchesColorSelector',
|
||||
},
|
||||
];
|
||||
|
||||
runMockRenderTests({ examples, Block, meta, mocks });
|
||||
runMockRenderTests({ examples, meta, mocks, schema, tests });
|
||||
|
||||
@ -21,7 +21,7 @@ import examples from './examples.yaml';
|
||||
import block from './index.js';
|
||||
import schema from './schema.json';
|
||||
|
||||
const { meta } = block;
|
||||
const { meta, tests } = block;
|
||||
|
||||
runRenderTests({ examples, Block, meta, schema });
|
||||
runRenderTests({ examples, Block, meta, schema, tests });
|
||||
runBlockSchemaTests({ examples, meta, schema });
|
||||
|
||||
@ -0,0 +1,146 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Mock render - colors - value[0] - SwatchesColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"className": "{\\"style\\":[{\\"marginBottom\\":\\"0px !important\\"},null]}",
|
||||
"color": "#000000",
|
||||
"colors": Array [
|
||||
Array [
|
||||
"#123456",
|
||||
"#abc345",
|
||||
],
|
||||
Array [
|
||||
"#ff3456",
|
||||
"#aff345",
|
||||
],
|
||||
],
|
||||
"height": "135px",
|
||||
"id": "colors_input",
|
||||
"onChangeComplete": [Function],
|
||||
"width": "100%",
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - default - value[0] - SwatchesColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"className": "{\\"style\\":[{\\"marginBottom\\":\\"0px !important\\"},null]}",
|
||||
"color": "#000000",
|
||||
"colors": undefined,
|
||||
"height": "135px",
|
||||
"id": "default_input",
|
||||
"onChangeComplete": [Function],
|
||||
"width": "100%",
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - defaultColor - value[0] - SwatchesColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"className": "{\\"style\\":[{\\"marginBottom\\":\\"0px !important\\"},null]}",
|
||||
"color": "#11FF00",
|
||||
"colors": undefined,
|
||||
"height": "135px",
|
||||
"id": "defaultColor_input",
|
||||
"onChangeComplete": [Function],
|
||||
"width": "100%",
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - height - value[0] - SwatchesColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"className": "{\\"style\\":[{\\"marginBottom\\":\\"0px !important\\"},null]}",
|
||||
"color": "#000000",
|
||||
"colors": undefined,
|
||||
"height": 100,
|
||||
"id": "height_input",
|
||||
"onChangeComplete": [Function],
|
||||
"width": "100%",
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - inputStyle - value[0] - SwatchesColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"className": "{\\"style\\":[{\\"marginBottom\\":\\"0px !important\\"},{\\"border\\":\\"3px solid blue\\"}]}",
|
||||
"color": "#000000",
|
||||
"colors": undefined,
|
||||
"height": "135px",
|
||||
"id": "inputStyle_input",
|
||||
"onChangeComplete": [Function],
|
||||
"width": "100%",
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - label-disabled - value[0] - SwatchesColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"className": "{\\"style\\":[{\\"marginBottom\\":\\"0px !important\\"},null]}",
|
||||
"color": "#000000",
|
||||
"colors": undefined,
|
||||
"height": "135px",
|
||||
"id": "label-disabled_input",
|
||||
"onChangeComplete": [Function],
|
||||
"width": "100%",
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - title - value[0] - SwatchesColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"className": "{\\"style\\":[{\\"marginBottom\\":\\"0px !important\\"},null]}",
|
||||
"color": "#000000",
|
||||
"colors": undefined,
|
||||
"height": "135px",
|
||||
"id": "title_input",
|
||||
"onChangeComplete": [Function],
|
||||
"width": "100%",
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - width - value[0] - SwatchesColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"className": "{\\"style\\":[{\\"marginBottom\\":\\"0px !important\\"},null]}",
|
||||
"color": "#000000",
|
||||
"colors": undefined,
|
||||
"height": "135px",
|
||||
"id": "width_input",
|
||||
"onChangeComplete": [Function],
|
||||
"width": 100,
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
File diff suppressed because it is too large
Load Diff
@ -17,7 +17,7 @@
|
||||
import React from 'react';
|
||||
import { TwitterPicker } from 'react-color';
|
||||
import { blockDefaultProps } from '@lowdefy/block-utils';
|
||||
import Label from '@lowdefy/blocks-antd/blocks/Label/Label.js';
|
||||
import Label from '@lowdefy/blocks-antd/dist/blocks/Label/Label.js';
|
||||
|
||||
const Selector = ({ blockId, loading, methods, properties, required, validation, value }) => {
|
||||
return (
|
||||
|
||||
@ -15,26 +15,32 @@
|
||||
*/
|
||||
|
||||
import { runMockRenderTests } from '@lowdefy/block-dev';
|
||||
import { TwitterPicker } from 'react-color';
|
||||
|
||||
import Block from './TwitterColorSelector.js';
|
||||
import examples from './examples.yaml';
|
||||
import block from './index.js';
|
||||
import examples from './examples.yaml';
|
||||
import schema from './schema.json';
|
||||
|
||||
const { meta } = block;
|
||||
const { meta, tests } = block;
|
||||
|
||||
jest.mock('react-color', () => {
|
||||
const selectors = {
|
||||
TwitterPicker: jest.fn((props) => props.toString()),
|
||||
TwitterPicker: jest.fn(() => 'mocked'),
|
||||
};
|
||||
return selectors;
|
||||
});
|
||||
|
||||
const mocks = [
|
||||
{
|
||||
name: 'default',
|
||||
fn: TwitterPicker,
|
||||
getMockFns: async () => {
|
||||
const antd = await import('react-color');
|
||||
return [antd.TwitterPicker];
|
||||
},
|
||||
getBlock: async () => {
|
||||
const Block = await import('./TwitterColorSelector.js');
|
||||
return Block.default;
|
||||
},
|
||||
name: 'TwitterColorSelector',
|
||||
},
|
||||
];
|
||||
|
||||
runMockRenderTests({ examples, Block, meta, mocks });
|
||||
runMockRenderTests({ examples, meta, mocks, schema, tests });
|
||||
|
||||
@ -21,7 +21,7 @@ import examples from './examples.yaml';
|
||||
import block from './index.js';
|
||||
import schema from './schema.json';
|
||||
|
||||
const { meta } = block;
|
||||
const { meta, tests } = block;
|
||||
|
||||
runRenderTests({ examples, Block, meta, schema });
|
||||
runRenderTests({ examples, Block, meta, schema, tests });
|
||||
runBlockSchemaTests({ examples, meta, schema });
|
||||
|
||||
@ -0,0 +1,132 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Mock render - colors - value[0] - TwitterColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"color": "#000000",
|
||||
"colors": Array [
|
||||
"#123456",
|
||||
"#abc345",
|
||||
],
|
||||
"id": "colors_input",
|
||||
"onChangeComplete": [Function],
|
||||
"triangle": "hide",
|
||||
"width": "100%",
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - default - value[0] - TwitterColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"color": "#000000",
|
||||
"colors": undefined,
|
||||
"id": "default_input",
|
||||
"onChangeComplete": [Function],
|
||||
"triangle": "hide",
|
||||
"width": "100%",
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - defaultColor - value[0] - TwitterColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"color": "#FF0000",
|
||||
"colors": undefined,
|
||||
"id": "defaultColor_input",
|
||||
"onChangeComplete": [Function],
|
||||
"triangle": "hide",
|
||||
"width": "100%",
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - label-disabled - value[0] - TwitterColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"color": "#000000",
|
||||
"colors": undefined,
|
||||
"id": "label-disabled_input",
|
||||
"onChangeComplete": [Function],
|
||||
"triangle": "hide",
|
||||
"width": "100%",
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - title - value[0] - TwitterColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"color": "#000000",
|
||||
"colors": undefined,
|
||||
"id": "title_input",
|
||||
"onChangeComplete": [Function],
|
||||
"triangle": "hide",
|
||||
"width": "100%",
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - triangle-top-left - value[0] - TwitterColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"color": "#000000",
|
||||
"colors": undefined,
|
||||
"id": "triangle-top-left_input",
|
||||
"onChangeComplete": [Function],
|
||||
"triangle": "top-left",
|
||||
"width": "100%",
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - triangle-top-right - value[0] - TwitterColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"color": "#000000",
|
||||
"colors": undefined,
|
||||
"id": "triangle-top-right_input",
|
||||
"onChangeComplete": [Function],
|
||||
"triangle": "top-right",
|
||||
"width": "100%",
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - width - value[0] - TwitterColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"color": "#000000",
|
||||
"colors": undefined,
|
||||
"id": "width_input",
|
||||
"onChangeComplete": [Function],
|
||||
"triangle": "hide",
|
||||
"width": 200,
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
File diff suppressed because it is too large
Load Diff
@ -15,11 +15,12 @@
|
||||
*/
|
||||
|
||||
import { runMockRenderTests } from '@lowdefy/block-dev';
|
||||
import ReactECharts from 'echarts-for-react';
|
||||
|
||||
import EChart from './EChart';
|
||||
import examples from './examples.yaml';
|
||||
import block from './index.js';
|
||||
import examples from './examples.yaml';
|
||||
import schema from './schema.json';
|
||||
|
||||
const { meta, tests } = block;
|
||||
|
||||
jest.mock('echarts-for-react', () => {
|
||||
return jest.fn(() => 'mocked');
|
||||
@ -27,9 +28,16 @@ jest.mock('echarts-for-react', () => {
|
||||
|
||||
const mocks = [
|
||||
{
|
||||
name: 'default',
|
||||
fn: ReactECharts,
|
||||
getMockFns: async () => {
|
||||
const ReactECharts = await import('echarts-for-react');
|
||||
return [ReactECharts];
|
||||
},
|
||||
getBlock: async () => {
|
||||
const Block = await import('./EChart.js');
|
||||
return Block.default;
|
||||
},
|
||||
name: 'EChart',
|
||||
},
|
||||
];
|
||||
|
||||
runMockRenderTests({ examples, Block: EChart, meta, mocks });
|
||||
runMockRenderTests({ examples, meta, mocks, schema, tests });
|
||||
|
||||
@ -14,13 +14,17 @@
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
// import { runBlockSchemaTests, runRenderTests } from '@lowdefy/block-dev';
|
||||
// FIX: Error: Cannot find module 'tslib'
|
||||
import { runBlockSchemaTests } from '@lowdefy/block-dev';
|
||||
// import { runBlockSchemaTests, runRenderTests } from '@lowdefy/block-dev';
|
||||
|
||||
// import EChart from './EChart';
|
||||
import examples from './examples.yaml';
|
||||
import block from './index.js';
|
||||
// import Block from './EChart.js';
|
||||
import examples from './examples.yaml';
|
||||
import schema from './schema.json';
|
||||
|
||||
// runRenderTests({ examples, Block: EChart, meta });
|
||||
// const { meta, tests } = block;
|
||||
const { meta } = block;
|
||||
|
||||
// runRenderTests({ Block, examples, meta, schema, tests });
|
||||
runBlockSchemaTests({ examples, meta, schema });
|
||||
|
||||
@ -0,0 +1,311 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Mock render - area with custom theme - value[0] - EChart 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"lazyUpdate": true,
|
||||
"notMerge": true,
|
||||
"onEvents": Object {},
|
||||
"option": Object {
|
||||
"grid": Object {
|
||||
"bottom": "3%",
|
||||
"containLabel": true,
|
||||
"left": "3%",
|
||||
"right": "4%",
|
||||
},
|
||||
"legend": Object {
|
||||
"data": Array [
|
||||
"邮件营销",
|
||||
"联盟广告",
|
||||
"视频广告",
|
||||
"直接访问",
|
||||
"搜索引擎",
|
||||
],
|
||||
},
|
||||
"series": Array [
|
||||
Object {
|
||||
"areaStyle": Object {},
|
||||
"data": Array [
|
||||
120,
|
||||
132,
|
||||
101,
|
||||
134,
|
||||
90,
|
||||
230,
|
||||
210,
|
||||
],
|
||||
"emphasis": Object {
|
||||
"focus": "series",
|
||||
},
|
||||
"name": "邮件营销",
|
||||
"stack": "总量",
|
||||
"type": "line",
|
||||
},
|
||||
Object {
|
||||
"areaStyle": Object {},
|
||||
"data": Array [
|
||||
220,
|
||||
182,
|
||||
191,
|
||||
234,
|
||||
290,
|
||||
330,
|
||||
310,
|
||||
],
|
||||
"emphasis": Object {
|
||||
"focus": "series",
|
||||
},
|
||||
"name": "联盟广告",
|
||||
"stack": "总量",
|
||||
"type": "line",
|
||||
},
|
||||
Object {
|
||||
"areaStyle": Object {},
|
||||
"data": Array [
|
||||
150,
|
||||
232,
|
||||
201,
|
||||
154,
|
||||
190,
|
||||
330,
|
||||
410,
|
||||
],
|
||||
"emphasis": Object {
|
||||
"focus": "series",
|
||||
},
|
||||
"name": "视频广告",
|
||||
"stack": "总量",
|
||||
"type": "line",
|
||||
},
|
||||
Object {
|
||||
"areaStyle": Object {},
|
||||
"data": Array [
|
||||
320,
|
||||
332,
|
||||
301,
|
||||
334,
|
||||
390,
|
||||
330,
|
||||
320,
|
||||
],
|
||||
"emphasis": Object {
|
||||
"focus": "series",
|
||||
},
|
||||
"name": "直接访问",
|
||||
"stack": "总量",
|
||||
"type": "line",
|
||||
},
|
||||
Object {
|
||||
"areaStyle": Object {},
|
||||
"data": Array [
|
||||
820,
|
||||
932,
|
||||
901,
|
||||
934,
|
||||
1290,
|
||||
1330,
|
||||
1320,
|
||||
],
|
||||
"emphasis": Object {
|
||||
"focus": "series",
|
||||
},
|
||||
"label": Object {
|
||||
"position": "top",
|
||||
"show": true,
|
||||
},
|
||||
"name": "搜索引擎",
|
||||
"stack": "总量",
|
||||
"type": "line",
|
||||
},
|
||||
],
|
||||
"title": Object {
|
||||
"text": "堆叠区域图",
|
||||
},
|
||||
"toolbox": Object {
|
||||
"feature": Object {
|
||||
"saveAsImage": Object {},
|
||||
},
|
||||
},
|
||||
"tooltip": Object {
|
||||
"axisPointer": Object {
|
||||
"label": Object {
|
||||
"backgroundColor": "#6a7985",
|
||||
},
|
||||
"type": "cross",
|
||||
},
|
||||
"trigger": "axis",
|
||||
},
|
||||
"xAxis": Array [
|
||||
Object {
|
||||
"boundaryGap": false,
|
||||
"data": Array [
|
||||
"周一",
|
||||
"周二",
|
||||
"周三",
|
||||
"周四",
|
||||
"周五",
|
||||
"周六",
|
||||
"周日",
|
||||
],
|
||||
"type": "category",
|
||||
},
|
||||
],
|
||||
"yAxis": Array [
|
||||
Object {
|
||||
"type": "value",
|
||||
},
|
||||
],
|
||||
},
|
||||
"opts": Object {
|
||||
"height": 600,
|
||||
},
|
||||
"style": Object {},
|
||||
"theme": "custom_theme_area with custom theme",
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - line - value[0] - EChart 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"lazyUpdate": true,
|
||||
"notMerge": true,
|
||||
"onEvents": Object {},
|
||||
"option": Object {
|
||||
"series": Array [
|
||||
Object {
|
||||
"data": Array [
|
||||
150,
|
||||
230,
|
||||
224,
|
||||
218,
|
||||
135,
|
||||
147,
|
||||
260,
|
||||
],
|
||||
"type": "line",
|
||||
},
|
||||
],
|
||||
"xAxis": Object {
|
||||
"data": Array [
|
||||
"Mon",
|
||||
"Tue",
|
||||
"Wed",
|
||||
"Thu",
|
||||
"Fri",
|
||||
"Sat",
|
||||
"Sun",
|
||||
],
|
||||
"type": "category",
|
||||
},
|
||||
"yAxis": Object {
|
||||
"type": "value",
|
||||
},
|
||||
},
|
||||
"opts": Object {
|
||||
"height": 300,
|
||||
},
|
||||
"style": Object {},
|
||||
"theme": undefined,
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - pie - value[0] - EChart 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"lazyUpdate": true,
|
||||
"notMerge": true,
|
||||
"onEvents": Object {},
|
||||
"option": Object {
|
||||
"legend": Object {
|
||||
"top": "bottom",
|
||||
},
|
||||
"series": Array [
|
||||
Object {
|
||||
"center": Array [
|
||||
"50%",
|
||||
"50%",
|
||||
],
|
||||
"data": Array [
|
||||
Object {
|
||||
"name": "rose 1",
|
||||
"value": 40,
|
||||
},
|
||||
Object {
|
||||
"name": "rose 2",
|
||||
"value": 38,
|
||||
},
|
||||
Object {
|
||||
"name": "rose 3",
|
||||
"value": 32,
|
||||
},
|
||||
Object {
|
||||
"name": "rose 4",
|
||||
"value": 30,
|
||||
},
|
||||
Object {
|
||||
"name": "rose 5",
|
||||
"value": 28,
|
||||
},
|
||||
Object {
|
||||
"name": "rose 6",
|
||||
"value": 26,
|
||||
},
|
||||
Object {
|
||||
"name": "rose 7",
|
||||
"value": 22,
|
||||
},
|
||||
Object {
|
||||
"name": "rose 8",
|
||||
"value": 18,
|
||||
},
|
||||
],
|
||||
"itemStyle": Object {
|
||||
"borderRadius": 8,
|
||||
},
|
||||
"name": "Data Pie",
|
||||
"radius": Array [
|
||||
50,
|
||||
250,
|
||||
],
|
||||
"roseType": "area",
|
||||
"type": "pie",
|
||||
},
|
||||
],
|
||||
"toolbox": Object {
|
||||
"feature": Object {
|
||||
"dataView": Object {
|
||||
"readOnly": false,
|
||||
"show": true,
|
||||
},
|
||||
"mark": Object {
|
||||
"show": true,
|
||||
},
|
||||
"restore": Object {
|
||||
"show": true,
|
||||
},
|
||||
"saveAsImage": Object {
|
||||
"show": true,
|
||||
},
|
||||
},
|
||||
"show": true,
|
||||
},
|
||||
},
|
||||
"opts": Object {
|
||||
"height": "600",
|
||||
},
|
||||
"style": Object {},
|
||||
"theme": undefined,
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
@ -0,0 +1,13 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Test Schema area with custom theme 1`] = `true`;
|
||||
|
||||
exports[`Test Schema area with custom theme 2`] = `null`;
|
||||
|
||||
exports[`Test Schema line 1`] = `true`;
|
||||
|
||||
exports[`Test Schema line 2`] = `null`;
|
||||
|
||||
exports[`Test Schema pie 1`] = `true`;
|
||||
|
||||
exports[`Test Schema pie 2`] = `null`;
|
||||
@ -34,12 +34,15 @@ const IconSpinner = ({ properties, methods }) => {
|
||||
}
|
||||
return (
|
||||
<span
|
||||
className={methods.makeCssClass({
|
||||
height: size,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
})}
|
||||
className={methods.makeCssClass([
|
||||
{
|
||||
height: size,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
properties.style,
|
||||
])}
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 1024 1024"
|
||||
|
||||
@ -13,9 +13,14 @@
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
import { runRenderTests } from '@lowdefy/block-dev';
|
||||
|
||||
import { runBlockSchemaTests, runRenderTests } from '@lowdefy/block-dev';
|
||||
|
||||
import Block from './IconSpinner.js';
|
||||
import examples from './examples.yaml';
|
||||
import IconSpinner from './IconSpinner';
|
||||
import block from './index.js';
|
||||
import schema from './schema.json';
|
||||
|
||||
runRenderTests({ examples, Block: IconSpinner, meta: {} });
|
||||
const { meta, tests } = block;
|
||||
runRenderTests({ examples, Block, meta, schema, tests });
|
||||
runBlockSchemaTests({ examples, meta, schema });
|
||||
|
||||
@ -0,0 +1,169 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Render default - value[0] 1`] = `
|
||||
.emotion-0 {
|
||||
height: 20px;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
<span
|
||||
class="emotion-0"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="icon-spinner"
|
||||
data-icon="loading-3-quarters"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="20"
|
||||
viewBox="0 0 1024 1024"
|
||||
width="20"
|
||||
>
|
||||
<path
|
||||
d="M512 1024c-69.1 0-136.2-13.5-199.3-40.2C251.7 958 197 921 150 874c-47-47-84-101.7-109.8-162.7C13.5 648.2 0 581.1 0 512c0-19.9 16.1-36 36-36s36 16.1 36 36c0 59.4 11.6 117 34.6 171.3 22.2 52.4 53.9 99.5 94.3 139.9 40.4 40.4 87.5 72.2 139.9 94.3C395 940.4 452.6 952 512 952c59.4 0 117-11.6 171.3-34.6 52.4-22.2 99.5-53.9 139.9-94.3 40.4-40.4 72.2-87.5 94.3-139.9C940.4 629 952 571.4 952 512c0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.2C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3s-13.5 136.2-40.2 199.3C958 772.3 921 827 874 874c-47 47-101.8 83.9-162.7 109.7-63.1 26.8-130.2 40.3-199.3 40.3z"
|
||||
fill="#bfbfbf"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
`;
|
||||
|
||||
exports[`Render sizedefault - value[0] 1`] = `
|
||||
.emotion-0 {
|
||||
height: 24px;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
<span
|
||||
class="emotion-0"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="icon-spinner"
|
||||
data-icon="loading-3-quarters"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="24"
|
||||
viewBox="0 0 1024 1024"
|
||||
width="24"
|
||||
>
|
||||
<path
|
||||
d="M512 1024c-69.1 0-136.2-13.5-199.3-40.2C251.7 958 197 921 150 874c-47-47-84-101.7-109.8-162.7C13.5 648.2 0 581.1 0 512c0-19.9 16.1-36 36-36s36 16.1 36 36c0 59.4 11.6 117 34.6 171.3 22.2 52.4 53.9 99.5 94.3 139.9 40.4 40.4 87.5 72.2 139.9 94.3C395 940.4 452.6 952 512 952c59.4 0 117-11.6 171.3-34.6 52.4-22.2 99.5-53.9 139.9-94.3 40.4-40.4 72.2-87.5 94.3-139.9C940.4 629 952 571.4 952 512c0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.2C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3s-13.5 136.2-40.2 199.3C958 772.3 921 827 874 874c-47 47-101.8 83.9-162.7 109.7-63.1 26.8-130.2 40.3-199.3 40.3z"
|
||||
fill="#bfbfbf"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
`;
|
||||
|
||||
exports[`Render sizelarge - value[0] 1`] = `
|
||||
.emotion-0 {
|
||||
height: 32px;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
<span
|
||||
class="emotion-0"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="icon-spinner"
|
||||
data-icon="loading-3-quarters"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="32"
|
||||
viewBox="0 0 1024 1024"
|
||||
width="32"
|
||||
>
|
||||
<path
|
||||
d="M512 1024c-69.1 0-136.2-13.5-199.3-40.2C251.7 958 197 921 150 874c-47-47-84-101.7-109.8-162.7C13.5 648.2 0 581.1 0 512c0-19.9 16.1-36 36-36s36 16.1 36 36c0 59.4 11.6 117 34.6 171.3 22.2 52.4 53.9 99.5 94.3 139.9 40.4 40.4 87.5 72.2 139.9 94.3C395 940.4 452.6 952 512 952c59.4 0 117-11.6 171.3-34.6 52.4-22.2 99.5-53.9 139.9-94.3 40.4-40.4 72.2-87.5 94.3-139.9C940.4 629 952 571.4 952 512c0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.2C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3s-13.5 136.2-40.2 199.3C958 772.3 921 827 874 874c-47 47-101.8 83.9-162.7 109.7-63.1 26.8-130.2 40.3-199.3 40.3z"
|
||||
fill="#bfbfbf"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
`;
|
||||
|
||||
exports[`Render sizesmall - value[0] 1`] = `
|
||||
.emotion-0 {
|
||||
height: 20px;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
<span
|
||||
class="emotion-0"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="icon-spinner"
|
||||
data-icon="loading-3-quarters"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="20"
|
||||
viewBox="0 0 1024 1024"
|
||||
width="20"
|
||||
>
|
||||
<path
|
||||
d="M512 1024c-69.1 0-136.2-13.5-199.3-40.2C251.7 958 197 921 150 874c-47-47-84-101.7-109.8-162.7C13.5 648.2 0 581.1 0 512c0-19.9 16.1-36 36-36s36 16.1 36 36c0 59.4 11.6 117 34.6 171.3 22.2 52.4 53.9 99.5 94.3 139.9 40.4 40.4 87.5 72.2 139.9 94.3C395 940.4 452.6 952 512 952c59.4 0 117-11.6 171.3-34.6 52.4-22.2 99.5-53.9 139.9-94.3 40.4-40.4 72.2-87.5 94.3-139.9C940.4 629 952 571.4 952 512c0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.2C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3s-13.5 136.2-40.2 199.3C958 772.3 921 827 874 874c-47 47-101.8 83.9-162.7 109.7-63.1 26.8-130.2 40.3-199.3 40.3z"
|
||||
fill="#bfbfbf"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
`;
|
||||
|
||||
exports[`Test Schema default 1`] = `true`;
|
||||
|
||||
exports[`Test Schema default 2`] = `null`;
|
||||
|
||||
exports[`Test Schema sizedefault 1`] = `true`;
|
||||
|
||||
exports[`Test Schema sizedefault 2`] = `null`;
|
||||
|
||||
exports[`Test Schema sizelarge 1`] = `true`;
|
||||
|
||||
exports[`Test Schema sizelarge 2`] = `null`;
|
||||
|
||||
exports[`Test Schema sizesmall 1`] = `true`;
|
||||
|
||||
exports[`Test Schema sizesmall 2`] = `null`;
|
||||
@ -14,22 +14,15 @@
|
||||
|
||||
- id: default
|
||||
type: IconSpinner
|
||||
description: Default
|
||||
- id: sizedefault
|
||||
type: IconSpinner
|
||||
description: |
|
||||
Size: default
|
||||
properties:
|
||||
size: default
|
||||
- id: sizesmall
|
||||
type: IconSpinner
|
||||
description: |
|
||||
Size: small
|
||||
properties:
|
||||
size: small
|
||||
- id: sizelarge
|
||||
type: IconSpinner
|
||||
description: |
|
||||
Size: large
|
||||
properties:
|
||||
size: large
|
||||
|
||||
@ -0,0 +1,26 @@
|
||||
{
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"type": "object",
|
||||
"additionalProperties": false,
|
||||
"properties": {
|
||||
"style": {
|
||||
"type": "object",
|
||||
"description": "Css style object to apply to the icon.",
|
||||
"docs": {
|
||||
"displayType": "yaml"
|
||||
}
|
||||
},
|
||||
"size": {
|
||||
"type": "string",
|
||||
"description": "Size of the icon spinner.",
|
||||
"enum": ["small", "medium", "large"]
|
||||
}
|
||||
}
|
||||
},
|
||||
"events": {
|
||||
"type": "object",
|
||||
"additionalProperties": false,
|
||||
"properties": {}
|
||||
}
|
||||
}
|
||||
@ -15,7 +15,7 @@
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import LogoSpinner from './LogoSpinner';
|
||||
import LogoSpinner from './LogoSpinner.js';
|
||||
import { render } from '@testing-library/react';
|
||||
|
||||
test('default', () => {
|
||||
|
||||
@ -15,4 +15,3 @@
|
||||
- id: default
|
||||
type: LogoSpinner
|
||||
description: Default
|
||||
# TODO
|
||||
|
||||
@ -1,26 +0,0 @@
|
||||
/*
|
||||
Copyright 2020-2021 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.
|
||||
*/
|
||||
|
||||
export default {
|
||||
import: {
|
||||
block: 'blocks/LogoSpinner/LogoSpinner.js',
|
||||
styles: ['blocks/LogoSpinner/style.less'],
|
||||
},
|
||||
meta: {
|
||||
category: 'display',
|
||||
loading: false,
|
||||
},
|
||||
};
|
||||
@ -14,9 +14,13 @@
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
import { runRenderTests } from '@lowdefy/block-dev';
|
||||
import { runBlockSchemaTests, runRenderTests } from '@lowdefy/block-dev';
|
||||
|
||||
import Block from './Skeleton.js';
|
||||
import examples from './examples.yaml';
|
||||
import Skeleton from './Skeleton';
|
||||
import block from './index.js';
|
||||
import schema from './schema.json';
|
||||
|
||||
runRenderTests({ examples, Block: Skeleton, meta: {} });
|
||||
const { meta, tests } = block;
|
||||
runRenderTests({ examples, Block, meta, schema, tests });
|
||||
runBlockSchemaTests({ examples, meta, schema });
|
||||
|
||||
@ -0,0 +1,34 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Render default - value[0] 1`] = `
|
||||
<div
|
||||
class="skeleton emotion-0"
|
||||
style="width: 100%; height: 100%;"
|
||||
/>
|
||||
`;
|
||||
|
||||
exports[`Render sizedefault - value[0] 1`] = `
|
||||
<div
|
||||
class="skeleton emotion-0"
|
||||
style="width: 100%; height: 100%;"
|
||||
/>
|
||||
`;
|
||||
|
||||
exports[`Render sizesmall - value[0] 1`] = `
|
||||
<div
|
||||
class="skeleton emotion-0"
|
||||
style="width: 100%; height: 100%;"
|
||||
/>
|
||||
`;
|
||||
|
||||
exports[`Test Schema default 1`] = `true`;
|
||||
|
||||
exports[`Test Schema default 2`] = `null`;
|
||||
|
||||
exports[`Test Schema sizedefault 1`] = `true`;
|
||||
|
||||
exports[`Test Schema sizedefault 2`] = `null`;
|
||||
|
||||
exports[`Test Schema sizesmall 1`] = `true`;
|
||||
|
||||
exports[`Test Schema sizesmall 2`] = `null`;
|
||||
@ -0,0 +1,29 @@
|
||||
{
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"type": "object",
|
||||
"additionalProperties": false,
|
||||
"properties": {
|
||||
"style": {
|
||||
"type": "object",
|
||||
"description": "Css style object to apply to the skeleton.",
|
||||
"docs": {
|
||||
"displayType": "yaml"
|
||||
}
|
||||
},
|
||||
"height": {
|
||||
"type": ["number", "string"],
|
||||
"description": "Height of the skeleton."
|
||||
},
|
||||
"width": {
|
||||
"type": ["number", "string"],
|
||||
"description": "Width of the skeleton."
|
||||
}
|
||||
}
|
||||
},
|
||||
"events": {
|
||||
"type": "object",
|
||||
"additionalProperties": false,
|
||||
"properties": {}
|
||||
}
|
||||
}
|
||||
@ -18,7 +18,7 @@ import React from 'react';
|
||||
import { type } from '@lowdefy/helpers';
|
||||
import { blockDefaultProps } from '@lowdefy/block-utils';
|
||||
|
||||
import Skeleton from '../Skeleton/Skeleton';
|
||||
import Skeleton from '../Skeleton/Skeleton.js';
|
||||
|
||||
const SkeletonAvatar = ({ properties, methods }) => {
|
||||
let size = properties.size || 32;
|
||||
@ -38,7 +38,10 @@ const SkeletonAvatar = ({ properties, methods }) => {
|
||||
<Skeleton
|
||||
methods={methods}
|
||||
properties={{
|
||||
style: { borderRadius: properties.shape === 'square' ? '0' : size / 2 },
|
||||
style: {
|
||||
...{ borderRadius: properties.shape === 'square' ? '0' : size / 2 },
|
||||
...(properties.style || {}),
|
||||
},
|
||||
width: size,
|
||||
height: size,
|
||||
}}
|
||||
|
||||
@ -14,9 +14,13 @@
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
import { runRenderTests } from '@lowdefy/block-dev';
|
||||
import { runBlockSchemaTests, runRenderTests } from '@lowdefy/block-dev';
|
||||
|
||||
import Block from './SkeletonAvatar.js';
|
||||
import examples from './examples.yaml';
|
||||
import SkeletonAvatar from './SkeletonAvatar';
|
||||
import block from './index.js';
|
||||
import schema from './schema.json';
|
||||
|
||||
runRenderTests({ examples, Block: SkeletonAvatar, meta: {} });
|
||||
const { meta, tests } = block;
|
||||
runRenderTests({ examples, Block, meta, schema, tests });
|
||||
runBlockSchemaTests({ examples, meta, schema });
|
||||
|
||||
@ -0,0 +1,76 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Render default - value[0] 1`] = `
|
||||
.emotion-0 {
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
<div
|
||||
class="skeleton emotion-0"
|
||||
style="width: 32px; height: 32px;"
|
||||
/>
|
||||
`;
|
||||
|
||||
exports[`Render shapesquare - value[0] 1`] = `
|
||||
.emotion-0 {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
<div
|
||||
class="skeleton emotion-0"
|
||||
style="width: 32px; height: 32px;"
|
||||
/>
|
||||
`;
|
||||
|
||||
exports[`Render sizedefault - value[0] 1`] = `
|
||||
.emotion-0 {
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
<div
|
||||
class="skeleton emotion-0"
|
||||
style="width: 32px; height: 32px;"
|
||||
/>
|
||||
`;
|
||||
|
||||
exports[`Render sizelarge - value[0] 1`] = `
|
||||
.emotion-0 {
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
<div
|
||||
class="skeleton emotion-0"
|
||||
style="width: 40px; height: 40px;"
|
||||
/>
|
||||
`;
|
||||
|
||||
exports[`Render sizesmall - value[0] 1`] = `
|
||||
.emotion-0 {
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
<div
|
||||
class="skeleton emotion-0"
|
||||
style="width: 24px; height: 24px;"
|
||||
/>
|
||||
`;
|
||||
|
||||
exports[`Test Schema default 1`] = `true`;
|
||||
|
||||
exports[`Test Schema default 2`] = `null`;
|
||||
|
||||
exports[`Test Schema shapesquare 1`] = `true`;
|
||||
|
||||
exports[`Test Schema shapesquare 2`] = `null`;
|
||||
|
||||
exports[`Test Schema sizedefault 1`] = `true`;
|
||||
|
||||
exports[`Test Schema sizedefault 2`] = `null`;
|
||||
|
||||
exports[`Test Schema sizelarge 1`] = `true`;
|
||||
|
||||
exports[`Test Schema sizelarge 2`] = `null`;
|
||||
|
||||
exports[`Test Schema sizesmall 1`] = `true`;
|
||||
|
||||
exports[`Test Schema sizesmall 2`] = `null`;
|
||||
@ -0,0 +1,41 @@
|
||||
{
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"type": "object",
|
||||
"additionalProperties": false,
|
||||
"properties": {
|
||||
"style": {
|
||||
"type": "object",
|
||||
"description": "Css style object to apply to the skeleton.",
|
||||
"docs": {
|
||||
"displayType": "yaml"
|
||||
}
|
||||
},
|
||||
"size": {
|
||||
"type": "string",
|
||||
"default": "medium",
|
||||
"description": "Size of the skeleton.",
|
||||
"enum": ["small", "medium", "large"]
|
||||
},
|
||||
"shape": {
|
||||
"type": "string",
|
||||
"default": "round",
|
||||
"description": "Size of the skeleton.",
|
||||
"enum": ["square", "round"]
|
||||
},
|
||||
"height": {
|
||||
"type": ["number", "string"],
|
||||
"description": "Height of the skeleton."
|
||||
},
|
||||
"width": {
|
||||
"type": ["number", "string"],
|
||||
"description": "Width of the skeleton."
|
||||
}
|
||||
}
|
||||
},
|
||||
"events": {
|
||||
"type": "object",
|
||||
"additionalProperties": false,
|
||||
"properties": {}
|
||||
}
|
||||
}
|
||||
@ -17,7 +17,7 @@
|
||||
import React from 'react';
|
||||
import { blockDefaultProps } from '@lowdefy/block-utils';
|
||||
|
||||
import Skeleton from '../Skeleton/Skeleton';
|
||||
import Skeleton from '../Skeleton/Skeleton.js';
|
||||
|
||||
const SkeletonButton = ({ properties, methods }) => {
|
||||
let height;
|
||||
@ -35,7 +35,10 @@ const SkeletonButton = ({ properties, methods }) => {
|
||||
<Skeleton
|
||||
methods={methods}
|
||||
properties={{
|
||||
style: { borderRadius: properties.shape === 'round' && height / 2 },
|
||||
style: {
|
||||
...{ borderRadius: properties.shape === 'round' && height / 2 },
|
||||
...(properties.style || {}),
|
||||
},
|
||||
width: properties.width || '100%',
|
||||
height: height,
|
||||
}}
|
||||
|
||||
@ -13,9 +13,14 @@
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
import { runRenderTests } from '@lowdefy/block-dev';
|
||||
|
||||
import { runBlockSchemaTests, runRenderTests } from '@lowdefy/block-dev';
|
||||
|
||||
import Block from './SkeletonButton.js';
|
||||
import examples from './examples.yaml';
|
||||
import SkeletonButton from './SkeletonButton';
|
||||
import block from './index.js';
|
||||
import schema from './schema.json';
|
||||
|
||||
runRenderTests({ examples, Block: SkeletonButton, meta: {} });
|
||||
const { meta, tests } = block;
|
||||
runRenderTests({ examples, Block, meta, schema, tests });
|
||||
runBlockSchemaTests({ examples, meta, schema });
|
||||
|
||||
@ -0,0 +1,60 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Render default - value[0] 1`] = `
|
||||
<div
|
||||
class="skeleton emotion-0"
|
||||
style="width: 100%; height: 32px;"
|
||||
/>
|
||||
`;
|
||||
|
||||
exports[`Render shaperound - value[0] 1`] = `
|
||||
.emotion-0 {
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
<div
|
||||
class="skeleton emotion-0"
|
||||
style="width: 100%; height: 32px;"
|
||||
/>
|
||||
`;
|
||||
|
||||
exports[`Render sizedefault - value[0] 1`] = `
|
||||
<div
|
||||
class="skeleton emotion-0"
|
||||
style="width: 100%; height: 32px;"
|
||||
/>
|
||||
`;
|
||||
|
||||
exports[`Render sizelarge - value[0] 1`] = `
|
||||
<div
|
||||
class="skeleton emotion-0"
|
||||
style="width: 100%; height: 40px;"
|
||||
/>
|
||||
`;
|
||||
|
||||
exports[`Render sizesmall - value[0] 1`] = `
|
||||
<div
|
||||
class="skeleton emotion-0"
|
||||
style="width: 100%; height: 24px;"
|
||||
/>
|
||||
`;
|
||||
|
||||
exports[`Test Schema default 1`] = `true`;
|
||||
|
||||
exports[`Test Schema default 2`] = `null`;
|
||||
|
||||
exports[`Test Schema shaperound 1`] = `true`;
|
||||
|
||||
exports[`Test Schema shaperound 2`] = `null`;
|
||||
|
||||
exports[`Test Schema sizedefault 1`] = `true`;
|
||||
|
||||
exports[`Test Schema sizedefault 2`] = `null`;
|
||||
|
||||
exports[`Test Schema sizelarge 1`] = `true`;
|
||||
|
||||
exports[`Test Schema sizelarge 2`] = `null`;
|
||||
|
||||
exports[`Test Schema sizesmall 1`] = `true`;
|
||||
|
||||
exports[`Test Schema sizesmall 2`] = `null`;
|
||||
@ -0,0 +1,41 @@
|
||||
{
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"type": "object",
|
||||
"additionalProperties": false,
|
||||
"properties": {
|
||||
"style": {
|
||||
"type": "object",
|
||||
"description": "Css style object to apply to the skeleton.",
|
||||
"docs": {
|
||||
"displayType": "yaml"
|
||||
}
|
||||
},
|
||||
"size": {
|
||||
"type": "string",
|
||||
"default": "medium",
|
||||
"description": "Size of the skeleton.",
|
||||
"enum": ["small", "medium", "large"]
|
||||
},
|
||||
"shape": {
|
||||
"type": "string",
|
||||
"default": "round",
|
||||
"description": "Size of the skeleton.",
|
||||
"enum": ["square", "round"]
|
||||
},
|
||||
"height": {
|
||||
"type": ["number", "string"],
|
||||
"description": "Height of the skeleton."
|
||||
},
|
||||
"width": {
|
||||
"type": ["number", "string"],
|
||||
"description": "Width of the skeleton."
|
||||
}
|
||||
}
|
||||
},
|
||||
"events": {
|
||||
"type": "object",
|
||||
"additionalProperties": false,
|
||||
"properties": {}
|
||||
}
|
||||
}
|
||||
@ -17,7 +17,7 @@
|
||||
import React from 'react';
|
||||
import { blockDefaultProps } from '@lowdefy/block-utils';
|
||||
|
||||
import Skeleton from '../Skeleton/Skeleton';
|
||||
import Skeleton from '../Skeleton/Skeleton.js';
|
||||
|
||||
const SkeletonInput = ({ properties, methods }) => {
|
||||
let inputHeight;
|
||||
@ -39,7 +39,7 @@ const SkeletonInput = ({ properties, methods }) => {
|
||||
properties={{
|
||||
width: properties.labelWidth || properties.width || '30%',
|
||||
height: properties.labelHeight || 20,
|
||||
style: { ...{ marginBottom: 10 }, ...properties.style },
|
||||
style: { ...{ marginBottom: 10 }, ...(properties.labelStyle || {}) },
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
@ -48,6 +48,7 @@ const SkeletonInput = ({ properties, methods }) => {
|
||||
properties={{
|
||||
width: properties.width || '100%',
|
||||
height: properties.inputHeight || inputHeight,
|
||||
style: properties.inputStyle || {},
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -13,9 +13,14 @@
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
import { runRenderTests } from '@lowdefy/block-dev';
|
||||
|
||||
import { runBlockSchemaTests, runRenderTests } from '@lowdefy/block-dev';
|
||||
|
||||
import Block from './SkeletonInput.js';
|
||||
import examples from './examples.yaml';
|
||||
import SkeletonInput from './SkeletonInput';
|
||||
import block from './index.js';
|
||||
import schema from './schema.json';
|
||||
|
||||
runRenderTests({ examples, Block: SkeletonInput, meta: {} });
|
||||
const { meta, tests } = block;
|
||||
runRenderTests({ examples, Block, meta, schema, tests });
|
||||
runBlockSchemaTests({ examples, meta, schema });
|
||||
|
||||
@ -0,0 +1,161 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Render default - value[0] 1`] = `
|
||||
.emotion-0 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
<div>
|
||||
<div
|
||||
class="skeleton emotion-0"
|
||||
style="width: 30%; height: 20px;"
|
||||
/>
|
||||
<div
|
||||
class="skeleton emotion-1"
|
||||
style="width: 100%; height: 32px;"
|
||||
/>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Render inputHeight80 - value[0] 1`] = `
|
||||
.emotion-0 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
<div>
|
||||
<div
|
||||
class="skeleton emotion-0"
|
||||
style="width: 30%; height: 20px;"
|
||||
/>
|
||||
<div
|
||||
class="skeleton emotion-1"
|
||||
style="width: 100%; height: 80px;"
|
||||
/>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Render labelHeight40 - value[0] 1`] = `
|
||||
.emotion-0 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
<div>
|
||||
<div
|
||||
class="skeleton emotion-0"
|
||||
style="width: 30%; height: 40px;"
|
||||
/>
|
||||
<div
|
||||
class="skeleton emotion-1"
|
||||
style="width: 100%; height: 32px;"
|
||||
/>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Render labelWidth80 - value[0] 1`] = `
|
||||
.emotion-0 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
<div>
|
||||
<div
|
||||
class="skeleton emotion-0"
|
||||
style="width: 80px; height: 20px;"
|
||||
/>
|
||||
<div
|
||||
class="skeleton emotion-1"
|
||||
style="width: 100%; height: 32px;"
|
||||
/>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Render labelfalse - value[0] 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="skeleton emotion-0"
|
||||
style="width: 100%; height: 32px;"
|
||||
/>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Render sizedefault - value[0] 1`] = `
|
||||
.emotion-0 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
<div>
|
||||
<div
|
||||
class="skeleton emotion-0"
|
||||
style="width: 30%; height: 20px;"
|
||||
/>
|
||||
<div
|
||||
class="skeleton emotion-1"
|
||||
style="width: 100%; height: 32px;"
|
||||
/>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Render sizelarge - value[0] 1`] = `
|
||||
.emotion-0 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
<div>
|
||||
<div
|
||||
class="skeleton emotion-0"
|
||||
style="width: 30%; height: 20px;"
|
||||
/>
|
||||
<div
|
||||
class="skeleton emotion-1"
|
||||
style="width: 100%; height: 40px;"
|
||||
/>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Render sizesmall - value[0] 1`] = `
|
||||
.emotion-0 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
<div>
|
||||
<div
|
||||
class="skeleton emotion-0"
|
||||
style="width: 30%; height: 20px;"
|
||||
/>
|
||||
<div
|
||||
class="skeleton emotion-1"
|
||||
style="width: 100%; height: 24px;"
|
||||
/>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Test Schema default 1`] = `true`;
|
||||
|
||||
exports[`Test Schema default 2`] = `null`;
|
||||
|
||||
exports[`Test Schema inputHeight80 1`] = `true`;
|
||||
|
||||
exports[`Test Schema inputHeight80 2`] = `null`;
|
||||
|
||||
exports[`Test Schema labelHeight40 1`] = `true`;
|
||||
|
||||
exports[`Test Schema labelHeight40 2`] = `null`;
|
||||
|
||||
exports[`Test Schema labelWidth80 1`] = `true`;
|
||||
|
||||
exports[`Test Schema labelWidth80 2`] = `null`;
|
||||
|
||||
exports[`Test Schema labelfalse 1`] = `true`;
|
||||
|
||||
exports[`Test Schema labelfalse 2`] = `null`;
|
||||
|
||||
exports[`Test Schema sizedefault 1`] = `true`;
|
||||
|
||||
exports[`Test Schema sizedefault 2`] = `null`;
|
||||
|
||||
exports[`Test Schema sizelarge 1`] = `true`;
|
||||
|
||||
exports[`Test Schema sizelarge 2`] = `null`;
|
||||
|
||||
exports[`Test Schema sizesmall 1`] = `true`;
|
||||
|
||||
exports[`Test Schema sizesmall 2`] = `null`;
|
||||
@ -0,0 +1,60 @@
|
||||
{
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"type": "object",
|
||||
"additionalProperties": false,
|
||||
"properties": {
|
||||
"labelStyle": {
|
||||
"type": "object",
|
||||
"description": "Css style object to apply to the label skeleton.",
|
||||
"docs": {
|
||||
"displayType": "yaml"
|
||||
}
|
||||
},
|
||||
"inputStyle": {
|
||||
"type": "object",
|
||||
"description": "Css style object to apply to the input skeleton.",
|
||||
"docs": {
|
||||
"displayType": "yaml"
|
||||
}
|
||||
},
|
||||
"size": {
|
||||
"type": "string",
|
||||
"default": "medium",
|
||||
"description": "Size of the skeleton.",
|
||||
"enum": ["small", "medium", "large"]
|
||||
},
|
||||
"shape": {
|
||||
"type": "string",
|
||||
"default": "round",
|
||||
"description": "Size of the skeleton.",
|
||||
"enum": ["square", "round"]
|
||||
},
|
||||
"height": {
|
||||
"type": ["number", "string"],
|
||||
"description": "Height of the skeleton."
|
||||
},
|
||||
"width": {
|
||||
"type": ["number", "string"],
|
||||
"description": "Width of the skeleton."
|
||||
},
|
||||
"labelHeight": {
|
||||
"type": ["number", "string"],
|
||||
"description": "Height of the skeleton."
|
||||
},
|
||||
"labelWidth": {
|
||||
"type": ["number", "string"],
|
||||
"description": "Width of the skeleton."
|
||||
},
|
||||
"inputHeight": {
|
||||
"type": ["number", "string"],
|
||||
"description": "Height of the skeleton."
|
||||
}
|
||||
}
|
||||
},
|
||||
"events": {
|
||||
"type": "object",
|
||||
"additionalProperties": false,
|
||||
"properties": {}
|
||||
}
|
||||
}
|
||||
@ -17,7 +17,7 @@
|
||||
import React from 'react';
|
||||
import { blockDefaultProps } from '@lowdefy/block-utils';
|
||||
|
||||
import Skeleton from '../Skeleton/Skeleton';
|
||||
import Skeleton from '../Skeleton/Skeleton.js';
|
||||
|
||||
const SkeletonParagraph = ({ properties, methods }) => {
|
||||
const lines = [...Array(properties.lines || 4).keys()];
|
||||
@ -28,9 +28,12 @@ const SkeletonParagraph = ({ properties, methods }) => {
|
||||
key={key}
|
||||
methods={methods}
|
||||
properties={{
|
||||
height: '1.25rem',
|
||||
width: key === lines.length - 1 && key !== 0 ? '40%' : '100%',
|
||||
style: { marginBottom: '1rem' },
|
||||
...{
|
||||
height: '1.25rem',
|
||||
width: key === lines.length - 1 && key !== 0 ? '40%' : '100%',
|
||||
style: { marginBottom: '1rem' },
|
||||
},
|
||||
...(properties.style || {}),
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
|
||||
@ -13,9 +13,14 @@
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
import { runRenderTests } from '@lowdefy/block-dev';
|
||||
|
||||
import { runBlockSchemaTests, runRenderTests } from '@lowdefy/block-dev';
|
||||
|
||||
import Block from './SkeletonParagraph.js';
|
||||
import examples from './examples.yaml';
|
||||
import SkeletonParagraph from './SkeletonParagraph';
|
||||
import block from './index.js';
|
||||
import schema from './schema.json';
|
||||
|
||||
runRenderTests({ examples, Block: SkeletonParagraph, meta: {} });
|
||||
const { meta, tests } = block;
|
||||
runRenderTests({ examples, Block, meta, schema, tests });
|
||||
runBlockSchemaTests({ examples, meta, schema });
|
||||
|
||||
@ -0,0 +1,125 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Render default - value[0] 1`] = `
|
||||
.emotion-0 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
<div
|
||||
style="width: 100%;"
|
||||
>
|
||||
<div
|
||||
class="skeleton emotion-0"
|
||||
style="width: 100%; height: 1.25rem;"
|
||||
/>
|
||||
<div
|
||||
class="skeleton emotion-0"
|
||||
style="width: 100%; height: 1.25rem;"
|
||||
/>
|
||||
<div
|
||||
class="skeleton emotion-0"
|
||||
style="width: 100%; height: 1.25rem;"
|
||||
/>
|
||||
<div
|
||||
class="skeleton emotion-0"
|
||||
style="width: 40%; height: 1.25rem;"
|
||||
/>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Render lines1 - value[0] 1`] = `
|
||||
.emotion-0 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
<div
|
||||
style="width: 100%;"
|
||||
>
|
||||
<div
|
||||
class="skeleton emotion-0"
|
||||
style="width: 100%; height: 1.25rem;"
|
||||
/>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Render lines7 - value[0] 1`] = `
|
||||
.emotion-0 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
<div
|
||||
style="width: 100%;"
|
||||
>
|
||||
<div
|
||||
class="skeleton emotion-0"
|
||||
style="width: 100%; height: 1.25rem;"
|
||||
/>
|
||||
<div
|
||||
class="skeleton emotion-0"
|
||||
style="width: 100%; height: 1.25rem;"
|
||||
/>
|
||||
<div
|
||||
class="skeleton emotion-0"
|
||||
style="width: 100%; height: 1.25rem;"
|
||||
/>
|
||||
<div
|
||||
class="skeleton emotion-0"
|
||||
style="width: 100%; height: 1.25rem;"
|
||||
/>
|
||||
<div
|
||||
class="skeleton emotion-0"
|
||||
style="width: 100%; height: 1.25rem;"
|
||||
/>
|
||||
<div
|
||||
class="skeleton emotion-0"
|
||||
style="width: 100%; height: 1.25rem;"
|
||||
/>
|
||||
<div
|
||||
class="skeleton emotion-0"
|
||||
style="width: 40%; height: 1.25rem;"
|
||||
/>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Render width200 - value[0] 1`] = `
|
||||
.emotion-0 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
<div
|
||||
style="width: 200px;"
|
||||
>
|
||||
<div
|
||||
class="skeleton emotion-0"
|
||||
style="width: 100%; height: 1.25rem;"
|
||||
/>
|
||||
<div
|
||||
class="skeleton emotion-0"
|
||||
style="width: 100%; height: 1.25rem;"
|
||||
/>
|
||||
<div
|
||||
class="skeleton emotion-0"
|
||||
style="width: 100%; height: 1.25rem;"
|
||||
/>
|
||||
<div
|
||||
class="skeleton emotion-0"
|
||||
style="width: 40%; height: 1.25rem;"
|
||||
/>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Test Schema default 1`] = `true`;
|
||||
|
||||
exports[`Test Schema default 2`] = `null`;
|
||||
|
||||
exports[`Test Schema lines1 1`] = `true`;
|
||||
|
||||
exports[`Test Schema lines1 2`] = `null`;
|
||||
|
||||
exports[`Test Schema lines7 1`] = `true`;
|
||||
|
||||
exports[`Test Schema lines7 2`] = `null`;
|
||||
|
||||
exports[`Test Schema width200 1`] = `true`;
|
||||
|
||||
exports[`Test Schema width200 2`] = `null`;
|
||||
@ -0,0 +1,36 @@
|
||||
{
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"type": "object",
|
||||
"additionalProperties": false,
|
||||
"properties": {
|
||||
"style": {
|
||||
"type": "object",
|
||||
"description": "Css style object to apply to the skeleton.",
|
||||
"docs": {
|
||||
"displayType": "yaml"
|
||||
}
|
||||
},
|
||||
"size": {
|
||||
"type": "string",
|
||||
"default": "medium",
|
||||
"description": "Size of the skeleton.",
|
||||
"enum": ["small", "medium", "large"]
|
||||
},
|
||||
"lines": {
|
||||
"type": "number",
|
||||
"default": 4,
|
||||
"description": "Number of paragraph lines of the skeleton."
|
||||
},
|
||||
"width": {
|
||||
"type": ["number", "string"],
|
||||
"description": "Width of the skeleton."
|
||||
}
|
||||
}
|
||||
},
|
||||
"events": {
|
||||
"type": "object",
|
||||
"additionalProperties": false,
|
||||
"properties": {}
|
||||
}
|
||||
}
|
||||
@ -17,7 +17,7 @@
|
||||
import React from 'react';
|
||||
import { blockDefaultProps } from '@lowdefy/block-utils';
|
||||
|
||||
import LogoSpinner from '../LogoSpinner/LogoSpinner';
|
||||
import LogoSpinner from '../LogoSpinner/LogoSpinner.js';
|
||||
|
||||
const Spinner = ({ properties, methods }) => {
|
||||
return (
|
||||
|
||||
@ -13,9 +13,14 @@
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
import { runRenderTests } from '@lowdefy/block-dev';
|
||||
|
||||
import { runBlockSchemaTests, runRenderTests } from '@lowdefy/block-dev';
|
||||
|
||||
import Block from './Spinner.js';
|
||||
import examples from './examples.yaml';
|
||||
import Spinner from './Spinner';
|
||||
import block from './index.js';
|
||||
import schema from './schema.json';
|
||||
|
||||
runRenderTests({ examples, Block: Spinner, meta: {} });
|
||||
const { meta, tests } = block;
|
||||
runRenderTests({ examples, Block, meta, schema, tests });
|
||||
runBlockSchemaTests({ examples, meta, schema });
|
||||
|
||||
@ -0,0 +1,294 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Render default - value[0] 1`] = `
|
||||
.emotion-0 {
|
||||
height: 100%;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.emotion-1 {
|
||||
text-align: center;
|
||||
color: #bfbfbf;
|
||||
font-size: 12px;
|
||||
padding-top: 2px;
|
||||
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
|
||||
}
|
||||
|
||||
<div
|
||||
class="emotion-0"
|
||||
>
|
||||
<div
|
||||
style="width: 50px; margin: auto; height: 50px;"
|
||||
>
|
||||
<svg
|
||||
height="100%"
|
||||
version="1.1"
|
||||
viewBox="0 0 94 91"
|
||||
width="100%"
|
||||
>
|
||||
<g>
|
||||
<path
|
||||
d="M94,18.634c0,-10.284 -8.35,-18.634 -18.634,-18.634l-56.732,0c-10.284,0 -18.634,8.35 -18.634,18.634l0,53.732c0,10.284 8.35,18.634 18.634,18.634l56.732,0c10.284,0 18.634,-8.35 18.634,-18.634l0,-53.732Z"
|
||||
style="fill: #bfbfbf;"
|
||||
/>
|
||||
<rect
|
||||
class="loading-bar"
|
||||
height="59"
|
||||
style="fill: #fff;"
|
||||
width="30"
|
||||
x="16"
|
||||
y="15"
|
||||
/>
|
||||
<rect
|
||||
class="loading-bar-sm"
|
||||
height="25"
|
||||
style="fill: #fff;"
|
||||
width="25"
|
||||
x="53"
|
||||
y="52"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
<div
|
||||
class="emotion-1"
|
||||
>
|
||||
Lowdefy
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Render height100 - value[0] 1`] = `
|
||||
.emotion-0 {
|
||||
height: 100px;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.emotion-1 {
|
||||
text-align: center;
|
||||
color: #bfbfbf;
|
||||
font-size: 12px;
|
||||
padding-top: 2px;
|
||||
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
|
||||
}
|
||||
|
||||
<div
|
||||
class="emotion-0"
|
||||
>
|
||||
<div
|
||||
style="width: 50px; margin: auto; height: 50px;"
|
||||
>
|
||||
<svg
|
||||
height="100%"
|
||||
version="1.1"
|
||||
viewBox="0 0 94 91"
|
||||
width="100%"
|
||||
>
|
||||
<g>
|
||||
<path
|
||||
d="M94,18.634c0,-10.284 -8.35,-18.634 -18.634,-18.634l-56.732,0c-10.284,0 -18.634,8.35 -18.634,18.634l0,53.732c0,10.284 8.35,18.634 18.634,18.634l56.732,0c10.284,0 18.634,-8.35 18.634,-18.634l0,-53.732Z"
|
||||
style="fill: #bfbfbf;"
|
||||
/>
|
||||
<rect
|
||||
class="loading-bar"
|
||||
height="59"
|
||||
style="fill: #fff;"
|
||||
width="30"
|
||||
x="16"
|
||||
y="15"
|
||||
/>
|
||||
<rect
|
||||
class="loading-bar-sm"
|
||||
height="25"
|
||||
style="fill: #fff;"
|
||||
width="25"
|
||||
x="53"
|
||||
y="52"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
<div
|
||||
class="emotion-1"
|
||||
>
|
||||
Lowdefy
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Render shaded - value[0] 1`] = `
|
||||
.emotion-0 {
|
||||
height: 100%;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
background: #f1f1f1;
|
||||
}
|
||||
|
||||
.emotion-1 {
|
||||
text-align: center;
|
||||
color: #bfbfbf;
|
||||
font-size: 12px;
|
||||
padding-top: 2px;
|
||||
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
|
||||
}
|
||||
|
||||
<div
|
||||
class="emotion-0"
|
||||
>
|
||||
<div
|
||||
style="width: 50px; margin: auto; height: 50px;"
|
||||
>
|
||||
<svg
|
||||
height="100%"
|
||||
version="1.1"
|
||||
viewBox="0 0 94 91"
|
||||
width="100%"
|
||||
>
|
||||
<g>
|
||||
<path
|
||||
d="M94,18.634c0,-10.284 -8.35,-18.634 -18.634,-18.634l-56.732,0c-10.284,0 -18.634,8.35 -18.634,18.634l0,53.732c0,10.284 8.35,18.634 18.634,18.634l56.732,0c10.284,0 18.634,-8.35 18.634,-18.634l0,-53.732Z"
|
||||
style="fill: #bfbfbf;"
|
||||
/>
|
||||
<rect
|
||||
class="loading-bar"
|
||||
height="59"
|
||||
style="fill: #f1f1f1;"
|
||||
width="30"
|
||||
x="16"
|
||||
y="15"
|
||||
/>
|
||||
<rect
|
||||
class="loading-bar-sm"
|
||||
height="25"
|
||||
style="fill: #f1f1f1;"
|
||||
width="25"
|
||||
x="53"
|
||||
y="52"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
<div
|
||||
class="emotion-1"
|
||||
>
|
||||
Lowdefy
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Render styleheight - value[0] 1`] = `
|
||||
.emotion-0 {
|
||||
height: 100%;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.emotion-1 {
|
||||
text-align: center;
|
||||
color: #bfbfbf;
|
||||
font-size: 12px;
|
||||
padding-top: 2px;
|
||||
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
|
||||
}
|
||||
|
||||
<div
|
||||
class="emotion-0"
|
||||
>
|
||||
<div
|
||||
style="width: 50px; margin: auto; height: 50px;"
|
||||
>
|
||||
<svg
|
||||
height="100%"
|
||||
version="1.1"
|
||||
viewBox="0 0 94 91"
|
||||
width="100%"
|
||||
>
|
||||
<g>
|
||||
<path
|
||||
d="M94,18.634c0,-10.284 -8.35,-18.634 -18.634,-18.634l-56.732,0c-10.284,0 -18.634,8.35 -18.634,18.634l0,53.732c0,10.284 8.35,18.634 18.634,18.634l56.732,0c10.284,0 18.634,-8.35 18.634,-18.634l0,-53.732Z"
|
||||
style="fill: #bfbfbf;"
|
||||
/>
|
||||
<rect
|
||||
class="loading-bar"
|
||||
height="59"
|
||||
style="fill: #fff;"
|
||||
width="30"
|
||||
x="16"
|
||||
y="15"
|
||||
/>
|
||||
<rect
|
||||
class="loading-bar-sm"
|
||||
height="25"
|
||||
style="fill: #fff;"
|
||||
width="25"
|
||||
x="53"
|
||||
y="52"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
<div
|
||||
class="emotion-1"
|
||||
>
|
||||
Lowdefy
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Test Schema default 1`] = `true`;
|
||||
|
||||
exports[`Test Schema default 2`] = `null`;
|
||||
|
||||
exports[`Test Schema height100 1`] = `true`;
|
||||
|
||||
exports[`Test Schema height100 2`] = `null`;
|
||||
|
||||
exports[`Test Schema shaded 1`] = `true`;
|
||||
|
||||
exports[`Test Schema shaded 2`] = `null`;
|
||||
|
||||
exports[`Test Schema styleheight 1`] = `true`;
|
||||
|
||||
exports[`Test Schema styleheight 2`] = `null`;
|
||||
@ -0,0 +1,32 @@
|
||||
{
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"type": "object",
|
||||
"additionalProperties": false,
|
||||
"properties": {
|
||||
"style": {
|
||||
"type": "object",
|
||||
"description": "Css style object to apply to the skeleton.",
|
||||
"docs": {
|
||||
"displayType": "yaml"
|
||||
}
|
||||
},
|
||||
"size": {
|
||||
"type": "string",
|
||||
"default": "medium",
|
||||
"description": "Size of the logo spinner.",
|
||||
"enum": ["small", "medium", "large"]
|
||||
},
|
||||
"height": {
|
||||
"type": ["string", "number"],
|
||||
"default": "100%",
|
||||
"description": "Height of the container."
|
||||
}
|
||||
}
|
||||
},
|
||||
"events": {
|
||||
"type": "object",
|
||||
"additionalProperties": false,
|
||||
"properties": {}
|
||||
}
|
||||
}
|
||||
@ -14,19 +14,17 @@
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
import IconSpinner from './blocks/IconSpinner';
|
||||
import LogoSpinner from './blocks/LogoSpinner';
|
||||
import Skeleton from './blocks/Skeleton';
|
||||
import SkeletonAvatar from './blocks/SkeletonAvatar';
|
||||
import SkeletonButton from './blocks/SkeletonButton';
|
||||
import SkeletonInput from './blocks/SkeletonInput';
|
||||
import SkeletonParagraph from './blocks/SkeletonParagraph';
|
||||
import Spinner from './blocks/Spinner';
|
||||
import IconSpinner from './blocks/IconSpinner/IconSpinner.js';
|
||||
import Skeleton from './blocks/Skeleton/Skeleton.js';
|
||||
import SkeletonAvatar from './blocks/SkeletonAvatar/SkeletonAvatar.js';
|
||||
import SkeletonButton from './blocks/SkeletonButton/SkeletonButton.js';
|
||||
import SkeletonInput from './blocks/SkeletonInput/SkeletonInput.js';
|
||||
import SkeletonParagraph from './blocks/SkeletonParagraph/SkeletonParagraph.js';
|
||||
import Spinner from './blocks/Spinner/Spinner.js';
|
||||
|
||||
export default {
|
||||
blocks: {
|
||||
IconSpinner,
|
||||
LogoSpinner,
|
||||
Skeleton,
|
||||
SkeletonAvatar,
|
||||
SkeletonButton,
|
||||
|
||||
@ -15,11 +15,12 @@
|
||||
*/
|
||||
|
||||
import { runMockRenderTests } from '@lowdefy/block-dev';
|
||||
import ReactMarkdown from 'react-markdown';
|
||||
|
||||
import DangerousMarkdown from './DangerousMarkdown';
|
||||
import examples from './examples.yaml';
|
||||
import block from './index.js';
|
||||
import examples from './examples.yaml';
|
||||
import schema from './schema.json';
|
||||
|
||||
const { meta, tests } = block;
|
||||
|
||||
jest.mock('react-markdown', () => {
|
||||
return jest.fn(() => 'mocked');
|
||||
@ -27,9 +28,16 @@ jest.mock('react-markdown', () => {
|
||||
|
||||
const mocks = [
|
||||
{
|
||||
name: 'default',
|
||||
fn: ReactMarkdown,
|
||||
getMockFns: async () => {
|
||||
const ReactMarkdown = await import('react-markdown');
|
||||
return [ReactMarkdown];
|
||||
},
|
||||
getBlock: async () => {
|
||||
const Block = await import('./DangerousMarkdown.js');
|
||||
return Block.default;
|
||||
},
|
||||
name: 'DangerousMarkdown',
|
||||
},
|
||||
];
|
||||
|
||||
runMockRenderTests({ examples, Block: DangerousMarkdown, meta, mocks });
|
||||
runMockRenderTests({ examples, meta, mocks, schema, tests });
|
||||
|
||||
@ -16,10 +16,12 @@
|
||||
|
||||
import { runBlockSchemaTests, runRenderTests } from '@lowdefy/block-dev';
|
||||
|
||||
import DangerousMarkdown from './DangerousMarkdown';
|
||||
import examples from './examples.yaml';
|
||||
import Block from './DangerousMarkdown.js';
|
||||
import block from './index.js';
|
||||
import examples from './examples.yaml';
|
||||
import schema from './schema.json';
|
||||
|
||||
runRenderTests({ examples, Block: DangerousMarkdown, meta });
|
||||
const { meta, tests } = block;
|
||||
|
||||
runRenderTests({ Block, examples, meta, schema, tests });
|
||||
runBlockSchemaTests({ examples, meta, schema });
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user