CONSOLE-5183: Add unit tests and e2e scenarios for persistent terminal sessions

Add comprehensive test coverage for the detach-to-Cloud-Shell feature:

Unit tests (Jest):
- Action creators: addDetachedSession, removeDetachedSession, clearDetachedSessions
- Reducer: session add, duplicate rejection, MAX_DETACHED_SESSIONS limit, remove, clear
- Selectors: getDetachedSessions with populated and empty state
- detached-ws-registry: store/take/has one-shot semantics, cleanupDetachedResource
  with NamespaceModel and PodModel, error handling, no-op for undefined
- MultiTabbedTerminal: detached tabs render, total tab count, cleanup on close
- Fix pre-existing MultiTabbedTerminal test failures by adding useFlag mock

E2E tests (Cypress + Cucumber):
- Gherkin scenarios for detach workflow, session persistence across navigation,
  session limit enforcement, tab close, and drawer close cleanup
- Step definitions and page object for detach button and drawer verification

How to run tests:
  cd frontend && yarn jest packages/webterminal-plugin/src/redux/actions/__tests__/cloud-shell-actions.spec.ts
  cd frontend && yarn jest packages/webterminal-plugin/src/redux/reducers/__tests__/cloud-shell-reducer.spec.ts
  cd frontend && yarn jest packages/webterminal-plugin/src/redux/reducers/__tests__/cloud-shell-selectors.spec.ts
  cd frontend && yarn jest public/module/__tests__/detached-ws-registry.spec.ts
  cd frontend && yarn jest packages/webterminal-plugin/src/components/cloud-shell/__tests__/MultiTabbedTerminal.spec.tsx

Author: BabbarPB08

frontend/packages/webterminal-plugin/integration-tests/features/web-terminal/web-terminal-detach.feature

@@ -0,0 +1,40 @@
+@web-terminal
+Feature: Persistent Terminal Sessions (Detach to Cloud Shell)
+              As a user, I should be able to detach pod terminals to the Cloud Shell drawer
+              so that they persist across page navigation
+
+        Background:
+            Given user has logged in as basic user
+              And user has created or selected namespace "aut-terminal-detach"
+              And user can see terminal icon on masthead
+
+        @regression
+        Scenario: Detach pod terminal to Cloud Shell drawer: WT-02-TC01
+            Given user is on the pod details terminal tab for a running pod
+             When user clicks the Detach to Cloud Shell button
+             Then user will see the Cloud Shell drawer open
+              And user will see a detached session tab with the pod name
+
+        @regression
+        Scenario: Detached session persists across navigation: WT-02-TC02
+            Given user has a detached terminal session in the Cloud Shell drawer
+             When user navigates to a different page
+             Then user will still see the detached session tab in the Cloud Shell drawer
+
+        @regression
+        Scenario: Close a detached session tab: WT-02-TC03
+            Given user has a detached terminal session in the Cloud Shell drawer
+             When user clicks the close button on the detached session tab
+             Then the detached session tab is removed from the drawer
+
+        @regression
+        Scenario: Session limit prevents more than five detached sessions: WT-02-TC04
+            Given user has five detached terminal sessions in the Cloud Shell drawer
+             Then the Detach to Cloud Shell button is disabled on the pod terminal
+
+        @regression
+        Scenario: Close drawer clears all detached sessions: WT-02-TC05
+            Given user has a detached terminal session in the Cloud Shell drawer
+             When user closes the Cloud Shell drawer
+              And user clicks on the Web Terminal icon on the Masthead
+             Then user will not see any detached session tabs

frontend/packages/webterminal-plugin/integration-tests/support/step-definitions/pages/web-terminal/detachTerminal-page.ts

