@taicode/common-web 1.1.10 → 1.1.11

package/output/use-observer/use-observer.test.jsx

@@ -0,0 +1,134 @@
+import { describe, it, expect } from 'vitest';
+import { renderHook, act } from '@testing-library/react';
+import { observable, action } from 'mobx';
+import { useObserver } from './use-observer';
+describe('useObserver', () => {
+    it('应该返回初始值当没有selector时', () => {
+        const initialValue = '初始值';
+        const { result } = renderHook(() => useObserver(initialValue));
+        expect(result.current).toBe(initialValue);
+    });
+    it('应该使用selector转换值', () => {
+        const initialValue = { count: 5 };
+        const selector = (value) => value.count * 2;
+        const { result } = renderHook(() => useObserver(initialValue, selector));
+        expect(result.current).toBe(10);
+    });
+    it('应该在观察对象变化时重新渲染', async () => {
+        const observableStore = observable({
+            count: 0,
+            increment: action(() => {
+                observableStore.count++;
+            })
+        });
+        const { result } = renderHook(() => useObserver(observableStore, (store) => store.count));
+        expect(result.current).toBe(0);
+        // 改变observable的值
+        act(() => {
+            observableStore.increment();
+        });
+        // 等待React更新
+        await new Promise(resolve => setTimeout(resolve, 0));
+        expect(result.current).toBe(1);
+    });
+    it('应该处理复杂的selector函数', () => {
+        const store = observable({
+            users: [
+                { id: 1, name: '张三', active: true },
+                { id: 2, name: '李四', active: false },
+                { id: 3, name: '王五', active: true }
+            ]
+        });
+        const selector = (store) => store.users.filter((user) => user.active).map((user) => user.name);
+        const { result } = renderHook(() => useObserver(store, selector));
+        expect(result.current).toEqual(['张三', '王五']);
+    });
+    it('应该在observable数组变化时重新渲染', async () => {
+        const store = observable({
+            items: ['项目1', '项目2'],
+            addItem: action((item) => {
+                store.items.push(item);
+            })
+        });
+        const { result } = renderHook(() => useObserver(store, (store) => store.items.length));
+        expect(result.current).toBe(2);
+        act(() => {
+            store.addItem('项目3');
+        });
+        await new Promise(resolve => setTimeout(resolve, 0));
+        expect(result.current).toBe(3);
+    });
+    it('应该处理null值的初始值', () => {
+        const { result } = renderHook(() => useObserver(null));
+        expect(result.current).toBeNull();
+    });
+    it('应该处理undefined值的初始值', () => {
+        const { result } = renderHook(() => useObserver(undefined));
+        expect(result.current).toBeUndefined();
+    });
+    it('应该在selector为null时返回原值', () => {
+        const initialValue = { data: '测试数据' };
+        const { result } = renderHook(() => useObserver(initialValue, null));
+        expect(result.current).toBe(initialValue);
+    });
+    it('应该处理嵌套observable对象', async () => {
+        const store = observable({
+            user: {
+                profile: {
+                    name: '测试用户',
+                    email: 'test@example.com'
+                }
+            },
+            updateName: action((name) => {
+                store.user.profile.name = name;
+            })
+        });
+        const { result } = renderHook(() => useObserver(store, (store) => store.user.profile.name));
+        expect(result.current).toBe('测试用户');
+        act(() => {
+            store.updateName('新用户名');
+        });
+        await new Promise(resolve => setTimeout(resolve, 0));
+        expect(result.current).toBe('新用户名');
+    });
+    it('应该处理多个observable属性的变化', async () => {
+        const store = observable({
+            firstName: '张',
+            lastName: '三',
+            updateFirstName: action((name) => {
+                store.firstName = name;
+            }),
+            updateLastName: action((name) => {
+                store.lastName = name;
+            })
+        });
+        const { result } = renderHook(() => useObserver(store, (store) => `${store.firstName}${store.lastName}`));
+        expect(result.current).toBe('张三');
+        act(() => {
+            store.updateFirstName('李');
+        });
+        await new Promise(resolve => setTimeout(resolve, 0));
+        expect(result.current).toBe('李三');
+        act(() => {
+            store.updateLastName('四');
+        });
+        await new Promise(resolve => setTimeout(resolve, 0));
+        expect(result.current).toBe('李四');
+    });
+    it('应该在组件卸载时清理reaction', () => {
+        const store = observable({ count: 0 });
+        const { unmount } = renderHook(() => useObserver(store, (store) => store.count));
+        // 卸载组件应该不会抛出错误
+        expect(() => unmount()).not.toThrow();
+    });
+    it('应该处理boolean类型的返回值', () => {
+        const store = observable({ isActive: true });
+        const { result } = renderHook(() => useObserver(store, (store) => store.isActive));
+        expect(result.current).toBe(true);
+    });
+    it('应该处理数字类型的返回值', () => {
+        const store = observable({ count: 42 });
+        const { result } = renderHook(() => useObserver(store, (store) => store.count));
+        expect(result.current).toBe(42);
+    });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@taicode/common-web",
-  "version": "1.1.10",
+  "version": "1.1.11",
   "author": "Alain",
   "license": "ISC",
   "description": "",