@spinnaker/google 2026.3.2 → 2026.4.1

package/src/serverGroup/configure/wizard/zones/GceInstanceFlexibilityConfigurer.spec.tsx

@@ -1,13 +1,15 @@
-import { shallow } from 'enzyme';
+import { fireEvent, render, screen } from '@testing-library/react';
 import React from 'react';
 
-import { HelpField } from '@spinnaker/core';
+import { HelpTextExpandedContext } from '@spinnaker/core';
 
 import {
   GceInstanceFlexibilityConfigurer,
   hasValidFlexibilityPolicy,
   nextSelectionName,
 } from './GceInstanceFlexibilityConfigurer';
+import { setupUser } from '../../../../../../core/src/utils/testUtils/userEvent';
+import '../../../../help/gce.help';
 
 describe('GceInstanceFlexibilityConfigurer', () => {
   const policy = {
@@ -17,15 +19,19 @@ describe('GceInstanceFlexibilityConfigurer', () => {
   };
 
   it('links the flexibility editor to its help content', () => {
-    const wrapper = shallow(
-      <GceInstanceFlexibilityConfigurer
-        regional={true}
-        targetShape="BALANCED"
-        setInstanceFlexibilityPolicy={jasmine.createSpy('setPolicy')}
-      />,
+    render(
+      <HelpTextExpandedContext.Provider value={true}>
+        <GceInstanceFlexibilityConfigurer
+          regional={true}
+          targetShape="BALANCED"
+          setInstanceFlexibilityPolicy={vi.fn()}
+        />
+      </HelpTextExpandedContext.Provider>,
     );
 
-    expect(wrapper.find(HelpField).prop('id')).toBe('gce.serverGroup.instanceFlexibilityPolicy');
+    expect(
+      screen.getByText(/Defines named sets of acceptable machine types for a regional managed instance group/),
+    ).toBeInTheDocument();
   });
 
   it('allows EVEN when flexibility is absent', () => {
@@ -124,16 +130,15 @@ describe('GceInstanceFlexibilityConfigurer', () => {
       }),
     ).toBe(false);
 
-    const wrapper = shallow(
+    render(
       <GceInstanceFlexibilityConfigurer
         instanceFlexibilityPolicy={duplicatePolicy}
         regional={true}
         targetShape="BALANCED"
-        setInstanceFlexibilityPolicy={jasmine.createSpy('setPolicy')}
+        setInstanceFlexibilityPolicy={vi.fn()}
       />,
     );
-    expect(wrapper.text()).toContain('Machine types must be unique across instance selections.');
-    expect(wrapper.find('[role="alert"]').text()).toBe('Machine types must be unique across instance selections.');
+    expect(screen.getByRole('alert')).toHaveTextContent(/^Machine types must be unique across instance selections\.$/);
   });
 
   it('accepts distinct machine types across selections', () => {
@@ -168,7 +173,7 @@ describe('GceInstanceFlexibilityConfigurer', () => {
   });
 
   it('announces submission errors and associates malformed persisted controls', () => {
-    const wrapper = shallow(
+    render(
       <GceInstanceFlexibilityConfigurer
         instanceFlexibilityPolicy={{
           instanceSelections: {
@@ -178,22 +183,21 @@ describe('GceInstanceFlexibilityConfigurer', () => {
         regional={true}
         targetShape="BALANCED"
         validationError="Instance flexibility policy is invalid."
-        setInstanceFlexibilityPolicy={jasmine.createSpy('setPolicy')}
+        setInstanceFlexibilityPolicy={vi.fn()}
       />,
     );
-    const errorId = 'gce-instance-flexibility-error';
-    const rankInput = wrapper.find('#instance-flexibility-selection-preferred-rank');
-    const blankMachineType = wrapper.find('input[aria-label="Machine type 1 for selection preferred"]');
-    const validMachineType = wrapper.find('input[aria-label="Machine type 2 for selection preferred"]');
-
-    expect(wrapper.find(`#${errorId}`).prop('role')).toBe('alert');
-    expect(wrapper.find(`#${errorId}`).text()).toBe('Instance flexibility policy is invalid.');
-    expect(rankInput.prop('aria-invalid')).toBe(true);
-    expect(rankInput.prop('aria-describedby')).toBe(errorId);
-    expect(blankMachineType.prop('aria-invalid')).toBe(true);
-    expect(blankMachineType.prop('aria-describedby')).toBe(errorId);
-    expect(validMachineType.prop('aria-invalid')).toBe(false);
-    expect(validMachineType.prop('aria-describedby')).toBeUndefined();
+    const alert = screen.getByRole('alert');
+    const rankInput = screen.getByLabelText('Rank (optional)');
+    const blankMachineType = screen.getByRole('textbox', { name: 'Machine type 1 for selection preferred' });
+    const validMachineType = screen.getByRole('textbox', { name: 'Machine type 2 for selection preferred' });
+
+    expect(alert).toHaveTextContent(/^Instance flexibility policy is invalid\.$/);
+    expect(rankInput).toBeInvalid();
+    expect(rankInput).toHaveAccessibleDescription('Instance flexibility policy is invalid.');
+    expect(blankMachineType).toBeInvalid();
+    expect(blankMachineType).toHaveAccessibleDescription('Instance flexibility policy is invalid.');
+    expect(validMachineType).toBeValid();
+    expect(validMachineType).not.toHaveAttribute('aria-describedby');
   });
 
   it('accepts regional BALANCED/ANY/ANY_SINGLE_ZONE with rankless selections', () => {
@@ -221,9 +225,10 @@ describe('GceInstanceFlexibilityConfigurer', () => {
     expect(nextSelectionName(['selection-2'])).toBe('selection-1');
   });
 
-  it('adds a named selection through the configurer', () => {
-    const setPolicy = jasmine.createSpy('setPolicy');
-    const wrapper = shallow(
+  it('adds a named selection through the configurer', async () => {
+    const user = setupUser();
+    const setPolicy = vi.fn();
+    render(
       <GceInstanceFlexibilityConfigurer
         instanceFlexibilityPolicy={undefined}
         regional={true}
@@ -232,7 +237,7 @@ describe('GceInstanceFlexibilityConfigurer', () => {
       />,
     );
 
-    wrapper.find('button').simulate('click');
+    await user.click(screen.getByRole('button', { name: 'Add flexibility policy' }));
 
     expect(setPolicy).toHaveBeenCalledWith({
       instanceSelections: {
@@ -241,9 +246,10 @@ describe('GceInstanceFlexibilityConfigurer', () => {
     });
   });
 
-  it('does not overwrite an existing renamed selection when adding another', () => {
-    const setPolicy = jasmine.createSpy('setPolicy');
-    const wrapper = shallow(
+  it('does not overwrite an existing renamed selection when adding another', async () => {
+    const user = setupUser();
+    const setPolicy = vi.fn();
+    render(
       <GceInstanceFlexibilityConfigurer
         instanceFlexibilityPolicy={{
           instanceSelections: {
@@ -256,7 +262,7 @@ describe('GceInstanceFlexibilityConfigurer', () => {
       />,
     );
 
-    wrapper.find('button').last().simulate('click');
+    await user.click(screen.getByRole('button', { name: 'Add selection' }));
 
     expect(setPolicy).toHaveBeenCalledWith({
       instanceSelections: {
@@ -266,9 +272,10 @@ describe('GceInstanceFlexibilityConfigurer', () => {
     });
   });
 
-  it('sends an explicit empty policy when the final selection is removed', () => {
-    const setPolicy = jasmine.createSpy('setPolicy');
-    const wrapper = shallow(
+  it('sends an explicit empty policy when the final selection is removed', async () => {
+    const user = setupUser();
+    const setPolicy = vi.fn();
+    render(
       <GceInstanceFlexibilityConfigurer
         instanceFlexibilityPolicy={policy}
         regional={true}
@@ -277,17 +284,14 @@ describe('GceInstanceFlexibilityConfigurer', () => {
       />,
     );
 
-    wrapper
-      .find('button')
-      .filterWhere((button) => button.text() === 'Remove')
-      .simulate('click');
+    await user.click(screen.getByRole('button', { name: 'Remove selection preferred' }));
 
     expect(setPolicy).toHaveBeenCalledWith({ instanceSelections: {} });
   });
 
   it('only persists finite non-negative integer ranks and supports rank zero and clearing', () => {
-    const setPolicy = jasmine.createSpy('setPolicy');
-    const wrapper = shallow(
+    const setPolicy = vi.fn();
+    render(
       <GceInstanceFlexibilityConfigurer
         instanceFlexibilityPolicy={policy}
         regional={true}
@@ -295,24 +299,25 @@ describe('GceInstanceFlexibilityConfigurer', () => {
         setInstanceFlexibilityPolicy={setPolicy}
       />,
     );
-    const rankInput = wrapper.find('input[type="number"]');
+    const rankInput = screen.getByRole('spinbutton', { name: 'Rank (optional)' });
 
-    expect(rankInput.prop('step')).toBe(1);
+    expect(rankInput).toHaveAttribute('step', '1');
 
-    rankInput.simulate('change', { target: { value: '1.5' } });
-    rankInput.simulate('change', { target: { value: '-1' } });
-    rankInput.simulate('change', { target: { value: 'not-a-number' } });
+    // Non-numeric text cannot be entered into a number input (the DOM sanitizes it to ''), so only
+    // fractional and negative values are exercised as rejected ranks.
+    fireEvent.change(rankInput, { target: { value: '1.5' } });
+    fireEvent.change(rankInput, { target: { value: '-1' } });
     expect(setPolicy).not.toHaveBeenCalled();
 
-    rankInput.simulate('change', { target: { value: '0' } });
+    fireEvent.change(rankInput, { target: { value: '0' } });
     expect(setPolicy).toHaveBeenCalledWith({
       instanceSelections: {
         preferred: { rank: 0, machineTypes: ['n2-standard-8'] },
       },
     });
 
-    setPolicy.calls.reset();
-    rankInput.simulate('change', { target: { value: '' } });
+    setPolicy.mockClear();
+    fireEvent.change(rankInput, { target: { value: '' } });
     expect(setPolicy).toHaveBeenCalledWith({
       instanceSelections: {
         preferred: { machineTypes: ['n2-standard-8'] },
@@ -320,9 +325,10 @@ describe('GceInstanceFlexibilityConfigurer', () => {
     });
   });
 
-  it('resets blank and duplicate rename drafts to the current valid selection name', () => {
-    const setPolicy = jasmine.createSpy('setPolicy');
-    const wrapper = shallow(
+  it('resets blank and duplicate rename drafts to the current valid selection name', async () => {
+    const user = setupUser();
+    const setPolicy = vi.fn();
+    render(
       <GceInstanceFlexibilityConfigurer
         instanceFlexibilityPolicy={{
           instanceSelections: {
@@ -335,56 +341,73 @@ describe('GceInstanceFlexibilityConfigurer', () => {
         setInstanceFlexibilityPolicy={setPolicy}
       />,
     );
-    const preferredNameInput = wrapper.find('input').filterWhere((input) => input.prop('defaultValue') === 'preferred');
-    const blankDraft = { value: ' ' };
-    const duplicateDraft = { value: 'fallback' };
-
-    preferredNameInput.simulate('blur', { currentTarget: blankDraft, target: blankDraft });
-    expect(blankDraft.value).toBe('preferred');
-    preferredNameInput.simulate('blur', { currentTarget: duplicateDraft, target: duplicateDraft });
-    expect(duplicateDraft.value).toBe('preferred');
+    const preferredNameInput = screen.getByDisplayValue('preferred');
+
+    await user.clear(preferredNameInput);
+    await user.type(preferredNameInput, ' ');
+    await user.tab();
+    expect(preferredNameInput).toHaveValue('preferred');
+
+    await user.clear(preferredNameInput);
+    await user.type(preferredNameInput, 'fallback');
+    await user.tab();
+    expect(preferredNameInput).toHaveValue('preferred');
     expect(setPolicy).not.toHaveBeenCalled();
   });
 
   it('associates labels and contextual accessible names with selection controls', () => {
-    const wrapper = shallow(
+    render(
       <GceInstanceFlexibilityConfigurer
         instanceFlexibilityPolicy={policy}
         regional={true}
         targetShape="BALANCED"
-        setInstanceFlexibilityPolicy={jasmine.createSpy('setPolicy')}
+        setInstanceFlexibilityPolicy={vi.fn()}
       />,
     );
     const selectionId = 'instance-flexibility-selection-preferred';
 
-    expect(wrapper.find(`label[htmlFor="${selectionId}-name"]`).text()).toBe('Selection name');
-    expect(wrapper.find(`input#${selectionId}-name`).exists()).toBe(true);
-    expect(wrapper.find(`label[htmlFor="${selectionId}-rank"]`).text()).toBe('Rank (optional)');
-    expect(wrapper.find(`input#${selectionId}-rank`).exists()).toBe(true);
-    expect(wrapper.find(`input[aria-label="Machine type 1 for selection preferred"]`).prop('id')).toBe(
+    expect(screen.getByRole('textbox', { name: 'Selection name' })).toHaveAttribute('id', `${selectionId}-name`);
+    expect(screen.getByRole('spinbutton', { name: 'Rank (optional)' })).toHaveAttribute('id', `${selectionId}-rank`);
+    expect(screen.getByRole('textbox', { name: 'Machine type 1 for selection preferred' })).toHaveAttribute(
+      'id',
       `${selectionId}-machine-type-0`,
     );
-    expect(wrapper.find('button[aria-label="Remove selection preferred"]').exists()).toBe(true);
-    expect(wrapper.find('button[aria-label="Remove machine type 1 from selection preferred"]').exists()).toBe(true);
+    expect(screen.getByRole('button', { name: 'Remove selection preferred' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Remove machine type 1 from selection preferred' })).toBeInTheDocument();
   });
 
   it('rerenders when policy and sibling primitive props change identity', () => {
-    const wrapper = shallow(
+    const setPolicy = vi.fn();
+    const { rerender } = render(
       <GceInstanceFlexibilityConfigurer
         instanceFlexibilityPolicy={undefined}
         regional={true}
         targetShape="BALANCED"
-        setInstanceFlexibilityPolicy={jasmine.createSpy('setPolicy')}
+        setInstanceFlexibilityPolicy={setPolicy}
       />,
     );
 
-    expect(wrapper.text()).toContain('Add flexibility policy');
+    expect(screen.getByRole('button', { name: 'Add flexibility policy' })).toBeInTheDocument();
 
-    wrapper.setProps({ instanceFlexibilityPolicy: policy });
-    expect(wrapper.find('button[aria-label="Remove selection preferred"]').exists()).toBe(true);
+    rerender(
+      <GceInstanceFlexibilityConfigurer
+        instanceFlexibilityPolicy={policy}
+        regional={true}
+        targetShape="BALANCED"
+        setInstanceFlexibilityPolicy={setPolicy}
+      />,
+    );
+    expect(screen.getByRole('button', { name: 'Remove selection preferred' })).toBeInTheDocument();
 
-    wrapper.setProps({ regional: false, targetShape: 'EVEN' });
-    expect(wrapper.text()).toContain('Flexibility requires a regional server group.');
-    expect(wrapper.text()).toContain('not EVEN');
+    rerender(
+      <GceInstanceFlexibilityConfigurer
+        instanceFlexibilityPolicy={policy}
+        regional={false}
+        targetShape="EVEN"
+        setInstanceFlexibilityPolicy={setPolicy}
+      />,
+    );
+    expect(screen.getByText('Flexibility requires a regional server group.')).toBeInTheDocument();
+    expect(screen.getByText(/not EVEN/)).toBeInTheDocument();
   });
 });

package/src/serverGroup/details/GceInstanceFlexibilityPolicyDetails.spec.tsx

@@ -1,11 +1,11 @@
-import { shallow } from 'enzyme';
+import { render } from '@testing-library/react';
 import React from 'react';
 
 import { GceInstanceFlexibilityPolicyDetails } from './GceInstanceFlexibilityPolicyDetails';
 
 describe('GceInstanceFlexibilityPolicyDetails', () => {
   it('renders selection names, optional ranks, and machine types without duplicating target shape', () => {
-    const wrapper = shallow(
+    const { container } = render(
       <GceInstanceFlexibilityPolicyDetails
         instanceFlexibilityPolicy={{
           instanceSelections: {
@@ -16,17 +16,16 @@ describe('GceInstanceFlexibilityPolicyDetails', () => {
       />,
     );
 
-    const text = wrapper.text();
-    expect(text).toContain('preferred');
-    expect(text).toContain('n2-standard-8');
-    expect(text).toContain('fallback');
-    expect(text).toContain('1');
-    expect(text).toContain('e2-standard-8, c3-standard-8');
-    expect(text).not.toContain('Target Shape');
+    expect(container).toHaveTextContent('preferred');
+    expect(container).toHaveTextContent('n2-standard-8');
+    expect(container).toHaveTextContent('fallback');
+    expect(container).toHaveTextContent('1');
+    expect(container).toHaveTextContent('e2-standard-8, c3-standard-8');
+    expect(container).not.toHaveTextContent('Target Shape');
   });
 
   it('renders nothing when the policy is absent', () => {
-    const wrapper = shallow(<GceInstanceFlexibilityPolicyDetails />);
-    expect(wrapper.type()).toBeNull();
+    const { container } = render(<GceInstanceFlexibilityPolicyDetails />);
+    expect(container).toBeEmptyDOMElement();
   });
 });

package/src/serverGroup/details/autoHealingPolicy/GceAutoHealingPolicyDetails.spec.tsx

@@ -1,10 +1,10 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import React from 'react';
-import { shallow } from 'enzyme';
 
 import { ConfirmationModalService } from '@spinnaker/core';
 
-import { GceAutoscalingPolicyWriter } from '../../../autoscalingPolicy';
 import { GceAutoHealingPolicyDetails } from './GceAutoHealingPolicyDetails';
+import { GceAutoscalingPolicyWriter } from '../../../autoscalingPolicy';
 import { GceUpsertAutoHealingPolicyModal } from './modal/GceUpsertAutoHealingPolicyModal';
 
 describe('GceAutoHealingPolicyDetails', () => {
@@ -22,7 +22,7 @@ describe('GceAutoHealingPolicyDetails', () => {
   const policy = { healthCheck: 'web', initialDelaySec: 0, maxUnavailable: { fixed: 0 } } as any;
 
   it('summarizes zero-valued delay without rendering legacy max unavailable data', () => {
-    const wrapper = shallow(
+    const { container } = render(
       <GceAutoHealingPolicyDetails
         application={application}
         mutationsEnabled={true}
@@ -31,16 +31,16 @@ describe('GceAutoHealingPolicyDetails', () => {
       />,
     );
 
-    expect(wrapper.text()).toContain('web');
-    expect(wrapper.text()).toContain('0 seconds');
-    expect(wrapper.text()).not.toContain('Max Unavailable');
-    expect(wrapper.text()).not.toContain('0 fixed');
+    expect(screen.getByText('web')).toBeInTheDocument();
+    expect(screen.getByText('0 seconds')).toBeInTheDocument();
+    expect(container).not.toHaveTextContent('Max Unavailable');
+    expect(container).not.toHaveTextContent('0 fixed');
   });
 
   it('opens edit after managed-resource confirmation proceeds', async () => {
-    const show = spyOn(GceUpsertAutoHealingPolicyModal, 'show');
-    const confirm = spyOn(ConfirmationModalService, 'confirm').and.returnValue(Promise.resolve() as any);
-    const wrapper = shallow(
+    const show = vi.spyOn(GceUpsertAutoHealingPolicyModal, 'show').mockReturnValue(undefined);
+    const confirm = vi.spyOn(ConfirmationModalService, 'confirm').mockReturnValue(Promise.resolve() as any);
+    render(
       <GceAutoHealingPolicyDetails
         application={application}
         mutationsEnabled={true}
@@ -49,19 +49,17 @@ describe('GceAutoHealingPolicyDetails', () => {
       />,
     );
 
-    wrapper.find('[data-testid="edit-auto-healing-policy"]').simulate('click');
+    fireEvent.click(screen.getByTestId('edit-auto-healing-policy'));
     expect(show).not.toHaveBeenCalled();
-    await Promise.resolve();
-    await Promise.resolve();
 
-    expect(confirm).toHaveBeenCalledWith(jasmine.objectContaining({ header: 'Pause Management?' }));
-    expect(show).toHaveBeenCalledWith({ application, serverGroup: managedServerGroup, policy });
+    expect(confirm).toHaveBeenCalledWith(expect.objectContaining({ header: 'Pause Management?' }));
+    await waitFor(() => expect(show).toHaveBeenCalledWith({ application, serverGroup: managedServerGroup, policy }));
   });
 
   it('does not open edit when managed-resource confirmation is cancelled', async () => {
-    const show = spyOn(GceUpsertAutoHealingPolicyModal, 'show');
-    spyOn(ConfirmationModalService, 'confirm').and.returnValue(Promise.reject() as any);
-    const wrapper = shallow(
+    const show = vi.spyOn(GceUpsertAutoHealingPolicyModal, 'show').mockReturnValue(undefined);
+    vi.spyOn(ConfirmationModalService, 'confirm').mockReturnValue(Promise.reject() as any);
+    render(
       <GceAutoHealingPolicyDetails
         application={application}
         mutationsEnabled={true}
@@ -70,17 +68,16 @@ describe('GceAutoHealingPolicyDetails', () => {
       />,
     );
 
-    wrapper.find('[data-testid="edit-auto-healing-policy"]').simulate('click');
-    await Promise.resolve();
-    await Promise.resolve();
+    fireEvent.click(screen.getByTestId('edit-auto-healing-policy'));
+    await waitFor(() => expect(ConfirmationModalService.confirm).toHaveBeenCalled());
 
     expect(show).not.toHaveBeenCalled();
   });
 
   it('opens add after managed-resource confirmation proceeds', async () => {
-    const show = spyOn(GceUpsertAutoHealingPolicyModal, 'show');
-    const confirm = spyOn(ConfirmationModalService, 'confirm').and.returnValue(Promise.resolve() as any);
-    const wrapper = shallow(
+    const show = vi.spyOn(GceUpsertAutoHealingPolicyModal, 'show').mockReturnValue(undefined);
+    const confirm = vi.spyOn(ConfirmationModalService, 'confirm').mockReturnValue(Promise.resolve() as any);
+    render(
       <GceAutoHealingPolicyDetails
         application={application}
         mutationsEnabled={true}
@@ -89,19 +86,17 @@ describe('GceAutoHealingPolicyDetails', () => {
       />,
     );
 
-    wrapper.find('[data-testid="add-auto-healing-policy"]').simulate('click');
+    fireEvent.click(screen.getByTestId('add-auto-healing-policy'));
     expect(show).not.toHaveBeenCalled();
-    await Promise.resolve();
-    await Promise.resolve();
 
-    expect(confirm).toHaveBeenCalledWith(jasmine.objectContaining({ header: 'Pause Management?' }));
-    expect(show).toHaveBeenCalledWith({ application, serverGroup: managedServerGroup });
+    expect(confirm).toHaveBeenCalledWith(expect.objectContaining({ header: 'Pause Management?' }));
+    await waitFor(() => expect(show).toHaveBeenCalledWith({ application, serverGroup: managedServerGroup }));
   });
 
   it('does not open add when managed-resource confirmation is cancelled', async () => {
-    const show = spyOn(GceUpsertAutoHealingPolicyModal, 'show');
-    spyOn(ConfirmationModalService, 'confirm').and.returnValue(Promise.reject() as any);
-    const wrapper = shallow(
+    const show = vi.spyOn(GceUpsertAutoHealingPolicyModal, 'show').mockReturnValue(undefined);
+    vi.spyOn(ConfirmationModalService, 'confirm').mockReturnValue(Promise.reject() as any);
+    render(
       <GceAutoHealingPolicyDetails
         application={application}
         mutationsEnabled={true}
@@ -110,20 +105,19 @@ describe('GceAutoHealingPolicyDetails', () => {
       />,
     );
 
-    wrapper.find('[data-testid="add-auto-healing-policy"]').simulate('click');
-    await Promise.resolve();
-    await Promise.resolve();
+    fireEvent.click(screen.getByTestId('add-auto-healing-policy'));
+    await waitFor(() => expect(ConfirmationModalService.confirm).toHaveBeenCalled());
 
     expect(show).not.toHaveBeenCalled();
   });
 
   it('offers delete confirmation after managed-resource confirmation proceeds', async () => {
-    const confirm = spyOn(ConfirmationModalService, 'confirm').and.returnValues(
-      Promise.resolve() as any,
-      Promise.resolve() as any,
-    );
-    const deletePolicy = spyOn(GceAutoscalingPolicyWriter, 'deleteAutoHealingPolicy');
-    const wrapper = shallow(
+    const confirm = vi
+      .spyOn(ConfirmationModalService, 'confirm')
+      .mockReturnValueOnce(Promise.resolve() as any)
+      .mockReturnValueOnce(Promise.resolve() as any);
+    const deletePolicy = vi.spyOn(GceAutoscalingPolicyWriter, 'deleteAutoHealingPolicy').mockReturnValue(undefined);
+    render(
       <GceAutoHealingPolicyDetails
         application={application}
         mutationsEnabled={true}
@@ -132,12 +126,10 @@ describe('GceAutoHealingPolicyDetails', () => {
       />,
     );
 
-    wrapper.find('[data-testid="delete-auto-healing-policy"]').simulate('click');
-    await Promise.resolve();
-    await Promise.resolve();
+    fireEvent.click(screen.getByTestId('delete-auto-healing-policy'));
+    await waitFor(() => expect(confirm.mock.calls.length).toBe(2));
 
-    expect(confirm.calls.count()).toBe(2);
-    const deleteConfirmation = confirm.calls.mostRecent().args[0];
+    const deleteConfirmation = confirm.mock.lastCall[0];
     deleteConfirmation.submitMethod();
 
     expect(deletePolicy).toHaveBeenCalledWith(application, managedServerGroup);
@@ -147,9 +139,9 @@ describe('GceAutoHealingPolicyDetails', () => {
     const cancelledConfirmation = {
       then: (_onProceed: () => void, onCancel: () => void) => Promise.resolve(onCancel()),
     } as any;
-    const confirm = spyOn(ConfirmationModalService, 'confirm').and.returnValue(cancelledConfirmation);
-    const deletePolicy = spyOn(GceAutoscalingPolicyWriter, 'deleteAutoHealingPolicy');
-    const wrapper = shallow(
+    const confirm = vi.spyOn(ConfirmationModalService, 'confirm').mockReturnValue(cancelledConfirmation);
+    const deletePolicy = vi.spyOn(GceAutoscalingPolicyWriter, 'deleteAutoHealingPolicy').mockReturnValue(undefined);
+    render(
       <GceAutoHealingPolicyDetails
         application={application}
         mutationsEnabled={true}
@@ -158,17 +150,16 @@ describe('GceAutoHealingPolicyDetails', () => {
       />,
     );
 
-    wrapper.find('[data-testid="delete-auto-healing-policy"]').simulate('click');
-    await Promise.resolve();
-    await Promise.resolve();
+    fireEvent.click(screen.getByTestId('delete-auto-healing-policy'));
+    await waitFor(() => expect(confirm).toHaveBeenCalled());
 
-    expect(confirm.calls.count()).toBe(1);
-    expect(confirm).toHaveBeenCalledWith(jasmine.objectContaining({ header: 'Pause Management?' }));
+    expect(confirm.mock.calls.length).toBe(1);
+    expect(confirm).toHaveBeenCalledWith(expect.objectContaining({ header: 'Pause Management?' }));
     expect(deletePolicy).not.toHaveBeenCalled();
   });
 
   it('hides all mutation actions when mutations are disabled', () => {
-    const details = shallow(
+    const details = render(
       <GceAutoHealingPolicyDetails
         application={application}
         mutationsEnabled={false}
@@ -176,7 +167,10 @@ describe('GceAutoHealingPolicyDetails', () => {
         policy={policy}
       />,
     );
-    const emptyDetails = shallow(
+    expect(details.queryByTestId('edit-auto-healing-policy')).not.toBeInTheDocument();
+    expect(details.queryByTestId('delete-auto-healing-policy')).not.toBeInTheDocument();
+    details.unmount();
+    const emptyDetails = render(
       <GceAutoHealingPolicyDetails
         application={application}
         mutationsEnabled={false}
@@ -185,8 +179,6 @@ describe('GceAutoHealingPolicyDetails', () => {
       />,
     );
 
-    expect(details.find('[data-testid="edit-auto-healing-policy"]').exists()).toBe(false);
-    expect(details.find('[data-testid="delete-auto-healing-policy"]').exists()).toBe(false);
-    expect(emptyDetails.isEmptyRender()).toBe(true);
+    expect(emptyDetails.container).toBeEmptyDOMElement();
   });
 });

package/src/serverGroup/details/autoHealingPolicy/modal/GceUpsertAutoHealingPolicyModal.spec.tsx

@@ -23,15 +23,15 @@ describe('GceUpsertAutoHealingPolicyModal', () => {
   }
 
   it('retains edited policy state when task creation is rejected', async () => {
-    spyOn(GceAutoscalingPolicyWriter, 'upsertAutoHealingPolicy').and.returnValue(
+    vi.spyOn(GceAutoscalingPolicyWriter, 'upsertAutoHealingPolicy').mockReturnValue(
       Promise.reject({ failureMessage: 'No permission' }),
     );
     const modal = new GceUpsertAutoHealingPolicyModal({
       application: { name: 'my-app' },
       serverGroup: { account: 'my-account', name: 'my-app-main-v001', region: 'us-central1' },
       policy: { healthCheck: 'web', initialDelaySec: 300 },
-      closeModal: jasmine.createSpy('closeModal'),
-      dismissModal: jasmine.createSpy('dismissModal'),
+      closeModal: vi.fn(),
+      dismissModal: vi.fn(),
     } as any);
     const editedPolicy = { healthCheck: 'web', initialDelaySec: 0 };
     modal.state.policy = editedPolicy;