fix(useSref): Update href if the stateName or params have changed

Author: christopherthielen

src/components/hooks/__tests__/useSref.test.tsx

@@ -1,28 +1,15 @@
 import * as React from 'react';
 import { makeTestRouter, muteConsoleErrors } from '../../__tests__/util';
 import { useSref } from '../useSref';
-import { UISref } from '../../UISref';
-import { UISrefActiveContext } from '../../UISrefActive';
-
-const state = {
-  name: 'state',
-  url: '',
-  component: () => (
-    <UISref to="state2">
-      <a>state2</a>
-    </UISref>
-  ),
-};
-
-const state2 = {
-  name: 'state2',
-  url: '/state2',
-  component: () => <span>state2</span>,
-};
+import { UISrefActive, UISrefActiveContext } from '../../UISrefActive';
+
+const state = { name: 'state', url: '/state' };
+const state2 = { name: 'state2', url: '/state2' };
+const state3 = { name: 'state3', url: '/state3/:param' };
 
 describe('useUiSref', () => {
   let { router, routerGo, mountInRouter } = makeTestRouter([]);
-  beforeEach(() => ({ router, routerGo, mountInRouter } = makeTestRouter([state, state2])));
+  beforeEach(() => ({ router, routerGo, mountInRouter } = makeTestRouter([state, state2, state3])));
 
   it('throws if to is not a string', () => {
     const Component = () => {
@@ -70,37 +57,142 @@ describe('useUiSref', () => {
     expect(spy).not.toHaveBeenCalled();
   });
 
-  it('registers itself with the parent UISrefActive addStateInfo callback', () => {
-    const spy = jest.fn();
-    const Component = () => {
-      const uiSref = useSref('state', {});
+  it('updates the href when the stateName changes', () => {
+    const Component = props => {
+      const uiSref = useSref(props.state);
       return <a {...uiSref} />;
     };
 
-    mountInRouter(
-      <UISrefActiveContext.Provider value={spy}>
-        <Component />
-      </UISrefActiveContext.Provider>
-    );
+    const wrapper = mountInRouter(<Component state="state" />);
+    expect(wrapper.html()).toBe('<a href="/state"></a>');
 
-    expect(spy).toBeCalledTimes(1);
+    wrapper.setProps({ state: 'state2' });
+    expect(wrapper.html()).toBe('<a href="/state2"></a>');
   });
 
-  it('deregisters itself with the parent UISrefActive addStateInfo callback when unmounted', () => {
-    const spy = jest.fn();
-    const Component = () => {
-      const uiSref = useSref('state', {});
-      return <a {...uiSref} />;
+  it('updates the href when the params changes', () => {
+    const State3Link = props => {
+      const sref = useSref('state3', { param: props.param });
+      return <a {...sref} />;
+    };
+
+    const wrapper = mountInRouter(<State3Link param="123" />);
+    expect(wrapper.html()).toBe('<a href="/state3/123"></a>');
+
+    wrapper.setProps({ param: '456' });
+    expect(wrapper.html()).toBe('<a href="/state3/456"></a>');
+  });
+
+  it('participates in parent UISrefActive component active state', async () => {
+    await routerGo('state2');
+
+    const State2Link = props => {
+      const sref = useSref('state2');
+      return (
+        <a {...sref} className={props.className}>
+          state2
+        </a>
+      );
     };
 
     const wrapper = mountInRouter(
-      <UISrefActiveContext.Provider value={() => spy}>
-        <Component />
-      </UISrefActiveContext.Provider>
+      <UISrefActive class="active">
+        <State2Link />
+      </UISrefActive>
     );
+    expect(wrapper.html()).toBe('<a href="/state2" class="active">state2</a>');
+  });
 
-    expect(spy).toBeCalledTimes(0);
-    wrapper.unmount();
-    expect(spy).toBeCalledTimes(1);
+  it('participates in grandparent UISrefActive component active state', async () => {
+    await routerGo('state2');
+
+    const State2Link = props => {
+      const sref = useSref('state2');
+      return (
+        <a {...sref} className={props.className}>
+          state2
+        </a>
+      );
+    };
+
+    const Component = () => {
+      return (
+        <UISrefActive class="grandparentactive">
+          <div>
+            <UISrefActive class="active">
+              <State2Link />
+            </UISrefActive>
+          </div>
+        </UISrefActive>
+      );
+    };
+
+    const wrapper = mountInRouter(<Component />);
+    expect(wrapper.html()).toBe('<div class="grandparentactive"><a href="/state2" class="active">state2</a></div>');
+  });
+
+  it('stops participating in parent/grandparent UISrefActive component active state when unmounted', async () => {
+    await routerGo('state2');
+
+    const State2Link = props => {
+      const sref = useSref('state2');
+      return (
+        <a {...sref} className={props.className}>
+          state2
+        </a>
+      );
+    };
+
+    const Component = props => {
+      return (
+        <UISrefActive class="grandparentactive">
+          <div>
+            <UISrefActive class="active">{props.show ? <State2Link /> : <span />}</UISrefActive>
+          </div>
+        </UISrefActive>
+      );
+    };
+
+    const wrapper = mountInRouter(<Component show={true} />);
+    expect(wrapper.html()).toBe('<div class="grandparentactive"><a href="/state2" class="active">state2</a></div>');
+
+    wrapper.setProps({ show: false });
+    expect(wrapper.html()).toBe('<div><span></span></div>');
+  });
+
+  describe('implementation detail: ', () => {
+    it('registers itself with the parent UISrefActive addStateInfo callback', () => {
+      const spy = jest.fn();
+      const Component = () => {
+        const uiSref = useSref('state', {});
+        return <a {...uiSref} />;
+      };
+
+      mountInRouter(
+        <UISrefActiveContext.Provider value={spy}>
+          <Component />
+        </UISrefActiveContext.Provider>
+      );
+
+      expect(spy).toBeCalledTimes(1);
+    });
+
+    it('deregisters itself with the parent UISrefActive addStateInfo callback when unmounted', () => {
+      const spy = jest.fn();
+      const Component = () => {
+        const uiSref = useSref('state', {});
+        return <a {...uiSref} />;
+      };
+
+      const wrapper = mountInRouter(
+        <UISrefActiveContext.Provider value={() => spy}>
+          <Component />
+        </UISrefActiveContext.Provider>
+      );
+
+      expect(spy).toBeCalledTimes(0);
+      wrapper.unmount();
+      expect(spy).toBeCalledTimes(1);
+    });
   });
 });

src/components/hooks/useSref.ts

@@ -4,6 +4,7 @@ import { useCallback, useContext, useEffect, useMemo } from 'react';
 import { StateRegistry, UIViewAddress } from '../../index';
 import { UISrefActiveContext } from '../UISrefActive';
 import { UIViewContext } from '../UIView';
+import { useDeepObjectDiff } from './useDeepObjectDiff';
 import { useRouter } from './useRouter';
 
 export interface LinkProps {
@@ -33,28 +34,31 @@ export function useSref(stateName: string, params: object = {}, options: Transit
     throw new Error(IncorrectStateNameTypeError);
   }
 
-  useEffect(() => parentUISrefActiveAddStateInfo(stateName, params), []);
+  useEffect(() => parentUISrefActiveAddStateInfo(stateName, params), [stateName, useDeepObjectDiff(params)]);
 
   const hrefOptions = useMemo(() => getTransitionOptions(stateRegistry, options, parentUIViewAddress), [
     options,
     parentUIViewAddress,
     stateRegistry,
   ]);
 
-  const handleClick = useCallback(
-    (e: React.MouseEvent) => {
-      if (!e.defaultPrevented && !(e.button == 1 || e.metaKey || e.ctrlKey)) {
-        e.preventDefault();
-        stateService.go(stateName, params, hrefOptions);
-      }
-    },
-    [hrefOptions, params, stateService, stateName]
-  );
+  const href = useMemo(() => stateService.href(stateName, params, hrefOptions), [
+    stateService,
+    stateName,
+    useDeepObjectDiff(params),
+    hrefOptions,
+  ]);
 
-  return {
-    onClick: handleClick,
-    href: stateService.href(stateName, params, hrefOptions),
+  const handleClick = (e: React.MouseEvent) => {
+    if (!e.defaultPrevented && !(e.button == 1 || e.metaKey || e.ctrlKey)) {
+      e.preventDefault();
+      stateService.go(stateName, params, hrefOptions);
+    }
   };
+
+  const onClick = useCallback(handleClick, [hrefOptions, params, stateService, stateName]);
+
+  return { onClick, href };
 }
 
 /** @hidden */