react-url-query/lib/__tests__/updateUrlQuery-test.js

A library for managing state through query parameters in the URL in React. Works well with or without Redux and React Router.

'use strict';

var _configureUrlQuery = require('../configureUrlQuery');

var _configureUrlQuery2 = _interopRequireDefault(_configureUrlQuery);

var _UrlUpdateTypes = require('../UrlUpdateTypes');

var _UrlUpdateTypes2 = _interopRequireDefault(_UrlUpdateTypes);

var _updateUrlQuery = require('../updateUrlQuery');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function makeMockHistory() {
  return {
    replace: jest.fn().mockImplementation(function (location) {
      return location;
    }),
    push: jest.fn().mockImplementation(function (location) {
      return location;
    })
  };
}

describe('updateUrlQuerySingle', function () {
  it('works with replace', function () {
    var history = makeMockHistory();
    (0, _configureUrlQuery2.default)({ history: history });

    var location = { pathname: '/', search: '?foo=99&bar=baz' };
    var newLocation = (0, _updateUrlQuery.updateUrlQuerySingle)(_UrlUpdateTypes2.default.replace, 'foo', '123', location);
    expect(newLocation).toEqual({ pathname: '/', search: '?foo=123' });
    expect(history.replace).toBeCalled();
    expect(history.push).not.toBeCalled();
  });

  it('works with push', function () {
    var history = makeMockHistory();
    (0, _configureUrlQuery2.default)({ history: history });

    var location = { pathname: '/', search: '?foo=99&bar=baz' };
    var newLocation = (0, _updateUrlQuery.updateUrlQuerySingle)(_UrlUpdateTypes2.default.push, 'foo', '123', location);
    expect(newLocation).toEqual({ pathname: '/', search: '?foo=123' });
    expect(history.push).toBeCalled();
    expect(history.replace).not.toBeCalled();
  });

  it('works with replaceIn', function () {
    var history = makeMockHistory();
    (0, _configureUrlQuery2.default)({ history: history });

    var location = { pathname: '/', search: '?foo=99&bar=baz' };
    var newLocation = (0, _updateUrlQuery.updateUrlQuerySingle)(_UrlUpdateTypes2.default.replaceIn, 'foo', '123', location);
    expect(newLocation).toEqual({ pathname: '/', search: '?bar=baz&foo=123' });
    expect(history.replace).toBeCalled();
    expect(history.push).not.toBeCalled();
  });

  it('works with pushIn', function () {
    var history = makeMockHistory();
    (0, _configureUrlQuery2.default)({ history: history });

    var location = { pathname: '/', search: '?foo=99&bar=baz' };
    var newLocation = (0, _updateUrlQuery.updateUrlQuerySingle)(_UrlUpdateTypes2.default.pushIn, 'foo', '123', location);
    expect(newLocation).toEqual({ pathname: '/', search: '?bar=baz&foo=123' });
    expect(history.push).toBeCalled();
    expect(history.replace).not.toBeCalled();
  });
});

describe('replaceUrlQuery', function () {
  it('creates a new query and calls replace in history', function () {
    var history = makeMockHistory();
    (0, _configureUrlQuery2.default)({ history: history });

    var location = { pathname: '/', search: '?foo=99&bar=baz' };
    var newLocation = (0, _updateUrlQuery.replaceUrlQuery)({ foo: '123' }, location);
    expect(newLocation).toEqual({ pathname: '/', search: '?foo=123' });
    expect(history.replace).toBeCalled();
    expect(history.push).not.toBeCalled();
  });
});

describe('pushUrlQuery', function () {
  it('creates a new query and calls push in history', function () {
    var history = makeMockHistory();
    (0, _configureUrlQuery2.default)({ history: history });

    var location = { pathname: '/', search: '?foo=99&bar=baz' };
    var newLocation = (0, _updateUrlQuery.pushUrlQuery)({ foo: '123' }, location);
    expect(newLocation).toEqual({ pathname: '/', search: '?foo=123' });
    expect(history.push).toBeCalled();
    expect(history.replace).not.toBeCalled();
  });
});

describe('multiReplaceInUrlQuery', function () {
  it('replaces the values for the specified params in the query and calls replace in history', function () {
    var history = makeMockHistory();
    (0, _configureUrlQuery2.default)({ history: history });

    var location = { pathname: '/', search: '?foo=99&bar=baz&ack=blech' };
    var newLocation = (0, _updateUrlQuery.multiReplaceInUrlQuery)({ foo: '123', bar: null }, location);
    expect(newLocation).toEqual({ pathname: '/', search: '?ack=blech&foo=123' });
    expect(history.replace).toBeCalled();
    expect(history.push).not.toBeCalled();
  });
});

