diff --git a/frontend/src/component/common/NewConstraintAccordion/ConstraintsList/EditableConstraintsList.tsx b/frontend/src/component/common/NewConstraintAccordion/ConstraintsList/EditableConstraintsList.tsx index 7214f80a9f..2e76104f2d 100644 --- a/frontend/src/component/common/NewConstraintAccordion/ConstraintsList/EditableConstraintsList.tsx +++ b/frontend/src/component/common/NewConstraintAccordion/ConstraintsList/EditableConstraintsList.tsx @@ -1,10 +1,14 @@ import type React from 'react'; +import { useImperativeHandle } from 'react'; import { forwardRef } from 'react'; import { styled } from '@mui/material'; import type { IConstraint } from 'interfaces/strategy'; import produce from 'immer'; import useUnleashContext from 'hooks/api/getters/useUnleashContext/useUnleashContext'; -import { constraintId } from 'component/common/LegacyConstraintAccordion/ConstraintAccordionList/createEmptyConstraint'; +import { + constraintId, + createEmptyConstraint, +} from 'component/common/LegacyConstraintAccordion/ConstraintAccordionList/createEmptyConstraint'; import { ConstraintsList } from 'component/common/ConstraintsList/ConstraintsList'; import { EditableConstraintWrapper } from 'component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraintWrapper'; @@ -29,6 +33,15 @@ export const EditableConstraintsList = forwardRef< >(({ constraints, setConstraints }, ref) => { const { context } = useUnleashContext(); + useImperativeHandle(ref, () => ({ + addConstraint(contextName: string) { + if (setConstraints) { + const constraint = createEmptyConstraint(contextName); + setConstraints((prev) => [...prev, constraint]); + } + }, + })); + const onRemove = setConstraints && ((index: number) => { diff --git a/frontend/src/component/segments/SegmentFormStepTwo.test.tsx b/frontend/src/component/segments/SegmentFormStepTwo.test.tsx new file mode 100644 index 0000000000..16d7ac0fb0 --- /dev/null +++ b/frontend/src/component/segments/SegmentFormStepTwo.test.tsx @@ -0,0 +1,67 @@ +import { render } from 'utils/testRenderer'; +import { screen, waitFor } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import { testServerRoute, testServerSetup } from 'utils/testServer'; +import { SegmentFormStepTwo } from './SegmentFormStepTwo'; +import type { IConstraint } from 'interfaces/strategy'; +import { vi } from 'vitest'; +import { + CREATE_SEGMENT, + UPDATE_PROJECT_SEGMENT, +} from 'component/providers/AccessProvider/permissions'; + +const server = testServerSetup(); + +const setupRoutes = () => { + testServerRoute(server, '/api/admin/context', [ + { name: 'userId' }, + { name: 'appName' }, + { name: 'environment' }, + ]); + + testServerRoute(server, '/api/admin/ui-config', { + flags: { + addEditStrategy: true, + }, + }); +}; + +const defaultProps = { + project: undefined, + constraints: [] as IConstraint[], + setConstraints: vi.fn(), + setCurrentStep: vi.fn(), + mode: 'create' as const, +}; + +describe('SegmentFormStepTwo', () => { + beforeEach(() => { + setupRoutes(); + defaultProps.setConstraints.mockClear(); + }); + + test('adding context field through autocomplete updates constraints list', async () => { + const user = userEvent.setup(); + render(, { + permissions: [ + { permission: CREATE_SEGMENT }, + { permission: UPDATE_PROJECT_SEGMENT }, + ], + }); + + const autocomplete = + await screen.findByPlaceholderText('Select a context'); + + await user.click(autocomplete); + + await waitFor(() => { + expect(screen.getByText('userId')).toBeInTheDocument(); + }); + + await user.click(screen.getByText('userId')); + + await waitFor(() => { + expect(defaultProps.setConstraints).toHaveBeenCalled(); + }); + }); +});