mirror/sunmao-ui
2
0
Fork 0
mirror of https://github.com/smartxworks/sunmao-ui.git synced 2024-11-21 03:15:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

test(runtime): add single component test

Browse Source 
* main:
feat: add the `requestFullscreen` method to the iframe component
feat: add the iframe
component
This commit is contained in:
Bowen Tan 2022-06-08 17:09:14 +08:00
parent f58411bb83
commit e18d3120b8
9 changed files with 109 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
examples/box/index.json
View File

@ -5,111 +5,13 @@
"spec": {
"components": [
{
"id": "test_btn",
"type": "chakra_ui/v1/button",
"properties": { "text": { "raw": "Click", "format": "plain" } },
"traits": [
{
"type": "core/v1/state",
"properties": { "key": "count", "initialValue": 0 }
},
{
"type": "core/v1/event",
"properties": {
"handlers": [
{
"type": "onClick",
"componentId": "test_btn",
"method": {
"name": "setValue",
"parameters": {
"key": "count",
"value": "{{ test_btn.count > 0 ? 0 : test_btn.count + 1 }}"
}
},
"wait": {},
"disabled": false
}
]
}
}
]
},
{
"id": "box_container",
"type": "chakra_ui/v1/box",
"id": "tester5",
"type": "test/v1/tester",
"properties": {
"my": 8,
"p": 8,
"display": "flex",
"bg": "{{ test_btn.count % 2 ? 'teal' : 'white' }}",
"border": "1px solid",
"borderColor": "{{ test_btn.count % 2 ? 'white' : 'teal' }}",
"borderRadius": 8,
"h": 200
"testId": "single",
"text": "text"
},
"traits": []
},
{
"id": "box_child_1",
"type": "chakra_ui/v1/box",
"properties": {
"mr": 4,
"flex": 1,
"bg": "{{ test_btn.count % 2 ? 'white' : 'teal' }}",
"color": "{{ test_btn.count % 2 ? 'teal' : 'white' }}",
"display": "flex",
"alignItems": "center",
"justifyContent": "center",
"borderRadius": 4
},
"traits": [
{
"type": "core/v1/slot",
"properties": { "container": { "id": "box_container", "slot": "content" } }
}
]
},
{
"id": "text1",
"type": "core/v1/text",
"properties": { "value": { "raw": "in box child 1", "format": "plain" } },
"traits": [
{
"type": "core/v1/slot",
"properties": { "container": { "id": "box_child_1", "slot": "content" } }
}
]
},
{
"id": "box_child_2",
"type": "chakra_ui/v1/box",
"properties": {
"flex": 1,
"bg": "{{ test_btn.count % 2 ? 'white' : 'teal' }}",
"color": "{{ test_btn.count % 2 ? 'teal' : 'white' }}",
"display": "flex",
"alignItems": "center",
"justifyContent": "center",
"borderRadius": 4
},
"traits": [
{
"type": "core/v1/slot",
"properties": { "container": { "id": "box_container", "slot": "content" } }
}
]
},
{
"id": "text2",
"type": "core/v1/text",
"properties": { "value": { "raw": "in box child 2", "format": "plain" } },
"traits": [
{
"type": "core/v1/slot",
"properties": { "container": { "id": "box_child_2", "slot": "content" } }
}
]
}
]
}

66
packages/runtime/__tests__/ImplWrapper/ImplWrapper.spec.tsx
View File

@ -1,27 +1,47 @@
/* eslint-disable no-undef */
import '@testing-library/jest-dom';
import { render, fireEvent, screen, waitFor } from '@testing-library/react';
import { render, fireEvent, screen, waitFor, act } from '@testing-library/react';
import produce from 'immer';
import { times } from 'lodash';
import { initSunmaoUI } from '../../src';
import { MockSchema } from './mockSchema.spec';
import { SingleComponentSchema } 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();
describe('single component condition', () => {
const { App } = initSunmaoUI();
const { rerender } = render(<App options={SingleComponentSchema} />);
it('only render one time', () => {
// simple component will render 2 times, because it have to eval trait and propties twice
expect(screen.getByTestId('single')?.textContent).toEqual('2');
expect(screen.getByTestId('single-destroy')?.textContent).toEqual('0');
});
});
// expect(screen.getByTestId('tester1-text')?.textContent).toEqual('0');
// fireEvent.click(screen.getByTestId('button1'));
// expect(screen.getByTestId('tester1')?.textContent).toEqual('3');
// expect(screen.getByTestId('tester2')?.textContent).toEqual('2');
// expect(screen.getByTestId('tester1-text')?.textContent).toEqual('1');
// const newMockSchema = produce(MockSchema, draft => {
// const tester2 = draft.spec.components.find(c => c.id === 'tester2')
// if (tester2) {
// tester2.properties.text = 'foo'
// }
// })
// rerender(<App options={newMockSchema} />);
// expect(screen.getByTestId('tester1')?.textContent).toEqual('3');
// expect(screen.getByTestId('tester2')?.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();

21
packages/runtime/__tests__/ImplWrapper/mockSchema.spec.ts
View File

