1

I am writing a test case for a particular component I created. The component is here

import React, { PropTypes } from 'react';
import moment from 'moment';

const RouteHeader = ({ activeTab, isSearched, flight, results, departureDate, returnDate }) => {
  let departureDisplay;
  let returnDisplay;
  if (departureDate) {
    departureDisplay = moment(departureDate, 'DD MM YYYY').format('MMM Do YYYY');
  }
  if (returnDate) {
    returnDisplay = moment(returnDate, 'DD MM YYYY').format('MMM Do YYYY');
  }
  const plural = results === 1 ? 'flight' : 'flights';

  if (!isSearched) {
    return (
      <div className="listing_header_all">
        <h3 className="test">Showing all results for {activeTab} flights!</h3>
      </div>
    );
  } else {
    if (flight) {
      if (activeTab === 'one-way') {
        return (
          <div className="trip_header">
            <h3>
              {flight.origin} <span>&#8594;</span>{flight.destination}
              <small className="flight_results">{results} {plural} found</small>
            </h3>
            <h3>Departure date: <small className="flight_results">{departureDisplay}</small></h3>
          </div>
        );
      } else {
        return (
          <div className="trip_header">
            <h3>
              {flight.origin}
              <span>&#8594;</span>
              {flight.destination} <span>&#8594;</span>
              {flight.origin}
              <small className="flight_results">{results} {plural} found</small>
            </h3>
            <h3>Departure date: <small className="flight_results">{departureDisplay}</small></h3>
            <h3>Return date: <small className="flight_results">{returnDisplay}</small></h3>
          </div>
        );
      }
    } else {
      return (
        <div>
          <h3>No search results to display for your search!</h3>
        </div>
      );
    }
  }
};

RouteHeader.propTypes = {
  isSearched: PropTypes.bool,

  activeTab: PropTypes.string,

  flight: PropTypes.object,

  results: PropTypes.number,

  departureDate: PropTypes.string,

  returnDate: PropTypes.string
};


export default RouteHeader;

The test case for this component is here:

import { renderComponent, expect } from '../test_helper';
import RouteHeader from '../../src/components/route_header';

describe('RouteHeader', () => {

  let component;
  const props = {
    isSearched: false,
    activeTab: 'one-way'
  }
  beforeEach(() => {
    component = renderComponent(RouteHeader, props);
  });

  it('should render', () => {
    expect(component.find('.listing_header_all')).to.have.text('Showing all results for one-way flights!');
  })
});

I'm trying to test the situation where isSearched is false and activeTab is set to one-way. I have passed in the appropriate props and also put log statements in the component to verify that the right if/else block is being executed, but I keep receiving the error:

AssertionError: expected  to have text 'Showing all results for one-way flights!', but the text was ''

Could someone guide me or provide insight for this?

Tarang Hirani
  • 560
  • 1
  • 12
  • 43

1 Answers1

1

It looks to me like your test is returning the correct result because there is no text as the direct child of the div with class listing_header_all.

I believe the correct assertion for Mocha/Chai is 

expect(component.find('.test')).to.have.text('Showing all results for one-way flights!');

Because the text Showing all results for one-way flights!' is in the h3 with the class test, not in listing_header_all.

Yo Wakita
  • 5,322
  • 3
  • 24
  • 36
  • Oh that works, but is there a need to add a class to the `h3` element? Why can't I select it this way: `.listing_header_all .test`. That results in the same error as above. – Tarang Hirani Mar 13 '17 at 17:56
  • Well the thing is, with unit test you want to have as much specificity as possible so that your test doesn't pass by accident when it is supposed to fail. So in your case, if I didn't want to add a class to the h3, I would do a find on `h3` and then run the assertion. And if I were to need multiple h3s in the component (the aforementioned solution wouldn't work), I think having classes for the different h3s would be appropriate. I personally haven't had a need for nested selectors when writing tests before. – Yo Wakita Mar 13 '17 at 18:01
  • Gotcha, that makes sense. So it's absolutely ok to have the HTML structured this way for the unit test? `

    Showing all results for {activeTab} flights!

    `     – Tarang Hirani Mar 13 '17 at 18:03
  • Absolutely- that's totally fine. – Yo Wakita Mar 13 '17 at 18:04