wix-style-react/dist/src/GoogleAddressInput/GoogleAddressInput.spec.js

wix-style-react

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.GmapsTestClient = undefined;

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

require('react');

var _GoogleAddressInput = require('./GoogleAddressInput.driver');

var _fp = require('lodash/fp');

var _fp2 = _interopRequireDefault(_fp);

var _wixEventually = require('wix-eventually');

var _wixEventually2 = _interopRequireDefault(_wixEventually);

var _sinon = require('sinon');

var _sinon2 = _interopRequireDefault(_sinon);

var _GoogleAddressInput2 = require('./GoogleAddressInput');

var _InputWithOptions = require('../InputWithOptions');

var _InputWithOptions2 = _interopRequireDefault(_InputWithOptions);

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

function _asyncToGenerator(fn) { return function () { var gen = fn.apply(this, arguments); return new Promise(function (resolve, reject) { function step(key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { return Promise.resolve(value).then(function (value) { step("next", value); }, function (err) { step("throw", err); }); } } return step("next"); }); }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var GEOCODE_RESULT = JSON.parse('{"formatted_address":"_formatted_address_","address_components":[{"types":["street_number"],"long_name":123}]}');
GEOCODE_RESULT.geometry = {
  location: {
    lat: function lat() {
      return 31.12;
    },
    lng: function lng() {
      return 33.34;
    }
  }
};

var buildResult = function buildResult(originValue) {
  return {
    originValue: originValue,
    googleResult: GEOCODE_RESULT,
    address: {
      approximate: true,
      latLng: {
        lat: 31.12,
        lng: 33.34
      },
      number: 123,
      formatted: '_formatted_address_'
    }
  };
};

var GmapsTestClient = exports.GmapsTestClient = function () {
  function GmapsTestClient() {
    _classCallCheck(this, GmapsTestClient);
  }

  _createClass(GmapsTestClient, [{
    key: 'autocomplete',
    value: function autocomplete(_ref) {
      var request = _ref.request;

      if (request.input === 'dontfind') {
        return Promise.resolve([]);
      }

      return Promise.resolve([{ description: JSON.stringify(request) + ' - 1', id: 0 }, { description: JSON.stringify(request) + ' - 2', id: 1 }]);
    }
  }, {
    key: 'geocode',
    value: function geocode(_ref2) {
      var request = _ref2.request;
      var address = request.address,
          placeId = request.placeId;

      if (address || placeId) {
        return Promise.resolve([_fp2.default.extend({}, GEOCODE_RESULT, { __called__: JSON.stringify(request) })]);
      }
      throw new Error('geocode() request params are malformed');
    }
  }, {
    key: 'placeDetails',
    value: function placeDetails(_ref3) {
      var request = _ref3.request;
      var placeId = request.placeId;

      if (placeId) {
        return Promise.resolve([_fp2.default.extend({}, GEOCODE_RESULT, { __called__: JSON.stringify(request) })]);
      }
      throw new Error('placeDetails() request params are malformed');
    }
  }]);

  return GmapsTestClient;
}();

describe('GoogleAddressInput', function () {
  var _componentFactory = (0, _GoogleAddressInput.componentFactory)(),
      createShallow = _componentFactory.createShallow,
      createMount = _componentFactory.createMount;

  describe('appearance', function () {
    it('should show magnifying glass by default', function () {
      var component = createShallow({ Client: GmapsTestClient });
      expect(component.find('InputWithOptions').props().magnifyingGlass).toEqual(true);
    });

    it('should allow hiding magnifying glass', function () {
      var component = createShallow({
        Client: GmapsTestClient,
        magnifyingGlass: false
      });
      expect(component.find('InputWithOptions').props().magnifyingGlass).toEqual(false);
    });

    it('should allow setting theme for the nested input', function () {
      var component = createShallow({
        Client: GmapsTestClient,
        theme: 'material'
      });
      expect(component.find('InputWithOptions').props().theme).toEqual('material');
    });

    it('should allow the input to be readOnly', function () {
      var component = createShallow({
        Client: GmapsTestClient,
        readOnly: true
      });
      expect(component.find('InputWithOptions').props().readOnly).toEqual(true);
    });

    it('should show a footer', function () {
      var component = createShallow({
        Client: GmapsTestClient,
        readOnly: true,
        footer: 'foo bar',
        footerOptions: { overrideStyle: true, disabled: true }
      });

      expect(component.find('InputWithOptions').props().options).toEqual([{
        id: 0,
        value: 'foo bar',
        overrideStyle: true,
        disabled: true
      }]);
    });

    it('should not highlight selected option by default', function () {
      var component = createShallow({ Client: GmapsTestClient });
      expect(component.find('InputWithOptions').props().selectedHighlight).toEqual(false);
    });
  });

  describe('when `props.poweredByGoogle`', function () {
    describe('is `true`', function () {
      it('should show google footer', function () {
        var component = createMount({
          Client: GmapsTestClient,
          poweredByGoogle: true
        });
        component.setState({
          suggestions: ['a', 'b', 'c'].map(function (s) {
            return { description: s, id: s };
          })
        });
        expect(component.find('[data-hook="google-footer"]').exists()).toEqual(true);
      });

      it('should not show google footer if `state.suggestions.length === 0`', function () {
        var component = createMount({
          Client: GmapsTestClient,
          poweredByGoogle: true
        });
        component.setState({ suggestions: [] });
        expect(component.find('[data-hook="google-footer"]').exists()).toEqual(false);
      });
    });

    describe('is falsy', function () {
      it('should not show the powered by google footer', function () {
        var component = createShallow({ Client: GmapsTestClient });
        expect(component.find('[data-hook="google-footer"]').exists()).toEqual(false);
      });
    });
  });

  describe('User Interactions', function () {
    var defaultSuggestions = [JSON.parse('{"description": "my address", "id": "my-id", "place_id": 123}')];

    it('should specify autoSelect as default option', function () {
      var component = createMount({
        Client: GmapsTestClient,
        countryCode: 'XX'
      });
      expect(component.find('InputWithOptions').props().autoSelect).toEqual(true);
    });

    it('should allow to override autoSelect option', function () {
      var component = createMount({
        Client: GmapsTestClient,
        countryCode: 'XX',
        autoSelect: false
      });
      expect(component.find('InputWithOptions').props().autoSelect).toEqual(false);
    });

    it('should allow focusing input', function () {
      var component = createMount({
        Client: GmapsTestClient,
        countryCode: 'XX'
      });
      var input = component.find('input').instance();
      _sinon2.default.spy(input, 'focus');
      component.instance().focus();
      expect(input.focus.calledOnce).toEqual(true);
    });

    it('should allow selecting input', function () {
      var component = createMount({
        Client: GmapsTestClient,
        countryCode: 'XX'
      });
      var input = component.find('input').instance();
      _sinon2.default.spy(input, 'select');
      component.instance().select();
      expect(input.select.calledOnce).toEqual(true);
    });

    it('If user changes the value in the autocomplete box, request suggestions from google.maps', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
      var component, event;
      return regeneratorRuntime.wrap(function _callee$(_context) {
        while (1) {
          switch (_context.prev = _context.next) {
            case 0:
              component = createShallow({
                Client: GmapsTestClient,
                countryCode: 'XX'
              });
              event = { target: { value: 'Hatomer 49' } };

              component.find('InputWithOptions').props().onInput(event);

              _context.next = 5;
              return (0, _wixEventually2.default)(function () {
                component.update();
                expect(component.find('InputWithOptions').props().options).toEqual([{
                  id: 0,
                  value: '{"componentRestrictions":{"country":"XX"},"input":"Hatomer 49"} - 1'
                }, {
                  id: 1,
                  value: '{"componentRestrictions":{"country":"XX"},"input":"Hatomer 49"} - 2'
                }]);
              });

            case 5:
            case 'end':
              return _context.stop();
          }
        }
      }, _callee, undefined);
    })));

    it('If user pressed <enter> with a suggested value, geocode the suggested value, and call the onSet callback  (with geocode handler)', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
      var onSet, component;
      return regeneratorRuntime.wrap(function _callee2$(_context2) {
        while (1) {
          switch (_context2.prev = _context2.next) {
            case 0:
              onSet = _sinon2.default.spy();
              component = createShallow({
                Client: GmapsTestClient,
                countryCode: 'XX',
                onSet: onSet
              });

              component.setState({ suggestions: defaultSuggestions });
              component.find('InputWithOptions').props().onSelect({ id: 0, value: 'my address' });

              _context2.next = 6;
              return (0, _wixEventually2.default)(function () {
                expect(onSet.args[0][0]).toEqual(buildResult('my address'));
              });

            case 6:
            case 'end':
              return _context2.stop();
          }
        }
      }, _callee2, undefined);
    })));

    it('If user pressed <enter> with a suggested value, geocode the suggested value, and call the onSet callback (with places handler)', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
      var onSet, component;
      return regeneratorRuntime.wrap(function _callee3$(_context3) {
        while (1) {
          switch (_context3.prev = _context3.next) {
            case 0:
              onSet = _sinon2.default.spy();
              component = createShallow({
                Client: GmapsTestClient,
                countryCode: 'XX',
                onSet: onSet,
                handler: _GoogleAddressInput2.GoogleAddressInputHandler.places
              });

              component.setState({ suggestions: defaultSuggestions });
              component.find('InputWithOptions').props().onSelect({ id: 0, value: 'my address' });

              _context3.next = 6;
              return (0, _wixEventually2.default)(function () {
                expect(onSet.args[0][0]).toEqual(buildResult('my address'));
              });

            case 6:
            case 'end':
              return _context3.stop();
          }
        }
      }, _callee3, undefined);
    })));

    it('If user pressed <enter> with a value that is not on the suggestions list, try to suggest it and geocode if successful', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4() {
      var onSet, component;
      return regeneratorRuntime.wrap(function _callee4$(_context4) {
        while (1) {
          switch (_context4.prev = _context4.next) {
            case 0:
              onSet = _sinon2.default.spy();
              component = createShallow({
                Client: GmapsTestClient,
                countryCode: 'XX',
                onSet: onSet
              });

              component.setState({ suggestions: defaultSuggestions });
              component.find('InputWithOptions').props().onManuallyInput('my addr');

              _context4.next = 6;
              return (0, _wixEventually2.default)(function () {
                expect(onSet.called).toBeFalsy();
              });

            case 6:
            case 'end':
              return _context4.stop();
          }
        }
      }, _callee4, undefined);
    })));

    it('If user pressed <enter> with a value that is not on the suggestions list, try to suggest it and return null if unsuccessful', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee5() {
      var onSet, component;
      return regeneratorRuntime.wrap(function _callee5$(_context5) {
        while (1) {
          switch (_context5.prev = _context5.next) {
            case 0:
              onSet = _sinon2.default.spy();
              component = createShallow({
                Client: GmapsTestClient,
                countryCode: 'YY',
                onSet: onSet
              });

              component.setState({ suggestions: defaultSuggestions });
              component.find('InputWithOptions').props().onManuallyInput('dontfind');

              _context5.next = 6;
              return (0, _wixEventually2.default)(function () {
                expect(onSet.called).toBeFalsy();
              });

            case 6:
            case 'end':
              return _context5.stop();
          }
        }
      }, _callee5, undefined);
    })));

    it('If user pressed <enter> and there is no value on the suggestions list and fallbackToManual is set to true, search for the value anyway', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee6() {
      var onSet, component;
      return regeneratorRuntime.wrap(function _callee6$(_context6) {
        while (1) {
          switch (_context6.prev = _context6.next) {
            case 0:
              onSet = _sinon2.default.spy();
              component = createShallow({
                Client: GmapsTestClient,
                countryCode: 'YY',
                onSet: onSet,
                fallbackToManual: true
              });

              component.setState({ suggestions: [] });
              component.find('InputWithOptions').props().onManuallyInput('dontfind');

              _context6.next = 6;
              return (0, _wixEventually2.default)(function () {
                expect(onSet.args[0][0]).toEqual(buildResult('dontfind'));
              });

            case 6:
            case 'end':
              return _context6.stop();
          }
        }
      }, _callee6, undefined);
    })));

    it('clear suggestions on blur', function () {
      jest.useFakeTimers();
      var component = createMount({
        Client: GmapsTestClient,
        countryCode: 'XX',
        clearSuggestionsOnBlur: true
      });
      component.setState({ suggestions: defaultSuggestions });
      component.find('input').simulate('blur');
      jest.runAllTimers();
      component.update();
      jest.useRealTimers();
      expect(component.find(_InputWithOptions2.default).props().options).toHaveLength(0);
    });

    it("don't clear suggestions if clearSuggestionsOnBlur === false", function (done) {
      var component = createShallow({
        Client: GmapsTestClient,
        countryCode: 'XX',
        clearSuggestionsOnBlur: false
      });
      component.setState({ suggestions: defaultSuggestions });
      component.find('InputWithOptions').props().onBlur();
      setTimeout(function () {
        expect(component.find('InputWithOptions').props().options).toHaveLength(1);
        done();
      }, 300);
    });
  });
});