prettier/tests/jsx-text-wrap/test.js

// Wrapping text
x =
  <div>
    Some text that would need to wrap on to a new line in order to display correctly and nicely
  </div>

// Wrapping tags
x =
  <div>
    <first>f</first> <first>f</first> <first>f</first> <first>f</first> <first>f</first> <first>f</first>
  </div>

// Wrapping tags
x =
  <div>
    <first>f</first><first>f</first><first>f</first><first>f</first><first>f</first><first>f</first>
  </div>

// Wrapping tags
x =
  <div>
    <a /><b /><c />
    <first>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</first> <first>f</first>
  </div>

// Wrapping tags
x =
  <div>
    <sadashdkjahsdkjhaskjdhaksjdhkashdkashdkasjhdkajshdkashdkashd /> <first>f</first>
  </div>

x =
  <div>
    before<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at mollis lorem.</div>after
  </div>

x =
  <div>
    before{stuff}after{stuff}after{stuff}after{stuff}after{stuff}after{stuff}{stuff}{stuff}after{stuff}after
  </div>

x =
  <div>
    before {stuff} after {stuff} after {stuff} after {stuff} after {stuff} after {stuff}  {stuff}  {stuff} after {stuff} after
  </div>

x =
  <div>
    Please state your <b>name</b> and <b>occupation</b> for the board of <b>school</b> directors.
  </div>

function DiffOverview(props) {
  const { source, target, since } = props;
  return (
    <div>
      <div className="alert alert-info">
        <p>
          This diff overview is computed against the current list of records in
          this collection and the list it contained on <b>{humanDate(since)}</b>.
        </p>
        <p>
          <b>Note:</b> <code>last_modified</code> and <code>schema</code> record metadata
          are omitted for easier review.
        </p>
      </div>
      <Diff source={source} target={target} />
    </div>
  );
}

x = <font size={-3}><i>Starting at minute {graphActivity.startTime}, running for {graphActivity.length} to minute {graphActivity.startTime + graphActivity.length}</i></font>

x =
  <div>
    First second third
    <div attr="a very long string attribute that will overflow because it is very long">Something</div>
  </div>

x =
  <div>
    <div>
      First
    </div>
    Second
    <div>
      Third
    </div>
  </div>

x =
  <div>
    First <div>
      Second
    </div> Third
  </div>

leading_whitespace =
  <div> First Second Third Fourth Fifth Sixth Seventh Eighth Ninth Tenth Eleventh Twelfth Thirteenth Fourteenth</div>

trailing_whitespace =
  <div>First Second Third Fourth Fifth Sixth Seventh Eighth Ninth Tenth Eleventh Twelfth Thirteenth Fourteenth </div>

no_leading_or_trailing_whitespace =
  <div>First Second Third Fourth Fifth Sixth Seventh Eighth Ninth Tenth Eleventh Twelfth Thirteenth Fourteenth</div>

facebook_translation_leave_text_around_tag =
  <div>
    <span>
      First
    </span>,
    (<span>
      Second
    </span>)
  </div>

x =
  <div>
    <span>
      First second third fourth fifth sixth seventh
    </span>,
    (<span>
      Second
    </span>)
  </div>

this_really_should_split_across_lines =
  <div>
    before{stuff}after{stuff}after{stuff}after{stuff}after{stuff}after{stuff}after{stuff}after{stuff}after{stuff}after{stuff}after{stuff}after{stuff}after{stuff}after{stuff}after
  </div>

unstable_before =
  <div className="yourScore">
    Your score: <span className="score">{`${mini.crosstable.users[sessionUserId]} - ${mini.crosstable.users[user.id]}`}</span>
  </div>

unstable_after_first_run = (
  <div className="yourScore">
    Your score:{" "}
    <span className="score">{`${mini.crosstable.users[sessionUserId]} - ${mini
      .crosstable.users[user.id]}`}</span>
  </div>
);

solitary_whitespace =
  <div first="first" second="second" third="third" fourth="fourth" fifth="fifth" sixth="sixth"> </div>

jsx_whitespace_on_newline =
  <div>
    <div>
      First
    </div> <div>
      Second
    </div> <div>
      Third
    </div>
  </div>

jsx_around_multiline_element =
  <div>Before <div>{"Enough text to make this element wrap on to multiple lines when formatting"}</div> After</div>

jsx_around_multiline_element_second_pass = (
  <div>
    Before{" "}
    <div>
      {
        "Enough text to make this element wrap on to multiple lines when formatting"
      }
    </div>{" "}
    After
  </div>
);

convert_space_expressions =
  <div>{" "}</div>

x =
  <div>
    <first />
    <second />
    <third />
    <fourth />
    <fifth />
    <sixth />
  </div>

