From f0990460a62bda901a0548f3d7e6a579cd06ccce Mon Sep 17 00:00:00 2001
From: Kanchalai Tanglertsampan <yuisu@microsoft.com>
Date: Wed, 12 Apr 2017 12:17:27 -0700
Subject: [PATCH] Add tests

---
 .../jsx/checkJsxChildrenProperty1.tsx         | 27 ++++++++++
 .../jsx/checkJsxChildrenProperty2.tsx         | 49 +++++++++++++++++++
 .../jsx/checkJsxChildrenProperty3.tsx         | 44 +++++++++++++++++
 .../jsx/checkJsxChildrenProperty4.tsx         | 49 +++++++++++++++++++
 .../jsx/checkJsxChildrenProperty5.tsx         | 35 +++++++++++++
 .../jsx/checkJsxChildrenProperty6.tsx         | 48 ++++++++++++++++++
 .../jsx/checkJsxChildrenProperty7.tsx         | 33 +++++++++++++
 .../jsx/checkJsxChildrenProperty8.tsx         | 34 +++++++++++++
 ...tsxStatelessFunctionComponentOverload6.tsx |  2 +-
 ...nInFunctionExpressionOfChildrenCallback.ts | 31 ++++++++++++
 10 files changed, 351 insertions(+), 1 deletion(-)
 create mode 100644 tests/cases/conformance/jsx/checkJsxChildrenProperty1.tsx
 create mode 100644 tests/cases/conformance/jsx/checkJsxChildrenProperty2.tsx
 create mode 100644 tests/cases/conformance/jsx/checkJsxChildrenProperty3.tsx
 create mode 100644 tests/cases/conformance/jsx/checkJsxChildrenProperty4.tsx
 create mode 100644 tests/cases/conformance/jsx/checkJsxChildrenProperty5.tsx
 create mode 100644 tests/cases/conformance/jsx/checkJsxChildrenProperty6.tsx
 create mode 100644 tests/cases/conformance/jsx/checkJsxChildrenProperty7.tsx
 create mode 100644 tests/cases/conformance/jsx/checkJsxChildrenProperty8.tsx
 create mode 100644 tests/cases/fourslash/tscCompletionInFunctionExpressionOfChildrenCallback.ts

