location.spec.js

gistfile1.txt

import React from 'react';
import { render } from 'testUtils';
import { useQueryParam, useHistory } from './location';

describe('location hooks', () => {
  describe('useHistory', () => {
    it('changes path without loosing query parameteras', () => {
      const HookWrapper = () => {
        const { push } = useHistory({ keepQuery: true });
        React.useEffect(() => {
          push('/foo');
        }, []);
        return null;
      };

      const { history } = render(<HookWrapper />, {
        route: '/?foo=waldo&baz=qux',
      });
      expect(history.location.pathname).toBe('/foo');
      expect(history.location.search).toBe('?foo=waldo&baz=qux');
    });

    it('changes location without loosing query parameteras', () => {
      const HookWrapper = () => {
        const { push } = useHistory({ keepQuery: true });
        React.useEffect(() => {
          push({ pathname: '/foo' });
        }, []);
        return null;
      };
      const { history } = render(<HookWrapper />, {
        route: '/?foo=waldo&baz=qux',
      });
      expect(history.location.pathname).toBe('/foo');
      expect(history.location.search).toBe('?foo=waldo&baz=qux');
    });

    it('replaces path without loosing query parameteras', () => {
      const HookWrapper = () => {
        const { replace } = useHistory({ keepQuery: true });
        React.useEffect(() => {
          replace('/foo');
        }, []);
        return null;
      };

      const { history } = render(<HookWrapper />, {
        route: '/?foo=waldo&baz=qux',
      });
      expect(history.location.pathname).toBe('/foo');
      expect(history.location.search).toBe('?foo=waldo&baz=qux');
    });

    it('replaces search if specified', () => {
      const HookWrapper = () => {
        const { push } = useHistory({ keepQuery: true });
        React.useEffect(() => {
          push({ pathname: '/foo', search: '?bar=baz' });
        }, []);
        return null;
      };
      const { history } = render(<HookWrapper />, {
        route: '/?foo=waldo&baz=qux',
      });
      expect(history.location.pathname).toBe('/foo');
      expect(history.location.search).toBe('?bar=baz');
    });

  });

  describe('useQueryParam', () => {
    it('returns the current location parameter value', () => {
      let param;

      const HookWrapper = () => {
        [param] = useQueryParam('foo');
        return null;
      };

      const { history } = render(<HookWrapper />, { route: '/?foo=bar' });

      expect(param).toBe('bar');
    });

    it('updates the current location parameter', () => {
      let param, setParam;

      const HookWrapper = () => {
        [param, setParam] = useQueryParam('foo');
        React.useEffect(() => {
          setParam('waldo');
        }, []);
        return null;
      };

      const { history } = render(<HookWrapper />, {
        route: '/?foo=bar&baz=qux',
      });

      expect(history.location.search).toBe('?foo=waldo&baz=qux');
    });

    it('updates the current location once for same value', () => {
      let param, setParam;

      const HookWrapper = () => {
        [param, setParam] = useQueryParam('foo');
        React.useEffect(() => {
          setParam('waldo');
          setParam('waldo');
        }, []);
        return null;
      };

      const { history } = render(<HookWrapper />, {
        route: '/?foo=bar&baz=qux',
      });
      expect(history.length).toBe(2);
    });

    it('supports different value types', () => {
      let param, setParam;

      const HookWrapper = () => {
        [param, setParam] = useQueryParam('foo');
        React.useEffect(() => {
          setParam(1);
          setParam('bar');
          setParam(['bar']);
          setParam({ bar: 'baz' });
        }, []);
        return null;
      };

      const { history } = render(<HookWrapper />);
      expect(history.entries.slice(1).map(({ search }) => unescape(search)))
        .toMatchInlineSnapshot(`
      Array [
        "?foo=1",
        "?foo=bar",
        "?foo[]=bar",
        "?foo[bar]=baz",
      ]
    `);
    });

    it('updates the current location once for non primitive values', () => {
      let param, setParam;

      const HookWrapper = () => {
        [param, setParam] = useQueryParam('foo');
        React.useEffect(() => {
          setParam(['bar', 'baz']);
          setParam(['bar', 'baz']);
        }, []);
        return null;
      };

      const { history } = render(<HookWrapper />, {
        route: '/?foo=bar&baz=qux',
      });
      expect(unescape(history.location.search)).toBe(
        '?foo[]=bar&foo[]=baz&baz=qux',
      );
      expect(history.length).toBe(2);
    });
  });
});