@ -1,5 +1,26 @@
import { Application } from '@sunmao-ui/core';
export const SingleComponentSchema: Application = {
version: 'sunmao/v1',
kind: 'Application',
metadata: {
name: 'some App',
},
spec: {
components: [
{
id: 'single',
type: 'test/v1/tester',
properties: {
testId: 'single',
text: 'Hello, world!',
},
traits: [],
},
],
},
};
export const MockSchema: Application = {
version: 'sunmao/v1',
kind: 'Application',

1
packages/runtime/index.html
View File

@ -9,6 +9,7 @@
<select></select>
<div id="root"></div>
<script type="module">
import './wdyr';
import React from 'react';
import ReactDOM from 'react-dom';
import { initSunmaoUI } from './src';

1
packages/runtime/package.json
View File

@ -66,6 +66,7 @@
"@types/react-dom": "^17.0.0",
"@types/react-grid-layout": "^1.1.2",
"@vitejs/plugin-react": "^1.0.1",
"@welldone-software/why-did-you-render": "^7.0.1",
"babel-jest": "^27.1.0",
"eslint-plugin-react-hooks": "^4.3.0",
"jest": "^27.1.0",

4
packages/runtime/src/components/_internal/ImplWrapper/ImplWrapperMain.tsx
View File

@ -166,7 +166,6 @@ export const ImplWrapperMain = React.forwardRef<HTMLDivElement, ImplWrapperProps
hooks: props.hooks,
isInModule: props.isInModule,
});
const C = unmount ? null : (
<Impl
key={c.id}
@ -188,11 +187,12 @@ export const ImplWrapperMain = React.forwardRef<HTMLDivElement, ImplWrapperProps
);
const element = useGridLayout(props, result, ref);
return element;
}
);
ImplWrapperMain.whyDidYouRender = true;
// This hook will only run unmount function when unmount, not every time when unmount function changes.
const useDidUnmount = (fn: Function) => {
const fnRef = useRef(fn);

24
packages/runtime/src/components/test/Tester.tsx
View File

@ -2,7 +2,10 @@ import { implementRuntimeComponent } from '../../utils/buildKit';
import { Type } from '@sinclair/typebox';
import { useEffect } from 'react';
let renderTimes = 1;
(window as any).renderTimesMap = {};
(window as any).destroyTimesMap = {};
const renderTimesMap = (window as any).renderTimesMap;
const destroyTimesMap = (window as any).destroyTimesMap;
export default implementRuntimeComponent({
version: 'test/v1',
@ -30,13 +33,24 @@ export default implementRuntimeComponent({
events: [],
},
})(({ testId, text }) => {
renderTimesMap[testId] = (renderTimesMap[testId] || 0) + 1;
console.log('render', renderTimesMap[testId]);
useEffect(() => {
console.log('渲染了');
renderTimes++;
});
return () => {
destroyTimesMap[testId] = (destroyTimesMap[testId] || 0) + 1;
};
}, [testId]);
return (
<div>
<span data-testid={testId}>{renderTimes}</span>
<p>
<span>RenderTimes:</span>
<span data-testid={testId}>{renderTimesMap[testId] || 0}</span>{' '}
</p>
<p>
<span>DestroyTimes:</span>
<span data-testid={`${testId}-destroy`}>{destroyTimesMap[testId] || 0}</span>{' '}
</p>
<span data-testid={`${testId}-text`}>{text}</span>
</div>
);

10
packages/runtime/wdyr.js Normal file
View File

@ -0,0 +1,10 @@
import whyDidYouRender from '@welldone-software/why-did-you-render';
import React from 'react';
// Make sure to only include the library in development
if (process.env.NODE_ENV === 'development') {
// const whyDidYouRender = require('@welldone-software/why-did-you-render');
whyDidYouRender(React, {
trackAllPureComponents: true,
});
}

9
yarn.lock
View File

@ -4012,6 +4012,13 @@
resolved "https://registry.npmjs.org/@vue/shared/-/shared-3.2.20.tgz"
integrity sha512-FbpX+hD5BvXCQerEYO7jtAGHlhAkhTQ4KIV73kmLWNlawWhTiVuQxizgVb0BOkX5oG9cIRZ42EG++d/k/Efp0w==
"@welldone-software/why-did-you-render@^7.0.1":
version "7.0.1"
resolved "https://registry.yarnpkg.com/@welldone-software/why-did-you-render/-/why-did-you-render-7.0.1.tgz#09f487d84844bd8e66435843c2e0305702e61efb"
integrity sha512-Qe/8Xxa2G+LMdI6VoazescPzjjkHYduCDa8aHOJR50e9Bgs8ihkfMBY+ev7B4oc3N59Zm547Sgjf8h5y0FOyoA==
dependencies:
lodash "^4"
JSONStream@^1.0.4:
version "1.3.5"
resolved "https://registry.npmjs.org/JSONStream/-/JSONStream-1.3.5.tgz"
@ -8434,7 +8441,7 @@ lodash.truncate@^4.4.2:
resolved "https://registry.npmjs.org/lodash.truncate/-/lodash.truncate-4.4.2.tgz"
integrity sha1-WjUNoLERO4N+z//VgSy+WNbq4ZM=
lodash@4.17.21, lodash@^4.0.1, lodash@^4.17.12, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.7.0:
lodash@4.17.21, lodash@^4, lodash@^4.0.1, lodash@^4.17.12, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.7.0:
version "4.17.21"
resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz"
integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==