[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
This commit is contained in:
Saturnino Abril
Elias Nahum
parent
ce0fc1a2d9
commit
858c8e8435
3 changed files with 299 additions and 38 deletions
|
|
@ -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>
|
||||
`;
|
||||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
});
|
||||
});
|
||||
});
|
||||
Loading…
Reference in a new issue