title: How to test an Angular 1.x component that uses Angular Material md-tabs - issue with output/event/callback
body: <p>The issue here is that the second <code>it</code> test fails in this unit test even though in the real browser that output callback is called just fine.</p>
  
  <p>How can I write a unit test so that I can test that <code>md-tabs</code> element using the <code>md-selected</code> approach when initialising the component <em>does</em> call a correct output callback with the right payload data?</p>
  
  <p>Any help appreciated!</p>
  
  <p><code>
  FAILED TESTS:
    Component: gx-tab-list
      ✖ triggers provided output event when a tab is selected
        Chrome 55.0.2883 (Mac OS X 10.11.6)
      Expected spy clickSpy to have been called with [ Object({ type: 'DO_SOMETHING1' }) ] but it was never called.
          at Object.&lt;anonymous&gt; (/Volumes/DEVELOPMENT/projects/jlr-guanxi-ui/spec.bundle.js:140015:35 &lt;- webpack:///client/app/components/common/tab-list/tab-list.spec.js:85:33)
  </code></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import {findIn} from '../../../../test-helpers';
  import TabListItem from '../../../models/tab-list-item'
  
  
  // Input mocks.
  const itemListMock = [
    new TabListItem({
      uid: '1',
      label: 'components.reset',
      extra: TabListItem.inBracketsFormat('1'),
      action: {
        type: 'DO_SOMETHING1',
      }
    }),
    new TabListItem({
      uid: '2',
      label: 'components.reset',
      extra: TabListItem.inBracketsFormat('2'),
      action: {
        type: 'DO_SOMETHING2',
      }
    })
  ];
  
  //////////////////////////////////////////////////
  
  import component from './index';
  
  describe('Component: gx-tab-list', () =&gt; {
    let parentScope;
    let element;
  
    beforeEach(function () {
      angular.mock.module('ngMaterial-mock');
      angular.mock.module(component, ($provide) =&gt; {
        // Provide a translateFilterMock.
        $provide.value('translateFilter', (value) =&gt; value);
      })
    });
  
    // Before running each test, compile the desired element and render its input data.
    beforeEach(inject(($compile, $rootScope) =&gt; {
      parentScope = $rootScope.$new();
      parentScope.items = itemListMock;
      parentScope.activeTabIndex = -1;
      parentScope.clickSpy = jasmine.createSpy('clickSpy');
      element = angular.element(`
        &lt;gx-tab-list
          model="items"
          active-tab-index="activeTabIndex"
          on-click="clickSpy(action)"&gt;&lt;/gx-tab-list&gt;
      `);
  
      $compile(element)(parentScope);
      parentScope.$digest();
    }));
  
  
    it('renders a complete view', () =&gt; {
      const tabListLength = element.find('md-tab').length;
      expect(tabListLength).toEqual(2, 'Should render two md-tab items.');
  
      const labelText = findIn(element, '.js-label').text().trim();
      expect(labelText).toEqual(itemListMock[0].label, 'Should render the label.');
  
      const extraText = findIn(element, '.js-extra').text().trim();
      expect(extraText).toEqual(itemListMock[0].extra, 'Should render the extra text.');
    });
  
    
    it('triggers provided output event when a tab is selected', () =&gt; {
      parentScope.activeTabIndex = 0;
      parentScope.$digest();
      expect(parentScope.clickSpy).toHaveBeenCalledWith(itemListMock[0].action);
    });
  });</code></pre>
  </div>
  </div>
  </p>