Merge pull request #149 from UXPin/20301-add-unit-test-for-ts-support

20301 add unit test for ts support

packages/uxpin-merge-cli/src/steps/serialization/component/implementation/typescript/__tests__/serializeTSComponent.test.ts

@@ -577,6 +577,112 @@ describe('serializeTSComponent', () => {
       });
     });
 
+    it('serializes component props with extended interface type', () => {
+      // given
+      const component:ComponentImplementationInfo = getImplementation('ClassWithExtendedInterface');
+      const expectedProps:ComponentMetadata = {
+        name: 'ClassWithExtendedInterface',
+        properties: [
+          {
+            description: '',
+            isRequired: false,
+            name: 'helpText',
+            type: { name: 'string', structure: {} },
+          },
+          {
+            description: '',
+            isRequired: true,
+            name: 'image',
+            type: { name: 'string', structure: {} },
+          },
+          {
+            description: '',
+            isRequired: true,
+            name: 'iconType',
+            type: { name: 'string', structure: {} },
+          },
+          {
+            description: '',
+            isRequired: true,
+            name: 'size',
+            type: { name: 'number', structure: {} },
+          },
+          {
+            description: '',
+            isRequired: false,
+            name: 'disabled',
+            type: { name: 'boolean', structure: {} },
+          },
+          {
+            description: '',
+            isRequired: true,
+            name: 'actionType',
+            type: { name: 'string', structure: {} },
+          },
+        ],
+      };
+
+      // when
+      return serializeTSComponent(component).then((serializedProps) => {
+        // then
+        expect(serializedProps.result).toEqual(expectedProps);
+        expect(serializedProps.warnings).toEqual([]);
+      });
+    });
+
+    it('serializes functional component with intersection type of properties object', () => {
+      // given
+      const component:ComponentImplementationInfo = getImplementation('FunctionWithCombinedPropertiesType');
+      const expectedProps:ComponentMetadata = {
+        name: 'FunctionWithCombinedPropertiesType',
+        properties: [
+          {
+            description: 'Local property',
+            isRequired: true,
+            name: 'id',
+            type: { name: 'string', structure: {} },
+          },
+          {
+            description: '',
+            isRequired: true,
+            name: 'hidden',
+            type: { name: 'boolean', structure: {} },
+          },
+          {
+            description: '',
+            isRequired: false,
+            name: 'children',
+            type: { name: 'string', structure: {} },
+          },
+          {
+            description: '',
+            isRequired: true,
+            name: 'name',
+            type: { name: 'string', structure: {} },
+          },
+          {
+            description: '',
+            isRequired: true,
+            name: 'value',
+            type: { name: 'number', structure: {} },
+          },
+          {
+            description: '',
+            isRequired: true,
+            name: 'nested',
+            type: { name: 'shape', structure: {} },
+          },
+        ],
+      };
+
+      // when
+      return serializeTSComponent(component).then((serializedProps) => {
+        // then
+        expect(serializedProps.result).toEqual(expectedProps);
+        expect(serializedProps.warnings).toEqual([]);
+      });
+    });
+
     it('serializes component props imported from shorthanded file ' +
       'exporting directly from import from index file', () => {
       // given
@@ -705,6 +811,64 @@ describe('serializeTSComponent', () => {
       });
     });
 
+    it('serializes component props with array of union type', () => {
+      // given
+      const component:ComponentImplementationInfo = getImplementation('ClassWithArrayOfUnionType');
+      const expectedProps:ComponentMetadata = {
+        name: 'ClassWithArrayOfUnionType',
+        properties: [
+          {
+            description: '',
+            isRequired: true,
+            name: 'propWithArrayOfUnion',
+            type: {
+              name: 'union',
+              structure: {
+                elements: expect.arrayContaining([
+                  { name: 'string', structure: {} },
+                  { name: 'element', structure: {} },
+                  { name: 'array', structure: {} },
+                ]),
+              },
+            },
+          },
+        ],
+      };
+
+      // when
+      return serializeTSComponent(component).then((serializedProps) => {
+        // then
+        expect(serializedProps.result).toEqual(expectedProps);
+        expect(serializedProps.warnings).toEqual([]);
+      });
+    });
+
+    it('serializes component props with two dimensional array', () => {
+      // given
+      const component:ComponentImplementationInfo = getImplementation('ClassWithTwoDimensionalArray');
+      const expectedProps:ComponentMetadata = {
+        name: 'ClassWithTwoDimensionalArray',
+        properties: [
+          {
+            description: '',
+            isRequired: true,
+            name: 'rows',
+            type: {
+              name: 'array',
+              structure: {},
+            },
+          },
+        ],
+      };
+
+      // when
+      return serializeTSComponent(component).then((serializedProps) => {
+        // then
+        expect(serializedProps.result).toEqual(expectedProps);
+        expect(serializedProps.warnings).toEqual([]);
+      });
+    });
+
     it('doesn\'t support imported Component type in other way than `React.Component`', async () => {
       // given
       const component:ComponentImplementationInfo = getImplementation('ClassWithoutImportedReactComponent');

packages/uxpin-merge-cli/test/resources/components/typescript/ClassWithArrayOfUnionType.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+
+export type Error =
+  | string
+  | React.ReactElement<any>
+  | (string | React.ReactElement<any>)[];
+
+interface Props {
+  propWithArrayOfUnion: Error;
+}
+
+export default class ClassWithArrayOfUnionType extends React.Component<Props> {
+  public render(): JSX.Element {
+    const {propWithArrayOfUnion} = this.props;
+    return (
+      <div>
+        <button>{propWithArrayOfUnion}</button>
+      </div>)
+  }
+}

packages/uxpin-merge-cli/test/resources/components/typescript/ClassWithExtendedInterface.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+
+interface Action {
+  actionType:string;
+}
+
+interface DisableableAction extends Action {
+  disabled?:boolean;
+}
+
+interface IconableAction {
+  iconType:string;
+  size:number;
+}
+
+interface ExtendedInterface extends IconableAction, DisableableAction {
+  helpText?: string;
+  image: string;
+}
+
+export default class ClassWithExtendedInterface extends React.Component<ExtendedInterface> {
+
+  public render():JSX.Element {
+    const { helpText, disabled } = this.props;
+    return (
+      <div>
+        <button disabled={disabled}>
+          {helpText}
+        </button>
+      </div>
+    );
+  }
+}

packages/uxpin-merge-cli/test/resources/components/typescript/ClassWithTwoDimensionalArray.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+
+type TableData = string | number | React.ReactNode;
+
+interface Props {
+  rows:TableData[][],
+}
+
+export default class ClassWithTwoDimensionalArray extends React.Component<Props> {
+  public render():JSX.Element {
+    const { rows } = this.props;
+    return (
+      <div>
+        <button>
+          {rows}
+        </button>
+      </div>
+    );
+  }
+}

packages/uxpin-merge-cli/test/resources/components/typescript/FunctionWithCombinedPropertiesType.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { ExternalShapeType, NestedShape } from './ExternalShapeType';
+import { withI18n } from './hoc/withI18n';
+
+export function labelID(item:NestedShape):string {
+  return `${item.keyA}Label`;
+}
+
+export interface Props {
+  /**
+   * Local property
+   */
+  id:string;
+  hidden:boolean;
+  children?:string;
+}
+
+export type CombinedType = Props & ExternalShapeType;
+
+/**
+ * @uxpincomponent
+ */
+function FunctionWithCombinedPropertiesType({
+  children,
+  hidden,
+  id,
+  nested: { keyA, keyB },
+}:CombinedType) {
+  return (
+    <div>
+      <label id={labelID({ keyA, keyB })}
+             htmlFor={id}
+             className={hidden ? 'hidden' : ''}>
+        {children}
+      </label>
+    </div>
+  );
+}
+
+export default withI18n(FunctionWithCombinedPropertiesType);