diff --git a/tests/cases/conformance/jsx/checkJsxChildrenProperty1.tsx b/tests/cases/conformance/jsx/checkJsxChildrenProperty1.tsx
new file mode 100644
index 00000000000..70b58c03f6a
--- /dev/null
+++ b/tests/cases/conformance/jsx/checkJsxChildrenProperty1.tsx
@@ -0,0 +1,27 @@
+// @filename: file.tsx
+// @jsx: preserve
+// @noLib: true
+// @libFiles: react.d.ts,lib.d.ts
+
+import React = require('react');
+
+interface Prop {
+    a: number,
+    b: string,
+    children: string | JSX.Element
+}
+
+function Comp(p: Prop) {
+    return <div>{p.b}</div>;
+}
+
+// OK
+let k = <Comp a={10} b="hi" children ="lol" />;
+let k1 =
+    <Comp a={10} b="hi">
+        hi hi hi!
+    </Comp>;
+let k2 =
+    <Comp a={10} b="hi">
+        <div>hi hi hi!</div>
+    </Comp>;
\ No newline at end of file
diff --git a/tests/cases/conformance/jsx/checkJsxChildrenProperty2.tsx b/tests/cases/conformance/jsx/checkJsxChildrenProperty2.tsx
new file mode 100644
index 00000000000..0c78f8f4125
--- /dev/null
+++ b/tests/cases/conformance/jsx/checkJsxChildrenProperty2.tsx
@@ -0,0 +1,49 @@
+// @filename: file.tsx
+// @jsx: preserve
+// @noLib: true
+// @libFiles: react.d.ts,lib.d.ts
+
+import React = require('react');
+
+interface Prop {
+    a: number,
+    b: string,
+    children: string | JSX.Element
+}
+
+function Comp(p: Prop) {
+    return <div>{p.b}</div>;
+}
+
+// Error: missing children
+let k = <Comp a={10} b="hi" />;
+
+let k1 =
+    <Comp a={10} b="hi" children="Random" >
+        hi hi hi!
+    </Comp>;
+
+// Error: incorrect type
+let k2 =
+    <Comp a={10} b="hi">
+        <div> My Div </div>
+        {(name: string) => <div> My name {name} </div>}
+    </Comp>;
+
+let k3 =
+    <Comp a={10} b="hi">
+        <div> My Div </div>
+        {1000000}
+    </Comp>;
+
+let k4 =
+    <Comp a={10} b="hi" >
+        <div> My Div </div>
+        hi hi hi!
+    </Comp>;
+
+let k5 =
+    <Comp a={10} b="hi" >
+        <div> My Div </div>
+        <div> My Div </div>
+    </Comp>;
\ No newline at end of file
diff --git a/tests/cases/conformance/jsx/checkJsxChildrenProperty3.tsx b/tests/cases/conformance/jsx/checkJsxChildrenProperty3.tsx
new file mode 100644
index 00000000000..c67c6d5440d
--- /dev/null
+++ b/tests/cases/conformance/jsx/checkJsxChildrenProperty3.tsx
@@ -0,0 +1,44 @@
+// @filename: file.tsx
+// @jsx: preserve
+// @noLib: true
+// @libFiles: react.d.ts,lib.d.ts
+
+import React = require('react');
+
+interface IUser {
+    Name: string;
+}
+
+interface IFetchUserProps {
+    children: (user: IUser) => JSX.Element;
+}
+
+class FetchUser extends React.Component<IFetchUserProps, any> {
+    render() {
+        return this.state
+            ? this.props.children(this.state.result)
+            : null;
+    }
+}
+
+// Ok
+function UserName0() {
+    return (
+        <FetchUser>
+            { user => (
+                <h1>{ user.Name }</h1>
+            ) }
+        </FetchUser>
+    );
+}
+
+function UserName1() {
+    return (
+        <FetchUser>
+
+            { user => (
+                <h1>{ user.Name }</h1>
+            ) }
+        </FetchUser>
+    );
+}
\ No newline at end of file
diff --git a/tests/cases/conformance/jsx/checkJsxChildrenProperty4.tsx b/tests/cases/conformance/jsx/checkJsxChildrenProperty4.tsx
new file mode 100644
index 00000000000..34877f2000c
--- /dev/null
+++ b/tests/cases/conformance/jsx/checkJsxChildrenProperty4.tsx
@@ -0,0 +1,49 @@
+// @filename: file.tsx
+// @jsx: preserve
+// @noLib: true
+// @libFiles: react.d.ts,lib.d.ts
+
+import React = require('react');
+
+interface IUser {
+    Name: string;
+}
+
+interface IFetchUserProps {
+    children: (user: IUser) => JSX.Element;
+}
+
+class FetchUser extends React.Component<IFetchUserProps, any> {
+    render() {
+        return this.state
+            ? this.props.children(this.state.result)
+            : null;
+    }
+}
+
+// Error
+function UserName() {
+    return (
+        <FetchUser>
+            { user => (
+                <h1>{ user.NAme }</h1>
+            ) }
+        </FetchUser>
+    );
+}
+
+function UserName1() {
+    return (
+        <FetchUser>
+
+
+            
+            { user => (
+                <h1>{ user.Name }</h1>
+            ) }
+            { user => (
+                <h1>{ user.Name }</h1>
+            ) }
+        </FetchUser>
+    );
+}
\ No newline at end of file
diff --git a/tests/cases/conformance/jsx/checkJsxChildrenProperty5.tsx b/tests/cases/conformance/jsx/checkJsxChildrenProperty5.tsx
new file mode 100644
index 00000000000..6143e4b0faf
--- /dev/null
+++ b/tests/cases/conformance/jsx/checkJsxChildrenProperty5.tsx
@@ -0,0 +1,35 @@
+// @filename: file.tsx
+// @jsx: preserve
+// @noLib: true
+// @libFiles: react.d.ts,lib.d.ts
+
+import React = require('react');
+
+interface Prop {
+    a: number,
+    b: string,
+    children: Button;
+}
+
+class Button extends React.Component<any, any> {
+    render() {
+        return (<div>My Button</div>)
+    }
+}
+
+function Comp(p: Prop) {
+    return <div>{p.b}</div>;
+}
+
+// Error: no children specified
+let k = <Comp a={10} b="hi" />;
+
+// Error: JSX.element is not the same as JSX.ElementClass
+let k1 =
+    <Comp a={10} b="hi">
+        <Button />
+    </Comp>;
+let k2 =
+    <Comp a={10} b="hi">
+        {Button}
+    </Comp>;
\ No newline at end of file
diff --git a/tests/cases/conformance/jsx/checkJsxChildrenProperty6.tsx b/tests/cases/conformance/jsx/checkJsxChildrenProperty6.tsx
new file mode 100644
index 00000000000..c7c709dd369
--- /dev/null
+++ b/tests/cases/conformance/jsx/checkJsxChildrenProperty6.tsx
@@ -0,0 +1,48 @@
+// @filename: file.tsx
+// @jsx: preserve
+// @noLib: true
+// @libFiles: react.d.ts,lib.d.ts
+
+import React = require('react');
+
+interface Prop {
+    a: number,
+    b: string,
+    children: JSX.Element | JSX.Element[];
+}
+
+class Button extends React.Component<any, any> {
+    render() {
+        return (<div>My Button</div>)
+    }
+}
+
+function AnotherButton(p: any) {
+    return <h1>Just Another Button</h1>;
+}
+
+function Comp(p: Prop) {
+    return <div>{p.b}</div>;
+}
+
+// Ok
+let k1 =
+    <Comp a={10} b="hi">
+        <Button />
+        <AnotherButton />
+    </Comp>;
+
+let k2 =
+    <Comp a={10} b="hi">
+     
+    
+    
+        <Button />
+        <AnotherButton />
+    </Comp>;
+
+let k3 = <Comp a={10} b="hi"><Button />  
+<AnotherButton />
+</Comp>;
+
+let k4 = <Comp a={10} b="hi"><Button /></Comp>;
\ No newline at end of file
diff --git a/tests/cases/conformance/jsx/checkJsxChildrenProperty7.tsx b/tests/cases/conformance/jsx/checkJsxChildrenProperty7.tsx
new file mode 100644
index 00000000000..82297737a11
--- /dev/null
+++ b/tests/cases/conformance/jsx/checkJsxChildrenProperty7.tsx
@@ -0,0 +1,33 @@
+// @filename: file.tsx
+// @jsx: preserve
+// @noLib: true
+// @libFiles: react.d.ts,lib.d.ts
+
+import React = require('react');
+
+interface Prop {
+    a: number,
+    b: string,
+    children: JSX.Element | JSX.Element[];
+}
+
+class Button extends React.Component<any, any> {
+    render() {
+        return (<div>My Button</div>)
+    }
+}
+
+function AnotherButton(p: any) {
+    return <h1>Just Another Button</h1>;
+}
+
+function Comp(p: Prop) {
+    return <div>{p.b}</div>;
+}
+
+// Error: whitespaces matters
+let k1 = <Comp a={10} b="hi"><Button />  <AnotherButton /></Comp>;
+let k2 = <Comp a={10} b="hi"><Button />
+    <AnotherButton />  </Comp>;
+let k3 = <Comp a={10} b="hi">    <Button />
+    <AnotherButton /></Comp>;
\ No newline at end of file
diff --git a/tests/cases/conformance/jsx/checkJsxChildrenProperty8.tsx b/tests/cases/conformance/jsx/checkJsxChildrenProperty8.tsx
new file mode 100644
index 00000000000..eaba752b6a4
--- /dev/null
+++ b/tests/cases/conformance/jsx/checkJsxChildrenProperty8.tsx
@@ -0,0 +1,34 @@
+// @filename: file.tsx
+// @jsx: preserve
+// @noLib: true
+// @libFiles: react.d.ts,lib.d.ts
+
+import React = require('react');
+
+interface Prop {
+    a: number,
+    b: string,
+    children: string | JSX.Element | (string | JSX.Element)[];
+}
+
+class Button extends React.Component<any, any> {
+    render() {
+        return (<div>My Button</div>)
+    }
+}
+
+function AnotherButton(p: any) {
+    return <h1>Just Another Button</h1>;
+}
+
+function Comp(p: Prop) {
+    return <div>{p.b}</div>;
+}
+
+// OK
+let k1 = <Comp a={10} b="hi"><Button />  <AnotherButton /></Comp>;
+let k2 = <Comp a={10} b="hi"><Button />
+    <AnotherButton />  </Comp>;
+let k3 = <Comp a={10} b="hi">    <Button />
+    <AnotherButton /></Comp>;
+let k4 = <Comp a={10} b="hi"><Button />  </Comp>;
diff --git a/tests/cases/conformance/jsx/tsxStatelessFunctionComponentOverload6.tsx b/tests/cases/conformance/jsx/tsxStatelessFunctionComponentOverload6.tsx
index ac0e9901427..f2e799c1c8f 100644
--- a/tests/cases/conformance/jsx/tsxStatelessFunctionComponentOverload6.tsx
+++ b/tests/cases/conformance/jsx/tsxStatelessFunctionComponentOverload6.tsx
@@ -55,7 +55,7 @@ const b6 = <MainButton {...obj2} />;
 const b7 = <MainButton {...{onClick: () => { console.log("hi") }}} />;
 const b8 = <MainButton {...{onClick() {}}} />;  // OK; method declaration get retained (See GitHub #13365)
 const b9 = <MainButton to='/some/path' extra-prop>GO</MainButton>;
