Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-03-04 00:18:40 +01:00
Code Issues Projects Releases Wiki Activity

refactor: custom render should provide container (#4938)

Browse Source
This commit is contained in:
Mateusz Kwasniewski 2023-10-06 09:19:49 +02:00 committed by GitHub
parent bed26a938c
commit 80eb6e12c6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 261 additions and 320 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/src/component/changeRequest/ChangeRequestSidebar/EnvironmentChangeRequest/EnvironmentChangeRequestTitle.test.tsx
View File

@ -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);

55
frontend/src/component/common/FeatureArchiveDialog/FeatureArchiveDialog.test.tsx
View File

@ -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(
<UIProviderContainer>
<FeatureArchiveDialog
featureIds={['featureA']}
projectId={'projectId'}
isOpen={true}
onClose={onClose}
onConfirm={onConfirm}
featuresWithUsage={[]}
/>
</UIProviderContainer>,
<FeatureArchiveDialog
featureIds={['featureA']}
projectId={'projectId'}
isOpen={true}
onClose={onClose}
onConfirm={onConfirm}
featuresWithUsage={[]}
/>,
);
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(
<UIProviderContainer>
<FeatureArchiveDialog
featureIds={['featureA', 'featureB']}
projectId={'projectId'}
isOpen={true}
onClose={onClose}
onConfirm={onConfirm}
featuresWithUsage={[]}
/>
</UIProviderContainer>,
<FeatureArchiveDialog
featureIds={['featureA', 'featureB']}
projectId={'projectId'}
isOpen={true}
onClose={onClose}
onConfirm={onConfirm}
featuresWithUsage={[]}
/>,
);
await screen.findByText('Archive feature toggles');
@ -94,16 +89,14 @@ test('Skip change request', async () => {
const onConfirm = vi.fn();
setupHappyPathForChangeRequest();
render(
<UIProviderContainer>
<FeatureArchiveDialog
featureIds={['featureA', 'featureB']}
projectId={'projectId'}
isOpen={true}
onClose={onClose}
onConfirm={onConfirm}
featuresWithUsage={[]}
/>
</UIProviderContainer>,
<FeatureArchiveDialog
featureIds={['featureA', 'featureB']}
projectId={'projectId'}
isOpen={true}
onClose={onClose}
onConfirm={onConfirm}
featuresWithUsage={[]}
/>,
{ permissions: [{ permission: 'SKIP_CHANGE_REQUEST' }] },
);

23
frontend/src/component/common/Search/Search.test.tsx
View File

@ -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 = (
<UIProviderContainer>
<Search
hasFilters
onChange={() => {}}
id='localStorageId'
getSearchContext={() => ({
data: [],
columns: [],
searchValue: '',
})}
/>
</UIProviderContainer>
<Search
hasFilters
onChange={() => {}}
id='localStorageId'
getSearchContext={() => ({
data: [],
columns: [],
searchValue: '',
})}
/>
);
test('should read saved query from local storage', async () => {

11
frontend/src/component/common/StrategyItemContainer/StrategyItemContainer.test.tsx
View File

@ -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>,
<StrategyItemContainer
strategy={strategy}
description={'description'}
/>,
);
expect(screen.getByText('strategy name')).toBeInTheDocument();

11
frontend/src/component/context/ContextFieldUsage/ContextFieldUsage.test.tsx
View File

@ -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)');

7
frontend/src/component/context/ContextList/ContextList/ContextList.test.tsx
View File

@ -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');

37
frontend/src/component/feature/Dependencies/AddDependencyDialogue.test.tsx
View File

@ -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(
<UIProviderContainer>
<AddDependencyDialogue
project='default'
featureId='child'
showDependencyDialogue={true}
onClose={() => {
closed = true;
}}
/>
</UIProviderContainer>,
<AddDependencyDialogue
project='default'
featureId='child'
showDependencyDialogue={true}
onClose={() => {
closed = true;
}}
/>,
);
const removeDependency = await screen.findByText('Remove');
@ -68,16 +65,14 @@ test('Add dependency', async () => {
let closed = false;
setupApi();
render(
<UIProviderContainer>
<AddDependencyDialogue
project='default'
featureId='child'
showDependencyDialogue={true}
onClose={() => {
closed = true;
}}
/>
</UIProviderContainer>,
<AddDependencyDialogue
project='default'
featureId='child'
showDependencyDialogue={true}
onClose={() => {
closed = true;
}}
/>,
);
const removeDependency = await screen.findByText('Remove');

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

@ -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(
<UIProviderContainer>
<Routes>
<Route
path={'projects/:projectId/features/:featureId/settings'}
element={
<FeatureSettingsProjectConfirm
projectId={'newProjectId'}
feature={
{
environments: [],
dependencies: [],
children: ['child'],
} as unknown as IFeatureToggle
}
onClose={() => {
closed = true;
}}
onClick={() => {}}
open={true}
changeRequests={[]}
/>
}
/>
</Routes>
</UIProviderContainer>,
<Routes>
<Route
path={'projects/:projectId/features/:featureId/settings'}
element={
<FeatureSettingsProjectConfirm
projectId={'newProjectId'}
feature={
{
environments: [],
dependencies: [],
children: ['child'],
} as unknown as IFeatureToggle
}
onClose={() => {
closed = true;
}}
onClick={() => {}}
open={true}
changeRequests={[]}
/>
}
/>
</Routes>,
{
route: 'projects/default/features/parent/settings',
},

41
frontend/src/component/playground/Playground/AdvancedPlayground.test.tsx
View File

@ -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 = (
<UIProviderContainer>
<AdvancedPlayground
FormComponent={(props) => (
<div>
<div data-id='projects'>
{JSON.stringify(props.projects)}
</div>
<div data-id='environments'>
{JSON.stringify(props.environments)}
</div>
<div data-id='context'>{JSON.stringify(props.context)}</div>
<AdvancedPlayground
FormComponent={(props) => (
<div>
<div data-id='projects'>{JSON.stringify(props.projects)}</div>
<div data-id='environments'>
{JSON.stringify(props.environments)}
</div>
)}
/>
</UIProviderContainer>
<div data-id='context'>{JSON.stringify(props.context)}</div>
</div>
)}
/>
);
const testEvaluateComponent = (
<UIProviderContainer>
<AdvancedPlayground
FormComponent={(props) => (
<form onSubmit={props.onSubmit}>
<button type='submit'>Submit</button>
</form>
)}
/>
</UIProviderContainer>
<AdvancedPlayground
FormComponent={(props) => (
<form onSubmit={props.onSubmit}>
<button type='submit'>Submit</button>
</form>
)}
/>
);
afterEach(() => {

185
frontend/src/component/playground/Playground/AdvancedPlaygroundResultsTable/AdvancedPlaygroundResultsTable.test.tsx
View File

@ -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(
<UIProviderContainer>
<AdvancedPlaygroundResultsTable
loading={false}
features={[
{
name: 'Infinite',
projectId: 'ChangeReqs',
environments: {
development: [
{
isEnabled: false,
isEnabledInCurrentEnvironment: false,
strategies: {
result: true,
data: [
{
name: 'flexibleRollout',
id: '45971fe0-1122-40a7-a68c-3a1430c44062',
disabled: false,
parameters: {
groupId: 'Infinite',
rollout: '50',
stickiness: 'default',
},
result: {
enabled: true,
evaluationStatus:
'complete',
},
constraints: [],
segments: [],
links: {
edit: '/projects/ChangeReqs/features/Infinite/strategies/edit?environmenId=development&strategyId=45971fe0-1122-40a7-a68c-3a1430c44062',
},
<AdvancedPlaygroundResultsTable
loading={false}
features={[
{
name: 'Infinite',
projectId: 'ChangeReqs',
environments: {
development: [
{
isEnabled: false,
isEnabledInCurrentEnvironment: false,
strategies: {
result: true,
data: [
{
name: 'flexibleRollout',
id: '45971fe0-1122-40a7-a68c-3a1430c44062',
disabled: false,
parameters: {
groupId: 'Infinite',
rollout: '50',
stickiness: 'default',
},
{
name: 'default',
id: 'bf5e35b6-edc1-4e54-8f7e-a6cc8d4f352a',
disabled: false,
parameters: {},
result: {
enabled: true,
evaluationStatus:
'complete',
},
constraints: [],
segments: [],
links: {
edit: '/projects/ChangeReqs/features/Infinite/strategies/edit?environmenId=development&strategyId=bf5e35b6-edc1-4e54-8f7e-a6cc8d4f352a',
},
result: {
enabled: true,
evaluationStatus: 'complete',
},
],
},
projectId: 'ChangeReqs',
variant: {
name: 'disabled',
enabled: false,
},
name: 'Infinite',
environment: 'development',
context: {
appName: 'MyApp',
},
variants: [],
constraints: [],
segments: [],
links: {
edit: '/projects/ChangeReqs/features/Infinite/strategies/edit?environmenId=development&strategyId=45971fe0-1122-40a7-a68c-3a1430c44062',
},
},
{
name: 'default',
id: 'bf5e35b6-edc1-4e54-8f7e-a6cc8d4f352a',
disabled: false,
parameters: {},
result: {
enabled: true,
evaluationStatus: 'complete',
},
constraints: [],
segments: [],
links: {
edit: '/projects/ChangeReqs/features/Infinite/strategies/edit?environmenId=development&strategyId=bf5e35b6-edc1-4e54-8f7e-a6cc8d4f352a',
},
},
],
},
],
production: [
{
isEnabled: false,
isEnabledInCurrentEnvironment: false,
strategies: {
result: false,
data: [],
},
projectId: 'ChangeReqs',
variant: {
name: 'disabled',
enabled: false,
},
name: 'Infinite',
environment: 'production',
context: {
appName: 'MyApp',
},
variants: [],
projectId: 'ChangeReqs',
variant: {
name: 'disabled',
enabled: false,
},
],
},
name: 'Infinite',
environment: 'development',
context: {
appName: 'MyApp',
},
variants: [],
},
],
production: [
{
isEnabled: false,
isEnabledInCurrentEnvironment: false,
strategies: {
result: false,
data: [],
},
projectId: 'ChangeReqs',
variant: {
name: 'disabled',
enabled: false,
},
name: 'Infinite',
environment: 'production',
context: {
appName: 'MyApp',
},
variants: [],
},
],
},
]}
input={{
environments: ['development', 'production'],
projects: '*',
context: {
appName: 'MyApp',
},
}}
/>
</UIProviderContainer>,
},
]}
input={{
environments: ['development', 'production'],
projects: '*',
context: {
appName: 'MyApp',
},
}}
/>,
);
expect(screen.getByText('Infinite')).toBeInTheDocument();

59
frontend/src/component/playground/Playground/PlaygroundEnvironmentTable/PlaygroundEnvironmentDiffTable.test.tsx
View File

@ -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(
<UIProviderContainer>
<PlaygroundEnvironmentDiffTable
features={{
development: [
{
name: 'featureA',
isEnabled: true,
environment: 'development',
context: {
channel: 'web',
client: 'clientA',
appName: 'myapp',
},
...irrelevantDetails,
<PlaygroundEnvironmentDiffTable
features={{
development: [
{
name: 'featureA',
isEnabled: true,
environment: 'development',
context: {
channel: 'web',
client: 'clientA',
appName: 'myapp',
},
],
production: [
{
name: 'featureA',
isEnabled: false,
environment: 'production',
context: {
channel: 'web',
client: 'clientA',
appName: 'myapp',
},
...irrelevantDetails,
...irrelevantDetails,
},
],
production: [
{
name: 'featureA',
isEnabled: false,
environment: 'production',
context: {
channel: 'web',
client: 'clientA',
appName: 'myapp',
},
],
}}
/>
</UIProviderContainer>,
...irrelevantDetails,
},
],
}}
/>,
);
expect(screen.getByText('web')).toBeInTheDocument();

57
frontend/src/component/playground/Playground/PlaygroundEnvironmentTable/PlaygroundEnvironmentTable.test.tsx
View File

@ -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(
<UIProviderContainer>
<PlaygroundEnvironmentTable
features={[
{
name: 'featureA',
strategies: {
data: [],
result: false,
},
isEnabled: false,
isEnabledInCurrentEnvironment: false,
variants: [],
projectId: 'projectA',
variant: {
name: 'variantName',
enabled: true,
payload: {
type: 'string',
value: 'variantValue',
},
},
environment: 'dev',
context: {
channel: 'web',
client: 'clientA',
appName: 'myapp',
<PlaygroundEnvironmentTable
features={[
{
name: 'featureA',
strategies: {
data: [],
result: false,
},
isEnabled: false,
isEnabledInCurrentEnvironment: false,
variants: [],
projectId: 'projectA',
variant: {
name: 'variantName',
enabled: true,
payload: {
type: 'string',
value: 'variantValue',
},
},
]}
/>
</UIProviderContainer>,
environment: 'dev',
context: {
channel: 'web',
client: 'clientA',
appName: 'myapp',
},
},
]}
/>,
);
expect(screen.getByText('web')).toBeInTheDocument();

11
frontend/src/component/segments/SegmentTable/SegmentTable.test.tsx
View File

@ -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');

7
frontend/src/component/user/Profile/PasswordTab/PasswordTab.test.tsx
View File

@ -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');

21
frontend/src/utils/testRenderer.tsx
View File

@ -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 }) => (
<SWRConfig value={{ provider: () => new Map() }}>
<AccessProviderMock permissions={permissions}>
<ThemeProvider>
<AnnouncerProvider>
<BrowserRouter>{children}</BrowserRouter>
</AnnouncerProvider>
</ThemeProvider>
</AccessProviderMock>
</SWRConfig>
<UIProviderContainer>
<SWRConfig value={{ provider: () => new Map() }}>
<AccessProviderMock permissions={permissions}>
<ThemeProvider>
<AnnouncerProvider>
<BrowserRouter>{children}</BrowserRouter>
</AnnouncerProvider>
</ThemeProvider>
</AccessProviderMock>
</SWRConfig>
</UIProviderContainer>
);
return rtlRender(ui, {