test: Prop Name test

Author: zombieJ

docs/examples/immutable.tsx

@@ -2,7 +2,7 @@ import {
   createContext,
   makeImmutable,
   responseImmutable,
-  useContextSelector,
+  useContext,
 } from '@rc-component/context';
 import React from 'react';
 import useRenderTimes from './useRenderTimes';
@@ -34,7 +34,7 @@ const ImmutableMyApp = makeImmutable(MyApp);
 
 const MyComponent = ({ name }: { name: any }) => {
   const renderTimes = useRenderTimes();
-  const value = useContextSelector(AppContext, name);
+  const value = useContext(AppContext, name);
 
   return (
     <div>

docs/examples/simple.tsx

@@ -1,4 +1,4 @@
-import { createContext, useContextSelector } from '@rc-component/context';
+import { createContext, useContext } from '@rc-component/context';
 import React from 'react';
 import useRenderTimes from './useRenderTimes';
 
@@ -8,7 +8,7 @@ const CountContext = createContext<{
 }>();
 
 const MyConsumer = React.memo(({ name }: { name: any }) => {
-  const value = useContextSelector(CountContext, name);
+  const value = useContext(CountContext, name);
   const renderTimes = useRenderTimes();
 
   return (

src/context.tsx

@@ -55,32 +55,41 @@ export function createContext<ContextProps>(
   return { Context, Provider };
 }
 
+/** e.g. useSelect(userContext) => user */
+export function useContext<ContextProps>(
+  holder: SelectorContext<ContextProps>,
+): ContextProps;
+
 /** e.g. useSelect(userContext, user => user.name) => user.name */
-export function useContextSelector<ContextProps, SelectorValue>(
+export function useContext<ContextProps, SelectorValue>(
   holder: SelectorContext<ContextProps>,
   selector: Selector<ContextProps, SelectorValue>,
 ): SelectorValue;
 
 /** e.g. useSelect(userContext, ['name', 'age']) => user { name, age } */
-export function useContextSelector<ContextProps, SelectorValue extends Partial<ContextProps>>(
+export function useContext<ContextProps, SelectorValue extends Partial<ContextProps>>(
   holder: SelectorContext<ContextProps>,
   selector: (keyof ContextProps)[],
 ): SelectorValue;
 
 /** e.g. useSelect(userContext, 'name') => user.name */
-export function useContextSelector<ContextProps, PropName extends keyof ContextProps>(
+export function useContext<ContextProps, PropName extends keyof ContextProps>(
   holder: SelectorContext<ContextProps>,
   selector: PropName,
 ): ContextProps[PropName];
 
-export function useContextSelector<ContextProps, SelectorValue>(
+export function useContext<ContextProps, SelectorValue>(
   holder: SelectorContext<ContextProps>,
-  selector: Selector<ContextProps, any> | (keyof ContextProps)[] | keyof ContextProps,
+  selector?: Selector<ContextProps, any> | (keyof ContextProps)[] | keyof ContextProps,
 ) {
   const eventSelector = useEvent<Selector<ContextProps, SelectorValue>>(
     typeof selector === 'function'
       ? selector
       : ctx => {
+          if (selector === undefined) {
+            return ctx;
+          }
+
           if (!Array.isArray(selector)) {
             return ctx[selector];
           }

src/index.ts

@@ -1,6 +1,6 @@
 import type { SelectorContext } from './context';
-import { createContext, useContextSelector } from './context';
+import { createContext, useContext } from './context';
 import { makeImmutable, responseImmutable } from './Immutable';
 
-export { createContext, useContextSelector, makeImmutable, responseImmutable };
+export { createContext, useContext, makeImmutable, responseImmutable };
 export type { SelectorContext };

tests/common.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+export const useRenderTimes = () => {
+  const renderRef = React.useRef(0);
+  renderRef.current += 1;
+
+  return renderRef.current;
+};
+
+export function RenderTimer({ id }: { id?: string }) {
+  const renderTimes = useRenderTimes();
+
+  return (
+    <div id={id} className="render-times">
+      {renderTimes}
+    </div>
+  );
+}
+
+export function Value({ id, value }: { id?: string; value: any }) {
+  const str = JSON.stringify(value);
+
+  return (
+    <div id={id} className="value">
+      {str.replace(/^"/, '').replace(/"$/, '')}
+    </div>
+  );
+}

tests/context.test.tsx

@@ -0,0 +1,113 @@
+import { fireEvent, render } from '@testing-library/react';
+import React from 'react';
+import { createContext, useContext } from '../src';
+import { RenderTimer, Value } from './common';
+
+describe('Basic', () => {
+  interface User {
+    name: string;
+    age: number;
+  }
+
+  const UserContext = createContext<User>();
+
+  const Root = ({ children }: { children?: React.ReactNode }) => {
+    const [name, setName] = React.useState('bamboo');
+    const [age, setAge] = React.useState(30);
+
+    return (
+      <UserContext.Provider value={{ name, age }}>
+        <input id="name" value={name} onChange={e => setName(e.target.value)} />
+        <input id="age" value={age} onChange={e => setAge(Number(e.target.value))} />
+
+        {children}
+      </UserContext.Provider>
+    );
+  };
+
+  function changeValue(container: HTMLElement, id: string, value: string) {
+    fireEvent.change(container.querySelector(`#${id}`), {
+      target: {
+        value,
+      },
+    });
+  }
+
+  it('raw', () => {
+    const Raw = () => {
+      const user = useContext(UserContext);
+
+      return (
+        <>
+          <Value id="value" value={user} />
+          <RenderTimer id="raw" />
+        </>
+      );
+    };
+
+    const { container } = render(
+      <Root>
+        <Raw />
+      </Root>,
+    );
+
+    // Mount
+    expect(container.querySelector('#raw')!.textContent).toEqual('1');
+
+    // Update `name`: Full Update
+    changeValue(container, 'name', 'light');
+    expect(container.querySelector('#raw')!.textContent).toEqual('2');
+    expect(container.querySelector('#value')!.textContent).toEqual(
+      JSON.stringify({
+        name: 'light',
+        age: 30,
+      }),
+    );
+
+    // Update `age`: Full Update
+    changeValue(container, 'age', '20');
+    expect(container.querySelector('#raw')!.textContent).toEqual('3');
+    expect(container.querySelector('#value')!.textContent).toEqual(
+      JSON.stringify({
+        name: 'light',
+        age: 20,
+      }),
+    );
+  });
+
+  it('PropName', () => {
+    const PropName = ({ name }: { name: keyof User }) => {
+      const value = useContext(UserContext, name);
+
+      return (
+        <>
+          <Value id={`${name}-value`} value={value} />
+          <RenderTimer id={`${name}-times`} />
+        </>
+      );
+    };
+
+    const { container } = render(
+      <Root>
+        <PropName name="name" />
+        <PropName name="age" />
+      </Root>,
+    );
+
+    // Mount
+    expect(container.querySelector('#name-times')!.textContent).toEqual('1');
+    expect(container.querySelector('#age-times')!.textContent).toEqual('1');
+
+    // Update `name`: Partial Update
+    changeValue(container, 'name', 'light');
+    expect(container.querySelector('#name-times')!.textContent).toEqual('2');
+    expect(container.querySelector('#name-value')!.textContent).toEqual('light');
+    expect(container.querySelector('#age-times')!.textContent).toEqual('1');
+
+    // Update `age`: Partial Update
+    changeValue(container, 'age', '20');
+    expect(container.querySelector('#name-times')!.textContent).toEqual('2');
+    expect(container.querySelector('#age-times')!.textContent).toEqual('2');
+    expect(container.querySelector('#age-value')!.textContent).toEqual('20');
+  });
+});