noelrappin/description.md

## description.md

      
    Raw
  

              description.md
            
          
    I'm trying to run an Ember controller in a Jasmine test, and it's giving me some trouble.
This spec works, in that it renders the controller, and most of the controller is rendered accurately and can be tested.
However, there is clearly a difference between how I'm setting up these objects in the test, and how Ember sets them up at run time, because parts of the controller are not working in the test...
Details:


The itemController is not accessed at all, which means that the reference to "startDateDisplay" (which is defined in the item controller) comes up empty.


In a probably related story, the action referenced in the template can not be triggered in the test with a $(".trip").click() jQuery event.


I tried a few workarounds -- I tried changing the {{each}} in the template to:
{{#each trip in controller}}

Which gives me the error 
Error: assertion failed: an Ember.CollectionView's content must implement Ember.Array. You passed <TimeTravel.IndexTripController:ember258>

Which I take to mean that whatever magic causes looping over a controller to refer to its content is not being invoked when rendered in the test.
I also tried the more explicit 
{{#each trip in controller.content itemController="IndexTrip"}}

Which fails with
TypeError: Cannot call method 'child' of null 
at Ember.ArrayController.Ember.ArrayProxy.extend.controllerAt (http://js_travel.dev/assets/ember.js?body=1:12492:53)
at Ember.ArrayController.Ember.ArrayProxy.extend.objectAtContent (http://js_travel.dev/assets/ember.js?body=1:12445:21)

Which I don't get at all, but has something to do with containers.

  
## index.handlebars
{{! This is part of the template I'm trying to render -- the relevant part is the each, which triggers the use of
  the itemController}

<div class="admin_trips span-12">
  {{#each trip in controller}}
    <div class="trip">
      <div class="header" {{action selectTrip trip}}>
        {{trip.name}}
        {{trip.totalRevenueDisplay}}
      </div>
      {{log trip.startDateDisplay}}
      <div class="dates">{{trip.startDateDisplay}} - {{trip.endDateDisplay}}</div>
      <div class="price">{{trip.priceDisplay}}</div>
    </div>
  {{/each}}
</div>

## index_controller.js
// This is the controller -- it has other details, but those aren't important right now

TimeTravel.IndexController = Ember.ArrayController.extend({
  itemController: "indexTrip",
})

## index_controller_spec.js
// Here's the spec -- it creates a controller, a dummy view, and renders the view.

describe("with an index controller", function() {

  beforeEach(function() {
    Ember.testing = true;
    Ember.run(function() {
      trip = TimeTravel.Trip.createRecord({
        name: "Mayflower",
        startDate: "1620-09-06",
        endDate: "1620-11-21"
      });
      controller = TimeTravel.IndexController.create();
      controller.set('content', [trip]);
      view = Ember.View.create({
        controller: controller,
        templateName: 'index'
      });
      view.append();
    });
  });

  afterEach(function() {
    Ember.run(function() {
      view.remove();
    });
  });

  describe("basic stuff", function() {
    it("displays trips", function() {
      Ember.run(function() {
        expect($(".admin_trips").length).toEqual(1)
        expect($(".trip").length).toEqual(1)
        expect($(".trip .dates").text()).toEqual("Sep 6, 1620 - Nov 21, 1620")
      });
    });

    it("manages clicks", function() {
      Ember.run(function() {
        $(".trip .header").first().click();
      });
      expect($(".selected_name").text()).toEqual("Mayflower");
    });

  });


});
	{{! This is part of the template I'm trying to render -- the relevant part is the each, which triggers the use of
	the itemController}

	<div class="admin_trips span-12">
	{{#each trip in controller}}
	<div class="trip">
	<div class="header" {{action selectTrip trip}}>
	{{trip.name}}
	{{trip.totalRevenueDisplay}}
	</div>
	{{log trip.startDateDisplay}}
	<div class="dates">{{trip.startDateDisplay}} - {{trip.endDateDisplay}}</div>
	<div class="price">{{trip.priceDisplay}}</div>
	</div>
	{{/each}}
	</div>
	// This is the controller -- it has other details, but those aren't important right now

	TimeTravel.IndexController = Ember.ArrayController.extend({
	itemController: "indexTrip",
	})
	// Here's the spec -- it creates a controller, a dummy view, and renders the view.

	describe("with an index controller", function() {

	beforeEach(function() {
	Ember.testing = true;
	Ember.run(function() {
	trip = TimeTravel.Trip.createRecord({
	name: "Mayflower",
	startDate: "1620-09-06",
	endDate: "1620-11-21"
	});
	controller = TimeTravel.IndexController.create();
	controller.set('content', [trip]);
	view = Ember.View.create({
	controller: controller,
	templateName: 'index'
	});
	view.append();
	});
	});

	afterEach(function() {
	Ember.run(function() {
	view.remove();
	});
	});

	describe("basic stuff", function() {
	it("displays trips", function() {
	Ember.run(function() {
	expect($(".admin_trips").length).toEqual(1)
	expect($(".trip").length).toEqual(1)
	expect($(".trip .dates").text()).toEqual("Sep 6, 1620 - Nov 21, 1620")
	});
	});

	it("manages clicks", function() {
	Ember.run(function() {
	$(".trip .header").first().click();
	});
	expect($(".selected_name").text()).toEqual("Mayflower");
	});

	});


	});