test(runtime): init runtime test

This commit is contained in:
Bowen Tan 2022-06-07 14:37:36 +08:00
parent b4c6082b6a
commit f58411bb83
10 changed files with 333 additions and 7 deletions

View File

@ -0,0 +1,27 @@
/* eslint-disable no-undef */
import '@testing-library/jest-dom';
import { render, fireEvent, screen, waitFor } from '@testing-library/react';
import { initSunmaoUI } from '../../src';
import { MockSchema } from './mockSchema.spec';
const { App } = initSunmaoUI();
test('shows the children when the checkbox is checked', () => {
render(<App options={MockSchema} />);
expect(screen.getByTestId('tester1')?.textContent).toEqual('2');
expect(screen.getByTestId('tester1-text')?.textContent).toEqual('0');
fireEvent.click(screen.getByTestId('button1'));
expect(screen.getByTestId('tester1')?.textContent).toEqual('3');
expect(screen.getByTestId('tester1-text')?.textContent).toEqual('1');
// waitFor(() => {
// });
// // the queries can accept a regex to make your selectors more resilient to content tweaks and changes.
// fireEvent.click(screen.getByLabelText(/show/i));
// // .toBeInTheDocument() is an assertion that comes from jest-dom
// // otherwise you could use .toBeDefined()
// expect(screen.getByText(testMessage)).toBeInTheDocument();
});

View File

@ -0,0 +1,68 @@
import { Application } from '@sunmao-ui/core';
export const MockSchema: Application = {
version: 'sunmao/v1',
kind: 'Application',
metadata: {
name: 'some App',
},
spec: {
components: [
{
id: 'tester1',
type: 'test/v1/tester',
properties: {
testId: 'tester1',
text: '{{state0.value}}',
},
traits: [],
},
{
id: 'button1',
type: 'test/v1/button',
properties: {
testId: 'button1',
},
traits: [
{
type: 'core/v1/event',
properties: {
handlers: [
{
type: 'click',
componentId: 'state0',
method: {
name: 'setValue',
parameters: {
key: 'value',
value: '{{state0.value + 1}}',
},
},
disabled: false,
wait: {
type: 'delay',
time: 0,
},
},
],
},
},
],
},
{
id: 'state0',
type: 'core/v1/dummy',
properties: {},
traits: [
{
type: 'core/v1/state',
properties: {
key: 'value',
initialValue: '0',
},
},
],
},
],
},
};

View File

