@spinnaker/google 2026.3.1 → 2026.4.0

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

@@ -1,30 +1,35 @@
-import { shallow } from 'enzyme';
+import { fireEvent, render } from '@testing-library/react';
+import type { RenderResult } from '@testing-library/react';
 import type { FormikProps } from 'formik';
 import React from 'react';
+import type { Mocked } from 'vitest';
 
-import { GceServerGroupLoadBalancers } from './GceServerGroupLoadBalancers';
+import { GceServerGroupLoadBalancers, validateGceServerGroupLoadBalancers } from './GceServerGroupLoadBalancers';
 import type { IGceServerGroupCommand, IGceServerGroupWizardAdapter } from '../GceServerGroupWizard.types';
 
 describe('GCE server group Load Balancers page', () => {
   it('shows only account and region scoped load balancers without duplicate references', () => {
     const values = command({ loadBalancers: ['regional-lb', 'persisted-lb', 'persisted-lb'] });
     const { formik } = testProps(values);
-    const wrapper = shallow(<GceServerGroupLoadBalancers app={{} as any} formik={formik} />);
+    const wrapper = renderPage(<GceServerGroupLoadBalancers app={{} as any} formik={formik} />);
 
     expect(selectOptions(wrapper)).toEqual([
       ['global-lb', 'global-lb'],
       ['regional-lb', 'regional-lb'],
       ['persisted-lb', 'persisted-lb (unavailable)'],
     ]);
-    expect(wrapper.find('label[htmlFor="gce-server-group-load-balancers"]').text()).toBe('Load Balancers');
-    expect(wrapper.find('select[aria-label="Load balancers"]').prop('value')).toEqual(['regional-lb', 'persisted-lb']);
+    expect(wrapper.getByText('Load Balancers', { selector: 'label' })).toHaveAttribute(
+      'for',
+      'gce-server-group-load-balancers',
+    );
+    expect(selectedValues(wrapper.getByLabelText('Load balancers'))).toEqual(['regional-lb', 'persisted-lb']);
   });
 
   it('does not fall back to stale filtered load balancers when raw data has no scoped matches', () => {
     const values = command({ credentials: 'account-c' });
     values.backingData.filtered.loadBalancers = ['stale-lb'];
     const { formik } = testProps(values);
-    const wrapper = shallow(<GceServerGroupLoadBalancers app={{} as any} formik={formik} />);
+    const wrapper = renderPage(<GceServerGroupLoadBalancers app={{} as any} formik={formik} />);
 
     expect(selectOptions(wrapper)).toEqual([]);
   });
@@ -32,22 +37,20 @@ describe('GCE server group Load Balancers page', () => {
   it('runs load-balancer configuration and preserves selected unavailable references', async () => {
     const values = command({ loadBalancers: ['persisted-lb'] });
     const { adapter, formik } = testProps(values);
-    adapter.applyConfigurationUpdate.and.callFake(async (nextCommand) => ({
+    adapter.applyConfigurationUpdate.mockImplementation(async (nextCommand) => ({
       command: { ...nextCommand, loadBalancers: ['regional-lb'], backendServices: { 'regional-lb': ['backend'] } },
       result: { dirty: { loadBalancers: ['persisted-lb'] } },
     }));
-    const wrapper = shallow(<GceServerGroupLoadBalancers app={{} as any} formik={formik} adapter={adapter} />);
+    const wrapper = renderPage(<GceServerGroupLoadBalancers app={{} as any} formik={formik} adapter={adapter} />);
 
-    wrapper.find('select[aria-label="Load balancers"]').simulate('change', {
-      target: { selectedOptions: [{ value: 'regional-lb' }, { value: 'persisted-lb' }, { value: 'regional-lb' }] },
-    });
+    changeMultiSelect(wrapper.getByLabelText('Load balancers'), ['regional-lb', 'persisted-lb']);
     await flush();
 
-    const changedCommand = adapter.applyConfigurationUpdate.calls.mostRecent().args[0];
+    const changedCommand = adapter.applyConfigurationUpdate.mock.lastCall[0];
     expect(changedCommand.loadBalancers).toEqual(['regional-lb']);
     expect(adapter.applyConfigurationUpdate).toHaveBeenCalledWith(changedCommand, 'configureLoadBalancerOptions');
     expect(formik.setValues).toHaveBeenCalledWith(
-      jasmine.objectContaining({
+      expect.objectContaining({
         backendServices: { 'regional-lb': ['backend'] },
         loadBalancers: ['regional-lb', 'persisted-lb'],
       }),
@@ -57,25 +60,23 @@ describe('GCE server group Load Balancers page', () => {
   it('initializes the backend-compatible default policy when selecting the first supported load balancer', async () => {
     const values = command();
     const { adapter, formik } = testProps(values);
-    adapter.applyConfigurationUpdate.and.callFake(async (nextCommand) => ({
+    adapter.applyConfigurationUpdate.mockImplementation(async (nextCommand) => ({
       command: { ...nextCommand, loadBalancingPolicy: undefined },
       result: { dirty: {} },
     }));
-    const wrapper = shallow(<GceServerGroupLoadBalancers app={{} as any} formik={formik} adapter={adapter} />);
+    const wrapper = renderPage(<GceServerGroupLoadBalancers app={{} as any} formik={formik} adapter={adapter} />);
 
-    wrapper.find('select[aria-label="Load balancers"]').simulate('change', {
-      target: { selectedOptions: [{ value: 'regional-lb' }] },
-    });
+    changeMultiSelect(wrapper.getByLabelText('Load balancers'), ['regional-lb']);
     await flush();
 
-    expect(adapter.applyConfigurationUpdate.calls.mostRecent().args[0].loadBalancingPolicy).toEqual({
+    expect(adapter.applyConfigurationUpdate.mock.lastCall[0].loadBalancingPolicy).toEqual({
       balancingMode: 'UTILIZATION',
       capacityScaler: 1,
       maxUtilization: 0.8,
       namedPorts: [{ name: 'http', port: 80 }],
     });
     expect(formik.setValues).toHaveBeenCalledWith(
-      jasmine.objectContaining({
+      expect.objectContaining({
         loadBalancingPolicy: {
           balancingMode: 'UTILIZATION',
           capacityScaler: 1,
@@ -89,7 +90,7 @@ describe('GCE server group Load Balancers page', () => {
   it('refreshes backing data while preserving selected load balancers', async () => {
     const values = command({ loadBalancers: ['persisted-lb'] });
     const { adapter, formik } = testProps(values);
-    adapter.applyConfigurationRefresh.and.resolveTo({
+    adapter.applyConfigurationRefresh.mockResolvedValue({
       command: {
         ...values,
         backingData: { ...values.backingData, refreshed: true },
@@ -97,15 +98,15 @@ describe('GCE server group Load Balancers page', () => {
       },
       result: { dirty: {} },
     });
-    const wrapper = shallow(<GceServerGroupLoadBalancers app={{} as any} formik={formik} adapter={adapter} />);
+    const wrapper = renderPage(<GceServerGroupLoadBalancers app={{} as any} formik={formik} adapter={adapter} />);
 
-    wrapper.find('button[aria-label="Refresh load balancers"]').simulate('click');
+    fireEvent.click(wrapper.getByRole('button', { name: 'Refresh load balancers' }));
     await flush();
 
     expect(adapter.applyConfigurationRefresh).toHaveBeenCalledWith(values, 'refreshLoadBalancers');
     expect(formik.setValues).toHaveBeenCalledWith(
-      jasmine.objectContaining({
-        backingData: jasmine.objectContaining({ refreshed: true }),
+      expect.objectContaining({
+        backingData: expect.objectContaining({ refreshed: true }),
         loadBalancers: ['persisted-lb'],
       }),
     );
@@ -126,7 +127,7 @@ describe('GCE server group Load Balancers page', () => {
       },
     });
     const { formik } = testProps(values);
-    const wrapper = shallow(<GceServerGroupLoadBalancers app={{} as any} formik={formik} />);
+    const wrapper = renderPage(<GceServerGroupLoadBalancers app={{} as any} formik={formik} />);
 
     expect(selectOptions(wrapper, 'Backend services for regional-lb')).toEqual([
       ['backend-a', 'backend-a'],
@@ -146,8 +147,8 @@ describe('GCE server group Load Balancers page', () => {
       ['RATE', 'RATE'],
       ['UTILIZATION', 'UTILIZATION'],
     ]);
-    expect(wrapper.find('input[aria-label="Capacity scaler"]').prop('value')).toBe(80);
-    expect(wrapper.find('input[aria-label="Max rate per instance"]').prop('value')).toBe(50);
+    expect(wrapper.getByLabelText('Capacity scaler')).toHaveValue(80);
+    expect(wrapper.getByLabelText('Max rate per instance')).toHaveValue(50);
   });
 
   it('round-trips load-balancer metadata without dropping unavailable or unrelated references', async () => {
@@ -159,24 +160,22 @@ describe('GCE server group Load Balancers page', () => {
       },
     });
     const { adapter, formik } = testProps(values);
-    adapter.applyConfigurationUpdate.and.callFake(async (nextCommand) => ({
+    adapter.applyConfigurationUpdate.mockImplementation(async (nextCommand) => ({
       command: { ...nextCommand, loadBalancers: ['global-lb'], loadBalancerMetadata: {} },
       result: { dirty: { loadBalancers: ['persisted-lb'] } },
     }));
-    const wrapper = shallow(<GceServerGroupLoadBalancers app={{} as any} formik={formik} adapter={adapter} />);
+    const wrapper = renderPage(<GceServerGroupLoadBalancers app={{} as any} formik={formik} adapter={adapter} />);
 
-    wrapper.find('select[aria-label="Load balancers"]').simulate('change', {
-      target: { selectedOptions: [{ value: 'global-lb' }, { value: 'persisted-lb' }] },
-    });
+    changeMultiSelect(wrapper.getByLabelText('Load balancers'), ['global-lb', 'persisted-lb']);
     await flush();
 
-    const changedCommand = adapter.applyConfigurationUpdate.calls.mostRecent().args[0];
+    const changedCommand = adapter.applyConfigurationUpdate.mock.lastCall[0];
     expect(changedCommand.loadBalancerMetadata).toEqual({
       'global-load-balancer-names': ['persisted-listener', 'global-lb'],
       'load-balancer-names': ['unrelated-regional-listener'],
     });
     expect(formik.setValues).toHaveBeenCalledWith(
-      jasmine.objectContaining({
+      expect.objectContaining({
         loadBalancers: ['global-lb', 'persisted-lb'],
         loadBalancerMetadata: {
           'global-load-balancer-names': ['persisted-listener', 'global-lb'],
@@ -197,7 +196,7 @@ describe('GCE server group Load Balancers page', () => {
       backendServiceMetadata: ['old-backend', 'persisted-backend', 'other-backend'],
     });
     const { adapter, formik } = testProps(values);
-    adapter.applyConfigurationUpdate.and.callFake(async (nextCommand) => ({
+    adapter.applyConfigurationUpdate.mockImplementation(async (nextCommand) => ({
       command: {
         ...nextCommand,
         backendServices: { 'global-lb': ['configured-backend'] },
@@ -205,16 +204,14 @@ describe('GCE server group Load Balancers page', () => {
       },
       result: { dirty: {} },
     }));
-    const wrapper = shallow(<GceServerGroupLoadBalancers app={{} as any} formik={formik} adapter={adapter} />);
+    const wrapper = renderPage(<GceServerGroupLoadBalancers app={{} as any} formik={formik} adapter={adapter} />);
 
-    wrapper.find('select[aria-label="Load balancers"]').simulate('change', {
-      target: { selectedOptions: [{ value: 'global-lb' }, { value: 'persisted-lb' }] },
-    });
+    changeMultiSelect(wrapper.getByLabelText('Load balancers'), ['global-lb', 'persisted-lb']);
     await flush();
 
-    expect(adapter.applyConfigurationUpdate.calls.mostRecent().args[0].loadBalancers).toEqual(['global-lb']);
+    expect(adapter.applyConfigurationUpdate.mock.lastCall[0].loadBalancers).toEqual(['global-lb']);
     expect(formik.setValues).toHaveBeenCalledWith(
-      jasmine.objectContaining({
+      expect.objectContaining({
         loadBalancers: ['global-lb', 'persisted-lb'],
         backendServices: {
           'persisted-lb': ['persisted-backend'],
@@ -236,7 +233,7 @@ describe('GCE server group Load Balancers page', () => {
       backendServiceMetadata: ['backend-a', 'persisted-backend', 'other-backend'],
     });
     const { adapter, formik } = testProps(values);
-    adapter.applyConfigurationUpdate.and.callFake(async (nextCommand) => ({
+    adapter.applyConfigurationUpdate.mockImplementation(async (nextCommand) => ({
       command: {
         ...nextCommand,
         backendServices: { 'regional-lb': ['backend-b'] },
@@ -244,21 +241,19 @@ describe('GCE server group Load Balancers page', () => {
       },
       result: { dirty: {} },
     }));
-    const wrapper = shallow(<GceServerGroupLoadBalancers app={{} as any} formik={formik} adapter={adapter} />);
+    const wrapper = renderPage(<GceServerGroupLoadBalancers app={{} as any} formik={formik} adapter={adapter} />);
 
-    wrapper.find('select[aria-label="Backend services for regional-lb"]').simulate('change', {
-      target: { selectedOptions: [{ value: 'backend-b' }, { value: 'persisted-backend' }] },
-    });
+    changeMultiSelect(wrapper.getByLabelText('Backend services for regional-lb'), ['backend-b', 'persisted-backend']);
     await flush();
 
-    const changedCommand = adapter.applyConfigurationUpdate.calls.mostRecent().args[0];
+    const changedCommand = adapter.applyConfigurationUpdate.mock.lastCall[0];
     expect(changedCommand.backendServices).toEqual({
       'regional-lb': ['backend-b', 'persisted-backend'],
       'other-lb': ['other-backend'],
     });
     expect(changedCommand.backendServiceMetadata).toEqual(['backend-b', 'persisted-backend', 'other-backend']);
     expect(formik.setValues).toHaveBeenCalledWith(
-      jasmine.objectContaining({
+      expect.objectContaining({
         backendServices: {
           'regional-lb': ['backend-b', 'persisted-backend'],
           'other-lb': ['other-backend'],
@@ -281,12 +276,12 @@ describe('GCE server group Load Balancers page', () => {
       },
     });
     const { adapter, formik } = testProps(values);
-    const wrapper = shallow(<GceServerGroupLoadBalancers app={{} as any} formik={formik} adapter={adapter} />);
+    const wrapper = renderPage(<GceServerGroupLoadBalancers app={{} as any} formik={formik} adapter={adapter} />);
 
-    wrapper.find('select[aria-label="Balancing mode"]').simulate('change', { target: { value: 'UTILIZATION' } });
+    fireEvent.change(wrapper.getByLabelText('Balancing mode'), { target: { value: 'UTILIZATION' } });
     await flush();
 
-    const changedCommand = adapter.applyConfigurationUpdate.calls.mostRecent().args[0];
+    const changedCommand = adapter.applyConfigurationUpdate.mock.lastCall[0];
     expect(changedCommand.loadBalancingPolicy).toEqual({
       balancingMode: 'UTILIZATION',
       capacityScaler: 1,
@@ -294,7 +289,7 @@ describe('GCE server group Load Balancers page', () => {
       unknownField: 'keep',
     });
     expect(adapter.applyConfigurationUpdate).toHaveBeenCalledWith(changedCommand, 'configureLoadBalancerOptions');
-    expect(formik.setValues).toHaveBeenCalledWith(jasmine.objectContaining(changedCommand));
+    expect(formik.setValues).toHaveBeenCalledWith(expect.objectContaining(changedCommand));
   });
 
   it('derives balancing modes from selected load-balancer types and renders the active limit', () => {
@@ -307,14 +302,14 @@ describe('GCE server group Load Balancers page', () => {
         namedPorts: [],
       },
     });
-    const connectionWrapper = shallow(
+    const connectionWrapper = renderPage(
       <GceServerGroupLoadBalancers app={{} as any} formik={testProps(connectionValues).formik} />,
     );
     expect(selectOptions(connectionWrapper, 'Balancing mode')).toEqual([
       ['CONNECTION', 'CONNECTION'],
       ['UTILIZATION', 'UTILIZATION'],
     ]);
-    expect(connectionWrapper.find('input[aria-label="Max connections per instance"]').prop('value')).toBe(25);
+    expect(connectionWrapper.getByLabelText('Max connections per instance')).toHaveValue(25);
 
     const mixedValues = command({
       loadBalancers: ['regional-lb', 'global-lb'],
@@ -325,11 +320,11 @@ describe('GCE server group Load Balancers page', () => {
         namedPorts: [],
       },
     });
-    const mixedWrapper = shallow(
+    const mixedWrapper = renderPage(
       <GceServerGroupLoadBalancers app={{} as any} formik={testProps(mixedValues).formik} />,
     );
     expect(selectOptions(mixedWrapper, 'Balancing mode')).toEqual([['UTILIZATION', 'UTILIZATION']]);
-    expect(mixedWrapper.find('input[aria-label="Max utilization"]').prop('value')).toBe(70);
+    expect(mixedWrapper.getByLabelText('Max utilization')).toHaveValue(70);
   });
 
   it('round-trips named-port and percentage edits and supports adding and removing mappings', async () => {
@@ -343,51 +338,47 @@ describe('GCE server group Load Balancers page', () => {
       },
     });
     const nameProps = testProps(values);
-    const nameWrapper = shallow(
+    const nameWrapper = renderPage(
       <GceServerGroupLoadBalancers app={{} as any} formik={nameProps.formik} adapter={nameProps.adapter} />,
     );
-    nameWrapper.find('select[aria-label="Named port name 1"]').simulate('change', { target: { value: 'metrics' } });
+    fireEvent.change(nameWrapper.getByLabelText('Named port name 1'), { target: { value: 'metrics' } });
     await flush();
-    expect(
-      nameProps.adapter.applyConfigurationUpdate.calls.mostRecent().args[0].loadBalancingPolicy.namedPorts,
-    ).toEqual([{ name: 'metrics', port: 8080 }]);
+    expect(nameProps.adapter.applyConfigurationUpdate.mock.lastCall[0].loadBalancingPolicy.namedPorts).toEqual([
+      { name: 'metrics', port: 8080 },
+    ]);
 
     const capacityProps = testProps(values);
-    const capacityWrapper = shallow(
+    const capacityWrapper = renderPage(
       <GceServerGroupLoadBalancers app={{} as any} formik={capacityProps.formik} adapter={capacityProps.adapter} />,
     );
-    capacityWrapper.find('input[aria-label="Capacity scaler"]').simulate('change', { target: { value: '75' } });
+    fireEvent.change(capacityWrapper.getByLabelText('Capacity scaler'), { target: { value: '75' } });
     await flush();
-    expect(
-      capacityProps.adapter.applyConfigurationUpdate.calls.mostRecent().args[0].loadBalancingPolicy.capacityScaler,
-    ).toBe(0.75);
+    expect(capacityProps.adapter.applyConfigurationUpdate.mock.lastCall[0].loadBalancingPolicy.capacityScaler).toBe(
+      0.75,
+    );
 
     const addProps = testProps(values);
-    const addWrapper = shallow(
+    const addWrapper = renderPage(
       <GceServerGroupLoadBalancers app={{} as any} formik={addProps.formik} adapter={addProps.adapter} />,
     );
-    addWrapper.find('button[aria-label="Add named port"]').simulate('click');
+    fireEvent.click(addWrapper.getByRole('button', { name: 'Add named port' }));
     await flush();
-    expect(addProps.adapter.applyConfigurationUpdate.calls.mostRecent().args[0].loadBalancingPolicy.namedPorts).toEqual(
-      [
-        { name: 'http', port: 8080 },
-        { name: '', port: 80 },
-      ],
-    );
+    expect(addProps.adapter.applyConfigurationUpdate.mock.lastCall[0].loadBalancingPolicy.namedPorts).toEqual([
+      { name: 'http', port: 8080 },
+      { name: '', port: 80 },
+    ]);
 
     const removeProps = testProps(values);
-    const removeWrapper = shallow(
+    const removeWrapper = renderPage(
       <GceServerGroupLoadBalancers app={{} as any} formik={removeProps.formik} adapter={removeProps.adapter} />,
     );
-    removeWrapper.find('button[aria-label="Remove named port 1"]').simulate('click');
+    fireEvent.click(removeWrapper.getByRole('button', { name: 'Remove named port 1' }));
     await flush();
-    expect(
-      removeProps.adapter.applyConfigurationUpdate.calls.mostRecent().args[0].loadBalancingPolicy.namedPorts,
-    ).toEqual([]);
+    expect(removeProps.adapter.applyConfigurationUpdate.mock.lastCall[0].loadBalancingPolicy.namedPorts).toEqual([]);
   });
 
   it('renders policy validation errors and associates them with the invalid controls', () => {
-    const rateWrapper = shallow(
+    const rateWrapper = renderPage(
       <GceServerGroupLoadBalancers
         app={{} as any}
         formik={
@@ -426,7 +417,7 @@ describe('GCE server group Load Balancers page', () => {
       'Max rate must be',
     );
 
-    const modeWrapper = shallow(
+    const modeWrapper = renderPage(
       <GceServerGroupLoadBalancers
         app={{} as any}
         formik={
@@ -441,7 +432,7 @@ describe('GCE server group Load Balancers page', () => {
     );
     expectPolicyError(modeWrapper, 'select[aria-label="Balancing mode"]', 'balancing-mode', 'Select a balancing mode');
 
-    const connectionWrapper = shallow(
+    const connectionWrapper = renderPage(
       <GceServerGroupLoadBalancers
         app={{} as any}
         formik={
@@ -466,7 +457,7 @@ describe('GCE server group Load Balancers page', () => {
       'Max connections must be',
     );
 
-    const utilizationWrapper = shallow(
+    const utilizationWrapper = renderPage(
       <GceServerGroupLoadBalancers
         app={{} as any}
         formik={
@@ -503,11 +494,7 @@ describe('GCE server group Load Balancers page', () => {
       },
     });
     const { formik } = testProps(invalid);
-    const page = shallow(
-      <GceServerGroupLoadBalancers app={{} as any} formik={formik} />,
-    ).instance() as GceServerGroupLoadBalancers;
-
-    expect(page.validate(invalid)).toEqual({
+    expect(validateGceServerGroupLoadBalancers(invalid)).toEqual({
       loadBalancingPolicy: {
         capacityScaler: 'Capacity must be between 0 and 100%.',
         maxRatePerInstance: 'Max rate must be a finite number greater than or equal to zero.',
@@ -525,8 +512,8 @@ describe('GCE server group Load Balancers page', () => {
         namedPorts: [{ name: 'http', port: '${ parameters.port }' }],
       },
     });
-    expect(page.validate(pipeline)).toEqual({});
-    expect(page.validate({ ...pipeline, viewState: { mode: 'create', dirty: {} } })).toEqual({
+    expect(validateGceServerGroupLoadBalancers(pipeline)).toEqual({});
+    expect(validateGceServerGroupLoadBalancers({ ...pipeline, viewState: { mode: 'create', dirty: {} } })).toEqual({
       loadBalancingPolicy: {
         capacityScaler: 'Capacity must be between 0 and 100%.',
         maxRatePerInstance: 'Max rate must be a finite number greater than or equal to zero.',
@@ -543,47 +530,181 @@ describe('GCE server group Load Balancers page', () => {
         namedPorts: [],
       },
     });
-    expect(page.validate(blank)).toEqual({
+    expect(validateGceServerGroupLoadBalancers(blank)).toEqual({
       loadBalancingPolicy: {
         capacityScaler: 'Capacity must be between 0 and 100%.',
         maxRatePerInstance: 'Max rate must be a finite number greater than or equal to zero.',
       },
     });
   });
+
+  it('rejects ambiguous cross-scope names and mixed passthrough attachments', () => {
+    const ambiguous = command({
+      loadBalancers: ['shared-name'],
+      backingData: {
+        ...command().backingData,
+        loadBalancers: [
+          {
+            accounts: [
+              {
+                name: 'account-a',
+                regions: [
+                  {
+                    loadBalancers: [
+                      { loadBalancerType: 'TCP', name: 'shared-name', region: 'global' },
+                      {
+                        loadBalancerType: 'REGIONAL_EXTERNAL_NETWORK',
+                        name: 'shared-name',
+                        region: 'us-central1',
+                      },
+                    ],
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+    });
+    const ambiguousMessage =
+      'The selected load balancer name is ambiguous across regions or load balancer types. Rename it or select an unambiguous load balancer.';
+    expect(validateGceServerGroupLoadBalancers(ambiguous).loadBalancers).toBe(ambiguousMessage);
+    const ambiguousWrapper = renderPage(
+      <GceServerGroupLoadBalancers app={{} as any} formik={testProps(ambiguous).formik} />,
+    );
+    expect(ambiguousWrapper.getByRole('alert')).toHaveTextContent(ambiguousMessage);
+    ambiguousWrapper.unmount();
+
+    const mixedPassthrough = command({
+      loadBalancers: ['regional-network', 'regional-lb'],
+      backingData: {
+        ...command().backingData,
+        filtered: {
+          loadBalancerIndex: {
+            'regional-lb': command().backingData.filtered.loadBalancerIndex['regional-lb'],
+            'regional-network': {
+              loadBalancerType: 'REGIONAL_EXTERNAL_NETWORK',
+              name: 'regional-network',
+            },
+          },
+        },
+      },
+    });
+    const mixedMessage =
+      'REGIONAL_EXTERNAL_NETWORK load balancers cannot be combined with other load balancer families in this editor.';
+    expect(validateGceServerGroupLoadBalancers(mixedPassthrough).loadBalancers).toBe(mixedMessage);
+    const mixedWrapper = renderPage(
+      <GceServerGroupLoadBalancers app={{} as any} formik={testProps(mixedPassthrough).formik} />,
+    );
+    expect(
+      mixedWrapper.container.querySelector('#gce-server-group-load-balancers-error[role="alert"]'),
+    ).toHaveTextContent(mixedMessage);
+  });
+
+  it('treats EXTERNAL_MANAGED as HTTP and REGIONAL_EXTERNAL_NETWORK as policy-free', () => {
+    const externalManaged = command({
+      loadBalancers: ['external-managed'],
+      loadBalancingPolicy: {
+        balancingMode: 'RATE',
+        capacityScaler: 1,
+        maxRatePerInstance: 50,
+        namedPorts: [{ name: 'http', port: 80 }],
+      },
+      backingData: {
+        ...command().backingData,
+        filtered: {
+          loadBalancerIndex: {
+            'external-managed': {
+              backendServices: [{ name: 'backend-a', portName: 'http' }],
+              listeners: [{ name: 'frontend' }],
+              loadBalancerType: 'EXTERNAL_MANAGED',
+              name: 'external-managed',
+            },
+          },
+        },
+      },
+    });
+    const externalWrapper = renderPage(
+      <GceServerGroupLoadBalancers app={{} as any} formik={testProps(externalManaged).formik} />,
+    );
+    expect(selectOptions(externalWrapper, 'Balancing mode')).toEqual([
+      ['RATE', 'RATE'],
+      ['UTILIZATION', 'UTILIZATION'],
+    ]);
+    externalWrapper.unmount();
+
+    const passthrough = command({
+      loadBalancers: ['regional-network'],
+      loadBalancingPolicy: {
+        balancingMode: 'UTILIZATION',
+        capacityScaler: 1,
+        maxUtilization: 0.8,
+        namedPorts: [{ name: 'http', port: 80 }],
+      },
+      backingData: {
+        ...command().backingData,
+        filtered: {
+          loadBalancerIndex: {
+            'regional-network': {
+              backendServices: ['backend-a'],
+              loadBalancerType: 'REGIONAL_EXTERNAL_NETWORK',
+              name: 'regional-network',
+            },
+          },
+        },
+      },
+    });
+    const passthroughWrapper = renderPage(
+      <GceServerGroupLoadBalancers app={{} as any} formik={testProps(passthrough).formik} />,
+    );
+    expect(passthroughWrapper.queryByLabelText('Balancing mode')).not.toBeInTheDocument();
+    expect(passthroughWrapper.queryByLabelText('Backend services for regional-network')).not.toBeInTheDocument();
+    expect(passthroughWrapper.queryByRole('alert')).not.toBeInTheDocument();
+    expect(validateGceServerGroupLoadBalancers(passthrough)).toEqual({});
+  });
 });
 
-function selectOptions(wrapper: ReturnType<typeof shallow>, ariaLabel = 'Load balancers'): string[][] {
-  return wrapper
-    .find(`select[aria-label="${ariaLabel}"] option`)
-    .map((option) => [option.prop('value') as string, option.text()]);
+function selectOptions(wrapper: RenderResult, ariaLabel = 'Load balancers'): string[][] {
+  return Array.from(wrapper.getByLabelText(ariaLabel).querySelectorAll('option')).map((option) => [
+    option.value,
+    option.textContent || '',
+  ]);
 }
 
-function expectPolicyError(
-  wrapper: ReturnType<typeof shallow>,
-  selector: string,
-  errorName: string,
-  message: string,
-): void {
+function expectPolicyError(wrapper: RenderResult, selector: string, errorName: string, message: string): void {
   const id = `gce-load-balancing-policy-${errorName}-error`;
-  expect(wrapper.find(selector).prop('aria-invalid')).toBe(true);
-  expect(wrapper.find(selector).prop('aria-describedby')).toBe(id);
-  expect(wrapper.find(`#${id}[role="alert"]`).text()).toContain(message);
+  expect(wrapper.container.querySelector(selector)).toHaveAttribute('aria-invalid', 'true');
+  expect(wrapper.container.querySelector(selector)).toHaveAttribute('aria-describedby', id);
+  expect(wrapper.container.querySelector(`#${id}[role="alert"]`)).toHaveTextContent(message);
+}
+
+function selectedValues(select: HTMLElement): string[] {
+  return Array.from((select as HTMLSelectElement).selectedOptions).map((option) => option.value);
+}
+
+function changeMultiSelect(select: HTMLElement, values: string[]): void {
+  Array.from((select as HTMLSelectElement).options).forEach((option) => {
+    option.selected = values.includes(option.value);
+  });
+  fireEvent.change(select);
 }
 
 function testProps(values = command()) {
   const formik = ({
     values,
-    setFieldValue: jasmine.createSpy('setFieldValue'),
-    setValues: jasmine.createSpy('setValues'),
+    setFieldValue: vi.fn(),
+    setValues: vi.fn(),
   } as unknown) as FormikProps<IGceServerGroupCommand>;
   const adapter = ({
-    applyConfigurationRefresh: jasmine
-      .createSpy('applyConfigurationRefresh')
-      .and.callFake(async (nextCommand: IGceServerGroupCommand) => ({ command: nextCommand, result: { dirty: {} } })),
-    applyConfigurationUpdate: jasmine
-      .createSpy('applyConfigurationUpdate')
-      .and.callFake(async (nextCommand: IGceServerGroupCommand) => ({ command: nextCommand, result: { dirty: {} } })),
-  } as unknown) as jasmine.SpyObj<IGceServerGroupWizardAdapter>;
+    applyConfigurationRefresh: vi.fn().mockImplementation(async (nextCommand: IGceServerGroupCommand) => ({
+      command: nextCommand,
+      result: { dirty: {} },
+    })),
+    applyConfigurationUpdate: vi.fn().mockImplementation(async (nextCommand: IGceServerGroupCommand) => ({
+      command: nextCommand,
+      result: { dirty: {} },
+    })),
+  } as unknown) as Mocked<IGceServerGroupWizardAdapter>;
   return { adapter, formik };
 }
 
@@ -641,3 +762,8 @@ function command(overrides: Partial<IGceServerGroupCommand> = {}): IGceServerGro
 function flush(): Promise<void> {
   return new Promise((resolve) => setTimeout(resolve));
 }
+
+function renderPage(component: React.ReactElement): RenderResult {
+  const container = document.body.appendChild(document.createElement('div'));
+  return render(component, { baseElement: container, container });
+}