diff --git a/app/screens/options_modal/__snapshots__/option_modal_list.test.js.snap b/app/screens/options_modal/__snapshots__/option_modal_list.test.js.snap new file mode 100644 index 000000000..83ae3dcd6 --- /dev/null +++ b/app/screens/options_modal/__snapshots__/option_modal_list.test.js.snap @@ -0,0 +1,2779 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`OptionModalList should match snapshot for Android 1`] = ` +ShallowWrapper { + "length": 1, + Symbol(enzyme.__root__): [Circular], + Symbol(enzyme.__unrendered__): , + Symbol(enzyme.__renderer__): Object { + "batchedUpdates": [Function], + "getNode": [Function], + "render": [Function], + "simulateEvent": [Function], + "unmount": [Function], + }, + Symbol(enzyme.__node__): Object { + "instance": null, + "key": undefined, + "nodeType": "class", + "props": Object { + "children": + + + + + + + + + + + + + + + + , + "style": Object { + "alignItems": "center", + "flex": 1, + "justifyContent": "center", + }, + }, + "ref": null, + "rendered": Object { + "instance": null, + "key": undefined, + "nodeType": "class", + "props": Object { + "children": Array [ + + + + + + , + + + + + + , + + + , + ], + "style": Object { + "alignSelf": "stretch", + "backgroundColor": "white", + "borderRadius": 2, + "marginHorizontal": 30, + }, + }, + "ref": null, + "rendered": Array [ + Object { + "instance": null, + "key": "0", + "nodeType": "class", + "props": Object { + "children": + + + , + "style": Object { + "borderBottomColor": "rgba(0, 0, 0, 0.1)", + "borderBottomWidth": 1, + }, + }, + "ref": null, + "rendered": Object { + "instance": null, + "key": undefined, + "nodeType": "class", + "props": Object { + "activeOpacity": 0.2, + "children": Array [ + , + , + ], + "onPress": [Function], + "style": Object { + "alignItems": "center", + "alignSelf": "stretch", + "flexDirection": "row", + "justifyContent": "space-between", + "padding": 15, + }, + }, + "ref": null, + "rendered": Array [ + Object { + "instance": null, + "key": undefined, + "nodeType": "class", + "props": Object { + "defaultMessage": "Take Photo or Video", + "id": "mobile.file_upload.camera", + "style": Array [ + Object { + "color": "#000", + "flex": 1, + "fontSize": 16, + }, + undefined, + ], + }, + "ref": null, + "rendered": null, + "type": [Function], + }, + Object { + "instance": null, + "key": undefined, + "nodeType": "class", + "props": Object { + "allowFontScaling": false, + "name": "camera", + "size": 18, + "style": Object { + "color": "#7f8180", + }, + }, + "ref": null, + "rendered": null, + "type": [Function], + }, + ], + "type": [Function], + }, + "type": [Function], + }, + Object { + "instance": null, + "key": "1", + "nodeType": "class", + "props": Object { + "children": + + + , + "style": Object { + "borderBottomColor": "rgba(0, 0, 0, 0.1)", + "borderBottomWidth": 1, + }, + }, + "ref": null, + "rendered": Object { + "instance": null, + "key": undefined, + "nodeType": "class", + "props": Object { + "activeOpacity": 0.2, + "children": Array [ + , + , + ], + "onPress": [Function], + "style": Object { + "alignItems": "center", + "alignSelf": "stretch", + "flexDirection": "row", + "justifyContent": "space-between", + "padding": 15, + }, + }, + "ref": null, + "rendered": Array [ + Object { + "instance": null, + "key": undefined, + "nodeType": "class", + "props": Object { + "defaultMessage": "Photo Library", + "id": "mobile.file_upload.library", + "style": Array [ + Object { + "color": "#000", + "flex": 1, + "fontSize": 16, + }, + undefined, + ], + }, + "ref": null, + "rendered": null, + "type": [Function], + }, + Object { + "instance": null, + "key": undefined, + "nodeType": "class", + "props": Object { + "allowFontScaling": false, + "name": "photo", + "size": 18, + "style": Object { + "color": "#7f8180", + }, + }, + "ref": null, + "rendered": null, + "type": [Function], + }, + ], + "type": [Function], + }, + "type": [Function], + }, + Object { + "instance": null, + "key": "2", + "nodeType": "class", + "props": Object { + "activeOpacity": 0.2, + "children": , + "onPress": [Function], + "style": Object { + "alignItems": "center", + "alignSelf": "stretch", + "flexDirection": "row", + "justifyContent": "space-between", + "padding": 15, + }, + }, + "ref": null, + "rendered": Object { + "instance": null, + "key": undefined, + "nodeType": "class", + "props": Object { + "defaultMessage": "Cancel", + "id": "channel_modal.cancel", + "style": Object { + "color": "#000", + "flex": 1, + "fontSize": 16, + }, + }, + "ref": null, + "rendered": null, + "type": [Function], + }, + "type": [Function], + }, + ], + "type": [Function], + }, + "type": [Function], + }, + Symbol(enzyme.__nodes__): Array [ + Object { + "instance": null, + "key": undefined, + "nodeType": "class", + "props": Object { + "children": + + + + + + + + + + + + + + + + , + "style": Object { + "alignItems": "center", + "flex": 1, + "justifyContent": "center", + }, + }, + "ref": null, + "rendered": Object { + "instance": null, + "key": undefined, + "nodeType": "class", + "props": Object { + "children": Array [ + + + + + + , + + + + + + , + + + , + ], + "style": Object { + "alignSelf": "stretch", + "backgroundColor": "white", + "borderRadius": 2, + "marginHorizontal": 30, + }, + }, + "ref": null, + "rendered": Array [ + Object { + "instance": null, + "key": "0", + "nodeType": "class", + "props": Object { + "children": + + + , + "style": Object { + "borderBottomColor": "rgba(0, 0, 0, 0.1)", + "borderBottomWidth": 1, + }, + }, + "ref": null, + "rendered": Object { + "instance": null, + "key": undefined, + "nodeType": "class", + "props": Object { + "activeOpacity": 0.2, + "children": Array [ + , + , + ], + "onPress": [Function], + "style": Object { + "alignItems": "center", + "alignSelf": "stretch", + "flexDirection": "row", + "justifyContent": "space-between", + "padding": 15, + }, + }, + "ref": null, + "rendered": Array [ + Object { + "instance": null, + "key": undefined, + "nodeType": "class", + "props": Object { + "defaultMessage": "Take Photo or Video", + "id": "mobile.file_upload.camera", + "style": Array [ + Object { + "color": "#000", + "flex": 1, + "fontSize": 16, + }, + undefined, + ], + }, + "ref": null, + "rendered": null, + "type": [Function], + }, + Object { + "instance": null, + "key": undefined, + "nodeType": "class", + "props": Object { + "allowFontScaling": false, + "name": "camera", + "size": 18, + "style": Object { + "color": "#7f8180", + }, + }, + "ref": null, + "rendered": null, + "type": [Function], + }, + ], + "type": [Function], + }, + "type": [Function], + }, + Object { + "instance": null, + "key": "1", + "nodeType": "class", + "props": Object { + "children": + + + , + "style": Object { + "borderBottomColor": "rgba(0, 0, 0, 0.1)", + "borderBottomWidth": 1, + }, + }, + "ref": null, + "rendered": Object { + "instance": null, + "key": undefined, + "nodeType": "class", + "props": Object { + "activeOpacity": 0.2, + "children": Array [ + , + , + ], + "onPress": [Function], + "style": Object { + "alignItems": "center", + "alignSelf": "stretch", + "flexDirection": "row", + "justifyContent": "space-between", + "padding": 15, + }, + }, + "ref": null, + "rendered": Array [ + Object { + "instance": null, + "key": undefined, + "nodeType": "class", + "props": Object { + "defaultMessage": "Photo Library", + "id": "mobile.file_upload.library", + "style": Array [ + Object { + "color": "#000", + "flex": 1, + "fontSize": 16, + }, + undefined, + ], + }, + "ref": null, + "rendered": null, + "type": [Function], + }, + Object { + "instance": null, + "key": undefined, + "nodeType": "class", + "props": Object { + "allowFontScaling": false, + "name": "photo", + "size": 18, + "style": Object { + "color": "#7f8180", + }, + }, + "ref": null, + "rendered": null, + "type": [Function], + }, + ], + "type": [Function], + }, + "type": [Function], + }, + Object { + "instance": null, + "key": "2", + "nodeType": "class", + "props": Object { + "activeOpacity": 0.2, + "children": , + "onPress": [Function], + "style": Object { + "alignItems": "center", + "alignSelf": "stretch", + "flexDirection": "row", + "justifyContent": "space-between", + "padding": 15, + }, + }, + "ref": null, + "rendered": Object { + "instance": null, + "key": undefined, + "nodeType": "class", + "props": Object { + "defaultMessage": "Cancel", + "id": "channel_modal.cancel", + "style": Object { + "color": "#000", + "flex": 1, + "fontSize": 16, + }, + }, + "ref": null, + "rendered": null, + "type": [Function], + }, + "type": [Function], + }, + ], + "type": [Function], + }, + "type": [Function], + }, + ], + Symbol(enzyme.__options__): Object { + "adapter": ReactSixteenAdapter { + "options": Object { + "enableComponentDidUpdateOnSetState": true, + }, + }, + }, +} +`; + +exports[`OptionModalList should match snapshot for iOS 1`] = ` +ShallowWrapper { + "length": 1, + Symbol(enzyme.__root__): [Circular], + Symbol(enzyme.__unrendered__): , + Symbol(enzyme.__renderer__): Object { + "batchedUpdates": [Function], + "getNode": [Function], + "render": [Function], + "simulateEvent": [Function], + "unmount": [Function], + }, + Symbol(enzyme.__node__): Object { + "instance": null, + "key": undefined, + "nodeType": "class", + "props": Object { + "children": Array [ + + + + test + + + + + + + + + + + + + + + , + + + + + , + ], + "style": Object { + "alignItems": "center", + "flex": 1, + "justifyContent": "flex-end", + }, + }, + "ref": null, + "rendered": Array [ + Object { + "instance": null, + "key": undefined, + "nodeType": "class", + "props": Object { + "children": Array [ + + + test + + , + + + + + + , + + + + + + , + ], + "style": Object { + "alignSelf": "stretch", + "backgroundColor": "white", + "borderRadius": 12, + "marginBottom": 20, + "marginHorizontal": 20, + }, + }, + "ref": null, + "rendered": Array [ + Object { + "instance": null, + "key": "2", + "nodeType": "class", + "props": Object { + "children": + test + , + "style": Array [ + Object { + "alignItems": "center", + "alignSelf": "stretch", + "flexDirection": "row", + "justifyContent": "space-between", + "padding": 15, + }, + Object { + "borderBottomColor": "rgba(0, 0, 0, 0.1)", + "borderBottomWidth": 1, + }, + ], + }, + "ref": null, + "rendered": Object { + "instance": null, + "key": undefined, + "nodeType": "class", + "props": Object { + "accessible": true, + "allowFontScaling": true, + "children": "test", + "ellipsizeMode": "tail", + "style": Object { + "color": "#7f8180", + "flex": 1, + "textAlign": "center", + }, + }, + "ref": null, + "rendered": "test", + "type": [Function], + }, + "type": [Function], + }, + Object { + "instance": null, + "key": "0", + "nodeType": "class", + "props": Object { + "children": + + + , + "style": Object { + "borderBottomColor": "rgba(0, 0, 0, 0.1)", + "borderBottomWidth": 1, + }, + }, + "ref": null, + "rendered": Object { + "instance": null, + "key": undefined, + "nodeType": "class", + "props": Object { + "activeOpacity": 0.2, + "children": Array [ + , + , + ], + "onPress": [Function], + "style": Object { + "alignItems": "center", + "alignSelf": "stretch", + "flexDirection": "row", + "justifyContent": "space-between", + "padding": 15, + }, + }, + "ref": null, + "rendered": Array [ + Object { + "instance": null, + "key": undefined, + "nodeType": "class", + "props": Object { + "defaultMessage": "Take Photo or Video", + "id": "mobile.file_upload.camera", + "style": Array [ + Object { + "color": "#4E8ACC", + "flex": 1, + "fontSize": 20, + }, + undefined, + false, + ], + }, + "ref": null, + "rendered": null, + "type": [Function], + }, + Object { + "instance": null, + "key": undefined, + "nodeType": "class", + "props": Object { + "allowFontScaling": false, + "name": "camera", + "size": 18, + "style": Object { + "color": "#4E8ACC", + }, + }, + "ref": null, + "rendered": null, + "type": [Function], + }, + ], + "type": [Function], + }, + "type": [Function], + }, + Object { + "instance": null, + "key": "1", + "nodeType": "class", + "props": Object { + "children": + + + , + "style": false, + }, + "ref": null, + "rendered": Object { + "instance": null, + "key": undefined, + "nodeType": "class", + "props": Object { + "activeOpacity": 0.2, + "children": Array [ + , + , + ], + "onPress": [Function], + "style": Object { + "alignItems": "center", + "alignSelf": "stretch", + "flexDirection": "row", + "justifyContent": "space-between", + "padding": 15, + }, + }, + "ref": null, + "rendered": Array [ + Object { + "instance": null, + "key": undefined, + "nodeType": "class", + "props": Object { + "defaultMessage": "Photo Library", + "id": "mobile.file_upload.library", + "style": Array [ + Object { + "color": "#4E8ACC", + "flex": 1, + "fontSize": 20, + }, + undefined, + false, + ], + }, + "ref": null, + "rendered": null, + "type": [Function], + }, + Object { + "instance": null, + "key": undefined, + "nodeType": "class", + "props": Object { + "allowFontScaling": false, + "name": "photo", + "size": 18, + "style": Object { + "color": "#4E8ACC", + }, + }, + "ref": null, + "rendered": null, + "type": [Function], + }, + ], + "type": [Function], + }, + "type": [Function], + }, + ], + "type": [Function], + }, + Object { + "instance": null, + "key": undefined, + "nodeType": "class", + "props": Object { + "children": + + , + "style": Object { + "alignSelf": "stretch", + "backgroundColor": "white", + "borderRadius": 12, + "marginBottom": 20, + "marginHorizontal": 20, + }, + }, + "ref": null, + "rendered": Object { + "instance": null, + "key": undefined, + "nodeType": "class", + "props": Object { + "activeOpacity": 0.2, + "children": , + "onPress": [Function], + "style": Object { + "alignItems": "center", + "alignSelf": "stretch", + "flexDirection": "row", + "justifyContent": "space-between", + "padding": 15, + }, + }, + "ref": null, + "rendered": Object { + "instance": null, + "key": undefined, + "nodeType": "class", + "props": Object { + "defaultMessage": "Cancel", + "id": "channel_modal.cancel", + "style": Object { + "color": "#CC3239", + "flex": 1, + "fontSize": 20, + "textAlign": "center", + }, + }, + "ref": null, + "rendered": null, + "type": [Function], + }, + "type": [Function], + }, + "type": [Function], + }, + ], + "type": [Function], + }, + Symbol(enzyme.__nodes__): Array [ + Object { + "instance": null, + "key": undefined, + "nodeType": "class", + "props": Object { + "children": Array [ + + + + test + + + + + + + + + + + + + + + , + + + + + , + ], + "style": Object { + "alignItems": "center", + "flex": 1, + "justifyContent": "flex-end", + }, + }, + "ref": null, + "rendered": Array [ + Object { + "instance": null, + "key": undefined, + "nodeType": "class", + "props": Object { + "children": Array [ + + + test + + , + + + + + + , + + + + + + , + ], + "style": Object { + "alignSelf": "stretch", + "backgroundColor": "white", + "borderRadius": 12, + "marginBottom": 20, + "marginHorizontal": 20, + }, + }, + "ref": null, + "rendered": Array [ + Object { + "instance": null, + "key": "2", + "nodeType": "class", + "props": Object { + "children": + test + , + "style": Array [ + Object { + "alignItems": "center", + "alignSelf": "stretch", + "flexDirection": "row", + "justifyContent": "space-between", + "padding": 15, + }, + Object { + "borderBottomColor": "rgba(0, 0, 0, 0.1)", + "borderBottomWidth": 1, + }, + ], + }, + "ref": null, + "rendered": Object { + "instance": null, + "key": undefined, + "nodeType": "class", + "props": Object { + "accessible": true, + "allowFontScaling": true, + "children": "test", + "ellipsizeMode": "tail", + "style": Object { + "color": "#7f8180", + "flex": 1, + "textAlign": "center", + }, + }, + "ref": null, + "rendered": "test", + "type": [Function], + }, + "type": [Function], + }, + Object { + "instance": null, + "key": "0", + "nodeType": "class", + "props": Object { + "children": + + + , + "style": Object { + "borderBottomColor": "rgba(0, 0, 0, 0.1)", + "borderBottomWidth": 1, + }, + }, + "ref": null, + "rendered": Object { + "instance": null, + "key": undefined, + "nodeType": "class", + "props": Object { + "activeOpacity": 0.2, + "children": Array [ + , + , + ], + "onPress": [Function], + "style": Object { + "alignItems": "center", + "alignSelf": "stretch", + "flexDirection": "row", + "justifyContent": "space-between", + "padding": 15, + }, + }, + "ref": null, + "rendered": Array [ + Object { + "instance": null, + "key": undefined, + "nodeType": "class", + "props": Object { + "defaultMessage": "Take Photo or Video", + "id": "mobile.file_upload.camera", + "style": Array [ + Object { + "color": "#4E8ACC", + "flex": 1, + "fontSize": 20, + }, + undefined, + false, + ], + }, + "ref": null, + "rendered": null, + "type": [Function], + }, + Object { + "instance": null, + "key": undefined, + "nodeType": "class", + "props": Object { + "allowFontScaling": false, + "name": "camera", + "size": 18, + "style": Object { + "color": "#4E8ACC", + }, + }, + "ref": null, + "rendered": null, + "type": [Function], + }, + ], + "type": [Function], + }, + "type": [Function], + }, + Object { + "instance": null, + "key": "1", + "nodeType": "class", + "props": Object { + "children": + + + , + "style": false, + }, + "ref": null, + "rendered": Object { + "instance": null, + "key": undefined, + "nodeType": "class", + "props": Object { + "activeOpacity": 0.2, + "children": Array [ + , + , + ], + "onPress": [Function], + "style": Object { + "alignItems": "center", + "alignSelf": "stretch", + "flexDirection": "row", + "justifyContent": "space-between", + "padding": 15, + }, + }, + "ref": null, + "rendered": Array [ + Object { + "instance": null, + "key": undefined, + "nodeType": "class", + "props": Object { + "defaultMessage": "Photo Library", + "id": "mobile.file_upload.library", + "style": Array [ + Object { + "color": "#4E8ACC", + "flex": 1, + "fontSize": 20, + }, + undefined, + false, + ], + }, + "ref": null, + "rendered": null, + "type": [Function], + }, + Object { + "instance": null, + "key": undefined, + "nodeType": "class", + "props": Object { + "allowFontScaling": false, + "name": "photo", + "size": 18, + "style": Object { + "color": "#4E8ACC", + }, + }, + "ref": null, + "rendered": null, + "type": [Function], + }, + ], + "type": [Function], + }, + "type": [Function], + }, + ], + "type": [Function], + }, + Object { + "instance": null, + "key": undefined, + "nodeType": "class", + "props": Object { + "children": + + , + "style": Object { + "alignSelf": "stretch", + "backgroundColor": "white", + "borderRadius": 12, + "marginBottom": 20, + "marginHorizontal": 20, + }, + }, + "ref": null, + "rendered": Object { + "instance": null, + "key": undefined, + "nodeType": "class", + "props": Object { + "activeOpacity": 0.2, + "children": , + "onPress": [Function], + "style": Object { + "alignItems": "center", + "alignSelf": "stretch", + "flexDirection": "row", + "justifyContent": "space-between", + "padding": 15, + }, + }, + "ref": null, + "rendered": Object { + "instance": null, + "key": undefined, + "nodeType": "class", + "props": Object { + "defaultMessage": "Cancel", + "id": "channel_modal.cancel", + "style": Object { + "color": "#CC3239", + "flex": 1, + "fontSize": 20, + "textAlign": "center", + }, + }, + "ref": null, + "rendered": null, + "type": [Function], + }, + "type": [Function], + }, + "type": [Function], + }, + ], + "type": [Function], + }, + ], + Symbol(enzyme.__options__): Object { + "adapter": ReactSixteenAdapter { + "options": Object { + "enableComponentDidUpdateOnSetState": true, + }, + }, + }, +} +`; diff --git a/app/screens/options_modal/option_modal_list.test.js b/app/screens/options_modal/option_modal_list.test.js new file mode 100644 index 000000000..fb0864571 --- /dev/null +++ b/app/screens/options_modal/option_modal_list.test.js @@ -0,0 +1,43 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. +import React from 'react'; +import {shallow} from 'enzyme'; + +import OptionModalListIOS from './options_modal_list.ios'; +import OptionModalListAndroid from './options_modal_list.android'; + +describe('OptionModalList', () => { + const baseProps = { + items: [{ + action: jest.fn(), + text: { + id: 'mobile.file_upload.camera', + defaultMessage: 'Take Photo or Video', + }, + icon: 'camera', + }, { + action: jest.fn(), + text: { + id: 'mobile.file_upload.library', + defaultMessage: 'Photo Library', + }, + icon: 'photo', + }], + onCancelPress: jest.fn(), + title: 'test', + }; + + test('should match snapshot for iOS', async () => { + const wrapper = shallow( + , + ); + expect(wrapper).toMatchSnapshot(); + }); + + test('should match snapshot for Android', async () => { + const wrapper = shallow( + , + ); + expect(wrapper).toMatchSnapshot(); + }); +}); diff --git a/app/screens/options_modal/options_modal_list.android.js b/app/screens/options_modal/options_modal_list.android.js index c28e535ef..3271c6a21 100644 --- a/app/screens/options_modal/options_modal_list.android.js +++ b/app/screens/options_modal/options_modal_list.android.js @@ -43,20 +43,24 @@ export default class OptionsModalList extends PureComponent { } return ( - - {textComponent} - {item.icon && + + {textComponent} + {item.icon && - } - + } + + ); }); diff --git a/app/screens/options_modal/options_modal_list.ios.js b/app/screens/options_modal/options_modal_list.ios.js index a681d6210..1b707dc28 100644 --- a/app/screens/options_modal/options_modal_list.ios.js +++ b/app/screens/options_modal/options_modal_list.ios.js @@ -47,20 +47,24 @@ export default class OptionsModalList extends PureComponent { } return ( - - {textComponent} - {item.icon && + + {textComponent} + {item.icon && - } - + } + + ); });