// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`array-iter.js - flow-verify 1`] = `
const UsersList = ({ users }) => (
  <section>
    <h2>Users list</h2>
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  </section>
)

const TodoList = ({ todos }) => (
  <div className="TodoList">
    <ul>{_.map(todos, (todo, i) => <TodoItem key={i} {...todo} />)}</ul>
  </div>
);

<div className="search-filter-chips">
    {scopes
        .filter(scope => scope.value !== '')
        .map((scope, i) => (
            <FilterChip
                query={this.props.query}
                onFilterChosen={this.onSearchScopeClicked}
                key={i}
                value={scope.value}
                name={scope.name}
            />
        ))}
</div>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
const UsersList = ({ users }) => (
  <section>
    <h2>Users list</h2>
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  </section>
);

const TodoList = ({ todos }) => (
  <div className="TodoList">
    <ul>
      {_.map(todos, (todo, i) => (
        <TodoItem key={i} {...todo} />
      ))}
    </ul>
  </div>
);

<div className="search-filter-chips">
  {scopes
    .filter(scope => scope.value !== "")
    .map((scope, i) => (
      <FilterChip
        query={this.props.query}
        onFilterChosen={this.onSearchScopeClicked}
        key={i}
        value={scope.value}
        name={scope.name}
      />
    ))}
</div>;

`;

exports[`array-iter.js - flow-verify 2`] = `
const UsersList = ({ users }) => (
  <section>
    <h2>Users list</h2>
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  </section>
)

const TodoList = ({ todos }) => (
  <div className="TodoList">
    <ul>{_.map(todos, (todo, i) => <TodoItem key={i} {...todo} />)}</ul>
  </div>
);

<div className="search-filter-chips">
    {scopes
        .filter(scope => scope.value !== '')
        .map((scope, i) => (
            <FilterChip
                query={this.props.query}
                onFilterChosen={this.onSearchScopeClicked}
                key={i}
                value={scope.value}
                name={scope.name}
            />
        ))}
</div>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
const UsersList = ({ users }) => (
  <section>
    <h2>Users list</h2>
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  </section>
);

const TodoList = ({ todos }) => (
  <div className='TodoList'>
    <ul>
      {_.map(todos, (todo, i) => (
        <TodoItem key={i} {...todo} />
      ))}
    </ul>
  </div>
);

<div className='search-filter-chips'>
  {scopes
    .filter(scope => scope.value !== "")
    .map((scope, i) => (
      <FilterChip
        query={this.props.query}
        onFilterChosen={this.onSearchScopeClicked}
        key={i}
        value={scope.value}
        name={scope.name}
      />
    ))}
</div>;

`;

exports[`array-iter.js - flow-verify 3`] = `
const UsersList = ({ users }) => (
  <section>
    <h2>Users list</h2>
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  </section>
)

const TodoList = ({ todos }) => (
  <div className="TodoList">
    <ul>{_.map(todos, (todo, i) => <TodoItem key={i} {...todo} />)}</ul>
  </div>
);

<div className="search-filter-chips">
    {scopes
        .filter(scope => scope.value !== '')
        .map((scope, i) => (
            <FilterChip
                query={this.props.query}
                onFilterChosen={this.onSearchScopeClicked}
                key={i}
                value={scope.value}
                name={scope.name}
            />
        ))}
</div>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
const UsersList = ({ users }) => (
  <section>
    <h2>Users list</h2>
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  </section>
);

const TodoList = ({ todos }) => (
  <div className="TodoList">
    <ul>
      {_.map(todos, (todo, i) => (
        <TodoItem key={i} {...todo} />
      ))}
    </ul>
  </div>
);

<div className="search-filter-chips">
  {scopes
    .filter(scope => scope.value !== '')
    .map((scope, i) => (
      <FilterChip
        query={this.props.query}
        onFilterChosen={this.onSearchScopeClicked}
        key={i}
        value={scope.value}
        name={scope.name}
      />
    ))}
</div>;

`;

exports[`array-iter.js - flow-verify 4`] = `
const UsersList = ({ users }) => (
  <section>
    <h2>Users list</h2>
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  </section>
)

const TodoList = ({ todos }) => (
  <div className="TodoList">
    <ul>{_.map(todos, (todo, i) => <TodoItem key={i} {...todo} />)}</ul>
  </div>
);

<div className="search-filter-chips">
    {scopes
        .filter(scope => scope.value !== '')
        .map((scope, i) => (
            <FilterChip
                query={this.props.query}
                onFilterChosen={this.onSearchScopeClicked}
                key={i}
                value={scope.value}
                name={scope.name}
            />
        ))}
</div>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
const UsersList = ({ users }) => (
  <section>
    <h2>Users list</h2>
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  </section>
);

const TodoList = ({ todos }) => (
  <div className='TodoList'>
    <ul>
      {_.map(todos, (todo, i) => (
        <TodoItem key={i} {...todo} />
      ))}
    </ul>
  </div>
);

<div className='search-filter-chips'>
  {scopes
    .filter(scope => scope.value !== '')
    .map((scope, i) => (
      <FilterChip
        query={this.props.query}
        onFilterChosen={this.onSearchScopeClicked}
        key={i}
        value={scope.value}
        name={scope.name}
      />
    ))}
</div>;

