input-props-test.js

it('should render radio inputs and their labels from the inputs prop', () => {
    // Create props with an inputs collection.
    // I use consistent and ordered naming for data series i.e. "alpha", "bravo", "charlie", "delta", etc.
    // I find using a naming scheme like this in cases where order matters, helps clarify the test setup and assertions.
    const props = {
      baseId: 'test-baseId',
      inputs: [
        { value: 'alpha.value', label: 'alpha.label' },
        { value: 'bravo.value', label: 'bravo.label' },
        { value: 'charlie.value', label: 'charlie.label' }
      ]
    };
    const StatelessRadio = statelessRadio(React);

    // Render the component, and then find all of our input and label elements.
    const $component = $(<StatelessRadio {...props} />).render()
    const $inputs = $component.find('input[type=radio]');
    const $labels = $component.find('label');

    // It's possible this test could (should?) be broken out into two separate tests.
    // But occasionally I will have multiple sets of assertions going on in a test
    // and in that case I use "actual" and "expected" as prefixes on the variables
    // which have assertions made on them.
    //
    // Most of the time this is a sign that you could write two simpler, smaller tests.
    // But...not always.
    //
    // The "actualInputValues" variable is being created by using teaspoon to `.map` over
    // the set of html <input> tags in our rendered DOM, and turn them into an array
    // of their value attributes.
    //
    // We expect the result of this mapping to look like "expectedInputValues"
    const actualInputValues = $inputs
      .map(inputNode => inputNode.value)
      .get();
    const expectedInputValues = [
      'alpha.value',
      'bravo.value',
      'charlie.value'
    ];

    // Verifies our inputs were rendered with values.
    assert.deepEqual(
      actualInputValues,
      expectedInputValues,
      'renders 3 inputs with values from each item in the inputs collection'
    );

    // Similar to above, but instead mapping over the <label> elements, for their text content.
    const actualLabelTexts = $labels
      .map(labelNode => $(labelNode).text())
      .get();
    const expectedLabelTexts = [
      'alpha.label',
      'bravo.label',
      'charlie.label'
    ];

    // Verifies our labels were rendered with the correct text content.
    assert.deepEqual(
      actualLabelTexts,
      expectedLabelTexts,
      'renders 3 labels with the label text provide in each item of the inputs collection'
    );
  });