describe('replaceInUrlQuery', function () {
  it('replaces the value for the specified param in the query and calls replace in history', function () {
    var history = makeMockHistory();
    (0, _configureUrlQuery2.default)({ history: history });

    var location = { pathname: '/', search: '?bar=baz' };
    var newLocation = (0, _updateUrlQuery.replaceInUrlQuery)('foo', '123', location);
    expect(newLocation).toEqual({ pathname: '/', search: '?bar=baz&foo=123' });
    expect(history.replace).toBeCalled();
    expect(history.push).not.toBeCalled();
  });

  it('works with location that has query field', function () {
    var history = makeMockHistory();
    (0, _configureUrlQuery2.default)({ history: history });

    var location = { pathname: '/', query: { foo: '99', bar: 'baz' } };
    var newLocation = (0, _updateUrlQuery.replaceInUrlQuery)('foo', '123', location);
    expect(newLocation).toEqual({
      pathname: '/',
      query: { foo: '123', bar: 'baz' }
    });
    expect(history.replace).toBeCalled();
    expect(history.push).not.toBeCalled();
  });

  it('works with location read from history', function () {
    var history = makeMockHistory();
    (0, _configureUrlQuery2.default)({ history: history });

    history.location = { pathname: '/', query: { foo: '99', bar: 'baz' } };

    var newLocation = (0, _updateUrlQuery.replaceInUrlQuery)('foo', '123');
    expect(newLocation).toEqual({
      pathname: '/',
      query: { foo: '123', bar: 'baz' }
    });
    expect(history.replace).toBeCalled();
    expect(history.push).not.toBeCalled();
  });

  // TODO: would be good to have a test for window.location, but I can't seem to get
  // it working properly. See https://github.com/facebook/jest/issues/890
  // it('works with location read from window.location', () => {
  //   const history = makeMockHistory();
  //   configureUrlQuery({ history });
  //
  //   window.location.pathname = '/';
  //   window.location.search = '?bar=baz&foo=99';
  //
  //   const newLocation = replaceInUrlQuery('foo', '123');
  //   expect(newLocation).toEqual({ pathname: '/', search: '?bar=baz&foo=123' });
  //   expect(history.replace).toBeCalled();
  //   expect(history.push).not.toBeCalled();
  // });
});

describe('multiPushInUrlQuery', function () {
  it('replaces the values for the specified params in the query and calls push in history', function () {
    var history = makeMockHistory();
    (0, _configureUrlQuery2.default)({ history: history });

    var location = { pathname: '/', search: '?foo=99&bar=baz&ack=blech' };
    var newLocation = (0, _updateUrlQuery.multiPushInUrlQuery)({ foo: '123', bar: null }, location);
    expect(newLocation).toEqual({ pathname: '/', search: '?ack=blech&foo=123' });
    expect(history.push).toBeCalled();
    expect(history.replace).not.toBeCalled();
  });
});

describe('pushInUrlQuery', function () {
  it('replaces the value for the specified param in the query and calls push in history', function () {
    var history = makeMockHistory();
    (0, _configureUrlQuery2.default)({ history: history });

    var location = { pathname: '/', search: '?foo=99&bar=baz' };
    var newLocation = (0, _updateUrlQuery.pushInUrlQuery)('foo', '123', location);
    expect(newLocation).toEqual({ pathname: '/', search: '?bar=baz&foo=123' });
    expect(history.push).toBeCalled();
    expect(history.replace).not.toBeCalled();
  });
});

describe('updateUrlQueryMulti', function () {
  it('works with replace', function () {
    var history = makeMockHistory();
    (0, _configureUrlQuery2.default)({ history: history });

    var location = { pathname: '/', search: '?foo=99&bar=baz&blatt=david' };
    var newLocation = (0, _updateUrlQuery.updateUrlQueryMulti)(_UrlUpdateTypes2.default.replace, { bar: 'test', foo: '123' }, location);
    expect(newLocation).toEqual({ pathname: '/', search: '?bar=test&foo=123' });
    expect(history.replace).toBeCalled();
    expect(history.push).not.toBeCalled();
  });

  it('works with push', function () {
    var history = makeMockHistory();
    (0, _configureUrlQuery2.default)({ history: history });

    var location = { pathname: '/', search: '?foo=99&bar=baz&blatt=david' };
    var newLocation = (0, _updateUrlQuery.updateUrlQueryMulti)(_UrlUpdateTypes2.default.push, { bar: 'test', foo: '123' }, location);
    expect(newLocation).toEqual({ pathname: '/', search: '?bar=test&foo=123' });
    expect(history.push).toBeCalled();
    expect(history.replace).not.toBeCalled();
  });

  it('works with replaceIn', function () {
    var history = makeMockHistory();
    (0, _configureUrlQuery2.default)({ history: history });

    var location = { pathname: '/', search: '?foo=99&bar=baz&blatt=david' };
    var newLocation = (0, _updateUrlQuery.updateUrlQueryMulti)(_UrlUpdateTypes2.default.replaceIn, { bar: 'test', foo: '123' }, location);
    expect(newLocation).toEqual({
      pathname: '/',
      search: '?bar=test&blatt=david&foo=123'
    });
    expect(history.replace).toBeCalled();
    expect(history.push).not.toBeCalled();
  });

  it('works with pushIn', function () {
    var history = makeMockHistory();
    (0, _configureUrlQuery2.default)({ history: history });

    var location = { pathname: '/', search: '?foo=99&bar=baz&blatt=david' };
    var newLocation = (0, _updateUrlQuery.updateUrlQueryMulti)(_UrlUpdateTypes2.default.pushIn, { bar: 'test', foo: '123' }, location);
    expect(newLocation).toEqual({
      pathname: '/',
      search: '?bar=test&blatt=david&foo=123'
    });
    expect(history.push).toBeCalled();
    expect(history.replace).not.toBeCalled();
  });
});