`;

exports[`attr-comments.js - flow-verify 1`] = `
<Component
  propFn={
    // comment
    function(arg) {
      fn(arg);
    }
  }
  propArrowFn={
    // comment
    arg => fn(arg)
  }
  propArrowWithBreak={
    // comment
    arg =>
      fn({
        makeItBreak
      })
  }
  propArray={
    // comment
    [el1, el2]
  }
  propObj={
    // comment
    { key: val }
  }
  propTemplate={
    // comment
    \`text\`
  }
/>;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<Component
  propFn={
    // comment
    function(arg) {
      fn(arg);
    }
  }
  propArrowFn={
    // comment
    arg => fn(arg)
  }
  propArrowWithBreak={
    // comment
    arg =>
      fn({
        makeItBreak
      })
  }
  propArray={
    // comment
    [el1, el2]
  }
  propObj={
    // comment
    { key: val }
  }
  propTemplate={
    // comment
    \`text\`
  }
/>;

`;

exports[`attr-comments.js - flow-verify 2`] = `
<Component
  propFn={
    // comment
    function(arg) {
      fn(arg);
    }
  }
  propArrowFn={
    // comment
    arg => fn(arg)
  }
  propArrowWithBreak={
    // comment
    arg =>
      fn({
        makeItBreak
      })
  }
  propArray={
    // comment
    [el1, el2]
  }
  propObj={
    // comment
    { key: val }
  }
  propTemplate={
    // comment
    \`text\`
  }
/>;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<Component
  propFn={
    // comment
    function(arg) {
      fn(arg);
    }
  }
  propArrowFn={
    // comment
    arg => fn(arg)
  }
  propArrowWithBreak={
    // comment
    arg =>
      fn({
        makeItBreak
      })
  }
  propArray={
    // comment
    [el1, el2]
  }
  propObj={
    // comment
    { key: val }
  }
  propTemplate={
    // comment
    \`text\`
  }
/>;

`;

exports[`attr-comments.js - flow-verify 3`] = `
<Component
  propFn={
    // comment
    function(arg) {
      fn(arg);
    }
  }
  propArrowFn={
    // comment
    arg => fn(arg)
  }
  propArrowWithBreak={
    // comment
    arg =>
      fn({
        makeItBreak
      })
  }
  propArray={
    // comment
    [el1, el2]
  }
  propObj={
    // comment
    { key: val }
  }
  propTemplate={
    // comment
    \`text\`
  }
/>;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<Component
  propFn={
    // comment
    function(arg) {
      fn(arg);
    }
  }
  propArrowFn={
    // comment
    arg => fn(arg)
  }
  propArrowWithBreak={
    // comment
    arg =>
      fn({
        makeItBreak
      })
  }
  propArray={
    // comment
    [el1, el2]
  }
  propObj={
    // comment
    { key: val }
  }
  propTemplate={
    // comment
    \`text\`
  }
/>;

`;

exports[`attr-comments.js - flow-verify 4`] = `
<Component
  propFn={
    // comment
    function(arg) {
      fn(arg);
    }
  }
  propArrowFn={
    // comment
    arg => fn(arg)
  }
  propArrowWithBreak={
    // comment
    arg =>
      fn({
        makeItBreak
      })
  }
  propArray={
    // comment
    [el1, el2]
  }
  propObj={
    // comment
    { key: val }
  }
  propTemplate={
    // comment
    \`text\`
  }
/>;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<Component
  propFn={
    // comment
    function(arg) {
      fn(arg);
    }
  }
  propArrowFn={
    // comment
    arg => fn(arg)
  }
  propArrowWithBreak={
    // comment
    arg =>
      fn({
        makeItBreak
      })
  }
  propArray={
    // comment
    [el1, el2]
  }
  propObj={
    // comment
    { key: val }
  }
  propTemplate={
    // comment
    \`text\`
  }
/>;

`;

exports[`conditional-expression.js - flow-verify 1`] = `
// There are two ways to print ConditionalExpressions: "normal mode" and
// "JSX mode". This is normal mode (when breaking):
//
//   test
//     ? consequent
//     : alternate;
//
// And this is JSX mode (when breaking):
//
//   test ? (
//     consequent
//   ) : (
//     alternate
//   );
//
// When non-breaking, they look the same:
//
//  test ? consequent : alternate;
//
// We only print a conditional expression in JSX mode if its test,
// consequent, or alternate are JSXElements.
// Otherwise, we print in normal mode.

// This ConditionalExpression has no JSXElements so it prints in normal mode.
// The line does not break.
normalModeNonBreaking ? "a" : "b";

// This ConditionalExpression has no JSXElements so it prints in normal mode.
// Its consequent is very long, so it breaks out to multiple lines.
normalModeBreaking
  ? johnJacobJingleHeimerSchmidtHisNameIsMyNameTooWheneverWeGoOutThePeopleAlwaysShoutThereGoesJohnJacobJingleHeimerSchmidtYaDaDaDaDaDaDa
  : "c";

// This ConditionalExpression prints in JSX mode because its test is a
// JSXElement. It is non-breaking.
// Note: I have never, ever seen someone use a JSXElement as the test in a
// ConditionalExpression. But this test is included for completeness.
<div /> ? jsxModeFromElementNonBreaking : "a";

// This ConditionalExpression prints in JSX mode because its consequent is a
// JSXElement. It is non-breaking.
jsxModeFromElementNonBreaking ? <div /> : "a";

// This ConditionalExpression prints in JSX mode because its alternate is a
// JSXElement. It is non-breaking.
jsxModeFromElementNonBreaking ? "a" : <div />;

// This ConditionalExpression prints in JSX mode because its test is a
// JSXElement. It is breaking.
// Note: I have never, ever seen someone use a JSXElement as the test in a
// ConditionalExpression. But this test is included for completeness.
<div>
  <span>thisIsASongAboutYourPoorSickPenguinHeHasAFeverAndHisToesAreBlueButIfISingToYourPoorSickPenguinHeWillFeelBetterInADayOrTwo</span>
</div>  ? (
  "jsx mode from element breaking"
) : (
  "a"
);

// This ConditionalExpression prints in JSX mode because its consequent is a
// JSXElement. It is breaking.
jsxModeFromElementBreaking ? (
  <div>
    <span>thisIsASongAboutYourPoorSickPenguinHeHasAFeverAndHisToesAreBlueButIfISingToYourPoorSickPenguinHeWillFeelBetterInADayOrTwo</span>
  </div>
) : (
  "a"
);

// This ConditionalExpression prints in JSX mode because its alternate is a
// JSXElement. It is breaking.
jsxModeFromElementBreaking ? (
  "a"
) : (
  <div>
    <span>thisIsASongAboutYourPoorSickPenguinHeHasAFeverAndHisToesAreBlueButIfISingToYourPoorSickPenguinHeWillFeelBetterInADayOrTwo</span>
  </div>
);

// This chain of ConditionalExpressions prints in JSX mode because the parent of
// the outermost ConditionalExpression is a JSXExpressionContainer. It is
// non-breaking.
<div>
  {a ? "a" : b ? "b" : "c"}
</div>;

// This chain of ConditionalExpressions prints in JSX mode because there is a
// JSX element somewhere in the chain. It is non-breaking.
cable ? "satellite" : public ? "affairs" : network ? <span id="c" /> : "dunno";

// This chain of ConditionalExpressions prints in JSX mode because there is a
// JSX element somewhere in the chain (in this case, at the end). It is
// breaking; notice the consequents and alternates in the entire chain get
// wrapped in parens.
cable ? (
  "satellite"
) : public ? (
  "affairs"
) : network ? (
  <div>
    <span>thisIsASongAboutYourPoorSickPenguinHeHasAFeverAndHisToesAreBlueButIfISingToYourPoorSickPenguinHeWillFeelBetterInADayOrTwo</span>
  </div>
) : "dunno";

// This chain of ConditionalExpressions prints in JSX mode because there is a
// JSX element somewhere in the chain (in this case, at the beginning). It is
// breaking; notice the consequents and alternates in the entire chain get
// wrapped in parens.
cable ? (
  <div>
    <span>thisIsASongAboutYourPoorSickPenguinHeHasAFeverAndHisToesAreBlueButIfISingToYourPoorSickPenguinHeWillFeelBetterInADayOrTwo</span>
  </div>
) : sateline ? (
  "public"
) : affairs ? (
  "network"
) : "dunno";

// This chain of ConditionalExpressions prints in JSX mode because there is a
// JSX element somewhere in the chain. It is breaking; notice the consequents
// and alternates in the entire chain get wrapped in parens.
<div>
  {properties.length > 1 ||
  (properties.length === 1 && properties[0].apps.size > 1) ? (
    draggingApp == null || newPropertyName == null ? (
      <MigrationPropertyListItem />
    ) : (
      <MigrationPropertyListItem apps={Immutable.List()} />
    )
  ) : null}
</div>;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
// There are two ways to print ConditionalExpressions: "normal mode" and
// "JSX mode". This is normal mode (when breaking):
//
//   test
//     ? consequent
//     : alternate;
//
// And this is JSX mode (when breaking):
//
//   test ? (
//     consequent
//   ) : (
//     alternate
//   );
//
// When non-breaking, they look the same:
//
//  test ? consequent : alternate;
//
// We only print a conditional expression in JSX mode if its test,
// consequent, or alternate are JSXElements.
// Otherwise, we print in normal mode.

// This ConditionalExpression has no JSXElements so it prints in normal mode.
// The line does not break.
normalModeNonBreaking ? "a" : "b";

// This ConditionalExpression has no JSXElements so it prints in normal mode.
// Its consequent is very long, so it breaks out to multiple lines.
normalModeBreaking
  ? johnJacobJingleHeimerSchmidtHisNameIsMyNameTooWheneverWeGoOutThePeopleAlwaysShoutThereGoesJohnJacobJingleHeimerSchmidtYaDaDaDaDaDaDa
  : "c";

// This ConditionalExpression prints in JSX mode because its test is a
// JSXElement. It is non-breaking.
// Note: I have never, ever seen someone use a JSXElement as the test in a
// ConditionalExpression. But this test is included for completeness.
<div /> ? jsxModeFromElementNonBreaking : "a";

// This ConditionalExpression prints in JSX mode because its consequent is a
// JSXElement. It is non-breaking.
jsxModeFromElementNonBreaking ? <div /> : "a";

// This ConditionalExpression prints in JSX mode because its alternate is a
// JSXElement. It is non-breaking.
jsxModeFromElementNonBreaking ? "a" : <div />;

// This ConditionalExpression prints in JSX mode because its test is a
// JSXElement. It is breaking.
// Note: I have never, ever seen someone use a JSXElement as the test in a
// ConditionalExpression. But this test is included for completeness.
<div>
  <span>
    thisIsASongAboutYourPoorSickPenguinHeHasAFeverAndHisToesAreBlueButIfISingToYourPoorSickPenguinHeWillFeelBetterInADayOrTwo
  </span>
</div> ? (
  "jsx mode from element breaking"
) : (
  "a"
);

// This ConditionalExpression prints in JSX mode because its consequent is a
// JSXElement. It is breaking.
jsxModeFromElementBreaking ? (
  <div>
    <span>
      thisIsASongAboutYourPoorSickPenguinHeHasAFeverAndHisToesAreBlueButIfISingToYourPoorSickPenguinHeWillFeelBetterInADayOrTwo
    </span>
  </div>
) : (
  "a"
);

// This ConditionalExpression prints in JSX mode because its alternate is a
// JSXElement. It is breaking.
jsxModeFromElementBreaking ? (
  "a"
) : (
  <div>
    <span>
      thisIsASongAboutYourPoorSickPenguinHeHasAFeverAndHisToesAreBlueButIfISingToYourPoorSickPenguinHeWillFeelBetterInADayOrTwo
    </span>
  </div>
);

// This chain of ConditionalExpressions prints in JSX mode because the parent of
// the outermost ConditionalExpression is a JSXExpressionContainer. It is
// non-breaking.
<div>{a ? "a" : b ? "b" : "c"}</div>;

// This chain of ConditionalExpressions prints in JSX mode because there is a
// JSX element somewhere in the chain. It is non-breaking.
cable ? "satellite" : public ? "affairs" : network ? <span id="c" /> : "dunno";

// This chain of ConditionalExpressions prints in JSX mode because there is a
// JSX element somewhere in the chain (in this case, at the end). It is
// breaking; notice the consequents and alternates in the entire chain get
// wrapped in parens.
cable ? (
  "satellite"
) : public ? (
  "affairs"
) : network ? (
  <div>
    <span>
      thisIsASongAboutYourPoorSickPenguinHeHasAFeverAndHisToesAreBlueButIfISingToYourPoorSickPenguinHeWillFeelBetterInADayOrTwo
    </span>
  </div>
) : (
  "dunno"
);

// This chain of ConditionalExpressions prints in JSX mode because there is a
// JSX element somewhere in the chain (in this case, at the beginning). It is
// breaking; notice the consequents and alternates in the entire chain get
// wrapped in parens.
cable ? (
  <div>
    <span>
      thisIsASongAboutYourPoorSickPenguinHeHasAFeverAndHisToesAreBlueButIfISingToYourPoorSickPenguinHeWillFeelBetterInADayOrTwo
    </span>
  </div>
) : sateline ? (
  "public"
) : affairs ? (
  "network"
) : (
  "dunno"
);

// This chain of ConditionalExpressions prints in JSX mode because there is a
// JSX element somewhere in the chain. It is breaking; notice the consequents
// and alternates in the entire chain get wrapped in parens.
<div>
  {properties.length > 1 ||
  (properties.length === 1 && properties[0].apps.size > 1) ? (
    draggingApp == null || newPropertyName == null ? (
      <MigrationPropertyListItem />
    ) : (
      <MigrationPropertyListItem apps={Immutable.List()} />
    )
  ) : null}
</div>;

`;

exports[`conditional-expression.js - flow-verify 2`] = `
// There are two ways to print ConditionalExpressions: "normal mode" and
// "JSX mode". This is normal mode (when breaking):
//
//   test
//     ? consequent
//     : alternate;
//
// And this is JSX mode (when breaking):
//
//   test ? (
//     consequent
//   ) : (
//     alternate
//   );
//
// When non-breaking, they look the same:
//
//  test ? consequent : alternate;
//
// We only print a conditional expression in JSX mode if its test,
// consequent, or alternate are JSXElements.
// Otherwise, we print in normal mode.

// This ConditionalExpression has no JSXElements so it prints in normal mode.
// The line does not break.
normalModeNonBreaking ? "a" : "b";

// This ConditionalExpression has no JSXElements so it prints in normal mode.
// Its consequent is very long, so it breaks out to multiple lines.
normalModeBreaking
  ? johnJacobJingleHeimerSchmidtHisNameIsMyNameTooWheneverWeGoOutThePeopleAlwaysShoutThereGoesJohnJacobJingleHeimerSchmidtYaDaDaDaDaDaDa
  : "c";

// This ConditionalExpression prints in JSX mode because its test is a
// JSXElement. It is non-breaking.
// Note: I have never, ever seen someone use a JSXElement as the test in a
// ConditionalExpression. But this test is included for completeness.
<div /> ? jsxModeFromElementNonBreaking : "a";

// This ConditionalExpression prints in JSX mode because its consequent is a
// JSXElement. It is non-breaking.
jsxModeFromElementNonBreaking ? <div /> : "a";

// This ConditionalExpression prints in JSX mode because its alternate is a
// JSXElement. It is non-breaking.
jsxModeFromElementNonBreaking ? "a" : <div />;

// This ConditionalExpression prints in JSX mode because its test is a
// JSXElement. It is breaking.
// Note: I have never, ever seen someone use a JSXElement as the test in a
// ConditionalExpression. But this test is included for completeness.
<div>
  <span>thisIsASongAboutYourPoorSickPenguinHeHasAFeverAndHisToesAreBlueButIfISingToYourPoorSickPenguinHeWillFeelBetterInADayOrTwo</span>
</div>  ? (
  "jsx mode from element breaking"
) : (
  "a"
);

// This ConditionalExpression prints in JSX mode because its consequent is a
// JSXElement. It is breaking.
jsxModeFromElementBreaking ? (
  <div>
    <span>thisIsASongAboutYourPoorSickPenguinHeHasAFeverAndHisToesAreBlueButIfISingToYourPoorSickPenguinHeWillFeelBetterInADayOrTwo</span>
  </div>
) : (
  "a"
);

// This ConditionalExpression prints in JSX mode because its alternate is a
// JSXElement. It is breaking.
jsxModeFromElementBreaking ? (
  "a"
) : (
  <div>
    <span>thisIsASongAboutYourPoorSickPenguinHeHasAFeverAndHisToesAreBlueButIfISingToYourPoorSickPenguinHeWillFeelBetterInADayOrTwo</span>
  </div>
);

// This chain of ConditionalExpressions prints in JSX mode because the parent of
// the outermost ConditionalExpression is a JSXExpressionContainer. It is
// non-breaking.
<div>
  {a ? "a" : b ? "b" : "c"}
</div>;

// This chain of ConditionalExpressions prints in JSX mode because there is a
// JSX element somewhere in the chain. It is non-breaking.
cable ? "satellite" : public ? "affairs" : network ? <span id="c" /> : "dunno";

// This chain of ConditionalExpressions prints in JSX mode because there is a
// JSX element somewhere in the chain (in this case, at the end). It is
// breaking; notice the consequents and alternates in the entire chain get
// wrapped in parens.
cable ? (
  "satellite"
) : public ? (
  "affairs"
) : network ? (
  <div>
    <span>thisIsASongAboutYourPoorSickPenguinHeHasAFeverAndHisToesAreBlueButIfISingToYourPoorSickPenguinHeWillFeelBetterInADayOrTwo</span>
  </div>
) : "dunno";

// This chain of ConditionalExpressions prints in JSX mode because there is a
// JSX element somewhere in the chain (in this case, at the beginning). It is
// breaking; notice the consequents and alternates in the entire chain get
// wrapped in parens.
cable ? (
  <div>
    <span>thisIsASongAboutYourPoorSickPenguinHeHasAFeverAndHisToesAreBlueButIfISingToYourPoorSickPenguinHeWillFeelBetterInADayOrTwo</span>
  </div>
) : sateline ? (
  "public"
) : affairs ? (
  "network"
) : "dunno";

// This chain of ConditionalExpressions prints in JSX mode because there is a
// JSX element somewhere in the chain. It is breaking; notice the consequents
// and alternates in the entire chain get wrapped in parens.
<div>
  {properties.length > 1 ||
  (properties.length === 1 && properties[0].apps.size > 1) ? (
    draggingApp == null || newPropertyName == null ? (
      <MigrationPropertyListItem />
    ) : (
      <MigrationPropertyListItem apps={Immutable.List()} />
    )
  ) : null}
</div>;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
// There are two ways to print ConditionalExpressions: "normal mode" and
// "JSX mode". This is normal mode (when breaking):
//
//   test
//     ? consequent
//     : alternate;
//
// And this is JSX mode (when breaking):
//
//   test ? (
//     consequent
//   ) : (
//     alternate
//   );
//
// When non-breaking, they look the same:
//
//  test ? consequent : alternate;
//
// We only print a conditional expression in JSX mode if its test,
// consequent, or alternate are JSXElements.
// Otherwise, we print in normal mode.

// This ConditionalExpression has no JSXElements so it prints in normal mode.
// The line does not break.
normalModeNonBreaking ? "a" : "b";

// This ConditionalExpression has no JSXElements so it prints in normal mode.
// Its consequent is very long, so it breaks out to multiple lines.
normalModeBreaking
  ? johnJacobJingleHeimerSchmidtHisNameIsMyNameTooWheneverWeGoOutThePeopleAlwaysShoutThereGoesJohnJacobJingleHeimerSchmidtYaDaDaDaDaDaDa
  : "c";

// This ConditionalExpression prints in JSX mode because its test is a
// JSXElement. It is non-breaking.
// Note: I have never, ever seen someone use a JSXElement as the test in a
// ConditionalExpression. But this test is included for completeness.
<div /> ? jsxModeFromElementNonBreaking : "a";

// This ConditionalExpression prints in JSX mode because its consequent is a
// JSXElement. It is non-breaking.
jsxModeFromElementNonBreaking ? <div /> : "a";

// This ConditionalExpression prints in JSX mode because its alternate is a
// JSXElement. It is non-breaking.
jsxModeFromElementNonBreaking ? "a" : <div />;

// This ConditionalExpression prints in JSX mode because its test is a
// JSXElement. It is breaking.
// Note: I have never, ever seen someone use a JSXElement as the test in a
// ConditionalExpression. But this test is included for completeness.
<div>
  <span>
    thisIsASongAboutYourPoorSickPenguinHeHasAFeverAndHisToesAreBlueButIfISingToYourPoorSickPenguinHeWillFeelBetterInADayOrTwo
  </span>
</div> ? (
  "jsx mode from element breaking"
) : (
  "a"
);

// This ConditionalExpression prints in JSX mode because its consequent is a
// JSXElement. It is breaking.
jsxModeFromElementBreaking ? (
  <div>
    <span>
      thisIsASongAboutYourPoorSickPenguinHeHasAFeverAndHisToesAreBlueButIfISingToYourPoorSickPenguinHeWillFeelBetterInADayOrTwo
    </span>
  </div>
) : (
  "a"
);

// This ConditionalExpression prints in JSX mode because its alternate is a
// JSXElement. It is breaking.
jsxModeFromElementBreaking ? (
  "a"
) : (
  <div>
    <span>
      thisIsASongAboutYourPoorSickPenguinHeHasAFeverAndHisToesAreBlueButIfISingToYourPoorSickPenguinHeWillFeelBetterInADayOrTwo
    </span>
  </div>
);

// This chain of ConditionalExpressions prints in JSX mode because the parent of
// the outermost ConditionalExpression is a JSXExpressionContainer. It is
// non-breaking.
<div>{a ? "a" : b ? "b" : "c"}</div>;

// This chain of ConditionalExpressions prints in JSX mode because there is a
// JSX element somewhere in the chain. It is non-breaking.
cable ? "satellite" : public ? "affairs" : network ? <span id='c' /> : "dunno";

// This chain of ConditionalExpressions prints in JSX mode because there is a
// JSX element somewhere in the chain (in this case, at the end). It is
// breaking; notice the consequents and alternates in the entire chain get
// wrapped in parens.
cable ? (
  "satellite"
) : public ? (
  "affairs"
) : network ? (
  <div>
    <span>
      thisIsASongAboutYourPoorSickPenguinHeHasAFeverAndHisToesAreBlueButIfISingToYourPoorSickPenguinHeWillFeelBetterInADayOrTwo
    </span>
  </div>
) : (
  "dunno"
);

// This chain of ConditionalExpressions prints in JSX mode because there is a
// JSX element somewhere in the chain (in this case, at the beginning). It is
// breaking; notice the consequents and alternates in the entire chain get
// wrapped in parens.
cable ? (
  <div>
    <span>
      thisIsASongAboutYourPoorSickPenguinHeHasAFeverAndHisToesAreBlueButIfISingToYourPoorSickPenguinHeWillFeelBetterInADayOrTwo
    </span>
  </div>
) : sateline ? (
  "public"
) : affairs ? (
  "network"
) : (
  "dunno"
);

// This chain of ConditionalExpressions prints in JSX mode because there is a
// JSX element somewhere in the chain. It is breaking; notice the consequents
// and alternates in the entire chain get wrapped in parens.
<div>
  {properties.length > 1 ||
  (properties.length === 1 && properties[0].apps.size > 1) ? (
    draggingApp == null || newPropertyName == null ? (
      <MigrationPropertyListItem />
    ) : (
      <MigrationPropertyListItem apps={Immutable.List()} />
    )
  ) : null}
</div>;

`;

exports[`conditional-expression.js - flow-verify 3`] = `
// There are two ways to print ConditionalExpressions: "normal mode" and
// "JSX mode". This is normal mode (when breaking):
//
//   test
//     ? consequent
//     : alternate;
//
// And this is JSX mode (when breaking):
//
//   test ? (
//     consequent
//   ) : (
//     alternate
//   );
//
// When non-breaking, they look the same:
//
//  test ? consequent : alternate;
//
// We only print a conditional expression in JSX mode if its test,
// consequent, or alternate are JSXElements.
// Otherwise, we print in normal mode.

// This ConditionalExpression has no JSXElements so it prints in normal mode.
// The line does not break.
normalModeNonBreaking ? "a" : "b";

// This ConditionalExpression has no JSXElements so it prints in normal mode.
// Its consequent is very long, so it breaks out to multiple lines.
normalModeBreaking
  ? johnJacobJingleHeimerSchmidtHisNameIsMyNameTooWheneverWeGoOutThePeopleAlwaysShoutThereGoesJohnJacobJingleHeimerSchmidtYaDaDaDaDaDaDa
  : "c";

// This ConditionalExpression prints in JSX mode because its test is a
// JSXElement. It is non-breaking.
// Note: I have never, ever seen someone use a JSXElement as the test in a
// ConditionalExpression. But this test is included for completeness.
<div /> ? jsxModeFromElementNonBreaking : "a";

// This ConditionalExpression prints in JSX mode because its consequent is a
// JSXElement. It is non-breaking.
jsxModeFromElementNonBreaking ? <div /> : "a";

// This ConditionalExpression prints in JSX mode because its alternate is a
// JSXElement. It is non-breaking.
jsxModeFromElementNonBreaking ? "a" : <div />;

// This ConditionalExpression prints in JSX mode because its test is a
// JSXElement. It is breaking.
// Note: I have never, ever seen someone use a JSXElement as the test in a
// ConditionalExpression. But this test is included for completeness.
<div>
  <span>thisIsASongAboutYourPoorSickPenguinHeHasAFeverAndHisToesAreBlueButIfISingToYourPoorSickPenguinHeWillFeelBetterInADayOrTwo</span>
</div>  ? (
  "jsx mode from element breaking"
) : (
  "a"
);

// This ConditionalExpression prints in JSX mode because its consequent is a
// JSXElement. It is breaking.
jsxModeFromElementBreaking ? (
  <div>
    <span>thisIsASongAboutYourPoorSickPenguinHeHasAFeverAndHisToesAreBlueButIfISingToYourPoorSickPenguinHeWillFeelBetterInADayOrTwo</span>
  </div>
) : (
  "a"
);

// This ConditionalExpression prints in JSX mode because its alternate is a
// JSXElement. It is breaking.
jsxModeFromElementBreaking ? (
  "a"
) : (
  <div>
    <span>thisIsASongAboutYourPoorSickPenguinHeHasAFeverAndHisToesAreBlueButIfISingToYourPoorSickPenguinHeWillFeelBetterInADayOrTwo</span>
  </div>
);

// This chain of ConditionalExpressions prints in JSX mode because the parent of
// the outermost ConditionalExpression is a JSXExpressionContainer. It is
// non-breaking.
<div>
  {a ? "a" : b ? "b" : "c"}
</div>;

// This chain of ConditionalExpressions prints in JSX mode because there is a
// JSX element somewhere in the chain. It is non-breaking.
cable ? "satellite" : public ? "affairs" : network ? <span id="c" /> : "dunno";

// This chain of ConditionalExpressions prints in JSX mode because there is a
// JSX element somewhere in the chain (in this case, at the end). It is
// breaking; notice the consequents and alternates in the entire chain get
// wrapped in parens.
cable ? (
  "satellite"
) : public ? (
  "affairs"
) : network ? (
  <div>
    <span>thisIsASongAboutYourPoorSickPenguinHeHasAFeverAndHisToesAreBlueButIfISingToYourPoorSickPenguinHeWillFeelBetterInADayOrTwo</span>
  </div>
) : "dunno";

// This chain of ConditionalExpressions prints in JSX mode because there is a
// JSX element somewhere in the chain (in this case, at the beginning). It is
// breaking; notice the consequents and alternates in the entire chain get
// wrapped in parens.
cable ? (
  <div>
    <span>thisIsASongAboutYourPoorSickPenguinHeHasAFeverAndHisToesAreBlueButIfISingToYourPoorSickPenguinHeWillFeelBetterInADayOrTwo</span>
  </div>
) : sateline ? (
  "public"
) : affairs ? (
  "network"
) : "dunno";

// This chain of ConditionalExpressions prints in JSX mode because there is a
// JSX element somewhere in the chain. It is breaking; notice the consequents
// and alternates in the entire chain get wrapped in parens.
<div>
  {properties.length > 1 ||
  (properties.length === 1 && properties[0].apps.size > 1) ? (
    draggingApp == null || newPropertyName == null ? (
      <MigrationPropertyListItem />
    ) : (
      <MigrationPropertyListItem apps={Immutable.List()} />
    )
  ) : null}
</div>;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
// There are two ways to print ConditionalExpressions: "normal mode" and
// "JSX mode". This is normal mode (when breaking):
//
//   test
//     ? consequent
//     : alternate;
//
// And this is JSX mode (when breaking):
//
//   test ? (
//     consequent
//   ) : (
//     alternate
//   );
//
// When non-breaking, they look the same:
//
//  test ? consequent : alternate;
//
// We only print a conditional expression in JSX mode if its test,
// consequent, or alternate are JSXElements.
// Otherwise, we print in normal mode.

// This ConditionalExpression has no JSXElements so it prints in normal mode.
// The line does not break.
normalModeNonBreaking ? 'a' : 'b';

// This ConditionalExpression has no JSXElements so it prints in normal mode.
// Its consequent is very long, so it breaks out to multiple lines.
normalModeBreaking
  ? johnJacobJingleHeimerSchmidtHisNameIsMyNameTooWheneverWeGoOutThePeopleAlwaysShoutThereGoesJohnJacobJingleHeimerSchmidtYaDaDaDaDaDaDa
  : 'c';

// This ConditionalExpression prints in JSX mode because its test is a
// JSXElement. It is non-breaking.
// Note: I have never, ever seen someone use a JSXElement as the test in a
// ConditionalExpression. But this test is included for completeness.
<div /> ? jsxModeFromElementNonBreaking : 'a';

// This ConditionalExpression prints in JSX mode because its consequent is a
// JSXElement. It is non-breaking.
jsxModeFromElementNonBreaking ? <div /> : 'a';

// This ConditionalExpression prints in JSX mode because its alternate is a
// JSXElement. It is non-breaking.
jsxModeFromElementNonBreaking ? 'a' : <div />;

// This ConditionalExpression prints in JSX mode because its test is a
// JSXElement. It is breaking.
// Note: I have never, ever seen someone use a JSXElement as the test in a
// ConditionalExpression. But this test is included for completeness.
<div>
  <span>
    thisIsASongAboutYourPoorSickPenguinHeHasAFeverAndHisToesAreBlueButIfISingToYourPoorSickPenguinHeWillFeelBetterInADayOrTwo
  </span>
</div> ? (
  'jsx mode from element breaking'
) : (
  'a'
);

// This ConditionalExpression prints in JSX mode because its consequent is a
// JSXElement. It is breaking.
jsxModeFromElementBreaking ? (
  <div>
    <span>
      thisIsASongAboutYourPoorSickPenguinHeHasAFeverAndHisToesAreBlueButIfISingToYourPoorSickPenguinHeWillFeelBetterInADayOrTwo
    </span>
  </div>
) : (
  'a'
);

// This ConditionalExpression prints in JSX mode because its alternate is a
// JSXElement. It is breaking.
jsxModeFromElementBreaking ? (
  'a'
) : (
  <div>
    <span>
      thisIsASongAboutYourPoorSickPenguinHeHasAFeverAndHisToesAreBlueButIfISingToYourPoorSickPenguinHeWillFeelBetterInADayOrTwo
    </span>
  </div>
);

// This chain of ConditionalExpressions prints in JSX mode because the parent of
// the outermost ConditionalExpression is a JSXExpressionContainer. It is
// non-breaking.
<div>{a ? 'a' : b ? 'b' : 'c'}</div>;

// This chain of ConditionalExpressions prints in JSX mode because there is a
// JSX element somewhere in the chain. It is non-breaking.
cable ? 'satellite' : public ? 'affairs' : network ? <span id="c" /> : 'dunno';

// This chain of ConditionalExpressions prints in JSX mode because there is a
// JSX element somewhere in the chain (in this case, at the end). It is
// breaking; notice the consequents and alternates in the entire chain get
// wrapped in parens.
cable ? (
  'satellite'
) : public ? (
  'affairs'
) : network ? (
  <div>
    <span>
      thisIsASongAboutYourPoorSickPenguinHeHasAFeverAndHisToesAreBlueButIfISingToYourPoorSickPenguinHeWillFeelBetterInADayOrTwo
    </span>
  </div>
) : (
  'dunno'
);

// This chain of ConditionalExpressions prints in JSX mode because there is a
// JSX element somewhere in the chain (in this case, at the beginning). It is
// breaking; notice the consequents and alternates in the entire chain get
// wrapped in parens.
cable ? (
  <div>
    <span>
      thisIsASongAboutYourPoorSickPenguinHeHasAFeverAndHisToesAreBlueButIfISingToYourPoorSickPenguinHeWillFeelBetterInADayOrTwo
    </span>
  </div>
) : sateline ? (
  'public'
) : affairs ? (
  'network'
) : (
  'dunno'
);

// This chain of ConditionalExpressions prints in JSX mode because there is a
// JSX element somewhere in the chain. It is breaking; notice the consequents
// and alternates in the entire chain get wrapped in parens.
<div>
  {properties.length > 1 ||
  (properties.length === 1 && properties[0].apps.size > 1) ? (
    draggingApp == null || newPropertyName == null ? (
      <MigrationPropertyListItem />
    ) : (
      <MigrationPropertyListItem apps={Immutable.List()} />
    )
  ) : null}
</div>;

`;

exports[`conditional-expression.js - flow-verify 4`] = `
// There are two ways to print ConditionalExpressions: "normal mode" and
// "JSX mode". This is normal mode (when breaking):
//
//   test
//     ? consequent
//     : alternate;
//
// And this is JSX mode (when breaking):
//
//   test ? (
//     consequent
//   ) : (
//     alternate
//   );
//
// When non-breaking, they look the same:
//
//  test ? consequent : alternate;
//
// We only print a conditional expression in JSX mode if its test,
// consequent, or alternate are JSXElements.
// Otherwise, we print in normal mode.

// This ConditionalExpression has no JSXElements so it prints in normal mode.
// The line does not break.
normalModeNonBreaking ? "a" : "b";

// This ConditionalExpression has no JSXElements so it prints in normal mode.
// Its consequent is very long, so it breaks out to multiple lines.
normalModeBreaking
  ? johnJacobJingleHeimerSchmidtHisNameIsMyNameTooWheneverWeGoOutThePeopleAlwaysShoutThereGoesJohnJacobJingleHeimerSchmidtYaDaDaDaDaDaDa
  : "c";

// This ConditionalExpression prints in JSX mode because its test is a
// JSXElement. It is non-breaking.
// Note: I have never, ever seen someone use a JSXElement as the test in a
// ConditionalExpression. But this test is included for completeness.
<div /> ? jsxModeFromElementNonBreaking : "a";

// This ConditionalExpression prints in JSX mode because its consequent is a
// JSXElement. It is non-breaking.
jsxModeFromElementNonBreaking ? <div /> : "a";

// This ConditionalExpression prints in JSX mode because its alternate is a
// JSXElement. It is non-breaking.
jsxModeFromElementNonBreaking ? "a" : <div />;

// This ConditionalExpression prints in JSX mode because its test is a
// JSXElement. It is breaking.
// Note: I have never, ever seen someone use a JSXElement as the test in a
// ConditionalExpression. But this test is included for completeness.
<div>
  <span>thisIsASongAboutYourPoorSickPenguinHeHasAFeverAndHisToesAreBlueButIfISingToYourPoorSickPenguinHeWillFeelBetterInADayOrTwo</span>
</div>  ? (
  "jsx mode from element breaking"
) : (
  "a"
);

// This ConditionalExpression prints in JSX mode because its consequent is a
// JSXElement. It is breaking.
jsxModeFromElementBreaking ? (
  <div>
    <span>thisIsASongAboutYourPoorSickPenguinHeHasAFeverAndHisToesAreBlueButIfISingToYourPoorSickPenguinHeWillFeelBetterInADayOrTwo</span>
  </div>
) : (
  "a"
);

// This ConditionalExpression prints in JSX mode because its alternate is a
// JSXElement. It is breaking.
jsxModeFromElementBreaking ? (
  "a"
) : (
  <div>
    <span>thisIsASongAboutYourPoorSickPenguinHeHasAFeverAndHisToesAreBlueButIfISingToYourPoorSickPenguinHeWillFeelBetterInADayOrTwo</span>
  </div>
);

// This chain of ConditionalExpressions prints in JSX mode because the parent of
// the outermost ConditionalExpression is a JSXExpressionContainer. It is
// non-breaking.
<div>
  {a ? "a" : b ? "b" : "c"}
</div>;

// This chain of ConditionalExpressions prints in JSX mode because there is a
// JSX element somewhere in the chain. It is non-breaking.
cable ? "satellite" : public ? "affairs" : network ? <span id="c" /> : "dunno";

// This chain of ConditionalExpressions prints in JSX mode because there is a
// JSX element somewhere in the chain (in this case, at the end). It is
// breaking; notice the consequents and alternates in the entire chain get
// wrapped in parens.
cable ? (
  "satellite"
) : public ? (
  "affairs"
) : network ? (
  <div>
    <span>thisIsASongAboutYourPoorSickPenguinHeHasAFeverAndHisToesAreBlueButIfISingToYourPoorSickPenguinHeWillFeelBetterInADayOrTwo</span>
  </div>
) : "dunno";

// This chain of ConditionalExpressions prints in JSX mode because there is a
// JSX element somewhere in the chain (in this case, at the beginning). It is
// breaking; notice the consequents and alternates in the entire chain get
// wrapped in parens.
cable ? (
  <div>
    <span>thisIsASongAboutYourPoorSickPenguinHeHasAFeverAndHisToesAreBlueButIfISingToYourPoorSickPenguinHeWillFeelBetterInADayOrTwo</span>
  </div>
) : sateline ? (
  "public"
) : affairs ? (
  "network"
) : "dunno";

// This chain of ConditionalExpressions prints in JSX mode because there is a
// JSX element somewhere in the chain. It is breaking; notice the consequents
// and alternates in the entire chain get wrapped in parens.
<div>
  {properties.length > 1 ||
  (properties.length === 1 && properties[0].apps.size > 1) ? (
    draggingApp == null || newPropertyName == null ? (
      <MigrationPropertyListItem />
    ) : (
      <MigrationPropertyListItem apps={Immutable.List()} />
    )
  ) : null}
</div>;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
// There are two ways to print ConditionalExpressions: "normal mode" and
// "JSX mode". This is normal mode (when breaking):
//
//   test
//     ? consequent
//     : alternate;
//
// And this is JSX mode (when breaking):
//
//   test ? (
//     consequent
//   ) : (
//     alternate
//   );
//
// When non-breaking, they look the same:
//
//  test ? consequent : alternate;
//
// We only print a conditional expression in JSX mode if its test,
// consequent, or alternate are JSXElements.
// Otherwise, we print in normal mode.

// This ConditionalExpression has no JSXElements so it prints in normal mode.
// The line does not break.
normalModeNonBreaking ? 'a' : 'b';

// This ConditionalExpression has no JSXElements so it prints in normal mode.
// Its consequent is very long, so it breaks out to multiple lines.
normalModeBreaking
  ? johnJacobJingleHeimerSchmidtHisNameIsMyNameTooWheneverWeGoOutThePeopleAlwaysShoutThereGoesJohnJacobJingleHeimerSchmidtYaDaDaDaDaDaDa
  : 'c';

// This ConditionalExpression prints in JSX mode because its test is a
// JSXElement. It is non-breaking.
// Note: I have never, ever seen someone use a JSXElement as the test in a
// ConditionalExpression. But this test is included for completeness.
<div /> ? jsxModeFromElementNonBreaking : 'a';

// This ConditionalExpression prints in JSX mode because its consequent is a
// JSXElement. It is non-breaking.
jsxModeFromElementNonBreaking ? <div /> : 'a';

// This ConditionalExpression prints in JSX mode because its alternate is a
// JSXElement. It is non-breaking.
jsxModeFromElementNonBreaking ? 'a' : <div />;

// This ConditionalExpression prints in JSX mode because its test is a
// JSXElement. It is breaking.
// Note: I have never, ever seen someone use a JSXElement as the test in a
// ConditionalExpression. But this test is included for completeness.
<div>
  <span>
    thisIsASongAboutYourPoorSickPenguinHeHasAFeverAndHisToesAreBlueButIfISingToYourPoorSickPenguinHeWillFeelBetterInADayOrTwo
  </span>
</div> ? (
  'jsx mode from element breaking'
) : (
  'a'
);

// This ConditionalExpression prints in JSX mode because its consequent is a
// JSXElement. It is breaking.
jsxModeFromElementBreaking ? (
  <div>
    <span>
      thisIsASongAboutYourPoorSickPenguinHeHasAFeverAndHisToesAreBlueButIfISingToYourPoorSickPenguinHeWillFeelBetterInADayOrTwo
    </span>
  </div>
) : (
  'a'
);

// This ConditionalExpression prints in JSX mode because its alternate is a
// JSXElement. It is breaking.
jsxModeFromElementBreaking ? (
  'a'
) : (
  <div>
    <span>
      thisIsASongAboutYourPoorSickPenguinHeHasAFeverAndHisToesAreBlueButIfISingToYourPoorSickPenguinHeWillFeelBetterInADayOrTwo
    </span>
  </div>
);

// This chain of ConditionalExpressions prints in JSX mode because the parent of
// the outermost ConditionalExpression is a JSXExpressionContainer. It is
// non-breaking.
<div>{a ? 'a' : b ? 'b' : 'c'}</div>;

// This chain of ConditionalExpressions prints in JSX mode because there is a
// JSX element somewhere in the chain. It is non-breaking.
cable ? 'satellite' : public ? 'affairs' : network ? <span id='c' /> : 'dunno';

// This chain of ConditionalExpressions prints in JSX mode because there is a
// JSX element somewhere in the chain (in this case, at the end). It is
// breaking; notice the consequents and alternates in the entire chain get
// wrapped in parens.
cable ? (
  'satellite'
) : public ? (
  'affairs'
) : network ? (
  <div>
    <span>
      thisIsASongAboutYourPoorSickPenguinHeHasAFeverAndHisToesAreBlueButIfISingToYourPoorSickPenguinHeWillFeelBetterInADayOrTwo
    </span>
  </div>
) : (
  'dunno'
);

// This chain of ConditionalExpressions prints in JSX mode because there is a
// JSX element somewhere in the chain (in this case, at the beginning). It is
// breaking; notice the consequents and alternates in the entire chain get
// wrapped in parens.
cable ? (
  <div>
    <span>
      thisIsASongAboutYourPoorSickPenguinHeHasAFeverAndHisToesAreBlueButIfISingToYourPoorSickPenguinHeWillFeelBetterInADayOrTwo
    </span>
  </div>
) : sateline ? (
  'public'
) : affairs ? (
  'network'
) : (
  'dunno'
);

// This chain of ConditionalExpressions prints in JSX mode because there is a
// JSX element somewhere in the chain. It is breaking; notice the consequents
// and alternates in the entire chain get wrapped in parens.
<div>
  {properties.length > 1 ||
  (properties.length === 1 && properties[0].apps.size > 1) ? (
    draggingApp == null || newPropertyName == null ? (
      <MigrationPropertyListItem />
    ) : (
      <MigrationPropertyListItem apps={Immutable.List()} />
    )
  ) : null}
</div>;

`;

exports[`expression.js - flow-verify 1`] = `
<View
  style={
    {
      someVeryLongStyle1: "true",
      someVeryLongStyle2: "true",
      someVeryLongStyle3: "true",
      someVeryLongStyle4: "true"
    }
  }
/>;

<View
  style={
    [
      {
        someVeryLongStyle1: "true",
        someVeryLongStyle2: "true",
        someVeryLongStyle3: "true",
        someVeryLongStyle4: "true"
      }
    ]
  }
/>;

<Something>
  {() => (
    <SomethingElse>
      <span />
    </SomethingElse>
  )}
</Something>;

<Something>
  {items.map(item => (
    <SomethingElse>
      <span />
    </SomethingElse>
  ))}
</Something>;

<Something>
  {function() {
    return (
      <SomethingElse>
        <span />
      </SomethingElse>
    );
  }}
</Something>;

<RadioListItem
  key={option}
  imageSource={this.props.veryBigItemImageSourceFunc &&
    this.props.veryBigItemImageSourceFunc(option)}
  imageSize={this.props.veryBigItemImageSize}
  imageView={this.props.veryBigItemImageViewFunc &&
    this.props.veryBigItemImageViewFunc(option)}
  heading={this.props.displayTextFunc(option)}
  value={option}
/>;

<ParentComponent prop={
  <Child>
    test
  </Child>
}/>;

<BookingIntroPanel
  prop="long_string_make_to_force_break"
  logClick={data => doLogClick("short", "short", data)}
/>;

<BookingIntroPanel
  logClick={data =>
    doLogClick("long_name_long_name_long_name", "long_name_long_name_long_name", data)
  }
/>;

<BookingIntroPanel
  logClick={data => {
    doLogClick("long_name_long_name_long_name", "long_name_long_name_long_name", data)
  }}
/>;

<Component
  onChange={(
    key: "possible_key_1" | "possible_key_2" | "possible_key_3",
    value: string | Immutable.List<string>,
  ) => {
    this.setState({
      updatedTask: this.state.updatedTask.set(key, value)
    });
  }}
/>;

<BookingIntroPanel>
  {data => doLogClick("short", "short", data)}
</BookingIntroPanel>;

<BookingIntroPanel>
  {data =>
    doLogClick("long_name_long_name_long_name", "long_name_long_name_long_name", data)
  }
</BookingIntroPanel>;

<BookingIntroPanel>
  {data => {
    doLogClick("long_name_long_name_long_name", "long_name_long_name_long_name", data)
  }}
</BookingIntroPanel>;

<Component>
  {(
    key: "possible_key_1" | "possible_key_2" | "possible_key_3",
    value: string | Immutable.List<string>,
  ) => {
    this.setState({
      updatedTask: this.state.updatedTask.set(key, value)
    });
  }}
</Component>;

<SuspendyTree>
  <div style={{ height: 200, overflow: "scroll" }}>
    {Array(20)
      .fill()
      .map((_, i) => (
        <h2 key={i}>{i + 1}</h2>
      ))}
  </div>
</SuspendyTree>;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<View
  style={{
    someVeryLongStyle1: "true",
    someVeryLongStyle2: "true",
    someVeryLongStyle3: "true",
    someVeryLongStyle4: "true"
  }}
/>;

<View
  style={[
    {
      someVeryLongStyle1: "true",
      someVeryLongStyle2: "true",
      someVeryLongStyle3: "true",
      someVeryLongStyle4: "true"
    }
  ]}
/>;

<Something>
  {() => (
    <SomethingElse>
      <span />
    </SomethingElse>
  )}
</Something>;

<Something>
  {items.map(item => (
    <SomethingElse>
      <span />
    </SomethingElse>
  ))}
</Something>;

<Something>
  {function() {
    return (
      <SomethingElse>
        <span />
      </SomethingElse>
    );
  }}
</Something>;

<RadioListItem
  key={option}
  imageSource={
    this.props.veryBigItemImageSourceFunc &&
    this.props.veryBigItemImageSourceFunc(option)
  }
  imageSize={this.props.veryBigItemImageSize}
  imageView={
    this.props.veryBigItemImageViewFunc &&
    this.props.veryBigItemImageViewFunc(option)
  }
  heading={this.props.displayTextFunc(option)}
  value={option}
/>;

<ParentComponent prop={<Child>test</Child>} />;

<BookingIntroPanel
  prop="long_string_make_to_force_break"
  logClick={data => doLogClick("short", "short", data)}
/>;

<BookingIntroPanel
  logClick={data =>
    doLogClick(
      "long_name_long_name_long_name",
      "long_name_long_name_long_name",
      data
    )
  }
/>;

<BookingIntroPanel
  logClick={data => {
    doLogClick(
      "long_name_long_name_long_name",
      "long_name_long_name_long_name",
      data
    );
  }}
/>;

<Component
  onChange={(
    key: "possible_key_1" | "possible_key_2" | "possible_key_3",
    value: string | Immutable.List<string>
  ) => {
    this.setState({
      updatedTask: this.state.updatedTask.set(key, value)
    });
  }}
/>;

<BookingIntroPanel>
  {data => doLogClick("short", "short", data)}
</BookingIntroPanel>;

<BookingIntroPanel>
  {data =>
    doLogClick(
      "long_name_long_name_long_name",
      "long_name_long_name_long_name",
      data
    )
  }
</BookingIntroPanel>;

<BookingIntroPanel>
  {data => {
    doLogClick(
      "long_name_long_name_long_name",
      "long_name_long_name_long_name",
      data
    );
  }}
</BookingIntroPanel>;

<Component>
  {(
    key: "possible_key_1" | "possible_key_2" | "possible_key_3",
    value: string | Immutable.List<string>
  ) => {
    this.setState({
      updatedTask: this.state.updatedTask.set(key, value)
    });
  }}
</Component>;

<SuspendyTree>
  <div style={{ height: 200, overflow: "scroll" }}>
    {Array(20)
      .fill()
      .map((_, i) => (
        <h2 key={i}>{i + 1}</h2>
      ))}
  </div>
</SuspendyTree>;

`;

exports[`expression.js - flow-verify 2`] = `
<View
  style={
    {
      someVeryLongStyle1: "true",
      someVeryLongStyle2: "true",
      someVeryLongStyle3: "true",
      someVeryLongStyle4: "true"
    }
  }
/>;

<View
  style={
    [
      {
        someVeryLongStyle1: "true",
        someVeryLongStyle2: "true",
        someVeryLongStyle3: "true",
        someVeryLongStyle4: "true"
      }
    ]
  }
/>;

<Something>
  {() => (
    <SomethingElse>
      <span />
    </SomethingElse>
  )}
</Something>;

<Something>
  {items.map(item => (
    <SomethingElse>
      <span />
    </SomethingElse>
  ))}
</Something>;

<Something>
  {function() {
    return (
      <SomethingElse>
        <span />
      </SomethingElse>
    );
  }}
</Something>;

<RadioListItem
  key={option}
  imageSource={this.props.veryBigItemImageSourceFunc &&
    this.props.veryBigItemImageSourceFunc(option)}
  imageSize={this.props.veryBigItemImageSize}
  imageView={this.props.veryBigItemImageViewFunc &&
    this.props.veryBigItemImageViewFunc(option)}
  heading={this.props.displayTextFunc(option)}
  value={option}
/>;

<ParentComponent prop={
  <Child>
    test
  </Child>
}/>;

<BookingIntroPanel
  prop="long_string_make_to_force_break"
  logClick={data => doLogClick("short", "short", data)}
/>;

<BookingIntroPanel
  logClick={data =>
    doLogClick("long_name_long_name_long_name", "long_name_long_name_long_name", data)
  }
/>;

<BookingIntroPanel
  logClick={data => {
    doLogClick("long_name_long_name_long_name", "long_name_long_name_long_name", data)
  }}
/>;

<Component
  onChange={(
    key: "possible_key_1" | "possible_key_2" | "possible_key_3",
    value: string | Immutable.List<string>,
  ) => {
    this.setState({
      updatedTask: this.state.updatedTask.set(key, value)
    });
  }}
/>;

<BookingIntroPanel>
  {data => doLogClick("short", "short", data)}
</BookingIntroPanel>;

<BookingIntroPanel>
  {data =>
    doLogClick("long_name_long_name_long_name", "long_name_long_name_long_name", data)
  }
</BookingIntroPanel>;

<BookingIntroPanel>
  {data => {
    doLogClick("long_name_long_name_long_name", "long_name_long_name_long_name", data)
  }}
</BookingIntroPanel>;

<Component>
  {(
    key: "possible_key_1" | "possible_key_2" | "possible_key_3",
    value: string | Immutable.List<string>,
  ) => {
    this.setState({
      updatedTask: this.state.updatedTask.set(key, value)
    });
  }}
</Component>;

<SuspendyTree>
  <div style={{ height: 200, overflow: "scroll" }}>
    {Array(20)
      .fill()
      .map((_, i) => (
        <h2 key={i}>{i + 1}</h2>
      ))}
  </div>
</SuspendyTree>;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<View
  style={{
    someVeryLongStyle1: "true",
    someVeryLongStyle2: "true",
    someVeryLongStyle3: "true",
    someVeryLongStyle4: "true"
  }}
/>;

<View
  style={[
    {
      someVeryLongStyle1: "true",
      someVeryLongStyle2: "true",
      someVeryLongStyle3: "true",
      someVeryLongStyle4: "true"
    }
  ]}
/>;

<Something>
  {() => (
    <SomethingElse>
      <span />
    </SomethingElse>
  )}
</Something>;

<Something>
  {items.map(item => (
    <SomethingElse>
      <span />
    </SomethingElse>
  ))}
</Something>;

<Something>
  {function() {
    return (
      <SomethingElse>
        <span />
      </SomethingElse>
    );
  }}
</Something>;

<RadioListItem
  key={option}
  imageSource={
    this.props.veryBigItemImageSourceFunc &&
    this.props.veryBigItemImageSourceFunc(option)
  }
  imageSize={this.props.veryBigItemImageSize}
  imageView={
    this.props.veryBigItemImageViewFunc &&
    this.props.veryBigItemImageViewFunc(option)
  }
  heading={this.props.displayTextFunc(option)}
  value={option}
/>;

<ParentComponent prop={<Child>test</Child>} />;

<BookingIntroPanel
  prop='long_string_make_to_force_break'
  logClick={data => doLogClick("short", "short", data)}
/>;

<BookingIntroPanel
  logClick={data =>
    doLogClick(
      "long_name_long_name_long_name",
      "long_name_long_name_long_name",
      data
    )
  }
/>;

<BookingIntroPanel
  logClick={data => {
    doLogClick(
      "long_name_long_name_long_name",
      "long_name_long_name_long_name",
      data
    );
  }}
/>;

<Component
  onChange={(
    key: "possible_key_1" | "possible_key_2" | "possible_key_3",
    value: string | Immutable.List<string>
  ) => {
    this.setState({
      updatedTask: this.state.updatedTask.set(key, value)
    });
  }}
/>;

<BookingIntroPanel>
  {data => doLogClick("short", "short", data)}
</BookingIntroPanel>;

<BookingIntroPanel>
  {data =>
    doLogClick(
      "long_name_long_name_long_name",
      "long_name_long_name_long_name",
      data
    )
  }
</BookingIntroPanel>;

<BookingIntroPanel>
  {data => {
    doLogClick(
      "long_name_long_name_long_name",
      "long_name_long_name_long_name",
      data
    );
  }}
</BookingIntroPanel>;

<Component>
  {(
    key: "possible_key_1" | "possible_key_2" | "possible_key_3",
    value: string | Immutable.List<string>
  ) => {
    this.setState({
      updatedTask: this.state.updatedTask.set(key, value)
    });
  }}
</Component>;

<SuspendyTree>
  <div style={{ height: 200, overflow: "scroll" }}>
    {Array(20)
      .fill()
      .map((_, i) => (
        <h2 key={i}>{i + 1}</h2>
      ))}
  </div>
</SuspendyTree>;

`;

exports[`expression.js - flow-verify 3`] = `
<View
  style={
    {
      someVeryLongStyle1: "true",
      someVeryLongStyle2: "true",
      someVeryLongStyle3: "true",
      someVeryLongStyle4: "true"
    }
  }
/>;

<View
  style={
    [
      {
        someVeryLongStyle1: "true",
        someVeryLongStyle2: "true",
        someVeryLongStyle3: "true",
        someVeryLongStyle4: "true"
      }
    ]
  }
/>;

<Something>
  {() => (
    <SomethingElse>
      <span />
    </SomethingElse>
  )}
</Something>;

<Something>
  {items.map(item => (
    <SomethingElse>
      <span />
    </SomethingElse>
  ))}
</Something>;

<Something>
  {function() {
    return (
      <SomethingElse>
        <span />
      </SomethingElse>
    );
  }}
</Something>;

<RadioListItem
  key={option}
  imageSource={this.props.veryBigItemImageSourceFunc &&
    this.props.veryBigItemImageSourceFunc(option)}
  imageSize={this.props.veryBigItemImageSize}
  imageView={this.props.veryBigItemImageViewFunc &&
    this.props.veryBigItemImageViewFunc(option)}
  heading={this.props.displayTextFunc(option)}
  value={option}
/>;

<ParentComponent prop={
  <Child>
    test
  </Child>
}/>;

<BookingIntroPanel
  prop="long_string_make_to_force_break"
  logClick={data => doLogClick("short", "short", data)}
/>;

<BookingIntroPanel
  logClick={data =>
    doLogClick("long_name_long_name_long_name", "long_name_long_name_long_name", data)
  }
/>;

<BookingIntroPanel
  logClick={data => {
    doLogClick("long_name_long_name_long_name", "long_name_long_name_long_name", data)
  }}
/>;

<Component
  onChange={(
    key: "possible_key_1" | "possible_key_2" | "possible_key_3",
    value: string | Immutable.List<string>,
  ) => {
    this.setState({
      updatedTask: this.state.updatedTask.set(key, value)
    });
  }}
/>;

<BookingIntroPanel>
  {data => doLogClick("short", "short", data)}
</BookingIntroPanel>;

<BookingIntroPanel>
  {data =>
    doLogClick("long_name_long_name_long_name", "long_name_long_name_long_name", data)
  }
</BookingIntroPanel>;

<BookingIntroPanel>
  {data => {
    doLogClick("long_name_long_name_long_name", "long_name_long_name_long_name", data)
  }}
</BookingIntroPanel>;

<Component>
  {(
    key: "possible_key_1" | "possible_key_2" | "possible_key_3",
    value: string | Immutable.List<string>,
  ) => {
    this.setState({
      updatedTask: this.state.updatedTask.set(key, value)
    });
  }}
</Component>;

<SuspendyTree>
  <div style={{ height: 200, overflow: "scroll" }}>
    {Array(20)
      .fill()
      .map((_, i) => (
        <h2 key={i}>{i + 1}</h2>
      ))}
  </div>
</SuspendyTree>;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<View
  style={{
    someVeryLongStyle1: 'true',
    someVeryLongStyle2: 'true',
    someVeryLongStyle3: 'true',
    someVeryLongStyle4: 'true'
  }}
/>;

<View
  style={[
    {
      someVeryLongStyle1: 'true',
      someVeryLongStyle2: 'true',
      someVeryLongStyle3: 'true',
      someVeryLongStyle4: 'true'
    }
  ]}
/>;

<Something>
  {() => (
    <SomethingElse>
      <span />
    </SomethingElse>
  )}
</Something>;

<Something>
  {items.map(item => (
    <SomethingElse>
      <span />
    </SomethingElse>
  ))}
</Something>;

<Something>
  {function() {
    return (
      <SomethingElse>
        <span />
      </SomethingElse>
    );
  }}
</Something>;

<RadioListItem
  key={option}
  imageSource={
    this.props.veryBigItemImageSourceFunc &&
    this.props.veryBigItemImageSourceFunc(option)
  }
  imageSize={this.props.veryBigItemImageSize}
  imageView={
    this.props.veryBigItemImageViewFunc &&
    this.props.veryBigItemImageViewFunc(option)
  }
  heading={this.props.displayTextFunc(option)}
  value={option}
/>;

<ParentComponent prop={<Child>test</Child>} />;

<BookingIntroPanel
  prop="long_string_make_to_force_break"
  logClick={data => doLogClick('short', 'short', data)}
/>;

<BookingIntroPanel
  logClick={data =>
    doLogClick(
      'long_name_long_name_long_name',
      'long_name_long_name_long_name',
      data
    )
  }
/>;

<BookingIntroPanel
  logClick={data => {
    doLogClick(
      'long_name_long_name_long_name',
      'long_name_long_name_long_name',
      data
    );
  }}
/>;

<Component
  onChange={(
    key: 'possible_key_1' | 'possible_key_2' | 'possible_key_3',
    value: string | Immutable.List<string>
  ) => {
    this.setState({
      updatedTask: this.state.updatedTask.set(key, value)
    });
  }}
/>;

<BookingIntroPanel>
  {data => doLogClick('short', 'short', data)}
</BookingIntroPanel>;

<BookingIntroPanel>
  {data =>
    doLogClick(
      'long_name_long_name_long_name',
      'long_name_long_name_long_name',
      data
    )
  }
</BookingIntroPanel>;

<BookingIntroPanel>
  {data => {
    doLogClick(
      'long_name_long_name_long_name',
      'long_name_long_name_long_name',
      data
    );
  }}
</BookingIntroPanel>;

<Component>
  {(
    key: 'possible_key_1' | 'possible_key_2' | 'possible_key_3',
    value: string | Immutable.List<string>
  ) => {
    this.setState({
      updatedTask: this.state.updatedTask.set(key, value)
    });
  }}
</Component>;

<SuspendyTree>
  <div style={{ height: 200, overflow: 'scroll' }}>
    {Array(20)
      .fill()
      .map((_, i) => (
        <h2 key={i}>{i + 1}</h2>
      ))}
  </div>
</SuspendyTree>;

`;

exports[`expression.js - flow-verify 4`] = `
<View
  style={
    {
      someVeryLongStyle1: "true",
      someVeryLongStyle2: "true",
      someVeryLongStyle3: "true",
      someVeryLongStyle4: "true"
    }
  }
/>;

<View
  style={
    [
      {
        someVeryLongStyle1: "true",
        someVeryLongStyle2: "true",
        someVeryLongStyle3: "true",
        someVeryLongStyle4: "true"
      }
    ]
  }
/>;

<Something>
  {() => (
    <SomethingElse>
      <span />
    </SomethingElse>
  )}
</Something>;

<Something>
  {items.map(item => (
    <SomethingElse>
      <span />
    </SomethingElse>
  ))}
</Something>;

<Something>
  {function() {
    return (
      <SomethingElse>
        <span />
      </SomethingElse>
    );
  }}
</Something>;

<RadioListItem
  key={option}
  imageSource={this.props.veryBigItemImageSourceFunc &&
    this.props.veryBigItemImageSourceFunc(option)}
  imageSize={this.props.veryBigItemImageSize}
  imageView={this.props.veryBigItemImageViewFunc &&
    this.props.veryBigItemImageViewFunc(option)}
  heading={this.props.displayTextFunc(option)}
  value={option}
/>;

<ParentComponent prop={
  <Child>
    test
  </Child>
}/>;

<BookingIntroPanel
  prop="long_string_make_to_force_break"
  logClick={data => doLogClick("short", "short", data)}
/>;

<BookingIntroPanel
  logClick={data =>
    doLogClick("long_name_long_name_long_name", "long_name_long_name_long_name", data)
  }
/>;

<BookingIntroPanel
  logClick={data => {
    doLogClick("long_name_long_name_long_name", "long_name_long_name_long_name", data)
  }}
/>;

<Component
  onChange={(
    key: "possible_key_1" | "possible_key_2" | "possible_key_3",
    value: string | Immutable.List<string>,
  ) => {
    this.setState({
      updatedTask: this.state.updatedTask.set(key, value)
    });
  }}
/>;

<BookingIntroPanel>
  {data => doLogClick("short", "short", data)}
</BookingIntroPanel>;

<BookingIntroPanel>
  {data =>
    doLogClick("long_name_long_name_long_name", "long_name_long_name_long_name", data)
  }
</BookingIntroPanel>;

<BookingIntroPanel>
  {data => {
    doLogClick("long_name_long_name_long_name", "long_name_long_name_long_name", data)
  }}
</BookingIntroPanel>;

<Component>
  {(
    key: "possible_key_1" | "possible_key_2" | "possible_key_3",
    value: string | Immutable.List<string>,
  ) => {
    this.setState({
      updatedTask: this.state.updatedTask.set(key, value)
    });
  }}
</Component>;

<SuspendyTree>
  <div style={{ height: 200, overflow: "scroll" }}>
    {Array(20)
      .fill()
      .map((_, i) => (
        <h2 key={i}>{i + 1}</h2>
      ))}
  </div>
</SuspendyTree>;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<View
  style={{
    someVeryLongStyle1: 'true',
    someVeryLongStyle2: 'true',
    someVeryLongStyle3: 'true',
    someVeryLongStyle4: 'true'
  }}
/>;

<View
  style={[
    {
      someVeryLongStyle1: 'true',
      someVeryLongStyle2: 'true',
      someVeryLongStyle3: 'true',
      someVeryLongStyle4: 'true'
    }
  ]}
/>;

<Something>
  {() => (
    <SomethingElse>
      <span />
    </SomethingElse>
  )}
</Something>;

<Something>
  {items.map(item => (
    <SomethingElse>
      <span />
    </SomethingElse>
  ))}
</Something>;

<Something>
  {function() {
    return (
      <SomethingElse>
        <span />
      </SomethingElse>
    );
  }}
</Something>;

<RadioListItem
  key={option}
  imageSource={
    this.props.veryBigItemImageSourceFunc &&
    this.props.veryBigItemImageSourceFunc(option)
  }
  imageSize={this.props.veryBigItemImageSize}
  imageView={
    this.props.veryBigItemImageViewFunc &&
    this.props.veryBigItemImageViewFunc(option)
  }
  heading={this.props.displayTextFunc(option)}
  value={option}
/>;

<ParentComponent prop={<Child>test</Child>} />;

<BookingIntroPanel
  prop='long_string_make_to_force_break'
  logClick={data => doLogClick('short', 'short', data)}
/>;

<BookingIntroPanel
  logClick={data =>
    doLogClick(
      'long_name_long_name_long_name',
      'long_name_long_name_long_name',
      data
    )
  }
/>;

<BookingIntroPanel
  logClick={data => {
    doLogClick(
      'long_name_long_name_long_name',
      'long_name_long_name_long_name',
      data
    );
  }}
/>;

<Component
  onChange={(
    key: 'possible_key_1' | 'possible_key_2' | 'possible_key_3',
    value: string | Immutable.List<string>
  ) => {
    this.setState({
      updatedTask: this.state.updatedTask.set(key, value)
    });
  }}
/>;

<BookingIntroPanel>
  {data => doLogClick('short', 'short', data)}
</BookingIntroPanel>;

<BookingIntroPanel>
  {data =>
    doLogClick(
      'long_name_long_name_long_name',
      'long_name_long_name_long_name',
      data
    )
  }
</BookingIntroPanel>;

<BookingIntroPanel>
  {data => {
    doLogClick(
      'long_name_long_name_long_name',
      'long_name_long_name_long_name',
      data
    );
  }}
</BookingIntroPanel>;

<Component>
  {(
    key: 'possible_key_1' | 'possible_key_2' | 'possible_key_3',
    value: string | Immutable.List<string>
  ) => {
    this.setState({
      updatedTask: this.state.updatedTask.set(key, value)
    });
  }}
</Component>;

<SuspendyTree>
  <div style={{ height: 200, overflow: 'scroll' }}>
    {Array(20)
      .fill()
      .map((_, i) => (
        <h2 key={i}>{i + 1}</h2>
      ))}
  </div>
</SuspendyTree>;

`;

exports[`flow_fix_me.js - flow-verify 1`] = `
const aDiv = (
  /* $FlowFixMe */
  <div className="foo">
    Foo bar
  </div>
);
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
const aDiv = (
  /* $FlowFixMe */
  <div className="foo">Foo bar</div>
);

`;

exports[`flow_fix_me.js - flow-verify 2`] = `
const aDiv = (
  /* $FlowFixMe */
  <div className="foo">
    Foo bar
  </div>
);
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
const aDiv = (
  /* $FlowFixMe */
  <div className='foo'>Foo bar</div>
);

`;

exports[`flow_fix_me.js - flow-verify 3`] = `
const aDiv = (
  /* $FlowFixMe */
  <div className="foo">
    Foo bar
  </div>
);
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
const aDiv = (
  /* $FlowFixMe */
  <div className="foo">Foo bar</div>
);

`;

exports[`flow_fix_me.js - flow-verify 4`] = `
const aDiv = (
  /* $FlowFixMe */
  <div className="foo">
    Foo bar
  </div>
);
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
const aDiv = (
  /* $FlowFixMe */
  <div className='foo'>Foo bar</div>
);

`;

exports[`html_escape.js - flow-verify 1`] = `
export default () => <a href="https://foo.bar?q1=foo&q2=bar" />;

() => <img src="https://bar.foo?param1=1&param2=2" />;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
export default () => <a href="https://foo.bar?q1=foo&q2=bar" />;

() => <img src="https://bar.foo?param1=1&param2=2" />;

`;

exports[`html_escape.js - flow-verify 2`] = `
export default () => <a href="https://foo.bar?q1=foo&q2=bar" />;

() => <img src="https://bar.foo?param1=1&param2=2" />;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
export default () => <a href='https://foo.bar?q1=foo&q2=bar' />;

() => <img src='https://bar.foo?param1=1&param2=2' />;

`;

exports[`html_escape.js - flow-verify 3`] = `
export default () => <a href="https://foo.bar?q1=foo&q2=bar" />;

() => <img src="https://bar.foo?param1=1&param2=2" />;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
export default () => <a href="https://foo.bar?q1=foo&q2=bar" />;

() => <img src="https://bar.foo?param1=1&param2=2" />;

`;

exports[`html_escape.js - flow-verify 4`] = `
export default () => <a href="https://foo.bar?q1=foo&q2=bar" />;

() => <img src="https://bar.foo?param1=1&param2=2" />;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
export default () => <a href='https://foo.bar?q1=foo&q2=bar' />;

() => <img src='https://bar.foo?param1=1&param2=2' />;

`;

exports[`hug.js - flow-verify 1`] = `
<div>
  {__DEV__
    ? this.renderDevApp()
    : <div>
      {routes.map(route => (
        <MatchAsync
          key={\`\${route.to}-async\`}
          pattern={route.to}
          exactly={route.to === "/"}
          getComponent={routeES6Modules[route.value]}
        />
      ))}
    </div>}
</div>;

<div>
  {__DEV__ && <div>
    {routes.map(route => (
      <MatchAsync
        key={\`\${route.to}-async\`}
        pattern={route.to}
        exactly={route.to === "/"}
        getComponent={routeES6Modules[route.value]}
      />
    ))}
    </div>}
</div>;

<div>
  {member.memberName.memberSomething +
    (member.memberDef.memberSomething.signatures ? '()' : '')}
</div>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<div>
  {__DEV__ ? (
    this.renderDevApp()
  ) : (
    <div>
      {routes.map(route => (
        <MatchAsync
          key={\`\${route.to}-async\`}
          pattern={route.to}
          exactly={route.to === "/"}
          getComponent={routeES6Modules[route.value]}
        />
      ))}
    </div>
  )}
</div>;

<div>
  {__DEV__ && (
    <div>
      {routes.map(route => (
        <MatchAsync
          key={\`\${route.to}-async\`}
          pattern={route.to}
          exactly={route.to === "/"}
          getComponent={routeES6Modules[route.value]}
        />
      ))}
    </div>
  )}
</div>;

<div>
  {member.memberName.memberSomething +
    (member.memberDef.memberSomething.signatures ? "()" : "")}
</div>;

`;

exports[`hug.js - flow-verify 2`] = `
<div>
  {__DEV__
    ? this.renderDevApp()
    : <div>
      {routes.map(route => (
        <MatchAsync
          key={\`\${route.to}-async\`}
          pattern={route.to}
          exactly={route.to === "/"}
          getComponent={routeES6Modules[route.value]}
        />
      ))}
    </div>}
</div>;

<div>
  {__DEV__ && <div>
    {routes.map(route => (
      <MatchAsync
        key={\`\${route.to}-async\`}
        pattern={route.to}
        exactly={route.to === "/"}
        getComponent={routeES6Modules[route.value]}
      />
    ))}
    </div>}
</div>;

<div>
  {member.memberName.memberSomething +
    (member.memberDef.memberSomething.signatures ? '()' : '')}
</div>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<div>
  {__DEV__ ? (
    this.renderDevApp()
  ) : (
    <div>
      {routes.map(route => (
        <MatchAsync
          key={\`\${route.to}-async\`}
          pattern={route.to}
          exactly={route.to === "/"}
          getComponent={routeES6Modules[route.value]}
        />
      ))}
    </div>
  )}
</div>;

<div>
  {__DEV__ && (
    <div>
      {routes.map(route => (
        <MatchAsync
          key={\`\${route.to}-async\`}
          pattern={route.to}
          exactly={route.to === "/"}
          getComponent={routeES6Modules[route.value]}
        />
      ))}
    </div>
  )}
</div>;

<div>
  {member.memberName.memberSomething +
    (member.memberDef.memberSomething.signatures ? "()" : "")}
</div>;

`;

exports[`hug.js - flow-verify 3`] = `
<div>
  {__DEV__
    ? this.renderDevApp()
    : <div>
      {routes.map(route => (
        <MatchAsync
          key={\`\${route.to}-async\`}
          pattern={route.to}
          exactly={route.to === "/"}
          getComponent={routeES6Modules[route.value]}
        />
      ))}
    </div>}
</div>;

<div>
  {__DEV__ && <div>
    {routes.map(route => (
      <MatchAsync
        key={\`\${route.to}-async\`}
        pattern={route.to}
        exactly={route.to === "/"}
        getComponent={routeES6Modules[route.value]}
      />
    ))}
    </div>}
</div>;

<div>
  {member.memberName.memberSomething +
    (member.memberDef.memberSomething.signatures ? '()' : '')}
</div>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<div>
  {__DEV__ ? (
    this.renderDevApp()
  ) : (
    <div>
      {routes.map(route => (
        <MatchAsync
          key={\`\${route.to}-async\`}
          pattern={route.to}
          exactly={route.to === '/'}
          getComponent={routeES6Modules[route.value]}
        />
      ))}
    </div>
  )}
</div>;

<div>
  {__DEV__ && (
    <div>
      {routes.map(route => (
        <MatchAsync
          key={\`\${route.to}-async\`}
          pattern={route.to}
          exactly={route.to === '/'}
          getComponent={routeES6Modules[route.value]}
        />
      ))}
    </div>
  )}
</div>;

<div>
  {member.memberName.memberSomething +
    (member.memberDef.memberSomething.signatures ? '()' : '')}
</div>;

`;

exports[`hug.js - flow-verify 4`] = `
<div>
  {__DEV__
    ? this.renderDevApp()
    : <div>
      {routes.map(route => (
        <MatchAsync
          key={\`\${route.to}-async\`}
          pattern={route.to}
          exactly={route.to === "/"}
          getComponent={routeES6Modules[route.value]}
        />
      ))}
    </div>}
</div>;

<div>
  {__DEV__ && <div>
    {routes.map(route => (
      <MatchAsync
        key={\`\${route.to}-async\`}
        pattern={route.to}
        exactly={route.to === "/"}
        getComponent={routeES6Modules[route.value]}
      />
    ))}
    </div>}
</div>;

<div>
  {member.memberName.memberSomething +
    (member.memberDef.memberSomething.signatures ? '()' : '')}
</div>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<div>
  {__DEV__ ? (
    this.renderDevApp()
  ) : (
    <div>
      {routes.map(route => (
        <MatchAsync
          key={\`\${route.to}-async\`}
          pattern={route.to}
          exactly={route.to === '/'}
          getComponent={routeES6Modules[route.value]}
        />
      ))}
    </div>
  )}
</div>;

<div>
  {__DEV__ && (
    <div>
      {routes.map(route => (
        <MatchAsync
          key={\`\${route.to}-async\`}
          pattern={route.to}
          exactly={route.to === '/'}
          getComponent={routeES6Modules[route.value]}
        />
      ))}
    </div>
  )}
</div>;

<div>
  {member.memberName.memberSomething +
    (member.memberDef.memberSomething.signatures ? '()' : '')}
</div>;

`;

exports[`logical-expression.js - flow-verify 1`] = `
<div>
  {a || "b"}
</div>;

<div>
  {a && "b"}
</div>;

<div>
  {a || <span></span>}
</div>;

<div>
  {a && <span></span>}
</div>;

<div>
  {a && <span>make this text just so long enough to break this to the next line</span>}
</div>;

<div>
  {a && b && <span>make this text just so long enough to break this to the next line</span>}
</div>;

<div>
  {a && <span>
    <div>
      <div></div>
    </div>
  </span>}
</div>;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<div>{a || "b"}</div>;

<div>{a && "b"}</div>;

<div>{a || <span />}</div>;

<div>{a && <span />}</div>;

<div>
  {a && (
    <span>
      make this text just so long enough to break this to the next line
    </span>
  )}
</div>;

<div>
  {a && b && (
    <span>
      make this text just so long enough to break this to the next line
    </span>
  )}
</div>;

<div>
  {a && (
    <span>
      <div>
        <div />
      </div>
    </span>
  )}
</div>;

`;

exports[`logical-expression.js - flow-verify 2`] = `
<div>
  {a || "b"}
</div>;

<div>
  {a && "b"}
</div>;

<div>
  {a || <span></span>}
</div>;

<div>
  {a && <span></span>}
</div>;

<div>
  {a && <span>make this text just so long enough to break this to the next line</span>}
</div>;

<div>
  {a && b && <span>make this text just so long enough to break this to the next line</span>}
</div>;

<div>
  {a && <span>
    <div>
      <div></div>
    </div>
  </span>}
</div>;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<div>{a || "b"}</div>;

<div>{a && "b"}</div>;

<div>{a || <span />}</div>;

<div>{a && <span />}</div>;

<div>
  {a && (
    <span>
      make this text just so long enough to break this to the next line
    </span>
  )}
</div>;

<div>
  {a && b && (
    <span>
      make this text just so long enough to break this to the next line
    </span>
  )}
</div>;

<div>
  {a && (
    <span>
      <div>
        <div />
      </div>
    </span>
  )}
</div>;

`;

exports[`logical-expression.js - flow-verify 3`] = `
<div>
  {a || "b"}
</div>;

<div>
  {a && "b"}
</div>;

<div>
  {a || <span></span>}
</div>;

<div>
  {a && <span></span>}
</div>;

<div>
  {a && <span>make this text just so long enough to break this to the next line</span>}
</div>;

<div>
  {a && b && <span>make this text just so long enough to break this to the next line</span>}
</div>;

<div>
  {a && <span>
    <div>
      <div></div>
    </div>
  </span>}
</div>;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<div>{a || 'b'}</div>;

<div>{a && 'b'}</div>;

<div>{a || <span />}</div>;

<div>{a && <span />}</div>;

<div>
  {a && (
    <span>
      make this text just so long enough to break this to the next line
    </span>
  )}
</div>;

<div>
  {a && b && (
    <span>
      make this text just so long enough to break this to the next line
    </span>
  )}
</div>;

<div>
  {a && (
    <span>
      <div>
        <div />
      </div>
    </span>
  )}
</div>;

`;

exports[`logical-expression.js - flow-verify 4`] = `
<div>
  {a || "b"}
</div>;

<div>
  {a && "b"}
</div>;

<div>
  {a || <span></span>}
</div>;

<div>
  {a && <span></span>}
</div>;

<div>
  {a && <span>make this text just so long enough to break this to the next line</span>}
</div>;

<div>
  {a && b && <span>make this text just so long enough to break this to the next line</span>}
</div>;

<div>
  {a && <span>
    <div>
      <div></div>
    </div>
  </span>}
</div>;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<div>{a || 'b'}</div>;

<div>{a && 'b'}</div>;

<div>{a || <span />}</div>;

<div>{a && <span />}</div>;

<div>
  {a && (
    <span>
      make this text just so long enough to break this to the next line
    </span>
  )}
</div>;

<div>
  {a && b && (
    <span>
      make this text just so long enough to break this to the next line
    </span>
  )}
</div>;

<div>
  {a && (
    <span>
      <div>
        <div />
      </div>
    </span>
  )}
</div>;

`;

exports[`object-property.js - flow-verify 1`] = `
const tabs = [
  {
    title: "General Info",
    content: (
      <GeneralForm
        long-attribute="i-need-long-value-here"
        onSave={ onSave }
        onCancel={ onCancel }
        countries={ countries }
      />
    )
  }
];
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
const tabs = [
  {
    title: "General Info",
    content: (
      <GeneralForm
        long-attribute="i-need-long-value-here"
        onSave={onSave}
        onCancel={onCancel}
        countries={countries}
      />
    )
  }
];

`;

exports[`object-property.js - flow-verify 2`] = `
const tabs = [
  {
    title: "General Info",
    content: (
      <GeneralForm
        long-attribute="i-need-long-value-here"
        onSave={ onSave }
        onCancel={ onCancel }
        countries={ countries }
      />
    )
  }
];
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
const tabs = [
  {
    title: "General Info",
    content: (
      <GeneralForm
        long-attribute='i-need-long-value-here'
        onSave={onSave}
        onCancel={onCancel}
        countries={countries}
      />
    )
  }
];

`;

exports[`object-property.js - flow-verify 3`] = `
const tabs = [
  {
    title: "General Info",
    content: (
      <GeneralForm
        long-attribute="i-need-long-value-here"
        onSave={ onSave }
        onCancel={ onCancel }
        countries={ countries }
      />
    )
  }
];
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
const tabs = [
  {
    title: 'General Info',
    content: (
      <GeneralForm
        long-attribute="i-need-long-value-here"
        onSave={onSave}
        onCancel={onCancel}
        countries={countries}
      />
    )
  }
];

`;

exports[`object-property.js - flow-verify 4`] = `
const tabs = [
  {
    title: "General Info",
    content: (
      <GeneralForm
        long-attribute="i-need-long-value-here"
        onSave={ onSave }
        onCancel={ onCancel }
        countries={ countries }
      />
    )
  }
];
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
const tabs = [
  {
    title: 'General Info',
    content: (
      <GeneralForm
        long-attribute='i-need-long-value-here'
        onSave={onSave}
        onCancel={onCancel}
        countries={countries}
      />
    )
  }
];

`;

exports[`open-break.js - flow-verify 1`] = `
<td
onClick={() => {
  a
}}>{header}{showSort}</td>;

<td
onClick={() => {
  a
}}>{header}<showSort attr="long long long long long long long long long long long"/></td>;

<Foo>{\`    a    very    long    text    that    does    not    break    \`}</Foo>;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<td
  onClick={() => {
    a;
  }}
>
  {header}
  {showSort}
</td>;

<td
  onClick={() => {
    a;
  }}
>
  {header}
  <showSort attr="long long long long long long long long long long long" />
</td>;

<Foo>{\`    a    very    long    text    that    does    not    break    \`}</Foo>;

`;

exports[`open-break.js - flow-verify 2`] = `
<td
onClick={() => {
  a
}}>{header}{showSort}</td>;

<td
onClick={() => {
  a
}}>{header}<showSort attr="long long long long long long long long long long long"/></td>;

<Foo>{\`    a    very    long    text    that    does    not    break    \`}</Foo>;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<td
  onClick={() => {
    a;
  }}
>
  {header}
  {showSort}
</td>;

<td
  onClick={() => {
    a;
  }}
>
  {header}
  <showSort attr='long long long long long long long long long long long' />
</td>;

<Foo>{\`    a    very    long    text    that    does    not    break    \`}</Foo>;

`;

exports[`open-break.js - flow-verify 3`] = `
<td
onClick={() => {
  a
}}>{header}{showSort}</td>;

<td
onClick={() => {
  a
}}>{header}<showSort attr="long long long long long long long long long long long"/></td>;

<Foo>{\`    a    very    long    text    that    does    not    break    \`}</Foo>;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<td
  onClick={() => {
    a;
  }}
>
  {header}
  {showSort}
</td>;

<td
  onClick={() => {
    a;
  }}
>
  {header}
  <showSort attr="long long long long long long long long long long long" />
</td>;

<Foo>{\`    a    very    long    text    that    does    not    break    \`}</Foo>;

`;

exports[`open-break.js - flow-verify 4`] = `
<td
onClick={() => {
  a
}}>{header}{showSort}</td>;

<td
onClick={() => {
  a
}}>{header}<showSort attr="long long long long long long long long long long long"/></td>;

<Foo>{\`    a    very    long    text    that    does    not    break    \`}</Foo>;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<td
  onClick={() => {
    a;
  }}
>
  {header}
  {showSort}
</td>;

<td
  onClick={() => {
    a;
  }}
>
  {header}
  <showSort attr='long long long long long long long long long long long' />
</td>;

<Foo>{\`    a    very    long    text    that    does    not    break    \`}</Foo>;

`;

exports[`parens.js - flow-verify 1`] = `
a = [
  <path
    key='0'
    d='M13.6,10.6l,4-2.8L9.5,M13.6,10.6l,4-2.8L9.5,M13.6,10.6l,4-2.8L9.5,M13.6,10.6l,4-2.8L9.5,M13.6,10.6l,4-2.8L9.5,M13.6,10.6l,4-2.8L9.5,'
  />,
  <path
    key='1'
    d='M13.6,10.6l,4-2.8L9.5,M13.6,10.6l,4-2.8L9.5,M13.6,10.6l,4-2.8L9.5,M13.6,10.6l,4-2.8L9.5,M13.6,10.6l,4-2.8L9.5,M13.6,10.6l,4-2.8L9.5,'
  />,
];

<div {...((foo || foo === null) ? {foo} : null)} />
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
a = [
  <path
    key="0"
    d="M13.6,10.6l,4-2.8L9.5,M13.6,10.6l,4-2.8L9.5,M13.6,10.6l,4-2.8L9.5,M13.6,10.6l,4-2.8L9.5,M13.6,10.6l,4-2.8L9.5,M13.6,10.6l,4-2.8L9.5,"
  />,
  <path
    key="1"
    d="M13.6,10.6l,4-2.8L9.5,M13.6,10.6l,4-2.8L9.5,M13.6,10.6l,4-2.8L9.5,M13.6,10.6l,4-2.8L9.5,M13.6,10.6l,4-2.8L9.5,M13.6,10.6l,4-2.8L9.5,"
  />
];

<div {...(foo || foo === null ? { foo } : null)} />;

`;

exports[`parens.js - flow-verify 2`] = `
a = [
  <path
    key='0'
    d='M13.6,10.6l,4-2.8L9.5,M13.6,10.6l,4-2.8L9.5,M13.6,10.6l,4-2.8L9.5,M13.6,10.6l,4-2.8L9.5,M13.6,10.6l,4-2.8L9.5,M13.6,10.6l,4-2.8L9.5,'
  />,
  <path
    key='1'
    d='M13.6,10.6l,4-2.8L9.5,M13.6,10.6l,4-2.8L9.5,M13.6,10.6l,4-2.8L9.5,M13.6,10.6l,4-2.8L9.5,M13.6,10.6l,4-2.8L9.5,M13.6,10.6l,4-2.8L9.5,'
  />,
];

<div {...((foo || foo === null) ? {foo} : null)} />
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
a = [
  <path
    key='0'
    d='M13.6,10.6l,4-2.8L9.5,M13.6,10.6l,4-2.8L9.5,M13.6,10.6l,4-2.8L9.5,M13.6,10.6l,4-2.8L9.5,M13.6,10.6l,4-2.8L9.5,M13.6,10.6l,4-2.8L9.5,'
  />,
  <path
    key='1'
    d='M13.6,10.6l,4-2.8L9.5,M13.6,10.6l,4-2.8L9.5,M13.6,10.6l,4-2.8L9.5,M13.6,10.6l,4-2.8L9.5,M13.6,10.6l,4-2.8L9.5,M13.6,10.6l,4-2.8L9.5,'
  />
];

<div {...(foo || foo === null ? { foo } : null)} />;

`;

exports[`parens.js - flow-verify 3`] = `
a = [
  <path
    key='0'
    d='M13.6,10.6l,4-2.8L9.5,M13.6,10.6l,4-2.8L9.5,M13.6,10.6l,4-2.8L9.5,M13.6,10.6l,4-2.8L9.5,M13.6,10.6l,4-2.8L9.5,M13.6,10.6l,4-2.8L9.5,'
  />,
  <path
    key='1'
    d='M13.6,10.6l,4-2.8L9.5,M13.6,10.6l,4-2.8L9.5,M13.6,10.6l,4-2.8L9.5,M13.6,10.6l,4-2.8L9.5,M13.6,10.6l,4-2.8L9.5,M13.6,10.6l,4-2.8L9.5,'
  />,
];

<div {...((foo || foo === null) ? {foo} : null)} />
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
a = [
  <path
    key="0"
    d="M13.6,10.6l,4-2.8L9.5,M13.6,10.6l,4-2.8L9.5,M13.6,10.6l,4-2.8L9.5,M13.6,10.6l,4-2.8L9.5,M13.6,10.6l,4-2.8L9.5,M13.6,10.6l,4-2.8L9.5,"
  />,
  <path
    key="1"
    d="M13.6,10.6l,4-2.8L9.5,M13.6,10.6l,4-2.8L9.5,M13.6,10.6l,4-2.8L9.5,M13.6,10.6l,4-2.8L9.5,M13.6,10.6l,4-2.8L9.5,M13.6,10.6l,4-2.8L9.5,"
  />
];

<div {...(foo || foo === null ? { foo } : null)} />;

`;

exports[`parens.js - flow-verify 4`] = `
a = [
  <path
    key='0'
    d='M13.6,10.6l,4-2.8L9.5,M13.6,10.6l,4-2.8L9.5,M13.6,10.6l,4-2.8L9.5,M13.6,10.6l,4-2.8L9.5,M13.6,10.6l,4-2.8L9.5,M13.6,10.6l,4-2.8L9.5,'
  />,
  <path
    key='1'
    d='M13.6,10.6l,4-2.8L9.5,M13.6,10.6l,4-2.8L9.5,M13.6,10.6l,4-2.8L9.5,M13.6,10.6l,4-2.8L9.5,M13.6,10.6l,4-2.8L9.5,M13.6,10.6l,4-2.8L9.5,'
  />,
];

<div {...((foo || foo === null) ? {foo} : null)} />
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
a = [
  <path
    key='0'
    d='M13.6,10.6l,4-2.8L9.5,M13.6,10.6l,4-2.8L9.5,M13.6,10.6l,4-2.8L9.5,M13.6,10.6l,4-2.8L9.5,M13.6,10.6l,4-2.8L9.5,M13.6,10.6l,4-2.8L9.5,'
  />,
  <path
    key='1'
    d='M13.6,10.6l,4-2.8L9.5,M13.6,10.6l,4-2.8L9.5,M13.6,10.6l,4-2.8L9.5,M13.6,10.6l,4-2.8L9.5,M13.6,10.6l,4-2.8L9.5,M13.6,10.6l,4-2.8L9.5,'
  />
];

<div {...(foo || foo === null ? { foo } : null)} />;

`;

exports[`quotes.js - flow-verify 1`] = `
<div id="&quot;'<>&amp;quot;" />;
<div id='"&#39;<>&amp;quot;' />;
<div id={'\\'"&quot;<>&amp;quot;'} />;
<div id='123' />;
<div id='&#39;&quot;' />;
<div id={'\\'\\"\\\\\\''} />;
<div
  single='foo'
  single2={'foo'}

  double="bar"
  double2={"bar"}

  singleDouble='"'
  singleDouble2={'"'}

  doubleSingle="'"
  doubleSingle2={"'"}

  singleEscaped={'\\''}
  singleEscaped2='&apos;'

  doubleEscaped={"\\""}
  doubleEscaped2="&quot;"

  singleBothEscaped={'\\'"'}
  singleBothEscaped2='&apos;"'

  singleBoth='&apos; "'
  singleBoth2={'\\' "'}
  singleBoth3='&apos; &apos; "'

  doubleBoth="&quot; '"
  doubleBoth2={"\\" '"}
  doubleBoth3="&quot; &apos; '"
/>;

<p>
  GitHub Desktop has encountered an unrecoverable error and will need to 1231231
  restart. This has been reported to the team, but if youencounter this121312331
  repeatedly please report this issue to the GitHub 12312312312312313{'  '}{' '}
</p>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<div id="&quot;'<>&amp;quot;" />;
<div id='"&#39;<>&amp;quot;' />;
<div id={"'\\"&quot;<>&amp;quot;"} />;
<div id="123" />;
<div id='&#39;"' />;
<div id={"'\\"\\\\'"} />;
<div
  single="foo"
  single2={"foo"}
  double="bar"
  double2={"bar"}
  singleDouble='"'
  singleDouble2={'"'}
  doubleSingle="'"
  doubleSingle2={"'"}
  singleEscaped={"'"}
  singleEscaped2="'"
  doubleEscaped={'"'}
  doubleEscaped2='"'
  singleBothEscaped={"'\\""}
  singleBothEscaped2="'&quot;"
  singleBoth="' &quot;"
  singleBoth2={"' \\""}
  singleBoth3="' ' &quot;"
  doubleBoth="&quot; '"
  doubleBoth2={"\\" '"}
  doubleBoth3="&quot; ' '"
/>;

<p>
  GitHub Desktop has encountered an unrecoverable error and will need to 1231231
  restart. This has been reported to the team, but if youencounter this121312331
  repeatedly please report this issue to the GitHub 12312312312312313{"  "}{" "}
</p>;

`;

exports[`quotes.js - flow-verify 2`] = `
<div id="&quot;'<>&amp;quot;" />;
<div id='"&#39;<>&amp;quot;' />;
<div id={'\\'"&quot;<>&amp;quot;'} />;
<div id='123' />;
<div id='&#39;&quot;' />;
<div id={'\\'\\"\\\\\\''} />;
<div
  single='foo'
  single2={'foo'}

  double="bar"
  double2={"bar"}

  singleDouble='"'
  singleDouble2={'"'}

  doubleSingle="'"
  doubleSingle2={"'"}

  singleEscaped={'\\''}
  singleEscaped2='&apos;'

  doubleEscaped={"\\""}
  doubleEscaped2="&quot;"

  singleBothEscaped={'\\'"'}
  singleBothEscaped2='&apos;"'

  singleBoth='&apos; "'
  singleBoth2={'\\' "'}
  singleBoth3='&apos; &apos; "'

  doubleBoth="&quot; '"
  doubleBoth2={"\\" '"}
  doubleBoth3="&quot; &apos; '"
/>;

<p>
  GitHub Desktop has encountered an unrecoverable error and will need to 1231231
  restart. This has been reported to the team, but if youencounter this121312331
  repeatedly please report this issue to the GitHub 12312312312312313{'  '}{' '}
</p>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<div id='"&apos;<>&amp;quot;' />;
<div id='"&#39;<>&amp;quot;' />;
<div id={"'\\"&quot;<>&amp;quot;"} />;
<div id='123' />;
<div id='&#39;"' />;
<div id={"'\\"\\\\'"} />;
<div
  single='foo'
  single2={"foo"}
  double='bar'
  double2={"bar"}
  singleDouble='"'
  singleDouble2={'"'}
  doubleSingle="'"
  doubleSingle2={"'"}
  singleEscaped={"'"}
  singleEscaped2="'"
  doubleEscaped={'"'}
  doubleEscaped2='"'
  singleBothEscaped={"'\\""}
  singleBothEscaped2='&apos;"'
  singleBoth='&apos; "'
  singleBoth2={"' \\""}
  singleBoth3="' ' &quot;"
  doubleBoth='" &apos;'
  doubleBoth2={"\\" '"}
  doubleBoth3="&quot; ' '"
/>;

<p>
  GitHub Desktop has encountered an unrecoverable error and will need to 1231231
  restart. This has been reported to the team, but if youencounter this121312331
  repeatedly please report this issue to the GitHub 12312312312312313{"  "}{" "}
</p>;

`;

exports[`quotes.js - flow-verify 3`] = `
<div id="&quot;'<>&amp;quot;" />;
<div id='"&#39;<>&amp;quot;' />;
<div id={'\\'"&quot;<>&amp;quot;'} />;
<div id='123' />;
<div id='&#39;&quot;' />;
<div id={'\\'\\"\\\\\\''} />;
<div
  single='foo'
  single2={'foo'}

  double="bar"
  double2={"bar"}

  singleDouble='"'
  singleDouble2={'"'}

  doubleSingle="'"
  doubleSingle2={"'"}

  singleEscaped={'\\''}
  singleEscaped2='&apos;'

  doubleEscaped={"\\""}
  doubleEscaped2="&quot;"

  singleBothEscaped={'\\'"'}
  singleBothEscaped2='&apos;"'

  singleBoth='&apos; "'
  singleBoth2={'\\' "'}
  singleBoth3='&apos; &apos; "'

  doubleBoth="&quot; '"
  doubleBoth2={"\\" '"}
  doubleBoth3="&quot; &apos; '"
/>;

<p>
  GitHub Desktop has encountered an unrecoverable error and will need to 1231231
  restart. This has been reported to the team, but if youencounter this121312331
  repeatedly please report this issue to the GitHub 12312312312312313{'  '}{' '}
</p>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<div id="&quot;'<>&amp;quot;" />;
<div id='"&#39;<>&amp;quot;' />;
<div id={'\\'"&quot;<>&amp;quot;'} />;
<div id="123" />;
<div id='&#39;"' />;
<div id={"'\\"\\\\'"} />;
<div
  single="foo"
  single2={'foo'}
  double="bar"
  double2={'bar'}
  singleDouble='"'
  singleDouble2={'"'}
  doubleSingle="'"
  doubleSingle2={"'"}
  singleEscaped={"'"}
  singleEscaped2="'"
  doubleEscaped={'"'}
  doubleEscaped2='"'
  singleBothEscaped={'\\'"'}
  singleBothEscaped2="'&quot;"
  singleBoth="' &quot;"
  singleBoth2={'\\' "'}
  singleBoth3="' ' &quot;"
  doubleBoth="&quot; '"
  doubleBoth2={'" \\''}
  doubleBoth3="&quot; ' '"
/>;

<p>
  GitHub Desktop has encountered an unrecoverable error and will need to 1231231
  restart. This has been reported to the team, but if youencounter this121312331
  repeatedly please report this issue to the GitHub 12312312312312313{'  '}{' '}
</p>;

`;

exports[`quotes.js - flow-verify 4`] = `
<div id="&quot;'<>&amp;quot;" />;
<div id='"&#39;<>&amp;quot;' />;
<div id={'\\'"&quot;<>&amp;quot;'} />;
<div id='123' />;
<div id='&#39;&quot;' />;
<div id={'\\'\\"\\\\\\''} />;
<div
  single='foo'
  single2={'foo'}

  double="bar"
  double2={"bar"}

  singleDouble='"'
  singleDouble2={'"'}

  doubleSingle="'"
  doubleSingle2={"'"}

  singleEscaped={'\\''}
  singleEscaped2='&apos;'

  doubleEscaped={"\\""}
  doubleEscaped2="&quot;"

  singleBothEscaped={'\\'"'}
  singleBothEscaped2='&apos;"'

  singleBoth='&apos; "'
  singleBoth2={'\\' "'}
  singleBoth3='&apos; &apos; "'

  doubleBoth="&quot; '"
  doubleBoth2={"\\" '"}
  doubleBoth3="&quot; &apos; '"
/>;

<p>
  GitHub Desktop has encountered an unrecoverable error and will need to 1231231
  restart. This has been reported to the team, but if youencounter this121312331
  repeatedly please report this issue to the GitHub 12312312312312313{'  '}{' '}
</p>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<div id='"&apos;<>&amp;quot;' />;
<div id='"&#39;<>&amp;quot;' />;
<div id={'\\'"&quot;<>&amp;quot;'} />;
<div id='123' />;
<div id='&#39;"' />;
<div id={"'\\"\\\\'"} />;
<div
  single='foo'
  single2={'foo'}
  double='bar'
  double2={'bar'}
  singleDouble='"'
  singleDouble2={'"'}
  doubleSingle="'"
  doubleSingle2={"'"}
  singleEscaped={"'"}
  singleEscaped2="'"
  doubleEscaped={'"'}
  doubleEscaped2='"'
  singleBothEscaped={'\\'"'}
  singleBothEscaped2='&apos;"'
  singleBoth='&apos; "'
  singleBoth2={'\\' "'}
  singleBoth3="' ' &quot;"
  doubleBoth='" &apos;'
  doubleBoth2={'" \\''}
  doubleBoth3="&quot; ' '"
/>;

<p>
  GitHub Desktop has encountered an unrecoverable error and will need to 1231231
  restart. This has been reported to the team, but if youencounter this121312331
  repeatedly please report this issue to the GitHub 12312312312312313{'  '}{' '}
</p>;

`;

exports[`return-statement.js - flow-verify 1`] = `
const NonBreakingArrowExpression = () => <div />;

const BreakingArrowExpression = () => <div>
  <div>
    bla bla bla
  </div>
</div>;

const NonBreakingArrowExpressionWBody = () => {
  return (
    <div />
  );
};

const BreakingArrowExpressionWBody = () => {
  return <div>
    <div>
      bla bla bla
    </div>
  </div>
};

const NonBreakingFunction = function() {
  return (
    <div />
  );
};

const BreakingFunction = function() {
  return <div>
    <div>
      bla bla bla
    </div>
  </div>
};

class NonBreakingClass extends React.component {
  render() {
    return (
      <div />
    );
  }
}

class BreakingClass extends React.component {
  render() {
    return <div>
      <div>
        bla bla bla
      </div>
    </div>;
  }
}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
const NonBreakingArrowExpression = () => <div />;

const BreakingArrowExpression = () => (
  <div>
    <div>bla bla bla</div>
  </div>
);

const NonBreakingArrowExpressionWBody = () => {
  return <div />;
};

const BreakingArrowExpressionWBody = () => {
  return (
    <div>
      <div>bla bla bla</div>
    </div>
  );
};

const NonBreakingFunction = function() {
  return <div />;
};

const BreakingFunction = function() {
  return (
    <div>
      <div>bla bla bla</div>
    </div>
  );
};

class NonBreakingClass extends React.component {
  render() {
    return <div />;
  }
}

class BreakingClass extends React.component {
  render() {
    return (
      <div>
        <div>bla bla bla</div>
      </div>
    );
  }
}

`;

exports[`return-statement.js - flow-verify 2`] = `
const NonBreakingArrowExpression = () => <div />;

const BreakingArrowExpression = () => <div>
  <div>
    bla bla bla
  </div>
</div>;

const NonBreakingArrowExpressionWBody = () => {
  return (
    <div />
  );
};

const BreakingArrowExpressionWBody = () => {
  return <div>
    <div>
      bla bla bla
    </div>
  </div>
};

const NonBreakingFunction = function() {
  return (
    <div />
  );
};

const BreakingFunction = function() {
  return <div>
    <div>
      bla bla bla
    </div>
  </div>
};

class NonBreakingClass extends React.component {
  render() {
    return (
      <div />
    );
  }
}

class BreakingClass extends React.component {
  render() {
    return <div>
      <div>
        bla bla bla
      </div>
    </div>;
  }
}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
const NonBreakingArrowExpression = () => <div />;

const BreakingArrowExpression = () => (
  <div>
    <div>bla bla bla</div>
  </div>
);

const NonBreakingArrowExpressionWBody = () => {
  return <div />;
};

const BreakingArrowExpressionWBody = () => {
  return (
    <div>
      <div>bla bla bla</div>
    </div>
  );
};

const NonBreakingFunction = function() {
  return <div />;
};

const BreakingFunction = function() {
  return (
    <div>
      <div>bla bla bla</div>
    </div>
  );
};

class NonBreakingClass extends React.component {
  render() {
    return <div />;
  }
}

class BreakingClass extends React.component {
  render() {
    return (
      <div>
        <div>bla bla bla</div>
      </div>
    );
  }
}

`;

exports[`return-statement.js - flow-verify 3`] = `
const NonBreakingArrowExpression = () => <div />;

const BreakingArrowExpression = () => <div>
  <div>
    bla bla bla
  </div>
</div>;

const NonBreakingArrowExpressionWBody = () => {
  return (
    <div />
  );
};

const BreakingArrowExpressionWBody = () => {
  return <div>
    <div>
      bla bla bla
    </div>
  </div>
};

const NonBreakingFunction = function() {
  return (
    <div />
  );
};

const BreakingFunction = function() {
  return <div>
    <div>
      bla bla bla
    </div>
  </div>
};

class NonBreakingClass extends React.component {
  render() {
    return (
      <div />
    );
  }
}

class BreakingClass extends React.component {
  render() {
    return <div>
      <div>
        bla bla bla
      </div>
    </div>;
  }
}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
const NonBreakingArrowExpression = () => <div />;

const BreakingArrowExpression = () => (
  <div>
    <div>bla bla bla</div>
  </div>
);

const NonBreakingArrowExpressionWBody = () => {
  return <div />;
};

const BreakingArrowExpressionWBody = () => {
  return (
    <div>
      <div>bla bla bla</div>
    </div>
  );
};

const NonBreakingFunction = function() {
  return <div />;
};

const BreakingFunction = function() {
  return (
    <div>
      <div>bla bla bla</div>
    </div>
  );
};

class NonBreakingClass extends React.component {
  render() {
    return <div />;
  }
}

class BreakingClass extends React.component {
  render() {
    return (
      <div>
        <div>bla bla bla</div>
      </div>
    );
  }
}

`;

exports[`return-statement.js - flow-verify 4`] = `
const NonBreakingArrowExpression = () => <div />;

const BreakingArrowExpression = () => <div>
  <div>
    bla bla bla
  </div>
</div>;

const NonBreakingArrowExpressionWBody = () => {
  return (
    <div />
  );
};

const BreakingArrowExpressionWBody = () => {
  return <div>
    <div>
      bla bla bla
    </div>
  </div>
};

const NonBreakingFunction = function() {
  return (
    <div />
  );
};

const BreakingFunction = function() {
  return <div>
    <div>
      bla bla bla
    </div>
  </div>
};

class NonBreakingClass extends React.component {
  render() {
    return (
      <div />
    );
  }
}

class BreakingClass extends React.component {
  render() {
    return <div>
      <div>
        bla bla bla
      </div>
    </div>;
  }
}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
const NonBreakingArrowExpression = () => <div />;

const BreakingArrowExpression = () => (
  <div>
    <div>bla bla bla</div>
  </div>
);

const NonBreakingArrowExpressionWBody = () => {
  return <div />;
};

const BreakingArrowExpressionWBody = () => {
  return (
    <div>
      <div>bla bla bla</div>
    </div>
  );
};

const NonBreakingFunction = function() {
  return <div />;
};

const BreakingFunction = function() {
  return (
    <div>
      <div>bla bla bla</div>
    </div>
  );
};

class NonBreakingClass extends React.component {
  render() {
    return <div />;
  }
}

class BreakingClass extends React.component {
  render() {
    return (
      <div>
        <div>bla bla bla</div>
      </div>
    );
  }
}

`;

exports[`spacing.js - flow-verify 1`] = `
const Labels = {
  label1: (
    <fbt>
      Label 1
    </fbt>
  ),

  label2: (
    <fbt>
      Label 2
    </fbt>
  ),

  label3: (
    <fbt>
      Label 3
    </fbt>
  ),
};
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
const Labels = {
  label1: <fbt>Label 1</fbt>,

  label2: <fbt>Label 2</fbt>,

  label3: <fbt>Label 3</fbt>
};

`;

exports[`spacing.js - flow-verify 2`] = `
const Labels = {
  label1: (
    <fbt>
      Label 1
    </fbt>
  ),

  label2: (
    <fbt>
      Label 2
    </fbt>
  ),

  label3: (
    <fbt>
      Label 3
    </fbt>
  ),
};
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
const Labels = {
  label1: <fbt>Label 1</fbt>,

  label2: <fbt>Label 2</fbt>,

  label3: <fbt>Label 3</fbt>
};

`;

exports[`spacing.js - flow-verify 3`] = `
const Labels = {
  label1: (
    <fbt>
      Label 1
    </fbt>
  ),

  label2: (
    <fbt>
      Label 2
    </fbt>
  ),

  label3: (
    <fbt>
      Label 3
    </fbt>
  ),
};
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
const Labels = {
  label1: <fbt>Label 1</fbt>,

  label2: <fbt>Label 2</fbt>,

  label3: <fbt>Label 3</fbt>
};

`;

exports[`spacing.js - flow-verify 4`] = `
const Labels = {
  label1: (
    <fbt>
      Label 1
    </fbt>
  ),

  label2: (
    <fbt>
      Label 2
    </fbt>
  ),

  label3: (
    <fbt>
      Label 3
    </fbt>
  ),
};
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
const Labels = {
  label1: <fbt>Label 1</fbt>,

  label2: <fbt>Label 2</fbt>,

  label3: <fbt>Label 3</fbt>
};

`;