Repository: cypress-io/cypress
File: packages/desktop-gui/src/specs/specs-list.jsx (JavaScript)

Code before:
    if (window.Cypress) {
      // expose project object for testing
      window.__project = this.props.project
    }
  }

  render () {
    if (specsStore.isLoading) return <Loader color='#888' scale={0.5}/>

    const filteredSpecs = specsStore.getFilteredSpecs()

    const integrationSpecsN = _.filter(filteredSpecs, { specType: 'integration' }).length
    const componentSpecsN = _.filter(filteredSpecs, { specType: 'component' }).length

    const hasSpecFilter = specsStore.filter
    const numberOfShownSpecs = filteredSpecs.length
    const hasNoSpecs = !hasSpecFilter && !numberOfShownSpecs

    if (hasNoSpecs) {
      return this._empty()
    }

    const areTestsRunning = this._areTestsRunning()

    // store in the component for ease of sharing with other methods
    const runWord = areTestsRunning ? 'Running' : 'Run'

    this.integrationLabel = integrationSpecsN === 1 ? `${runWord} 1 spec` : `${runWord} ${integrationSpecsN} specs`
    this.componentLabel = componentSpecsN === 1 ? `${runWord} 1 spec` : `${runWord} ${componentSpecsN} specs`

    return (
      <div className='specs'>
        <header>
          <div className={cs('search', {
            'show-clear-filter': !!specsStore.filter,
          })}>
            <label htmlFor='filter'>
              <i className='fas fa-search' />
            </label>
            <input
              id='filter'
              className='filter'
              placeholder='Search...'
              value={specsStore.filter || ''}
              ref={this.filterRef}
              onChange={this._updateFilter}
              onKeyUp={this._executeFilterAction}
            />
            <Tooltip
              title='Clear search'
              className='browser-info-tooltip cy-tooltip'

Review comment (refactor):
Seems like you could pull this and the labels into their own reusable methods, cause you're repeating the 'Running' : 'Run' check + label constructions here in the render method and also in the `_selectSpec`

Code after:
    return `Running ${specType} tests`
  }

  const label = specsN === 1 ? `Run 1 ${specType} spec` : `Run ${specsN} ${specType} specs`

  return label
}

@observer
class SpecsList extends Component {
  constructor (props) {
    super(props)
    this.filterRef = React.createRef()
    // when the specs are running and the user changes the search filter
    // we still want to show the previous button label to reflect what
    // is currently running
    this.runAllSavedLabel = null

    // @ts-ignore
    if (window.Cypress) {
      // expose project object for testing
      // @ts-ignore
      window.__project = this.props.project
    }
  }

  render () {
    if (specsStore.isLoading) return <Loader color='#888' scale={0.5}/>

    const filteredSpecs = specsStore.getFilteredSpecs()

    const integrationSpecsN = _.filter(filteredSpecs, { specType: 'integration' }).length
    const componentSpecsN = _.filter(filteredSpecs, { specType: 'component' }).length

    const hasSpecFilter = specsStore.filter
    const numberOfShownSpecs = filteredSpecs.length
    const hasNoSpecs = !hasSpecFilter && !numberOfShownSpecs

    if (hasNoSpecs) {
      return this._empty()
    }

    const areTestsRunning = this._areTestsRunning()

    // store in the component for ease of sharing with other methods
    this.integrationLabel = formRunButtonLabel(areTestsRunning, 'integration', integrationSpecsN)
    this.componentLabel = formRunButtonLabel(areTestsRunning, 'component', componentSpecsN)

    return (
      <div className='specs'>
        <header>