-const b10 = <MainButton to='/some/path' children="hi" >GO</MainButton>;
+const b10 = <MainButton to='/some/path' children="hi" ></MainButton>;
 const b11 = <MainButton onClick={(e) => {}} className="hello" data-format>Hello world</MainButton>;
 const b12 = <MainButton data-format="Hello world" />
 
diff --git a/tests/cases/fourslash/tscCompletionInFunctionExpressionOfChildrenCallback.ts b/tests/cases/fourslash/tscCompletionInFunctionExpressionOfChildrenCallback.ts
new file mode 100644
index 00000000000..0a926e64ac0
--- /dev/null
+++ b/tests/cases/fourslash/tscCompletionInFunctionExpressionOfChildrenCallback.ts
@@ -0,0 +1,31 @@
+/// <reference path='fourslash.ts' />
+//@module: commonjs
+//@jsx: preserve
+
+// @Filename: 1.tsx
+//// declare module JSX {
+////     interface Element { }
+////     interface IntrinsicElements {
+////     }
+////     interface ElementAttributesProperty { props; }
+//// }
+//// interface IUser {
+////     Name: string;
+//// }
+//// interface IFetchUserProps {
+////     children: (user: IUser) => any;
+//// }
+//// function FetchUser(props: IFetchUserProps) { return undefined; }
+//// function UserName() {
+////     return (
+////         <FetchUser>
+////             { user => (
+////                 <h1>{ user./**/ }</h1> 
+////             )}
+////         </FetchUser>
+////     );
+//// }
+
+goTo.marker();
+debugger;
+verify.completionListContains('Name');
\ No newline at end of file