test(runtime): add component schema change test

* main:
feat: add the `requestFullscreen` method to the iframe component
feat: add the
iframe
component

packages/runtime/__tests__/ImplWrapper/ImplWrapper.spec.tsx

@@ -3,33 +3,47 @@ import { render, fireEvent, screen, waitFor, act } from '@testing-library/react'
 import produce from 'immer';
 import { times } from 'lodash';
 import { initSunmaoUI } from '../../src';
-import { SingleComponentSchema } from './mockSchema.spec';
+import { SingleComponentSchema, ComponentSchemaChangeSchema } from './mockSchema.spec';
 
 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
+    const { App } = initSunmaoUI();
+    const { unmount } = render(<App options={SingleComponentSchema} />);
+
+    // simple component will render 2 times, because it have to eval trait and properties twice
     expect(screen.getByTestId('single')?.textContent).toEqual('2');
     expect(screen.getByTestId('single-destroy')?.textContent).toEqual('0');
+    unmount();
+  });
+});
+
+describe('after the schema changes', () => {
+  it('the component and its siblings will not unmount after schema changes', () => {
+    const { App } = initSunmaoUI();
+    const { rerender, unmount } = render(<App options={ComponentSchemaChangeSchema} />);
+    expect(screen.getByTestId('staticComponent-destroy')?.textContent).toEqual('0');
+    expect(screen.getByTestId('dynamicComponent-destroy')?.textContent).toEqual('0');
+
+    const newMockSchema = produce(ComponentSchemaChangeSchema, draft => {
+      const c = draft.spec.components.find(c => c.id === 'dynamicComponent');
+      if (c) {
+        c.properties.text = 'baz';
+      }
+    });
+    rerender(<App options={newMockSchema} />);
+
+    expect(screen.getByTestId('staticComponent-destroy')?.textContent).toEqual('0');
+    expect(screen.getByTestId('dynamicComponent-destroy')?.textContent).toEqual('0');
+    unmount();
   });
 });
 
 // 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');

packages/runtime/__tests__/ImplWrapper/mockSchema.spec.ts

@@ -21,6 +21,37 @@ export const SingleComponentSchema: Application = {
   },
 };
 
+// for testing whether a component and its siblings will unmount after schema changes
+export const ComponentSchemaChangeSchema: Application = {
+  version: 'sunmao/v1',
+  kind: 'Application',
+  metadata: {
+    name: 'some App',
+  },
+  spec: {
+    components: [
+      {
+        id: 'staticComponent',
+        type: 'test/v1/tester',
+        properties: {
+          testId: 'staticComponent',
+          text: 'foo',
+        },
+        traits: [],
+      },
+      {
+        id: 'dynamicComponent',
+        type: 'test/v1/tester',
+        properties: {
+          testId: 'dynamicComponent',
+          text: 'bar',
+        },
+        traits: [],
+      },
+    ],
+  },
+};
+
 export const MockSchema: Application = {
   version: 'sunmao/v1',
   kind: 'Application',

packages/runtime/src/components/test/Tester.tsx

@@ -34,7 +34,6 @@ export default implementRuntimeComponent({
   },
 })(({ testId, text }) => {
   renderTimesMap[testId] = (renderTimesMap[testId] || 0) + 1;
-  console.log('render', renderTimesMap[testId]);
 
   useEffect(() => {
     return () => {