typeahead test

typeahead.spec.js

define(['js/app', 'backbone', 'js/views/components/TypeAheadView', 'js/collections/PlaceNames',
    'js/collections/localstorage/UserSearches'
    ],
  function (App, Backbone, TypeAheadView, PlaceNames, UserSearches) {
    var typeAheadView;

    beforeEach(function() {
      App.user = new Backbone.Model({
        id: '[email protected]'
      });

      this.server = sinon.fakeServer.create();
    });


    afterEach(function() {
      this.server.restore();
      window.localStorage.clear();
    });

    describe('TypeaheadView', function () {
      var completionsJSON = {
        "completions": [
          {"name": "London", "parent": null, "location-id": "london"},
          {"name": "Lower Earley", "parent": "Berkshire", "location-id": "lower-earley"},
          {"name": "Central London", "parent": "Greater London", "location-id": "central-london"},
          {"name": "Lowlands", "parent": null, "location-id": "lowlands"},
          {"name": "Londonderry","parent": "Northern Ireland", "location-id": "londonderry"},
          {"name": "Lowestoft", "parent": "Suffolk", "location-id": "lowestoft"},
          {"name": "Loughborough","parent": "Leicestershire","location-id": "loughborough"},
          {"name": "Longton", "parent": "Stoke-on-Trent", "location-id": "longton"},
          {"name": "Long Eaton","parent": "Derbyshire","location-id": "long-eaton"},
          {"name": "Loughton", "parent": "Essex", "location-id": "loughton"}
        ]
      };

      it('works with typical usage', function () {
        this.server.respondWith("GET", /\/place\-names\/completions\/\?query\=.*/,
            [200, { "Content-Type": "application/json" },
             JSON.stringify(completionsJSON)]);

        $('body').append('<div class="agent-location-typeahead-cont">' +
          '<input id="search" title="location" name="search" type="text" autocomplete="off" ' +
          'class="input-lg typeahead" placeholder="e.g. City or Postcode"></div>');

        var agentLocationTypeAhead = new TypeAheadView({
          collection: new PlaceNames(),
          el: '.agent-location-typeahead-cont',
          searchType: 'for-sale'
        });
        agentLocationTypeAhead.render();

        // manually trigger the input event
        $('input#search').val('lo').trigger('input');

        this.server.respond();
        expect(agentLocationTypeAhead.collection.length).toEqual(10);

        agentLocationTypeAhead.select({currentTarget: $('li.list-group-item:first-child')}, 'click');
        expect(agentLocationTypeAhead.ui.input.val()).toEqual('London');
      });

      it('orders user searches by date', function() {

        var agentLocationTypeAhead = new TypeAheadView({
          collection: new PlaceNames(),
          el: '.agent-location-typeahead-cont',
          searchType: 'for-sale'
        });

        agentLocationTypeAhead.render();

        agentLocationTypeAhead.userSearches.reset([
          {
            "query": {
              "page":"0","radius":"1.0","under-offer":"true","location-id":"london-colney",
              "location-name": "London Colney", "search-type":"for-sale","frame-size":"25",
              "direction":"desc","view":"list","sort-field":"price"
            },
            "userId":"[email protected]","id":"london-colneyfor-sale",
            "type":"for-sale", "date": new Date('Wed Apr 22 2015 17:56:49 GMT+0100 (BST)')
          },
          {
            "query": {
              "page":"0","radius":"1.0","under-offer":"true","location-id":"london",
              "location-name": "London", "search-type":"for-sale","frame-size":"25",
              "direction":"desc","view":"list","sort-field":"price"
            },
            "userId":"[email protected]","id":"londonfor-sale",
            "type":"for-sale", "date": new Date('Wed Apr 22 2015 17:56:50 GMT+0100 (BST)')
          },
          {
            "query": {
              "page":"0","radius":"1.0","under-offer":"true","location-id":"derby",
              "location-name": "Derby", "search-type":"for-sale","frame-size":"25",
              "direction":"desc","view":"list","sort-field":"price"
            },
            "userId":"[email protected]","id":"derbyfor-sale",
            "type":"for-sale", "date": new Date('Wed Apr 22 2015 17:56:51 GMT+0100 (BST)')
          }
        ]);

        expect(agentLocationTypeAhead.userSearches.models[0].get('id')).toEqual('derbyfor-sale');
        agentLocationTypeAhead.userSearches.sort();
        expect(agentLocationTypeAhead.userSearches.models[0].get('id')).toEqual('derbyfor-sale');
      });

      it('deletes a user suggestion', function () {
        this.server.respondWith("GET", /\/place\-names\/completions\/\?query\=.*/,
            [200, { "Content-Type": "application/json" },
             JSON.stringify(completionsJSON)]);

        $('body').html('<div class="agent-location-typeahead-cont">' +
          '<input id="search" title="location" name="search" type="text" autocomplete="off" ' +
          'class="input-lg typeahead" placeholder="e.g. City or Postcode"></div>');

        var agentLocationTypeAhead = new TypeAheadView({
          collection: new PlaceNames(),
          el: '.agent-location-typeahead-cont',
          searchType: 'for-sale'
        });

        agentLocationTypeAhead.render();

        expect(agentLocationTypeAhead.collection.length).toEqual(0);

        agentLocationTypeAhead.userSearches.create(
          {
            "query": {
              "page":"0","radius":"1.0","under-offer":"true","location-id":"london-colney",
              "location-name": "London Colney", "search-type":"for-sale","frame-size":"25",
              "direction":"desc","view":"list","sort-field":"price"
            },
            "userId":"[email protected]","id":"london-colneyfor-sale",
            "type":"for-sale"
          }
        );

        $('input#search').val('lo').trigger('input');
        this.server.respond();

        agentLocationTypeAhead.userSearches.on('add', function() {
          expect(agentLocationTypeAhead.userSearches.length).toEqual(1);
        });

        // manually trigger the delete button click event
        $('.typeahead-results li:first-child .delete').trigger('click');

        agentLocationTypeAhead.userSearches.on('remove', function() {
          expect(agentLocationTypeAhead.userSearches.length).toEqual(0);
          expect(agentLocationTypeAhead.collection.length).toEqual(10);
        });
        expect(agentLocationTypeAhead.ui.results.find('span:contains("Loughton")').length).toEqual(1);
        expect(agentLocationTypeAhead.ui.results.find('span:contains("London Colney")').length).toEqual(0);

      });

      it('can copy text to input correctly', function () {
        var placeNamesCollection = new PlaceNames();

        $('body').html('<div class="typeahead-cont">' +
          '<input id="search" title="location" name="search" type="text" autocomplete="off" ' +
          'class="input-lg typeahead" placeholder="e.g. City or Postcode"></div>');

        typeAheadView = new TypeAheadView({
          collection: placeNamesCollection,
          el: $('.typeahead-cont')
        });
        typeAheadView.render();

        typeAheadView.ui.results.append('<li class="list-group-item active">York</li>');
        typeAheadView.select({currentTarget: $('li.active')});

        expect(typeAheadView.ui.input.val()).toEqual('York');
      });

      it('can add items to the suggestion list', function() {

        var placeNamesCollection = new PlaceNames([{name: 'York'}, {name: 'London'}]);
        typeAheadView = new TypeAheadView({
          collection: placeNamesCollection
        });

        typeAheadView.render();

        expect(typeAheadView.collection.length).toEqual(2);

      });

      it('can get the current users searches and add them to the top of suggestions list', function() {

        var placeNamesCollection = new PlaceNames([{name: 'York'}, {name: 'London'}]);
        typeAheadView = new TypeAheadView({
          collection: placeNamesCollection,
          searchType: 'for-sale'
        });

        typeAheadView.render();

        typeAheadView.userSearches.create(
          {
            "query": {
              "page":"0","radius":"1.0","under-offer":"true","location-id":"london-colney",
              "location-name": "London Colney", "search-type":"for-sale","frame-size":"25",
              "direction":"desc","view":"list","sort-field":"price"
            },
            "userId":"[email protected]","id":"london-colney",
            "type":"for-sale","searchType":"for-sale"
          }
        );

        typeAheadView.getUserSuggestions('lon', function(suggestions) {
          expect(typeAheadView.collection.length).toEqual(3);
          expect(typeAheadView.collection.findWhere({name: 'London Colney'})).toBeTruthy();
          expect(typeAheadView.collection.models[0].get('name')).toEqual('London Colney');
        });

      });

      it('can get the current users searches and add them to the top of suggestions list', function() {

        var placeNamesCollection = new PlaceNames([{name: 'York'}, {name: 'London'}]);
        typeAheadView = new TypeAheadView({
          collection: placeNamesCollection,
          searchType: 'for-sale'
        });

        typeAheadView.userSearches.create(
          {
            "query": {
              "page":"0","radius":"1.0","under-offer":"true","location-id":"london-colney",
              "location-name": "London Colney", "search-type":"for-sale","frame-size":"25",
              "direction":"desc","view":"list", "sort-field":"price"
            },
            "userId":"[email protected]","id":"london-colneyfor-sale",
            "type":"for-sale"
          }
        );

        typeAheadView.render();
        typeAheadView.getUserSuggestions('  lon ', function(suggestions) {
          expect(typeAheadView.collection.length).toEqual(3);
          expect(typeAheadView.collection.findWhere({name: 'London Colney'})).toBeTruthy();
          expect(typeAheadView.collection.models[0].get('name')).toEqual('London Colney');
        });

      });

      it('does not break when no current user searches', function() {

        var placeNamesCollection = new PlaceNames([{name: 'York'}, {name: 'London'}]);
        typeAheadView = new TypeAheadView({
          collection: placeNamesCollection,
          searchType: 'for-sale'
        });

        typeAheadView.render();
        typeAheadView.getUserSuggestions();

        expect(typeAheadView.collection.length).toEqual(2);
      });

    });

  }
);