@jetshop/ui 5.13.12-0 → 5.14.0

package/Search/SearchAutoCompleteContainer.test.js

@@ -1,460 +1,460 @@
-import renderWithRouter from '@jetshop/core/test-utils/renderWithRouter';
-import React from 'react';
-import { MockedProvider } from '@apollo/react-testing';
-import { Route, Switch } from 'react-router';
-import {
-  cleanup,
-  fireEvent,
-  wait,
-  waitForElement
-} from '@testing-library/react';
-import SearchAutoCompleteContainer from './SearchAutoCompleteContainer';
-import AutocompleteQuery from './AutocompleteQuery.gql';
-import { ShopConfigContext } from '@jetshop/core/components/ConfigProvider';
-
-describe('SearchFieldBehaviour', () => {
-  it('renders child as fn with args', () => {
-    const { renderArg } = setup();
-    expect(renderArg).toMatchSnapshot();
-  });
-
-  it('allows an initialValue to be set via props', async () => {
-    const { renderArg } = setup({ initialValue: 'howdy neighbour' });
-
-    expect(renderArg.term).toBe('howdy neighbour');
-  });
-
-  it('updates term param to match the input field value', () => {
-    const { input, renderArg } = setup();
-
-    fireEvent.change(input, { target: { value: 'boots' } });
-
-    expect(renderArg.term).toBe('boots');
-  });
-
-  it('updates the debouncedTerm after a delay', async () => {
-    // This also tests that the state isn't updated after the component unmounts
-    // — we'd receive a warning from React
-    const { input, renderArg } = setup();
-
-    fireEvent.change(input, { target: { value: 'cats' } });
-
-    await wait(() => expect(renderArg.debouncedTerm).toEqual('cats'));
-  });
-
-  it('executes search and returns results after debouncedTerm is set', async () => {
-    const { input, childrenSpy, renderArg } = setup();
-
-    fireEvent.change(input, { target: { value: 'autoc' } });
-
-    await wait(() => expect(renderArg.debouncedTerm).toEqual('autoc'));
-
-    // The child fn should have been called with loading set to true at some
-    // point after the query was made
-    await wait(() =>
-      expect(childrenSpy).toHaveBeenCalledWith(
-        expect.objectContaining({
-          loading: true
-        })
-      )
-    );
-
-    // Wait for loading to finish
-    await wait(() =>
-      expect(childrenSpy).toHaveBeenLastCalledWith(
-        expect.objectContaining({
-          loading: false
-        })
-      )
-    );
-
-    // and then it should be called again with the actual results
-    expect(childrenSpy).lastCalledWith(
-      expect.objectContaining({
-        loading: false,
-        result: {
-          products: {
-            result: expect.arrayContaining([
-              expect.objectContaining({
-                id: 123
-              }),
-              expect.objectContaining({
-                id: 321
-              })
-            ])
-          }
-        }
-      })
-    );
-
-    fireEvent.change(input, { target: { value: 'autocomplet' } });
-
-    await wait(() => expect(renderArg.debouncedTerm).toEqual('autocomplet'));
-
-    expect(childrenSpy).toHaveBeenLastCalledWith(
-      expect.objectContaining({
-        result: {
-          products: {
-            result: expect.arrayContaining([
-              expect.objectContaining({
-                id: 123
-              }),
-              expect.not.objectContaining({
-                id: 321
-              })
-            ])
-          }
-        }
-      })
-    );
-  });
-
-  it('updates the isDirty param when the input is dirty', async () => {
-    const { childrenSpy, input, renderArg } = setup();
-
-    expect(childrenSpy).toHaveBeenCalledTimes(1);
-
-    expect(renderArg.isDirty).toBe(false);
-    fireEvent.change(input, { target: { value: 'mock' } });
-    expect(childrenSpy).toHaveBeenCalledTimes(2);
-    expect(renderArg.isDirty).toBe(true);
-
-    fireEvent.change(input, { target: { value: '' } });
-    expect(renderArg.isDirty).toBe(false);
-  });
-
-  it('correctly sets isDirty if the initialValue prop is used', () => {
-    const { input, renderArg } = setup({ initialValue: 'howdy' });
-
-    expect(renderArg.isDirty).toBe(false);
-    fireEvent.change(input, { target: { value: 'boots' } });
-    expect(renderArg.isDirty).toBe(true);
-    // An empty string is 'dirty' if initialValue is not an empty string…
-    fireEvent.change(input, { target: { value: '' } });
-    expect(renderArg.isDirty).toBe(true);
-    fireEvent.change(input, { target: { value: 'howdy' } });
-    expect(renderArg.isDirty).toBe(false);
-  });
-
-  it('automatically focuses the input on mount if `focusOnLoad` is set', () => {
-    const { input } = setup();
-    expect(input).not.toHaveFocus();
-
-    cleanup();
-
-    const { input: focusedInput } = setup({ focusOnLoad: true });
-    expect(focusedInput).toHaveFocus();
-  });
-
-  it('accepts a custom onBlur event on getInputProps', async () => {
-    const mockBlurFn = jest.fn();
-    const { input } = setup({}, null, {
-      getInputPropsOptions: { onBlur: mockBlurFn }
-    });
-
-    fireEvent.focus(input);
-    await wait();
-    fireEvent.blur(input);
-
-    expect(mockBlurFn).toHaveBeenCalledTimes(1);
-  });
-
-  it('accepts a custom onFocus event on getInputProps', () => {
-    const mockFocusFn = jest.fn();
-    const { input } = setup({}, null, {
-      getInputPropsOptions: { onFocus: mockFocusFn }
-    });
-
-    fireEvent.focus(input);
-
-    expect(mockFocusFn).toHaveBeenCalledTimes(1);
-  });
-
-  it('provides the inputs ref via render props ', () => {
-    const { input, renderArg } = setup();
-
-    expect(renderArg.inputRef).toEqual(
-      expect.objectContaining({
-        current: input
-      })
-    );
-  });
-
-  it('allows focus to be controlled via render prop `updateFocus`', () => {
-    const { input, renderArg } = setup();
-
-    fireEvent.focus(input);
-    renderArg.updateFocus('blur');
-    expect(input).not.toHaveFocus();
-    renderArg.updateFocus('focus');
-    expect(input).toHaveFocus();
-  });
-
-  describe('`isOpen` render prop fn', () => {
-    test('is true when the search field has focus', () => {
-      const { input, renderArg } = setup();
-
-      fireEvent.focus(input);
-
-      expect(renderArg.isOpen).toBe(true);
-    });
-
-    test('is true when the search field has focus', () => {
-      const { input, renderArg } = setup();
-
-      fireEvent.focus(input);
-
-      expect(renderArg.isOpen).toBe(true);
-    });
-
-    test('is false when the search field does not have focus', () => {
-      const { input, renderArg } = setup();
-
-      expect(renderArg.isOpen).toBe(false);
-
-      fireEvent.focus(input);
-      fireEvent.blur(input);
-      expect(renderArg.isOpen).toBe(false);
-    });
-
-    test('is true when the search field loses focus and the `term` has changed', async () => {
-      const { input, renderArg } = setup();
-
-      fireEvent.focus(input);
-      fireEvent.change(input, { target: { value: 'bootsandcats' } });
-      fireEvent.blur(input);
-      await wait();
-      expect(renderArg.isOpen).toBe(true);
-    });
-  });
-
-  describe('registers cancel button behaviour on the element using `getCancelProps()`', () => {
-    test('that clears the input value when clicked', () => {
-      const { input, cancel, renderArg } = setup();
-
-      fireEvent.change(input, { target: { value: 'boots' } });
-      expect(renderArg.term).toBe('boots');
-
-      fireEvent.click(cancel);
-
-      expect(renderArg.term).toBe('');
-    });
-
-    test('that accepts onClick handlers passed in to it', () => {
-      const mockClickFn = jest.fn();
-      const { cancel } = setup({}, null, {
-        getCancelPropsOptions: { onClick: mockClickFn }
-      });
-
-      fireEvent.click(cancel);
-
-      expect(mockClickFn).toHaveBeenCalledTimes(1);
-    });
-  });
-
-  describe('triggers a full search', () => {
-    test('when pressing enter key', async () => {
-      const { input, getByText } = setup();
-      fireEvent.focus(input);
-      fireEvent.change(input, { target: { value: 'boots' } });
-
-      fireEvent.keyDown(input, { key: 'Enter' });
-
-      await waitForElement(() => getByText('you searched for ?term=boots'));
-    });
-    test('when clicking button with `triggerSearch` bound', async () => {
-      const { input, submit, getByText } = setup();
-      fireEvent.focus(input);
-      fireEvent.change(input, { target: { value: 'boots' } });
-
-      fireEvent.click(submit);
-
-      await waitForElement(() => getByText('you searched for ?term=boots'));
-    });
-    test('with the value passed to `triggerSearch` if one is given', async () => {
-      const { input, submit, getByText } = setup({}, null, {
-        getSubmitOpts: 'search this!'
-      });
-      fireEvent.focus(input);
-      fireEvent.change(input, { target: { value: 'boots' } });
-
-      fireEvent.click(submit);
-
-      await waitForElement(() => getByText(/search this!/i));
-    });
-    test('sets `isOpen` to false when triggering a full search', async () => {
-      const { input, renderArg } = setup();
-      fireEvent.change(input, { target: { value: 'boots' } });
-      fireEvent.focus(input);
-      expect(renderArg.isOpen).toBe(true);
-      fireEvent.keyDown(input, { key: 'Enter' });
-      expect(renderArg.isOpen).toBe(false);
-    });
-  });
-
-  it('calls passed onCancel cb when search is cancelled', () => {
-    const mockCancelCb = jest.fn();
-    const { input, cancel } = setup({ onCancel: mockCancelCb });
-
-    fireEvent.change(input, { target: { value: 'hello' } });
-    fireEvent.click(cancel);
-
-    expect(mockCancelCb).toHaveBeenCalledTimes(1);
-  });
-
-  it('calls passed onSubmit cb when search is submitted', () => {
-    const mockSubmitFn = jest.fn();
-    const { input, submit } = setup({ onSubmit: mockSubmitFn });
-
-    fireEvent.change(input, { target: { value: 'hello' } });
-    fireEvent.click(submit);
-
-    expect(mockSubmitFn).toHaveBeenCalledTimes(1);
-
-    fireEvent.change(input, { target: { value: 'wow' } });
-    fireEvent.focus(input);
-    fireEvent.keyDown(input, { key: 'Enter' });
-
-    expect(mockSubmitFn).toHaveBeenCalledTimes(2);
-  });
-});
-
-const mocks = [
-  {
-    request: {
-      query: AutocompleteQuery,
-      variables: {
-        term: 'autoc'
-      }
-    },
-    result: {
-      data: {
-        searchAutoComplete: {
-          products: {
-            result: [
-              {
-                name: 'autocomplete',
-                id: 123,
-                articleNumber: 123,
-                primaryRoute: {
-                  id: 4353,
-                  slug: 'autocompleted-product',
-                  path: '/product/autocompleted-product'
-                }
-              },
-              {
-                name: 'autocomputed',
-                id: 321,
-                articleNumber: 321,
-                primaryRoute: {
-                  id: 2737,
-                  slug: 'autocomputed-product',
-                  path: '/product/autocomputed-product'
-                }
-              }
-            ]
-          }
-        }
-      }
-    }
-  },
-  {
-    request: {
-      query: AutocompleteQuery,
-      variables: {
-        term: 'autocomplet'
-      }
-    },
-    result: {
-      data: {
-        searchAutoComplete: {
-          products: {
-            result: [
-              {
-                name: 'autocomplete',
-                id: 123,
-                articleNumber: 123,
-                primaryRoute: {
-                  id: 345343,
-                  slug: 'autocompleted-product',
-                  path: '/product/autocompleted-product'
-                }
-              }
-            ]
-          }
-        }
-      }
-    }
-  }
-];
-
-function setup(
-  containerProps = {},
-  renderFn,
-  {
-    getInputPropsOptions = {},
-    getCancelPropsOptions = {},
-    getSubmitOpts = undefined
-  } = {}
-) {
-  const renderArg = {};
-
-  const childrenSpy = jest.fn(controllerArg => {
-    Object.assign(renderArg, controllerArg);
-
-    if (typeof renderFn === 'function') return renderFn(controllerArg);
-
-    return (
-      <>
-        <input
-          data-testid="default-input-field"
-          {...controllerArg.getInputProps(getInputPropsOptions)}
-        />
-        <button
-          data-testid="cancel-button"
-          {...controllerArg.getCancelProps(getCancelPropsOptions)}
-        >
-          Cancel
-        </button>
-        <button
-          data-testid="submit-button"
-          onClick={() => renderArg.triggerSearch(getSubmitOpts)}
-        >
-          Submit
-        </button>
-        <Switch>
-          <Route
-            path="/search"
-            component={props => {
-              return <div>you searched for {props.location.search}</div>;
-            }}
-          />
-        </Switch>
-      </>
-    );
-  });
-
-  const utils = renderWithRouter(
-    <ShopConfigContext.Provider
-      value={{ routes: { search: { path: '/search' } } }}
-    >
-      <MockedProvider mocks={mocks} addTypename={false}>
-        <SearchAutoCompleteContainer
-          autocompleteQuery={AutocompleteQuery}
-          {...containerProps}
-        >
-          {childrenSpy}
-        </SearchAutoCompleteContainer>
-      </MockedProvider>
-    </ShopConfigContext.Provider>
-  );
-
-  return {
-    ...utils,
-    input: utils.queryByTestId('default-input-field'),
-    cancel: utils.queryByTestId('cancel-button'),
-    submit: utils.queryByTestId('submit-button'),
-    childrenSpy,
-    renderArg
-  };
-}
+import renderWithRouter from '@jetshop/core/test-utils/renderWithRouter';
+import React from 'react';
+import { MockedProvider } from '@apollo/react-testing';
+import { Route, Switch } from 'react-router';
+import {
+  cleanup,
+  fireEvent,
+  wait,
+  waitForElement
+} from '@testing-library/react';
+import SearchAutoCompleteContainer from './SearchAutoCompleteContainer';
+import AutocompleteQuery from './AutocompleteQuery.gql';
+import { ShopConfigContext } from '@jetshop/core/components/ConfigProvider';
+
+describe('SearchFieldBehaviour', () => {
+  it('renders child as fn with args', () => {
+    const { renderArg } = setup();
+    expect(renderArg).toMatchSnapshot();
+  });
+
+  it('allows an initialValue to be set via props', async () => {
+    const { renderArg } = setup({ initialValue: 'howdy neighbour' });
+
+    expect(renderArg.term).toBe('howdy neighbour');
+  });
+
+  it('updates term param to match the input field value', () => {
+    const { input, renderArg } = setup();
+
+    fireEvent.change(input, { target: { value: 'boots' } });
+
+    expect(renderArg.term).toBe('boots');
+  });
+
+  it('updates the debouncedTerm after a delay', async () => {
+    // This also tests that the state isn't updated after the component unmounts
+    // — we'd receive a warning from React
+    const { input, renderArg } = setup();
+
+    fireEvent.change(input, { target: { value: 'cats' } });
+
+    await wait(() => expect(renderArg.debouncedTerm).toEqual('cats'));
+  });
+
+  it('executes search and returns results after debouncedTerm is set', async () => {
+    const { input, childrenSpy, renderArg } = setup();
+
+    fireEvent.change(input, { target: { value: 'autoc' } });
+
+    await wait(() => expect(renderArg.debouncedTerm).toEqual('autoc'));
+
+    // The child fn should have been called with loading set to true at some
+    // point after the query was made
+    await wait(() =>
+      expect(childrenSpy).toHaveBeenCalledWith(
+        expect.objectContaining({
+          loading: true
+        })
+      )
+    );
+
+    // Wait for loading to finish
+    await wait(() =>
+      expect(childrenSpy).toHaveBeenLastCalledWith(
+        expect.objectContaining({
+          loading: false
+        })
+      )
+    );
+
+    // and then it should be called again with the actual results
+    expect(childrenSpy).lastCalledWith(
+      expect.objectContaining({
+        loading: false,
+        result: {
+          products: {
+            result: expect.arrayContaining([
+              expect.objectContaining({
+                id: 123
+              }),
+              expect.objectContaining({
+                id: 321
+              })
+            ])
+          }
+        }
+      })
+    );
+
+    fireEvent.change(input, { target: { value: 'autocomplet' } });
+
+    await wait(() => expect(renderArg.debouncedTerm).toEqual('autocomplet'));
+
+    expect(childrenSpy).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        result: {
+          products: {
+            result: expect.arrayContaining([
+              expect.objectContaining({
+                id: 123
+              }),
+              expect.not.objectContaining({
+                id: 321
+              })
+            ])
+          }
+        }
+      })
+    );
+  });
+
+  it('updates the isDirty param when the input is dirty', async () => {
+    const { childrenSpy, input, renderArg } = setup();
+
+    expect(childrenSpy).toHaveBeenCalledTimes(1);
+
+    expect(renderArg.isDirty).toBe(false);
+    fireEvent.change(input, { target: { value: 'mock' } });
+    expect(childrenSpy).toHaveBeenCalledTimes(2);
+    expect(renderArg.isDirty).toBe(true);
+
+    fireEvent.change(input, { target: { value: '' } });
+    expect(renderArg.isDirty).toBe(false);
+  });
+
+  it('correctly sets isDirty if the initialValue prop is used', () => {
+    const { input, renderArg } = setup({ initialValue: 'howdy' });
+
+    expect(renderArg.isDirty).toBe(false);
+    fireEvent.change(input, { target: { value: 'boots' } });
+    expect(renderArg.isDirty).toBe(true);
+    // An empty string is 'dirty' if initialValue is not an empty string…
+    fireEvent.change(input, { target: { value: '' } });
+    expect(renderArg.isDirty).toBe(true);
+    fireEvent.change(input, { target: { value: 'howdy' } });
+    expect(renderArg.isDirty).toBe(false);
+  });
+
+  it('automatically focuses the input on mount if `focusOnLoad` is set', () => {
+    const { input } = setup();
+    expect(input).not.toHaveFocus();
+
+    cleanup();
+
+    const { input: focusedInput } = setup({ focusOnLoad: true });
+    expect(focusedInput).toHaveFocus();
+  });
+
+  it('accepts a custom onBlur event on getInputProps', async () => {
+    const mockBlurFn = jest.fn();
+    const { input } = setup({}, null, {
+      getInputPropsOptions: { onBlur: mockBlurFn }
+    });
+
+    fireEvent.focus(input);
+    await wait();
+    fireEvent.blur(input);
+
+    expect(mockBlurFn).toHaveBeenCalledTimes(1);
+  });
+
+  it('accepts a custom onFocus event on getInputProps', () => {
+    const mockFocusFn = jest.fn();
+    const { input } = setup({}, null, {
+      getInputPropsOptions: { onFocus: mockFocusFn }
+    });
+
+    fireEvent.focus(input);
+
+    expect(mockFocusFn).toHaveBeenCalledTimes(1);
+  });
+
+  it('provides the inputs ref via render props ', () => {
+    const { input, renderArg } = setup();
+
+    expect(renderArg.inputRef).toEqual(
+      expect.objectContaining({
+        current: input
+      })
+    );
+  });
+
+  it('allows focus to be controlled via render prop `updateFocus`', () => {
+    const { input, renderArg } = setup();
+
+    fireEvent.focus(input);
+    renderArg.updateFocus('blur');
+    expect(input).not.toHaveFocus();
+    renderArg.updateFocus('focus');
+    expect(input).toHaveFocus();
+  });
+
+  describe('`isOpen` render prop fn', () => {
+    test('is true when the search field has focus', () => {
+      const { input, renderArg } = setup();
+
+      fireEvent.focus(input);
+
+      expect(renderArg.isOpen).toBe(true);
+    });
+
+    test('is true when the search field has focus', () => {
+      const { input, renderArg } = setup();
+
+      fireEvent.focus(input);
+
+      expect(renderArg.isOpen).toBe(true);
+    });
+
+    test('is false when the search field does not have focus', () => {
+      const { input, renderArg } = setup();
+
+      expect(renderArg.isOpen).toBe(false);
+
+      fireEvent.focus(input);
+      fireEvent.blur(input);
+      expect(renderArg.isOpen).toBe(false);
+    });
+
+    test('is true when the search field loses focus and the `term` has changed', async () => {
+      const { input, renderArg } = setup();
+
+      fireEvent.focus(input);
+      fireEvent.change(input, { target: { value: 'bootsandcats' } });
+      fireEvent.blur(input);
+      await wait();
+      expect(renderArg.isOpen).toBe(true);
+    });
+  });
+
+  describe('registers cancel button behaviour on the element using `getCancelProps()`', () => {
+    test('that clears the input value when clicked', () => {
+      const { input, cancel, renderArg } = setup();
+
+      fireEvent.change(input, { target: { value: 'boots' } });
+      expect(renderArg.term).toBe('boots');
+
+      fireEvent.click(cancel);
+
+      expect(renderArg.term).toBe('');
+    });
+
+    test('that accepts onClick handlers passed in to it', () => {
+      const mockClickFn = jest.fn();
+      const { cancel } = setup({}, null, {
+        getCancelPropsOptions: { onClick: mockClickFn }
+      });
+
+      fireEvent.click(cancel);
+
+      expect(mockClickFn).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('triggers a full search', () => {
+    test('when pressing enter key', async () => {
+      const { input, getByText } = setup();
+      fireEvent.focus(input);
+      fireEvent.change(input, { target: { value: 'boots' } });
+
+      fireEvent.keyDown(input, { key: 'Enter' });
+
+      await waitForElement(() => getByText('you searched for ?term=boots'));
+    });
+    test('when clicking button with `triggerSearch` bound', async () => {
+      const { input, submit, getByText } = setup();
+      fireEvent.focus(input);
+      fireEvent.change(input, { target: { value: 'boots' } });
+
+      fireEvent.click(submit);
+
+      await waitForElement(() => getByText('you searched for ?term=boots'));
+    });
+    test('with the value passed to `triggerSearch` if one is given', async () => {
+      const { input, submit, getByText } = setup({}, null, {
+        getSubmitOpts: 'search this!'
+      });
+      fireEvent.focus(input);
+      fireEvent.change(input, { target: { value: 'boots' } });
+
+      fireEvent.click(submit);
+
+      await waitForElement(() => getByText(/search this!/i));
+    });
+    test('sets `isOpen` to false when triggering a full search', async () => {
+      const { input, renderArg } = setup();
+      fireEvent.change(input, { target: { value: 'boots' } });
+      fireEvent.focus(input);
+      expect(renderArg.isOpen).toBe(true);
+      fireEvent.keyDown(input, { key: 'Enter' });
+      expect(renderArg.isOpen).toBe(false);
+    });
+  });
+
+  it('calls passed onCancel cb when search is cancelled', () => {
+    const mockCancelCb = jest.fn();
+    const { input, cancel } = setup({ onCancel: mockCancelCb });
+
+    fireEvent.change(input, { target: { value: 'hello' } });
+    fireEvent.click(cancel);
+
+    expect(mockCancelCb).toHaveBeenCalledTimes(1);
+  });
+
+  it('calls passed onSubmit cb when search is submitted', () => {
+    const mockSubmitFn = jest.fn();
+    const { input, submit } = setup({ onSubmit: mockSubmitFn });
+
+    fireEvent.change(input, { target: { value: 'hello' } });
+    fireEvent.click(submit);
+
+    expect(mockSubmitFn).toHaveBeenCalledTimes(1);
+
+    fireEvent.change(input, { target: { value: 'wow' } });
+    fireEvent.focus(input);
+    fireEvent.keyDown(input, { key: 'Enter' });
+
+    expect(mockSubmitFn).toHaveBeenCalledTimes(2);
+  });
+});
+
+const mocks = [
+  {
+    request: {
+      query: AutocompleteQuery,
+      variables: {
+        term: 'autoc'
+      }
+    },
+    result: {
+      data: {
+        searchAutoComplete: {
+          products: {
+            result: [
+              {
+                name: 'autocomplete',
+                id: 123,
+                articleNumber: 123,
+                primaryRoute: {
+                  id: 4353,
+                  slug: 'autocompleted-product',
+                  path: '/product/autocompleted-product'
+                }
+              },
+              {
+                name: 'autocomputed',
+                id: 321,
+                articleNumber: 321,
+                primaryRoute: {
+                  id: 2737,
+                  slug: 'autocomputed-product',
+                  path: '/product/autocomputed-product'
+                }
+              }
+            ]
+          }
+        }
+      }
+    }
+  },
+  {
+    request: {
+      query: AutocompleteQuery,
+      variables: {
+        term: 'autocomplet'
+      }
+    },
+    result: {
+      data: {
+        searchAutoComplete: {
+          products: {
+            result: [
+              {
+                name: 'autocomplete',
+                id: 123,
+                articleNumber: 123,
+                primaryRoute: {
+                  id: 345343,
+                  slug: 'autocompleted-product',
+                  path: '/product/autocompleted-product'
+                }
+              }
+            ]
+          }
+        }
+      }
+    }
+  }
+];
+
+function setup(
+  containerProps = {},
+  renderFn,
+  {
+    getInputPropsOptions = {},
+    getCancelPropsOptions = {},
+    getSubmitOpts = undefined
+  } = {}
+) {
+  const renderArg = {};
+
+  const childrenSpy = jest.fn(controllerArg => {
+    Object.assign(renderArg, controllerArg);
+
+    if (typeof renderFn === 'function') return renderFn(controllerArg);
+
+    return (
+      <>
+        <input
+          data-testid="default-input-field"
+          {...controllerArg.getInputProps(getInputPropsOptions)}
+        />
+        <button
+          data-testid="cancel-button"
+          {...controllerArg.getCancelProps(getCancelPropsOptions)}
+        >
+          Cancel
+        </button>
+        <button
+          data-testid="submit-button"
+          onClick={() => renderArg.triggerSearch(getSubmitOpts)}
+        >
+          Submit
+        </button>
+        <Switch>
+          <Route
+            path="/search"
+            component={props => {
+              return <div>you searched for {props.location.search}</div>;
+            }}
+          />
+        </Switch>
+      </>
+    );
+  });
+
+  const utils = renderWithRouter(
+    <ShopConfigContext.Provider
+      value={{ routes: { search: { path: '/search' } } }}
+    >
+      <MockedProvider mocks={mocks} addTypename={false}>
+        <SearchAutoCompleteContainer
+          autocompleteQuery={AutocompleteQuery}
+          {...containerProps}
+        >
+          {childrenSpy}
+        </SearchAutoCompleteContainer>
+      </MockedProvider>
+    </ShopConfigContext.Provider>
+  );
+
+  return {
+    ...utils,
+    input: utils.queryByTestId('default-input-field'),
+    cancel: utils.queryByTestId('cancel-button'),
+    submit: utils.queryByTestId('submit-button'),
+    childrenSpy,
+    renderArg
+  };
+}