Unit test for mobile draft

app/components/draft/draft.test.tsx

@@ -0,0 +1,190 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+
+import CompassIcon from '@components/compass_icon';
+import FormattedText from '@components/formatted_text';
+import {General} from '@constants';
+import {renderWithEverything} from '@test/intl-test-helper';
+import TestHelper from '@test/test_helper';
+
+import Draft from './draft';
+
+import type {Database} from '@nozbe/watermelondb';
+import type ChannelModel from '@typings/database/models/servers/channel';
+import type DraftModel from '@typings/database/models/servers/draft';
+
+jest.mock('@components/formatted_text', () => jest.fn(() => null));
+jest.mock('@components/formatted_time', () => jest.fn(() => null));
+jest.mock('@components/compass_icon', () => jest.fn(() => null));
+
+describe('Draft', () => {
+    let database: Database;
+
+    beforeAll(async () => {
+        const server = await TestHelper.setupServerDatabase();
+        database = server.database;
+    });
+    it('should render the draft with channel info and draft message', () => {
+        const props = {
+            channel: {type: General.OPEN_CHANNEL, displayName: 'Direct Message Channel'} as ChannelModel,
+            location: 'channel',
+            draft: {
+                updateAt: 1633024800000,
+                message: 'Hello, World!',
+                channelId: 'channel_id',
+                rootId: '',
+                files: [],
+                metadata: {},
+            } as unknown as DraftModel,
+            layoutWidth: 100,
+            isPostPriorityEnabled: false,
+        };
+        const wrapper = renderWithEverything(
+            <Draft
+                channel={props.channel}
+                location={props.location}
+                draft={props.draft}
+                layoutWidth={props.layoutWidth}
+                isPostPriorityEnabled={props.isPostPriorityEnabled}
+            />
+            , {database},
+        );
+
+        const {getByText} = wrapper;
+
+        expect(FormattedText).toHaveBeenCalledWith(
+            expect.objectContaining({
+                id: 'channel_info.draft_in_channel',
+                defaultMessage: 'In:',
+            }),
+            expect.anything(),
+        );
+        expect(CompassIcon).toHaveBeenCalledWith(
+            expect.objectContaining({
+                name: 'globe',
+            }),
+            expect.anything(),
+        );
+        expect(getByText('Hello, World!')).toBeTruthy();
+        expect(wrapper.toJSON()).toMatchSnapshot();
+    });
+
+    it('should match the file count', () => {
+        const props = {
+            channel: {type: General.OPEN_CHANNEL, displayName: 'Direct Message Channel'} as ChannelModel,
+            location: 'channel',
+            draft: {
+                updateAt: 1633024800000,
+                message: 'Hello, World!',
+                channelId: 'channel_id',
+                rootId: '',
+                files: [{
+                    has_preview_image: false,
+                    height: 0,
+                    name: 'file1.txt',
+                    extension: 'txt',
+                    size: 64,
+                }, {
+                    has_preview_image: false,
+                    height: 0,
+                    name: 'file2.pdf',
+                    extension: 'txt',
+                    size: 64,
+                }],
+                metadata: {},
+            } as unknown as DraftModel,
+            layoutWidth: 100,
+            isPostPriorityEnabled: false,
+        };
+        const wrapper = renderWithEverything(
+            <Draft
+                channel={props.channel}
+                location={props.location}
+                draft={props.draft}
+                layoutWidth={props.layoutWidth}
+                isPostPriorityEnabled={props.isPostPriorityEnabled}
+            />
+            , {database},
+        );
+        const {getAllByTestId} = wrapper;
+        expect(getAllByTestId('file_attachment')).toHaveLength(2);
+        expect(wrapper.toJSON()).toMatchSnapshot();
+    });
+
+    it('should render the draft with channel info and draft message for a thread', () => {
+        const props = {
+            channel: {type: General.OPEN_CHANNEL, displayName: 'Direct Message Channel'} as ChannelModel,
+            location: 'thread',
+            draft: {
+                updateAt: 1633024800000,
+                message: 'Hello, World!',
+                channelId: 'channel_id',
+                rootId: 'root_id',
+                files: [],
+                metadata: {},
+            } as unknown as DraftModel,
+            layoutWidth: 100,
+            isPostPriorityEnabled: false,
+        };
+        const wrapper = renderWithEverything(
+            <Draft
+                channel={props.channel}
+                location={props.location}
+                draft={props.draft}
+                layoutWidth={props.layoutWidth}
+                isPostPriorityEnabled={props.isPostPriorityEnabled}
+            />
+            , {database},
+        );
+
+        const {getByText} = wrapper;
+        expect(FormattedText).toHaveBeenCalledWith(
+            expect.objectContaining({
+                id: 'channel_info.thread_in',
+                defaultMessage: 'Thread in:',
+            }),
+            expect.anything(),
+        );
+
+        expect(CompassIcon).toHaveBeenCalledWith(
+            expect.objectContaining({
+                name: 'globe',
+            }),
+            expect.anything(),
+        );
+        expect(getByText('Hello, World!')).toBeTruthy();
+        expect(wrapper.toJSON()).toMatchSnapshot();
+    });
+
+    it('should render the draft with post priority', () => {
+        const props = {
+            channel: {type: General.OPEN_CHANNEL, displayName: 'Direct Message Channel'} as ChannelModel,
+            location: 'thread',
+            draft: {
+                updateAt: 1633024800000,
+                message: 'Hello, World!',
+                channelId: 'channel_id',
+                rootId: 'root_id',
+                files: [],
+                metadata: {priority: {priority: 'important', requested_ack: false}},
+            } as unknown as DraftModel,
+            layoutWidth: 100,
+            isPostPriorityEnabled: true,
+        };
+        const wrapper = renderWithEverything(
+            <Draft
+                channel={props.channel}
+                location={props.location}
+                draft={props.draft}
+                layoutWidth={props.layoutWidth}
+                isPostPriorityEnabled={props.isPostPriorityEnabled}
+            />
+            , {database},
+        );
+        const {getByText} = wrapper;
+        expect(getByText('IMPORTANT')).toBeTruthy();
+        expect(wrapper.toJSON()).toMatchSnapshot();
+    });
+});

