prettier/tests/jsx/__snapshots__/jsfmt.spec.js.snap

4698 lines
103 KiB
Plaintext

// 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>
};
`;