@spinnaker/google 2026.3.2 → 2026.4.1

package/src/pipeline/stages/googleStageConfig.spec.js

@@ -1,28 +1,34 @@
-import { shallow } from 'enzyme';
+import { fireEvent, render, screen } from '@testing-library/react';
 import React from 'react';
 
-import { StageConfigField } from '@spinnaker/core';
+import { AccountService } from '@spinnaker/core';
 
 import { GceFindImageStageConfig } from './googleStageConfig';
 
-describe('GCE find image onlyEnabled control', () => {
-  function renderStage(stage, updateStage = jasmine.createSpy('updateStage')) {
-    const wrapper = shallow(React.createElement(GceFindImageStageConfig, { application: {}, stage, updateStage }), {
-      disableLifecycleMethods: true,
-    });
-    const field = wrapper.find(StageConfigField).filterWhere((node) => node.prop('label') === 'Server Group Filters');
+vi.mock('@spinnaker/core', async (importOriginal) => {
+  const actual = await importOriginal();
+  return { ...actual, AccountRegionClusterSelector: () => null };
+});
 
-    return { checkbox: field.find('input[type="checkbox"]'), field, updateStage };
+describe('GCE find image onlyEnabled control', () => {
+  beforeEach(() => vi.spyOn(AccountService, 'listAccounts').mockResolvedValue([]));
+
+  function renderStage(stage, updateStage = vi.fn()) {
+    const rendered = render(React.createElement(GceFindImageStageConfig, { application: {}, stage, updateStage }));
+    return {
+      ...rendered,
+      checkbox: screen.getByRole('checkbox', { name: 'Only consider enabled Server Groups' }),
+      updateStage,
+    };
   }
 
   it('defaults to considering only enabled server groups', () => {
     const stage = {};
-    const { checkbox, field } = renderStage(stage);
+    const { checkbox } = renderStage(stage);
 
     expect(stage.onlyEnabled).toBe(true);
-    expect(field.exists()).toBe(true);
-    expect(field.find('label').text().trim()).toBe('Only consider enabled Server Groups');
-    expect(checkbox.prop('checked')).toBe(true);
+    expect(screen.getByText('Server Group Filters')).toBeInTheDocument();
+    expect(checkbox).toBeChecked();
   });
 
   it('preserves an explicit false value', () => {
@@ -30,15 +36,15 @@ describe('GCE find image onlyEnabled control', () => {
     const { checkbox } = renderStage(stage);
 
     expect(stage.onlyEnabled).toBe(false);
-    expect(checkbox.prop('checked')).toBe(false);
+    expect(checkbox).not.toBeChecked();
   });
 
   it('updates onlyEnabled with the checkbox value', () => {
     const stage = { onlyEnabled: true };
     const { checkbox, updateStage } = renderStage(stage);
 
-    checkbox.simulate('change', { target: { checked: false } });
+    fireEvent.click(checkbox);
 
-    expect(updateStage).toHaveBeenCalledWith(jasmine.objectContaining({ onlyEnabled: false }));
+    expect(updateStage).toHaveBeenCalledWith(expect.objectContaining({ onlyEnabled: false }));
   });
 });

package/src/securityGroup/configure/GceSecurityGroupModal.spec.tsx

@@ -1,25 +1,36 @@
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { UIRouterContext, UIRouterReact } from '@uirouter/react';
 import React from 'react';
-import { mount as enzymeMount } from 'enzyme';
 
-import { DeckRuntimeContext, SecurityGroupWriter, SubmitButton } from '@spinnaker/core';
+import { DeckRuntimeContext, SecurityGroupWriter, TaskReader } from '@spinnaker/core';
 
-import { GceSecurityGroupModalComponent as GceSecurityGroupModal } from './GceSecurityGroupModal';
+import {
+  GceSecurityGroupModalComponent as GceSecurityGroupModal,
+  initializeGceSecurityGroupForModal,
+} from './GceSecurityGroupModal';
 
 describe('GceSecurityGroupModal', () => {
   let runtimeServices: any;
-  const RuntimeWrapper = ({ children }: React.PropsWithChildren<{}>) => (
-    <DeckRuntimeContext.Provider value={{ services: runtimeServices } as any}>{children}</DeckRuntimeContext.Provider>
-  );
-  const mount = (component: React.ReactElement) => enzymeMount(component, { wrappingComponent: RuntimeWrapper });
+  const application = {
+    getDataSource: vi.fn(),
+    name: 'my-app',
+    securityGroups: { refresh: vi.fn() },
+  };
 
   beforeEach(() => {
     runtimeServices = { securityGroupReader: { getAllSecurityGroups: () => Promise.resolve({}) } };
   });
 
-  const application = {
-    name: 'my-app',
-    securityGroups: { refresh: jasmine.createSpy('refresh') },
-  };
+  function renderModal(component: React.ReactElement) {
+    const router = new UIRouterReact();
+    return render(
+      <UIRouterContext.Provider value={router}>
+        <DeckRuntimeContext.Provider value={{ services: runtimeServices } as any}>
+          {component}
+        </DeckRuntimeContext.Provider>
+      </UIRouterContext.Provider>,
+    );
+  }
 
   function validSecurityGroup(overrides: any = {}): any {
     return {
@@ -51,43 +62,43 @@ describe('GceSecurityGroupModal', () => {
     };
   }
 
-  async function flush(): Promise<void> {
-    await Promise.resolve();
-    await Promise.resolve();
+  function fillValidSecurityGroup(name = 'new-firewall'): void {
+    fireEvent.change(screen.getByRole('textbox', { name: 'Name' }), { target: { value: name } });
+    fireEvent.change(screen.getByRole('textbox', { name: 'Source CIDRs' }), {
+      target: { value: '10.0.0.0/8' },
+    });
+    fireEvent.change(screen.getByRole('spinbutton', { name: 'Start port 1' }), { target: { value: '443' } });
+    fireEvent.change(screen.getByRole('spinbutton', { name: 'End port 1' }), { target: { value: '443' } });
   }
 
   it('keeps create submit disabled until the global firewall inventory has loaded', async () => {
     let finishLoading: ((securityGroups: any) => void) | undefined;
-    const getAllSecurityGroups = jasmine.createSpy('getAllSecurityGroups').and.returnValue(
+    const getAllSecurityGroups = vi.fn().mockReturnValue(
       new Promise((resolve) => {
         finishLoading = resolve;
       }),
     );
     runtimeServices.securityGroupReader = { getAllSecurityGroups };
-    const wrapper = mount(
+    renderModal(
       <GceSecurityGroupModal
         application={{ ...application, securityGroups: { data: [] } } as any}
         credentials="my-account"
       />,
     );
-    wrapper.setState({ securityGroup: validSecurityGroup({ name: 'new-firewall' }) } as any);
+    fillValidSecurityGroup();
 
-    expect(wrapper.find(SubmitButton).prop('isDisabled')).toBe(true);
+    expect(screen.getByRole('button', { name: 'Create' })).toBeDisabled();
 
-    finishLoading?.(globalSecurityGroups());
-    await flush();
-    wrapper.update();
+    await act(async () => finishLoading?.(globalSecurityGroups()));
 
-    expect(wrapper.find(SubmitButton).prop('isDisabled')).toBe(false);
+    await waitFor(() => expect(screen.getByRole('button', { name: 'Create' })).toBeEnabled());
   });
 
   (['create', 'clone'] as const).forEach((mode) => {
     it(`rejects a ${mode} name used in the same account on another network outside the application`, async () => {
-      const getAllSecurityGroups = jasmine
-        .createSpy('getAllSecurityGroups')
-        .and.returnValue(Promise.resolve(globalSecurityGroups()));
+      const getAllSecurityGroups = vi.fn().mockResolvedValue(globalSecurityGroups());
       runtimeServices.securityGroupReader = { getAllSecurityGroups };
-      const wrapper = mount(
+      renderModal(
         <GceSecurityGroupModal
           application={{ ...application, securityGroups: { data: [] } } as any}
           credentials="my-account"
@@ -95,87 +106,81 @@ describe('GceSecurityGroupModal', () => {
           securityGroup={mode === 'clone' ? validSecurityGroup({ name: 'source-firewall' }) : undefined}
         />,
       );
-      wrapper.setState({ securityGroup: validSecurityGroup() } as any);
+      fillValidSecurityGroup('existing-firewall');
 
-      await flush();
-      wrapper.update();
+      await waitFor(() => expect(getAllSecurityGroups).toHaveBeenCalled());
 
-      expect(getAllSecurityGroups).toHaveBeenCalled();
-      expect(wrapper.find(SubmitButton).prop('isDisabled')).toBe(true);
+      expect(screen.getByRole('button', { name: mode === 'clone' ? 'Clone' : 'Create' })).toBeDisabled();
     });
   });
 
   it('permits a name used only in another account and permits editing the current firewall identity', async () => {
-    const getAllSecurityGroups = jasmine
-      .createSpy('getAllSecurityGroups')
-      .and.returnValue(Promise.resolve(globalSecurityGroups()));
+    const getAllSecurityGroups = vi.fn().mockResolvedValue(globalSecurityGroups());
     runtimeServices.securityGroupReader = { getAllSecurityGroups };
-    const createWrapper = mount(<GceSecurityGroupModal application={application as any} credentials="my-account" />);
-    createWrapper.setState({ securityGroup: validSecurityGroup({ name: 'cross-account-firewall' }) } as any);
-    const editWrapper = mount(
+    const create = renderModal(<GceSecurityGroupModal application={application as any} credentials="my-account" />);
+    fillValidSecurityGroup('cross-account-firewall');
+    await waitFor(() => expect(screen.getByRole('button', { name: 'Create' })).toBeEnabled());
+    create.unmount();
+
+    renderModal(
       <GceSecurityGroupModal application={application as any} mode="edit" securityGroup={validSecurityGroup()} />,
     );
-
-    await flush();
-    createWrapper.update();
-    editWrapper.update();
-
-    expect(createWrapper.find(SubmitButton).prop('isDisabled')).toBe(false);
-    expect(editWrapper.find(SubmitButton).prop('isDisabled')).toBe(false);
+    expect(screen.getByRole('button', { name: 'Update' })).toBeEnabled();
   });
 
   it('keeps create submit disabled when the global firewall inventory cannot be loaded', async () => {
-    const getAllSecurityGroups = jasmine
-      .createSpy('getAllSecurityGroups')
-      .and.returnValue(Promise.reject(new Error('inventory unavailable')));
+    const getAllSecurityGroups = vi.fn().mockRejectedValue(new Error('inventory unavailable'));
     runtimeServices.securityGroupReader = { getAllSecurityGroups };
-    const wrapper = mount(<GceSecurityGroupModal application={application as any} credentials="my-account" />);
-    wrapper.setState({ securityGroup: validSecurityGroup({ name: 'new-firewall' }) } as any);
+    renderModal(<GceSecurityGroupModal application={application as any} credentials="my-account" />);
+    fillValidSecurityGroup();
 
-    await flush();
-    wrapper.update();
-
-    expect(wrapper.find(SubmitButton).prop('isDisabled')).toBe(true);
-    expect(wrapper.find('.security-group-validation-error').text()).toContain('Unable to validate firewall name');
+    expect(await screen.findByText('Unable to validate firewall name.')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Create' })).toBeDisabled();
   });
 
   (['create', 'clone'] as const).forEach((mode) => {
-    it(`waits for refreshed security groups before closing and navigating after ${mode}`, () => {
+    it(`waits for refreshed security groups before closing and navigating after ${mode}`, async () => {
       let finishRefresh: (() => void) | undefined;
-      const refresh = jasmine.createSpy('refresh');
-      const onNextRefresh = jasmine.createSpy('onNextRefresh').and.callFake((callback: () => void) => {
+      const refresh = vi.fn();
+      const onNextRefresh = vi.fn().mockImplementation((callback: () => void) => {
         finishRefresh = callback;
         return () => undefined;
       });
-      const closeModal = jasmine.createSpy('closeModal');
-      const state = {
-        go: jasmine.createSpy('go'),
-        includes: jasmine.createSpy('includes').and.returnValue(mode === 'clone'),
+      const closeModal = vi.fn();
+      const stateService = {
+        go: vi.fn(),
+        includes: vi.fn().mockReturnValue(mode === 'clone'),
       };
-      const modal = new GceSecurityGroupModal({
-        application: { name: 'my-app', securityGroups: { onNextRefresh, refresh } },
-        closeModal,
-        credentials: 'my-account',
-        mode,
-        router: {},
-        securityGroup: mode === 'clone' ? validSecurityGroup({ name: 'source-firewall' }) : undefined,
-        stateParams: {},
-        stateService: state,
-      } as any);
-      (modal as any).mounted = true;
-      (modal.state as any).securityGroup = validSecurityGroup({ name: ' new-firewall ', network: ' default ' });
-
-      (modal as any).onTaskComplete();
-
-      expect(onNextRefresh).toHaveBeenCalled();
-      expect(onNextRefresh.calls.first().invocationOrder).toBeLessThan(refresh.calls.first().invocationOrder);
+      const task = { id: 'task' } as any;
+      vi.spyOn(SecurityGroupWriter, 'upsertSecurityGroup').mockResolvedValue(task);
+      vi.spyOn(TaskReader, 'waitUntilTaskCompletes').mockResolvedValue(task);
+      renderModal(
+        <GceSecurityGroupModal
+          application={{ getDataSource: vi.fn(), name: 'my-app', securityGroups: { onNextRefresh, refresh } }}
+          closeModal={closeModal}
+          credentials="my-account"
+          mode={mode}
+          securityGroup={mode === 'clone' ? validSecurityGroup({ name: 'source-firewall' }) : undefined}
+          stateService={stateService as any}
+        />,
+      );
+      fillValidSecurityGroup(' new-firewall ');
+      fireEvent.change(screen.getByRole('textbox', { name: 'Network' }), { target: { value: ' default ' } });
+
+      await waitFor(() =>
+        expect(screen.getByRole('button', { name: mode === 'clone' ? 'Clone' : 'Create' })).toBeEnabled(),
+      );
+      fireEvent.click(screen.getByRole('button', { name: mode === 'clone' ? 'Clone' : 'Create' }));
+      await waitFor(() => expect(refresh).toHaveBeenCalled());
+
+      expect(onNextRefresh.mock.invocationCallOrder[0]).toBeLessThan(refresh.mock.invocationCallOrder[0]);
       expect(closeModal).not.toHaveBeenCalled();
-      expect(state.go).not.toHaveBeenCalled();
+      expect(stateService.go).not.toHaveBeenCalled();
 
       finishRefresh?.();
 
       expect(closeModal).toHaveBeenCalled();
-      expect(state.go).toHaveBeenCalledWith(mode === 'clone' ? '^.firewallDetails' : '.firewallDetails', {
+      expect(stateService.go).toHaveBeenCalledWith(mode === 'clone' ? '^.firewallDetails' : '.firewallDetails', {
         accountId: 'my-account',
         name: 'new-firewall',
         provider: 'gce',
@@ -185,65 +190,65 @@ describe('GceSecurityGroupModal', () => {
     });
   });
 
-  it('owns its refresh subscription across replacement and unmount', () => {
-    const firstUnsubscribe = jasmine.createSpy('firstUnsubscribe');
-    const secondUnsubscribe = jasmine.createSpy('secondUnsubscribe');
+  it('owns its refresh subscription through unmount', async () => {
+    const unsubscribe = vi.fn();
     const callbacks: Array<() => void> = [];
-    const onNextRefresh = jasmine.createSpy('onNextRefresh').and.callFake((callback: () => void) => {
+    const onNextRefresh = vi.fn().mockImplementation((callback: () => void) => {
       callbacks.push(callback);
-      return callbacks.length === 1 ? firstUnsubscribe : secondUnsubscribe;
+      return unsubscribe;
     });
-    const refresh = jasmine.createSpy('refresh');
-    const closeModal = jasmine.createSpy('closeModal');
-    const stateService = { go: jasmine.createSpy('go'), includes: jasmine.createSpy('includes') };
-    const modal = new GceSecurityGroupModal({
-      application: { name: 'my-app', securityGroups: { onNextRefresh, refresh } },
-      closeModal,
-      credentials: 'my-account',
-      stateService,
-    } as any) as any;
-    modal.mounted = true;
-
-    modal.onTaskComplete();
-
-    expect(onNextRefresh.calls.first().invocationOrder).toBeLessThan(refresh.calls.first().invocationOrder);
-
-    modal.onTaskComplete();
+    const refresh = vi.fn();
+    const closeModal = vi.fn();
+    const stateService = { go: vi.fn(), includes: vi.fn() };
+    const task = { id: 'task' } as any;
+    vi.spyOn(SecurityGroupWriter, 'upsertSecurityGroup').mockResolvedValue(task);
+    vi.spyOn(TaskReader, 'waitUntilTaskCompletes').mockResolvedValue(task);
+    const rendered = renderModal(
+      <GceSecurityGroupModal
+        application={{ getDataSource: vi.fn(), name: 'my-app', securityGroups: { onNextRefresh, refresh } }}
+        closeModal={closeModal}
+        credentials="my-account"
+        stateService={stateService as any}
+      />,
+    );
+    fillValidSecurityGroup();
 
-    expect(firstUnsubscribe).toHaveBeenCalledTimes(1);
+    await waitFor(() => expect(screen.getByRole('button', { name: 'Create' })).toBeEnabled());
+    fireEvent.click(screen.getByRole('button', { name: 'Create' }));
+    await waitFor(() => expect(refresh).toHaveBeenCalled());
+    expect(onNextRefresh.mock.invocationCallOrder[0]).toBeLessThan(refresh.mock.invocationCallOrder[0]);
 
-    modal.componentWillUnmount();
-    callbacks[1]();
+    rendered.unmount();
+    callbacks[0]();
 
-    expect(secondUnsubscribe).toHaveBeenCalledTimes(1);
-    expect(modal.applicationRefreshUnsubscribe).toBeUndefined();
+    expect(unsubscribe).toHaveBeenCalledTimes(1);
     expect(closeModal).not.toHaveBeenCalled();
     expect(stateService.go).not.toHaveBeenCalled();
   });
 
-  it('submits multiple protocol and port-range rows using the GCE firewall operation contract', () => {
-    const upsert = spyOn(SecurityGroupWriter, 'upsertSecurityGroup').and.returnValue(new Promise(() => {}));
-    const modal = new GceSecurityGroupModal({ application: application as any, credentials: 'my-account' } as any);
-    (modal.state as any).securityGroup = {
-      ...(modal.state as any).securityGroup,
-      name: 'my-app-firewall',
-      network: 'default',
-      sourceRanges: ['10.0.0.0/8'],
-      ipIngress: [
-        { type: 'tcp', startPort: 443, endPort: 443 },
-        { type: 'udp', startPort: 7001, endPort: 7002 },
-        { type: 'icmp' },
-      ],
-    };
-
-    (modal as any).submit();
-
-    expect(upsert.calls.mostRecent().args[0].allowed).toEqual([
+  it('submits multiple protocol and port-range rows using the GCE firewall operation contract', async () => {
+    runtimeServices.securityGroupReader = { getAllSecurityGroups: vi.fn().mockResolvedValue({}) };
+    const upsert = vi.spyOn(SecurityGroupWriter, 'upsertSecurityGroup').mockReturnValue(new Promise(() => undefined));
+    renderModal(<GceSecurityGroupModal application={application as any} credentials="my-account" />);
+    fillValidSecurityGroup('my-app-firewall');
+    fireEvent.click(screen.getByRole('button', { name: /Add New Protocol and Port Range/ }));
+    fireEvent.change(screen.getByRole('combobox', { name: 'Protocol 2' }), { target: { value: 'udp' } });
+    fireEvent.change(screen.getByRole('spinbutton', { name: 'Start port 2' }), { target: { value: '7001' } });
+    fireEvent.change(screen.getByRole('spinbutton', { name: 'End port 2' }), { target: { value: '7002' } });
+    fireEvent.click(screen.getByRole('button', { name: /Add New Protocol and Port Range/ }));
+    fireEvent.change(screen.getByRole('combobox', { name: 'Protocol 3' }), { target: { value: 'icmp' } });
+    fireEvent.change(screen.getByRole('spinbutton', { name: 'Start port 3' }), { target: { value: '' } });
+    fireEvent.change(screen.getByRole('spinbutton', { name: 'End port 3' }), { target: { value: '' } });
+
+    await waitFor(() => expect(screen.getByRole('button', { name: 'Create' })).toBeEnabled());
+    fireEvent.click(screen.getByRole('button', { name: 'Create' }));
+
+    expect(upsert.mock.lastCall[0].allowed).toEqual([
       { ipProtocol: 'tcp', portRanges: ['443-443'] },
       { ipProtocol: 'udp', portRanges: ['7001-7002'] },
       { ipProtocol: 'icmp' },
     ]);
-    expect(upsert.calls.mostRecent().args[2]).toBe('Create');
+    expect(upsert.mock.lastCall[2]).toBe('Create');
   });
 
   it('loads and normalizes all inbound rules for edit while retaining firewall identity', () => {
@@ -269,15 +274,8 @@ describe('GceSecurityGroupModal', () => {
       sourceTags: '[backend, jobs]',
       targetTags: '[web, api]',
     };
-    const upsert = spyOn(SecurityGroupWriter, 'upsertSecurityGroup').and.returnValue(new Promise(() => {}));
-    const modal = new GceSecurityGroupModal({
-      application: application as any,
-      mode: 'edit',
-      securityGroup: source,
-    } as any);
-
-    expect((modal.state as any).securityGroup).toEqual(
-      jasmine.objectContaining({
+    expect(initializeGceSecurityGroupForModal({ mode: 'edit', securityGroup: source }, application.name)).toEqual(
+      expect.objectContaining({
         accountId: 'my-account',
         credentials: 'my-account',
         id: 'my-firewall',
@@ -292,90 +290,76 @@ describe('GceSecurityGroupModal', () => {
         targetTags: ['web', 'api'],
       }),
     );
+    const upsert = vi.spyOn(SecurityGroupWriter, 'upsertSecurityGroup').mockReturnValue(new Promise(() => undefined));
+    renderModal(<GceSecurityGroupModal application={application as any} mode="edit" securityGroup={source} />);
 
-    (modal as any).submit();
+    fireEvent.click(screen.getByRole('button', { name: 'Update' }));
 
-    expect(upsert.calls.mostRecent().args[0]).toEqual(
-      jasmine.objectContaining({
-        accountId: 'my-account',
-        id: 'my-firewall',
-        name: 'my-firewall',
-      }),
+    expect(upsert.mock.lastCall[0]).toEqual(
+      expect.objectContaining({ accountId: 'my-account', id: 'my-firewall', name: 'my-firewall' }),
     );
-    expect(upsert.calls.mostRecent().args[0].allowed).toEqual([
+    expect(upsert.mock.lastCall[0].allowed).toEqual([
       { ipProtocol: 'tcp', portRanges: ['80-80'] },
       { ipProtocol: 'tcp', portRanges: ['443-444'] },
       { ipProtocol: 'icmp' },
     ]);
-    expect(upsert.calls.mostRecent().args[2]).toBe('Update');
+    expect(upsert.mock.lastCall[2]).toBe('Update');
   });
 
   it('preserves fetched firewall CIDRs from ipRangeRules without duplicating sourceRanges', () => {
-    const upsert = spyOn(SecurityGroupWriter, 'upsertSecurityGroup').and.returnValue(new Promise(() => {}));
-    const modal = new GceSecurityGroupModal({
-      application: application as any,
-      mode: 'edit',
-      securityGroup: {
-        accountName: 'my-account',
-        id: 'fetched-firewall',
-        ipRangeRules: [
-          {
-            portRanges: [{ startPort: 443, endPort: 443 }],
-            protocol: 'tcp',
-            range: { ip: '10.0.0.0', cidr: '/8' },
-          },
-          {
-            portRanges: [{ startPort: 53, endPort: 53 }],
-            protocol: 'udp',
-            range: { ip: '192.168.0.0', cidr: '/24' },
-          },
-        ],
-        name: 'fetched-firewall',
-        network: 'default',
-        sourceRanges: ['10.0.0.0/8'],
-      },
-    } as any);
-
-    expect((modal.state as any).securityGroup.sourceRanges).toEqual(['10.0.0.0/8', '192.168.0.0/24']);
+    const source = {
+      accountName: 'my-account',
+      id: 'fetched-firewall',
+      ipRangeRules: [
+        { portRanges: [{ startPort: 443, endPort: 443 }], protocol: 'tcp', range: { ip: '10.0.0.0', cidr: '/8' } },
+        { portRanges: [{ startPort: 53, endPort: 53 }], protocol: 'udp', range: { ip: '192.168.0.0', cidr: '/24' } },
+      ],
+      name: 'fetched-firewall',
+      network: 'default',
+      sourceRanges: ['10.0.0.0/8'],
+    };
+    expect(
+      initializeGceSecurityGroupForModal({ mode: 'edit', securityGroup: source }, application.name).sourceRanges,
+    ).toEqual(['10.0.0.0/8', '192.168.0.0/24']);
+    const upsert = vi.spyOn(SecurityGroupWriter, 'upsertSecurityGroup').mockReturnValue(new Promise(() => undefined));
+    renderModal(<GceSecurityGroupModal application={application as any} mode="edit" securityGroup={source} />);
 
-    (modal as any).submit();
+    fireEvent.click(screen.getByRole('button', { name: 'Update' }));
 
-    expect(upsert.calls.mostRecent().args[0].sourceRanges).toEqual(['10.0.0.0/8', '192.168.0.0/24']);
+    expect(upsert.mock.lastCall[0].sourceRanges).toEqual(['10.0.0.0/8', '192.168.0.0/24']);
   });
 
-  it('clears cloned firewall identity and name but preserves its editable rules', () => {
-    const upsert = spyOn(SecurityGroupWriter, 'upsertSecurityGroup').and.returnValue(new Promise(() => {}));
-    const modal = new GceSecurityGroupModal({
-      application: application as any,
-      mode: 'clone',
-      securityGroup: {
-        accountId: 'my-account',
-        id: 'source-firewall',
-        ipIngressRules: [{ protocol: 'sctp', portRanges: [{ startPort: 5000, endPort: 5001 }] }],
-        name: 'source-firewall',
-        network: 'default',
-        sourceRanges: ['10.0.0.0/8'],
-      },
-    } as any);
-
-    expect((modal.state as any).securityGroup).toEqual(
-      jasmine.objectContaining({
+  it('clears cloned firewall identity and name but preserves its editable rules', async () => {
+    const source = {
+      accountId: 'my-account',
+      id: 'source-firewall',
+      ipIngressRules: [{ protocol: 'sctp', portRanges: [{ startPort: 5000, endPort: 5001 }] }],
+      name: 'source-firewall',
+      network: 'default',
+      sourceRanges: ['10.0.0.0/8'],
+    };
+    expect(initializeGceSecurityGroupForModal({ mode: 'clone', securityGroup: source }, application.name)).toEqual(
+      expect.objectContaining({
         id: undefined,
         ipIngress: [{ type: 'sctp', startPort: 5000, endPort: 5001 }],
         name: '',
       }),
     );
+    runtimeServices.securityGroupReader = { getAllSecurityGroups: vi.fn().mockResolvedValue({}) };
+    const upsert = vi.spyOn(SecurityGroupWriter, 'upsertSecurityGroup').mockReturnValue(new Promise(() => undefined));
+    renderModal(<GceSecurityGroupModal application={application as any} mode="clone" securityGroup={source} />);
+    fireEvent.change(screen.getByRole('textbox', { name: 'Name' }), { target: { value: 'cloned-firewall' } });
 
-    (modal.state as any).securityGroup.name = 'cloned-firewall';
-    (modal as any).submit();
+    await waitFor(() => expect(screen.getByRole('button', { name: 'Clone' })).toBeEnabled());
+    fireEvent.click(screen.getByRole('button', { name: 'Clone' }));
 
-    expect(upsert.calls.mostRecent().args[0]).toEqual(
-      jasmine.objectContaining({
+    expect(upsert.mock.lastCall[0]).toEqual(
+      expect.objectContaining({
         allowed: [{ ipProtocol: 'sctp', portRanges: ['5000-5001'] }],
         id: undefined,
         name: 'cloned-firewall',
       }),
     );
-    expect(upsert.calls.mostRecent().args[2]).toBe('Clone');
+    expect(upsert.mock.lastCall[2]).toBe('Clone');
   });
 });

package/src/securityGroup/configure/GceSecurityGroupModal.tsx

@@ -377,12 +377,16 @@ export class GceSecurityGroupModalComponent extends React.Component<
     onChange: (value: string) => void,
     readOnly = false,
   ): JSX.Element {
+    const id = `gce-firewall-${label.toLowerCase().replace(/\s+/g, '-')}`;
     return (
       <div className="form-group">
-        <label className="col-md-3 control-label">{label}</label>
+        <label className="col-md-3 control-label" htmlFor={id}>
+          {label}
+        </label>
         <div className="col-md-7">
           <input
             className="form-control input-sm"
+            id={id}
             onChange={(event) => onChange(event.target.value)}
             readOnly={readOnly}
             value={value || ''}
@@ -410,6 +414,7 @@ export class GceSecurityGroupModalComponent extends React.Component<
                 <tr key={index}>
                   <td>
                     <select
+                      aria-label={`Protocol ${index + 1}`}
                       className="form-control input-sm"
                       onChange={(event) => this.updateRule(index, { type: event.target.value })}
                       value={rule.type}
@@ -423,6 +428,7 @@ export class GceSecurityGroupModalComponent extends React.Component<
                   </td>
                   <td>
                     <input
+                      aria-label={`Start port ${index + 1}`}
                       className="form-control input-sm"
                       min="0"
                       onChange={(event) =>
@@ -436,6 +442,7 @@ export class GceSecurityGroupModalComponent extends React.Component<
                   </td>
                   <td>
                     <input
+                      aria-label={`End port ${index + 1}`}
                       className="form-control input-sm"
                       min="0"
                       onChange={(event) =>
@@ -448,7 +455,12 @@ export class GceSecurityGroupModalComponent extends React.Component<
                     />
                   </td>
                   <td>
-                    <button className="btn btn-link" onClick={() => this.removeRule(index)} type="button">
+                    <button
+                      aria-label={`Remove rule ${index + 1}`}
+                      className="btn btn-link"
+                      onClick={() => this.removeRule(index)}
+                      type="button"
+                    >
                       <span className="glyphicon glyphicon-trash" />
                     </button>
                   </td>