refactor: custom render should provide container (#4938)

2025-03-04 00:18:40 +01:00 · 2023-10-06 09:19:49 +02:00 · 2023-10-06 09:19:49 +02:00 · 80eb6e12c6
commit 80eb6e12c6
parent bed26a938c
15 changed files with 261 additions and 320 deletions
--- a/frontend/src/component/changeRequest/ChangeRequestSidebar/EnvironmentChangeRequest/EnvironmentChangeRequestTitle.test.tsx
+++ b/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(
-        <UIProviderContainer>
-            <TestComponent />
-        </UIProviderContainer>,
-    );
+    render(<TestComponent />);

    const editButton = await screen.findByTestId('EditIcon');
    await user.click(editButton);
--- a/frontend/src/component/common/FeatureArchiveDialog/FeatureArchiveDialog.test.tsx
+++ b/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' }] },
    );

--- a/frontend/src/component/common/Search/Search.test.tsx
+++ b/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 () => {
--- a/frontend/src/component/common/StrategyItemContainer/StrategyItemContainer.test.tsx
+++ b/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();
--- a/frontend/src/component/context/ContextFieldUsage/ContextFieldUsage.test.tsx
+++ b/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 { UIProviderContainer } from '../../providers/UIProvider/UIProviderContainer';
+import { testServerRoute, testServerSetup } from 'utils/testServer';
 import { ContextFieldUsage } from './ContextFieldUsage';

 const server = testServerSetup();
@ -38,11 +37,7 @@ test('should show usage of context field', async () => {
    setupRoutes();

    const contextFieldName = 'appName';
-    render(
-        <UIProviderContainer>
-            <ContextFieldUsage contextName={contextFieldName} />
-        </UIProviderContainer>,
-    );
+    render(<ContextFieldUsage contextName={contextFieldName} />);

    await screen.findByText('Usage of this context field:');
    await screen.findByText('tests (Gradual rollout)');
--- a/frontend/src/component/context/ContextList/ContextList/ContextList.test.tsx
+++ b/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 />
-        </UIProviderContainer>,
+        <ContextList />,
    );

    await screen.findByText('2 feature toggles');
--- a/frontend/src/component/feature/Dependencies/AddDependencyDialogue.test.tsx
+++ b/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');
--- a/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsProject/FeatureSettingsProjectConfirm/FeatureSettingsProjectConfirm.test.tsx
+++ b/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>
-        </UIProviderContainer>,
+        </Routes>,
        {
            route: 'projects/default/features/parent/settings',
        },
--- a/frontend/src/component/playground/Playground/AdvancedPlayground.test.tsx
+++ b/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'>
-                        {JSON.stringify(props.projects)}
-                    </div>
+                <div data-id='projects'>{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(() => {
--- a/frontend/src/component/playground/Playground/AdvancedPlaygroundResultsTable/AdvancedPlaygroundResultsTable.test.tsx
+++ b/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:
-                                                        'complete',
+                                                evaluationStatus: 'complete',
                                            },
                                            constraints: [],
                                            segments: [],
@ -47,8 +44,7 @@ test('should render advanced playground table', async () => {
                                            parameters: {},
                                            result: {
                                                enabled: true,
-                                                    evaluationStatus:
-                                                        'complete',
+                                                evaluationStatus: 'complete',
                                            },
                                            constraints: [],
                                            segments: [],
@ -102,8 +98,7 @@ test('should render advanced playground table', async () => {
                    appName: 'MyApp',
                },
            }}
-            />
-        </UIProviderContainer>,
+        />,
    );

    expect(screen.getByText('Infinite')).toBeInTheDocument();
--- a/frontend/src/component/playground/Playground/PlaygroundEnvironmentTable/PlaygroundEnvironmentDiffTable.test.tsx
+++ b/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();
--- a/frontend/src/component/playground/Playground/PlaygroundEnvironmentTable/PlaygroundEnvironmentTable.test.tsx
+++ b/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();
--- a/frontend/src/component/segments/SegmentTable/SegmentTable.test.tsx
+++ b/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 { UIProviderContainer } from '../../providers/UIProvider/UIProviderContainer';
+import { testServerRoute, testServerSetup } from 'utils/testServer';

 const server = testServerSetup();

@ -31,11 +30,7 @@ const setupRoutes = () => {
 test('should show the count of projects and features used in', async () => {
    setupRoutes();

-    render(
-        <UIProviderContainer>
-            <SegmentTable />
-        </UIProviderContainer>,
-    );
+    render(<SegmentTable />);

    await screen.findByText('2 feature toggles');
    await screen.findByText('3 projects');
--- a/frontend/src/component/user/Profile/PasswordTab/PasswordTab.test.tsx
+++ b/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(
-        <UIProviderContainer>
-            <PasswordTab />
-        </UIProviderContainer>,
-    );
+    render(<PasswordTab />);

    await screen.findByText('Change password');
    const passwordInput = await screen.findByLabelText('Password');
--- a/frontend/src/utils/testRenderer.tsx
+++ b/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, {