diff --git a/packages/runtime/__tests__/ImplWrapper/ImplWrapper.spec.tsx b/packages/runtime/__tests__/ImplWrapper/ImplWrapper.spec.tsx new file mode 100644 index 00000000..9ffce077 --- /dev/null +++ b/packages/runtime/__tests__/ImplWrapper/ImplWrapper.spec.tsx @@ -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(); + + 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(); +}); diff --git a/packages/runtime/__tests__/ImplWrapper/mockSchema.spec.ts b/packages/runtime/__tests__/ImplWrapper/mockSchema.spec.ts new file mode 100644 index 00000000..f4f06796 --- /dev/null +++ b/packages/runtime/__tests__/ImplWrapper/mockSchema.spec.ts @@ -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', + }, + }, + ], + }, + ], + }, +}; diff --git a/packages/runtime/__tests__/_internal/Text.spec.tsx b/packages/runtime/__tests__/_internal/Text.spec.tsx index 4c49db31..2172ae4a 100644 --- a/packages/runtime/__tests__/_internal/Text.spec.tsx +++ b/packages/runtime/__tests__/_internal/Text.spec.tsx @@ -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', () => { diff --git a/packages/runtime/__tests__/styleMock.js b/packages/runtime/__tests__/styleMock.js new file mode 100644 index 00000000..f053ebf7 --- /dev/null +++ b/packages/runtime/__tests__/styleMock.js @@ -0,0 +1 @@ +module.exports = {}; diff --git a/packages/runtime/jest.config.js b/packages/runtime/jest.config.js index fa7594f7..774be01b 100644 --- a/packages/runtime/jest.config.js +++ b/packages/runtime/jest.config.js @@ -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)$': '/__tests__/styleMock.js', + }, testEnvironment: 'jsdom', }; diff --git a/packages/runtime/package.json b/packages/runtime/package.json index 102b8108..849ef177 100644 --- a/packages/runtime/package.json +++ b/packages/runtime/package.json @@ -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", diff --git a/packages/runtime/src/components/test/Button.tsx b/packages/runtime/src/components/test/Button.tsx new file mode 100644 index 00000000..34a03d7e --- /dev/null +++ b/packages/runtime/src/components/test/Button.tsx @@ -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 ( +
+ +
+ ); +}); diff --git a/packages/runtime/src/components/test/Tester.tsx b/packages/runtime/src/components/test/Tester.tsx new file mode 100644 index 00000000..f4244ad0 --- /dev/null +++ b/packages/runtime/src/components/test/Tester.tsx @@ -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 ( +
+ {renderTimes} + {text} +
+ ); +}); diff --git a/packages/runtime/src/services/Registry.tsx b/packages/runtime/src/services/Registry.tsx index 9752090e..41ec7dfd 100644 --- a/packages/runtime/src/services/Registry.tsx +++ b/packages/runtime/src/services/Registry.tsx @@ -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); diff --git a/yarn.lock b/yarn.lock index 1704b9cf..36f7afc1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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"