app/components/draft/draft_post/__snapshots__/draft_message.test.tsx.snap

@@ -0,0 +1,63 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Draft Message should match snapshot 1`] = `
+<View
+  style={
+    {
+      "maxHeight": 721,
+    }
+  }
+  testID="draft_message"
+>
+  <RCTScrollView
+    keyboardShouldPersistTaps="always"
+    scrollEnabled={false}
+    showsHorizontalScrollIndicator={false}
+    showsVerticalScrollIndicator={false}
+  >
+    <View>
+      <View
+        onLayout={[Function]}
+        style={
+          [
+            {
+              "width": "100%",
+            },
+          ]
+        }
+      >
+        <View
+          style={
+            [
+              {
+                "alignItems": "flex-start",
+                "flexDirection": "row",
+                "flexWrap": "wrap",
+              },
+            ]
+          }
+          testID="markdown_paragraph"
+        >
+          <Text>
+            <Text
+              selectable={false}
+              style={
+                {
+                  "color": "#3f4350",
+                  "fontFamily": "OpenSans",
+                  "fontSize": 16,
+                  "fontWeight": "400",
+                  "lineHeight": 24,
+                }
+              }
+              testID="markdown_text"
+            >
+              Hello, World!
+            </Text>
+          </Text>
+        </View>
+      </View>
+    </View>
+  </RCTScrollView>
+</View>
+`;

app/components/draft/draft_post/__snapshots__/draft_post.test.tsx.snap

@@ -0,0 +1,72 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Draft Post should match the snapshot 1`] = `
+<View
+  style={
+    {
+      "marginTop": 12,
+    }
+  }
+  testID="draft_post_with_message_and_file"
+>
+  <View
+    style={
+      {
+        "maxHeight": 721,
+      }
+    }
+    testID="draft_message"
+  >
+    <RCTScrollView
+      keyboardShouldPersistTaps="always"
+      scrollEnabled={false}
+      showsHorizontalScrollIndicator={false}
+      showsVerticalScrollIndicator={false}
+    >
+      <View>
+        <View
+          onLayout={[Function]}
+          style={
+            [
+              {
+                "width": "100%",
+              },
+            ]
+          }
+        >
+          <View
+            style={
+              [
+                {
+                  "alignItems": "flex-start",
+                  "flexDirection": "row",
+                  "flexWrap": "wrap",
+                },
+              ]
+            }
+            testID="markdown_paragraph"
+          >
+            <Text>
+              <Text
+                selectable={false}
+                style={
+                  {
+                    "color": "#3f4350",
+                    "fontFamily": "OpenSans",
+                    "fontSize": 16,
+                    "fontWeight": "400",
+                    "lineHeight": 24,
+                  }
+                }
+                testID="markdown_text"
+              >
+                Hello, World!
+              </Text>
+            </Text>
+          </View>
+        </View>
+      </View>
+    </RCTScrollView>
+  </View>
+</View>
+`;

app/components/draft/draft_post/draft_message.test.tsx

@@ -0,0 +1,59 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+
+import {renderWithEverything} from '@test/intl-test-helper';
+import TestHelper from '@test/test_helper';
+
+import DraftMessage from './draft_message';
+
+import type {Database} from '@nozbe/watermelondb';
+import type DraftModel from '@typings/database/models/servers/draft';
+
+describe('Draft Message', () => {
+    let database: Database;
+
+    beforeAll(async () => {
+        const server = await TestHelper.setupServerDatabase();
+        database = server.database;
+    });
+    it('should render the message', () => {
+        const props = {
+            draft: {
+                updateAt: 1633024800000,
+                message: 'Hello, World!',
+                channelId: 'channel_id',
+                rootId: '',
+                files: [],
+                metadata: {},
+            } as unknown as DraftModel,
+            layoutWidth: 100,
+            location: 'draft',
+        };
+        const {getByText} = renderWithEverything(
+            <DraftMessage {...props}/>, {database},
+        );
+        expect(getByText('Hello, World!')).toBeTruthy();
+    });
+
+    it('should match snapshot', () => {
+        const props = {
+            draft: {
+                updateAt: 1633024800000,
+                message: 'Hello, World!',
+                channelId: 'channel_id',
+                rootId: '',
+                files: [],
+                metadata: {},
+            } as unknown as DraftModel,
+            layoutWidth: 100,
+            location: 'draft',
+        };
+        const wrapper = renderWithEverything(
+            <DraftMessage {...props}/>, {database},
+        );
+
+        expect(wrapper.toJSON()).toMatchSnapshot();
+    });
+});