Add tests

Author: Kanchalai Tanglertsampan

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>;

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>;

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>
+    );
+}

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>
+    );
+}

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>;

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>;

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>;

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>;

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" />
 

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');