@spinnaker/google 2026.3.1 → 2026.4.0

package/src/serverGroup/configure/wizard/customInstance/GceCustomInstanceBuilder.spec.tsx

@@ -1,16 +1,39 @@
-import { mount as enzymeMount } from 'enzyme';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import React from 'react';
 
 import { DeckRuntimeContext } from '@spinnaker/core';
-import { CustomInstanceConfigurer } from './CustomInstanceConfigurer';
 import { GceCustomInstanceBuilder } from './GceCustomInstanceBuilder';
 
+vi.mock('./CustomInstanceConfigurer', () => ({
+  CustomInstanceConfigurer: (props: any) => (
+    <div
+      data-testid="custom-instance-configurer"
+      data-extended={String(props.selectedExtendedMemory)}
+      data-family={props.selectedInstanceFamily}
+      data-memory={String(props.selectedMemory)}
+      data-vcpu={String(props.selectedVCpuCount)}
+    >
+      <span>{`families:${props.instanceFamilyList.join(',')}`}</span>
+      <span>{`cpus:${props.vCpuList.join(',')}`}</span>
+      <span>{`memory:${props.memoryList.join(',')}`}</span>
+      <button
+        onClick={() => props.onChange({ instanceFamily: 'N2', vCpuCount: 8, memory: 32, extendedMemory: false })}
+        type="button"
+      >
+        Select N2 custom type
+      </button>
+      <button
+        onClick={() => props.onChange({ instanceFamily: 'N1', vCpuCount: null, memory: 4, extendedMemory: false })}
+        type="button"
+      >
+        Select memory before cores
+      </button>
+    </div>
+  ),
+}));
+
 describe('GceCustomInstanceBuilder', () => {
   let runtimeServices: any;
-  const RuntimeWrapper = ({ children }: React.PropsWithChildren<{}>) => (
-    <DeckRuntimeContext.Provider value={{ services: runtimeServices } as any}>{children}</DeckRuntimeContext.Provider>
-  );
-  const mount = (component: React.ReactElement) => enzymeMount(component, { wrappingComponent: RuntimeWrapper });
 
   beforeEach(() => {
     runtimeServices = {};
@@ -20,49 +43,43 @@ describe('GceCustomInstanceBuilder', () => {
     runtimeServices.instanceTypeService = instanceTypeService();
     const command = commandWithCustomInstance('n2-custom-4-16384-ext');
 
-    const component = mount(<GceCustomInstanceBuilder command={command as any} onTypeChanged={jasmine.createSpy()} />);
-    const configurer = component.find(CustomInstanceConfigurer);
+    renderBuilder(command, vi.fn());
+    const configurer = screen.getByTestId('custom-instance-configurer');
 
-    expect(configurer.prop('selectedInstanceFamily')).toBe('N2');
-    expect(configurer.prop('selectedVCpuCount')).toBe(4);
-    expect(configurer.prop('selectedMemory')).toBe(16);
-    expect(configurer.prop('selectedExtendedMemory')).toBe(true);
-    expect(configurer.prop('instanceFamilyList')).toContain('N2D');
-    expect(configurer.prop('vCpuList')).toContain(4);
-    expect(configurer.prop('memoryList')).toContain(16);
+    expect(configurer).toHaveAttribute('data-family', 'N2');
+    expect(configurer).toHaveAttribute('data-vcpu', '4');
+    expect(configurer).toHaveAttribute('data-memory', '16');
+    expect(configurer).toHaveAttribute('data-extended', 'true');
+    expect(screen.getByText(/families:.*N2D/)).toBeInTheDocument();
+    expect(screen.getByText(/cpus:.*4/)).toBeInTheDocument();
+    expect(screen.getByText(/memory:.*16/)).toBeInTheDocument();
   });
 
   it('updates command.instanceType, notifies, and loads details when custom choices change', async () => {
     const instanceTypeDetails = { name: 'n2-custom-8-32768' };
     runtimeServices.instanceTypeService = instanceTypeService(instanceTypeDetails);
-    const onTypeChanged = jasmine.createSpy('onTypeChanged');
+    const onTypeChanged = vi.fn();
     const command = commandWithCustomInstance('n2-custom-4-16384');
+    renderBuilder(command, onTypeChanged);
 
-    const component = mount(<GceCustomInstanceBuilder command={command as any} onTypeChanged={onTypeChanged} />);
-    component.find(CustomInstanceConfigurer).prop('onChange')({
-      instanceFamily: 'N2',
-      vCpuCount: 8,
-      memory: 32,
-      extendedMemory: false,
-    });
-    await settle(component);
+    fireEvent.click(screen.getByRole('button', { name: 'Select N2 custom type' }));
 
     expect(command.instanceType).toBe('n2-custom-8-32768');
     expect(command.customInstanceChanged).toHaveBeenCalledWith(command);
     expect(onTypeChanged).toHaveBeenCalledWith('n2-custom-8-32768');
-    expect(command.viewState.instanceTypeDetails).toBe(instanceTypeDetails as any);
+    await waitFor(() => expect(command.viewState.instanceTypeDetails).toBe(instanceTypeDetails));
   });
 
   it('initializes missing custom values from valid lists', () => {
     runtimeServices.instanceTypeService = instanceTypeService();
     const command = commandWithCustomInstance(null);
 
-    const component = mount(<GceCustomInstanceBuilder command={command as any} onTypeChanged={jasmine.createSpy()} />);
-    const configurer = component.find(CustomInstanceConfigurer);
+    renderBuilder(command, vi.fn());
+    const configurer = screen.getByTestId('custom-instance-configurer');
 
-    expect(configurer.prop('selectedInstanceFamily')).toBe('N1');
-    expect(configurer.prop('selectedVCpuCount')).toBe(1);
-    expect(configurer.prop('selectedMemory')).toBe(1);
+    expect(configurer).toHaveAttribute('data-family', 'N1');
+    expect(configurer).toHaveAttribute('data-vcpu', '1');
+    expect(configurer).toHaveAttribute('data-memory', '1');
     expect(command.viewState.customInstance).toEqual({
       extendedMemory: false,
       instanceFamily: 'N1',
@@ -71,23 +88,28 @@ describe('GceCustomInstanceBuilder', () => {
     });
   });
 
-  it('keeps valid defaults when memory changes before cores', async () => {
+  it('keeps valid defaults when memory changes before cores', () => {
     runtimeServices.instanceTypeService = instanceTypeService();
-    const onTypeChanged = jasmine.createSpy('onTypeChanged');
+    const onTypeChanged = vi.fn();
     const command = commandWithCustomInstance(null);
+    renderBuilder(command, onTypeChanged);
 
-    const component = mount(<GceCustomInstanceBuilder command={command as any} onTypeChanged={onTypeChanged} />);
-    component.find(CustomInstanceConfigurer).prop('onChange')({
-      instanceFamily: 'N1',
-      vCpuCount: null,
-      memory: 4,
-      extendedMemory: false,
-    } as any);
-    await settle(component);
+    fireEvent.click(screen.getByRole('button', { name: 'Select memory before cores' }));
 
     expect(command.instanceType).toBe('custom-1-4096');
     expect(onTypeChanged).toHaveBeenCalledWith('custom-1-4096');
   });
+
+  function renderBuilder(
+    command: ReturnType<typeof commandWithCustomInstance>,
+    onTypeChanged: ReturnType<typeof vi.fn>,
+  ) {
+    return render(
+      <DeckRuntimeContext.Provider value={{ services: runtimeServices } as any}>
+        <GceCustomInstanceBuilder command={command as any} onTypeChanged={onTypeChanged} />
+      </DeckRuntimeContext.Provider>,
+    );
+  }
 });
 
 function commandWithCustomInstance(instanceType: string | null) {
@@ -96,7 +118,7 @@ function commandWithCustomInstance(instanceType: string | null) {
     instanceType,
     region: 'us-central1',
     regional: true,
-    viewState: {},
+    viewState: {} as any,
     backingData: {
       customInstanceTypes: {},
       credentialsKeyedByAccount: {
@@ -108,18 +130,12 @@ function commandWithCustomInstance(instanceType: string | null) {
       },
     },
     credentials: 'test',
-    customInstanceChanged: jasmine.createSpy('customInstanceChanged'),
+    customInstanceChanged: vi.fn(),
   };
 }
 
 function instanceTypeService(details = { name: 'n2-custom-8-32768' }) {
   return {
-    getInstanceTypeDetails: jasmine.createSpy('getInstanceTypeDetails').and.returnValue(Promise.resolve(details)),
+    getInstanceTypeDetails: vi.fn().mockResolvedValue(details),
   };
 }
-
-async function settle(component: any) {
-  await Promise.resolve();
-  await Promise.resolve();
-  component.update();
-}

package/src/serverGroup/configure/wizard/hiddenMetadataKeys.value.js

@@ -2,6 +2,7 @@
 
 export const GCE_SERVER_GROUP_HIDDEN_METADATA_KEYS = [
   'load-balancer-names',
+  'regional-external-load-balancer-names',
   'global-load-balancer-names',
   'backend-service-names',
   'load-balancing-policy',

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

@@ -1,48 +1,38 @@
-import { shallow } from 'enzyme';
+import { fireEvent, render, screen, within } from '@testing-library/react';
 import React from 'react';
 
-import { MapEditor } from '@spinnaker/core';
-
-import { AdvancedSettings } from './AdvancedSettings';
+import { AdvancedSettings, validateGceAdvancedSettings } from './AdvancedSettings';
 import type { IGceServerGroupCommand } from '../GceServerGroupWizard.types';
 
 describe('GCE server group Advanced Settings page', () => {
   it('restores persisted advanced fields and preserves unknown options and maps', () => {
     const values = command();
-    const wrapper = shallow(<AdvancedSettings app={{} as any} formik={formik(values)} />);
-
-    expect(wrapper.find('[data-testid="minimum-cpu-platform"] option').map((option) => option.prop('value'))).toEqual([
-      'Automatic',
-      'legacy-platform',
-    ]);
-    expect(wrapper.find('[data-testid="disk-type-0"] option').map((option) => option.prop('value'))).toEqual([
-      'pd-ssd',
-      'legacy-disk',
-    ]);
-    expect(wrapper.find('[data-testid="accelerator-type-0"] option').map((option) => option.prop('value'))).toEqual([
-      'nvidia-tesla-t4',
-      'legacy-accelerator',
-    ]);
-    expect(wrapper.find('[data-testid="service-account"] input').prop('value')).toBe('custom@example.com');
-    expect(wrapper.find('[data-testid="auth-scope-0"] input').prop('value')).toBe('unknown.scope');
-    expect(wrapper.find('[data-testid="enable-confidential-compute"] input').prop('checked')).toBe(true);
-
-    const editors = wrapper.find(MapEditor);
-    expect(editors.at(0).prop('model')).toBe(values.instanceMetadata);
-    expect(editors.at(1).prop('model')).toBe(values.labels);
-    expect(editors.at(2).prop('model')).toBe(values.resourceManagerTags);
+    renderAdvanced(values);
+
+    expect(optionValues(screen.getByTestId('minimum-cpu-platform'))).toEqual(['Automatic', 'legacy-platform']);
+    expect(optionValues(screen.getByTestId('disk-type-0'))).toEqual(['pd-ssd', 'legacy-disk']);
+    expect(optionValues(screen.getByTestId('accelerator-type-0'))).toEqual(['nvidia-tesla-t4', 'legacy-accelerator']);
+    expect(screen.getByTestId('service-account').querySelector('input')).toHaveValue('custom@example.com');
+    expect(screen.getByTestId('auth-scope-0').querySelector('input')).toHaveValue('unknown.scope');
+    expect(screen.getByTestId('enable-confidential-compute').querySelector('input')).toBeChecked();
+    expect(mapValues('Custom Metadata')).toEqual(['unknownMetadata', 'keep']);
+    expect(mapValues('Labels')).toEqual(['unknownLabel', 'keep']);
+    expect(mapValues('Resource Manager Tags')).toEqual(['unknownTag', 'keep']);
   });
 
   it('preserves unknown disk and accelerator fields while editing known values', () => {
-    const values = command();
-    const wrapper = shallow(<AdvancedSettings app={{} as any} formik={formik(values)} />);
+    // A persisted legacy accelerator only offers its stored count, so edit a known type with selectable counts.
+    const values = command({
+      acceleratorConfigs: [{ acceleratorType: 'nvidia-tesla-t4', acceleratorCount: 2, unknown: 'keep' }],
+    });
+    renderAdvanced(values);
 
-    wrapper.find('[data-testid="disk-size-0"]').simulate('change', { target: { value: '200' } });
-    wrapper.find('[data-testid="accelerator-count-0"]').simulate('change', { target: { value: '4' } });
+    fireEvent.change(screen.getByTestId('disk-size-0'), { target: { value: '200' } });
+    fireEvent.change(screen.getByTestId('accelerator-count-0'), { target: { value: '4' } });
 
     expect(values.disks[0]).toEqual({ type: 'legacy-disk', sizeGb: 200, sourceImage: 'image', unknown: 'keep' });
     expect(values.acceleratorConfigs[0]).toEqual({
-      acceleratorType: 'legacy-accelerator',
+      acceleratorType: 'nvidia-tesla-t4',
       acceleratorCount: 4,
       unknown: 'keep',
     });
@@ -52,16 +42,16 @@ describe('GCE server group Advanced Settings page', () => {
     const firstLocalSsd = { type: 'local-ssd', sizeGb: 375, autoDelete: true, unknown: 'first' };
     const secondLocalSsd = { type: 'local-ssd', sizeGb: 375, autoDelete: true, unknown: 'second' };
     const values = command({ disks: [command().disks[0], firstLocalSsd, secondLocalSsd] });
-    const wrapper = shallow(<AdvancedSettings app={{} as any} formik={formik(values)} />);
+    renderAdvanced(values);
 
-    expect(wrapper.find('[data-testid="local-ssd-count"]').prop('value')).toBe(2);
-    expect(wrapper.find('[data-testid^="disk-type-"]').length).toBe(1);
+    expect(screen.getByTestId('local-ssd-count')).toHaveValue(2);
+    expect(screen.getAllByTestId(/^disk-type-/)).toHaveLength(1);
 
-    wrapper.find('[data-testid="local-ssd-count"]').simulate('change', { target: { value: '3' } });
+    fireEvent.change(screen.getByTestId('local-ssd-count'), { target: { value: '3' } });
     expect(values.disks.slice(1, 3)).toEqual([firstLocalSsd, secondLocalSsd]);
     expect(values.disks[3]).toEqual({ type: 'local-ssd', sizeGb: 375 });
 
-    wrapper.find('[data-testid="local-ssd-count"]').simulate('change', { target: { value: '1' } });
+    fireEvent.change(screen.getByTestId('local-ssd-count'), { target: { value: '1' } });
     expect(values.disks).toEqual([command().disks[0], firstLocalSsd]);
   });
 
@@ -73,33 +63,30 @@ describe('GCE server group Advanced Settings page', () => {
         { acceleratorType: 'nvidia-tesla-t4', acceleratorCount: '${ parameters.acceleratorCount }' },
       ],
     });
-    const wrapper = shallow(<AdvancedSettings app={{} as any} formik={formik(values)} />);
+    renderAdvanced(values);
 
-    expect(wrapper.find('[data-testid="disk-size-0"]').prop('type')).toBe('text');
-    expect(wrapper.find('[data-testid="accelerator-count-0"]').prop('type')).toBe('text');
-    wrapper.find('[data-testid="disk-size-0"]').simulate('change', { target: { value: '${ diskSize }' } });
-    wrapper
-      .find('[data-testid="accelerator-count-0"]')
-      .simulate('change', { target: { value: '${ acceleratorCount }' } });
+    expect(screen.getByTestId('disk-size-0')).toHaveAttribute('type', 'text');
+    expect(screen.getByTestId('accelerator-count-0')).toHaveAttribute('type', 'text');
+    fireEvent.change(screen.getByTestId('disk-size-0'), { target: { value: '${ diskSize }' } });
+    fireEvent.change(screen.getByTestId('accelerator-count-0'), { target: { value: '${ acceleratorCount }' } });
 
     expect(values.disks[0].sizeGb).toBe('${ diskSize }');
     expect(values.acceleratorConfigs[0].acceleratorCount).toBe('${ acceleratorCount }');
-    expect(new AdvancedSettings({ app: {} as any, formik: formik(values) } as any).validate(values)).toEqual({});
+    expect(validateGceAdvancedSettings(values)).toEqual({});
   });
 
   it('enforces concrete disk and accelerator bounds and rejects expressions outside pipelines', () => {
-    const page = new AdvancedSettings({ app: {} as any, formik: formik(command()) } as any);
     const invalid = command({
       disks: [{ type: 'pd-ssd', sizeGb: 9 }],
       acceleratorConfigs: [{ acceleratorType: 'nvidia-tesla-t4', acceleratorCount: 0 }],
     });
 
-    expect(page.validate(invalid)).toEqual({
+    expect(validateGceAdvancedSettings(invalid)).toEqual({
       disks: 'Every persistent disk requires a type and an integer size between 10 and 65536 GB.',
       acceleratorConfigs: 'Every accelerator requires a type and a supported positive integer count.',
     });
     expect(
-      page.validate(
+      validateGceAdvancedSettings(
         command({
           disks: [{ type: 'pd-ssd', sizeGb: 65537 }],
           acceleratorConfigs: [{ acceleratorType: 'nvidia-tesla-t4', acceleratorCount: 3 }],
@@ -110,7 +97,7 @@ describe('GCE server group Advanced Settings page', () => {
       acceleratorConfigs: 'Every accelerator requires a type and a supported positive integer count.',
     });
     expect(
-      page.validate(
+      validateGceAdvancedSettings(
         command({
           disks: [{ type: 'pd-ssd', sizeGb: '${ diskSize }' }],
           acceleratorConfigs: [{ acceleratorType: 'nvidia-tesla-t4', acceleratorCount: '${ count }' }],
@@ -121,19 +108,18 @@ describe('GCE server group Advanced Settings page', () => {
       acceleratorConfigs: 'Every accelerator requires a type and a supported positive integer count.',
     });
 
-    const wrapper = shallow(<AdvancedSettings app={{} as any} formik={formik(command())} />);
-    expect(wrapper.find('[data-testid="disk-size-0"]').prop('min')).toBe(10);
-    expect(wrapper.find('[data-testid="disk-size-0"]').prop('max')).toBe(65536);
+    renderAdvanced(command());
+    expect(screen.getByTestId('disk-size-0')).toHaveAttribute('min', '10');
+    expect(screen.getByTestId('disk-size-0')).toHaveAttribute('max', '65536');
   });
 
   it('does not render or validate the unsupported partner metadata editor', () => {
     const values = command({ partnerMetadata: { partner: { entries: { unknown: 'keep' } } } });
-    const wrapper = shallow(<AdvancedSettings app={{} as any} formik={formik(values)} />);
-    const page = new AdvancedSettings({ app: {} as any, formik: formik(values) } as any);
+    const { container } = renderAdvanced(values);
 
-    expect(wrapper.find('[data-testid="partner-metadata"]').exists()).toBe(false);
-    expect(wrapper.text()).not.toContain('Partner Metadata');
-    expect(page.validate(command({ partnerMetadata: '{legacy-invalid-json' }))).toEqual({});
+    expect(screen.queryByTestId('partner-metadata')).not.toBeInTheDocument();
+    expect(container).not.toHaveTextContent('Partner Metadata');
+    expect(validateGceAdvancedSettings(command({ partnerMetadata: '{legacy-invalid-json' }))).toEqual({});
   });
 
   it('keeps scheduling and shielded VM constraints internally consistent', () => {
@@ -144,43 +130,44 @@ describe('GCE server group Advanced Settings page', () => {
       enableVtpm: true,
       enableIntegrityMonitoring: true,
     });
-    const wrapper = shallow(<AdvancedSettings app={{} as any} formik={formik(values)} />);
+    const page = renderAdvanced(values);
 
-    wrapper.find('[data-testid="preemptible-on"]').simulate('change');
+    fireEvent.click(screen.getByTestId('preemptible-on'));
     expect(values.preemptible).toBe(true);
     expect(values.automaticRestart).toBe(false);
     expect(values.onHostMaintenance).toBe('TERMINATE');
 
-    wrapper.find('[data-testid="preemptible-off"]').simulate('change');
+    page.rerenderPage(values);
+    fireEvent.click(screen.getByTestId('preemptible-off'));
     expect(values.preemptible).toBe(false);
     expect(values.automaticRestart).toBe(true);
     expect(values.onHostMaintenance).toBe('MIGRATE');
 
-    wrapper.find('[data-testid="enable-vtpm"]').simulate('change', { target: { checked: false } });
+    fireEvent.click(screen.getByTestId('enable-vtpm'));
     expect(values.enableVtpm).toBe(false);
     expect(values.enableIntegrityMonitoring).toBe(false);
   });
 
   it('uses accessible non-submit controls for every add and remove action', () => {
-    const wrapper = shallow(<AdvancedSettings app={{} as any} formik={formik(command())} />);
-    const actionButtons = wrapper.find('button');
+    const { container } = renderAdvanced(command());
+    const actionButtons = Array.from(container.querySelectorAll('button'));
 
     expect(actionButtons.length).toBeGreaterThan(0);
     actionButtons.forEach((button) => {
-      expect(button.prop('type')).toBe('button');
-      expect(button.prop('aria-label') || button.text().trim()).toBeTruthy();
+      expect(button).toHaveAttribute('type', 'button');
+      expect(button.getAttribute('aria-label') || button.textContent?.trim()).toBeTruthy();
     });
   });
 
   it('adds and removes disks, accelerators, tags, and custom scopes without mutating existing entries', () => {
     const values = command();
     const originalDisk = values.disks[0];
-    const wrapper = shallow(<AdvancedSettings app={{} as any} formik={formik(values)} />);
+    renderAdvanced(values);
 
-    wrapper.find('[data-testid="add-disk"]').simulate('click');
-    wrapper.find('[data-testid="add-accelerator"]').simulate('click');
-    wrapper.find('[data-testid="add-network-tag"]').simulate('click');
-    wrapper.find('[data-testid="add-auth-scope"]').simulate('click');
+    fireEvent.click(screen.getByTestId('add-disk'));
+    fireEvent.click(screen.getByTestId('add-accelerator'));
+    fireEvent.click(screen.getByTestId('add-network-tag'));
+    fireEvent.click(screen.getByTestId('add-auth-scope'));
 
     expect(values.disks.length).toBe(2);
     expect(values.disks[0]).toBe(originalDisk);
@@ -188,10 +175,10 @@ describe('GCE server group Advanced Settings page', () => {
     expect(values.tags).toEqual([{ value: 'existing-tag', unknown: 'keep' }, { value: '' }]);
     expect(values.authScopes).toEqual(['unknown.scope', '']);
 
-    wrapper.find('[data-testid="remove-disk-0"]').simulate('click');
-    wrapper.find('[data-testid="remove-accelerator-0"]').simulate('click');
-    wrapper.find('[data-testid="remove-network-tag-0"]').simulate('click');
-    wrapper.find('[data-testid="remove-auth-scope-0"]').simulate('click');
+    fireEvent.click(screen.getByTestId('remove-disk-0'));
+    fireEvent.click(screen.getByTestId('remove-accelerator-0'));
+    fireEvent.click(screen.getByTestId('remove-network-tag-0'));
+    fireEvent.click(screen.getByTestId('remove-auth-scope-0'));
 
     expect(values.disks.length).toBe(1);
     expect(values.acceleratorConfigs.length).toBe(1);
@@ -200,10 +187,8 @@ describe('GCE server group Advanced Settings page', () => {
   });
 
   it('validates invalid disks, accelerators, maps, tags, scopes, and confidential settings', () => {
-    const page = new AdvancedSettings({ app: {} as any, formik: formik(command()) } as any);
-
     expect(
-      page.validate(
+      validateGceAdvancedSettings(
         command({
           disks: [{ type: '', sizeGb: 0 }],
           acceleratorConfigs: [{ acceleratorType: '', acceleratorCount: 0 }],
@@ -240,7 +225,7 @@ describe('GCE server group Advanced Settings page', () => {
       enableConfidentialCompute: true,
       confidentialInstanceType: '',
     });
-    const wrapper = shallow(<AdvancedSettings app={{} as any} formik={formik(values)} />);
+    const { container } = renderAdvanced(values);
 
     [
       ['[data-testid="local-ssd-count"]', 'gce-advanced-disks-error'],
@@ -255,34 +240,48 @@ describe('GCE server group Advanced Settings page', () => {
       ['#gce-confidential-instance-type', 'gce-advanced-confidential-instance-type-error'],
       ['[aria-label="Auth scope 1"]', 'gce-advanced-auth-scopes-error'],
     ].forEach(([selector, errorId]) => {
-      const control = wrapper.find(selector);
-      expect(control.prop('aria-invalid')).withContext(selector).toBe(true);
-      expect(control.prop('aria-describedby')).withContext(selector).toBe(errorId);
+      const control = container.querySelector(selector);
+      expect(control, selector).toHaveAttribute('aria-invalid', 'true');
+      expect(control, selector).toHaveAttribute('aria-describedby', errorId);
     });
 
-    expectAdvancedError(wrapper, 'gce-advanced-disks-error', 'Every persistent disk requires a type');
-    expectAdvancedError(wrapper, 'gce-advanced-accelerators-error', 'Every accelerator requires a type');
-    expectAdvancedError(wrapper, 'gce-advanced-instance-metadata-error', 'Metadata keys cannot be empty.');
-    expectAdvancedError(wrapper, 'gce-advanced-labels-error', 'Label values cannot be empty.');
-    expectAdvancedError(
-      wrapper,
-      'gce-advanced-resource-manager-tags-error',
-      'Resource Manager tag values cannot be empty.',
-    );
-    expectAdvancedError(wrapper, 'gce-advanced-network-tags-error', 'Network tags cannot be empty.');
-    expectAdvancedError(
-      wrapper,
-      'gce-advanced-confidential-instance-type-error',
-      'Confidential instance type required.',
-    );
-    expectAdvancedError(wrapper, 'gce-advanced-auth-scopes-error', 'Auth scopes cannot be empty.');
+    expectAdvancedError('gce-advanced-disks-error', 'Every persistent disk requires a type');
+    expectAdvancedError('gce-advanced-accelerators-error', 'Every accelerator requires a type');
+    expectAdvancedError('gce-advanced-instance-metadata-error', 'Metadata keys cannot be empty.');
+    expectAdvancedError('gce-advanced-labels-error', 'Label values cannot be empty.');
+    expectAdvancedError('gce-advanced-resource-manager-tags-error', 'Resource Manager tag values cannot be empty.');
+    expectAdvancedError('gce-advanced-network-tags-error', 'Network tags cannot be empty.');
+    expectAdvancedError('gce-advanced-confidential-instance-type-error', 'Confidential instance type required.');
+    expectAdvancedError('gce-advanced-auth-scopes-error', 'Auth scopes cannot be empty.');
   });
 });
 
-function expectAdvancedError(wrapper: ReturnType<typeof shallow>, id: string, message: string): void {
-  const error = wrapper.find(`#${id}`);
-  expect(error.prop('role')).withContext(id).toBe('alert');
-  expect(error.text()).withContext(id).toContain(message);
+function renderAdvanced(values: IGceServerGroupCommand) {
+  const pageProps = { app: {} as any, formik: formik(values) };
+  const rendered = render(<AdvancedSettings {...pageProps} />);
+  return {
+    ...rendered,
+    rerenderPage(nextValues: IGceServerGroupCommand) {
+      rendered.rerender(<AdvancedSettings {...pageProps} formik={formik(nextValues)} />);
+    },
+  };
+}
+
+function optionValues(select: HTMLElement): string[] {
+  return within(select)
+    .getAllByRole('option')
+    .map((option) => (option as HTMLOptionElement).value);
+}
+
+function mapValues(label: string): string[] {
+  const editor = document.querySelector(`[aria-label="${label}"]`)!;
+  return Array.from(editor.querySelectorAll('input')).map((input) => input.value);
+}
+
+function expectAdvancedError(id: string, message: string): void {
+  const error = document.getElementById(id);
+  expect(error, id).toHaveAttribute('role', 'alert');
+  expect(error, id).toHaveTextContent(message);
 }
 
 function command(overrides: Partial<IGceServerGroupCommand> = {}): IGceServerGroupCommand {
@@ -292,13 +291,7 @@ function command(overrides: Partial<IGceServerGroupCommand> = {}): IGceServerGro
     viewState: {
       mode: 'clone',
       instanceTypeDetails: { storage: { localSSDSupported: true } },
-      acceleratorTypes: [
-        {
-          name: 'nvidia-tesla-t4',
-          description: 'NVIDIA Tesla T4',
-          availableCardCounts: [1, 2, 4],
-        },
-      ],
+      acceleratorTypes: [{ name: 'nvidia-tesla-t4', description: 'NVIDIA Tesla T4', availableCardCounts: [1, 2, 4] }],
     },
     backingData: {
       persistentDiskTypes: ['pd-ssd'],
@@ -332,7 +325,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;
     }),
   };

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

@@ -80,34 +80,7 @@ function renderValidationError(error: string, id: string): React.ReactNode {
 
 export class AdvancedSettings extends GceServerGroupWizardPage {
   public validate(values: IGceServerGroupCommand): { [key: string]: string } {
-    const errors: { [key: string]: string } = {};
-    if (getPersistentDisks(values).some((disk: any) => !disk.type || !isValidInteger(disk.sizeGb, 10, values, 65536))) {
-      errors.disks = 'Every persistent disk requires a type and an integer size between 10 and 65536 GB.';
-    }
-    if ((values.acceleratorConfigs || []).some((accelerator: any) => !isValidAccelerator(accelerator, values))) {
-      errors.acceleratorConfigs = 'Every accelerator requires a type and a supported positive integer count.';
-    }
-    if (hasEmptyKey(values.instanceMetadata)) {
-      errors.instanceMetadata = 'Metadata keys cannot be empty.';
-    }
-    if (hasEmptyKey(values.labels) || hasEmptyValue(values.labels)) {
-      errors.labels = hasEmptyKey(values.labels) ? 'Label keys cannot be empty.' : 'Label values cannot be empty.';
-    }
-    if (hasEmptyKey(values.resourceManagerTags) || hasEmptyValue(values.resourceManagerTags)) {
-      errors.resourceManagerTags = hasEmptyKey(values.resourceManagerTags)
-        ? 'Resource Manager tag keys cannot be empty.'
-        : 'Resource Manager tag values cannot be empty.';
-    }
-    if ((values.tags || []).some((tag: any) => !(typeof tag === 'string' ? tag : tag.value)?.trim())) {
-      errors.tags = 'Network tags cannot be empty.';
-    }
-    if ((values.authScopes || []).some((scope: string) => !scope.trim())) {
-      errors.authScopes = 'Auth scopes cannot be empty.';
-    }
-    if (values.enableConfidentialCompute && 'confidentialInstanceType' in values && !values.confidentialInstanceType) {
-      errors.confidentialInstanceType = 'Confidential instance type required.';
-    }
-    return errors;
+    return validateGceAdvancedSettings(values);
   }
 
   private setField = (field: string, value: any): void => {
@@ -869,3 +842,34 @@ export class AdvancedSettings extends GceServerGroupWizardPage {
     );
   }
 }
+
+export function validateGceAdvancedSettings(values: IGceServerGroupCommand): { [key: string]: string } {
+  const errors: { [key: string]: string } = {};
+  if (getPersistentDisks(values).some((disk: any) => !disk.type || !isValidInteger(disk.sizeGb, 10, values, 65536))) {
+    errors.disks = 'Every persistent disk requires a type and an integer size between 10 and 65536 GB.';
+  }
+  if ((values.acceleratorConfigs || []).some((accelerator: any) => !isValidAccelerator(accelerator, values))) {
+    errors.acceleratorConfigs = 'Every accelerator requires a type and a supported positive integer count.';
+  }
+  if (hasEmptyKey(values.instanceMetadata)) {
+    errors.instanceMetadata = 'Metadata keys cannot be empty.';
+  }
+  if (hasEmptyKey(values.labels) || hasEmptyValue(values.labels)) {
+    errors.labels = hasEmptyKey(values.labels) ? 'Label keys cannot be empty.' : 'Label values cannot be empty.';
+  }
+  if (hasEmptyKey(values.resourceManagerTags) || hasEmptyValue(values.resourceManagerTags)) {
+    errors.resourceManagerTags = hasEmptyKey(values.resourceManagerTags)
+      ? 'Resource Manager tag keys cannot be empty.'
+      : 'Resource Manager tag values cannot be empty.';
+  }
+  if ((values.tags || []).some((tag: any) => !(typeof tag === 'string' ? tag : tag.value)?.trim())) {
+    errors.tags = 'Network tags cannot be empty.';
+  }
+  if ((values.authScopes || []).some((scope: string) => !scope.trim())) {
+    errors.authScopes = 'Auth scopes cannot be empty.';
+  }
+  if (values.enableConfidentialCompute && 'confidentialInstanceType' in values && !values.confidentialInstanceType) {
+    errors.confidentialInstanceType = 'Confidential instance type required.';
+  }
+  return errors;
+}