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

821 lines
19 KiB
Plaintext

// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`conditional-expression.js 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[`expression.js 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>
}/>;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<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>} />;
`;
exports[`flow_fix_me.js 1`] = `
const aDiv = (
/* $FlowFixMe */
<div className="foo">
Foo bar
</div>
);
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
const aDiv = (
/* $FlowFixMe */
<div className="foo">Foo bar</div>
);
`;
exports[`html_escape.js 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[`hug.js 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[`logical-expression.js 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[`object-property.js 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[`open-break.js 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>;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<td
onClick={() => {
a;
}}
>
{header}
{showSort}
</td>;
<td
onClick={() => {
a;
}}
>
{header}
<showSort attr="long long long long long long long long long long long" />
</td>;
`;
exports[`parens.js 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[`quotes.js 1`] = `
<div id="&quot;'<>&amp;quot;" />;
<div id='"&#39;<>&amp;quot;' />;
<div id={'\\'"&quot;<>&amp;quot;'} />;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<div id="&quot;'<>&amp;quot;" />;
<div id="&quot;&#39;<>&amp;quot;" />;
<div id={"'\\"&quot;<>&amp;quot;"} />;
`;
exports[`return-statement.js 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[`spacing.js 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>
};
`;