@@ -0,0 +1,38 @@
+export const detachTerminalPO = {
+  detachButton: 'button:contains("Detach to Cloud Shell")',
+  detachedButton: 'button:contains("Detached")',
+  detachedTab: '[data-test="detached-terminal-tab"]',
+  multiTabTerminal: '[data-test="multi-tab-terminal"]',
+  closeTabButton: '[aria-label="Close terminal tab"]',
+  cloudShellDrawer: '.co-cloud-shell-drawer',
+};
+
+export const detachTerminalPage = {
+  clickDetachButton: () => {
+    cy.get(detachTerminalPO.detachButton).should('be.visible').click();
+  },
+
+  verifyDetachedTabs: (count: number) => {
+    cy.get(detachTerminalPO.detachedTab).should('have.length', count);
+  },
+
+  verifyNoDetachedTabs: () => {
+    cy.get(detachTerminalPO.detachedTab).should('not.exist');
+  },
+
+  verifyDetachButtonDisabled: () => {
+    cy.get(detachTerminalPO.detachButton).should('be.disabled');
+  },
+
+  closeDetachedTab: (index = 0) => {
+    cy.get(detachTerminalPO.detachedTab).eq(index).find(detachTerminalPO.closeTabButton).click();
+  },
+
+  verifyDrawerOpen: () => {
+    cy.get(detachTerminalPO.cloudShellDrawer).should('be.visible');
+  },
+
+  verifyDetachedTabWithPodName: (podName: string) => {
+    cy.get(detachTerminalPO.detachedTab).contains(podName).should('be.visible');
+  },
+};

frontend/packages/webterminal-plugin/integration-tests/support/step-definitions/web-terminal/web-terminal-detach.ts

