test(runtime): add unit tests for the new state LCM

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

@@ -13,6 +13,7 @@ import {
   AsyncMergeStateSchema,
   TabsWithSlotsSchema,
   ParentRerenderSchema,
+  MultiSlotsSchema,
 } from './mockSchema';
 
 // A pure single sunmao component will render twice when it mount.
@@ -199,4 +200,25 @@ describe('slot trait if condition', () => {
     unmount();
     clearTesterMap();
   });
+
+  it('only teardown component state in the last render', () => {
+    const { App, stateManager } = initSunmaoUI({ libs: [TestLib] });
+    stateManager.mute = true;
+    const { unmount } = render(<App options={MultiSlotsSchema} />);
+
+    expect(stateManager.store).toMatchInlineSnapshot(`
+      Object {
+        "input1": Object {
+          "value": "1",
+        },
+        "input2": Object {
+          "value": "2",
+        },
+        "testList0": Object {},
+      }
+    `);
+
+    unmount();
+    clearTesterMap();
+  });
 });

packages/runtime/__tests__/ImplWrapper/mockSchema.ts

@@ -266,3 +266,51 @@ export const TabsWithSlotsSchema: Application = {
     ],
   },
 };
+
+export const MultiSlotsSchema: Application = {
+  kind: 'Application',
+  version: 'example/v1',
+  metadata: { name: 'sunmao application', description: 'sunmao empty application' },
+  spec: {
+    components: [
+      {
+        id: 'testList0',
+        type: 'custom/v1/testList',
+        properties: { number: 2 },
+        traits: [],
+      },
+      {
+        id: 'input1',
+        type: 'test/v1/input',
+        properties: {
+          defaultValue: '1',
+        },
+        traits: [
+          {
+            type: 'core/v1/slot',
+            properties: {
+              container: { id: 'testList0', slot: 'content' },
+              ifCondition: '{{$slot.index === 0}}',
+            },
+          },
+        ],
+      },
+      {
+        id: 'input2',
+        type: 'test/v1/input',
+        properties: {
+          defaultValue: '2',
+        },
+        traits: [
+          {
+            type: 'core/v1/slot',
+            properties: {
+              container: { id: 'testList0', slot: 'content' },
+              ifCondition: '{{$slot.index === 1}}',
+            },
+          },
+        ],
+      },
+    ],
+  },
+};

packages/runtime/__tests__/testLib/TestList.tsx

@@ -0,0 +1,43 @@
+import { implementRuntimeComponent } from '../../src/utils/buildKit';
+import { Type } from '@sinclair/typebox';
+import { PRESET_PROPERTY_CATEGORY } from '@sunmao-ui/shared';
+export default implementRuntimeComponent({
+  version: 'custom/v1',
+  metadata: {
+    name: 'testList',
+    displayName: 'TestList',
+    description: '',
+    isDraggable: false,
+    isResizable: false,
+    exampleProperties: {},
+    exampleSize: [1, 1],
+    annotations: {
+      category: PRESET_PROPERTY_CATEGORY.Basic,
+    },
+  },
+  spec: {
+    properties: Type.Object({
+      number: Type.Number(),
+    }),
+    state: Type.Object({}),
+    methods: {},
+    slots: {
+      content: {
+        slotProps: Type.Object({
+          index: Type.Number(),
+        }),
+      },
+    },
+    styleSlots: ['content'],
+    events: [],
+  },
+})(({ number, slotsElements }) => {
+  // implement your component here
+  return (
+    <div>
+      {new Array(number)
+        .fill(0)
+        .map((_, index) => slotsElements?.content?.({ index }, null, `content_${index}`))}
+    </div>
+  );
+});

packages/runtime/__tests__/testLib/index.ts

@@ -3,10 +3,11 @@ import TestButton from './Button';
 import TestTester from './Tester';
 import TestInput from './Input';
 import TestTabs from './Tabs';
+import TestList from './TestList';
 import TimeoutTrait from './TimeoutTrait';
 import { SunmaoLib } from '../../src';
 
 export const TestLib: SunmaoLib = {
-  components: [TestButton, TestTester, TestInput, TestTabs],
+  components: [TestButton, TestTester, TestInput, TestTabs, TestList],
   traits: [TimeoutTrait],
 };