[Emacs-diffs] feature/jsx 754f826 01/19: Add failing tests for JSX indentation bugs

[Marcin Borkowski]

branch: feature/jsx
commit 754f826d6f5ac221536480e02856131ec3ac0d2c
Author: Jackson Ray Hamilton <address@hidden>
Commit: Marcin Borkowski <address@hidden>

    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.
---
 test/manual/indent/js-jsx-quote.js |  18 ++++
 test/manual/indent/js-jsx.js       | 183 +++++++++++++++++++++++++++++++++++++
 2 files changed, 201 insertions(+)

diff --git a/test/manual/indent/js-jsx-quote.js 
b/test/manual/indent/js-jsx-quote.js
new file mode 100644
index 0000000..4b71a65
--- /dev/null
+++ b/test/manual/indent/js-jsx-quote.js
@@ -0,0 +1,18 @@
+// -*- 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:
diff --git a/test/manual/indent/js-jsx.js b/test/manual/indent/js-jsx.js
index 7401939..35ca4b2 100644
--- a/test/manual/indent/js-jsx.js
+++ b/test/manual/indent/js-jsx.js
@@ -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