@@ -0,0 +1,78 @@
+import { Given, When, Then } from 'cypress-cucumber-preprocessor/steps';
+import { detachTerminalPage } from '@console/webterminal-plugin/integration-tests/support/step-definitions/pages/web-terminal/detachTerminal-page';
+import { webTerminalPage } from '@console/webterminal-plugin/integration-tests/support/step-definitions/pages/web-terminal/webTerminal-page';
+
+Given('user is on the pod details terminal tab for a running pod', () => {
+  const ns = Cypress.expose('NAMESPACE') || 'aut-terminal-detach';
+  cy.exec(`oc get pods -n ${ns} -o jsonpath='{.items[0].metadata.name}'`).then((result) => {
+    const podName = result.stdout.replace(/'/g, '');
+    cy.visit(`/k8s/ns/${ns}/pods/${podName}/terminal`);
+    cy.get('.co-terminal', { timeout: 30000 }).should('be.visible');
+  });
+});
+
+When('user clicks the Detach to Cloud Shell button', () => {
+  detachTerminalPage.clickDetachButton();
+});
+
+Then('user will see the Cloud Shell drawer open', () => {
+  detachTerminalPage.verifyDrawerOpen();
+});
+
+Then('user will see a detached session tab with the pod name', () => {
+  detachTerminalPage.verifyDetachedTabs(1);
+});
+
+Given('user has a detached terminal session in the Cloud Shell drawer', () => {
+  const ns = Cypress.expose('NAMESPACE') || 'aut-terminal-detach';
+  cy.exec(`oc get pods -n ${ns} -o jsonpath='{.items[0].metadata.name}'`).then((result) => {
+    const podName = result.stdout.replace(/'/g, '');
+    cy.visit(`/k8s/ns/${ns}/pods/${podName}/terminal`);
+    cy.get('.co-terminal', { timeout: 30000 }).should('be.visible');
+    detachTerminalPage.clickDetachButton();
+    detachTerminalPage.verifyDetachedTabs(1);
+  });
+});
+
+When('user navigates to a different page', () => {
+  cy.visit('/k8s/cluster/projects');
+  cy.url().should('include', '/projects');
+});
+
+Then('user will still see the detached session tab in the Cloud Shell drawer', () => {
+  detachTerminalPage.verifyDetachedTabs(1);
+});
+
+When('user clicks the close button on the detached session tab', () => {
+  detachTerminalPage.closeDetachedTab(0);
+});
+
+Then('the detached session tab is removed from the drawer', () => {
+  detachTerminalPage.verifyNoDetachedTabs();
+});
+
+Given('user has five detached terminal sessions in the Cloud Shell drawer', () => {
+  const ns = Cypress.expose('NAMESPACE') || 'aut-terminal-detach';
+  cy.exec(`oc get pods -n ${ns} -o jsonpath='{.items[*].metadata.name}'`).then((result) => {
+    const pods = result.stdout.replace(/'/g, '').split(' ');
+    const targetPod = pods[0];
+    for (let i = 0; i < 5; i++) {
+      cy.visit(`/k8s/ns/${ns}/pods/${targetPod}/terminal`);
+      cy.get('.co-terminal', { timeout: 30000 }).should('be.visible');
+      detachTerminalPage.clickDetachButton();
+    }
+    detachTerminalPage.verifyDetachedTabs(5);
+  });
+});
+
+Then('the Detach to Cloud Shell button is disabled on the pod terminal', () => {
+  detachTerminalPage.verifyDetachButtonDisabled();
+});
+
+When('user closes the Cloud Shell drawer', () => {
+  webTerminalPage.closeCurrentTerminalSession();
+});
+
+Then('user will not see any detached session tabs', () => {
+  detachTerminalPage.verifyNoDetachedTabs();
+});

frontend/packages/webterminal-plugin/src/components/cloud-shell/__tests__/CloudShellDrawer.spec.tsx

@@ -21,6 +21,7 @@ jest.mock('@console/webterminal-plugin/src/redux/actions/cloud-shell-dispatchers
 
 jest.mock('@console/webterminal-plugin/src/redux/reducers/cloud-shell-selectors', () => ({
   useIsCloudShellExpanded: jest.fn(() => true),
+  useDetachedSessions: jest.fn(() => []),
 }));
 
 const mockUseFlag = useFlag as jest.Mock;

frontend/packages/webterminal-plugin/src/components/cloud-shell/__tests__/MultiTabbedTerminal.spec.tsx

@@ -13,10 +13,33 @@ jest.mock('@console/webterminal-plugin/src/components/cloud-shell/CloudShellTerm
   default: () => 'Terminal content',
 }));
 
+jest.mock('@console/webterminal-plugin/src/components/cloud-shell/DetachedPodExec', () => ({
+  default: ({ sessionId }: { sessionId: string }) => `Detached ${sessionId}`,
+}));
+
+jest.mock('@console/shared/src/hooks/useFlag', () => ({
+  useFlag: () => true,
+}));
+
+const mockCleanup = jest.fn();
+jest.mock('@console/internal/module/detached-ws-registry', () => ({
+  cleanupDetachedResource: (...args: unknown[]) => mockCleanup(...args),
+}));
+
+const mockUseDetachedSessions = jest.fn();
+jest.mock('@console/webterminal-plugin/src/redux/reducers/cloud-shell-selectors', () => {
+  const actual = jest.requireActual(
+    '@console/webterminal-plugin/src/redux/reducers/cloud-shell-selectors',
+  );
+  return {
+    ...actual,
+    useDetachedSessions: () => mockUseDetachedSessions(),
+  };
+});
+
 const originalWindowRequestAnimationFrame = window.requestAnimationFrame;
 const originalWindowCancelAnimationFrame = window.cancelAnimationFrame;
 
-// Helper to click an element multiple times sequentially with act()
 const clickMultipleTimes = async (element: HTMLElement, times: number) => {
   for (let i = 0; i < times; i++) {
     // eslint-disable-next-line no-await-in-loop
@@ -40,6 +63,11 @@ describe('MultiTabTerminal', () => {
     window.cancelAnimationFrame = originalWindowCancelAnimationFrame;
   });
 
+  beforeEach(() => {
+    mockUseDetachedSessions.mockReturnValue([]);
+    mockCleanup.mockClear();
+  });
+
   it('should initially load with only one console', async () => {
     let multiTabTerminalWrapper: ReturnType<typeof renderWithProviders>;
     await act(async () => {
@@ -103,5 +131,65 @@ describe('MultiTabTerminal', () => {
     expect(multiTabTerminalWrapper.getAllByText('Terminal content').length).toBe(5);
   });
 
+  describe('detached session tabs', () => {
+    const detachedSessions = [
+      {
+        id: 'pod1-c1',
+        podName: 'my-pod',
+        namespace: 'ns-1',
+        containerName: 'main',
+        cleanup: { type: 'namespace' as const, name: 'openshift-debug-abc' },
+      },
+      {
+        id: 'pod2-c2',
+        podName: 'other-pod',
+        namespace: 'ns-2',
+        containerName: 'sidecar',
+      },
+    ];
+
+    it('should render detached sessions as additional tabs', async () => {
+      mockUseDetachedSessions.mockReturnValue(detachedSessions);
+
+      let wrapper: ReturnType<typeof renderWithProviders>;
+      await act(async () => {
+        wrapper = renderWithProviders(<MultiTabbedTerminal />);
+      });
+
+      expect(wrapper.getByText('Detached pod1-c1')).toBeTruthy();
+      expect(wrapper.getByText('Detached pod2-c2')).toBeTruthy();
+    });
+
+    it('should include detached sessions in total tab count', async () => {
+      mockUseDetachedSessions.mockReturnValue(detachedSessions);
+
+      let wrapper: ReturnType<typeof renderWithProviders>;
+      await act(async () => {
+        wrapper = renderWithProviders(<MultiTabbedTerminal />);
+      });
+
+      // 1 Cloud Shell tab + 2 detached = 3 total
+      const closeBtns = wrapper.getAllByLabelText('Close terminal tab');
+      expect(closeBtns).toHaveLength(3);
+    });
+
+    it('should call cleanupDetachedResource when closing a detached tab with cleanup metadata', async () => {
+      mockUseDetachedSessions.mockReturnValue(detachedSessions);
+
+      let wrapper: ReturnType<typeof renderWithProviders>;
+      await act(async () => {
+        wrapper = renderWithProviders(<MultiTabbedTerminal />);
+      });
+
+      const closeBtns = wrapper.getAllByLabelText('Close terminal tab');
+      // Index 0 = Cloud Shell tab, Index 1 = first detached, Index 2 = second detached
+      await act(async () => {
+        fireEvent.click(closeBtns[1]);
+      });
+
+      expect(mockCleanup).toHaveBeenCalledWith(detachedSessions[0].cleanup);
+    });
+  });
+
   jest.clearAllTimers();
 });

frontend/packages/webterminal-plugin/src/redux/actions/__tests__/cloud-shell-actions.spec.ts

@@ -1,4 +1,11 @@
-import { setCloudShellExpanded, setCloudShellActive, Actions } from '../cloud-shell-actions';
+import {
+  setCloudShellExpanded,
+  setCloudShellActive,
+  addDetachedSession,
+  removeDetachedSession,
+  clearDetachedSessions,
+  Actions,
+} from '../cloud-shell-actions';
 
 describe('Cloud shell actions', () => {
   it('should create expand action', () => {
@@ -38,4 +45,38 @@ describe('Cloud shell actions', () => {
       }),
     );
   });
+
+  it('should create addDetachedSession action', () => {
+    const session = {
+      id: 'test-pod-container-123',
+      podName: 'test-pod',
+      namespace: 'default',
+      containerName: 'container',
+      command: ['sh', '-i'],
+      cleanup: { type: 'namespace' as const, name: 'openshift-debug-abc' },
+    };
+    expect(addDetachedSession(session)).toEqual(
+      expect.objectContaining({
+        type: Actions.AddDetachedSession,
+        payload: session,
+      }),
+    );
+  });
+
+  it('should create removeDetachedSession action', () => {
+    expect(removeDetachedSession('session-1')).toEqual(
+      expect.objectContaining({
+        type: Actions.RemoveDetachedSession,
+        payload: { id: 'session-1' },
+      }),
+    );
+  });
+
+  it('should create clearDetachedSessions action', () => {
+    expect(clearDetachedSessions()).toEqual(
+      expect.objectContaining({
+        type: Actions.ClearDetachedSessions,
+      }),
+    );
+  });
 });