feat(components): avatar - improve with meaningful tests and ts prop …

…definitions
akveo · Feb 28, 2020 · a07ea83 · a07ea83
1 parent 8ab5608
commit a07ea83
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 72 deletions.
diff --git a/src/components/ui/avatar/avatar.component.tsx b/src/components/ui/avatar/avatar.component.tsx
@@ -11,19 +11,27 @@ import {
   ImageStyle,
   StyleSheet,
 } from 'react-native';
+import { Overwrite } from 'utility-types';
 import {
   styled,
   StyledComponentProps,
   StyleType,
 } from '../../theme';
 
-export interface AvatarProps extends StyledComponentProps, ImageProps {
-  shape?: string;
-  size?: string;
+type AvatarStyledProps = Overwrite<StyledComponentProps, {
+  appearance?: 'default' | string;
+}>;
+
+export interface AvatarProps extends ImageProps, AvatarStyledProps {
+  shape?: AvatarEvaShape | string;
+  size?: AvatarEvaSize | string;
 }
 
 export type AvatarElement = React.ReactElement<AvatarProps>;
 
+type AvatarEvaShape = 'round' | 'rounded' | 'square';
+type AvatarEvaSize = 'tiny' | 'small' | 'medium' | 'large' | 'giant';
+
 /**
  * `Avatar` is a styled `Image` component.
  *
@@ -53,7 +61,7 @@ export class AvatarComponent extends React.Component<AvatarProps> {
 
   static styledComponentName: string = 'Avatar';
 
-  private getComponentStyle = (source: StyleType): StyleType => {
+  private getComponentStyle = (source: StyleType): ImageStyle => {
     const { roundCoefficient, ...containerParameters } = source;
 
     // @ts-ignore: avoid checking `containerParameters`
@@ -72,13 +80,13 @@ export class AvatarComponent extends React.Component<AvatarProps> {
   };
 
   public render(): React.ReactElement<ImageProps> {
-    const { eva, ...restProps } = this.props;
-    const componentStyle: ImageStyle = this.getComponentStyle(eva.style);
+    const { eva, ...imageProps } = this.props;
+    const evaStyle: ImageStyle = this.getComponentStyle(eva.style);
 
     return (
       <Image
-        {...restProps}
-        style={componentStyle}
+        {...imageProps}
+        style={evaStyle}
       />
     );
   }

diff --git a/src/components/ui/avatar/avatar.spec.tsx b/src/components/ui/avatar/avatar.spec.tsx
@@ -1,100 +1,77 @@
+/**
+ * @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 {
   Image,
-  ImageSourcePropType,
   StyleSheet,
 } from 'react-native';
+import { render } from 'react-native-testing-library';
 import {
-  render,
-  RenderAPI,
-  shallow,
-} from 'react-native-testing-library';
-import { ReactTestInstance } from 'react-test-renderer';
-import {
-  ApplicationProvider,
-  ApplicationProviderProps,
-} from '@kitten/theme';
+  light,
+  mapping,
+} from '@eva-design/eva';
+import { ApplicationProvider } from '../../theme';
 import {
   Avatar,
   AvatarProps,
 } from './avatar.component';
-import {
-  mapping,
-  theme,
-} from '../support/tests';
 
-const Mock = (props?: AvatarProps): React.ReactElement<ApplicationProviderProps> => {
-  return (
+describe('@avatar: component checks', () => {
+
+  const TestAvatar = (props: Partial<AvatarProps>) => (
     <ApplicationProvider
       mapping={mapping}
-      theme={theme}>
-      <Avatar {...props} />
+      theme={light}>
+      <Avatar
+        source={{ uri: 'https://akveo.github.io/eva-icons/fill/png/128/star.png' }}
+        {...props}
+      />
     </ApplicationProvider>
   );
-};
-
-const renderComponent = (props?: AvatarProps): RenderAPI => {
-  return render(
-    <Mock {...props} />,
-  );
-};
-
-const iconSource: ImageSourcePropType = { uri: 'https://akveo.github.io/eva-icons/fill/png/128/star.png' };
 
-describe('@avatar: matches snapshot', () => {
+  it('should render image', () => {
+    const component = render(
+      <TestAvatar/>,
+    );
 
-  describe('* appearance', () => {
-
-    it('* default', () => {
-      const component: RenderAPI = renderComponent({
-        source: iconSource,
-      });
-
-      const { output } = shallow(component.getByType(Avatar));
-
-      expect(output).toMatchSnapshot();
-    });
+    const image = component.getByType(Image);
 
+    expect(image).toBeTruthy();
+    expect(image.props.source).toEqual({ uri: 'https://akveo.github.io/eva-icons/fill/png/128/star.png' });
   });
 
-});
-
-describe('@avatar: component checks', () => {
-
-  it('* round shape styled properly', () => {
-    const component: RenderAPI = renderComponent({
-      source: iconSource,
-      shape: 'round',
-    });
-
-    const avatar: ReactTestInstance = component.getByType(Image);
+  it('should be round', () => {
+    const component = render(
+      <TestAvatar shape='round'/>,
+    );
 
+    const avatar = component.getByType(Image);
     const { borderRadius, height } = StyleSheet.flatten(avatar.props.style);
 
     expect(borderRadius).toEqual(height / 2);
   });
 
-  it('* rounded shape styled properly', () => {
-    const component: RenderAPI = renderComponent({
-      source: iconSource,
-      shape: 'rounded',
-    });
-
-    const avatar: ReactTestInstance = component.getByType(Image);
+  it('should be rounded', () => {
+    const component = render(
+      <TestAvatar shape='rounded'/>,
+    );
 
+    const avatar = component.getByType(Image);
     const { borderRadius, height } = StyleSheet.flatten(avatar.props.style);
 
     expect(borderRadius).toBeLessThan(height);
   });
 
-  it('* square shape', () => {
-    const component: RenderAPI = renderComponent({
-      source: iconSource,
-      shape: 'square',
-    });
-
-    const avatar: ReactTestInstance = component.getByType(Image);
+  it('should be square', () => {
+    const component = render(
+      <TestAvatar shape='square'/>,
+    );
 
+    const avatar = component.getByType(Image);
     const { borderRadius } = StyleSheet.flatten(avatar.props.style);
 
     expect(borderRadius).toEqual(0);