@spinnaker/google 2026.3.2 → 2026.4.0

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

@@ -1,19 +1,16 @@
-import { mount as enzymeMount, shallow } from 'enzyme';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import React from 'react';
 
-import { CloudProviderRegistry, CollapsibleSection, DeckRuntimeContext, ManagedMenuItem } from '@spinnaker/core';
+import { CloudProviderRegistry, ConfirmationModalService, DeckRuntimeContext } from '@spinnaker/core';
 
 import { GceAutoscalingPolicyWriter } from '../../autoscalingPolicy';
-import { registerGoogleProvider } from '../../gce.module';
 import { GceCloneServerGroupModal } from '../configure/wizard/GceCloneServerGroupModal';
-import { GceAutoHealingPolicyDetails } from './autoHealingPolicy';
-import { GceAutoscalingPolicyDetails } from './autoscalingPolicy';
+import { registerGoogleProvider } from '../../gce.module';
 import {
   GceServerGroupActions,
-  GceServerGroupLaunchConfigSection,
   gceServerGroupDetailsSections,
+  GceServerGroupLaunchConfigSection,
 } from './gceServerGroupDetails';
-import { GceInstanceFlexibilityPolicyDetails } from './GceInstanceFlexibilityPolicyDetails';
 import { GceResizeServerGroupModal } from './resize/GceResizeServerGroupModal';
 import { GceRollbackServerGroupModal } from './rollback/GceRollbackServerGroupModal';
 
