From 80eb6e12c67db88648522b3b32ebdb6fb892c903 Mon Sep 17 00:00:00 2001 From: Mateusz Kwasniewski Date: Fri, 6 Oct 2023 09:19:49 +0200 Subject: [PATCH] refactor: custom render should provide container (#4938) --- .../EnvironmentChangeRequestTitle.test.tsx | 7 +- .../FeatureArchiveDialog.test.tsx | 55 +++--- .../component/common/Search/Search.test.tsx | 23 +-- .../StrategyItemContainer.test.tsx | 11 +- .../ContextFieldUsage.test.tsx | 11 +- .../ContextList/ContextList.test.tsx | 7 +- .../AddDependencyDialogue.test.tsx | 37 ++-- .../FeatureSettingsProjectConfirm.test.tsx | 49 +++-- .../Playground/AdvancedPlayground.test.tsx | 41 ++-- .../AdvancedPlaygroundResultsTable.test.tsx | 185 +++++++++--------- .../PlaygroundEnvironmentDiffTable.test.tsx | 59 +++--- .../PlaygroundEnvironmentTable.test.tsx | 57 +++--- .../SegmentTable/SegmentTable.test.tsx | 11 +- .../Profile/PasswordTab/PasswordTab.test.tsx | 7 +- frontend/src/utils/testRenderer.tsx | 21 +- 15 files changed, 261 insertions(+), 320 deletions(-) diff --git a/frontend/src/component/changeRequest/ChangeRequestSidebar/EnvironmentChangeRequest/EnvironmentChangeRequestTitle.test.tsx b/frontend/src/component/changeRequest/ChangeRequestSidebar/EnvironmentChangeRequest/EnvironmentChangeRequestTitle.test.tsx index f897ceca4e..ce7dcb770c 100644 --- 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( - - - , - ); + render(); const editButton = await screen.findByTestId('EditIcon'); await user.click(editButton); diff --git a/frontend/src/component/common/FeatureArchiveDialog/FeatureArchiveDialog.test.tsx b/frontend/src/component/common/FeatureArchiveDialog/FeatureArchiveDialog.test.tsx index c4f347210d..8ea6f2e012 100644 --- 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,16 +37,14 @@ test('Add single archive feature change to change request', async () => { const onConfirm = vi.fn(); setupHappyPathForChangeRequest(); render( - - - , + , ); expect(screen.getByText('Archive feature toggle')).toBeInTheDocument(); @@ -66,16 +63,14 @@ test('Add multiple archive feature changes to change request', async () => { const onConfirm = vi.fn(); setupHappyPathForChangeRequest(); render( - - - , + , ); await screen.findByText('Archive feature toggles'); @@ -94,16 +89,14 @@ test('Skip change request', async () => { const onConfirm = vi.fn(); setupHappyPathForChangeRequest(); render( - - - , + , { permissions: [{ permission: 'SKIP_CHANGE_REQUEST' }] }, ); diff --git a/frontend/src/component/common/Search/Search.test.tsx b/frontend/src/component/common/Search/Search.test.tsx index 17946e9321..6b4af676b6 100644 --- a/frontend/src/component/common/Search/Search.test.tsx +++ b/frontend/src/component/common/Search/Search.test.tsx @@ -1,23 +1,20 @@ 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 = ( - - {}} - id='localStorageId' - getSearchContext={() => ({ - data: [], - columns: [], - searchValue: '', - })} - /> - + {}} + id='localStorageId' + getSearchContext={() => ({ + data: [], + columns: [], + searchValue: '', + })} + /> ); test('should read saved query from local storage', async () => { diff --git a/frontend/src/component/common/StrategyItemContainer/StrategyItemContainer.test.tsx b/frontend/src/component/common/StrategyItemContainer/StrategyItemContainer.test.tsx index 773642ec1f..21dbcaac4e 100644 --- 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( - - - , + , ); expect(screen.getByText('strategy name')).toBeInTheDocument(); diff --git a/frontend/src/component/context/ContextFieldUsage/ContextFieldUsage.test.tsx b/frontend/src/component/context/ContextFieldUsage/ContextFieldUsage.test.tsx index 2c823241be..851eed7eaa 100644 --- 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( - - - , - ); + render(); await screen.findByText('Usage of this context field:'); await screen.findByText('tests (Gradual rollout)'); diff --git a/frontend/src/component/context/ContextList/ContextList/ContextList.test.tsx b/frontend/src/component/context/ContextList/ContextList/ContextList.test.tsx index 889c8ba27b..90b523d12e 100644 --- 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( - - - , + , ); await screen.findByText('2 feature toggles'); diff --git a/frontend/src/component/feature/Dependencies/AddDependencyDialogue.test.tsx b/frontend/src/component/feature/Dependencies/AddDependencyDialogue.test.tsx index 678794d6b2..59435b099f 100644 --- 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,16 +38,14 @@ test('Delete dependency', async () => { let closed = false; setupApi(); render( - - { - closed = true; - }} - /> - , + { + closed = true; + }} + />, ); const removeDependency = await screen.findByText('Remove'); @@ -68,16 +65,14 @@ test('Add dependency', async () => { let closed = false; setupApi(); render( - - { - closed = true; - }} - /> - , + { + closed = true; + }} + />, ); const removeDependency = await screen.findByText('Remove'); diff --git a/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsProject/FeatureSettingsProjectConfirm/FeatureSettingsProjectConfirm.test.tsx b/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsProject/FeatureSettingsProjectConfirm/FeatureSettingsProjectConfirm.test.tsx index 90a06225c2..290ebaec49 100644 --- 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,31 +21,29 @@ test('Cannot change project for feature with dependencies', async () => { let closed = false; setupApi(); render( - - - { - closed = true; - }} - onClick={() => {}} - open={true} - changeRequests={[]} - /> - } - /> - - , + + { + closed = true; + }} + onClick={() => {}} + open={true} + changeRequests={[]} + /> + } + /> + , { route: 'projects/default/features/parent/settings', }, diff --git a/frontend/src/component/playground/Playground/AdvancedPlayground.test.tsx b/frontend/src/component/playground/Playground/AdvancedPlayground.test.tsx index 8ffc2d9d54..ee51b31dcd 100644 --- a/frontend/src/component/playground/Playground/AdvancedPlayground.test.tsx +++ b/frontend/src/component/playground/Playground/AdvancedPlayground.test.tsx @@ -1,39 +1,32 @@ 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 = ( - - ( -
-
- {JSON.stringify(props.projects)} -
-
- {JSON.stringify(props.environments)} -
-
{JSON.stringify(props.context)}
+ ( +
+
{JSON.stringify(props.projects)}
+
+ {JSON.stringify(props.environments)}
- )} - /> - +
{JSON.stringify(props.context)}
+
+ )} + /> ); const testEvaluateComponent = ( - - ( -
- -
- )} - /> - + ( +
+ +
+ )} + /> ); afterEach(() => { diff --git a/frontend/src/component/playground/Playground/AdvancedPlaygroundResultsTable/AdvancedPlaygroundResultsTable.test.tsx b/frontend/src/component/playground/Playground/AdvancedPlaygroundResultsTable/AdvancedPlaygroundResultsTable.test.tsx index 90ca2b564d..ddd4845993 100644 --- a/frontend/src/component/playground/Playground/AdvancedPlaygroundResultsTable/AdvancedPlaygroundResultsTable.test.tsx +++ b/frontend/src/component/playground/Playground/AdvancedPlaygroundResultsTable/AdvancedPlaygroundResultsTable.test.tsx @@ -1,109 +1,104 @@ 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( - - - , + }, + ]} + input={{ + environments: ['development', 'production'], + projects: '*', + context: { + appName: 'MyApp', + }, + }} + />, ); expect(screen.getByText('Infinite')).toBeInTheDocument(); diff --git a/frontend/src/component/playground/Playground/PlaygroundEnvironmentTable/PlaygroundEnvironmentDiffTable.test.tsx b/frontend/src/component/playground/Playground/PlaygroundEnvironmentTable/PlaygroundEnvironmentDiffTable.test.tsx index 7e90c4de88..3d91e2fd91 100644 --- 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,38 +22,36 @@ const irrelevantDetails = { test('should render environment diff table', async () => { render( - - - , + ...irrelevantDetails, + }, + ], + }} + />, ); expect(screen.getByText('web')).toBeInTheDocument(); diff --git a/frontend/src/component/playground/Playground/PlaygroundEnvironmentTable/PlaygroundEnvironmentTable.test.tsx b/frontend/src/component/playground/Playground/PlaygroundEnvironmentTable/PlaygroundEnvironmentTable.test.tsx index 22e0c992d3..d9520fb8db 100644 --- a/frontend/src/component/playground/Playground/PlaygroundEnvironmentTable/PlaygroundEnvironmentTable.test.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundEnvironmentTable/PlaygroundEnvironmentTable.test.tsx @@ -1,41 +1,38 @@ 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( - - - , + environment: 'dev', + context: { + channel: 'web', + client: 'clientA', + appName: 'myapp', + }, + }, + ]} + />, ); expect(screen.getByText('web')).toBeInTheDocument(); diff --git a/frontend/src/component/segments/SegmentTable/SegmentTable.test.tsx b/frontend/src/component/segments/SegmentTable/SegmentTable.test.tsx index 81209b3572..445c2c63a2 100644 --- 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( - - - , - ); + render(); await screen.findByText('2 feature toggles'); await screen.findByText('3 projects'); diff --git a/frontend/src/component/user/Profile/PasswordTab/PasswordTab.test.tsx b/frontend/src/component/user/Profile/PasswordTab/PasswordTab.test.tsx index 0645f3b26a..7b5bf1a2ce 100644 --- 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( - - - , - ); + render(); await screen.findByText('Change password'); const passwordInput = await screen.findByLabelText('Password'); diff --git a/frontend/src/utils/testRenderer.tsx b/frontend/src/utils/testRenderer.tsx index 5ad3c7384f..c9bb09a98e 100644 --- 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,15 +22,17 @@ export const render = ( window.history.pushState({}, 'Test page', route); const Wrapper: FC = ({ children }) => ( - new Map() }}> - - - - {children} - - - - + + new Map() }}> + + + + {children} + + + + + ); return rtlRender(ui, {