@spinnaker/google 2026.3.2 → 2026.4.0

package/src/serverGroup/configure/wizard/pages/GceServerGroupLoadBalancers.tsx

@@ -10,6 +10,8 @@ import type {
 import { GceServerGroupWizardPage } from '../GceServerGroupWizardPage';
 
 interface ILoadBalancerOption {
+  loadBalancerType?: string;
+  listeners?: Array<{ name?: string }>;
   name: string;
   region?: string;
 }
@@ -91,53 +93,69 @@ function renderPolicyError(error: string | undefined, id: string): React.ReactNo
   );
 }
 
-export class GceServerGroupLoadBalancers extends GceServerGroupWizardPage<IGceServerGroupWizardPageProps> {
-  public validate(values: IGceServerGroupCommand): IGceServerGroupCommandValidationErrors {
-    const errors = super.validate(values) as IGceServerGroupCommandValidationErrors & {
-      loadBalancingPolicy?: ILoadBalancingPolicyErrors;
-    };
-    const policy = values.loadBalancingPolicy as ILoadBalancingPolicy | undefined;
-    if (!policy || !uniqueStrings(values.loadBalancers).length) {
-      return errors;
-    }
+export function validateGceServerGroupLoadBalancers(
+  values: IGceServerGroupCommand,
+): IGceServerGroupCommandValidationErrors {
+  const errors = {} as IGceServerGroupCommandValidationErrors & {
+    loadBalancingPolicy?: ILoadBalancingPolicyErrors;
+  };
+  if (hasAmbiguousSelectedName(values)) {
+    errors.loadBalancers =
+      'The selected load balancer name is ambiguous across regions or load balancer types. Rename it or select an unambiguous load balancer.';
+  } else if (hasMixedRegionalExternalNetworkSelection(values)) {
+    errors.loadBalancers =
+      'REGIONAL_EXTERNAL_NETWORK load balancers cannot be combined with other load balancer families in this editor.';
+  }
+  const policy = values.loadBalancingPolicy as ILoadBalancingPolicy | undefined;
+  if (!policy || !getBalancingModes(values).length) {
+    return errors;
+  }
 
-    const policyErrors: ILoadBalancingPolicyErrors = {};
-    const balancingModes = getBalancingModes(values);
-    if (!policy.balancingMode || !balancingModes.includes(policy.balancingMode)) {
-      policyErrors.balancingMode = 'Select a balancing mode supported by the selected load balancers.';
+  const policyErrors: ILoadBalancingPolicyErrors = {};
+  const balancingModes = getBalancingModes(values);
+  if (!policy.balancingMode || !balancingModes.includes(policy.balancingMode)) {
+    policyErrors.balancingMode = 'Select a balancing mode supported by the selected load balancers.';
+  }
+  if (!isValidBoundedValue(policy.capacityScaler, values, 0, 1)) {
+    policyErrors.capacityScaler = 'Capacity must be between 0 and 100%.';
+  }
+
+  const namedPortErrors = (policy.namedPorts || []).map(({ name, port }) => {
+    const namedPortError: { name?: string; port?: string } = {};
+    if (!name?.trim()) {
+      namedPortError.name = 'Port name required.';
     }
-    if (!isValidBoundedValue(policy.capacityScaler, values, 0, 1)) {
-      policyErrors.capacityScaler = 'Capacity must be between 0 and 100%.';
+    if (!isValidInteger(port, values, 1, 65535)) {
+      namedPortError.port = 'Port must be an integer between 1 and 65535.';
     }
+    return namedPortError;
+  });
+  if (namedPortErrors.some((namedPortError) => Object.keys(namedPortError).length)) {
+    policyErrors.namedPorts = namedPortErrors;
+  }
 
-    const namedPortErrors = (policy.namedPorts || []).map(({ name, port }) => {
-      const namedPortError: { name?: string; port?: string } = {};
-      if (!name?.trim()) {
-        namedPortError.name = 'Port name required.';
-      }
-      if (!isValidInteger(port, values, 1, 65535)) {
-        namedPortError.port = 'Port must be an integer between 1 and 65535.';
-      }
-      return namedPortError;
-    });
-    if (namedPortErrors.some((namedPortError) => Object.keys(namedPortError).length)) {
-      policyErrors.namedPorts = namedPortErrors;
-    }
+  if (policy.balancingMode === 'RATE' && !isValidMinimum(policy.maxRatePerInstance, values, 0)) {
+    policyErrors.maxRatePerInstance = 'Max rate must be a finite number greater than or equal to zero.';
+  }
+  if (policy.balancingMode === 'CONNECTION' && !isValidMinimum(policy.maxConnectionsPerInstance, values, 0)) {
+    policyErrors.maxConnectionsPerInstance = 'Max connections must be a finite number greater than or equal to zero.';
+  }
+  if (policy.balancingMode === 'UTILIZATION' && !isValidBoundedValue(policy.maxUtilization, values, 0, 1)) {
+    policyErrors.maxUtilization = 'Max utilization must be between 0 and 100%.';
+  }
 
-    if (policy.balancingMode === 'RATE' && !isValidMinimum(policy.maxRatePerInstance, values, 0)) {
-      policyErrors.maxRatePerInstance = 'Max rate must be a finite number greater than or equal to zero.';
-    }
-    if (policy.balancingMode === 'CONNECTION' && !isValidMinimum(policy.maxConnectionsPerInstance, values, 0)) {
-      policyErrors.maxConnectionsPerInstance = 'Max connections must be a finite number greater than or equal to zero.';
-    }
-    if (policy.balancingMode === 'UTILIZATION' && !isValidBoundedValue(policy.maxUtilization, values, 0, 1)) {
-      policyErrors.maxUtilization = 'Max utilization must be between 0 and 100%.';
-    }
+  if (Object.keys(policyErrors).length) {
+    errors.loadBalancingPolicy = policyErrors;
+  }
+  return errors;
+}
 
-    if (Object.keys(policyErrors).length) {
-      errors.loadBalancingPolicy = policyErrors;
-    }
-    return errors;
+export class GceServerGroupLoadBalancers extends GceServerGroupWizardPage<IGceServerGroupWizardPageProps> {
+  public validate(values: IGceServerGroupCommand): IGceServerGroupCommandValidationErrors {
+    return {
+      ...super.validate(values),
+      ...validateGceServerGroupLoadBalancers(values),
+    } as IGceServerGroupCommandValidationErrors;
   }
 
   public render(): React.ReactElement {
@@ -145,9 +163,10 @@ export class GceServerGroupLoadBalancers extends GceServerGroupWizardPage<IGceSe
     const selectedLoadBalancers = uniqueStrings(values.loadBalancers);
     const selectedReferences = preserveReferences(getAvailableLoadBalancers(values), selectedLoadBalancers);
     const policy = (values.loadBalancingPolicy || {}) as ILoadBalancingPolicy;
-    const policyErrors = (this.validate(values) as IGceServerGroupCommandValidationErrors & {
+    const validationErrors = this.validate(values) as IGceServerGroupCommandValidationErrors & {
       loadBalancingPolicy?: ILoadBalancingPolicyErrors;
-    }).loadBalancingPolicy || { namedPorts: [] };
+    };
+    const policyErrors = validationErrors.loadBalancingPolicy || { namedPorts: [] };
     const balancingModes = getBalancingModes(values);
 
     return (
@@ -172,6 +191,11 @@ export class GceServerGroupLoadBalancers extends GceServerGroupWizardPage<IGceSe
                 </option>
               ))}
             </select>
+            {validationErrors.loadBalancers && (
+              <span className="help-block" id="gce-server-group-load-balancers-error" role="alert">
+                {validationErrors.loadBalancers}
+              </span>
+            )}
           </div>
           <div className="col-md-1">
             <button
@@ -257,6 +281,11 @@ export class GceServerGroupLoadBalancers extends GceServerGroupWizardPage<IGceSe
     values: IGceServerGroupCommand,
     loadBalancerName: string,
   ): React.ReactElement | null {
+    // Clouddriver attaches every backend service of a regional external load balancer.
+    const loadBalancerType = getLoadBalancerIndex(values)[loadBalancerName]?.loadBalancerType;
+    if (loadBalancerType === 'REGIONAL_EXTERNAL_NETWORK' || loadBalancerType === 'EXTERNAL_MANAGED') {
+      return null;
+    }
     const availableBackendServices = getBackendServiceData(values, loadBalancerName).map(({ name }) => name);
     const selectedBackendServices = uniqueStrings(values.backendServices?.[loadBalancerName]);
     if (!availableBackendServices.length && !selectedBackendServices.length) {
@@ -578,17 +607,10 @@ export class GceServerGroupLoadBalancers extends GceServerGroupWizardPage<IGceSe
 }
 
 function getAvailableLoadBalancers(command: IGceServerGroupCommand): ILoadBalancerOption[] {
-  const rawLoadBalancers = command.backingData?.loadBalancers;
-  if (Array.isArray(rawLoadBalancers)) {
+  const scopedLoadBalancers = getScopedLoadBalancers(command);
+  if (scopedLoadBalancers) {
     return uniqueLoadBalancers(
-      rawLoadBalancers
-        .flatMap((provider: any) => (Array.isArray(provider?.accounts) ? provider.accounts : []))
-        .filter((account: any) => account?.name === command.credentials)
-        .flatMap((account: any) => (Array.isArray(account?.regions) ? account.regions : []))
-        .flatMap((region: any) => (Array.isArray(region?.loadBalancers) ? region.loadBalancers : []))
-        .filter((loadBalancer: any) => isLoadBalancerInRegion(loadBalancer, command))
-        .map(toLoadBalancerOption)
-        .filter((loadBalancer): loadBalancer is ILoadBalancerOption => Boolean(loadBalancer)),
+      scopedLoadBalancers.map((loadBalancer) => toIndexedExternalManagedOption(command, loadBalancer)),
     );
   }
 
@@ -603,6 +625,23 @@ function getAvailableLoadBalancers(command: IGceServerGroupCommand): ILoadBalanc
   );
 }
 
+// Clouddriver summarizes EXTERNAL_MANAGED per listener, while the wizard indexes it by the URL-map
+// display name that clone submission expands back into listener names.
+function toIndexedExternalManagedOption(
+  command: IGceServerGroupCommand,
+  loadBalancer: ILoadBalancerOption,
+): ILoadBalancerOption {
+  if (loadBalancer.loadBalancerType !== 'EXTERNAL_MANAGED') {
+    return loadBalancer;
+  }
+  const indexed = Object.values(getLoadBalancerIndex(command)).find(
+    (candidate) =>
+      candidate.loadBalancerType === 'EXTERNAL_MANAGED' &&
+      (candidate.listeners || []).some(({ name }) => name === loadBalancer.name),
+  );
+  return indexed?.name ? { ...loadBalancer, name: indexed.name } : loadBalancer;
+}
+
 function getLoadBalancerIndex(command: IGceServerGroupCommand): Record<string, ILoadBalancerData> {
   return (command.backingData?.filtered?.loadBalancerIndex || {}) as Record<string, ILoadBalancerData>;
 }
@@ -635,14 +674,19 @@ function getNamedPortNames(command: IGceServerGroupCommand): string[] {
 
 function getBalancingModes(command: IGceServerGroupCommand): string[] {
   const loadBalancerIndex = getLoadBalancerIndex(command);
-  const modeSets = uniqueStrings(command.loadBalancers)
+  const loadBalancerTypes = uniqueStrings(command.loadBalancers)
     .map((loadBalancerName) => loadBalancerIndex[loadBalancerName]?.loadBalancerType)
-    .filter((loadBalancerType): loadBalancerType is string => Boolean(loadBalancerType))
-    .map((loadBalancerType) =>
-      loadBalancerType === 'HTTP' || loadBalancerType === 'INTERNAL_MANAGED'
-        ? HTTP_BALANCING_MODES
-        : CONNECTION_BALANCING_MODES,
-    );
+    .filter((loadBalancerType): loadBalancerType is string => Boolean(loadBalancerType));
+  // Clouddriver always attaches passthrough NLB backends with CONNECTION balancing and this page
+  // rejects mixing them with other families, so there is no balancing mode to choose.
+  if (loadBalancerTypes.includes('REGIONAL_EXTERNAL_NETWORK')) {
+    return [];
+  }
+  const modeSets = loadBalancerTypes.map((loadBalancerType) =>
+    loadBalancerType === 'HTTP' || loadBalancerType === 'INTERNAL_MANAGED' || loadBalancerType === 'EXTERNAL_MANAGED'
+      ? HTTP_BALANCING_MODES
+      : CONNECTION_BALANCING_MODES,
+  );
   if (!modeSets.length) {
     const persistedMode = (command.loadBalancingPolicy as ILoadBalancingPolicy | undefined)?.balancingMode;
     return persistedMode ? [persistedMode] : [];
@@ -706,7 +750,11 @@ function getLoadBalancerMetadataReference(
   if (!loadBalancer) {
     return undefined;
   }
-  if (loadBalancer.loadBalancerType === 'HTTP' || loadBalancer.loadBalancerType === 'INTERNAL_MANAGED') {
+  if (
+    loadBalancer.loadBalancerType === 'HTTP' ||
+    loadBalancer.loadBalancerType === 'INTERNAL_MANAGED' ||
+    loadBalancer.loadBalancerType === 'EXTERNAL_MANAGED'
+  ) {
     const names = uniqueStrings((loadBalancer.listeners || []).map(({ name }) => name || ''));
     if (!names.length) {
       return undefined;
@@ -828,13 +876,54 @@ function isLoadBalancerInRegion(loadBalancer: any, command: IGceServerGroupComma
   return loadBalancer?.region === command.region || loadBalancer?.region === 'global';
 }
 
+function getScopedLoadBalancers(command: IGceServerGroupCommand): ILoadBalancerOption[] | undefined {
+  const rawLoadBalancers = command.backingData?.loadBalancers;
+  if (!Array.isArray(rawLoadBalancers)) {
+    return undefined;
+  }
+  return rawLoadBalancers
+    .flatMap((provider: any) => (Array.isArray(provider?.accounts) ? provider.accounts : []))
+    .filter((account: any) => account?.name === command.credentials)
+    .flatMap((account: any) => (Array.isArray(account?.regions) ? account.regions : []))
+    .flatMap((region: any) => (Array.isArray(region?.loadBalancers) ? region.loadBalancers : []))
+    .filter((loadBalancer: any) => isLoadBalancerInRegion(loadBalancer, command))
+    .map(toLoadBalancerOption)
+    .filter((loadBalancer): loadBalancer is ILoadBalancerOption => Boolean(loadBalancer));
+}
+
+function hasAmbiguousSelectedName(command: IGceServerGroupCommand): boolean {
+  const selectedNames = new Set(uniqueStrings(command.loadBalancers));
+  const identitiesByName = (getScopedLoadBalancers(command) || []).reduce<Map<string, Set<string>>>(
+    (identities, loadBalancer) => {
+      const identity = `${loadBalancer.region || ''}:${loadBalancer.loadBalancerType || ''}`;
+      [loadBalancer.name, ...(loadBalancer.listeners || []).map(({ name }) => name)]
+        .filter((name): name is string => Boolean(name))
+        .forEach((name) => {
+          const values = identities.get(name) || new Set<string>();
+          values.add(identity);
+          identities.set(name, values);
+        });
+      return identities;
+    },
+    new Map(),
+  );
+  return Array.from(selectedNames).some((name) => (identitiesByName.get(name)?.size || 0) > 1);
+}
+
+function hasMixedRegionalExternalNetworkSelection(command: IGceServerGroupCommand): boolean {
+  const selectedTypes = uniqueStrings(command.loadBalancers)
+    .map((name) => getLoadBalancerIndex(command)[name]?.loadBalancerType)
+    .filter(Boolean);
+  return selectedTypes.includes('REGIONAL_EXTERNAL_NETWORK') && selectedTypes.length > 1;
+}
+
 function toLoadBalancerOption(loadBalancer: unknown): ILoadBalancerOption | null {
   if (typeof loadBalancer === 'string') {
     return { name: loadBalancer };
   }
   if (loadBalancer && typeof (loadBalancer as ILoadBalancerOption).name === 'string') {
-    const { name, region } = loadBalancer as ILoadBalancerOption;
-    return { name, region };
+    const { listeners, loadBalancerType, name, region } = loadBalancer as ILoadBalancerOption;
+    return { listeners, loadBalancerType, name, region };
   }
   return null;
 }

package/src/serverGroup/configure/wizard/pages/Policies.spec.tsx

@@ -1,10 +1,48 @@
-import { shallow } from 'enzyme';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import React from 'react';
 
 import type { IGceServerGroupCommand } from '../GceServerGroupWizard.types';
-import { Policies } from './Policies';
-import { GceAutoHealingPolicyEditor } from '../../../../autoHealingPolicy';
-import { GceAutoscalingPolicyEditor } from '../../../../autoscalingPolicy';
+import { Policies, validateGceServerGroupPolicies } from './Policies';
+
+vi.mock('../../../../autoscalingPolicy', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('../../../../autoscalingPolicy')>();
+  return {
+    ...actual,
+    GceAutoscalingPolicyEditor: ({ onChange, policy }: any) => (
+      <div>
+        <output aria-label="Autoscaling policy">{JSON.stringify(policy)}</output>
+        <button
+          onClick={() =>
+            onChange({
+              minNumReplicas: 2,
+              maxNumReplicas: 6,
+              coolDownPeriodSec: 90,
+              cpuUtilization: { utilizationTarget: 0.7 },
+            })
+          }
+          type="button"
+        >
+          Edit autoscaling policy
+        </button>
+      </div>
+    ),
+  };
+});
+
+vi.mock('../../../../autoHealingPolicy', () => ({
+  GceAutoHealingPolicyEditor: ({ policy, reader }: any) => {
+    const [healthChecks, setHealthChecks] = React.useState<any[]>([]);
+    return (
+      <div>
+        <output aria-label="Autohealing policy">{JSON.stringify(policy)}</output>
+        <button onClick={() => reader.listHealthChecks().then(setHealthChecks)} type="button">
+          Load health checks
+        </button>
+        <output aria-label="Health checks">{JSON.stringify(healthChecks)}</output>
+      </div>
+    );
+  },
+}));
 
 describe('GCE server group Policies page', () => {
   it('reuses the policy editors and supplies autohealing health checks from filtered backing data', async () => {
@@ -27,14 +65,16 @@ describe('GCE server group Policies page', () => {
         },
       },
     });
-    const wrapper = shallow(<Policies app={{} as any} formik={formik(values)} />);
-
-    expect(wrapper.find(GceAutoscalingPolicyEditor).prop('policy')).toBe(values.autoscalingPolicy);
-    expect(wrapper.find(GceAutoHealingPolicyEditor).prop('policy')).toBe(values.autoHealingPolicy);
-
-    const reader = wrapper.find(GceAutoHealingPolicyEditor).prop('reader') as any;
-    expect(await reader.listHealthChecks()).toEqual([
-      jasmine.objectContaining({ account: 'account', name: 'check', selfLink: 'https://compute/healthChecks/check' }),
+    renderPolicies(values);
+
+    expect(screen.getByLabelText('Autoscaling policy')).toHaveTextContent('unknownPolicyField');
+    expect(screen.getByLabelText('Autohealing policy')).toHaveTextContent('unknownPolicyField');
+    fireEvent.click(screen.getByRole('button', { name: 'Load health checks' }));
+    await waitFor(() =>
+      expect(screen.getByLabelText('Health checks')).toHaveTextContent('https://compute/healthChecks/check'),
+    );
+    expect(JSON.parse(screen.getByLabelText('Health checks').textContent || '[]')).toEqual([
+      expect.objectContaining({ account: 'account', name: 'check', selfLink: 'https://compute/healthChecks/check' }),
     ]);
   });
 
@@ -47,10 +87,9 @@ describe('GCE server group Policies page', () => {
       source: { region: 'us-central1', serverGroupName: 'app-v001', useSourceCapacity: true },
       viewState: { mode: 'clone', useSimpleCapacity: false, unrelated: 'keep' },
     });
-    const persistedFormik = formik(persisted);
-    const persistedPage = shallow(<Policies app={{} as any} formik={persistedFormik} />);
+    const page = renderPolicies(persisted);
 
-    persistedPage.find('[data-testid="enable-autoscaling"]').simulate('change', { target: { checked: false } });
+    fireEvent.click(screen.getByTestId('enable-autoscaling'));
 
     expect(persisted.enableAutoScaling).toBe(false);
     expect(persisted.autoscalingPolicy).toBeNull();
@@ -63,8 +102,8 @@ describe('GCE server group Policies page', () => {
     expect(persisted.viewState).toEqual({ mode: 'clone', useSimpleCapacity: true, unrelated: 'keep' });
     expect(persisted.capacity).toEqual({ min: 2, max: 2, desired: 2 });
 
-    persistedPage.setProps({ formik: persistedFormik });
-    persistedPage.find('[data-testid="enable-autoscaling"]').simulate('change', { target: { checked: true } });
+    page.rerenderPage(persisted);
+    fireEvent.click(screen.getByTestId('enable-autoscaling'));
 
     expect(persisted.enableAutoScaling).toBe(true);
     expect(persisted.overwriteAncestorAutoscalingPolicy).toBe(false);
@@ -85,9 +124,9 @@ describe('GCE server group Policies page', () => {
         autoscalingPolicy: { minNumReplicas: 1, maxNumReplicas: 4 },
         viewState: { mode },
       });
-      const wrapper = shallow(<Policies app={{} as any} formik={formik(values)} />);
+      renderPolicies(values);
 
-      wrapper.find('[data-testid="enable-autoscaling"]').simulate('change', { target: { checked: false } });
+      fireEvent.click(screen.getByTestId('enable-autoscaling'));
 
       expect(values.overwriteAncestorAutoscalingPolicy).toBe(false);
     });
@@ -96,17 +135,18 @@ describe('GCE server group Policies page', () => {
   it('preserves autohealing policy fields and limits ancestor overwrite to clone disables', () => {
     const policy = { healthCheck: 'check', initialDelaySec: 300, unknownPolicyField: 'keep' };
     const clone = command({ enableAutoHealing: true, autoHealingPolicy: policy, viewState: { mode: 'clone' } });
-    const clonePage = shallow(<Policies app={{} as any} formik={formik(clone)} />);
+    const page = renderPolicies(clone);
 
-    clonePage.find('[data-testid="enable-autohealing"]').simulate('change', { target: { checked: false } });
+    fireEvent.click(screen.getByTestId('enable-autohealing'));
 
     expect(clone.enableAutoHealing).toBe(false);
     expect(clone.overwriteAncestorAutoHealingPolicy).toBe(true);
     expect(clone.autoHealingPolicy).toBe(policy);
 
     const create = command({ enableAutoHealing: true, autoHealingPolicy: policy, viewState: { mode: 'create' } });
-    const createPage = shallow(<Policies app={{} as any} formik={formik(create)} />);
-    createPage.find('[data-testid="enable-autohealing"]').simulate('change', { target: { checked: false } });
+    page.unmount();
+    renderPolicies(create);
+    fireEvent.click(screen.getByTestId('enable-autohealing'));
 
     expect(create.overwriteAncestorAutoHealingPolicy).toBe(false);
   });
@@ -122,10 +162,11 @@ describe('GCE server group Policies page', () => {
       source: { useSourceCapacity: true },
       viewState: { mode: 'clone' },
     });
-    const wrapper = shallow(<Policies app={{} as any} formik={formik(values)} />);
+    const page = renderPolicies(values);
 
-    wrapper.find('[data-testid="enable-autoscaling"]').simulate('change', { target: { checked: true } });
-    wrapper.find('[data-testid="enable-autohealing"]').simulate('change', { target: { checked: true } });
+    fireEvent.click(screen.getByTestId('enable-autoscaling'));
+    page.rerenderPage(values);
+    fireEvent.click(screen.getByTestId('enable-autohealing'));
 
     expect(values.autoscalingPolicy).toEqual({
       minNumReplicas: 3,
@@ -141,18 +182,17 @@ describe('GCE server group Policies page', () => {
   });
 
   it('derives autoscaling rendering and validation from canonical policy presence', () => {
-    const page = new Policies({ app: {} as any, formik: formik(command()) } as any);
     const canonical = command({
       enableAutoScaling: false,
       autoscalingPolicy: { minNumReplicas: 3, maxNumReplicas: 2, cpuUtilization: {} },
     });
-    const canonicalWrapper = shallow(<Policies app={{} as any} formik={formik(canonical)} />);
+    renderPolicies(canonical);
 
-    expect(canonicalWrapper.find('[data-testid="enable-autoscaling"]').prop('checked')).toBe(true);
-    expect(canonicalWrapper.find(GceAutoscalingPolicyEditor).exists()).toBe(true);
+    expect(screen.getByTestId('enable-autoscaling')).toBeChecked();
+    expect(screen.getByLabelText('Autoscaling policy')).toBeInTheDocument();
 
     expect(
-      page.validate({
+      validateGceServerGroupPolicies({
         ...canonical,
         enableAutoHealing: true,
         autoHealingPolicy: {
@@ -174,7 +214,7 @@ describe('GCE server group Policies page', () => {
       },
     });
     expect(
-      page.validate(
+      validateGceServerGroupPolicies(
         command({
           enableAutoScaling: true,
           autoscalingPolicy: null,
@@ -198,17 +238,16 @@ describe('GCE server group Policies page', () => {
       source: { useSourceCapacity: true },
       viewState: { mode: 'editPipeline', useSimpleCapacity: true, unrelated: 'keep' },
     });
-    const wrapper = shallow(<Policies app={{} as any} formik={formik(values)} />);
-    const policy = {
+    renderPolicies(values);
+
+    fireEvent.click(screen.getByRole('button', { name: 'Edit autoscaling policy' }));
+
+    expect(values.autoscalingPolicy).toEqual({
       minNumReplicas: 2,
       maxNumReplicas: 6,
       coolDownPeriodSec: 90,
       cpuUtilization: { utilizationTarget: 0.7 },
-    };
-
-    wrapper.find(GceAutoscalingPolicyEditor).prop('onChange')(policy);
-
-    expect(values.autoscalingPolicy).toBe(policy);
+    });
     expect(values.capacity).toEqual({ min: 2, max: 6, desired: 3 });
     expect(values.enableAutoScaling).toBe(true);
     expect(values.source.useSourceCapacity).toBe(false);
@@ -216,10 +255,8 @@ describe('GCE server group Policies page', () => {
   });
 
   it('requires autoscaling capacity, cooldown, and real metric values', () => {
-    const page = new Policies({ app: {} as any, formik: formik(command()) } as any);
-
     expect(
-      page.validate(
+      validateGceServerGroupPolicies(
         command({
           enableAutoScaling: true,
           autoscalingPolicy: {
@@ -240,7 +277,6 @@ describe('GCE server group Policies page', () => {
   });
 
   it('matches autoscaling schedule and scale-in validation from the completed modal', () => {
-    const page = new Policies({ app: {} as any, formik: formik(command()) } as any);
     const values = command({
       enableAutoScaling: true,
       autoscalingPolicy: {
@@ -253,7 +289,7 @@ describe('GCE server group Policies page', () => {
       },
     });
 
-    expect(page.validate(values)).toEqual({
+    expect(validateGceServerGroupPolicies(values)).toEqual({
       autoscalingPolicy: {
         scalingSchedules: 'Every scaling schedule must be complete and within supported bounds.',
         scaleInControl: 'Scale-in control values are outside supported bounds.',
@@ -262,10 +298,8 @@ describe('GCE server group Policies page', () => {
   });
 
   it('accepts complete policies at modal boundary values', () => {
-    const page = new Policies({ app: {} as any, formik: formik(command()) } as any);
-
     expect(
-      page.validate(
+      validateGceServerGroupPolicies(
         command({
           enableAutoScaling: true,
           autoscalingPolicy: {
@@ -297,6 +331,17 @@ describe('GCE server group Policies page', () => {
   });
 });
 
+function renderPolicies(values: IGceServerGroupCommand) {
+  const pageProps = { app: {} as any, formik: formik(values) };
+  const rendered = render(<Policies {...pageProps} />);
+  return {
+    ...rendered,
+    rerenderPage(nextValues: IGceServerGroupCommand) {
+      rendered.rerender(<Policies {...pageProps} formik={formik(nextValues)} />);
+    },
+  };
+}
+
 function command(overrides: Partial<IGceServerGroupCommand> = {}): IGceServerGroupCommand {
   return {
     credentials: 'account',
@@ -310,7 +355,7 @@ function command(overrides: Partial<IGceServerGroupCommand> = {}): IGceServerGro
 function formik(values: IGceServerGroupCommand): any {
   return {
     values,
-    setFieldValue: jasmine.createSpy('setFieldValue').and.callFake((field: string, value: any) => {
+    setFieldValue: vi.fn().mockImplementation((field: string, value: any) => {
       values[field] = value;
     }),
   };