@jetshop/ui 5.7.0

package/Search/SearchAutoCompleteContainer.js

@@ -0,0 +1,175 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { useShopConfig } from '@jetshop/core/hooks/useShopConfig';
+import debounce from 'lodash.debounce';
+import * as React from 'react';
+import { Query } from 'react-apollo';
+import { withRouter } from 'react-router-dom';
+import { callAllEventHandlers } from '../utils/callAllEventHandlers';
+let SearchFieldBehaviour = /** @class */ (() => {
+    class SearchFieldBehaviour extends React.Component {
+        constructor() {
+            super(...arguments);
+            this.inputRef = React.createRef();
+            this.flyoutRef = React.createRef();
+            this.cleanup = () => { };
+            this._isMounted = false;
+            this.initialState = {
+                isDirty: false,
+                term: this.props.initialValue,
+                debouncedTerm: this.props.initialValue,
+                isOpen: false
+            };
+            this.environment = typeof window === 'undefined' ? null : window;
+            this.state = this.initialState;
+            this.getInputProps = (_a = {}) => {
+                var { onBlur, onFocus, refKey = 'ref' } = _a, rest = __rest(_a, ["onBlur", "onFocus", "refKey"]);
+                const { updateSearch, handleBlur, handleFocus, handleEnterSubmit, inputRef } = this;
+                const { term } = this.state;
+                return Object.assign({ onChange: updateSearch, onBlur: callAllEventHandlers(onBlur, handleBlur), onFocus: callAllEventHandlers(onFocus, handleFocus), onKeyDown: callAllEventHandlers(handleEnterSubmit), [refKey]: inputRef, autoComplete: 'off', value: term, type: 'search' }, rest
+                // TODO: add an ID via props or generate one
+                // TODO: add ARIA labels
+                );
+            };
+            this.getFlyoutProps = ({ refKey = 'ref', rest } = {}) => {
+                const { flyoutRef } = this;
+                return Object.assign({ [refKey]: flyoutRef }, rest);
+            };
+            this.getCancelProps = (_a = {}) => {
+                var { onClick } = _a, rest = __rest(_a, ["onClick"]);
+                const { clearSearch } = this;
+                const { onCancel } = this.props;
+                return Object.assign({ onClick: callAllEventHandlers(onClick, onCancel, clearSearch) }, rest);
+            };
+            this.resetIfEmpty = (e) => {
+                if (e.currentTarget.value === this.props.initialValue) {
+                    this.clearSearch();
+                }
+            };
+            this.handleBlur = (e, cb) => {
+                this.resetIfEmpty(e);
+                cb && typeof cb === 'function' && cb();
+                return true;
+            };
+            this.handleEnterSubmit = (e) => {
+                // First check that the key pressed was Enter, and then
+                // call the onSubmit callback. We always call triggerSearch,
+                // but the user has an opportunity to pass an onSubmit handler
+                // as a prop
+                const { term } = this.state;
+                if (e.key === 'Enter') {
+                    this.triggerSearch(term);
+                }
+            };
+            this.triggerSearch = (term = this.state.term) => {
+                // Blur the input, close the search and navigate to the search page
+                this.setState({ isOpen: false });
+                this.debouncedUpdateTerm.cancel();
+                if (typeof this.props.onSubmit === 'function')
+                    this.props.onSubmit(term);
+                this.props.history.push(`${this.props.routes.search.path}/?term=${term}`);
+                this.updateFocus('blur');
+            };
+            this.handleFocus = (_e, cb) => {
+                this.setState({ isOpen: true });
+                cb && typeof cb === 'function' && cb();
+                return true;
+            };
+            this.updateFocus = (focusState) => {
+                if (!['blur', 'focus'].includes(focusState)) {
+                    throw new Error("updateFocus must be called with one of 'blur' | 'focus'");
+                }
+                const shouldHaveFocus = focusState === 'focus';
+                const DOMElementHasFocus = document.activeElement === this.inputRef.current;
+                // Trigger a blur or focus on the input
+                shouldHaveFocus && !DOMElementHasFocus && this.inputRef.current.focus();
+                !shouldHaveFocus && DOMElementHasFocus && this.inputRef.current.blur();
+                return true;
+            };
+            this.debouncedUpdateTerm = debounce((term) => this._isMounted && this.setState({ debouncedTerm: term }), 200);
+            this.updateSearch = (e) => {
+                const term = e.currentTarget.value;
+                const isDirty = term !== this.props.initialValue;
+                this.debouncedUpdateTerm(term);
+                this.setState({
+                    term,
+                    isDirty
+                });
+            };
+            this.clearSearch = () => {
+                this.setState(this.initialState);
+            };
+        }
+        componentDidMount() {
+            this._isMounted = true;
+            const targetIsInside = (target) => [this.flyoutRef, this.inputRef].some(node => node &&
+                node.current &&
+                (node.current === target || node.current.contains(target)));
+            const onMouseUp = (event) => {
+                if (!targetIsInside(event.target)) {
+                    this.handleBlur(event);
+                    this.setState({ isOpen: false });
+                }
+            };
+            const onTouchStart = (event) => {
+                if (!targetIsInside(event.target)) {
+                    this.handleBlur(event);
+                    this.setState({ isOpen: false });
+                }
+            };
+            if (this.environment) {
+                this.environment.addEventListener('mouseup', onMouseUp);
+                this.environment.addEventListener('touchstart', onTouchStart);
+            }
+            if (this.props.focusOnLoad) {
+                this.updateFocus('focus');
+            }
+            this.cleanup = () => {
+                if (this.environment) {
+                    this.environment.removeEventListener('mouseup', onMouseUp);
+                    this.environment.removeEventListener('touchstart', onTouchStart);
+                }
+            };
+        }
+        componentWillUnmount() {
+            this._isMounted = false;
+            this.cleanup();
+        }
+        componentDidUpdate(prevProps) {
+            const { pathname } = this.props.location;
+            const locationPath = pathname.substr(-1) !== '/'
+                ? pathname
+                : pathname.substr(0, pathname.length - 1);
+            if (this.props.location.pathname !== prevProps.location.pathname &&
+                locationPath !== this.props.routes.search.path)
+                this.props.onCancel();
+        }
+        render() {
+            return (React.createElement(Query, { context: { useNetworkStatusNotifier: false }, skip: !this.state.isDirty ||
+                    this.state.debouncedTerm === this.props.initialValue, variables: { term: this.state.debouncedTerm }, errorPolicy: "ignore", query: this.props.autocompleteQuery }, ({ loading, data }) => {
+                return this.props.children(Object.assign({ getInputProps: this.getInputProps, getCancelProps: this.getCancelProps, getFlyoutProps: this.getFlyoutProps, loading: loading || this.state.term !== this.state.debouncedTerm, isOpen: this.state.isOpen, updateFocus: this.updateFocus, result: data === null || data === void 0 ? void 0 : data.searchAutoComplete, inputRef: this.inputRef, triggerSearch: this.triggerSearch }, this.state));
+            }));
+        }
+    }
+    SearchFieldBehaviour.defaultProps = {
+        initialValue: '',
+        focusOnLoad: false
+    };
+    return SearchFieldBehaviour;
+})();
+// If SearchFieldBehaviour is refactored to use hooks, then this can be moved inside there
+const SearchFieldBehaviourWrapper = (props) => {
+    const { routes } = useShopConfig();
+    return React.createElement(SearchFieldBehaviour, Object.assign({}, props, { routes: routes }));
+};
+export default withRouter(SearchFieldBehaviourWrapper);
+//# sourceMappingURL=SearchAutoCompleteContainer.js.map

package/Search/SearchAutoCompleteContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchAutoCompleteContainer.js","sourceRoot":"","sources":["SearchAutoCompleteContainer.tsx"],"names":[],"mappings":"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"}

package/Search/SearchAutoCompleteContainer.test.js

@@ -0,0 +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
+  };
+}

package/Search/SearchField.d.ts

@@ -0,0 +1,15 @@
+import { DocumentNode } from 'graphql';
+import * as React from 'react';
+export interface SearchFieldProps {
+    initialValue: string;
+    className?: string;
+    placeholder?: string;
+    autocompleteQuery: DocumentNode;
+}
+export interface SearchFieldCompound {
+    Flyout?: React.ReactNode;
+    Wrapper?: React.ReactNode;
+    Cancel?: React.ReactNode;
+}
+declare const SearchField: React.SFC<SearchFieldProps> & SearchFieldCompound;
+export default SearchField;