TextInputFixtures Class — react Architecture

Source Code

fixtures/dom/src/components/fixtures/suspense/index.js lines 109–321

class TextInputFixtures extends React.Component {
  render() {
    return (
      <FixtureSet
        title="Suspense"
        description="Preserving the state of timed-out children">
        <p>
          Clicking "Hide" will hide the fixture context using{' '}
          <code>display: none</code> for 0.5 seconds, then restore. This is the
          built-in behavior for timed-out children. Each fixture tests whether
          the state of the DOM is preserved. Clicking "Remove" will remove the
          fixture content from the DOM for 0.5 seconds, then restore. This is{' '}
          <strong>not</strong> how timed-out children are hidden, but is
          included for comparison purposes.
        </p>
        <div className="footnote">
          As a shortcut, you can use Command + Enter (or Control + Enter on
          Windows, Linux) to "Hide" all the fixtures, or Command + / to "Remove"
          them.
        </div>
        <TestCase title="Text selection where entire range times out">
          <TestCase.Steps>
            <li>Use your cursor to select the text below.</li>
            <li>Click "Hide" or "Remove".</li>
          </TestCase.Steps>

          <TestCase.ExpectedResult>
            Text selection is preserved when hiding, but not when removing.
          </TestCase.ExpectedResult>

          <Fixture>
            <SuspendyTree>
              Select this entire sentence (and only this sentence).
            </SuspendyTree>
          </Fixture>
        </TestCase>
        <TestCase title="Text selection that extends outside timed-out subtree">
          <TestCase.Steps>
            <li>
              Use your cursor to select a range that includes both the text and
              the "Go" button.
            </li>
            <li>Click "Hide" or "Remove".</li>
          </TestCase.Steps>

          <TestCase.ExpectedResult>
            Text selection is preserved when hiding, but not when removing.
          </TestCase.ExpectedResult>

          <Fixture>
            <SuspendyTree>
              Select a range that includes both this sentence and the "Go"
              button.
            </SuspendyTree>
          </Fixture>
        </TestCase>
        <TestCase title="Focus">
          <TestCase.Steps>
            <li>
              Use your cursor to select a range that includes both the text and
              the "Go" button.
            </li>
            <li>
              Instead of clicking "Go", which switches focus, press Command +
              Enter (or Control + Enter on Windows, Linux).
            </li>
          </TestCase.Steps>

          <TestCase.ExpectedResult>
            The ideal behavior is that the focus would not be lost, but
            currently it is (both when hiding and removing).
          </TestCase.ExpectedResult>

          <Fixture>
            <SuspendyTree>
              <button>Focus me</button>
            </SuspendyTree>
          </Fixture>
        </TestCase>
        <TestCase title="Uncontrolled form input">
          <TestCase.Steps>