diff --git a/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/StrategyChange.test.tsx b/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/StrategyChange.test.tsx
new file mode 100644
index 000000000000..0cda657f5574
--- /dev/null
+++ b/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/StrategyChange.test.tsx
@@ -0,0 +1,130 @@
+import { render } from 'utils/testRenderer';
+import { StrategyChange } from './StrategyChange';
+import { testServerRoute, testServerSetup } from 'utils/testServer';
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+const server = testServerSetup();
+
+const feature = 'my_feature';
+const projectId = 'default';
+const environmentName = 'production';
+const snapshotRollout = '70';
+const currentRollout = '80';
+const changeRequestRollout = '90';
+const strategy = {
+ name: 'flexibleRollout',
+ constraints: [],
+ variants: [],
+ parameters: {
+ groupId: 'child_1',
+ stickiness: 'default',
+ },
+ segments: [],
+ id: '8e25e369-6424-4dad-b17f-5d32cceb2fbe',
+ disabled: false,
+};
+
+testServerRoute(
+ server,
+ `/api/admin/projects/${projectId}/features/${feature}`,
+ {
+ environments: [
+ {
+ name: environmentName,
+ strategies: [
+ {
+ ...strategy,
+ title: 'current_title',
+ parameters: {
+ ...strategy.parameters,
+ rollout: currentRollout,
+ },
+ },
+ ],
+ },
+ ],
+ },
+);
+
+test('Editing strategy before change request is applied', async () => {
+ render(
+ ,
+ );
+
+ await screen.findByText('Editing strategy:');
+ await screen.findByText('change_request_title');
+ await screen.findByText('current_title');
+ expect(screen.queryByText('snapshot_title')).not.toBeInTheDocument();
+
+ const viewDiff = await screen.findByText('View Diff');
+ userEvent.hover(viewDiff);
+ await screen.findByText(`- parameters.rollout: "${currentRollout}"`);
+ await screen.findByText(`+ parameters.rollout: "${changeRequestRollout}"`);
+});
+
+test('Editing strategy after change request is applied', async () => {
+ render(
+ ,
+ );
+
+ await screen.findByText('Editing strategy:');
+ await screen.findByText('change_request_title');
+ await screen.findByText('snapshot_title');
+ expect(screen.queryByText('current_title')).not.toBeInTheDocument();
+
+ const viewDiff = await screen.findByText('View Diff');
+ userEvent.hover(viewDiff);
+ await screen.findByText(`- parameters.rollout: "${snapshotRollout}"`);
+ await screen.findByText(`+ parameters.rollout: "${changeRequestRollout}"`);
+});
diff --git a/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/StrategyChange.tsx b/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/StrategyChange.tsx
index 03321f4f4984..aa5e7ea72d7a 100644
--- a/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/StrategyChange.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/StrategyChange.tsx
@@ -271,11 +271,19 @@ export const StrategyChange: VFC<{
/>
diff --git a/frontend/src/component/changeRequest/changeRequest.types.ts b/frontend/src/component/changeRequest/changeRequest.types.ts
index 61ccaeeecd64..c0ef4f99fbf7 100644
--- a/frontend/src/component/changeRequest/changeRequest.types.ts
+++ b/frontend/src/component/changeRequest/changeRequest.types.ts
@@ -241,7 +241,7 @@ export type ChangeRequestAddStrategy = Pick<
export type ChangeRequestEditStrategy = ChangeRequestAddStrategy & {
id: string;
- snapshot?: Omit & { title?: string | null };
+ snapshot?: Omit & { title?: string };
};
type ChangeRequestDeleteStrategy = {