@spinnaker/google 2026.3.2 → 2026.4.0

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

@@ -12,6 +12,27 @@ import { GCEProviderSettings } from '../../../../gce.settings';
 const MAX_INT = 2147483647;
 const MAX_SCHEDULE_DURATION_SECONDS = 14 * 24 * 60 * 60;
 
+interface IAutoscalingPolicyValidationErrors {
+  coolDownPeriodSec?: string;
+  maxNumReplicas?: string;
+  metric?: string;
+  minNumReplicas?: string;
+  predictiveAutoscaling?: string;
+  scaleInControl?: string;
+  scalingSchedules?: string;
+}
+
+interface IAutoHealingPolicyValidationErrors {
+  healthCheck?: string;
+  healthCheckKind?: string;
+  initialDelaySec?: string;
+}
+
+interface IPoliciesValidationErrors {
+  autoHealingPolicy?: IAutoHealingPolicyValidationErrors;
+  autoscalingPolicy?: IAutoscalingPolicyValidationErrors;
+}
+
 function isIntegerInRange(value: unknown, minimum: number, maximum = MAX_INT): value is number {
   return (
     typeof value === 'number' &&
@@ -92,61 +113,8 @@ function hasValidScaleInControl(policy: IGceAutoscalingPolicy): boolean {
 }
 
 export class Policies extends GceServerGroupWizardPage {
-  public validate(values: IGceServerGroupCommand): { [key: string]: any } {
-    const errors: { [key: string]: any } = {};
-
-    if (values.autoscalingPolicy) {
-      const policy = values.autoscalingPolicy as IGceAutoscalingPolicy;
-      const policyErrors: { [key: string]: string } = {};
-      const validMinimum = isIntegerInRange(policy.minNumReplicas, 0);
-      const validMaximum = isIntegerInRange(policy.maxNumReplicas, 0);
-      if (!validMinimum) {
-        policyErrors.minNumReplicas = 'Minimum capacity must be a nonnegative integer.';
-      }
-      if (!validMaximum) {
-        policyErrors.maxNumReplicas = 'Maximum capacity must be a nonnegative integer.';
-      } else if (validMinimum && policy.maxNumReplicas < policy.minNumReplicas) {
-        policyErrors.maxNumReplicas = 'Maximum capacity must be at least the minimum capacity.';
-      }
-      if (!isIntegerInRange(policy.coolDownPeriodSec, 15)) {
-        policyErrors.coolDownPeriodSec = 'Cool-down period must be an integer of at least 15 seconds.';
-      }
-      if (!hasValidMetrics(policy)) {
-        policyErrors.metric = 'At least one complete autoscaling metric required.';
-      }
-      if (!hasValidSchedules(policy)) {
-        policyErrors.scalingSchedules = 'Every scaling schedule must be complete and within supported bounds.';
-      }
-      if (!hasValidScaleInControl(policy)) {
-        policyErrors.scaleInControl = 'Scale-in control values are outside supported bounds.';
-      }
-      const predictiveEnabled = policy.cpuUtilization?.predictiveMethod === GcePredictiveMethod.STANDARD;
-      if (predictiveEnabled && !GCEProviderSettings.feature.predictiveAutoscaling) {
-        policyErrors.predictiveAutoscaling = 'Predictive autoscaling is not enabled.';
-      }
-      if (Object.keys(policyErrors).length) {
-        errors.autoscalingPolicy = policyErrors;
-      }
-    }
-
-    if (values.enableAutoHealing) {
-      const policy = (values.autoHealingPolicy || {}) as IGceAutoHealingPolicy;
-      const policyErrors: { [key: string]: string } = {};
-      if (!policy.healthCheck?.trim()) {
-        policyErrors.healthCheck = 'Health check required.';
-      }
-      if (!policy.healthCheckKind) {
-        policyErrors.healthCheckKind = 'Health check kind required.';
-      }
-      if (!isIntegerInRange(policy.initialDelaySec, 0)) {
-        policyErrors.initialDelaySec = 'Initial delay must be an integer between 0 and 2147483647 seconds.';
-      }
-      if (Object.keys(policyErrors).length) {
-        errors.autoHealingPolicy = policyErrors;
-      }
-    }
-
-    return errors;
+  public validate(values: IGceServerGroupCommand): IPoliciesValidationErrors {
+    return validateGceServerGroupPolicies(values);
   }
 
   private setField = (field: string, value: any): void => {
@@ -285,6 +253,63 @@ export class Policies extends GceServerGroupWizardPage {
   }
 }
 
+export function validateGceServerGroupPolicies(values: IGceServerGroupCommand): IPoliciesValidationErrors {
+  const errors: IPoliciesValidationErrors = {};
+
+  if (values.autoscalingPolicy) {
+    const policy = values.autoscalingPolicy as IGceAutoscalingPolicy;
+    const policyErrors: IAutoscalingPolicyValidationErrors = {};
+    const validMinimum = isIntegerInRange(policy.minNumReplicas, 0);
+    const validMaximum = isIntegerInRange(policy.maxNumReplicas, 0);
+    if (!validMinimum) {
+      policyErrors.minNumReplicas = 'Minimum capacity must be a nonnegative integer.';
+    }
+    if (!validMaximum) {
+      policyErrors.maxNumReplicas = 'Maximum capacity must be a nonnegative integer.';
+    } else if (validMinimum && policy.maxNumReplicas < policy.minNumReplicas) {
+      policyErrors.maxNumReplicas = 'Maximum capacity must be at least the minimum capacity.';
+    }
+    if (!isIntegerInRange(policy.coolDownPeriodSec, 15)) {
+      policyErrors.coolDownPeriodSec = 'Cool-down period must be an integer of at least 15 seconds.';
+    }
+    if (!hasValidMetrics(policy)) {
+      policyErrors.metric = 'At least one complete autoscaling metric required.';
+    }
+    if (!hasValidSchedules(policy)) {
+      policyErrors.scalingSchedules = 'Every scaling schedule must be complete and within supported bounds.';
+    }
+    if (!hasValidScaleInControl(policy)) {
+      policyErrors.scaleInControl = 'Scale-in control values are outside supported bounds.';
+    }
+    const predictiveEnabled = policy.cpuUtilization?.predictiveMethod === GcePredictiveMethod.STANDARD;
+    if (predictiveEnabled && !GCEProviderSettings.feature.predictiveAutoscaling) {
+      policyErrors.predictiveAutoscaling = 'Predictive autoscaling is not enabled.';
+    }
+    if (Object.keys(policyErrors).length) {
+      errors.autoscalingPolicy = policyErrors;
+    }
+  }
+
+  if (values.enableAutoHealing) {
+    const policy = (values.autoHealingPolicy || {}) as IGceAutoHealingPolicy;
+    const policyErrors: IAutoHealingPolicyValidationErrors = {};
+    if (!policy.healthCheck?.trim()) {
+      policyErrors.healthCheck = 'Health check required.';
+    }
+    if (!policy.healthCheckKind) {
+      policyErrors.healthCheckKind = 'Health check kind required.';
+    }
+    if (!isIntegerInRange(policy.initialDelaySec, 0)) {
+      policyErrors.initialDelaySec = 'Initial delay must be an integer between 0 and 2147483647 seconds.';
+    }
+    if (Object.keys(policyErrors).length) {
+      errors.autoHealingPolicy = policyErrors;
+    }
+  }
+
+  return errors;
+}
+
 function coherentDesiredCapacity(desired: any, min: any, max: any): any {
   if (typeof desired === 'number' && typeof min === 'number' && typeof max === 'number') {
     return Math.min(max, Math.max(min, desired));

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

@@ -1,30 +1,67 @@
+import type { Mock, Mocked } from 'vitest';
 import type { FormikProps } from 'formik';
 import React from 'react';
-import { shallow } from 'enzyme';
-
-import { DeploymentStrategySelector, TaskReason } from '@spinnaker/core';
+import { fireEvent, render } from '@testing-library/react';
+import type { RenderResult } from '@testing-library/react';
 
 import { ServerGroupBasicSettings } from './ServerGroupBasicSettings';
 import { GceImageReader } from '../../../../image';
 import type { IGceServerGroupCommand, IGceServerGroupWizardAdapter } from '../GceServerGroupWizard.types';
+import { validateGceServerGroupBasicSettings } from './ServerGroupBasicSettings';
+
+vi.mock('@spinnaker/core', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@spinnaker/core')>();
+  const MockTaskReason = ({ onChange, reason }: any) => (
+    <input
+      aria-label="Task reason"
+      data-component="MockTaskReason"
+      onChange={(event) => onChange(event.target.value)}
+      value={reason || ''}
+    />
+  );
+  const MockDeploymentStrategySelector = ({ command, onFieldChange, onStrategyChange }: any) => (
+    <div data-component="MockDeploymentStrategySelector">
+      <output aria-label="Selected strategy">{command.strategy}</output>
+      <button
+        onClick={() =>
+          onStrategyChange(
+            { ...command, strategy: 'redblack', maxRemainingAsgs: 2, scaleDown: false },
+            { key: 'redblack', label: 'Red/Black' },
+          )
+        }
+        type="button"
+      >
+        Select red black
+      </button>
+      <button onClick={() => onFieldChange('maxRemainingAsgs', 3)} type="button">
+        Update strategy field
+      </button>
+    </div>
+  );
+  return {
+    ...actual,
+    DeploymentStrategySelector: MockDeploymentStrategySelector,
+    TaskReason: MockTaskReason,
+  };
+});
 
 describe('ServerGroupBasicSettings', () => {
   it('renders accessible location fields and preserves persisted unavailable references', () => {
     const { formik } = testProps();
-    const wrapper = shallow(<ServerGroupBasicSettings app={{ name: 'app' } as any} formik={formik} />);
+    const wrapper = renderPage(<ServerGroupBasicSettings app={{ name: 'app' } as any} formik={formik} />);
 
     expect(selectOptions(wrapper, 'Account')).toEqual([
       ['', 'Select...'],
       ['known-account', 'known-account'],
       ['persisted-account', 'persisted-account (unavailable)'],
     ]);
-    expect(selectOptions(wrapper, 'Region')).toContain(['persisted-region', 'persisted-region (unavailable)']);
-    expect(selectOptions(wrapper, 'Zone')).toContain(['persisted-zone', 'persisted-zone (unavailable)']);
-    expect(selectOptions(wrapper, 'Network')).toContain(['persisted-network', 'persisted-network (unavailable)']);
-    expect(selectOptions(wrapper, 'Subnet')).toContain(['persisted-subnet', 'persisted-subnet (unavailable)']);
-    expect(wrapper.find('[aria-label="Location mode"]').prop('value')).toBe('zonal');
-    expect(wrapper.find('input[aria-label="Stack"]').prop('value')).toBe('main');
-    expect(wrapper.find('input[aria-label="Detail"]').prop('value')).toBe('detail');
+    expect(selectOptions(wrapper, 'Region')).toContainEqual(['persisted-region', 'persisted-region (unavailable)']);
+    expect(selectOptions(wrapper, 'Zone')).toContainEqual(['persisted-zone', 'persisted-zone (unavailable)']);
+    expect(selectOptions(wrapper, 'Network')).toContainEqual(['persisted-network', 'persisted-network (unavailable)']);
+    expect(selectOptions(wrapper, 'Subnet')).toContainEqual(['persisted-subnet', 'persisted-subnet (unavailable)']);
+    expect(wrapper.getByLabelText('Location mode')).toHaveValue('zonal');
+    expect(wrapper.getByLabelText('Stack')).toHaveValue('main');
+    expect(wrapper.getByLabelText('Detail')).toHaveValue('detail');
     expect(formik.setValues).not.toHaveBeenCalled();
     expect(formik.setFieldValue).not.toHaveBeenCalled();
   });
@@ -44,14 +81,14 @@ describe('ServerGroupBasicSettings', () => {
         subnet: '',
       });
       const { adapter, formik } = testProps(command(), reconciled);
-      const wrapper = shallow(
+      const wrapper = renderPage(
         <ServerGroupBasicSettings app={{ name: 'app' } as any} formik={formik} adapter={adapter} />,
       );
 
-      wrapper.find(`[aria-label="${label}"]`).simulate('change', { target: { value: selected } });
+      fireEvent.change(wrapper.getByLabelText(label), { target: { value: selected } });
       await flush();
 
-      const changedCommand = adapter.applyCommandHandler.calls.mostRecent().args[0];
+      const changedCommand = adapter.applyCommandHandler.mock.lastCall[0];
       expect(changedCommand[field]).toBe(field === 'regional' ? true : selected);
       expect(adapter.applyCommandHandler).toHaveBeenCalledWith(changedCommand, handler);
       expect(formik.setValues).toHaveBeenCalledWith(reconciled);
@@ -60,7 +97,7 @@ describe('ServerGroupBasicSettings', () => {
 
   it('reloads account-scoped images in addition to reconciling account-dependent fields', async () => {
     const images = [{ imageName: 'new-account-image' }];
-    spyOn(GceImageReader, 'findImages').and.resolveTo(images);
+    vi.spyOn(GceImageReader, 'findImages').mockResolvedValue(images);
     const values = command({
       backingData: {
         ...command().backingData,
@@ -68,14 +105,14 @@ describe('ServerGroupBasicSettings', () => {
       },
     });
     const { adapter, formik } = testProps(values);
-    adapter.applyCommandHandler.and.callFake((working: IGceServerGroupCommand) =>
+    adapter.applyCommandHandler.mockImplementation((working: IGceServerGroupCommand) =>
       Promise.resolve({ command: { ...working, region: null }, result: { dirty: {} } }),
     );
-    const wrapper = shallow(
+    const wrapper = renderPage(
       <ServerGroupBasicSettings app={{ name: 'app' } as any} formik={formik} adapter={adapter} />,
     );
 
-    wrapper.find('[aria-label="Account"]').simulate('change', { target: { value: 'known-account' } });
+    fireEvent.change(wrapper.getByLabelText('Account'), { target: { value: 'known-account' } });
     await flush();
 
     expect(GceImageReader.findImages).toHaveBeenCalledWith({
@@ -84,10 +121,10 @@ describe('ServerGroupBasicSettings', () => {
       q: '*',
     });
     expect(adapter.applyCommandHandler).toHaveBeenCalledWith(
-      jasmine.objectContaining({ credentials: 'known-account' }),
+      expect.objectContaining({ credentials: 'known-account' }),
       'credentialsChanged',
     );
-    expect(formik.setValues.calls.mostRecent().args[0].backingData.allImages).toEqual(images);
+    expect(formik.setValues.mock.lastCall[0].backingData.allImages).toEqual(images);
   });
 
   ([
@@ -105,7 +142,7 @@ describe('ServerGroupBasicSettings', () => {
     },
   ] as const).forEach(({ description, expectedImage, image, images }) => {
     it(description, async () => {
-      spyOn(GceImageReader, 'findImages').and.resolveTo(images as any);
+      vi.spyOn(GceImageReader, 'findImages').mockResolvedValue(images as any);
       const values = command({
         image,
         backingData: {
@@ -115,16 +152,14 @@ describe('ServerGroupBasicSettings', () => {
       });
       const formik = publishingFormik(values);
       const adapter = imageValidatingAdapter();
-      const wrapper = shallow(
+      const wrapper = renderPage(
         <ServerGroupBasicSettings app={{ name: 'app' } as any} formik={formik} adapter={adapter} />,
       );
 
-      const request = (wrapper.find('[aria-label="Account"]').prop('onChange') as any)({
-        target: { value: 'known-account' },
-      });
-      await request;
+      fireEvent.change(wrapper.getByLabelText('Account'), { target: { value: 'known-account' } });
+      await flush();
 
-      expect(adapter.applyCommandHandler.calls.mostRecent().args[0].backingData.allImages).toEqual(images);
+      expect(adapter.applyCommandHandler.mock.lastCall[0].backingData.allImages).toEqual(images);
       expect(formik.values.image).toBe(expectedImage);
     });
   });
@@ -132,7 +167,7 @@ describe('ServerGroupBasicSettings', () => {
   it('keeps the latest account images and user edits when account reloads finish out of order', async () => {
     const firstImages = deferred<Array<{ imageName: string }>>();
     const secondImages = deferred<Array<{ imageName: string }>>();
-    spyOn(GceImageReader, 'findImages').and.callFake(({ account }) =>
+    vi.spyOn(GceImageReader, 'findImages').mockImplementation(({ account }) =>
       account === 'first-account' ? firstImages.promise : secondImages.promise,
     );
     const values = command({
@@ -144,24 +179,22 @@ describe('ServerGroupBasicSettings', () => {
     });
     const formik = publishingFormik(values);
     const adapter = ({
-      applyCommandHandler: jasmine
-        .createSpy('applyCommandHandler')
-        .and.callFake((working: IGceServerGroupCommand) =>
+      applyCommandHandler: vi
+        .fn()
+        .mockImplementation((working: IGceServerGroupCommand) =>
           Promise.resolve({ command: working, result: { dirty: {} } }),
         ),
-    } as unknown) as jasmine.SpyObj<IGceServerGroupWizardAdapter>;
-    const wrapper = shallow(
+    } as unknown) as Mocked<IGceServerGroupWizardAdapter>;
+    const wrapper = renderPage(
       <ServerGroupBasicSettings app={{ name: 'app' } as any} formik={formik} adapter={adapter} />,
     );
-    const changeAccount = wrapper.find('[aria-label="Account"]').prop('onChange') as any;
-
-    const firstRequest = changeAccount({ target: { value: 'first-account' } });
-    const secondRequest = changeAccount({ target: { value: 'second-account' } });
+    fireEvent.change(wrapper.getByLabelText('Account'), { target: { value: 'first-account' } });
+    fireEvent.change(wrapper.getByLabelText('Account'), { target: { value: 'second-account' } });
     secondImages.resolve([{ imageName: 'second-account-image' }]);
-    await secondRequest;
+    await flush();
     formik.values = { ...formik.values, freeFormDetails: 'edited-while-loading' };
     firstImages.resolve([{ imageName: 'first-account-image' }]);
-    await firstRequest;
+    await flush();
 
     expect(formik.values.credentials).toBe('second-account');
     expect(formik.values.backingData.allImages).toEqual([{ imageName: 'second-account-image' }]);
@@ -170,15 +203,15 @@ describe('ServerGroupBasicSettings', () => {
 
   it('updates subnet, stack, and detail without invoking a parent handler', () => {
     const { adapter, formik } = testProps();
-    const wrapper = shallow(
+    const wrapper = renderPage(
       <ServerGroupBasicSettings app={{ name: 'app' } as any} formik={formik} adapter={adapter} />,
     );
 
-    wrapper.find('[aria-label="Subnet"]').simulate('change', { target: { value: 'known-subnet' } });
-    wrapper.find('input[aria-label="Stack"]').simulate('change', { target: { value: 'new-stack' } });
-    wrapper.find('input[aria-label="Detail"]').simulate('change', { target: { value: 'new-detail' } });
+    fireEvent.change(wrapper.getByLabelText('Subnet'), { target: { value: 'known-subnet' } });
+    fireEvent.change(wrapper.getByLabelText('Stack'), { target: { value: 'new-stack' } });
+    fireEvent.change(wrapper.getByLabelText('Detail'), { target: { value: 'new-detail' } });
 
-    expect(formik.setFieldValue.calls.allArgs()).toEqual([
+    expect(formik.setFieldValue.mock.calls).toEqual([
       ['subnet', 'known-subnet'],
       ['stack', 'new-stack'],
       ['freeFormDetails', 'new-detail'],
@@ -189,20 +222,18 @@ describe('ServerGroupBasicSettings', () => {
   (['create', 'clone'] as const).forEach((mode) => {
     it(`binds the optional task reason to the command in ${mode} mode`, () => {
       const { formik } = testProps(command({ reason: 'existing reason', viewState: { mode } }));
-      const wrapper = shallow(<ServerGroupBasicSettings app={{ name: 'app' } as any} formik={formik} />);
-      const taskReason = wrapper.find(TaskReason);
-
-      expect(taskReason.prop('reason')).toBe('existing reason');
-      taskReason.prop('onChange')('updated reason');
+      const wrapper = renderPage(<ServerGroupBasicSettings app={{ name: 'app' } as any} formik={formik} />);
+      expect(wrapper.getByLabelText('Task reason')).toHaveValue('existing reason');
+      fireEvent.change(wrapper.getByLabelText('Task reason'), { target: { value: 'updated reason' } });
       expect(formik.setFieldValue).toHaveBeenCalledWith('reason', 'updated reason');
     });
   });
 
   it('hides the zonal field in regional mode', () => {
     const { formik } = testProps(command({ regional: true, zone: null }));
-    const wrapper = shallow(<ServerGroupBasicSettings app={{ name: 'app' } as any} formik={formik} />);
+    const wrapper = renderPage(<ServerGroupBasicSettings app={{ name: 'app' } as any} formik={formik} />);
 
-    expect(wrapper.find('[aria-label="Zone"]').exists()).toBe(false);
+    expect(wrapper.container.querySelector('[aria-label="Zone"]')).not.toBeInTheDocument();
   });
 
   ([
@@ -216,33 +247,32 @@ describe('ServerGroupBasicSettings', () => {
         viewState: { mode, disableStrategySelection: false },
       });
       const { formik } = testProps(values);
-      const wrapper = shallow(<ServerGroupBasicSettings app={{ name: 'app' } as any} formik={formik} />);
-      const traffic = wrapper.find('[aria-label="Send client requests to new instances"]');
+      const wrapper = renderPage(<ServerGroupBasicSettings app={{ name: 'app' } as any} formik={formik} />);
+      const traffic = wrapper.getByLabelText('Send client requests to new instances');
 
-      expect(traffic.prop('checked')).toBe(enableTraffic);
-      expect(wrapper.find('[aria-label="Deployment strategy"]').prop('role')).toBe('group');
-      expect(wrapper.find(DeploymentStrategySelector).prop('command')).toBe(values as any);
+      expect(traffic).toHaveProperty('checked', enableTraffic);
+      expect(wrapper.getByRole('group', { name: 'Deployment strategy' })).toBeInTheDocument();
+      expect(wrapper.getByLabelText('Selected strategy')).toHaveTextContent('custom');
 
-      traffic.simulate('change', { target: { checked: !enableTraffic } });
+      fireEvent.click(traffic);
       expect(formik.setFieldValue).toHaveBeenCalledWith('enableTraffic', !enableTraffic);
     });
   });
 
   it('forwards strategy commands and strategy-specific fields through Formik and the command callback', () => {
-    const onStrategyChange = jasmine.createSpy('onStrategyChange');
+    const onStrategyChange = vi.fn();
     const values = command({
       onStrategyChange,
       strategy: '',
       viewState: { mode: 'editPipeline', disableStrategySelection: false },
     });
     const { formik } = testProps(values);
-    const wrapper = shallow(<ServerGroupBasicSettings app={{ name: 'app' } as any} formik={formik} />);
-    const selector = wrapper.find(DeploymentStrategySelector);
+    const wrapper = renderPage(<ServerGroupBasicSettings app={{ name: 'app' } as any} formik={formik} />);
     const strategy = { key: 'redblack', label: 'Red/Black' } as any;
     const updatedCommand = { ...values, strategy: 'redblack', maxRemainingAsgs: 2, scaleDown: false };
 
-    selector.prop('onStrategyChange')(updatedCommand as any, strategy);
-    selector.prop('onFieldChange')('maxRemainingAsgs', 3);
+    fireEvent.click(wrapper.getByRole('button', { name: 'Select red black' }));
+    fireEvent.click(wrapper.getByRole('button', { name: 'Update strategy field' }));
 
     expect(onStrategyChange).toHaveBeenCalledWith(updatedCommand, strategy);
     expect(formik.setValues).toHaveBeenCalledWith(updatedCommand);
@@ -257,10 +287,9 @@ describe('ServerGroupBasicSettings', () => {
       viewState: { mode: 'create', disableStrategySelection: true },
     });
     const { formik } = testProps(values);
-    const wrapper = shallow(<ServerGroupBasicSettings app={{ name: 'app' } as any} formik={formik} />);
+    const wrapper = renderPage(<ServerGroupBasicSettings app={{ name: 'app' } as any} formik={formik} />);
 
-    expect(wrapper.find(DeploymentStrategySelector).exists()).toBe(false);
-    expect(wrapper.find('[aria-label="Deployment strategy"]').exists()).toBe(false);
+    expect(wrapper.container.querySelector('[aria-label="Deployment strategy"]')).not.toBeInTheDocument();
     expect(values.strategy).toBe('custom');
     expect(values.strategyApplication).toBe('strategy-app');
     expect(values.strategyPipeline).toBe('strategy-pipeline');
@@ -270,10 +299,8 @@ describe('ServerGroupBasicSettings', () => {
 
   it('validates required fields and naming rules owned by the page', () => {
     const { formik } = testProps();
-    const page = new ServerGroupBasicSettings({ app: { name: 'app' } as any, formik } as any);
-
     expect(
-      page.validate(
+      validateGceServerGroupBasicSettings(
         command({ credentials: '', region: '', zone: '', stack: 'invalid stack', freeFormDetails: 'bad_detail' }),
       ),
     ).toEqual({
@@ -294,7 +321,7 @@ describe('ServerGroupBasicSettings', () => {
       freeFormDetails: 'bad_detail',
     });
     const { formik } = testProps(values);
-    const wrapper = shallow(<ServerGroupBasicSettings app={{ name: 'app' } as any} formik={formik} />);
+    const wrapper = renderPage(<ServerGroupBasicSettings app={{ name: 'app' } as any} formik={formik} />);
 
     [
       ['Account', 'credentials', 'Account required.'],
@@ -303,14 +330,14 @@ describe('ServerGroupBasicSettings', () => {
       ['Stack', 'stack', 'Stack can only contain letters and numbers.'],
       ['Detail', 'freeFormDetails', 'Detail can only contain letters, numbers, and dashes.'],
     ].forEach(([label, field, message]) => {
-      const control = wrapper.find(`[aria-label="${label}"]`);
+      const control = wrapper.getByLabelText(label);
       const errorId = `gce-server-group-${field}-error`;
-      const alert = wrapper.find(`[id="${errorId}"][role="alert"]`);
+      const alert = wrapper.container.querySelector(`[id="${errorId}"][role="alert"]`);
 
-      expect(control.prop('aria-invalid')).withContext(label).toBe(true);
-      expect(control.prop('aria-describedby')).withContext(label).toBe(errorId);
-      expect(alert.length).withContext(label).toBe(1);
-      expect(alert.text()).withContext(label).toBe(message);
+      expect(control, label).toHaveAttribute('aria-invalid', 'true');
+      expect(control, label).toHaveAttribute('aria-describedby', errorId);
+      expect(alert, label).toBeInTheDocument();
+      expect(alert, label).toHaveTextContent(message);
     });
   });
 
@@ -321,47 +348,44 @@ describe('ServerGroupBasicSettings', () => {
       viewState: { mode: 'editPipeline', templatingEnabled: true },
     });
     const { formik } = testProps(values);
-    const page = new ServerGroupBasicSettings({ app: { name: 'app' } as any, formik } as any);
-
-    expect(page.validate(values)).toEqual({});
+    expect(validateGceServerGroupBasicSettings(values)).toEqual({});
   });
 });
 
-function selectOptions(wrapper: ReturnType<typeof shallow>, label: string): string[][] {
-  return wrapper
-    .find(`[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 testProps(values = command(), adapterResult = values) {
   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.resolveTo({ command: adapterResult, result: { dirty: {} } }),
-  } as unknown) as jasmine.SpyObj<IGceServerGroupWizardAdapter>;
+    applyCommandHandler: vi.fn().mockResolvedValue({ command: adapterResult, result: { dirty: {} } }),
+  } as unknown) as Mocked<IGceServerGroupWizardAdapter>;
   return { adapter, formik };
 }
 
 function publishingFormik(values = command()): FormikProps<IGceServerGroupCommand> {
   const formik = ({
     values,
-    setFieldValue: jasmine.createSpy('setFieldValue'),
-    setValues: jasmine.createSpy('setValues'),
+    setFieldValue: vi.fn(),
+    setValues: vi.fn(),
   } as unknown) as FormikProps<IGceServerGroupCommand>;
-  (formik.setValues as jasmine.Spy).and.callFake((nextValues: IGceServerGroupCommand) => {
+  (formik.setValues as Mock).mockImplementation((nextValues: IGceServerGroupCommand) => {
     formik.values = nextValues;
   });
   return formik;
 }
 
-function imageValidatingAdapter(): jasmine.SpyObj<IGceServerGroupWizardAdapter> {
+function imageValidatingAdapter(): Mocked<IGceServerGroupWizardAdapter> {
   return ({
-    applyCommandHandler: jasmine.createSpy('applyCommandHandler').and.callFake((working: IGceServerGroupCommand) => {
+    applyCommandHandler: vi.fn().mockImplementation((working: IGceServerGroupCommand) => {
       const imageAvailable = (working.backingData.allImages || []).some(
         ({ imageName }: { imageName: string }) => imageName === working.image,
       );
@@ -370,7 +394,7 @@ function imageValidatingAdapter(): jasmine.SpyObj<IGceServerGroupWizardAdapter>
         result: { dirty: {} },
       });
     }),
-  } as unknown) as jasmine.SpyObj<IGceServerGroupWizardAdapter>;
+  } as unknown) as Mocked<IGceServerGroupWizardAdapter>;
 }
 
 function command(overrides: Partial<IGceServerGroupCommand> = {}): IGceServerGroupCommand {
@@ -416,3 +440,8 @@ function deferred<T>() {
   });
   return { promise, resolve };
 }
+
+function renderPage(component: React.ReactElement): RenderResult {
+  const container = document.body.appendChild(document.createElement('div'));
+  return render(component, { baseElement: container, container });
+}

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

@@ -17,26 +17,32 @@ interface ISelectOption {
   value: string;
 }
 
+export function validateGceServerGroupBasicSettings(
+  values: IGceServerGroupCommand,
+): IGceServerGroupCommandValidationErrors {
+  const sharedErrors = validateGceServerGroupCommand(values);
+  const errors: IGceServerGroupCommandValidationErrors = {};
+  if (sharedErrors.credentials) errors.credentials = sharedErrors.credentials;
+  if (sharedErrors.region) errors.region = sharedErrors.region;
+  if (sharedErrors.zone) errors.zone = sharedErrors.zone;
+  if (sharedErrors.stack) errors.stack = sharedErrors.stack;
+  if (sharedErrors.freeFormDetails) errors.freeFormDetails = sharedErrors.freeFormDetails;
+  const stackPattern = values.viewState.templatingEnabled ? /^([a-zA-Z0-9]*(\${.+})*)*$/ : /^[a-zA-Z0-9]*$/;
+  const detailPattern = values.viewState.templatingEnabled ? /^([a-zA-Z0-9-]*(\${.+})*)*$/ : /^[a-zA-Z0-9-]*$/;
+
+  if (values.stack && !stackPattern.test(values.stack)) {
+    errors.stack = 'Stack can only contain letters and numbers.';
+  }
+  if (values.freeFormDetails && !detailPattern.test(values.freeFormDetails)) {
+    errors.freeFormDetails = 'Detail can only contain letters, numbers, and dashes.';
+  }
+
+  return errors;
+}
+
 export class ServerGroupBasicSettings extends GceServerGroupWizardPage {
   public validate(values: IGceServerGroupCommand): IGceServerGroupCommandValidationErrors {
-    const sharedErrors = validateGceServerGroupCommand(values);
-    const errors: IGceServerGroupCommandValidationErrors = {};
-    if (sharedErrors.credentials) errors.credentials = sharedErrors.credentials;
-    if (sharedErrors.region) errors.region = sharedErrors.region;
-    if (sharedErrors.zone) errors.zone = sharedErrors.zone;
-    if (sharedErrors.stack) errors.stack = sharedErrors.stack;
-    if (sharedErrors.freeFormDetails) errors.freeFormDetails = sharedErrors.freeFormDetails;
-    const stackPattern = values.viewState.templatingEnabled ? /^([a-zA-Z0-9]*(\${.+})*)*$/ : /^[a-zA-Z0-9]*$/;
-    const detailPattern = values.viewState.templatingEnabled ? /^([a-zA-Z0-9-]*(\${.+})*)*$/ : /^[a-zA-Z0-9-]*$/;
-
-    if (values.stack && !stackPattern.test(values.stack)) {
-      errors.stack = 'Stack can only contain letters and numbers.';
-    }
-    if (values.freeFormDetails && !detailPattern.test(values.freeFormDetails)) {
-      errors.freeFormDetails = 'Detail can only contain letters, numbers, and dashes.';
-    }
-
-    return errors;
+    return validateGceServerGroupBasicSettings(values);
   }
 
   private parentChanged = (