title: Testing Extjs controller with Jasmine returns TypeError
body: <p>We have set up a unit testing environment.</p>
  
  <p>PhantomJS will provide a headless browser to simulate the tests and the tests will be written in Jasmine framework.</p>
  
  <p>For simple examples (testing simple JS code) everything works fine. We have problems figuring out how should the Jasmine code for running a test for a Sencha ExtJS 4.2 controller look like.</p>
  
  <p>For example we have set up a simple Sencha project that inserts an item into the store on a button click.</p>
  
  <pre><code>Ext.define('TestApp.controller.TestController', {
      extend: 'Ext.app.Controller',
  
      refs: [
          {
              ref: 'myButton',
              selector: '#mybutton'
          }
      ],
  
      onButtonClick: function(button, e, eOpts) {
          var user = {
              "Name": makeString(),
              "Surname": makeString()
          };
  
          console.debug(user);
  
          var store = Ext.getStore("User");
          store.add(user);
      },
  
      init: function(application) {
          this.control({
              "#mybutton": {
                  click: this.onButtonClick
              }
          });
      }
  
  });
  </code></pre>
  
  <p>Below is the test code in Jasmine that should test if a button was clicked.</p>
  
  <pre><code>describe("Main Controller", function () {
  
      var controller;
  
      beforeEach(function () {
          controller = Ext.create('TestApp.controller.TestController', {
              application: TestApp.app
          });
      });
  
      afterEach(function () {
          controller = null;
      });
  
      describe("Controls", function () {
          it("Controller is loaded", function() {
          expect(controller != null).toBeTruthy();
      });
  
          it("button clicked", function () {
              var generateButton = controller.getMyButton();
  
          //Start listening to the component
              controller.init();
  
          generateButton.fireEvent('click')
              expect(controller.onButtonClick).toHaveBeenCalled();
          });
      });
  });
  </code></pre>
  
  <p>But the code gives an error in the second test:</p>
  
  <pre><code>TypeError: 'undefined' is not an object (evaluating 'generateButton.fireEvent') in file:///home/anar/SenchaArchitect3/TestProject/UnitTests/TestControllerSpec.js (line 76)
  </code></pre>
  
  <p>What exactly are we doing wrong and is our approach the right one?</p>