Unit test for mobile draft

[Rajat-Dabade]

Summary

Added unit test for mobile in draft PR: #8280

Ticket Link

https://mattermost.atlassian.net/browse/MM-61735

Checklist

• Added or updated unit tests (required for all new features)
• Has UI changes
• Includes text changes and localization file updates
• Have tested against the 5 core themes to ensure consistency between them.
• Have run E2E tests by adding label E2E iOS tests for PR.

Release Note

NONE

[larkox]

Great work!
Nothing blocking, but a couple of things that can be improved.

[larkox]

Any strong reason to mock these three components?

[larkox]

I wonder if it makes sense to add more tests here apart of the snapshot one.

[larkox]

I don't see any tests (here or in other files) testing for what these props control. 0/5 if it makes sense to add such tests.

[larkox]

You can use jest.mocked to avoid the casting, and keep the typings.

Suggested change

	(useTheme as jest.Mock).mockReturnValue(mockTheme);
	(getUserTimezone as jest.Mock).mockReturnValue('UTC');
	jest.mocked(useTheme).mockReturnValue(mockTheme);
	jest.mocked(getUserTimezone).mockReturnValue('UTC');

If you are going to use these too often, you may want to just create something like...

const mockedUseTheme = jest.mocked(useTheme);

describe(..., () => {
   ...
   beforeEach(() => {
        mockedUseTheme.mockReturnValue(mockTheme);
        ...

[larkox]

You could have the base props predefined (be it in a function or an object) and just set the "relevant props for the test". For example...

function getBaseProps() {
    return {
            channel: {type: General.DM_CHANNEL, displayName: 'Direct Message Channel'} as ChannelModel,
            draftReceiverUser: undefined,
            updateAt: 1633024800000,
            rootId: undefined,
            testID: 'channel-info',
            currentUser: {timezone: 'UTC'} as unknown as UserModel,
            isMilitaryTime: true,
        };
}

...
   it(..., () => {
        const props = getBaseProps();
        props.channel = {type: General.DM_CHANNEL, displayName: 'Direct Message Channel'} as ChannelModel,
        const wrapper = render(<DraftPostHeader {...props}/>);
        ....

Or if you prefer the object route...

const baseProps = {
    ...
};

...
    it(..., () => {
        const props = {
            ...baseProps,
            channel: {type: General.DM_CHANNEL, displayName: 'Direct Message Channel'} as ChannelModel,
        }
        const wrapper = render(<DraftPostHeader {...props}/>);
        ...

[larkox]

Here we are only checking dismissBottomSheet, but nothing else. Shouldn't we check that deleteDraftConfirmation is called with the correct arguments?

[larkox]

It is hard to see the difference between the two tests.

[larkox]

Same comment about this only checking for dismissBottomSheet.

[larkox]

Same comment about this only checking for dismissBottomSheet.

[larkox]

Suggested change

	it('should call dismissBottmSheet after sending the draft', () => {
	it('should call dismissBottomSheet after sending the draft', () => {