@ -1,6 +1,5 @@
import { render } from '@testing-library/react';
import Text from '../../src/components/_internal/Text';
import React from 'react';
describe('Text component', () => {
it('should render plain text', () => {

View File

@ -0,0 +1 @@
module.exports = {};

View File

@ -7,12 +7,12 @@ module.exports = {
'^.+\\.[jt]sx?$': [
'babel-jest',
{
configFile: path.resolve(
__dirname,
'../../config/babel.react.config.js'
),
configFile: path.resolve(__dirname, '../../config/babel.react.config.js'),
},
],
},
moduleNameMapper: {
'\\.(css|less)$': '<rootDir>/__tests__/styleMock.js',
},
testEnvironment: 'jsdom',
};

View File

@ -58,7 +58,8 @@
"@babel/preset-typescript": "^7.15.0",
"@sunmao-ui/vite-plugins": "^1.0.2",
"@swc/core": "^1.2.121",
"@testing-library/react": "^12.1.0",
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "12.1.5",
"@types/lodash": "^4.14.170",
"@types/lodash-es": "^4.17.5",
"@types/react": "^17.0.0",

View File

@ -0,0 +1,39 @@
import { implementRuntimeComponent } from '../../utils/buildKit';
import { Type } from '@sinclair/typebox';
export default implementRuntimeComponent({
version: 'test/v1',
metadata: {
name: 'button',
displayName: 'Button',
description: 'for test',
isDraggable: false,
isResizable: false,
exampleProperties: {},
exampleSize: [1, 1],
annotations: {
category: 'Advance',
},
},
spec: {
properties: Type.Object({
testId: Type.String(),
}),
state: Type.Object({}),
methods: {},
slots: {},
styleSlots: [],
events: ['click'],
},
})(({ callbackMap, testId }) => {
const onClick = () => {
callbackMap?.click();
};
return (
<div>
<button onClick={onClick} data-testid={testId}>
Test Button
</button>
</div>
);
});

View File

@ -0,0 +1,43 @@
import { implementRuntimeComponent } from '../../utils/buildKit';
import { Type } from '@sinclair/typebox';
import { useEffect } from 'react';
let renderTimes = 1;
export default implementRuntimeComponent({
version: 'test/v1',
metadata: {
name: 'tester',
displayName: 'Tester',
description: 'for test',
isDraggable: false,
isResizable: false,
exampleProperties: {},
exampleSize: [1, 1],
annotations: {
category: 'Advance',
},
},
spec: {
properties: Type.Object({
testId: Type.String(),
text: Type.String(),
}),
state: Type.Object({}),
methods: {},
slots: {},
styleSlots: [],
events: [],
},
})(({ testId, text }) => {
useEffect(() => {
console.log('渲染了');
renderTimes++;
});
return (
<div>
<span data-testid={testId}>{renderTimes}</span>
<span data-testid={`${testId}-text`}>{text}</span>
</div>
);
});

View File

@ -11,6 +11,10 @@ import CoreFileInput from '../components/core/FileInput';
import CoreList from '../components/core/List';
import CoreIframe from '../components/core/Iframe';
// test
import TestButton from '../components/test/Button';
import TestTester from '../components/test/Tester';
// traits
import CoreArrayState from '../traits/core/ArrayState';
import CoreState from '../traits/core/State';
@ -247,6 +251,9 @@ export function initRegistry(
registry.registerComponent(CoreList);
registry.registerComponent(CoreIframe);
registry.registerComponent(TestTester);
registry.registerComponent(TestButton);
registry.registerTrait(CoreState);
registry.registerTrait(CoreArrayState);
registry.registerTrait(CoreEvent);

143
yarn.lock
View File

@ -1197,6 +1197,13 @@
dependencies:
regenerator-runtime "^0.13.4"
"@babel/runtime@^7.9.2":
version "7.18.3"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.3.tgz#c7b654b57f6f63cf7f8b418ac9ca04408c4579f4"
integrity sha512-38Y8f7YUhce/K7RMwTp7m0uCumpv9hZkitCbBClqQIow1qSbCvGkcegKOXpEWCQLfWmevgRiWokZ1GkpfhbZug==
dependencies:
regenerator-runtime "^0.13.4"
"@babel/template@^7.16.0", "@babel/template@^7.3.3":
version "7.16.0"
resolved "https://registry.npmjs.org/@babel/template/-/template-7.16.0.tgz"
@ -3497,6 +3504,30 @@
lz-string "^1.4.4"
pretty-format "^27.0.2"
"@testing-library/jest-dom@^5.16.4":
version "5.16.4"
resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-5.16.4.tgz#938302d7b8b483963a3ae821f1c0808f872245cd"
integrity sha512-Gy+IoFutbMQcky0k+bqqumXZ1cTGswLsFqmNLzNdSKkU9KGV2u9oXhukCbbJ9/LRPKiqwxEE8VpV/+YZlfkPUA==
dependencies:
"@babel/runtime" "^7.9.2"
"@types/testing-library__jest-dom" "^5.9.1"
aria-query "^5.0.0"
chalk "^3.0.0"
css "^3.0.0"
css.escape "^1.5.1"
dom-accessibility-api "^0.5.6"
lodash "^4.17.15"
redent "^3.0.0"
"@testing-library/react@12.1.5":
version "12.1.5"
resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-12.1.5.tgz#bb248f72f02a5ac9d949dea07279095fa577963b"
integrity sha512-OfTXCJUFgjd/digLUuPxa0+/3ZxsQmE7ub9kcbW/wi96Bh3o/p5vrETcBGfP17NWPGqeYYl5LTRpwyGoMC4ysg==
dependencies:
"@babel/runtime" "^7.12.5"
"@testing-library/dom" "^8.0.0"
"@types/react-dom" "<18.0.0"
"@testing-library/react@^12.1.0":
version "12.1.2"
resolved "https://registry.npmjs.org/@testing-library/react/-/react-12.1.2.tgz"
@ -3625,6 +3656,14 @@
dependencies:
"@types/istanbul-lib-report" "*"
"@types/jest@*":
version "28.1.1"
resolved "https://registry.yarnpkg.com/@types/jest/-/jest-28.1.1.tgz#8c9ba63702a11f8c386ee211280e8b68cb093cd1"
integrity sha512-C2p7yqleUKtCkVjlOur9BWVA4HgUQmEj/HWCt5WzZ5mLXrWnyIfl0wGuArc+kBXsy0ZZfLp+7dywB4HtSVYGVA==
dependencies:
jest-matcher-utils "^27.0.0"
pretty-format "^27.0.0"
"@types/jest@^26.0.23":
version "26.0.24"
resolved "https://registry.npmjs.org/@types/jest/-/jest-26.0.24.tgz"
@ -3731,6 +3770,13 @@
dependencies:
"@types/react" "*"
"@types/react-dom@<18.0.0":
version "17.0.17"
resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.17.tgz#2e3743277a793a96a99f1bf87614598289da68a1"
integrity sha512-VjnqEmqGnasQKV0CWLevqMTXBYG9GbwuE6x3VetERLh0cq2LTptFE73MrQi2S7GkKXCf2GgwItB/melLnxfnsg==
dependencies:
"@types/react" "^17"
"@types/react-dom@^17.0.0":
version "17.0.10"
resolved "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.10.tgz"
@ -3778,6 +3824,15 @@
"@types/scheduler" "*"
csstype "^3.0.2"
"@types/react@^17":
version "17.0.45"
resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.45.tgz#9b3d5b661fd26365fefef0e766a1c6c30ccf7b3f"
integrity sha512-YfhQ22Lah2e3CHPsb93tRwIGNiSwkuz1/blk4e6QrWS0jQzCSNbGLtOEYhPg02W0yGTTmpajp7dCTbBAMN3qsg==
dependencies:
"@types/prop-types" "*"
"@types/scheduler" "*"
csstype "^3.0.2"
"@types/resize-observer-browser@^0.1.6":
version "0.1.6"
resolved "https://registry.npmjs.org/@types/resize-observer-browser/-/resize-observer-browser-0.1.6.tgz"
@ -3800,6 +3855,13 @@
dependencies:
"@types/estree" "*"
"@types/testing-library__jest-dom@^5.9.1":
version "5.14.3"
resolved "https://registry.yarnpkg.com/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.3.tgz#ee6c7ffe9f8595882ee7bda8af33ae7b8789ef17"
integrity sha512-oKZe+Mf4ioWlMuzVBaXQ9WDnEm1+umLx0InILg+yvZVBBDmzV5KfZyLrCvadtWcx8+916jLmHafcmqqffl+iIw==
dependencies:
"@types/jest" "*"
"@types/unist@*", "@types/unist@^2.0.0":
version "2.0.6"
resolved "https://registry.npmjs.org/@types/unist/-/unist-2.0.6.tgz"
@ -4291,6 +4353,11 @@ at-least-node@^1.0.0:
resolved "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz"
integrity sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==
atob@^2.1.2:
version "2.1.2"
resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
aws-sign2@~0.7.0:
version "0.7.0"
resolved "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz"
@ -4639,6 +4706,14 @@ chalk@2.4.2, chalk@^2.0.0, chalk@^2.4.1, chalk@^2.4.2:
escape-string-regexp "^1.0.5"
supports-color "^5.3.0"
chalk@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/chalk/-/chalk-3.0.0.tgz#3f73c2bf526591f574cc492c51e2456349f844e4"
integrity sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==
dependencies:
ansi-styles "^4.1.0"
supports-color "^7.1.0"
chalk@^4.0.0, chalk@^4.1.0:
version "4.1.2"
resolved "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz"
@ -5166,6 +5241,20 @@ css-box-model@1.2.1:
dependencies:
tiny-invariant "^1.0.6"
css.escape@^1.5.1:
version "1.5.1"
resolved "https://registry.yarnpkg.com/css.escape/-/css.escape-1.5.1.tgz#42e27d4fa04ae32f931a4b4d4191fa9cddee97cb"
integrity sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==
css@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/css/-/css-3.0.0.tgz#4447a4d58fdd03367c516ca9f64ae365cee4aa5d"
integrity sha512-DG9pFfwOrzc+hawpmqX/dHYHJG+Bsdb0klhyi1sDneOgGOXy9wQIC8hzyVp1e4NRYDBdxcylvywPkkXCHAzTyQ==
dependencies:
inherits "^2.0.4"
source-map "^0.6.1"
source-map-resolve "^0.6.0"
cssom@^0.4.4:
version "0.4.4"
resolved "https://registry.npmjs.org/cssom/-/cssom-0.4.4.tgz"
@ -5416,6 +5505,11 @@ diff-sequences@^27.0.6:
resolved "https://registry.npmjs.org/diff-sequences/-/diff-sequences-27.0.6.tgz"
integrity sha512-ag6wfpBFyNXZ0p8pcuIDS//D8H062ZQJ3fzYxjpmeKjnz8W4pekL3AI8VohmyZmsWW2PWaHgjsmqR6L13101VQ==
diff-sequences@^27.5.1:
version "27.5.1"
resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-27.5.1.tgz#eaecc0d327fd68c8d9672a1e64ab8dccb2ef5327"
integrity sha512-k1gCAXAsNgLwEL+Y8Wvl+M6oEFj5bgazfZULpS5CneoPPXRaCCW7dm+q21Ky2VEE5X+VeRDBVg1Pcvvsr4TtNQ==
diff@^4.0.1:
version "4.0.2"
resolved "https://registry.yarnpkg.com/diff/-/diff-4.0.2.tgz#60f3aecb89d5fae520c11aa19efc2bb982aade7d"
@ -5447,6 +5541,11 @@ doctrine@^3.0.0:
dependencies:
esutils "^2.0.2"
dom-accessibility-api@^0.5.6:
version "0.5.14"
resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.5.14.tgz#56082f71b1dc7aac69d83c4285eef39c15d93f56"
integrity sha512-NMt+m9zFMPZe0JcY9gN224Qvk6qLIdqex29clBvc/y75ZBX9YA9wNK3frsYvu2DI1xcCIwxwnX+TlsJ2DSOADg==
dom-accessibility-api@^0.5.9:
version "0.5.10"
resolved "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.10.tgz"
@ -7050,7 +7149,7 @@ inflight@^1.0.4:
once "^1.3.0"
wrappy "1"
inherits@2, inherits@^2.0.3, inherits@~2.0.3:
inherits@2, inherits@^2.0.3, inherits@^2.0.4, inherits@~2.0.3:
version "2.0.4"
resolved "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz"
integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
@ -7584,6 +7683,16 @@ jest-diff@^27.3.1:
jest-get-type "^27.3.1"
pretty-format "^27.3.1"
jest-diff@^27.5.1:
version "27.5.1"
resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-27.5.1.tgz#a07f5011ac9e6643cf8a95a462b7b1ecf6680def"
integrity sha512-m0NvkX55LDt9T4mctTEgnZk3fmEg3NRYutvMPWM/0iPnkFj2wIeF45O1718cMSOFO1vINkqmxqD8vE37uTEbqw==
dependencies:
chalk "^4.0.0"
diff-sequences "^27.5.1"
jest-get-type "^27.5.1"
pretty-format "^27.5.1"
jest-docblock@^27.0.6:
version "27.0.6"
resolved "https://registry.npmjs.org/jest-docblock/-/jest-docblock-27.0.6.tgz"
@ -7637,6 +7746,11 @@ jest-get-type@^27.3.1:
resolved "https://registry.npmjs.org/jest-get-type/-/jest-get-type-27.3.1.tgz"
integrity sha512-+Ilqi8hgHSAdhlQ3s12CAVNd8H96ZkQBfYoXmArzZnOfAtVAJEiPDBirjByEblvG/4LPJmkL+nBqPO3A1YJAEg==
jest-get-type@^27.5.1:
version "27.5.1"
resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-27.5.1.tgz#3cd613c507b0f7ace013df407a1c1cd578bcb4f1"
integrity sha512-2KY95ksYSaK7DMBWQn6dQz3kqAf3BB64y2udeG+hv4KfSOb9qwcYQstTJc1KCbsix+wLZWZYN8t7nwX3GOBLRw==
jest-haste-map@^27.3.1:
version "27.3.1"
resolved "https://registry.npmjs.org/jest-haste-map/-/jest-haste-map-27.3.1.tgz"
@ -7689,6 +7803,16 @@ jest-leak-detector@^27.3.1:
jest-get-type "^27.3.1"
pretty-format "^27.3.1"
jest-matcher-utils@^27.0.0:
version "27.5.1"
resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-27.5.1.tgz#9c0cdbda8245bc22d2331729d1091308b40cf8ab"
integrity sha512-z2uTx/T6LBaCoNWNFWwChLBKYxTMcGBRjAt+2SbP929/Fflb9aa5LGma654Rz8z9HLxsrUaYzxE9T/EFIL/PAw==
dependencies:
chalk "^4.0.0"
jest-diff "^27.5.1"
jest-get-type "^27.5.1"
pretty-format "^27.5.1"
jest-matcher-utils@^27.3.1:
version "27.3.1"
resolved "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-27.3.1.tgz"
@ -9726,6 +9850,15 @@ pretty-format@^26.0.0, pretty-format@^26.6.2:
ansi-styles "^4.0.0"
react-is "^17.0.1"
pretty-format@^27.0.0, pretty-format@^27.5.1:
version "27.5.1"
resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-27.5.1.tgz#2181879fdea51a7a5851fb39d920faa63f01d88e"
integrity sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==
dependencies:
ansi-regex "^5.0.1"
ansi-styles "^5.0.0"
react-is "^17.0.1"
pretty-format@^27.0.2, pretty-format@^27.3.1:
version "27.3.1"
resolved "https://registry.npmjs.org/pretty-format/-/pretty-format-27.3.1.tgz"
@ -10776,6 +10909,14 @@ source-map-js@^1.0.2:
resolved "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz"
integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
source-map-resolve@^0.6.0:
version "0.6.0"
resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.6.0.tgz#3d9df87e236b53f16d01e58150fc7711138e5ed2"
integrity sha512-KXBr9d/fO/bWo97NXsPIAW1bFSBOuCnjbNTBMO7N59hsv5i9yzRDfcYwwt0l04+VqnKC+EwzvJZIP/qkuMgR/w==
dependencies:
atob "^2.1.2"
decode-uri-component "^0.2.0"
source-map-support@^0.5.6:
version "0.5.20"
resolved "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.20.tgz"