Commit 58c77f1f authored by Jackson Ray Hamilton's avatar Jackson Ray Hamilton

Add failing tests for JSX indentation bugs

* test/manual/indent/js-jsx.js: Add failing tests for all the js-mode
and js2-mode JSX indentation bugs reported over the years that I could
find.  Some may be duplicates, so I have grouped similar reports
together, for now; we’ll see for certain which distinct cases we need
once we start actually implementing fixes.
* test/manual/indent/js-jsx-quote.js: New file with a nasty test.
parent e1872f80
// -*- mode: js-jsx; -*-
// JSX text node values should be strings, but only JS string syntax
// is considered, so quote marks delimit strings like normal, with
// disastrous results (https://github.com/mooz/js2-mode/issues/409).
function Bug() {
return <div>C'est Montréal</div>;
}
function Test(foo = /'/,
bar = 123) {}
// This test is in a separate file because it can break other tests
// when indenting the whole buffer (not sure why).
// Local Variables:
// indent-tabs-mode: nil
// js-indent-level: 2
// End:
......@@ -70,6 +70,189 @@ return (
</div>
);
// Indent void expressions (no need for contextual parens / commas)
// (https://github.com/mooz/js2-mode/issues/140#issuecomment-166250016).
<div className="class-name">
<h2>Title</h2>
{array.map(() => {
return <Element />;
})}
{message}
</div>
// Another example of above issue
// (https://github.com/mooz/js2-mode/issues/490).
<App>
<div>
{variable1}
<Component/>
</div>
</App>
// Comments and arrows can break indentation (Bug#24896 /
// https://github.com/mooz/js2-mode/issues/389).
const Component = props => (
<FatArrow a={e => c}
b={123}>
</FatArrow>
);
const Component = props => (
<NoFatArrow a={123}
b={123}>
</NoFatArrow>
);
const Component = props => ( // Parse this comment, please.
<FatArrow a={e => c}
b={123}>
</FatArrow>
);
const Component = props => ( // Parse this comment, please.
<NoFatArrow a={123}
b={123}>
</NoFatArrow>
);
// Another example of above issue (Bug#30225).
class {
render() {
return (
<select style={{paddingRight: "10px"}}
onChange={e => this.setState({value: e.target.value})}
value={this.state.value}>
<option>Hi</option>
</select>
);
}
}
// JSX attributes of an arrow function’s expression body’s JSX
// expression should be indented with respect to the JSX opening
// element (Bug#26001 /
// https://github.com/mooz/js2-mode/issues/389#issuecomment-271869380).
class {
render() {
const messages = this.state.messages.map(
message => <Message key={message.id}
text={message.text}
mine={message.mine} />
); return messages;
}
render() {
const messages = this.state.messages.map(message =>
<Message key={message.timestamp}
text={message.text}
mine={message.mine} />
); return messages;
}
}
// Users expect tag closers to align with the tag’s start; this is the
// style used in the React docs, so it should be the default.
// - https://github.com/mooz/js2-mode/issues/389#issuecomment-390766873
// - https://github.com/mooz/js2-mode/issues/482
// - Bug#32158
const foo = (props) => (
<div>
<input
cat={i => i}
/>
<button
className="square"
>
{this.state.value}
</button>
</div>
);
// Embedded JSX in parens breaks indentation
// (https://github.com/mooz/js2-mode/issues/411).
let a = (
<div>
{condition && <Component/>}
{condition && <Component/>}
<div/>
</div>
)
let b = (
<div>
{condition && (<Component/>)}
<div/>
</div>
)
let c = (
<div>
{condition && (<Component/>)}
{condition && "something"}
</div>
)
let d = (
<div>
{(<Component/>)}
{condition && "something"}
</div>
)
// Another example of the above issue (Bug#27000).
function testA() {
return (
<div>
<div> { ( <div/> ) } </div>
</div>
);
}
function testB() {
return (
<div>
<div> { <div/> } </div>
</div>
);
}
// Another example of the above issue
// (https://github.com/mooz/js2-mode/issues/451).
class Classy extends React.Component {
render () {
return (
<div>
<ul className="tocListRoot">
{ this.state.list.map((item) => {
return (<div />)
})}
</ul>
</div>
)
}
}
// Self-closing tags should be indented properly
// (https://github.com/mooz/js2-mode/issues/459).
export default ({ stars }) => (
<div className='overlay__container'>
<div className='overlay__header overlay--text'>
Congratulations!
</div>
<div className='overlay__reward'>
<Icon {...createIconProps(stars > 0)} size='large' />
<div className='overlay__reward__bottom'>
<Icon {...createIconProps(stars > 1)} size='small' />
<Icon {...createIconProps(stars > 2)} size='small' />
</div>
</div>
<div className='overlay__description overlay--text'>
You have created <large>1</large> reminder
</div>
</div>
)
// JS expressions should not break indentation
// (https://github.com/mooz/js2-mode/issues/462).
return (
<Router>
<Bar>
<Route exact path="/foo" render={() => (
<div>nothing</div>
)} />
<Route exact path="/bar" />
</Bar>
</Router>
)
// Local Variables:
// indent-tabs-mode: nil
// js-indent-level: 2
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment