feat(components): text - improve ts definitions for props

src/components/ui/text/text.component.tsx

@@ -9,17 +9,22 @@ import {
   Text as RNText,
   TextProps as RNTextProps,
 } from 'react-native';
+import { Overwrite } from 'utility-types';
 import {
   styled,
   StyledComponentProps,
-} from '@kitten/theme';
+} from '../../theme';
 
-type ChildElement = string | TextElement;
+type TextStyledProps = Overwrite<StyledComponentProps, {
+  appearance?: 'default' | 'alternative' | 'hint' | string;
+}>;
 
-export interface TextProps extends StyledComponentProps, RNTextProps {
-  category?: string;
-  status?: string;
+type ChildElement = React.ReactText | TextElement;
+
+export interface TextProps extends RNTextProps, TextStyledProps {
   children?: ChildElement | ChildElement[];
+  category?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 's1' | 's2' | 'p1' | 'p2' | 'c1' | 'c2' | 'label' | string;
+  status?: 'basic' | 'primary' | 'success' | 'info' | 'warning' | 'danger' | 'control' | string;
 }
 
 export type TextElement = React.ReactElement<TextProps>;
@@ -59,11 +64,11 @@ export class TextComponent extends React.Component<TextProps> {
   static styledComponentName: string = 'Text';
 
   public render(): React.ReactElement<RNTextProps> {
-    const { eva, style, ...derivedProps } = this.props;
+    const { eva, style, ...textProps } = this.props;
 
     return (
       <RNText
-        {...derivedProps}
+        {...textProps}
         style={[eva.style, style]}
       />
     );

src/components/ui/text/text.spec.tsx

@@ -0,0 +1,50 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import React from 'react';
+import { render } from 'react-native-testing-library';
+import {
+  light,
+  mapping,
+} from '@eva-design/eva';
+import { ApplicationProvider } from '../../theme';
+import {
+  Text,
+  TextProps,
+} from './text.component';
+
+describe('@text: component checks', () => {
+
+  const TestText = (props?: TextProps) => (
+    <ApplicationProvider
+      mapping={mapping}
+      theme={light}>
+      <Text {...props}/>
+    </ApplicationProvider>
+  );
+
+  it('should render text passed to children', () => {
+    const component = render(
+      <TestText>I love Babel</TestText>,
+    );
+
+    const text = component.getByText('I love Babel');
+
+    expect(text).toBeTruthy();
+  });
+
+  it('should render component passed to children', () => {
+    const component = render(
+      <TestText>
+        <Text>I love Babel</Text>
+      </TestText>,
+    );
+
+    const textAsComponent = component.getByText('I love Babel');
+
+    expect(textAsComponent).toBeTruthy();
+  });
+});