@spinnaker/google 2026.3.2 → 2026.4.0

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

@@ -1,20 +1,21 @@
+import { fireEvent, render } from '@testing-library/react';
+import type { RenderResult } from '@testing-library/react';
 import type { FormikProps } from 'formik';
-import { shallow } from 'enzyme';
 import React from 'react';
+import type { Mock, Mocked } from 'vitest';
 
 import type { IGceServerGroupCommand, IGceServerGroupWizardAdapter } from '../GceServerGroupWizard.types';
-import { GceInstanceFlexibilityConfigurer } from '../zones/GceInstanceFlexibilityConfigurer';
-import { ServerGroupCapacity } from './ServerGroupCapacity';
+import { ServerGroupCapacity, validateGceServerGroupCapacity } from './ServerGroupCapacity';
 
 describe('GCE server group Capacity page', () => {
   it('restores desired capacity and keeps simple capacity min, max, and desired linked', () => {
     const values = command({ autoscalingPolicy: null, capacity: { min: 0, max: 0, desired: 3 } });
     const { formik } = testProps(values);
-    const wrapper = shallow(<ServerGroupCapacity app={{} as any} formik={formik} />);
+    const wrapper = renderPage(<ServerGroupCapacity app={{} as any} formik={formik} />);
 
-    expect(wrapper.find('input[aria-label="Desired capacity"]').prop('value')).toBe(3);
+    expect(input(wrapper, 'input[aria-label="Desired capacity"]').valueAsNumber).toBe(3);
 
-    wrapper.find('input[aria-label="Desired capacity"]').simulate('change', { target: { value: '5' } });
+    fireEvent.change(input(wrapper, 'input[aria-label="Desired capacity"]'), { target: { value: '5' } });
 
     expect(formik.setFieldValue).toHaveBeenCalledWith('capacity', { min: 5, max: 5, desired: 5 });
   });
@@ -26,13 +27,12 @@ describe('GCE server group Capacity page', () => {
       viewState: { mode: 'create' },
     });
     const { formik } = testProps(values);
-    const page = new ServerGroupCapacity({ app: {} as any, formik } as any);
-    const wrapper = shallow(<ServerGroupCapacity app={{} as any} formik={formik} />);
+    const wrapper = renderPage(<ServerGroupCapacity app={{} as any} formik={formik} />);
 
-    wrapper.find('input[aria-label="Desired capacity"]').simulate('change', { target: { value: '4' } });
+    fireEvent.change(input(wrapper, 'input[aria-label="Desired capacity"]'), { target: { value: '4' } });
 
     expect(formik.setFieldValue).toHaveBeenCalledWith('capacity', { min: 4, max: 4, desired: 4 });
-    expect(page.validate(values)).toEqual({});
+    expect(validateGceServerGroupCapacity(values)).toEqual({});
   });
 
   it('derives capacity mode and validation from canonical policy presence instead of stale view state', () => {
@@ -42,13 +42,11 @@ describe('GCE server group Capacity page', () => {
       viewState: { mode: 'create', useSimpleCapacity: true },
     });
     const autoscalingProps = testProps(autoscaling);
-    const autoscalingWrapper = shallow(<ServerGroupCapacity app={{} as any} formik={autoscalingProps.formik} />);
+    const autoscalingWrapper = renderPage(<ServerGroupCapacity app={{} as any} formik={autoscalingProps.formik} />);
 
-    expect(autoscalingWrapper.find('input[aria-label="Autoscaling capacity"]').prop('checked')).toBe(true);
-    expect(autoscalingWrapper.find('input[aria-label="Minimum capacity"]').exists()).toBe(true);
-    expect(
-      new ServerGroupCapacity({ app: {} as any, formik: autoscalingProps.formik } as any).validate(autoscaling),
-    ).toEqual({});
+    expect(input(autoscalingWrapper, 'input[aria-label="Autoscaling capacity"]')).toBeChecked();
+    expect(autoscalingWrapper.queryByLabelText('Minimum capacity')).toBeInTheDocument();
+    expect(validateGceServerGroupCapacity(autoscaling)).toEqual({});
 
     const fixed = command({
       capacity: { min: 3, max: 3, desired: 3 },
@@ -56,11 +54,11 @@ describe('GCE server group Capacity page', () => {
       viewState: { mode: 'create', useSimpleCapacity: false },
     });
     const fixedProps = testProps(fixed);
-    const fixedWrapper = shallow(<ServerGroupCapacity app={{} as any} formik={fixedProps.formik} />);
+    const fixedWrapper = renderPage(<ServerGroupCapacity app={{} as any} formik={fixedProps.formik} />);
 
-    expect(fixedWrapper.find('input[aria-label="Simple capacity"]').prop('checked')).toBe(true);
-    expect(fixedWrapper.find('input[aria-label="Minimum capacity"]').exists()).toBe(false);
-    expect(new ServerGroupCapacity({ app: {} as any, formik: fixedProps.formik } as any).validate(fixed)).toEqual({});
+    expect(input(fixedWrapper, 'input[aria-label="Simple capacity"]')).toBeChecked();
+    expect(fixedWrapper.container.querySelector('input[aria-label="Minimum capacity"]')).not.toBeInTheDocument();
+    expect(validateGceServerGroupCapacity(fixed)).toEqual({});
   });
 
   it('links autoscaling minimum and maximum to the policy and capacity command fields', () => {
@@ -70,16 +68,16 @@ describe('GCE server group Capacity page', () => {
       viewState: { mode: 'clone', useSimpleCapacity: false },
     });
     const { formik } = testProps(values);
-    const wrapper = shallow(<ServerGroupCapacity app={{} as any} formik={formik} />);
+    const wrapper = renderPage(<ServerGroupCapacity app={{} as any} formik={formik} />);
 
-    expect(wrapper.find('input[aria-label="Minimum capacity"]').prop('value')).toBe(2);
-    expect(wrapper.find('input[aria-label="Maximum capacity"]').prop('value')).toBe(6);
-    expect(wrapper.find('input[aria-label="Desired capacity"]').prop('value')).toBe(4);
+    expect(input(wrapper, 'input[aria-label="Minimum capacity"]').valueAsNumber).toBe(2);
+    expect(input(wrapper, 'input[aria-label="Maximum capacity"]').valueAsNumber).toBe(6);
+    expect(input(wrapper, 'input[aria-label="Desired capacity"]').valueAsNumber).toBe(4);
 
-    wrapper.find('input[aria-label="Minimum capacity"]').simulate('change', { target: { value: '3' } });
-    wrapper.find('input[aria-label="Maximum capacity"]').simulate('change', { target: { value: '8' } });
+    fireEvent.change(input(wrapper, 'input[aria-label="Minimum capacity"]'), { target: { value: '3' } });
+    fireEvent.change(input(wrapper, 'input[aria-label="Maximum capacity"]'), { target: { value: '8' } });
 
-    expect(formik.setFieldValue.calls.allArgs()).toEqual([
+    expect(formik.setFieldValue.mock.calls).toEqual([
       ['autoscalingPolicy', { minNumReplicas: 3, maxNumReplicas: 6, unknownPolicyField: 'keep' }],
       ['capacity', { min: 3, max: 6, desired: 4 }],
       ['autoscalingPolicy', { minNumReplicas: 3, maxNumReplicas: 8, unknownPolicyField: 'keep' }],
@@ -96,9 +94,9 @@ describe('GCE server group Capacity page', () => {
       viewState: { mode: 'clone', useSimpleCapacity: false, unrelated: 'keep' },
     });
     const { formik } = testProps(values);
-    const wrapper = shallow(<ServerGroupCapacity app={{} as any} formik={formik} />);
+    const wrapper = renderPage(<ServerGroupCapacity app={{} as any} formik={formik} />);
 
-    wrapper.find('input[aria-label="Simple capacity"]').simulate('change', { target: { checked: true } });
+    fireEvent.click(input(wrapper, 'input[aria-label="Simple capacity"]'));
 
     expect(values.viewState).toEqual({ mode: 'clone', useSimpleCapacity: true, unrelated: 'keep' });
     expect(values.autoscalingPolicy).toBeNull();
@@ -120,26 +118,31 @@ describe('GCE server group Capacity page', () => {
         viewState: { mode, useSimpleCapacity: false },
       });
       const { formik } = testProps(values);
-      const wrapper = shallow(<ServerGroupCapacity app={{} as any} formik={formik} />);
+      const wrapper = renderPage(<ServerGroupCapacity app={{} as any} formik={formik} />);
 
-      wrapper.find('input[aria-label="Simple capacity"]').simulate('change', { target: { checked: true } });
+      fireEvent.click(input(wrapper, 'input[aria-label="Simple capacity"]'));
 
       expect(values.overwriteAncestorAutoscalingPolicy).toBe(false);
     });
   });
 
-  it('does not overwrite ancestor autoscaling for a clone without an autoscaling policy', () => {
+  it('does not mark ancestor autoscaling for overwrite when a clone enables autoscaling without an inherited policy', () => {
     const values = command({
       autoscalingPolicy: null,
       overwriteAncestorAutoscalingPolicy: true,
       viewState: { mode: 'clone', useSimpleCapacity: true },
     });
     const { formik } = testProps(values);
-    const wrapper = shallow(<ServerGroupCapacity app={{} as any} formik={formik} />);
+    const wrapper = renderPage(<ServerGroupCapacity app={{} as any} formik={formik} />);
+
+    expect(wrapper.getByLabelText('Simple capacity')).toBeChecked();
 
-    wrapper.find('input[aria-label="Simple capacity"]').simulate('change', { target: { checked: true } });
+    fireEvent.click(wrapper.getByLabelText('Autoscaling capacity'));
+    wrapper.rerender(<ServerGroupCapacity app={{} as any} formik={formik} />);
 
     expect(values.overwriteAncestorAutoscalingPolicy).toBe(false);
+    expect(wrapper.getByLabelText('Autoscaling capacity')).toBeChecked();
+    expect(wrapper.getByLabelText('Minimum capacity')).toBeVisible();
   });
 
   it('round trips fixed capacity through autoscaling with a complete synchronized policy', () => {
@@ -151,9 +154,9 @@ describe('GCE server group Capacity page', () => {
       viewState: { mode: 'clone', useSimpleCapacity: true, unrelated: 'keep' },
     });
     const { formik } = testProps(values);
-    const wrapper = shallow(<ServerGroupCapacity app={{} as any} formik={formik} />);
+    const wrapper = renderPage(<ServerGroupCapacity app={{} as any} formik={formik} />);
 
-    wrapper.find('input[aria-label="Autoscaling capacity"]').simulate('change', { target: { checked: true } });
+    fireEvent.click(input(wrapper, 'input[aria-label="Autoscaling capacity"]'));
 
     expect(values.autoscalingPolicy).toEqual({
       minNumReplicas: 3,
@@ -167,8 +170,8 @@ describe('GCE server group Capacity page', () => {
     expect(values.source.useSourceCapacity).toBe(false);
     expect(values.viewState).toEqual({ mode: 'clone', useSimpleCapacity: false, unrelated: 'keep' });
 
-    wrapper.setProps({ formik });
-    wrapper.find('input[aria-label="Simple capacity"]').simulate('change', { target: { checked: true } });
+    wrapper.rerender(<ServerGroupCapacity app={{} as any} formik={formik} />);
+    fireEvent.click(input(wrapper, 'input[aria-label="Simple capacity"]'));
 
     expect(values.autoscalingPolicy).toBeNull();
     expect(values.capacity).toEqual({ min: 3, max: 3, desired: 3 });
@@ -177,8 +180,8 @@ describe('GCE server group Capacity page', () => {
     expect(values.source.useSourceCapacity).toBe(false);
     expect(values.viewState).toEqual({ mode: 'clone', useSimpleCapacity: true, unrelated: 'keep' });
 
-    wrapper.setProps({ formik });
-    wrapper.find('input[aria-label="Autoscaling capacity"]').simulate('change', { target: { checked: true } });
+    wrapper.rerender(<ServerGroupCapacity app={{} as any} formik={formik} />);
+    fireEvent.click(input(wrapper, 'input[aria-label="Autoscaling capacity"]'));
 
     expect(values.overwriteAncestorAutoscalingPolicy).toBe(false);
   });
@@ -189,12 +192,12 @@ describe('GCE server group Capacity page', () => {
       viewState: { mode: 'create', useSimpleCapacity: false },
     });
     const { formik } = testProps(values);
-    const wrapper = shallow(<ServerGroupCapacity app={{} as any} formik={formik} />);
+    const wrapper = renderPage(<ServerGroupCapacity app={{} as any} formik={formik} />);
 
     ['-1', '1.5', 'Infinity', 'NaN', ''].forEach((value) => {
-      wrapper.find('input[aria-label="Minimum capacity"]').simulate('change', { target: { value } });
-      wrapper.find('input[aria-label="Maximum capacity"]').simulate('change', { target: { value } });
-      wrapper.find('input[aria-label="Desired capacity"]').simulate('change', { target: { value } });
+      fireEvent.change(input(wrapper, 'input[aria-label="Minimum capacity"]'), { target: { value } });
+      fireEvent.change(input(wrapper, 'input[aria-label="Maximum capacity"]'), { target: { value } });
+      fireEvent.change(input(wrapper, 'input[aria-label="Desired capacity"]'), { target: { value } });
     });
 
     expect(formik.setFieldValue).not.toHaveBeenCalled();
@@ -210,25 +213,24 @@ describe('GCE server group Capacity page', () => {
       viewState: { mode: 'editPipeline', useSimpleCapacity: false, templatingEnabled: true },
     });
     const { formik } = testProps(values);
-    const page = new ServerGroupCapacity({ app: {} as any, formik } as any);
-    const wrapper = shallow(<ServerGroupCapacity app={{} as any} formik={formik} />);
+    const wrapper = renderPage(<ServerGroupCapacity app={{} as any} formik={formik} />);
 
-    expect(page.validate(values)).toEqual({});
-    expect(wrapper.find('input[aria-label="Minimum capacity"]').prop('type')).toBe('text');
-    expect(wrapper.find('input[aria-label="Maximum capacity"]').prop('type')).toBe('text');
-    expect(wrapper.find('input[aria-label="Desired capacity"]').prop('type')).toBe('text');
+    expect(validateGceServerGroupCapacity(values)).toEqual({});
+    expect(input(wrapper, 'input[aria-label="Minimum capacity"]')).toHaveAttribute('type', 'text');
+    expect(input(wrapper, 'input[aria-label="Maximum capacity"]')).toHaveAttribute('type', 'text');
+    expect(input(wrapper, 'input[aria-label="Desired capacity"]')).toHaveAttribute('type', 'text');
 
-    wrapper.find('input[aria-label="Minimum capacity"]').simulate('change', {
+    fireEvent.change(input(wrapper, 'input[aria-label="Minimum capacity"]'), {
       target: { value: '${ parameters.newMin }' },
     });
-    wrapper.find('input[aria-label="Maximum capacity"]').simulate('change', {
+    fireEvent.change(input(wrapper, 'input[aria-label="Maximum capacity"]'), {
       target: { value: '${ parameters.newMax }' },
     });
-    wrapper.find('input[aria-label="Desired capacity"]').simulate('change', {
+    fireEvent.change(input(wrapper, 'input[aria-label="Desired capacity"]'), {
       target: { value: '${ parameters.newDesired }' },
     });
 
-    expect(formik.setFieldValue.calls.allArgs()).toEqual([
+    expect(formik.setFieldValue.mock.calls).toEqual([
       ['autoscalingPolicy', { minNumReplicas: '${ parameters.newMin }', maxNumReplicas: '${ parameters.max }' }],
       ['capacity', { min: '${ parameters.newMin }', max: '${ parameters.max }', desired: '${ parameters.desired }' }],
       ['autoscalingPolicy', { minNumReplicas: '${ parameters.newMin }', maxNumReplicas: '${ parameters.newMax }' }],
@@ -243,7 +245,7 @@ describe('GCE server group Capacity page', () => {
     ]);
 
     expect(
-      page.validate(
+      validateGceServerGroupCapacity(
         command({
           capacity: { desired: '${ parameters.desired }' } as any,
           autoscalingPolicy: {
@@ -264,10 +266,8 @@ describe('GCE server group Capacity page', () => {
 
   it('validates integer capacities and enforces min <= desired <= max', () => {
     const { formik } = testProps();
-    const page = new ServerGroupCapacity({ app: {} as any, formik } as any);
-
     expect(
-      page.validate(
+      validateGceServerGroupCapacity(
         command({
           capacity: { desired: Number.POSITIVE_INFINITY },
           autoscalingPolicy: { minNumReplicas: -1, maxNumReplicas: 2.5 },
@@ -283,7 +283,7 @@ describe('GCE server group Capacity page', () => {
     });
 
     expect(
-      page.validate(
+      validateGceServerGroupCapacity(
         command({
           capacity: { desired: 2 },
           autoscalingPolicy: { minNumReplicas: 3, maxNumReplicas: 4 },
@@ -293,7 +293,7 @@ describe('GCE server group Capacity page', () => {
     ).toEqual({ capacity: { desired: 'Desired capacity must be at least minimum capacity.' } });
 
     expect(
-      page.validate(
+      validateGceServerGroupCapacity(
         command({
           capacity: { desired: 5 },
           autoscalingPolicy: { minNumReplicas: 1, maxNumReplicas: 4 },
@@ -306,7 +306,7 @@ describe('GCE server group Capacity page', () => {
   it('requires a zone for zonal commands and invokes zoneChanged with the selected zone', async () => {
     const values = command({ zone: 'persisted-zone' });
     const { adapter, formik, reconciled } = testProps(values);
-    const wrapper = shallow(<ServerGroupCapacity app={{} as any} formik={formik} adapter={adapter} />);
+    const wrapper = renderPage(<ServerGroupCapacity app={{} as any} formik={formik} adapter={adapter} />);
 
     expect(selectOptions(wrapper, 'Zone')).toEqual([
       ['', 'Select...'],
@@ -314,14 +314,14 @@ describe('GCE server group Capacity page', () => {
       ['known-zone-b', 'known-zone-b'],
       ['persisted-zone', 'persisted-zone (unavailable)'],
     ]);
-    expect(new ServerGroupCapacity({ app: {} as any, formik } as any).validate(command({ zone: null }))).toEqual({
+    expect(validateGceServerGroupCapacity(command({ zone: null }))).toEqual({
       zone: 'Zone required.',
     });
 
-    wrapper.find('select[aria-label="Zone"]').simulate('change', { target: { value: 'known-zone-b' } });
+    fireEvent.change(wrapper.getByLabelText('Zone'), { target: { value: 'known-zone-b' } });
     await flush();
 
-    const changedCommand = adapter.applyCommandHandler.calls.first().args[0];
+    const changedCommand = adapter.applyCommandHandler.mock.calls[0][0];
     expect(changedCommand.zone).toBe('known-zone-b');
     expect(adapter.applyCommandHandler).toHaveBeenCalledWith(changedCommand, 'zoneChanged');
     expect(handlerNames(adapter)).toEqual(['zoneChanged', 'selectZonesChanged']);
@@ -336,19 +336,19 @@ describe('GCE server group Capacity page', () => {
       distributionPolicy: { zones: ['known-zone-a', 'persisted-zone'], targetShape: 'EVEN' },
     });
     const { adapter, formik } = testProps(values);
-    const wrapper = shallow(<ServerGroupCapacity app={{} as any} formik={formik} adapter={adapter} />);
+    const wrapper = renderPage(<ServerGroupCapacity app={{} as any} formik={formik} adapter={adapter} />);
 
-    expect(wrapper.find('input[aria-label="Explicit zone distribution"]').prop('checked')).toBe(true);
-    expect(wrapper.find('input[aria-label="Preferred zone distribution"]').prop('checked')).toBe(false);
-    expect(wrapper.find('input[aria-label="Zone known-zone-a"]').prop('checked')).toBe(true);
-    expect(wrapper.find('input[aria-label="Zone persisted-zone"]').prop('checked')).toBe(true);
-    expect(wrapper.find('label[htmlFor="gce-capacity-zone-persisted-zone"]').text()).toContain('(unavailable)');
-    expect(wrapper.find('select[aria-label="Target shape"]').prop('value')).toBe('EVEN');
+    expect(wrapper.getByLabelText('Explicit zone distribution')).toBeChecked();
+    expect(wrapper.getByLabelText('Preferred zone distribution')).not.toBeChecked();
+    expect(wrapper.getByLabelText('Zone known-zone-a')).toBeChecked();
+    expect(wrapper.getByLabelText('Zone persisted-zone')).toBeChecked();
+    expect(wrapper.getByText(/persisted-zone \(unavailable\)/)).toBeInTheDocument();
+    expect(wrapper.getByLabelText('Target shape')).toHaveValue('EVEN');
 
-    wrapper.find('input[aria-label="Preferred zone distribution"]').simulate('change', { target: { checked: true } });
+    fireEvent.click(wrapper.getByLabelText('Preferred zone distribution'));
     await flush();
 
-    const changedCommand = adapter.applyCommandHandler.calls.first().args[0];
+    const changedCommand = adapter.applyCommandHandler.mock.calls[0][0];
     expect(changedCommand.selectZones).toBe(false);
     expect(changedCommand.distributionPolicy.zones).toEqual(['known-zone-a', 'persisted-zone']);
     expect(adapter.applyCommandHandler).toHaveBeenCalledWith(changedCommand, 'selectZonesChanged');
@@ -359,28 +359,28 @@ describe('GCE server group Capacity page', () => {
     const transitions = [deferredCommand(), deferredCommand(), deferredCommand(), deferredCommand()];
     const values = command();
     const { adapter, formik } = transitionProps(values, transitions);
-    const wrapper = shallow(<ServerGroupCapacity app={{} as any} formik={formik} adapter={adapter} />);
+    const wrapper = renderPage(<ServerGroupCapacity app={{} as any} formik={formik} adapter={adapter} />);
 
-    wrapper.find('input[aria-label="Regional server group"]').simulate('change', { target: { checked: true } });
+    fireEvent.click(wrapper.getByLabelText('Regional server group'));
     expect(handlerNames(adapter)).toEqual(['regionalChanged']);
 
     const afterRegional = command({ regional: true, zone: null, transition: 'regional' });
     transitions[0].resolve(update(afterRegional));
     await flush();
     expect(handlerNames(adapter)).toEqual(['regionalChanged', 'regionChanged']);
-    expect(adapter.applyCommandHandler.calls.argsFor(1)[0]).toBe(afterRegional);
+    expect(adapter.applyCommandHandler.mock.calls[1][0]).toBe(afterRegional);
 
     const afterRegion = command({ regional: true, zone: null, transition: 'region' });
     transitions[1].resolve(update(afterRegion));
     await flush();
     expect(handlerNames(adapter)).toEqual(['regionalChanged', 'regionChanged', 'zoneChanged']);
-    expect(adapter.applyCommandHandler.calls.argsFor(2)[0]).toBe(afterRegion);
+    expect(adapter.applyCommandHandler.mock.calls[2][0]).toBe(afterRegion);
 
     const afterZone = command({ regional: true, zone: null, transition: 'zone' });
     transitions[2].resolve(update(afterZone));
     await flush();
     expect(handlerNames(adapter)).toEqual(['regionalChanged', 'regionChanged', 'zoneChanged', 'selectZonesChanged']);
-    expect(adapter.applyCommandHandler.calls.argsFor(3)[0]).toBe(afterZone);
+    expect(adapter.applyCommandHandler.mock.calls[3][0]).toBe(afterZone);
     expect(formik.setValues).not.toHaveBeenCalled();
 
     const reconciled = command({ regional: true, zone: null, transition: 'selectZones' });
@@ -392,15 +392,17 @@ describe('GCE server group Capacity page', () => {
   it('serializes zonal and explicit-zone reconciliation handlers', async () => {
     const zonalTransitions = [deferredCommand(), deferredCommand()];
     const zonal = transitionProps(command(), zonalTransitions);
-    const zonalWrapper = shallow(<ServerGroupCapacity app={{} as any} formik={zonal.formik} adapter={zonal.adapter} />);
+    const zonalWrapper = renderPage(
+      <ServerGroupCapacity app={{} as any} formik={zonal.formik} adapter={zonal.adapter} />,
+    );
 
-    zonalWrapper.find('select[aria-label="Zone"]').simulate('change', { target: { value: 'known-zone-b' } });
+    fireEvent.change(zonalWrapper.getByLabelText('Zone'), { target: { value: 'known-zone-b' } });
     expect(handlerNames(zonal.adapter)).toEqual(['zoneChanged']);
     const afterZone = command({ zone: 'known-zone-b', transition: 'zone' });
     zonalTransitions[0].resolve(update(afterZone));
     await flush();
     expect(handlerNames(zonal.adapter)).toEqual(['zoneChanged', 'selectZonesChanged']);
-    expect(zonal.adapter.applyCommandHandler.calls.argsFor(1)[0]).toBe(afterZone);
+    expect(zonal.adapter.applyCommandHandler.mock.calls[1][0]).toBe(afterZone);
     const zonalReconciled = command({ zone: 'known-zone-b', transition: 'selectZones' });
     zonalTransitions[1].resolve(update(zonalReconciled));
     await flush();
@@ -411,11 +413,11 @@ describe('GCE server group Capacity page', () => {
       command({ regional: true, zone: null, selectZones: true, distributionPolicy: { zones: ['known-zone-a'] } }),
       regionalTransitions,
     );
-    const regionalWrapper = shallow(
+    const regionalWrapper = renderPage(
       <ServerGroupCapacity app={{} as any} formik={regional.formik} adapter={regional.adapter} />,
     );
 
-    regionalWrapper.find('input[aria-label="Zone known-zone-b"]').simulate('change', { target: { checked: true } });
+    fireEvent.click(regionalWrapper.getByLabelText('Zone known-zone-b'));
     expect(handlerNames(regional.adapter)).toEqual(['selectZonesChanged']);
     const afterSelectZones = command({
       regional: true,
@@ -427,7 +429,7 @@ describe('GCE server group Capacity page', () => {
     regionalTransitions[0].resolve(update(afterSelectZones));
     await flush();
     expect(handlerNames(regional.adapter)).toEqual(['selectZonesChanged', 'zoneChanged']);
-    expect(regional.adapter.applyCommandHandler.calls.argsFor(1)[0]).toBe(afterSelectZones);
+    expect(regional.adapter.applyCommandHandler.mock.calls[1][0]).toBe(afterSelectZones);
     const regionalReconciled = { ...afterSelectZones, transition: 'zone' };
     regionalTransitions[1].resolve(update(regionalReconciled));
     await flush();
@@ -441,15 +443,15 @@ describe('GCE server group Capacity page', () => {
       distributionPolicy: { zones: [], targetShape: 'EVEN' },
     });
     const { formik } = testProps(values);
-    const wrapper = shallow(<ServerGroupCapacity app={{} as any} formik={formik} />);
+    const wrapper = renderPage(<ServerGroupCapacity app={{} as any} formik={formik} />);
 
-    wrapper.find('select[aria-label="Target shape"]').simulate('change', { target: { value: 'ANY' } });
+    fireEvent.change(wrapper.getByLabelText('Target shape'), { target: { value: 'ANY' } });
 
     expect(formik.setFieldValue).toHaveBeenCalledWith('distributionPolicy', { zones: [], targetShape: 'ANY' });
-    expect(new ServerGroupCapacity({ app: {} as any, formik } as any).validate(values)).toEqual({});
-    expect(
-      new ServerGroupCapacity({ app: {} as any, formik } as any).validate({ ...values, selectZones: true }),
-    ).toEqual({ distributionPolicy: { zones: 'At least one zone required.' } });
+    expect(validateGceServerGroupCapacity(values)).toEqual({});
+    expect(validateGceServerGroupCapacity({ ...values, selectZones: true })).toEqual({
+      distributionPolicy: { zones: 'At least one zone required.' },
+    });
   });
 
   it('renders the React instance flexibility configurer and immutably persists policy changes', () => {
@@ -465,25 +467,31 @@ describe('GCE server group Capacity page', () => {
       instanceFlexibilityPolicy,
     });
     const { formik } = testProps(values);
-    const wrapper = shallow(<ServerGroupCapacity app={{} as any} formik={formik} />);
-    const configurer = wrapper.find(GceInstanceFlexibilityConfigurer);
-
-    expect(configurer.props()).toEqual(
-      jasmine.objectContaining({
-        instanceFlexibilityPolicy,
-        regional: true,
-        targetShape: 'BALANCED',
-      }),
+    const wrapper = renderPage(<ServerGroupCapacity app={{} as any} formik={formik} />);
+
+    expect(wrapper.getByRole('textbox', { name: 'Selection name' })).toHaveValue('preferred');
+    expect(wrapper.getByRole('spinbutton', { name: 'Rank (optional)' })).toHaveValue(1);
+    expect(wrapper.getByRole('textbox', { name: 'Machine type 1 for selection preferred' })).toHaveValue(
+      'n2-standard-8',
     );
+    // Regional BALANCED commands satisfy the configurer's regional and target shape requirements.
+    expect(wrapper.queryByText('Flexibility requires a regional server group.')).not.toBeInTheDocument();
+    expect(wrapper.queryByText(/Flexibility requires target shape/)).not.toBeInTheDocument();
 
-    const nextPolicy = {
+    fireEvent.change(wrapper.getByRole('textbox', { name: 'Machine type 1 for selection preferred' }), {
+      target: { value: 'e2-standard-8' },
+    });
+
+    expect(formik.setFieldValue).toHaveBeenCalledWith('instanceFlexibilityPolicy', {
       instanceSelections: {
-        fallback: { machineTypes: ['e2-standard-8'] },
+        preferred: { rank: 1, machineTypes: ['e2-standard-8'] },
       },
-    };
-    configurer.prop('setInstanceFlexibilityPolicy')(nextPolicy);
-
-    expect(formik.setFieldValue).toHaveBeenCalledWith('instanceFlexibilityPolicy', nextPolicy);
+    });
+    expect(instanceFlexibilityPolicy).toEqual({
+      instanceSelections: {
+        preferred: { rank: 1, machineTypes: ['n2-standard-8'] },
+      },
+    });
   });
 
   it('passes the Formik flexibility validation error to the configurer', () => {
@@ -501,16 +509,15 @@ describe('GCE server group Capacity page', () => {
     (formik as any).errors = {
       instanceFlexibilityPolicy: 'Instance flexibility policy is invalid.',
     };
-    const wrapper = shallow(<ServerGroupCapacity app={{} as any} formik={formik} />);
+    const wrapper = renderPage(<ServerGroupCapacity app={{} as any} formik={formik} />);
 
-    expect(wrapper.find(GceInstanceFlexibilityConfigurer).prop('validationError')).toBe(
+    expect(wrapper.getByRole('alert')).toHaveTextContent('Instance flexibility policy is invalid.');
+    expect(wrapper.getByRole('spinbutton', { name: 'Rank (optional)' })).toHaveAccessibleDescription(
       'Instance flexibility policy is invalid.',
     );
   });
 
   it('blocks invalid enabled flexibility while allowing absent and explicitly empty policies', () => {
-    const { formik } = testProps();
-    const page = new ServerGroupCapacity({ app: {} as any, formik } as any);
     const enabledPolicy = {
       instanceSelections: {
         preferred: { machineTypes: ['n2-standard-8'] },
@@ -518,7 +525,7 @@ describe('GCE server group Capacity page', () => {
     };
 
     expect(
-      page.validate(
+      validateGceServerGroupCapacity(
         command({
           regional: false,
           distributionPolicy: { zones: [], targetShape: 'BALANCED' },
@@ -527,7 +534,7 @@ describe('GCE server group Capacity page', () => {
       ).instanceFlexibilityPolicy,
     ).toBeDefined();
     expect(
-      page.validate(
+      validateGceServerGroupCapacity(
         command({
           regional: true,
           zone: null,
@@ -539,7 +546,7 @@ describe('GCE server group Capacity page', () => {
 
     ['BALANCED', 'ANY', 'ANY_SINGLE_ZONE'].forEach((targetShape) => {
       expect(
-        page.validate(
+        validateGceServerGroupCapacity(
           command({
             regional: true,
             zone: null,
@@ -550,9 +557,9 @@ describe('GCE server group Capacity page', () => {
       ).toEqual({});
     });
 
-    expect(page.validate(command({ instanceFlexibilityPolicy: undefined }))).toEqual({});
+    expect(validateGceServerGroupCapacity(command({ instanceFlexibilityPolicy: undefined }))).toEqual({});
     expect(
-      page.validate(
+      validateGceServerGroupCapacity(
         command({
           instanceFlexibilityPolicy: { instanceSelections: {} },
         }),
@@ -569,7 +576,7 @@ describe('GCE server group Capacity page', () => {
       },
     });
     const { formik } = testProps(values);
-    const wrapper = shallow(<ServerGroupCapacity app={{} as any} formik={formik} />);
+    const wrapper = renderPage(<ServerGroupCapacity app={{} as any} formik={formik} />);
 
     expect(selectOptions(wrapper, 'Target shape')).toEqual([
       ['', 'Select...'],
@@ -581,45 +588,52 @@ describe('GCE server group Capacity page', () => {
   });
 });
 
-function selectOptions(wrapper: ReturnType<typeof shallow>, label: string): string[][] {
-  return wrapper
-    .find(`select[aria-label="${label}"] option`)
-    .map((option) => [option.prop('value') as string, option.text()]);
+function selectOptions(wrapper: RenderResult, label: string): string[][] {
+  return Array.from(wrapper.getByLabelText(label).querySelectorAll('option')).map((option) => [
+    option.value,
+    option.textContent || '',
+  ]);
+}
+
+function input(wrapper: RenderResult, selector: string): HTMLInputElement {
+  const element = wrapper.container.querySelector<HTMLInputElement>(selector);
+  if (!element) {
+    throw new Error(`Missing input: ${selector}`);
+  }
+  return element;
 }
 
 function testProps(values = command()) {
   const formik = ({
     values,
-    setFieldValue: jasmine.createSpy('setFieldValue').and.callFake((field: string, value: any) => {
+    setFieldValue: vi.fn().mockImplementation((field: string, value: any) => {
       values[field] = value;
     }),
-    setValues: jasmine.createSpy('setValues'),
+    setValues: vi.fn(),
   } as unknown) as FormikProps<IGceServerGroupCommand>;
   const reconciled = command({ region: 'reconciled-region' });
   const adapter = ({
-    applyCommandHandler: jasmine
-      .createSpy('applyCommandHandler')
-      .and.resolveTo({ command: reconciled, result: { dirty: {} } }),
-  } as unknown) as jasmine.SpyObj<IGceServerGroupWizardAdapter>;
+    applyCommandHandler: vi.fn().mockResolvedValue({ command: reconciled, result: { dirty: {} } }),
+  } as unknown) as Mocked<IGceServerGroupWizardAdapter>;
   return { adapter, formik, reconciled };
 }
 
 function transitionProps(values: IGceServerGroupCommand, transitions: Array<ReturnType<typeof deferredCommand>>) {
   const formik = ({
     values,
-    setFieldValue: jasmine.createSpy('setFieldValue'),
-    setValues: jasmine.createSpy('setValues'),
+    setFieldValue: vi.fn(),
+    setValues: vi.fn(),
   } as unknown) as FormikProps<IGceServerGroupCommand>;
   const adapter = ({
-    applyCommandHandler: jasmine
-      .createSpy('applyCommandHandler')
-      .and.callFake(() => transitions[(adapter.applyCommandHandler as jasmine.Spy).calls.count() - 1].promise),
-  } as unknown) as jasmine.SpyObj<IGceServerGroupWizardAdapter>;
+    applyCommandHandler: vi
+      .fn()
+      .mockImplementation(() => transitions[(adapter.applyCommandHandler as Mock).mock.calls.length - 1].promise),
+  } as unknown) as Mocked<IGceServerGroupWizardAdapter>;
   return { adapter, formik };
 }
 
-function handlerNames(adapter: jasmine.SpyObj<IGceServerGroupWizardAdapter>): string[] {
-  return adapter.applyCommandHandler.calls.allArgs().map((args) => args[1]);
+function handlerNames(adapter: Mocked<IGceServerGroupWizardAdapter>): string[] {
+  return adapter.applyCommandHandler.mock.calls.map((args) => args[1]);
 }
 
 function update(commandValue: IGceServerGroupCommand) {
@@ -657,3 +671,8 @@ async function flush(): Promise<void> {
   await Promise.resolve();
   await Promise.resolve();
 }
+
+function renderPage(component: React.ReactElement): RenderResult {
+  const container = document.body.appendChild(document.createElement('div'));
+  return render(component, { baseElement: container, container });
+}