test: add useCookieState test case (#2112)

* test(useCookieState): add test case

* docs(useCookieState):  default value store to cookie

* docs: update

* test: update cookie name

* test(useCookieState): update test case

* Revert "test: add useCookieState test case and fix documentation"

* test(useCookieState): add test case

---------

Co-authored-by: liuyib <[email protected]>

packages/hooks/src/useCookieState/__tests__/index.test.tsx

@@ -70,6 +70,7 @@ describe('useCookieState', () => {
     });
     expect(anotherHook.result.current.state).toBe('C');
     expect(hook.result.current.state).toBe('B');
+    expect(Cookies.get(COOKIE)).toBe('C');
   });
 
   it('should support undefined', () => {
@@ -86,6 +87,13 @@ describe('useCookieState', () => {
       defaultValue: 'false',
     });
     expect(anotherHook.result.current.state).toBe('false');
+    expect(Cookies.get(COOKIE)).toBe('false');
+    act(() => {
+      // @ts-ignore
+      hook.result.current.setState();
+    });
+    expect(hook.result.current.state).toBeUndefined();
+    expect(Cookies.get(COOKIE)).toBeUndefined();
   });
 
   it('should support empty string', () => {
@@ -109,4 +117,24 @@ describe('useCookieState', () => {
     });
     expect(hook.result.current.state).toBe('hello world, zhangsan');
   });
+
+  it('using the same cookie name', () => {
+    const COOKIE_NAME = 'test-same-cookie-name';
+    const { result: result1 } = setUp(COOKIE_NAME, { defaultValue: 'A' });
+    const { result: result2 } = setUp(COOKIE_NAME, { defaultValue: 'B' });
+    expect(result1.current.state).toBe('A');
+    expect(result2.current.state).toBe('A');
+    act(() => {
+      result1.current.setState('B');
+    });
+    expect(result1.current.state).toBe('B');
+    expect(result2.current.state).toBe('A');
+    expect(Cookies.get(COOKIE_NAME)).toBe('B');
+    act(() => {
+      result2.current.setState('C');
+    });
+    expect(result1.current.state).toBe('B');
+    expect(result2.current.state).toBe('C');
+    expect(Cookies.get(COOKIE_NAME)).toBe('C');
+  });
 });