     _getTextsForElements: (cssQuery) ->
       Ext.Array.map(@app.getEl().query(cssQuery), (el) -> el.innerHTML).join('__')
 
+    _createAppAndWaitForVisible: (callback) ->
+      @_createApp(project: '/project/431439')
+      @waitForVisible(css: '.progress-bar-container.field-PercentDoneByStoryCount').then =>
+        callback()
+
+    _mouseOverAndWaitForVisible: (fieldName) ->
+      @mouseOver(css: '.progress-bar-container.field-' + fieldName).then =>
+        @waitForVisible(css: '.percentDonePopover')
+
   beforeEach ->
 
     Rally.environment.getContext().context.subscription.Modules = ['Rally Portfolio Manager']


      @app.destroy()

  it 'loads type with ordinal of 1 if no type setting is provided', ->

    @_createApp().then (app) =>

      expect(app.currentType.get('_ref')).toEqual '/typedefinition/1'
      expect(app.currentType.get('Name')).toEqual 'Feature'

  it 'shows help component', ->
    @_createApp().then (app) =>

      expect(@app.down('#header').getEl().down('.rally-help-icon').dom.innerHTML).toContain 'Help &amp; Training'

  it 'shows ShowPolicies checkbox', ->
    @_createApp().then (app) =>

      expect(@app.down('#header').el.down('input[type="button"]')).toHaveCls 'showPoliciesCheckbox'

  it 'creates columns from states', ->
    @ajax.whenQuerying('state').respondWith([
      {
        '_type': "State"
        'Name': "Column1"
        '_ref': '/state/1'
        'WIPLimit': 4
      },
      {
        '_type': "State"
        'Name': "Column2"
        '_ref': '/state/2'
        'WIPLimit': 3
      }
    ])

    @_createApp(type:'/typedefinition/1').then =>
      expect(@app.down('rallycardboard').getColumns().length).toEqual 3

  it 'shows message if no states are found', ->
    @ajax.whenQuerying('state').respondWith()

    @_createApp().then (app) =>

      expect(@app.el.dom.textContent).toContain "This Type has no states defined."

  it 'displays filter icon', ->
    @_createApp().then (app) =>

      expect(app.getEl().down('.filterInfo') instanceof Ext.Element).toBeTruthy()

  it 'shows project setting label if following a specific project scope', ->

    @_createApp(
      project: '/project/431439'
    ).then (app) =>

      app.down('rallyfilterinfo').tooltip.show()

      tooltipContent = Ext.get Ext.query('.filterInfoTooltip')[0]

      expect(tooltipContent.dom.textContent).toContain 'Project'
      expect(tooltipContent.dom.textContent).toContain 'Project 1'

  it 'shows "Following Global Project Setting" in project setting label if following global project scope', ->
    @ajax.whenQuerying('project').respondWith([
      {
        Name: 'Test Project'
        '_ref': '/project/2'
      }
    ])

    @_createApp().then (app) =>

      app.down('rallyfilterinfo').tooltip.show()

      tooltipContent = Ext.get Ext.query('.filterInfoTooltip')[0]

      expect(tooltipContent.dom.textContent).toContain 'Following Global Project Setting'

  it 'shows Discussion on Card', ->
    @ajax.whenQuerying('state').respondWith([
      {
        '_type': "State"
        'Name': "Column1"
        '_ref': '/state/1'
        'WIPLimit': 4
      }
    ])
    feature =


    @ajax.whenQuerying('PortfolioItem/Feature').respondWith [feature]

    if (Ext.isChrome)
      @_createAppAndWaitForVisible =>
        @_mouseOverAndWaitForVisible('PercentDoneByStoryCount').then =>
          expect(Ext.select('.percentDonePopover').elements.length).toEqual(1)

  it 'loads type with ordinal of 1 if no type setting is provided', ->

    @_createApp().then (app) =>

      expect(app.currentType.get('_ref')).toEqual '/typedefinition/1'
      expect(app.currentType.get('Name')).toEqual 'Feature'

  it 'shows help component', ->
    @_createApp().then (app) =>

      expect(@app.down('#header').getEl().down('.rally-help-icon').dom.innerHTML).toContain 'Help &amp; Training'

  it 'shows ShowPolicies checkbox', ->
    @_createApp().then (app) =>

      expect(@app.down('#header').el.down('input[type="button"]')).toHaveCls 'showPoliciesCheckbox'

  it 'creates columns from states', ->
    @ajax.whenQuerying('state').respondWith([
      {
        '_type': "State"
        'Name': "Column1"
        '_ref': '/state/1'
        'WIPLimit': 4
      },
      {
        '_type': "State"
        'Name': "Column2"
        '_ref': '/state/2'
        'WIPLimit': 3
      }
    ])

    @_createApp(type:'/typedefinition/1').then =>
      expect(@app.down('rallycardboard').getColumns().length).toEqual 3

  it 'shows message if no states are found', ->
    @ajax.whenQuerying('state').respondWith()

    @_createApp().then (app) =>

      expect(@app.el.dom.textContent).toContain "This Type has no states defined."

  it 'displays filter icon', ->
    @_createApp().then (app) =>

      expect(app.getEl().down('.filterInfo') instanceof Ext.Element).toBeTruthy()

  it 'shows project setting label if following a specific project scope', ->

    @_createApp(
      project: '/project/431439'
    ).then (app) =>

      app.down('rallyfilterinfo').tooltip.show()

      tooltipContent = Ext.get Ext.query('.filterInfoTooltip')[0]

      expect(tooltipContent.dom.textContent).toContain 'Project'
      expect(tooltipContent.dom.textContent).toContain 'Project 1'

  it 'shows "Following Global Project Setting" in project setting label if following global project scope', ->
    @ajax.whenQuerying('project').respondWith([
      {
        Name: 'Test Project'
        '_ref': '/project/2'
      }
    ])

    @_createApp().then (app) =>

      app.down('rallyfilterinfo').tooltip.show()

      tooltipContent = Ext.get Ext.query('.filterInfoTooltip')[0]

      expect(tooltipContent.dom.textContent).toContain 'Following Global Project Setting'

  it 'shows Discussion on Card', ->
    @ajax.whenQuerying('state').respondWith([
      {
        '_type': "State"
