InputChangeEvents Class — react Architecture

Source Code

fixtures/dom/src/components/fixtures/input-change-events/index.js lines 10–114

class InputChangeEvents extends React.Component {
  render() {
    return (
      <FixtureSet
        title="Input change events"
        description="Tests proper behavior of the onChange event for inputs">
        <TestCase
          title="Range keyboard changes"
          description={`
            Range inputs should fire onChange events for keyboard events
          `}>
          <TestCase.Steps>
            <li>Focus range input</li>
            <li>change value via the keyboard arrow keys</li>
          </TestCase.Steps>

          <TestCase.ExpectedResult>
            The <code>onKeyDown</code> call count should be equal to the{' '}
            <code>onChange</code> call count.
          </TestCase.ExpectedResult>

          <RangeKeyboardFixture />
        </TestCase>

        <TestCase
          title="Radio input clicks"
          description={`
            Radio inputs should only fire change events when the checked
            state changes.
          `}
          resolvedIn="16.0.0">
          <TestCase.Steps>
            <li>Click on the Radio input (or label text)</li>
          </TestCase.Steps>

          <TestCase.ExpectedResult>
            The <code>onChange</code> call count should remain at 0
          </TestCase.ExpectedResult>

          <RadioClickFixture />
        </TestCase>
        <TestCase
          title="Uncontrolled radio groups"
          description={`
            Radio inputs should fire change events when the value moved to
            another named input
          `}
          introducedIn="15.6.0">
          <TestCase.Steps>
            <li>Click on the "Radio 2"</li>
            <li>Click back to "Radio 1"</li>
            <li>Click back to "Radio 2"</li>
          </TestCase.Steps>

          <TestCase.ExpectedResult>
            The <code>onChange</code> call count increment on each value change
            (at least 3+)
          </TestCase.ExpectedResult>

          <RadioGroupFixture />
        </TestCase>

        <TestCase
          title="Inputs with placeholders"
          description={`
            Text inputs with placeholders should not trigger changes
            when the placeholder is altered
          `}
          resolvedIn="15.0.0"
          resolvedBy="#5004"
          affectedBrowsers="IE9+">
          <TestCase.Steps>
            <li>Click on the Text input</li>
            <li>Click on the "Change placeholder" button</li>
          </TestCase.Steps>

          <TestCase.ExpectedResult>
            The <code>onChange</code> call count should remain at 0
          </TestCase.ExpectedResult>

          <InputPlaceholderFixture />