const Abc = () => {
  return (
    <div>
      Please state your
      {" "}
      <b>name</b>
      {" "}
      and
      {" "}
      <b>occupation</b>
      {" "}
      for the board of directors.
    </div>
  );
};

x = <div id="moo">Some stuff here</div>

headers_and_paragraphs = (
  <div>
    <h2>First</h2>
    <p>The first paragraph.</p>

    <h2>Second</h2>
    <p>The second paragraph.</p>
  </div>
);

no_text_one_tag_per_line =
  <div>
    <first /><second />
  </div>

with_text_fill_line =
  <div>
    Text <first /><second />
  </div>

line_after_br =
  <div>
    Text<br />
    More text<br />
    And more<br />
  </div>

line_after_br =
  <div>
    Text<br />More text<br />And more<br />
  </div>

line_after_br =
  <div>
    Text
    <br />
    More text
    <br />
    And more
    <br />
  </div>

line_after_br_2 = <div>A<br />B<br />C</div>

br_followed_by_whitespace = <div><br /> text</div>

dont_preserve_blank_lines_when_jsx_contains_text =
  <div>

    <div>Zeroth</div>

    <div>First</div>

    Second

  </div>

multiple_expressions =
  <div>
    {header}
    {body}
    {footer}
  </div>

single_expression_child_tags =
  <div>
    You currently have <strong>{dashboardStr}</strong> and <strong>{userStr}</strong>
  </div>

expression_does_not_break =
  <div>texty text text text text text text text text text text text {this.props.type} </div>

// FIXME
br_triggers_expression_break =
  <div><br />
  text text text text text text text text text text text {this.props.type} </div>

jsx_whitespace_after_tag =
  <div>
    <span a="a" b="b">
      {variable}
    </span>
    {" "}
    ({variable})
  </div>

x =
  <div>
    ENDS IN <div>
      text text text text text text text text text text text
    </div>{" "}
    HRS
  </div>

x =
  <div>
    <h2>Message</h2>
    Hello, I'm a simple message.
  </div>

x =
  <div>
    Hello, I'm a simple message.
    <h2>Message</h2>
  </div>

x =
  <div>
    <div>
      <div>
        <div>
          <div>
            Line {startRange.row + 1}:{startRange.column + 1} - {endRange.row + 1}:{endRange.column + 1}{caller}
          </div>
        </div>
      </div>
    </div>
  </div>

x =
  <div>
    {" "} <div>text</div>
  </div>

// NOTE: Multiple JSX whitespaces are collapsed into a single space.
x =
  <div>
    {" "}{" "}{" "}
  </div>

// Don't break a self-closing element without attributes
// ----------
x =
  <p>
    text text text text text text text text text text text text text text text<br />text text text text text text
  </p>;

x =
  <div>
    <div>
      First
    </div>-
    <div>
      Second
    </div>
  </div>

x =
  <div>
    <div>
      First
    </div>
    -
    <div>
      Second
    </div>
  </div>

x =
  <div>
    <div>First</div>-<div>Second</div>
  </div>

x =
  <div>
    <div className="first" tabIndex="1">
      First
    </div>-
    <div className="second" tabIndex="2">
      Second
    </div>
  </div>

x =
  <div>
    <div className="first" tabIndex="1">
      First
    </div>
    -
    <div className="second" tabIndex="2">
      Second
    </div>
  </div>

x =
  <div>
    <div className="first" tabIndex="1">First</div>-<div className="second" tabIndex="2">Second</div>
  </div>

x =
  <div>
    {hour}:{minute}:{second}
  </div>

x =
  <div>
    {hour}
    :
    {minute}
    :
    {second}
  </div>

x =
  <div>
    {hour}:
    {minute}:
    {second}
  </div>

x = <div><strong>text here</strong>.<br /></div>

x = <div>Sales tax estimated using a rate of {salesTax * 100}%.</div>

x = <div>
  {title}&nbsp;
</div>

x = <div><span/>bar</div>
  
x = <div>
  <span>
    <strong>{name}</strong>’s{' '}
  </span>
  Hello <strong>world</strong>.<br />
  <Text>You {type}ed this shipment to</Text>
</div>

x = <HelpBlock>
  {parameter.Description}: {errorMsg}
</HelpBlock>
  
x = <label>
  {value} solution{plural}
</label>
  
x = <span>Copy &quot;{name}&quot;</span>
  
x = <BasicText light>(avg. {value}/5)</BasicText>
  
x = <p>
  Use the <code>Button</code>'s
</p>;

this_really_should_split_across_lines =
  <div>
    before{stuff}after{stuff}after{stuff}after{stuff}after{stuff}after{stuff}after{stuff}after
  </div>

let myDiv = ReactTestUtils.renderIntoDocument(
  <div>
    <div key="theDog" className="dog" />,
    <div key="theBird" className="bird" />
  </div>
);