From 858c8e8435cd8e2c1307a85d1124d34572bfc61f Mon Sep 17 00:00:00 2001
From: Saturnino Abril <saturnino.abril@gmail.com>
Date: Thu, 20 Sep 2018 22:45:23 +0800
Subject: [PATCH] [MM-12016] Add test to PostAttachmentOpenGraph component (did
 some refactor to make it easily tested) (#2144)

* add test to PostAttachmentOpenGraph component (did some refactor to make it easily tested)

* remove null check to openGraphData on renderDescription
---
 .../post_attachment_opengraph.test.js.snap    | 145 ++++++++++++++++++
 .../post_attachment_opengraph.js              |  93 ++++++-----
 .../post_attachment_opengraph.test.js         |  99 ++++++++++++
 3 files changed, 299 insertions(+), 38 deletions(-)
 create mode 100644 app/components/post_attachment_opengraph/__snapshots__/post_attachment_opengraph.test.js.snap
 create mode 100644 app/components/post_attachment_opengraph/post_attachment_opengraph.test.js

diff --git a/app/components/post_attachment_opengraph/__snapshots__/post_attachment_opengraph.test.js.snap b/app/components/post_attachment_opengraph/__snapshots__/post_attachment_opengraph.test.js.snap
new file mode 100644
index 000000000..69a203159
--- /dev/null
+++ b/app/components/post_attachment_opengraph/__snapshots__/post_attachment_opengraph.test.js.snap
@@ -0,0 +1,145 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PostAttachmentOpenGraph should match snapshot, without image and description 1`] = `null`;
+
+exports[`PostAttachmentOpenGraph should match snapshot, without image and description 2`] = `
+<Component
+  style={
+    Object {
+      "borderColor": "rgba(170,170,170,0.2)",
+      "borderWidth": 1,
+      "flex": 1,
+      "marginTop": 10,
+      "padding": 10,
+    }
+  }
+>
+  <Component
+    style={
+      Object {
+        "flex": 1,
+      }
+    }
+  >
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+      numberOfLines={1}
+      style={
+        Object {
+          "color": "rgba(170,170,170,0.5)",
+          "fontSize": 12,
+          "marginBottom": 10,
+        }
+      }
+    >
+      Mattermost
+    </Text>
+  </Component>
+  <Component
+    style={
+      Object {
+        "flex": 1,
+        "flexDirection": "row",
+      }
+    }
+  >
+    <TouchableOpacity
+      activeOpacity={0.2}
+      onPress={[Function]}
+      style={
+        Object {
+          "flex": 1,
+        }
+      }
+    >
+      <Text
+        accessible={true}
+        allowFontScaling={true}
+        ellipsizeMode="tail"
+        numberOfLines={3}
+        style={
+          Array [
+            Object {
+              "color": undefined,
+              "fontSize": 14,
+              "marginBottom": 10,
+            },
+            Object {
+              "marginRight": 0,
+            },
+          ]
+        }
+      >
+        Title
+      </Text>
+    </TouchableOpacity>
+  </Component>
+</Component>
+`;
+
+exports[`PostAttachmentOpenGraph should match state and snapshot, on renderDescription 1`] = `null`;
+
+exports[`PostAttachmentOpenGraph should match state and snapshot, on renderDescription 2`] = `
+<Component
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <Text
+    accessible={true}
+    allowFontScaling={true}
+    ellipsizeMode="tail"
+    numberOfLines={5}
+    style={
+      Object {
+        "color": "rgba(170,170,170,0.7)",
+        "fontSize": 13,
+        "marginBottom": 10,
+      }
+    }
+  >
+    Description
+  </Text>
+</Component>
+`;
+
+exports[`PostAttachmentOpenGraph should match state and snapshot, on renderImage 1`] = `null`;
+
+exports[`PostAttachmentOpenGraph should match state and snapshot, on renderImage 2`] = `
+<Component
+  style={
+    Object {
+      "alignItems": "center",
+    }
+  }
+>
+  <TouchableWithoutFeedback
+    onPress={[Function]}
+    style={
+      Object {
+        "height": 150,
+        "width": 312,
+      }
+    }
+  >
+    <Image
+      resizeMode="contain"
+      style={
+        Array [
+          Object {
+            "borderRadius": 3,
+          },
+          Object {
+            "height": 150,
+            "width": 312,
+          },
+        ]
+      }
+    />
+  </TouchableWithoutFeedback>
+</Component>
+`;
diff --git a/app/components/post_attachment_opengraph/post_attachment_opengraph.js b/app/components/post_attachment_opengraph/post_attachment_opengraph.js
index 79f331ec0..859f34594 100644
--- a/app/components/post_attachment_opengraph/post_attachment_opengraph.js
+++ b/app/components/post_attachment_opengraph/post_attachment_opengraph.js
@@ -169,17 +169,34 @@ export default class PostAttachmentOpenGraph extends PureComponent {
         previewImageAtIndex(this.props.navigator, [this.refs.item], 0, files);
     };
 
-    render() {
-        const {isReplyPost, openGraphData, theme} = this.props;
-        const {hasImage, height, imageUrl, width} = this.state;
-
-        if (!openGraphData) {
+    renderDescription = () => {
+        const {openGraphData} = this.props;
+        if (!openGraphData.description) {
             return null;
         }
 
-        const style = getStyleSheet(theme);
+        const style = getStyleSheet(this.props.theme);
+
+        return (
+            <View style={style.flex}>
+                <Text
+                    style={style.siteDescription}
+                    numberOfLines={5}
+                    ellipsizeMode='tail'
+                >
+                    {openGraphData.description}
+                </Text>
+            </View>
+        );
+    }
+
+    renderImage = () => {
+        if (!this.state.hasImage) {
+            return null;
+        }
+
+        const {height, imageUrl, width} = this.state;
 
-        let description = null;
         let source;
         if (imageUrl) {
             source = {
@@ -187,20 +204,37 @@ export default class PostAttachmentOpenGraph extends PureComponent {
             };
         }
 
-        if (openGraphData.description) {
-            description = (
-                <View style={style.flex}>
-                    <Text
-                        style={style.siteDescription}
-                        numberOfLines={5}
-                        ellipsizeMode='tail'
-                    >
-                        {openGraphData.description}
-                    </Text>
-                </View>
-            );
+        const style = getStyleSheet(this.props.theme);
+
+        return (
+            <View
+                ref='item'
+                style={style.imageContainer}
+            >
+                <TouchableWithoutFeedback
+                    onPress={this.handlePreviewImage}
+                    style={{width, height}}
+                >
+                    <Image
+                        ref='image'
+                        style={[style.image, {width, height}]}
+                        source={source}
+                        resizeMode='contain'
+                    />
+                </TouchableWithoutFeedback>
+            </View>
+        );
+    }
+
+    render() {
+        const {isReplyPost, openGraphData, theme} = this.props;
+
+        if (!openGraphData) {
+            return null;
         }
 
+        const style = getStyleSheet(theme);
+
         return (
             <View style={style.container}>
                 <View style={style.flex}>
@@ -226,25 +260,8 @@ export default class PostAttachmentOpenGraph extends PureComponent {
                         </Text>
                     </TouchableOpacity>
                 </View>
-                {description}
-                {hasImage &&
-                <View
-                    ref='item'
-                    style={style.imageContainer}
-                >
-                    <TouchableWithoutFeedback
-                        onPress={this.handlePreviewImage}
-                        style={{width, height}}
-                    >
-                        <Image
-                            ref='image'
-                            style={[style.image, {width, height}]}
-                            source={source}
-                            resizeMode='contain'
-                        />
-                    </TouchableWithoutFeedback>
-                </View>
-                }
+                {this.renderDescription()}
+                {this.renderImage()}
             </View>
         );
     }
diff --git a/app/components/post_attachment_opengraph/post_attachment_opengraph.test.js b/app/components/post_attachment_opengraph/post_attachment_opengraph.test.js
new file mode 100644
index 000000000..4acb18392
--- /dev/null
+++ b/app/components/post_attachment_opengraph/post_attachment_opengraph.test.js
@@ -0,0 +1,99 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+import React from 'react';
+import {shallow} from 'enzyme';
+
+import {
+    Image,
+    TouchableWithoutFeedback,
+    TouchableOpacity,
+} from 'react-native';
+
+import PostAttachmentOpenGraph from './post_attachment_opengraph';
+
+describe('PostAttachmentOpenGraph', () => {
+    const openGraphData = {
+        site_name: 'Mattermost',
+        title: 'Title',
+        url: 'https://mattermost.com/',
+    };
+    const baseProps = {
+        actions: {
+            getOpenGraphMetadata: jest.fn(),
+        },
+        deviceHeight: 600,
+        deviceWidth: 400,
+        isReplyPost: false,
+        link: 'https://mattermost.com/',
+        navigator: {},
+        theme: {
+            centerChannelColor: '#aaa',
+        },
+    };
+
+    test('should match snapshot, without image and description', () => {
+        const wrapper = shallow(
+            <PostAttachmentOpenGraph {...baseProps}/>
+        );
+
+        // should return null
+        expect(wrapper.getElement()).toMatchSnapshot();
+
+        wrapper.setProps({openGraphData});
+        expect(wrapper.getElement()).toMatchSnapshot();
+        expect(wrapper.find(TouchableOpacity).exists()).toEqual(true);
+    });
+
+    test('should match state and snapshot, on renderImage', () => {
+        const wrapper = shallow(
+            <PostAttachmentOpenGraph {...baseProps}/>
+        );
+
+        // should return null
+        expect(wrapper.instance().renderImage()).toMatchSnapshot();
+        expect(wrapper.state('hasImage')).toEqual(false);
+        expect(wrapper.find(Image).exists()).toEqual(false);
+        expect(wrapper.find(TouchableWithoutFeedback).exists()).toEqual(false);
+
+        const images = [{height: 440, width: 1200, url: 'https://mattermost.com/logo.png'}];
+        const openGraphDataWithImage = {...openGraphData, images};
+        wrapper.setProps({openGraphData: openGraphDataWithImage});
+
+        expect(wrapper.instance().renderImage()).toMatchSnapshot();
+        expect(wrapper.state('hasImage')).toEqual(true);
+        expect(wrapper.find(Image).exists()).toEqual(true);
+        expect(wrapper.find(TouchableWithoutFeedback).exists()).toEqual(true);
+    });
+
+    test('should match state and snapshot, on renderDescription', () => {
+        const wrapper = shallow(
+            <PostAttachmentOpenGraph
+                {...baseProps}
+                openGraphData={openGraphData}
+            />
+        );
+
+        // should return null
+        expect(wrapper.instance().renderDescription()).toMatchSnapshot();
+
+        const openGraphDataWithDescription = {...openGraphData, description: 'Description'};
+        wrapper.setProps({openGraphData: openGraphDataWithDescription});
+        expect(wrapper.instance().renderDescription()).toMatchSnapshot();
+    });
+
+    test('should match result on getFilename', () => {
+        const wrapper = shallow(
+            <PostAttachmentOpenGraph {...baseProps}/>
+        );
+
+        const testCases = [
+            {link: 'https://mattermost.com/image.png', result: 'og-image.png'},
+            {link: 'https://mattermost.com/image.jpg', result: 'og-image.jpg'},
+            {link: 'https://mattermost.com/image', result: 'og-image.png'},
+        ];
+
+        testCases.forEach((testCase) => { // eslint-disable-line max-nested-callbacks
+            expect(wrapper.instance().getFilename(testCase.link)).toEqual(testCase.result);
+        });
+    });
+});