@spinnaker/google 2026.3.1 → 2026.4.0

package/src/loadBalancer/configure/http/GceHttpLoadBalancerResourceEditors.spec.tsx

@@ -1,5 +1,5 @@
+import { fireEvent, render, within } from '@testing-library/react';
 import React from 'react';
-import { shallow } from 'enzyme';
 
 import {
   GceHttpLoadBalancerBackendServiceEditor,
@@ -8,8 +8,8 @@ import {
 
 describe('GceHttpLoadBalancerResourceEditors', () => {
   it('edits complete health-check objects without dropping unknown fields', () => {
-    const onChange = jasmine.createSpy('onChange');
-    const wrapper = shallow(
+    const onChange = vi.fn();
+    const { getByTestId, getAllByRole } = render(
       <GceHttpLoadBalancerHealthCheckEditor
         healthCheck={{
           checkIntervalSec: 10,
@@ -22,40 +22,69 @@ describe('GceHttpLoadBalancerResourceEditors', () => {
         }}
         healthChecks={[{ name: 'check-a' }]}
         onChange={onChange}
-        onRemove={jasmine.createSpy('onRemove')}
+        onRemove={vi.fn()}
       />,
     );
 
-    wrapper.find('[data-testid="health-check-port"]').simulate('change', { target: { value: '8080' } });
+    fireEvent.change(getByTestId('health-check-port'), { target: { value: '8080' } });
 
     expect(onChange).toHaveBeenCalledWith(
-      jasmine.objectContaining({ name: 'check-a', port: 8080, requestPath: '/health', unknownField: 'keep' }),
+      expect.objectContaining({ name: 'check-a', port: 8080, requestPath: '/health', unknownField: 'keep' }),
     );
-    expect(wrapper.find('button').everyWhere((button) => button.prop('type') === 'button')).toBe(true);
+    expect(getAllByRole('button').every((button) => button.getAttribute('type') === 'button')).toBe(true);
   });
 
   it('supports HTTP2 request paths and GRPC service names', () => {
-    const onChange = jasmine.createSpy('onChange');
-    const wrapper = shallow(
+    const onChange = vi.fn();
+    const { getByTestId, queryByTestId, rerender } = render(
       <GceHttpLoadBalancerHealthCheckEditor
         healthCheck={{ healthCheckType: 'GRPC', name: 'grpc-check', port: 443 }}
         healthChecks={[]}
         onChange={onChange}
-        onRemove={jasmine.createSpy('onRemove')}
+        onRemove={vi.fn()}
       />,
     );
 
-    expect(
-      wrapper.find('[data-testid="health-check-protocol"] option').map((option) => option.prop('value')),
-    ).toContain('HTTP2');
-    expect(
-      wrapper.find('[data-testid="health-check-protocol"] option').map((option) => option.prop('value')),
-    ).toContain('GRPC');
-    expect(wrapper.find('[data-testid="health-check-grpc-service-name"]').length).toBe(1);
+    expect(optionValues(getByTestId('health-check-protocol'))).toContain('HTTP2');
+    expect(optionValues(getByTestId('health-check-protocol'))).toContain('GRPC');
+    expect(getByTestId('health-check-grpc-service-name')).toBeInTheDocument();
+    expect(queryByTestId('health-check-path')).not.toBeInTheDocument();
+
+    fireEvent.change(getByTestId('health-check-grpc-service-name'), { target: { value: 'new.Service' } });
+    expect(onChange).toHaveBeenLastCalledWith(
+      expect.objectContaining({ grpcServiceName: 'new.Service', healthCheckType: 'GRPC' }),
+    );
+
+    rerender(
+      <GceHttpLoadBalancerHealthCheckEditor
+        healthCheck={{ healthCheckType: 'HTTP2', name: 'http2-check', port: 443, requestPath: '/ready' }}
+        healthChecks={[]}
+        onChange={onChange}
+        onRemove={vi.fn()}
+      />,
+    );
+
+    expect(getByTestId('health-check-path')).toHaveValue('/ready');
+    expect(queryByTestId('health-check-grpc-service-name')).not.toBeInTheDocument();
+  });
+
+  it('offers only HTTP and HTTPS backend protocols for EXTERNAL_MANAGED', () => {
+    const { getByTestId } = render(
+      <GceHttpLoadBalancerBackendServiceEditor
+        backendService={{ name: 'backend-a', protocol: 'HTTP' }}
+        backendServices={[]}
+        healthChecks={[]}
+        loadBalancerType="EXTERNAL_MANAGED"
+        onChange={vi.fn()}
+        onRemove={vi.fn()}
+      />,
+    );
+
+    expect(optionValues(getByTestId('backend-service-protocol'))).toEqual(['HTTP', 'HTTPS']);
   });
 
   it('selects complete backend-service and health-check references', () => {
-    const onChange = jasmine.createSpy('onChange');
+    const onChange = vi.fn();
     const backendServices = [
       {
         healthCheck: { name: 'check-a', selfLink: 'https://compute/healthChecks/check-a' },
@@ -65,22 +94,28 @@ describe('GceHttpLoadBalancerResourceEditors', () => {
         unknownField: 'keep',
       },
     ];
-    const wrapper = shallow(
+    const { getByTestId, getAllByRole } = render(
       <GceHttpLoadBalancerBackendServiceEditor
         backendService={{ name: '' }}
         backendServices={backendServices}
         healthChecks={[{ name: 'check-a', selfLink: 'https://compute/healthChecks/check-a' }]}
         loadBalancerType="HTTP"
         onChange={onChange}
-        onRemove={jasmine.createSpy('onRemove')}
+        onRemove={vi.fn()}
       />,
     );
 
-    wrapper.find('[data-testid="backend-service-reference"]').simulate('change', {
+    fireEvent.change(getByTestId('backend-service-reference'), {
       target: { value: 'backend-a' },
     });
 
     expect(onChange).toHaveBeenCalledWith(backendServices[0]);
-    expect(wrapper.find('button').everyWhere((button) => button.prop('type') === 'button')).toBe(true);
+    expect(getAllByRole('button').every((button) => button.getAttribute('type') === 'button')).toBe(true);
   });
 });
+
+function optionValues(select: HTMLElement): string[] {
+  return within(select)
+    .getAllByRole('option')
+    .map((option) => (option as HTMLOptionElement).value);
+}

package/src/loadBalancer/configure/http/GceHttpLoadBalancerResourceEditors.tsx

@@ -239,6 +239,27 @@ export function GceHttpLoadBalancerBackendServiceEditor({
           onChange={(event) => onChange({ ...backendService, portName: event.target.value })}
         />
       </label>
+      {loadBalancerType === 'EXTERNAL_MANAGED' && (
+        <label>
+          Protocol
+          <select
+            data-testid="backend-service-protocol"
+            value={backendService.protocol || 'HTTP'}
+            onChange={(event) =>
+              onChange({
+                ...backendService,
+                protocol: event.target.value as IGceLoadBalancerBackendService['protocol'],
+              })
+            }
+          >
+            {['HTTP', 'HTTPS'].map((protocol) => (
+              <option key={protocol} value={protocol}>
+                {protocol}
+              </option>
+            ))}
+          </select>
+        </label>
+      )}
       <label>
         Connection draining timeout
         <input

package/src/loadBalancer/configure/http/GceHttpLoadBalancerRoutingEditor.spec.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { fireEvent, render, within } from '@testing-library/react';
 
 import {
   GceHttpLoadBalancerHostRuleEditor,
@@ -13,8 +13,8 @@ describe('GceHttpLoadBalancerRoutingEditor', () => {
   ];
 
   it('adds and removes exact nested path-rule rows with non-submit buttons', () => {
-    const onChange = jasmine.createSpy('onChange');
-    const wrapper = shallow(
+    const onChange = vi.fn();
+    const { getByTestId, getAllByRole } = render(
       <GceHttpLoadBalancerHostRuleEditor
         backendServices={backendServices}
         hostRule={{
@@ -25,11 +25,11 @@ describe('GceHttpLoadBalancerRoutingEditor', () => {
           },
         }}
         onChange={onChange}
-        onRemove={jasmine.createSpy('onRemove')}
+        onRemove={vi.fn()}
       />,
     );
 
-    wrapper.find('[data-testid="add-path-rule"]').simulate('click');
+    fireEvent.click(getByTestId('add-path-rule'));
 
     expect(onChange).toHaveBeenCalledWith({
       hostPatterns: ['api.example.com'],
@@ -38,45 +38,49 @@ describe('GceHttpLoadBalancerRoutingEditor', () => {
         pathRules: [{ backendService: backendServices[1], paths: ['/v1'] }, { paths: [] }],
       },
     });
-    expect(wrapper.find('button').everyWhere((button) => button.prop('type') === 'button')).toBe(true);
+    expect(getAllByRole('button').every((button) => button.getAttribute('type') === 'button')).toBe(true);
   });
 
   it('edits path lists and preserves complete unresolved backend references', () => {
-    const onChange = jasmine.createSpy('onChange');
-    const wrapper = shallow(
+    const onChange = vi.fn();
+    const { getByTestId, getAllByRole } = render(
       <GceHttpLoadBalancerPathRuleEditor
         backendServices={backendServices}
         onChange={onChange}
-        onRemove={jasmine.createSpy('onRemove')}
+        onRemove={vi.fn()}
         pathRule={{ backendService: backendServices[1], paths: ['/v1'] }}
       />,
     );
 
-    wrapper.find('[data-testid="path-rule-paths"]').simulate('change', { target: { value: '/v1, /v2' } });
-    wrapper.find('[data-testid="path-rule-backend"]').simulate('change', {
+    fireEvent.change(getByTestId('path-rule-paths'), { target: { value: '/v1, /v2' } });
+    fireEvent.change(getByTestId('path-rule-backend'), {
       target: { value: 'default-backend' },
     });
 
-    expect(onChange.calls.argsFor(0)[0]).toEqual({ backendService: backendServices[1], paths: ['/v1', '/v2'] });
-    expect(onChange.calls.argsFor(1)[0]).toEqual({ backendService: backendServices[0], paths: ['/v1'] });
-    expect(wrapper.find('button').everyWhere((button) => button.prop('type') === 'button')).toBe(true);
+    expect(onChange.mock.calls[0][0]).toEqual({ backendService: backendServices[1], paths: ['/v1', '/v2'] });
+    expect(onChange.mock.calls[1][0]).toEqual({ backendService: backendServices[0], paths: ['/v1'] });
+    expect(getAllByRole('button').every((button) => button.getAttribute('type') === 'button')).toBe(true);
   });
 
   it('requires every path matcher to select an explicit default backend', () => {
-    const wrapper = shallow(
+    const { getByTestId } = render(
       <GceHttpLoadBalancerHostRuleEditor
         backendServices={backendServices}
         hostRule={{
           hostPatterns: ['api.example.com'],
           pathMatcher: { defaultService: backendServices[0], pathRules: [] },
         }}
-        onChange={jasmine.createSpy('onChange')}
-        onRemove={jasmine.createSpy('onRemove')}
+        onChange={vi.fn()}
+        onRemove={vi.fn()}
       />,
     );
-    const select = wrapper.find('[data-testid="host-rule-default-backend"]');
+    const select = getByTestId('host-rule-default-backend');
 
-    expect(select.prop('required')).toBe(true);
-    expect(select.find('option').map((option) => option.prop('value'))).toEqual(['default-backend', 'api-backend']);
+    expect(select).toBeRequired();
+    expect(
+      within(select)
+        .getAllByRole('option')
+        .map((option) => (option as HTMLOptionElement).value),
+    ).toEqual(['default-backend', 'api-backend']);
   });
 });

package/src/loadBalancer/configure/network/GceNetworkLoadBalancerEditor.spec.tsx

@@ -1,7 +1,5 @@
+import { fireEvent, render, within } from '@testing-library/react';
 import React from 'react';
-import { shallow } from 'enzyme';
-
-import type { IGceLoadBalancerData } from '../common';
 
 import {
   buildGceNetworkLoadBalancerOptions,
@@ -9,6 +7,7 @@ import {
   validateGceNetworkLoadBalancerCommand,
 } from './GceNetworkLoadBalancerEditor';
 import { normalizeGceNetworkLoadBalancerCommand } from './GceNetworkLoadBalancerModal';
+import type { IGceLoadBalancerData } from '../common';
 
 describe('GceNetworkLoadBalancerEditor', () => {
   it('keeps unavailable persisted address and network references in scoped options', () => {
@@ -57,8 +56,8 @@ describe('GceNetworkLoadBalancerEditor', () => {
       },
       'edit',
     );
-    const wrapper = shallow(
-      <GceNetworkLoadBalancerEditor command={command} data={emptyData()} onChange={jasmine.createSpy('onChange')} />,
+    const { container } = render(
+      <GceNetworkLoadBalancerEditor command={command} data={emptyData()} onChange={vi.fn()} />,
     );
 
     [
@@ -78,25 +77,15 @@ describe('GceNetworkLoadBalancerEditor', () => {
       'checkIntervalSec',
       'healthyThreshold',
       'unhealthyThreshold',
-    ].forEach((field) => expect(wrapper.find(`[data-field="${field}"]`).exists()).toBe(true));
-    ['name', 'credentials', 'region', 'network', 'targetPool', 'sessionAffinity'].forEach((field) => {
-      const control = wrapper.find(`[data-field="${field}"]`);
-      expect((control.find('input').exists() ? control.find('input') : control.find('select')).prop('disabled')).toBe(
-        true,
-      );
+    ].forEach((name) => expect(field(container, name)).toBeInTheDocument());
+    ['name', 'credentials', 'region', 'network', 'targetPool', 'sessionAffinity'].forEach((name) => {
+      expect(fieldControl(container, name)).toBeDisabled();
     });
-    ['address', 'protocol', 'portRange', 'healthCheckPort'].forEach((field) => {
-      const control = wrapper.find(`[data-field="${field}"]`);
-      expect(
-        (control.find('input').exists() ? control.find('input') : control.find('select')).prop('disabled'),
-      ).not.toBe(true);
+    ['address', 'protocol', 'portRange', 'healthCheckPort'].forEach((name) => {
+      expect(fieldControl(container, name)).not.toBeDisabled();
     });
-    expect(wrapper.find('[data-field="protocol"] option').map((option) => option.prop('value'))).toEqual([
-      '',
-      'TCP',
-      'UDP',
-    ]);
-    expect(wrapper.find('[data-field="sessionAffinity"] option').map((option) => option.prop('value'))).toEqual([
+    expect(optionValues(fieldControl(container, 'protocol'))).toEqual(['', 'TCP', 'UDP']);
+    expect(optionValues(fieldControl(container, 'sessionAffinity'))).toEqual([
       '',
       'NONE',
       'CLIENT_IP',
@@ -109,22 +98,24 @@ describe('GceNetworkLoadBalancerEditor', () => {
       { account: 'account-a', loadBalancerName: 'app-main', region: 'europe-west1' },
       'create',
     );
-    const onChange = jasmine.createSpy('onChange');
-    const wrapper = shallow(<GceNetworkLoadBalancerEditor command={command} data={emptyData()} onChange={onChange} />);
+    const onChange = vi.fn();
+    const { container } = render(
+      <GceNetworkLoadBalancerEditor command={command} data={emptyData()} onChange={onChange} />,
+    );
 
-    wrapper.find('[data-field="protocol"] select').simulate('change', { target: { value: 'UDP' } });
-    expect(onChange.calls.mostRecent().args[0].listeners[0].protocol).toBe('UDP');
+    fireEvent.change(fieldControl(container, 'protocol'), { target: { value: 'UDP' } });
+    expect(onChange.mock.lastCall[0].listeners[0].protocol).toBe('UDP');
 
-    wrapper.find('[data-field="sessionAffinity"] select').simulate('change', {
+    fireEvent.change(fieldControl(container, 'sessionAffinity'), {
       target: { value: 'CLIENT_IP_PROTO' },
     });
-    expect(onChange.calls.mostRecent().args[0].sessionAffinity).toBe('CLIENT_IP_PROTO');
+    expect(onChange.mock.lastCall[0].sessionAffinity).toBe('CLIENT_IP_PROTO');
 
-    wrapper.find('[data-field="requestPath"] input').simulate('change', { target: { value: 'status' } });
-    expect(onChange.calls.mostRecent().args[0].healthChecks[0].requestPath).toBe('/status');
+    fireEvent.change(fieldControl(container, 'requestPath'), { target: { value: 'status' } });
+    expect(onChange.mock.lastCall[0].healthChecks[0].requestPath).toBe('/status');
 
-    wrapper.find('[data-field="healthCheckEnabled"] input').simulate('change', { target: { checked: false } });
-    expect(onChange.calls.mostRecent().args[0].healthChecks).toEqual([]);
+    fireEvent.click(fieldControl(container, 'healthCheckEnabled'));
+    expect(onChange.mock.lastCall[0].healthChecks).toEqual([]);
   });
 
   it('validates the exact required listener and enabled health-check fields', () => {
@@ -173,3 +164,21 @@ function emptyData(): IGceLoadBalancerData {
     subnets: [],
   };
 }
+
+function field(container: HTMLElement, name: string): HTMLElement | null {
+  return container.querySelector(`[data-field="${name}"]`);
+}
+
+function fieldControl(container: HTMLElement, name: string): HTMLInputElement | HTMLSelectElement {
+  const control = field(container, name)?.querySelector('input, select');
+  if (!(control instanceof HTMLInputElement || control instanceof HTMLSelectElement)) {
+    throw new Error(`No control found for ${name}`);
+  }
+  return control;
+}
+
+function optionValues(select: HTMLElement): string[] {
+  return within(select)
+    .getAllByRole('option')
+    .map((option) => (option as HTMLOptionElement).value);
+}

package/src/loadBalancer/configure/network/GceNetworkLoadBalancerModal.spec.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 
-import { GceNetworkLoadBalancerEditor } from './GceNetworkLoadBalancerEditor';
 import {
   GceNetworkLoadBalancerModal,
   normalizeGceNetworkLoadBalancerCommand,
@@ -39,7 +38,7 @@ describe('GceNetworkLoadBalancerModal', () => {
     );
 
     expect(command).toEqual(
-      jasmine.objectContaining({
+      expect.objectContaining({
         credentials: 'account-a',
         loadBalancerType: 'NETWORK',
         mode: 'edit',
@@ -65,7 +64,7 @@ describe('GceNetworkLoadBalancerModal', () => {
       },
     ]);
     expect(command.healthChecks).toEqual([
-      jasmine.objectContaining({
+      expect.objectContaining({
         checkIntervalSec: 15,
         healthyThreshold: 3,
         name: 'app-main-hc',
@@ -102,7 +101,7 @@ describe('GceNetworkLoadBalancerModal', () => {
       portRange: '53',
       protocol: 'UDP',
     });
-    expect(command.healthChecks[0]).toEqual(jasmine.objectContaining({ port: 53, requestPath: '/health' }));
+    expect(command.healthChecks[0]).toEqual(expect.objectContaining({ port: 53, requestPath: '/health' }));
     expect(command.sessionAffinity).toBe('CLIENT_IP');
   });
 
@@ -113,7 +112,7 @@ describe('GceNetworkLoadBalancerModal', () => {
     });
 
     expect(command).toEqual(
-      jasmine.objectContaining({
+      expect.objectContaining({
         credentials: 'account-a',
         loadBalancerType: 'NETWORK',
         mode: 'create',
@@ -140,31 +139,28 @@ describe('GceNetworkLoadBalancerModal', () => {
 
   ([null, undefined] as const).forEach((loadBalancer) => {
     it(`initializes infrastructure create when the persisted load balancer is ${String(loadBalancer)}`, () => {
-      const wrapper = shallow(
+      const { container } = render(
         <GceNetworkLoadBalancerModal
           app={application}
-          closeModal={jasmine.createSpy('closeModal')}
+          closeModal={vi.fn()}
           data={emptyData()}
-          dismissModal={jasmine.createSpy('dismissModal')}
+          dismissModal={vi.fn()}
           loadBalancer={loadBalancer as any}
           mode="create"
         />,
       );
 
-      const command = wrapper.find(GceNetworkLoadBalancerEditor).prop('command');
-      expect(command.mode).toBe('create');
-      expect(command.listeners).toEqual([{ name: 'app', portRange: '8080', protocol: 'TCP' }]);
-      expect(command.healthChecks).toEqual([
-        {
-          checkIntervalSec: 10,
-          healthCheckType: 'HTTP',
-          healthyThreshold: 10,
-          port: 80,
-          requestPath: '/',
-          timeoutSec: 5,
-          unhealthyThreshold: 2,
-        },
-      ]);
+      expect(screen.getByRole('heading', { name: 'Create Network Load Balancer' })).toBeInTheDocument();
+      expect(fieldControl(container, 'name')).toHaveValue('app');
+      expect(fieldControl(container, 'protocol')).toHaveValue('TCP');
+      expect(fieldControl(container, 'portRange')).toHaveValue('8080');
+      expect(fieldControl(container, 'healthCheckEnabled')).toBeChecked();
+      expect(fieldControl(container, 'healthCheckPort')).toHaveValue(80);
+      expect(fieldControl(container, 'requestPath')).toHaveValue('/');
+      expect(fieldControl(container, 'timeoutSec')).toHaveValue(5);
+      expect(fieldControl(container, 'checkIntervalSec')).toHaveValue(10);
+      expect(fieldControl(container, 'healthyThreshold')).toHaveValue(10);
+      expect(fieldControl(container, 'unhealthyThreshold')).toHaveValue(2);
     });
   });
 
@@ -227,7 +223,7 @@ describe('GceNetworkLoadBalancerModal', () => {
   });
 
   it('returns only the normalized command in pipeline mode', () => {
-    const executeTask = jasmine.createSpy('executeTask');
+    const executeTask = vi.fn();
     const command = validCommand('pipeline');
 
     const result = submitGceNetworkLoadBalancerCommand(command, { application, executeTask });
@@ -239,13 +235,13 @@ describe('GceNetworkLoadBalancerModal', () => {
   (['create', 'edit'] as const).forEach((mode) => {
     it(`executes the direct normalized job in infrastructure ${mode} mode`, () => {
       const task = Promise.resolve({ id: 'task' });
-      const executeTask = jasmine.createSpy('executeTask').and.returnValue(task);
+      const executeTask = vi.fn().mockReturnValue(task);
       const command = validCommand(mode);
 
       const result = submitGceNetworkLoadBalancerCommand(command, { application, executeTask });
 
       expect(result).toBe(task);
-      expect(executeTask).toHaveBeenCalledOnceWith({
+      expect(executeTask).toHaveBeenCalledExactlyOnceWith({
         application,
         description: `${mode === 'edit' ? 'Update' : 'Create'} Load Balancer: app-main`,
         job: [serializeGceNetworkLoadBalancerCommand(command)],
@@ -256,18 +252,19 @@ describe('GceNetworkLoadBalancerModal', () => {
   it('exposes pipeline support and passes edit mode to the editor', () => {
     expect(GceNetworkLoadBalancerModal.supportsPipelineConfig).toBe(true);
     expect(typeof GceNetworkLoadBalancerModal.show).toBe('function');
-    const wrapper = shallow(
+    const { container } = render(
       <GceNetworkLoadBalancerModal
         app={application}
-        closeModal={jasmine.createSpy('closeModal')}
+        closeModal={vi.fn()}
         data={emptyData()}
-        dismissModal={jasmine.createSpy('dismissModal')}
+        dismissModal={vi.fn()}
         isNew={false}
         loadBalancer={{ account: 'account-a', name: 'app-main', region: 'europe-west1' } as any}
       />,
     );
 
-    expect(wrapper.find(GceNetworkLoadBalancerEditor).prop('command').mode).toBe('edit');
+    expect(screen.getByRole('heading', { name: 'Edit app-main' })).toBeInTheDocument();
+    expect(fieldControl(container, 'name')).toBeDisabled();
   });
 });
 
@@ -301,3 +298,11 @@ function emptyData(): any {
     subnets: [],
   };
 }
+
+function fieldControl(container: HTMLElement, name: string): HTMLInputElement | HTMLSelectElement {
+  const control = container.querySelector(`[data-field="${name}"] input, [data-field="${name}"] select`);
+  if (!(control instanceof HTMLInputElement || control instanceof HTMLSelectElement)) {
+    throw new Error(`No control found for ${name}`);
+  }
+  return control;
+}