Run component tests with a real store and use renderWithContext everywhere (#25217)

* Change renderWithFullContext to not mock Redux store

* Remove renderWithIntl and renderWithIntlAndStore

* Rename renderWithFullContext to renderWithContext

* Use renderWithContext for WS context

webapp/channels/src/components/payment_form/gather_intent/gather_intent.test.tsx

@@ -7,11 +7,12 @@ import * as reactRedux from 'react-redux';
 import {
     act,
     fireEvent,
-    renderWithIntlAndStore,
+    renderWithContext,
     screen,
 } from 'tests/react_testing_utils';
 import {TestHelper} from 'utils/test_helper';
 
+import type {GatherIntentProps} from './gather_intent';
 import {GatherIntent} from './gather_intent';
 import type {GatherIntentModalProps} from './gather_intent_modal';
 
@@ -42,10 +43,6 @@ describe('components/gather_intent/gather_intent.tsx', () => {
     const gatherIntentText = 'gatherIntentText';
     const useDispatchMock = jest.spyOn(reactRedux, 'useDispatch');
 
-    beforeEach(() => {
-        useDispatchMock.mockClear();
-    });
-
     const initialState = {
         entities: {
             cloud: {
@@ -54,20 +51,17 @@ describe('components/gather_intent/gather_intent.tsx', () => {
         },
     };
 
-    //Any because renderWithIntlAndStore doesn't have the store parameter typed as deep partial.
-    const renderComponent = ({store}: {store: any} = {store: initialState}) => {
-        return renderWithIntlAndStore(
-            <GatherIntent
-                modalComponent={DummyModal}
-                gatherIntentText={gatherIntentText}
-                typeGatherIntent='monthlySubscription'
-            />,
-            store,
-        );
+    const baseProps: GatherIntentProps = {
+        modalComponent: DummyModal as any,
+        gatherIntentText,
+        typeGatherIntent: 'monthlySubscription',
     };
 
     it('should display modal if the user click on the modal opener', () => {
-        renderComponent();
+        renderWithContext(
+            <GatherIntent {...baseProps}/>,
+            initialState,
+        );
 
         fireEvent.click(screen.getByText(gatherIntentText));
 
@@ -75,7 +69,10 @@ describe('components/gather_intent/gather_intent.tsx', () => {
     });
 
     it('should display the modal opener after close the modal', () => {
-        renderComponent();
+        renderWithContext(
+            <GatherIntent {...baseProps}/>,
+            initialState,
+        );
 
         fireEvent.click(screen.getByText(gatherIntentText));
         fireEvent.click(screen.getByLabelText('Close'));
@@ -87,7 +84,10 @@ describe('components/gather_intent/gather_intent.tsx', () => {
         useDispatchMock.mockReturnValue(jest.fn().mockImplementation(() => new Promise((resolve) => {
             resolve({});
         })));
-        renderComponent();
+        renderWithContext(
+            <GatherIntent {...baseProps}/>,
+            initialState,
+        );
 
         fireEvent.click(screen.getByText(gatherIntentText));
 
@@ -102,7 +102,10 @@ describe('components/gather_intent/gather_intent.tsx', () => {
         useDispatchMock.mockReturnValue(jest.fn().mockImplementation(() => new Promise((resolve) => {
             resolve({});
         })));
-        renderComponent();
+        renderWithContext(
+            <GatherIntent {...baseProps}/>,
+            initialState,
+        );
 
         fireEvent.click(screen.getByText(gatherIntentText));
 
@@ -126,9 +129,10 @@ describe('components/gather_intent/gather_intent.tsx', () => {
             monthly_subscription_alt_payment_method: 'Dummy feedback',
         };
 
-        renderComponent({
-            store: newState,
-        });
+        renderWithContext(
+            <GatherIntent {...baseProps}/>,
+            newState,
+        );
 
         fireEvent.click(screen.getByText(gatherIntentText));
 

webapp/channels/src/components/payment_form/gather_intent/gather_intent.tsx

@@ -14,7 +14,7 @@ import {useGatherIntent} from './useGatherIntent';
 
 import './gather_intent.scss';
 
-interface GatherIntentProps {
+export interface GatherIntentProps {
     typeGatherIntent: keyof typeof TypePurchases;
     gatherIntentText: React.ReactNode;
     modalComponent: JSXElementConstructor<GatherIntentModalProps>;

webapp/channels/src/components/payment_form/gather_intent/gather_intent_modal.test.tsx

@@ -3,36 +3,27 @@
 
 import React from 'react';
 
-import {fireEvent, renderWithIntl, screen} from 'tests/react_testing_utils';
+import {fireEvent, renderWithContext, screen} from 'tests/react_testing_utils';
 
 import {GatherIntentModal} from './gather_intent_modal';
 import type {GatherIntentModalProps} from './gather_intent_modal';
 
 describe('components/gather_intent/gather_intent_modal.tsx', () => {
-    const renderComponent = (props: Partial<GatherIntentModalProps> | undefined = {}) => {
-        const defaultProps: GatherIntentModalProps = {
-            onClose: jest.fn(),
-            onSave: jest.fn(),
-            isSubmitting: false,
-            showError: false,
-        };
-
-        return renderWithIntl(
-            <GatherIntentModal
-                {...defaultProps}
-                {...props}
-            />,
-        );
+    const baseProps: GatherIntentModalProps = {
+        onClose: jest.fn(),
+        onSave: jest.fn(),
+        isSubmitting: false,
+        showError: false,
     };
 
     it('shouldn\'t be able to save the feedback if the user don\'t click on any option', () => {
-        renderComponent();
+        renderWithContext(<GatherIntentModal {...baseProps}/>);
 
         expect(screen.queryByText('Save')).toBeDisabled();
     });
 
     it('shouldn\'t be able to save the feedback if the user only click in other and leave the input empty', () => {
-        renderComponent();
+        renderWithContext(<GatherIntentModal {...baseProps}/>);
 
         fireEvent.click(screen.getByText('Other'));
 
@@ -40,7 +31,7 @@ describe('components/gather_intent/gather_intent_modal.tsx', () => {
     });
 
     it('shouldn\'t be able to save the feedback if the user only click in other and write only white spaces in the input', () => {
-        renderComponent();
+        renderWithContext(<GatherIntentModal {...baseProps}/>);
 
         fireEvent.click(screen.getByText('Other'));
         fireEvent.change(screen.getByPlaceholderText('Enter payment option here'), {target: {value: '       \n\t'}});
@@ -49,7 +40,7 @@ describe('components/gather_intent/gather_intent_modal.tsx', () => {
     });
 
     it('should be able to save the feedback if the user only click in other, leave the input empty and press other option', () => {
-        renderComponent();
+        renderWithContext(<GatherIntentModal {...baseProps}/>);
 
         fireEvent.click(screen.getByText('Other'));
         fireEvent.click(screen.getByText('Wire'));
@@ -58,7 +49,7 @@ describe('components/gather_intent/gather_intent_modal.tsx', () => {
     });
 
     it('should be able save the feedback if the user click in Wire option', () => {
-        renderComponent();
+        renderWithContext(<GatherIntentModal {...baseProps}/>);
 
         fireEvent.click(screen.getByText('Wire'));
 
@@ -66,7 +57,7 @@ describe('components/gather_intent/gather_intent_modal.tsx', () => {
     });
 
     it('should be able save the feedback if the user click in ACH option', () => {
-        renderComponent();
+        renderWithContext(<GatherIntentModal {...baseProps}/>);
 
         fireEvent.click(screen.getByText('ACH'));
 
@@ -74,7 +65,7 @@ describe('components/gather_intent/gather_intent_modal.tsx', () => {
     });
 
     it('should be able save the feedback if the user click in other option and fill the option', () => {
-        renderComponent();
+        renderWithContext(<GatherIntentModal {...baseProps}/>);
 
         fireEvent.click(screen.getByText('Other'));
         fireEvent.change(screen.getByPlaceholderText('Enter payment option here'), {target: {value: 'Test'}});