refactor: custom render should provide container (#4938)

frontend/src/component/changeRequest/ChangeRequestSidebar/EnvironmentChangeRequest/EnvironmentChangeRequestTitle.test.tsx

@@ -5,7 +5,6 @@ import { ChangeRequestState } from 'component/changeRequest/changeRequest.types'
 import userEvent from '@testing-library/user-event';
 import { testServerRoute, testServerSetup } from 'utils/testServer';
 import { render } from 'utils/testRenderer';
-import { UIProviderContainer } from 'component/providers/UIProvider/UIProviderContainer';
 
 const changeRequest = {
     id: 3,
@@ -50,11 +49,7 @@ const TestComponent: FC = () => {
 
 test('can edit and save title', async () => {
     const user = userEvent.setup();
-    render(
+    render(<TestComponent />);
-        <UIProviderContainer>
-            <TestComponent />
-        </UIProviderContainer>,
-    );
 
     const editButton = await screen.findByTestId('EditIcon');
     await user.click(editButton);

frontend/src/component/common/FeatureArchiveDialog/FeatureArchiveDialog.test.tsx

@@ -4,7 +4,6 @@ import { screen, waitFor } from '@testing-library/react';
 import { render } from 'utils/testRenderer';
 import { testServerRoute, testServerSetup } from 'utils/testServer';
 import { FeatureArchiveDialog } from './FeatureArchiveDialog';
-import { UIProviderContainer } from 'component/providers/UIProvider/UIProviderContainer';
 
 const server = testServerSetup();
 const setupHappyPathForChangeRequest = () => {
@@ -38,7 +37,6 @@ test('Add single archive feature change to change request', async () => {
     const onConfirm = vi.fn();
     setupHappyPathForChangeRequest();
     render(
-        <UIProviderContainer>
         <FeatureArchiveDialog
             featureIds={['featureA']}
             projectId={'projectId'}
@@ -46,8 +44,7 @@ test('Add single archive feature change to change request', async () => {
             onClose={onClose}
             onConfirm={onConfirm}
             featuresWithUsage={[]}
-            />
+        />,
-        </UIProviderContainer>,
     );
 
     expect(screen.getByText('Archive feature toggle')).toBeInTheDocument();
@@ -66,7 +63,6 @@ test('Add multiple archive feature changes to change request', async () => {
     const onConfirm = vi.fn();
     setupHappyPathForChangeRequest();
     render(
-        <UIProviderContainer>
         <FeatureArchiveDialog
             featureIds={['featureA', 'featureB']}
             projectId={'projectId'}
@@ -74,8 +70,7 @@ test('Add multiple archive feature changes to change request', async () => {
             onClose={onClose}
             onConfirm={onConfirm}
             featuresWithUsage={[]}
-            />
+        />,
-        </UIProviderContainer>,
     );
 
     await screen.findByText('Archive feature toggles');
@@ -94,7 +89,6 @@ test('Skip change request', async () => {
     const onConfirm = vi.fn();
     setupHappyPathForChangeRequest();
     render(
-        <UIProviderContainer>
         <FeatureArchiveDialog
             featureIds={['featureA', 'featureB']}
             projectId={'projectId'}
@@ -102,8 +96,7 @@ test('Skip change request', async () => {
             onClose={onClose}
             onConfirm={onConfirm}
             featuresWithUsage={[]}
-            />
+        />,
-        </UIProviderContainer>,
         { permissions: [{ permission: 'SKIP_CHANGE_REQUEST' }] },
     );
 

frontend/src/component/common/Search/Search.test.tsx

@@ -1,12 +1,10 @@
 import { createLocalStorage } from 'utils/createLocalStorage';
 import { render } from 'utils/testRenderer';
 import { fireEvent, screen } from '@testing-library/react';
-import { UIProviderContainer } from '../../providers/UIProvider/UIProviderContainer';
 import { Search } from './Search';
 import { SEARCH_INPUT } from 'utils/testIds';
 
 const testDisplayComponent = (
-    <UIProviderContainer>
     <Search
         hasFilters
         onChange={() => {}}
@@ -17,7 +15,6 @@ const testDisplayComponent = (
             searchValue: '',
         })}
     />
-    </UIProviderContainer>
 );
 
 test('should read saved query from local storage', async () => {

frontend/src/component/common/StrategyItemContainer/StrategyItemContainer.test.tsx

@@ -2,7 +2,6 @@ import { screen } from '@testing-library/react';
 import { render } from 'utils/testRenderer';
 import { StrategyItemContainer } from './StrategyItemContainer';
 import { IFeatureStrategy } from 'interfaces/strategy';
-import { UIProviderContainer } from '../../providers/UIProvider/UIProviderContainer';
 
 test('should render strategy name, custom title and description', async () => {
     const strategy: IFeatureStrategy = {
@@ -14,12 +13,10 @@ test('should render strategy name, custom title and description', async () => {
     };
 
     render(
-        <UIProviderContainer>
         <StrategyItemContainer
             strategy={strategy}
             description={'description'}
-            />
+        />,
-        </UIProviderContainer>,
     );
 
     expect(screen.getByText('strategy name')).toBeInTheDocument();

frontend/src/component/context/ContextFieldUsage/ContextFieldUsage.test.tsx

@@ -1,8 +1,7 @@
-import { render } from '../../../utils/testRenderer';
+import { render } from 'utils/testRenderer';
 import { screen } from '@testing-library/react';
 import React from 'react';
-import { testServerRoute, testServerSetup } from '../../../utils/testServer';
+import { testServerRoute, testServerSetup } from 'utils/testServer';
-import { UIProviderContainer } from '../../providers/UIProvider/UIProviderContainer';
 import { ContextFieldUsage } from './ContextFieldUsage';
 
 const server = testServerSetup();
@@ -38,11 +37,7 @@ test('should show usage of context field', async () => {
     setupRoutes();
 
     const contextFieldName = 'appName';
-    render(
+    render(<ContextFieldUsage contextName={contextFieldName} />);
-        <UIProviderContainer>
-            <ContextFieldUsage contextName={contextFieldName} />
-        </UIProviderContainer>,
-    );
 
     await screen.findByText('Usage of this context field:');
     await screen.findByText('tests (Gradual rollout)');

frontend/src/component/context/ContextList/ContextList/ContextList.test.tsx

@@ -1,8 +1,7 @@
-import { render } from '../../../../utils/testRenderer';
+import { render } from 'utils/testRenderer';
 import { screen } from '@testing-library/react';
 import React from 'react';
 import { testServerRoute, testServerSetup } from '../../../../utils/testServer';
-import { UIProviderContainer } from 'component/providers/UIProvider/UIProviderContainer';
 import ContextList from './ContextList';
 
 const server = testServerSetup();
@@ -26,9 +25,7 @@ test('should show the count of projects and features used in', async () => {
     setupRoutes();
 
     render(
-        <UIProviderContainer>
+        <ContextList />,
-            <ContextList />
-        </UIProviderContainer>,
     );
 
     await screen.findByText('2 feature toggles');

frontend/src/component/feature/Dependencies/AddDependencyDialogue.test.tsx

@@ -3,7 +3,6 @@ import userEvent from '@testing-library/user-event';
 import { render } from 'utils/testRenderer';
 import { AddDependencyDialogue } from './AddDependencyDialogue';
 import { testServerRoute, testServerSetup } from 'utils/testServer';
-import { UIProviderContainer } from '../../providers/UIProvider/UIProviderContainer';
 
 const server = testServerSetup();
 
@@ -39,7 +38,6 @@ test('Delete dependency', async () => {
     let closed = false;
     setupApi();
     render(
-        <UIProviderContainer>
         <AddDependencyDialogue
             project='default'
             featureId='child'
@@ -47,8 +45,7 @@ test('Delete dependency', async () => {
             onClose={() => {
                 closed = true;
             }}
-            />
+        />,
-        </UIProviderContainer>,
     );
 
     const removeDependency = await screen.findByText('Remove');
@@ -68,7 +65,6 @@ test('Add dependency', async () => {
     let closed = false;
     setupApi();
     render(
-        <UIProviderContainer>
         <AddDependencyDialogue
             project='default'
             featureId='child'
@@ -76,8 +72,7 @@ test('Add dependency', async () => {
             onClose={() => {
                 closed = true;
             }}
-            />
+        />,
-        </UIProviderContainer>,
     );
 
     const removeDependency = await screen.findByText('Remove');

frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsProject/FeatureSettingsProjectConfirm/FeatureSettingsProjectConfirm.test.tsx

@@ -3,7 +3,6 @@ import { render } from 'utils/testRenderer';
 import { testServerRoute, testServerSetup } from 'utils/testServer';
 import FeatureSettingsProjectConfirm from './FeatureSettingsProjectConfirm';
 import { IFeatureToggle } from 'interfaces/featureToggle';
-import { UIProviderContainer } from '../../../../../providers/UIProvider/UIProviderContainer';
 import { Route, Routes } from 'react-router-dom';
 import React from 'react';
 import userEvent from '@testing-library/user-event';
@@ -22,7 +21,6 @@ test('Cannot change project for feature with dependencies', async () => {
     let closed = false;
     setupApi();
     render(
-        <UIProviderContainer>
         <Routes>
             <Route
                 path={'projects/:projectId/features/:featureId/settings'}
@@ -45,8 +43,7 @@ test('Cannot change project for feature with dependencies', async () => {
                     />
                 }
             />
-            </Routes>
+        </Routes>,
-        </UIProviderContainer>,
         {
             route: 'projects/default/features/parent/settings',
         },

frontend/src/component/playground/Playground/AdvancedPlayground.test.tsx

@@ -1,19 +1,15 @@
 import { screen } from '@testing-library/react';
 import { render } from 'utils/testRenderer';
-import { UIProviderContainer } from '../../providers/UIProvider/UIProviderContainer';
 import AdvancedPlayground from './AdvancedPlayground';
 import { createLocalStorage } from 'utils/createLocalStorage';
 import { testServerRoute, testServerSetup } from 'utils/testServer';
 import userEvent from '@testing-library/user-event';
 
 const testDisplayComponent = (
-    <UIProviderContainer>
     <AdvancedPlayground
         FormComponent={(props) => (
             <div>
-                    <div data-id='projects'>
+                <div data-id='projects'>{JSON.stringify(props.projects)}</div>
-                        {JSON.stringify(props.projects)}
-                    </div>
                 <div data-id='environments'>
                     {JSON.stringify(props.environments)}
                 </div>
@@ -21,11 +17,9 @@ const testDisplayComponent = (
             </div>
         )}
     />
-    </UIProviderContainer>
 );
 
 const testEvaluateComponent = (
-    <UIProviderContainer>
     <AdvancedPlayground
         FormComponent={(props) => (
             <form onSubmit={props.onSubmit}>
@@ -33,7 +27,6 @@ const testEvaluateComponent = (
             </form>
         )}
     />
-    </UIProviderContainer>
 );
 
 afterEach(() => {

frontend/src/component/playground/Playground/AdvancedPlaygroundResultsTable/AdvancedPlaygroundResultsTable.test.tsx

@@ -1,11 +1,9 @@
 import { screen } from '@testing-library/react';
 import { render } from 'utils/testRenderer';
-import { UIProviderContainer } from 'component/providers/UIProvider/UIProviderContainer';
 import { AdvancedPlaygroundResultsTable } from './AdvancedPlaygroundResultsTable';
 
 test('should render advanced playground table', async () => {
     render(
-        <UIProviderContainer>
         <AdvancedPlaygroundResultsTable
             loading={false}
             features={[
@@ -31,8 +29,7 @@ test('should render advanced playground table', async () => {
                                             },
                                             result: {
                                                 enabled: true,
-                                                    evaluationStatus:
+                                                evaluationStatus: 'complete',
-                                                        'complete',
                                             },
                                             constraints: [],
                                             segments: [],
@@ -47,8 +44,7 @@ test('should render advanced playground table', async () => {
                                             parameters: {},
                                             result: {
                                                 enabled: true,
-                                                    evaluationStatus:
+                                                evaluationStatus: 'complete',
-                                                        'complete',
                                             },
                                             constraints: [],
                                             segments: [],
@@ -102,8 +98,7 @@ test('should render advanced playground table', async () => {
                     appName: 'MyApp',
                 },
             }}
-            />
+        />,
-        </UIProviderContainer>,
     );
 
     expect(screen.getByText('Infinite')).toBeInTheDocument();

frontend/src/component/playground/Playground/PlaygroundEnvironmentTable/PlaygroundEnvironmentDiffTable.test.tsx

@@ -1,7 +1,6 @@
 import { screen } from '@testing-library/react';
 import { render } from 'utils/testRenderer';
 import { PlaygroundEnvironmentDiffTable } from './PlaygroundEnvironmentDiffTable';
-import { UIProviderContainer } from '../../../providers/UIProvider/UIProviderContainer';
 
 const irrelevantDetails = {
     strategies: {
@@ -23,7 +22,6 @@ const irrelevantDetails = {
 
 test('should render environment diff table', async () => {
     render(
-        <UIProviderContainer>
         <PlaygroundEnvironmentDiffTable
             features={{
                 development: [
@@ -53,8 +51,7 @@ test('should render environment diff table', async () => {
                     },
                 ],
             }}
-            />
+        />,
-        </UIProviderContainer>,
     );
 
     expect(screen.getByText('web')).toBeInTheDocument();

frontend/src/component/playground/Playground/PlaygroundEnvironmentTable/PlaygroundEnvironmentTable.test.tsx

@@ -1,11 +1,9 @@
 import { screen } from '@testing-library/react';
 import { render } from 'utils/testRenderer';
 import { PlaygroundEnvironmentTable } from './PlaygroundEnvironmentTable';
-import { UIProviderContainer } from '../../../providers/UIProvider/UIProviderContainer';
 
 test('should render environment table', async () => {
     render(
-        <UIProviderContainer>
         <PlaygroundEnvironmentTable
             features={[
                 {
@@ -34,8 +32,7 @@ test('should render environment table', async () => {
                     },
                 },
             ]}
-            />
+        />,
-        </UIProviderContainer>,
     );
 
     expect(screen.getByText('web')).toBeInTheDocument();

frontend/src/component/segments/SegmentTable/SegmentTable.test.tsx

@@ -1,8 +1,7 @@
-import { render } from '../../../utils/testRenderer';
+import { render } from 'utils/testRenderer';
 import { screen } from '@testing-library/react';
 import { SegmentTable } from './SegmentTable';
-import { testServerRoute, testServerSetup } from '../../../utils/testServer';
+import { testServerRoute, testServerSetup } from 'utils/testServer';
-import { UIProviderContainer } from '../../providers/UIProvider/UIProviderContainer';
 
 const server = testServerSetup();
 
@@ -31,11 +30,7 @@ const setupRoutes = () => {
 test('should show the count of projects and features used in', async () => {
     setupRoutes();
 
-    render(
+    render(<SegmentTable />);
-        <UIProviderContainer>
-            <SegmentTable />
-        </UIProviderContainer>,
-    );
 
     await screen.findByText('2 feature toggles');
     await screen.findByText('3 projects');

frontend/src/component/user/Profile/PasswordTab/PasswordTab.test.tsx

@@ -3,7 +3,6 @@ import { render } from 'utils/testRenderer';
 import { testServerRoute, testServerSetup } from 'utils/testServer';
 import { PasswordTab } from './PasswordTab';
 import userEvent from '@testing-library/user-event';
-import { UIProviderContainer } from '../../../providers/UIProvider/UIProviderContainer';
 
 const server = testServerSetup();
 testServerRoute(server, '/api/admin/ui-config', {});
@@ -16,11 +15,7 @@ testServerRoute(server, '/auth/reset/validate-password', {}, 'post');
 test('should render authorization error on missing old password', async () => {
     const user = userEvent.setup();
 
-    render(
+    render(<PasswordTab />);
-        <UIProviderContainer>
-            <PasswordTab />
-        </UIProviderContainer>,
-    );
 
     await screen.findByText('Change password');
     const passwordInput = await screen.findByLabelText('Password');

frontend/src/utils/testRenderer.tsx

@@ -6,6 +6,7 @@ import { ThemeProvider } from 'themes/ThemeProvider';
 import { IPermission } from 'interfaces/user';
 import { AnnouncerProvider } from 'component/common/Announcer/AnnouncerProvider/AnnouncerProvider';
 import { AccessProviderMock } from 'component/providers/AccessProvider/AccessProviderMock';
+import { UIProviderContainer } from '../component/providers/UIProvider/UIProviderContainer';
 
 export const render = (
     ui: JSX.Element,
@@ -21,6 +22,7 @@ export const render = (
     window.history.pushState({}, 'Test page', route);
 
     const Wrapper: FC = ({ children }) => (
+        <UIProviderContainer>
             <SWRConfig value={{ provider: () => new Map() }}>
                 <AccessProviderMock permissions={permissions}>
                     <ThemeProvider>
@@ -30,6 +32,7 @@ export const render = (
                     </ThemeProvider>
                 </AccessProviderMock>
             </SWRConfig>
+        </UIProviderContainer>
     );
 
     return rtlRender(ui, {