@@ -22,7 +19,7 @@ describe('GCE server group details integration', () => {
   const RuntimeWrapper = ({ children }: React.PropsWithChildren<{}>) => (
     <DeckRuntimeContext.Provider value={{ services: runtimeServices } as any}>{children}</DeckRuntimeContext.Provider>
   );
-  const mount = (component: React.ReactElement) => enzymeMount(component, { wrappingComponent: RuntimeWrapper });
+  const renderWithRuntime = (component: React.ReactElement) => render(<RuntimeWrapper>{component}</RuntimeWrapper>);
 
   beforeEach(() => {
     runtimeServices = {
@@ -57,82 +54,78 @@ describe('GCE server group details integration', () => {
         { ...eligibleRollbackCandidate, app: 'other', name: 'other-main-v003' },
         { ...eligibleRollbackCandidate, isDisabled: false, name: 'fnord-main-v002' },
       ],
-      refresh: jasmine.createSpy('refresh'),
+      refresh: vi.fn(),
     },
   } as any;
 
-  const managedAction = (wrapper: any, label: string) =>
-    wrapper.find(ManagedMenuItem).filterWhere((item: any) => item.prop('children') === label);
-
-  const linkAction = (wrapper: any, label: string) =>
-    wrapper.find('a').filterWhere((link: any) => link.text() === label);
-
-  it('registers autoscaling and auto-healing sections backed by the completed details components', () => {
+  it('registered policy sections derive enabled mutation controls from the provider state', () => {
     registerGoogleProvider();
-
-    expect(CloudProviderRegistry.getValue('gce', 'serverGroup.detailsSections')).toEqual(gceServerGroupDetailsSections);
-
-    const renderedSections = gceServerGroupDetailsSections.map((Section) =>
-      shallow(<Section app={app} serverGroup={serverGroup} />),
-    );
-    const autoscaling = renderedSections.find(
-      (section) => section.find(CollapsibleSection).prop('heading') === 'Autoscaling',
-    );
-    const autoHealing = renderedSections.find(
-      (section) => section.find(CollapsibleSection).prop('heading') === 'Auto-healing',
+    vi.spyOn(CloudProviderRegistry, 'isDisabled').mockReturnValue(false);
+
+    const sections = CloudProviderRegistry.getValue('gce', 'serverGroup.detailsSections');
+    expect(sections).toEqual(gceServerGroupDetailsSections);
+    const policySections = sections.slice(-2);
+    render(
+      <>
+        {policySections.map((Section: React.ComponentType<any>, index: number) => (
+          <Section key={index} app={app} serverGroup={serverGroup} />
+        ))}
+      </>,
     );
 
-    expect(autoscaling.find(GceAutoscalingPolicyDetails).props()).toEqual(
-      jasmine.objectContaining({ application: app, policy: serverGroup.autoscalingPolicy, serverGroup }),
-    );
-    expect(autoHealing.find(GceAutoHealingPolicyDetails).props()).toEqual(
-      jasmine.objectContaining({ application: app, policy: serverGroup.autoHealingPolicy, serverGroup }),
-    );
+    expandSection('Autoscaling');
+    expandSection('Auto-healing');
+    expect(screen.getByText('Min # VMs')).toBeInTheDocument();
+    expect(screen.getByText('fnord-health-check')).toBeInTheDocument();
+    expect(screen.getByTestId('edit-autoscaling-policy')).toBeInTheDocument();
+    expect(screen.getByTestId('delete-autoscaling-policy')).toBeInTheDocument();
+    expect(screen.getByTestId('edit-auto-healing-policy')).toBeInTheDocument();
+    expect(screen.getByTestId('delete-auto-healing-policy')).toBeInTheDocument();
   });
 
-  it('keeps policy summaries read-only when GCE ad-hoc infrastructure writes are disabled', () => {
-    spyOn(CloudProviderRegistry, 'isDisabled').and.returnValue(true);
-    const renderedSections = gceServerGroupDetailsSections.map((Section) =>
-      shallow(<Section app={app} serverGroup={serverGroup} />),
-    );
-    const autoscalingSection = renderedSections.find(
-      (section) => section.find(CollapsibleSection).prop('heading') === 'Autoscaling',
-    );
-    const autoHealingSection = renderedSections.find(
-      (section) => section.find(CollapsibleSection).prop('heading') === 'Auto-healing',
+  it('registered policy sections derive read-only summaries from disabled provider state', () => {
+    registerGoogleProvider();
+    vi.spyOn(CloudProviderRegistry, 'isDisabled').mockReturnValue(true);
+    const policySections = CloudProviderRegistry.getValue('gce', 'serverGroup.detailsSections').slice(-2);
+    render(
+      <>
+        {policySections.map((Section: React.ComponentType<any>, index: number) => (
+          <Section key={index} app={app} serverGroup={serverGroup} />
+        ))}
+      </>,
     );
-    const autoscaling = shallow(autoscalingSection.find(GceAutoscalingPolicyDetails).getElement());
-    const autoHealing = shallow(autoHealingSection.find(GceAutoHealingPolicyDetails).getElement());
-
-    expect(autoscaling.text()).toContain('Min # VMs');
-    expect(autoscaling.find('[data-testid="edit-autoscaling-policy"]').length).toBe(0);
-    expect(autoscaling.find('[data-testid="delete-autoscaling-policy"]').length).toBe(0);
-    expect(autoHealing.text()).toContain('fnord-health-check');
-    expect(autoHealing.find('[data-testid="edit-auto-healing-policy"]').length).toBe(0);
-    expect(autoHealing.find('[data-testid="delete-auto-healing-policy"]').length).toBe(0);
+    expandSection('Autoscaling');
+    expandSection('Auto-healing');
+
+    expect(screen.getByText('Min # VMs')).toBeInTheDocument();
+    expect(screen.getByText('fnord-health-check')).toBeInTheDocument();
+    expect(screen.queryByTestId('edit-autoscaling-policy')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('delete-autoscaling-policy')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('edit-auto-healing-policy')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('delete-auto-healing-policy')).not.toBeInTheDocument();
   });
 
-  it('does not offer policy creation when GCE ad-hoc infrastructure writes are disabled', () => {
-    spyOn(CloudProviderRegistry, 'isDisabled').and.returnValue(true);
+  it('registered policy sections do not offer policy creation when provider mutations are disabled', () => {
+    registerGoogleProvider();
+    vi.spyOn(CloudProviderRegistry, 'isDisabled').mockReturnValue(true);
     const serverGroupWithoutPolicies = {
       ...serverGroup,
       autoscalingPolicy: undefined,
       autoHealingPolicy: undefined,
     };
-    const renderedSections = gceServerGroupDetailsSections.map((Section) =>
-      shallow(<Section app={app} serverGroup={serverGroupWithoutPolicies} />),
-    );
-    const autoscalingSection = renderedSections.find(
-      (section) => section.find(CollapsibleSection).prop('heading') === 'Autoscaling',
-    );
-    const autoHealingSection = renderedSections.find(
-      (section) => section.find(CollapsibleSection).prop('heading') === 'Auto-healing',
+    const policySections = CloudProviderRegistry.getValue('gce', 'serverGroup.detailsSections').slice(-2);
+    render(
+      <>
+        {policySections.map((Section: React.ComponentType<any>, index: number) => (
+          <Section key={index} app={app} serverGroup={serverGroupWithoutPolicies} />
+        ))}
+      </>,
     );
-    const autoscaling = shallow(autoscalingSection.find(GceAutoscalingPolicyDetails).getElement());
-    const autoHealing = shallow(autoHealingSection.find(GceAutoHealingPolicyDetails).getElement());
 
-    expect(autoscaling.find('[data-testid="add-autoscaling-policy"]').length).toBe(0);
-    expect(autoHealing.find('[data-testid="add-auto-healing-policy"]').length).toBe(0);
+    expandSection('Autoscaling');
+    expandSection('Auto-healing');
+    expect(screen.queryByTestId('add-autoscaling-policy')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('add-auto-healing-policy')).not.toBeInTheDocument();
   });
 
   it('renders target shape and instance flexibility in the launch configuration without nesting definition lists', () => {
@@ -141,7 +134,7 @@ describe('GCE server group details integration', () => {
         preferred: { rank: 1, machineTypes: ['n2-standard-8'] },
       },
     };
-    const wrapper = shallow(
+    const { container } = render(
       <GceServerGroupLaunchConfigSection
         app={app}
         serverGroup={{
@@ -152,16 +145,17 @@ describe('GCE server group details integration', () => {
       />,
     );
 
-    expect(wrapper.find('dt').filterWhere((term) => term.text() === 'Target shape').length).toBe(1);
-    expect(wrapper.find('dd').filterWhere((definition) => definition.text() === 'BALANCED').length).toBe(1);
-    expect(wrapper.find(GceInstanceFlexibilityPolicyDetails).prop('instanceFlexibilityPolicy')).toBe(
-      instanceFlexibilityPolicy,
-    );
-    expect(wrapper.find('dl dl').length).toBe(0);
+    expect(screen.getAllByText('Target shape', { selector: 'dt' })).toHaveLength(1);
+    expect(screen.getAllByText('BALANCED', { selector: 'dd' })).toHaveLength(1);
+    expect(definition('Target shape')).toBe('BALANCED');
+    expect(definition('Selection')).toBe('preferred');
+    expect(definition('Rank')).toBe('1');
+    expect(definition('Machine types')).toBe('n2-standard-8');
+    expect(container.querySelectorAll('dl dl')).toHaveLength(0);
   });
 
   it('renders shielded settings with stable, legacy, then top-level field precedence', () => {
-    const wrapper = shallow(
+    render(
       <GceServerGroupLaunchConfigSection
         app={app}
         serverGroup={{
@@ -173,118 +167,145 @@ describe('GCE server group details integration', () => {
         }}
       />,
     );
-    const definitions = (label: string) => {
-      const index = wrapper
-        .find('dt')
-        .map((candidate) => candidate.text())
-        .indexOf(label);
-      return index < 0 ? undefined : wrapper.find('dd').at(index).text();
-    };
 
-    expect(definitions('Secure Boot')).toBe('false');
-    expect(definitions('vTPM')).toBe('false');
-    expect(definitions('Integrity Monitoring')).toBe('false');
+    expect(definition('Secure Boot')).toBe('false');
+    expect(definition('vTPM')).toBe('false');
+    expect(definition('Integrity Monitoring')).toBe('false');
   });
 
   it('adds rollback and resize without changing existing enabled action visibility', () => {
-    const wrapper = mount(<GceServerGroupActions app={app} serverGroup={serverGroup} />);
-
-    expect(managedAction(wrapper, 'Rollback').length).toBe(1);
-    expect(managedAction(wrapper, 'Resize').length).toBe(1);
-    expect(linkAction(wrapper, 'Clone').length).toBe(1);
-    expect(linkAction(wrapper, 'Disable').length).toBe(1);
-    expect(linkAction(wrapper, 'Enable').length).toBe(0);
-    expect(linkAction(wrapper, 'Destroy').length).toBe(1);
+    registerGoogleProvider();
+    const RegisteredActions = CloudProviderRegistry.getValue('gce', 'serverGroup.detailsActions');
+    renderWithRuntime(<RegisteredActions app={app} serverGroup={serverGroup} />);
+
+    expect(screen.getByText('Rollback')).toBeInTheDocument();
+    expect(screen.getByText('Resize')).toBeInTheDocument();
+    expect(screen.getByText('Clone')).toBeInTheDocument();
+    expect(screen.getByText('Disable')).toBeInTheDocument();
+    expect(screen.queryByText('Enable')).not.toBeInTheDocument();
+    expect(screen.getByText('Destroy')).toBeInTheDocument();
   });
 
   it('opens clone with the command builder and runtime services from Deck context', async () => {
     const command = { application: serverGroup.app, stack: 'main' };
     runtimeServices.serverGroupCommandBuilder = {
-      buildServerGroupCommandFromExisting: jasmine
-        .createSpy('buildServerGroupCommandFromExisting')
-        .and.resolveTo(command),
+      buildServerGroupCommandFromExisting: vi.fn().mockResolvedValue(command),
     };
-    const show = spyOn(GceCloneServerGroupModal, 'show').and.resolveTo({} as any);
-    const wrapper = mount(<GceServerGroupActions app={app} serverGroup={serverGroup} />);
+    const show = vi.spyOn(GceCloneServerGroupModal, 'show').mockResolvedValue({} as any);
+    renderWithRuntime(<GceServerGroupActions app={app} serverGroup={serverGroup} />);
 
-    linkAction(wrapper, 'Clone').simulate('click');
-    await Promise.resolve();
+    fireEvent.click(screen.getByText('Clone'));
 
     expect(runtimeServices.serverGroupCommandBuilder.buildServerGroupCommandFromExisting).toHaveBeenCalledWith(
       app,
       serverGroup,
     );
-    expect(show).toHaveBeenCalledWith(
-      { application: app, command, title: `Clone ${serverGroup.name}` },
-      runtimeServices,
+    await waitFor(() =>
+      expect(show).toHaveBeenCalledWith(
+        { application: app, command, title: `Clone ${serverGroup.name}` },
+        runtimeServices,
+      ),
     );
   });
 
   it('keeps rollback hidden for a disabled server group without changing existing disabled action visibility', () => {
-    const wrapper = mount(<GceServerGroupActions app={app} serverGroup={{ ...serverGroup, isDisabled: true }} />);
+    renderWithRuntime(<GceServerGroupActions app={app} serverGroup={{ ...serverGroup, isDisabled: true }} />);
 
-    expect(managedAction(wrapper, 'Rollback').length).toBe(0);
-    expect(managedAction(wrapper, 'Resize').length).toBe(1);
-    expect(linkAction(wrapper, 'Disable').length).toBe(0);
-    expect(linkAction(wrapper, 'Enable').length).toBe(1);
+    expect(screen.queryByText('Rollback')).not.toBeInTheDocument();
+    expect(screen.getByText('Resize')).toBeInTheDocument();
+    expect(screen.queryByText('Disable')).not.toBeInTheDocument();
+    expect(screen.getByText('Enable')).toBeInTheDocument();
   });
 
-  it('opens rollback with filtered candidates and the existing server group writer', () => {
-    const show = spyOn(GceRollbackServerGroupModal, 'show').and.returnValue(Promise.resolve({} as any));
-    const wrapper = mount(<GceServerGroupActions app={app} serverGroup={serverGroup} />);
+  it('opens rollback with filtered candidates and the existing server group writer', async () => {
+    const show = vi.spyOn(GceRollbackServerGroupModal, 'show').mockReturnValue(Promise.resolve({} as any));
+    renderWithRuntime(<GceServerGroupActions app={app} serverGroup={serverGroup} />);
 
-    managedAction(wrapper, 'Rollback').prop('onClick')();
+    fireEvent.click(screen.getByText('Rollback'));
 
-    expect(show).toHaveBeenCalledOnceWith({
-      application: app,
-      serverGroup,
-      serverGroups: [eligibleRollbackCandidate],
-      serverGroupWriter: runtimeServices.serverGroupWriter,
-    });
+    await waitFor(() =>
+      expect(show).toHaveBeenCalledExactlyOnceWith({
+        application: app,
+        serverGroup,
+        serverGroups: [eligibleRollbackCandidate],
+        serverGroupWriter: runtimeServices.serverGroupWriter,
+      }),
+    );
   });
 
-  it('keeps rollback available when there are no candidates and delegates empty handling to the modal', () => {
+  it('keeps rollback available when there are no candidates and delegates empty handling to the modal', async () => {
     const appWithoutCandidates = { ...app, serverGroups: { ...app.serverGroups, data: [] } };
-    const show = spyOn(GceRollbackServerGroupModal, 'show').and.returnValue(Promise.resolve({} as any));
-    const wrapper = mount(<GceServerGroupActions app={appWithoutCandidates} serverGroup={serverGroup} />);
+    const show = vi.spyOn(GceRollbackServerGroupModal, 'show').mockReturnValue(Promise.resolve({} as any));
+    renderWithRuntime(<GceServerGroupActions app={appWithoutCandidates} serverGroup={serverGroup} />);
 
-    expect(managedAction(wrapper, 'Rollback').length).toBe(1);
-    managedAction(wrapper, 'Rollback').prop('onClick')();
+    fireEvent.click(screen.getByText('Rollback'));
 
-    expect(show).toHaveBeenCalledOnceWith(
-      jasmine.objectContaining({ application: appWithoutCandidates, serverGroup, serverGroups: [] }),
+    await waitFor(() =>
+      expect(show).toHaveBeenCalledExactlyOnceWith(
+        expect.objectContaining({ application: appWithoutCandidates, serverGroup, serverGroups: [] }),
+      ),
     );
   });
 
-  it('opens resize with the completed writers', () => {
-    const show = spyOn(GceResizeServerGroupModal, 'show').and.returnValue(Promise.resolve());
-    const wrapper = mount(<GceServerGroupActions app={app} serverGroup={serverGroup} />);
+  it('opens resize with the completed writers', async () => {
+    const show = vi.spyOn(GceResizeServerGroupModal, 'show').mockReturnValue(Promise.resolve());
+    renderWithRuntime(<GceServerGroupActions app={app} serverGroup={serverGroup} />);
 
-    managedAction(wrapper, 'Resize').prop('onClick')();
+    fireEvent.click(screen.getByText('Resize'));
 
-    expect(show).toHaveBeenCalledOnceWith({
-      application: app,
-      autoscalingPolicyWriter: GceAutoscalingPolicyWriter,
-      serverGroup,
-      serverGroupWriter: runtimeServices.serverGroupWriter,
-    });
+    await waitFor(() =>
+      expect(show).toHaveBeenCalledExactlyOnceWith({
+        application: app,
+        autoscalingPolicyWriter: GceAutoscalingPolicyWriter,
+        serverGroup,
+        serverGroupWriter: runtimeServices.serverGroupWriter,
+      }),
+    );
   });
 
   it('protects rollback and resize with the managed-resource interstitial', () => {
-    const wrapper = mount(<GceServerGroupActions app={app} serverGroup={{ ...serverGroup, isManaged: true }} />);
+    const confirm = vi.spyOn(ConfirmationModalService, 'confirm').mockReturnValue(new Promise(() => undefined) as any);
+    renderWithRuntime(
+      <GceServerGroupActions
+        app={app}
+        serverGroup={{
+          ...serverGroup,
+          isManaged: true,
+          managedResourceSummary: {
+            id: 'managed-resource-id',
+            isPaused: false,
+            locations: { account: 'prod', regions: [] },
+          },
+        }}
+      />,
+    );
 
     ['Rollback', 'Resize'].forEach((label) => {
-      expect(managedAction(wrapper, label).props()).toEqual(
-        jasmine.objectContaining({ application: app, resource: jasmine.objectContaining({ isManaged: true }) }),
-      );
+      fireEvent.click(screen.getByText(label));
     });
+    expect(confirm).toHaveBeenCalledTimes(2);
+    expect(confirm.mock.calls.every(([params]) => params.header === 'Pause Management?')).toBe(true);
   });
 
   it('hides server group actions when GCE ad-hoc infrastructure writes are disabled', () => {
-    spyOn(CloudProviderRegistry, 'isDisabled').and.returnValue(true);
+    registerGoogleProvider();
+    vi.spyOn(CloudProviderRegistry, 'isDisabled').mockReturnValue(true);
+    const RegisteredActions = CloudProviderRegistry.getValue('gce', 'serverGroup.detailsActions');
 
-    const wrapper = mount(<GceServerGroupActions app={app} serverGroup={serverGroup} />);
+    const { container } = renderWithRuntime(<RegisteredActions app={app} serverGroup={serverGroup} />);
 
-    expect(wrapper.isEmptyRender()).toBe(true);
+    expect(container).toBeEmptyDOMElement();
   });
 });
+
+function expandSection(name: string): void {
+  const heading = screen.getByRole('heading', { name });
+  const section = heading.closest('.collapsible-section');
+  if (!section?.querySelector('.content-body')) {
+    fireEvent.click(heading.parentElement as HTMLElement);
+  }
+}
+
+function definition(term: string): string | undefined {
+  return screen.getByText(term, { selector: 'dt' }).nextElementSibling?.textContent ?? undefined;
+}