Converted more tests to typescript, improved createElement typings an…

…d small perf improvement there
infernojs · Oct 20, 2024 · cb87928 · cb87928
1 parent 8cacbd0
commit cb87928
Show file tree

Hide file tree

Showing 6 changed files with 106 additions and 54 deletions.
diff --git a/...eate-element/__tests__/components.spec.js → ...eate-element/__tests__/components.spec.ts b/...eate-element/__tests__/components.spec.js → ...eate-element/__tests__/components.spec.ts
@@ -19,7 +19,7 @@ describe('Components (non-JSX)', () => {
   });
 
   if (typeof global !== 'undefined' && !global.usingJSDOM) {
-    class BasicComponent1 extends Component {
+    class BasicComponent1 extends Component<{name: string, title: string}> {
       render() {
         const template = (name, title) =>
           createElement(
@@ -147,7 +147,7 @@ describe('Components (non-JSX)', () => {
       );
     });
 
-    class BasicComponent1b extends Component {
+    class BasicComponent1b extends Component<{isChecked: boolean, title: string}> {
       render() {
         const template = (isChecked, title) =>
           createElement(
@@ -219,7 +219,7 @@ describe('Components (non-JSX)', () => {
       expect(container.querySelector('input').checked).toBe(false);
     });
 
-    class BasicComponent1c extends Component {
+    class BasicComponent1c extends Component<{isEnabled: boolean, title: string, type: string}> {
       render() {
         const template = (isEnabled, title, type) =>
           createElement(
@@ -300,7 +300,7 @@ describe('Components (non-JSX)', () => {
       );
     });
 
-    class BasicComponent1d extends Component {
+    class BasicComponent1d extends Component<{isDisabled: boolean, title: string}> {
       render() {
         const template = (isDisabled, title) =>
           createElement(
@@ -401,7 +401,7 @@ describe('Components (non-JSX)', () => {
       expect(container.innerHTML).toBe('');
     });
 
-    class BasicComponent2 extends Component {
+    class BasicComponent2 extends Component<{name: string, title: string, children: any}> {
       render() {
         const template = (name, title, children) =>
           createElement(
@@ -485,7 +485,7 @@ describe('Components (non-JSX)', () => {
       }
     }
 
-    class BasicComponent3 extends Component {
+    class BasicComponent3 extends Component<{styles: any, title: string}> {
       render() {
         const template = (styles, title) =>
           createElement(
@@ -797,7 +797,13 @@ describe('Components (non-JSX)', () => {
       let componentWillMountCount;
       let template;
 
-      class ComponentLifecycleCheck extends Component {
+      interface CounterState {
+        counter: number;
+      }
+
+      class ComponentLifecycleCheck extends Component<any, CounterState> {
+        state: CounterState;
+
         constructor() {
           super(null);
           this.state = {
@@ -841,7 +847,12 @@ describe('Components (non-JSX)', () => {
       let template;
       let update;
 
-      class ComponentLifecycleCheck extends Component {
+      interface CounterState {
+        counter: number;
+      }
+
+      class ComponentLifecycleCheck extends Component<any, CounterState> {
+        state: CounterState;
         constructor() {
           super(null);
           this.state = {
@@ -914,7 +925,7 @@ describe('Components (non-JSX)', () => {
         return createElement('h2', null, 'small');
       };
 
-      class ConditionalComponent extends Component {
+      class ConditionalComponent extends Component<{condition: boolean}> {
         render() {
           return createElement('div', null, [
             this.props.condition ? tpl3625453295() : tpl4021787591(),
@@ -956,7 +967,12 @@ describe('Components (non-JSX)', () => {
         return createElement(v0, null);
       };
 
-      class ValueComponent extends Component {
+      interface ValueState {
+        organizations: {name: string, key: string|number}[]
+      }
+      class ValueComponent extends Component<any, ValueState> {
+        state: ValueState;
+
         constructor(props) {
           super(props);
           this.state = {
@@ -1053,7 +1069,7 @@ describe('Components (non-JSX)', () => {
           'The title is abc',
         );
 
-        render(template(BasicStatelessComponent1), container);
+        render(template(BasicStatelessComponent1, undefined), container);
         expect(container.firstChild.childNodes.length).toBe(1);
         expect(container.firstChild.firstChild.getAttribute('class')).toBe(
           'basic',
@@ -1066,7 +1082,7 @@ describe('Components (non-JSX)', () => {
           'The title is ',
         );
 
-        render(template(BasicStatelessComponent1), container);
+        render(template(BasicStatelessComponent1, undefined), container);
         expect(container.firstChild.childNodes.length).toBe(1);
         expect(container.firstChild.firstChild.getAttribute('class')).toBe(
           'basic',
@@ -1098,6 +1114,9 @@ describe('Components (non-JSX)', () => {
       };
 
       class TEST extends Component {
+        // @ts-ignore it does not understand meaning of call(this)
+        private makeVisible: () => void;
+
         constructor(props) {
           super(props);
           this.state = {
@@ -1183,7 +1202,7 @@ describe('Components (non-JSX)', () => {
         render() {
           /* eslint new-cap:0 */
           return BaseView(
-            this.toggle,
+            undefined,
             function () {
               return this.state.list.map(function (result) {
                 return Looper(result);
@@ -1267,7 +1286,7 @@ describe('Components (non-JSX)', () => {
           }
         }
 
-        class Message extends Component {
+        class Message extends Component<{text: string}> {
           render() {
             return createElement('div', null, [
               this.props.text,
@@ -1276,7 +1295,7 @@ describe('Components (non-JSX)', () => {
           }
         }
 
-        class MessageList extends Component {
+        class MessageList extends Component<{messages: {text: string}[]}> {
           getChildContext() {
             return { color: 'purple' };
           }

diff --git a/...ate-element/__tests__/components.spec.jsx → ...ate-element/__tests__/components.spec.tsx b/...ate-element/__tests__/components.spec.jsx → ...ate-element/__tests__/components.spec.tsx
diff --git a/.../__tests__/createElement.fragment.spec.js → .../__tests__/createElement.fragment.spec.ts b/.../__tests__/createElement.fragment.spec.js → .../__tests__/createElement.fragment.spec.ts
@@ -5,6 +5,7 @@ import {
   Fragment,
   render,
   rerender,
+  VNode,
 } from 'inferno';
 import { createElement } from 'inferno-create-element';
 import { ChildFlags } from 'inferno-vnode-flags';
@@ -522,7 +523,7 @@ describe('CreateElement (non-JSX)', () => {
       let mountCounter = 0;
       let unmountCounter = 0;
 
-      const FoobarCom = class FoobarCom extends Component {
+      const FoobarCom = class FoobarCom extends Component<{node: HTMLDivElement}> {
         componentWillMount() {
           mountCounter++;
         }
@@ -556,6 +557,7 @@ describe('CreateElement (non-JSX)', () => {
             first: 'first',
             mid: 'MID',
             last: createElement('div', null, 'Why?'),
+            changeOrder: false
           }),
         ),
         container,
@@ -593,6 +595,7 @@ describe('CreateElement (non-JSX)', () => {
             first: 'first',
             mid: 'MID',
             last: createElement('div', null, 'Why?'),
+            changeOrder: false,
           }),
         ),
         container,
@@ -1013,7 +1016,7 @@ describe('CreateElement (non-JSX)', () => {
         return createElement('div', null, 'Ok');
       }
 
-      let content = [null];
+      let content: (VNode|null)[] = [null];
 
       render(
         createElement(
@@ -1051,7 +1054,7 @@ describe('CreateElement (non-JSX)', () => {
         return createElement('div', null, 'Ok');
       }
 
-      let content = [];
+      let content: (VNode|null)[] = [];
 
       render(
         createElement(
@@ -1137,7 +1140,7 @@ describe('CreateElement (non-JSX)', () => {
         }
       };
 
-      let nodes = [];
+      let nodes: (VNode|null)[] = [];
 
       render(createElement(Fragment, null, nodes), container);
 
@@ -1308,10 +1311,20 @@ describe('CreateElement (non-JSX)', () => {
     it('Should mount fragment children to correct position Github #1412', () => {
       const f = (...xs) => createFragment(xs, 0);
 
-      class Articles extends Component {
+      interface ArticlesState {
+        articles: string[];
+        sections: string[];
+      }
+
+      class Articles extends Component<unknown, ArticlesState> {
+        state: ArticlesState;
+
         constructor() {
           super();
-          this.state = { articles: ['id2', 'id3'], sections: ['id0', 'id1'] };
+          this.state = {
+            articles: ['id2', 'id3'],
+            sections: ['id0', 'id1']
+          };
         }
 
         componentDidMount() {
@@ -1371,7 +1384,13 @@ describe('CreateElement (non-JSX)', () => {
     it('Should re-mount fragment children to correct position when edge is component', () => {
       const f = (...xs) => createFragment(xs, 0);
 
-      class Articles extends Component {
+      interface ArticlesState {
+        articles: string[];
+        sections: string[];
+      }
+
+      class Articles extends Component<unknown, ArticlesState> {
+        state: ArticlesState;
         constructor() {
           super();
           this.state = { articles: ['id2', 'id3'], sections: ['id0', 'id1'] };
@@ -1452,7 +1471,13 @@ describe('CreateElement (non-JSX)', () => {
     it('Should append more fragment children to correct position when edge is component', () => {
       const f = (...xs) => createFragment(xs, 0);
 
-      class Articles extends Component {
+      interface ArticlesState {
+        articles: string[];
+        sections: string[];
+      }
+
+      class Articles extends Component<unknown, ArticlesState> {
+        state: ArticlesState;
         constructor() {
           super();
           this.state = { articles: ['id2', 'id3'], sections: ['id0', 'id1'] };

diff --git a/...e-element/__tests__/createElement.spec.js → ...e-element/__tests__/createElement.spec.ts b/...e-element/__tests__/createElement.spec.js → ...e-element/__tests__/createElement.spec.ts
@@ -1,5 +1,6 @@
-import { Component, createRef, forwardRef, Fragment, render } from 'inferno';
+import {Component, createRef, forwardRef, Fragment, Inferno, type RefObject, render} from 'inferno';
 import { createElement } from 'inferno-create-element';
+import SFC = Inferno.SFC;
 
 describe('CreateElement (non-JSX)', () => {
   let container;
@@ -146,10 +147,10 @@ describe('CreateElement (non-JSX)', () => {
   });
 
   it('Should handle node with refs', (done) => {
-    let myRef = 'myRef';
+    let myRef: any = 'myRef';
 
     const app = () => {
-      const node = () =>
+      const node: SFC<any> = () =>
         createElement('a', {
           ref: (c) => (myRef = c),
         });
@@ -199,7 +200,8 @@ describe('CreateElement (non-JSX)', () => {
   });
 
   it('Should be possible to forward createRef', () => {
-    const FancyButton = forwardRef((props, ref) =>
+    // TODO: Investigate how these refs should be typed
+    const FancyButton = forwardRef<HTMLButtonElement, { children?: any }>((props, ref: any) =>
       createElement(
         'button',
         { ref, className: 'FancyButton' },
@@ -210,6 +212,8 @@ describe('CreateElement (non-JSX)', () => {
     expect(FancyButton.render).toBeDefined();
 
     class Hello extends Component {
+      btn: RefObject<HTMLButtonElement>;
+
       constructor(props) {
         super(props);
 
@@ -222,7 +226,7 @@ describe('CreateElement (non-JSX)', () => {
       }
 
       render() {
-        return createElement(FancyButton, { ref: this.btn }, 'Click me!');
+        return createElement(FancyButton, { ref: this.btn as any }, 'Click me!');
       }
     }
 

diff --git a/...create-element/__tests__/creation.spec.js → ...create-element/__tests__/creation.spec.ts b/...create-element/__tests__/creation.spec.js → ...create-element/__tests__/creation.spec.ts