Add namespacing for query params (#205)

* use qs utils to namespace query params

* refactor Lookup and SelectResource Steps to use PaginatedDataList

* preserve query params when adding new ones

* require namespace for QS Configs

__tests__/components/Lookup.test.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { createMemoryHistory } from 'history';
 import { mountWithContexts } from '../enzymeHelpers';
 import Lookup from '../../src/components/Lookup';
 import { _Lookup } from '../../src/components/Lookup/Lookup';
@@ -10,8 +11,8 @@ const mockColumns = [
 describe('<Lookup />', () => {
   test('initially renders succesfully', () => {
     mountWithContexts(
-      <_Lookup
-        lookup_header="Foo Bar"
+      <Lookup
+        lookupHeader="Foo Bar"
         name="fooBar"
         value={mockData}
         onLookupSave={() => { }}
@@ -25,8 +26,8 @@ describe('<Lookup />', () => {
 
   test('API response is formatted properly', (done) => {
     const wrapper = mountWithContexts(
-      <_Lookup
-        lookup_header="Foo Bar"
+      <Lookup
+        lookupHeader="Foo Bar"
         name="fooBar"
         value={mockData}
         onLookupSave={() => { }}
@@ -47,9 +48,9 @@ describe('<Lookup />', () => {
     const spy = jest.spyOn(_Lookup.prototype, 'handleModalToggle');
     const mockSelected = [{ name: 'foo', id: 1 }];
     const wrapper = mountWithContexts(
-      <_Lookup
+      <Lookup
         id="search"
-        lookup_header="Foo Bar"
+        lookupHeader="Foo Bar"
         name="fooBar"
         value={mockSelected}
         onLookupSave={() => { }}
@@ -74,17 +75,22 @@ describe('<Lookup />', () => {
   test('calls "toggleSelected" when a user changes a checkbox', (done) => {
     const spy = jest.spyOn(_Lookup.prototype, 'toggleSelected');
     const mockSelected = [{ name: 'foo', id: 1 }];
+    const data = {
+      results: [
+        { name: 'test instance', id: 1, url: '/foo' }
+      ],
+      count: 1,
+    };
     const wrapper = mountWithContexts(
-      <_Lookup
+      <Lookup
         id="search"
-        lookup_header="Foo Bar"
+        lookupHeader="Foo Bar"
         name="fooBar"
         value={mockSelected}
         onLookupSave={() => { }}
-        getItems={() => ({ data: { results: [{ name: 'test instance', id: 1 }] } })}
+        getItems={() => ({ data })}
         columns={mockColumns}
         sortedColumnKey="name"
-        handleHttpError={() => {}}
       />
     );
     setImmediate(() => {
@@ -99,17 +105,22 @@ describe('<Lookup />', () => {
   test('calls "toggleSelected" when remove icon is clicked', () => {
     const spy = jest.spyOn(_Lookup.prototype, 'toggleSelected');
     mockData = [{ name: 'foo', id: 1 }, { name: 'bar', id: 2 }];
+    const data = {
+      results: [
+        { name: 'test instance', id: 1, url: '/foo' }
+      ],
+      count: 1,
+    };
     const wrapper = mountWithContexts(
-      <_Lookup
+      <Lookup
         id="search"
-        lookup_header="Foo Bar"
+        lookupHeader="Foo Bar"
         name="fooBar"
         value={mockData}
         onLookupSave={() => { }}
-        getItems={() => { }}
+        getItems={() => ({ data })}
         columns={mockColumns}
         sortedColumnKey="name"
-        handleHttpError={() => {}}
       />
     );
     const removeIcon = wrapper.find('button[aria-label="close"]').first();
@@ -121,7 +132,7 @@ describe('<Lookup />', () => {
     mockData = [{ name: 'foo', id: 0 }, { name: 'bar', id: 1 }];
     const wrapper = mountWithContexts(
       <Lookup
-        lookup_header="Foo Bar"
+        lookupHeader="Foo Bar"
         onLookupSave={() => { }}
         value={mockData}
         selected={[]}
@@ -138,7 +149,7 @@ describe('<Lookup />', () => {
     mockData = [];
     const wrapper = mountWithContexts(
       <Lookup
-        lookup_header="Foo Bar"
+        lookupHeader="Foo Bar"
         onLookupSave={() => { }}
         value={mockData}
         getItems={() => { }}
@@ -166,11 +177,12 @@ describe('<Lookup />', () => {
     const onLookupSaveFn = jest.fn();
     const wrapper = mountWithContexts(
       <Lookup
-        lookup_header="Foo Bar"
+        lookupHeader="Foo Bar"
         name="fooBar"
         value={mockData}
         onLookupSave={onLookupSaveFn}
         getItems={() => { }}
+        sortedColumnKey="name"
       />
     ).find('Lookup');
     wrapper.instance().toggleSelected({
@@ -188,61 +200,31 @@ describe('<Lookup />', () => {
     }], 'fooBar');
   });
 
-  test('onSort sets state and calls getData ', () => {
-    const spy = jest.spyOn(_Lookup.prototype, 'getData');
+  test('should re-fetch data when URL params change', async () => {
+    const history = createMemoryHistory({
+      initialEntries: ['/organizations/add'],
+    });
+    const getItems = jest.fn();
     const wrapper = mountWithContexts(
       <_Lookup
-        lookup_header="Foo Bar"
+        lookupHeader="Foo Bar"
         onLookupSave={() => { }}
         value={mockData}
         selected={[]}
         columns={mockColumns}
         sortedColumnKey="name"
-        getItems={() => { }}
+        getItems={getItems}
         handleHttpError={() => {}}
+        location={{ history }}
       />
-    ).find('Lookup');
-    wrapper.instance().onSort('id', 'descending');
-    expect(wrapper.state('sortedColumnKey')).toEqual('id');
-    expect(wrapper.state('sortOrder')).toEqual('descending');
-    expect(spy).toHaveBeenCalled();
-  });
+    );
 
-  test('onSearch calls getData (through calling onSort)', () => {
-    const spy = jest.spyOn(_Lookup.prototype, 'getData');
-    const wrapper = mountWithContexts(
-      <_Lookup
-        lookup_header="Foo Bar"
-        onLookupSave={() => { }}
-        value={mockData}
-        selected={[]}
-        columns={mockColumns}
-        sortedColumnKey="name"
-        getItems={() => { }}
-        handleHttpError={() => {}}
-      />
-    ).find('Lookup');
-    wrapper.instance().onSearch();
-    expect(spy).toHaveBeenCalled();
-  });
-
-  test('onSetPage sets state and calls getData ', () => {
-    const spy = jest.spyOn(_Lookup.prototype, 'getData');
-    const wrapper = mountWithContexts(
-      <_Lookup
-        lookup_header="Foo Bar"
-        onLookupSave={() => { }}
-        value={mockData}
-        selected={[]}
-        columns={mockColumns}
-        sortedColumnKey="name"
-        getItems={() => { }}
-        handleHttpError={() => {}}
-      />
-    ).find('Lookup');
-    wrapper.instance().onSetPage(2, 10);
-    expect(wrapper.state('page')).toEqual(2);
-    expect(wrapper.state('page_size')).toEqual(10);
-    expect(spy).toHaveBeenCalled();
+    expect(getItems).toHaveBeenCalledTimes(1);
+    history.push('organizations/add?page=2');
+    wrapper.setProps({
+      location: { history },
+    });
+    wrapper.update();
+    expect(getItems).toHaveBeenCalledTimes(2);
   });
 });

__tests__/components/PaginatedDataList/PaginatedDataList.test.jsx

@@ -12,6 +12,12 @@ const mockData = [
   { id: 5, name: 'five', url: '/org/team/5' },
 ];
 
+const qsConfig = {
+  namespace: 'item',
+  defaultParams: { page: 1, page_size: 5 },
+  integerFields: [],
+};
+
 describe('<PaginatedDataList />', () => {
   afterEach(() => {
     jest.restoreAllMocks();
@@ -27,11 +33,11 @@ describe('<PaginatedDataList />', () => {
           page_size: 5,
           order_by: 'name',
         }}
+        qsConfig={qsConfig}
       />
     );
   });
 
-  // should navigate when datalisttoolbar changes sorting
   test('should navigate when DataListToolbar calls onSort prop', async () => {
     const history = createMemoryHistory({
       initialEntries: ['/organizations/1/teams'],
@@ -45,6 +51,7 @@ describe('<PaginatedDataList />', () => {
           page_size: 5,
           order_by: 'name',
         }}
+        qsConfig={qsConfig}
       />, { context: { router: { history } } }
     );
 
@@ -52,7 +59,7 @@ describe('<PaginatedDataList />', () => {
     expect(toolbar.prop('sortedColumnKey')).toEqual('name');
     expect(toolbar.prop('sortOrder')).toEqual('ascending');
     toolbar.prop('onSort')('name', 'descending');
-    expect(history.location.search).toEqual('?order_by=-name');
+    expect(history.location.search).toEqual('?item.order_by=-name');
     await sleep(0);
     wrapper.update();
 
@@ -61,7 +68,7 @@ describe('<PaginatedDataList />', () => {
     // fixing after #147 is done:
     // expect(toolbar.prop('sortOrder')).toEqual('descending');
     toolbar.prop('onSort')('name', 'ascending');
-    expect(history.location.search).toEqual('?order_by=name');
+    expect(history.location.search).toEqual('?item.order_by=name');
   });
 
   test('should navigate to page when Pagination calls onSetPage prop', () => {
@@ -77,14 +84,15 @@ describe('<PaginatedDataList />', () => {
           page_size: 5,
           order_by: 'name',
         }}
+        qsConfig={qsConfig}
       />, { context: { router: { history } } }
     );
 
     const pagination = wrapper.find('Pagination');
     pagination.prop('onSetPage')(2, 5);
-    expect(history.location.search).toEqual('?page=2&page_size=5');
+    expect(history.location.search).toEqual('?item.page=2&item.page_size=5');
     wrapper.update();
     pagination.prop('onSetPage')(1, 25);
-    expect(history.location.search).toEqual('?page=1&page_size=25');
+    expect(history.location.search).toEqual('?item.page=1&item.page_size=25');
   });
 });

__tests__/components/SelectResourceStep.test.jsx

@@ -1,7 +1,9 @@
 import React from 'react';
+import { createMemoryHistory } from 'history';
 import { shallow } from 'enzyme';
 import { mountWithContexts } from '../enzymeHelpers';
-import SelectResourceStep from '../../src/components/AddRole/SelectResourceStep';
+import { sleep } from '../testUtils';
+import SelectResourceStep, { _SelectResourceStep } from '../../src/components/AddRole/SelectResourceStep';
 
 describe('<SelectResourceStep />', () => {
   const columns = [
@@ -21,13 +23,14 @@ describe('<SelectResourceStep />', () => {
       />
     );
   });
+
   test('fetches resources on mount', async () => {
     const handleSearch = jest.fn().mockResolvedValue({
       data: {
         count: 2,
         results: [
-          { id: 1, username: 'foo' },
-          { id: 2, username: 'bar' }
+          { id: 1, username: 'foo', url: 'item/1' },
+          { id: 2, username: 'bar', url: 'item/2' }
         ]
       }
     });
@@ -46,102 +49,71 @@ describe('<SelectResourceStep />', () => {
       page_size: 5
     });
   });
+
   test('readResourceList properly adds rows to state', async () => {
     const selectedResourceRows = [
-      {
-        id: 1,
-        username: 'foo'
-      }
+      { id: 1, username: 'foo', url: 'item/1' }
     ];
     const handleSearch = jest.fn().mockResolvedValue({
       data: {
         count: 2,
         results: [
-          { id: 1, username: 'foo' },
-          { id: 2, username: 'bar' }
+          { id: 1, username: 'foo', url: 'item/1' },
+          { id: 2, username: 'bar', url: 'item/2' }
         ]
       }
     });
+    const history = createMemoryHistory({
+      initialEntries: ['/organizations/1/access?resource.page=1&resource.order_by=-username'],
+    });
     const wrapper = await mountWithContexts(
-      <SelectResourceStep
+      <_SelectResourceStep
         columns={columns}
         displayKey="username"
         onRowClick={() => {}}
         onSearch={handleSearch}
         selectedResourceRows={selectedResourceRows}
         sortedColumnKey="username"
+        location={history.location}
       />
     ).find('SelectResourceStep');
-    await wrapper.instance().readResourceList({
-      page: 1,
-      order_by: '-username'
-    });
+    await wrapper.instance().readResourceList();
     expect(handleSearch).toHaveBeenCalledWith({
       order_by: '-username',
-      page: 1
+      page: 1,
+      page_size: 5,
     });
     expect(wrapper.state('resources')).toEqual([
-      { id: 1, username: 'foo' },
-      { id: 2, username: 'bar' }
+      { id: 1, username: 'foo', url: 'item/1' },
+      { id: 2, username: 'bar', url: 'item/2' }
     ]);
   });
-  test('handleSetPage calls readResourceList with correct params', () => {
-    const spy = jest.spyOn(SelectResourceStep.prototype, 'readResourceList');
-    const wrapper = mountWithContexts(
-      <SelectResourceStep
-        columns={columns}
-        displayKey="username"
-        onRowClick={() => {}}
-        onSearch={() => {}}
-        selectedResourceRows={[]}
-        sortedColumnKey="username"
-      />
-    ).find('SelectResourceStep');
-    wrapper.setState({ sortOrder: 'descending' });
-    wrapper.instance().handleSetPage(2);
-    expect(spy).toHaveBeenCalledWith({ page: 2, page_size: 5, order_by: '-username' });
-    wrapper.setState({ sortOrder: 'ascending' });
-    wrapper.instance().handleSetPage(2);
-    expect(spy).toHaveBeenCalledWith({ page: 2, page_size: 5, order_by: 'username' });
-  });
-  test('handleSort calls readResourceList with correct params', () => {
-    const spy = jest.spyOn(SelectResourceStep.prototype, 'readResourceList');
-    const wrapper = mountWithContexts(
-      <SelectResourceStep
-        columns={columns}
-        displayKey="username"
-        onRowClick={() => {}}
-        onSearch={() => {}}
-        selectedResourceRows={[]}
-        sortedColumnKey="username"
-      />
-    ).find('SelectResourceStep');
-    wrapper.instance().handleSort('username', 'descending');
-    expect(spy).toHaveBeenCalledWith({ page: 1, page_size: 5, order_by: '-username' });
-    wrapper.instance().handleSort('username', 'ascending');
-    expect(spy).toHaveBeenCalledWith({ page: 1, page_size: 5, order_by: 'username' });
-  });
-  test('clicking on row fires callback with correct params', () => {
+
+  test('clicking on row fires callback with correct params', async () => {
     const handleRowClick = jest.fn();
+    const data = {
+      count: 2,
+      results: [
+        { id: 1, username: 'foo', url: 'item/1' },
+        { id: 2, username: 'bar', url: 'item/2' }
+      ]
+    };
     const wrapper = mountWithContexts(
       <SelectResourceStep
         columns={columns}
         displayKey="username"
         onRowClick={handleRowClick}
-        onSearch={() => {}}
+        onSearch={() => ({ data })}
         selectedResourceRows={[]}
         sortedColumnKey="username"
       />
     );
-    const selectResourceStepWrapper = wrapper.find('SelectResourceStep');
-    selectResourceStepWrapper.setState({
-      resources: [
-        { id: 1, username: 'foo' }
-      ]
-    });
+    await sleep(0);
+    wrapper.update();
     const checkboxListItemWrapper = wrapper.find('CheckboxListItem');
-    expect(checkboxListItemWrapper.length).toBe(1);
-    checkboxListItemWrapper.first().find('input[type="checkbox"]').simulate('change', { target: { checked: true } });
-    expect(handleRowClick).toHaveBeenCalledWith({ id: 1, username: 'foo' });
+    expect(checkboxListItemWrapper.length).toBe(2);
+    checkboxListItemWrapper.first().find('input[type="checkbox"]')
+      .simulate('change', { target: { checked: true } });
+    expect(handleRowClick).toHaveBeenCalledWith(data.results[0]);
   });
 });

__tests__/enzymeHelpers.jsx

@@ -79,30 +79,31 @@ const defaultContexts = {
   dialog: {}
 };
 
-const providers = {
-  config: ConfigProvider,
-  network: _NetworkProvider,
-  dialog: RootDialogProvider,
-};
-
 function wrapContexts (node, context) {
-  let wrapped = node;
-  let isFirst = true;
-  Object.keys(providers).forEach(key => {
-    if (context[key]) {
-      const Provider = providers[key];
-      wrapped = (
-        <Provider
-          value={context[key]}
-          i18n={isFirst ? defaultContexts.linguiPublisher.i18n : null}
-        >
-          {wrapped}
-        </Provider>
+  const { config, network, dialog } = context;
+  class Wrap extends React.Component {
+    render () {
+      // eslint-disable-next-line react/no-this-in-sfc
+      const { children, ...props } = this.props;
+      const component = React.cloneElement(children, props);
+      return (
+        <RootDialogProvider value={dialog}>
+          <_NetworkProvider value={network}>
+            <ConfigProvider
+              value={config}
+              i18n={defaultContexts.linguiPublisher.i18n}
+            >
+              {component}
+            </ConfigProvider>
+          </_NetworkProvider>
+        </RootDialogProvider>
       );
-      isFirst = false;
     }
-  });
-  return wrapped;
+  }
+
+  return (
+    <Wrap>{node}</Wrap>
+  );
 }
 
 function applyDefaultContexts (context) {

__tests__/enzymeHelpers.test.jsx

@@ -191,4 +191,19 @@ describe('mountWithContexts', () => {
       expect(dialog.setRootDialogMessage).toHaveBeenCalledWith('error');
     });
   });
+
+  it('should set props on wrapped component', () => {
+    function Component ({ text }) {
+      return (<div>{text}</div>);
+    }
+
+    const wrapper = mountWithContexts(
+      <Component text="foo" />
+    );
+    expect(wrapper.find('div').text()).toEqual('foo');
+    wrapper.setProps({
+      text: 'bar'
+    });
+    expect(wrapper.find('div').text()).toEqual('bar');
+  });
 });

__tests__/pages/Organizations/screens/Organization/OrganizationTeams.test.jsx

@@ -1,7 +1,5 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import { Router } from 'react-router-dom';
-import { createMemoryHistory } from 'history';
 import { mountWithContexts } from '../../../../enzymeHelpers';
 import { sleep } from '../../../../testUtils';
 import OrganizationTeams, { _OrganizationTeams } from '../../../../../src/pages/Organizations/screens/Organization/OrganizationTeams';
@@ -68,65 +66,14 @@ describe('<OrganizationTeams />', () => {
     const list = wrapper.find('PaginatedDataList');
     expect(list.prop('items')).toEqual(listData.data.results);
     expect(list.prop('itemCount')).toEqual(listData.data.count);
-    expect(list.prop('queryParams')).toEqual({
-      page: 1,
-      page_size: 5,
-      order_by: 'name',
-    });
-  });
-
-  test('should pass queryParams to PaginatedDataList', async () => {
-    const page1Data = listData;
-    const page2Data = {
-      data: {
-        count: 7,
-        results: [
-          { id: 6, name: 'six', url: '/org/team/6' },
-          { id: 7, name: 'seven', url: '/org/team/7' },
-        ]
-      }
-    };
-    const readOrganizationTeamsList = jest.fn();
-    readOrganizationTeamsList.mockReturnValueOnce(page1Data);
-    const history = createMemoryHistory({
-      initialEntries: ['/organizations/1/teams'],
-    });
-    const wrapper = mountWithContexts(
-      <Router history={history}>
-        <OrganizationTeams
-          id={1}
-          searchString=""
-        />
-      </Router>,
-      { context: {
-        network: {
-          api: { readOrganizationTeamsList },
-          handleHttpError: () => {}
-        },
-        router: false,
-      } }
-    );
-
-    await sleep(0);
-    wrapper.update();
-
-    const list = wrapper.find('PaginatedDataList');
-    expect(list.prop('queryParams')).toEqual({
-      page: 1,
-      page_size: 5,
-      order_by: 'name',
-    });
-
-    readOrganizationTeamsList.mockReturnValueOnce(page2Data);
-    history.push('/organizations/1/teams?page=2');
-
-    await sleep(0);
-    wrapper.update();
-    const list2 = wrapper.find('PaginatedDataList');
-    expect(list2.prop('queryParams')).toEqual({
-      page: 2,
-      page_size: 5,
-      order_by: 'name',
+    expect(list.prop('qsConfig')).toEqual({
+      namespace: 'team',
+      defaultParams: {
+        page: 1,
+        page_size: 5,
+        order_by: 'name',
+      },
+      integerFields: ['page', 'page_size'],
     });
   });
 });

__tests__/pages/Organizations/screens/OrganizationsList.test.jsx

@@ -146,24 +146,6 @@ describe('<OrganizationsList />', () => {
     expect(fetchOrgs).toBeCalled();
   });
 
-  test('url updates properly', () => {
-    const history = createMemoryHistory({
-      initialEntries: ['organizations?order_by=name&page=1&page_size=5'],
-    });
-    wrapper = mountWithContexts(
-      <OrganizationsList />, {
-        context: { router: { history } }
-      }
-    );
-    const component = wrapper.find('OrganizationsList');
-    component.instance().updateUrl({
-      page: 1,
-      page_size: 5,
-      order_by: 'modified'
-    });
-    expect(history.location.search).toBe('?order_by=modified&page=1&page_size=5');
-  });
-
   test('error is thrown when org not successfully deleted from api', async () => {
     const history = createMemoryHistory({
       initialEntries: ['organizations?order_by=name&page=1&page_size=5'],

__tests__/util/qs.test.js

@@ -1,4 +1,11 @@
-import { encodeQueryString, parseQueryString } from '../../src/util/qs';
+import {
+  encodeQueryString,
+  parseQueryString,
+  getQSConfig,
+  parseNamespacedQueryString,
+  encodeNamespacedQueryString,
+  updateNamespacedQueryString,
+} from '../../src/util/qs';
 
 describe('qs (qs.js)', () => {
   test('encodeQueryString returns the expected queryString', () => {
@@ -23,27 +30,184 @@ describe('qs (qs.js)', () => {
     expect(encodeQueryString(vals)).toEqual('order_by=name');
   });
 
-  test('parseQueryString returns the expected queryParams', () => {
-    [
-      ['order_by=name&page=1&page_size=5', ['page', 'page_size'], { order_by: 'name', page: 1, page_size: 5 }],
-      ['order_by=name&page=1&page_size=5', ['page_size'], { order_by: 'name', page: '1', page_size: 5 }],
-    ]
-      .forEach(([queryString, integerFields, expectedQueryParams]) => {
-        const actualQueryParams = parseQueryString(queryString, integerFields);
+  describe('parseQueryString', () => {
+    test('parseQueryString returns the expected queryParams', () => {
+      [
+        ['order_by=name&page=1&page_size=5', ['page', 'page_size'], { order_by: 'name', page: 1, page_size: 5 }],
+        ['order_by=name&page=1&page_size=5', ['page_size'], { order_by: 'name', page: '1', page_size: 5 }],
+      ]
+        .forEach(([queryString, integerFields, expectedQueryParams]) => {
+          const actualQueryParams = parseQueryString(queryString, integerFields);
 
-        expect(actualQueryParams).toEqual(expectedQueryParams);
-      });
-  });
-
-  test('parseQueryString should strip leading "?"', () => {
-    expect(parseQueryString('?foo=bar&order_by=win')).toEqual({
-      foo: 'bar',
-      order_by: 'win',
+          expect(actualQueryParams).toEqual(expectedQueryParams);
+        });
     });
 
-    expect(parseQueryString('foo=bar&order_by=?win')).toEqual({
-      foo: 'bar',
-      order_by: '?win',
+    test('parseQueryString should strip leading "?"', () => {
+      expect(parseQueryString('?foo=bar&order_by=win')).toEqual({
+        foo: 'bar',
+        order_by: 'win',
+      });
+
+      expect(parseQueryString('foo=bar&order_by=?win')).toEqual({
+        foo: 'bar',
+        order_by: '?win',
+      });
+    });
+
+    test('should return empty object if no values', () => {
+      expect(parseQueryString('')).toEqual({});
+    });
+  });
+
+  test('should get default QS config object', () => {
+    expect(getQSConfig('organization')).toEqual({
+      namespace: 'organization',
+      defaultParams: { page: 1, page_size: 5, order_by: 'name' },
+      integerFields: ['page', 'page_size'],
+    });
+  });
+
+  test('should throw if no namespace given', () => {
+    expect(() => getQSConfig()).toThrow();
+  });
+
+  test('should build configured QS config object', () => {
+    const defaults = {
+      page: 1,
+      page_size: 15,
+    };
+    expect(getQSConfig('inventory', defaults)).toEqual({
+      namespace: 'inventory',
+      defaultParams: { page: 1, page_size: 15 },
+      integerFields: ['page', 'page_size'],
+    });
+  });
+
+  describe('parseNamespacedQueryString', () => {
+    test('should get query params', () => {
+      const config = {
+        namespace: null,
+        defaultParams: { page: 1, page_size: 15 },
+        integerFields: ['page', 'page_size'],
+      };
+      const query = '?foo=bar&page=3';
+      expect(parseNamespacedQueryString(config, query)).toEqual({
+        foo: 'bar',
+        page: 3,
+        page_size: 15,
+      });
+    });
+
+    test('should get query params with correct integer fields', () => {
+      const config = {
+        namespace: null,
+        defaultParams: {},
+        integerFields: ['page', 'foo'],
+      };
+      const query = '?foo=4&bar=5';
+      expect(parseNamespacedQueryString(config, query)).toEqual({
+        foo: 4,
+        bar: '5',
+      });
+    });
+
+    test('should get namespaced query params', () => {
+      const config = {
+        namespace: 'inventory',
+        defaultParams: { page: 1, page_size: 5 },
+        integerFields: ['page', 'page_size'],
+      };
+      const query = '?inventory.page=2&inventory.order_by=name&other=15';
+      expect(parseNamespacedQueryString(config, query)).toEqual({
+        page: 2,
+        order_by: 'name',
+        page_size: 5,
+      });
+    });
+
+    test('should exclude other namespaced query params', () => {
+      const config = {
+        namespace: 'inventory',
+        defaultParams: { page: 1, page_size: 5 },
+        integerFields: ['page', 'page_size'],
+      };
+      const query = '?inventory.page=2&inventory.order_by=name&foo.other=15';
+      expect(parseNamespacedQueryString(config, query)).toEqual({
+        page: 2,
+        order_by: 'name',
+        page_size: 5,
+      });
+    });
+
+    test('should exclude defaults if includeDefaults is false', () => {
+      const config = {
+        namespace: null,
+        defaultParams: { page: 1, page_size: 15 },
+        integerFields: ['page', 'page_size'],
+      };
+      const query = '?foo=bar&page=3';
+      expect(parseNamespacedQueryString(config, query, false)).toEqual({
+        foo: 'bar',
+        page: 3,
+      });
+    });
+  });
+
+  describe('encodeNamespacedQueryString', () => {
+    test('should encode params without namespace', () => {
+      const config = {
+        namespace: null,
+        defaultParams: { page: 1, page_size: 5 },
+        integerFields: ['page', 'page_size'],
+      };
+      const params = {
+        page: 1,
+        order_by: 'name',
+      };
+      const qs = 'order_by=name&page=1';
+      expect(encodeNamespacedQueryString(config, params)).toEqual(qs);
+    });
+
+    test('should encode params with namespace', () => {
+      const config = {
+        namespace: 'inventory',
+        defaultParams: { page: 1, page_size: 5 },
+        integerFields: ['page', 'page_size'],
+      };
+      const params = {
+        page: 1,
+        order_by: 'name',
+      };
+      const qs = 'inventory.order_by=name&inventory.page=1';
+      expect(encodeNamespacedQueryString(config, params)).toEqual(qs);
+    });
+  });
+
+  describe('updateNamespacedQueryString', () => {
+    test('should return current values', () => {
+      const qs = '?foo=bar&inventory.page=1';
+      const updated = updateNamespacedQueryString({}, qs, {});
+      expect(updated).toEqual('foo=bar&inventory.page=1');
+    });
+
+    test('should update new values', () => {
+      const qs = '?foo=bar&inventory.page=1';
+      const updated = updateNamespacedQueryString({}, qs, { foo: 'baz' });
+      expect(updated).toEqual('foo=baz&inventory.page=1');
+    });
+
+    test('should add new values', () => {
+      const qs = '?foo=bar&inventory.page=1';
+      const updated = updateNamespacedQueryString({}, qs, { page: 5 });
+      expect(updated).toEqual('foo=bar&inventory.page=1&page=5');
+    });
+
+    test('should update namespaced values', () => {
+      const qs = '?foo=bar&inventory.page=1';
+      const config = { namespace: 'inventory' };
+      const updated = updateNamespacedQueryString(config, qs, { page: 2 });
+      expect(updated).toEqual('foo=bar&inventory.page=2');
     });
   });
 });