frontend: Add e2e-tests for react-hotkeys dependency

Signed-off-by: adwait-godbole <[email protected]>

Author: adwait-godbole

e2e-tests/tests/headlamp.spec.ts

@@ -35,6 +35,28 @@ test('main page should have Network tab', async () => {
   await headlampPage.hasNetworkTab();
 });
 
+test('main page should have global search along with react-hotkey hint text', async () => {
+  const globalSearch = await headlampPage.hasGlobalSearch();
+
+  const searchHintContainer = globalSearch.locator('xpath=following-sibling::div');
+  const pressTextExists = await searchHintContainer.getByText(/^Press/).isVisible();
+  const slashHotKeyExists = await searchHintContainer
+    .locator('div')
+    .filter({ hasText: /^\/$/ })
+    .isVisible();
+  const toSearchTextExists = await searchHintContainer.getByText(/to search$/).isVisible();
+
+  expect(pressTextExists && slashHotKeyExists && toSearchTextExists).toBeTruthy();
+});
+
+test('react-hotkey for global search', async ({ page }) => {
+  await page.keyboard.press('/');
+
+  const focusedSearch = page.getByPlaceholder(/^Search resources, pages, clusters by name$/);
+  await expect(focusedSearch).toBeVisible();
+  await expect(focusedSearch).toBeFocused();
+});
+
 test('service page should have headlamp service', async () => {
   await servicesPage.navigateToServices();
   await servicesPage.clickOnServicesSection();

e2e-tests/tests/headlampPage.ts

@@ -53,6 +53,16 @@ export class HeadlampPage {
     expect(await securityTab.textContent()).toBe('Security');
   }
 
+  async hasGlobalSearch() {
+    const globalSearch = this.page.getByPlaceholder(/^Search$/);
+
+    await expect(globalSearch).toBeVisible();
+    await expect(globalSearch).toHaveValue(/^$/);
+    await expect(globalSearch).not.toBeFocused();
+
+    return globalSearch;
+  }
+
   async checkPageContent(text: string) {
     await this.page.waitForSelector(`:has-text("${text}")`);
     const pageContent = await this.page.content();

e2e-tests/tests/multiCluster.spec.ts

@@ -95,4 +95,30 @@ test.describe('multi-cluster setup', () => {
     await page.waitForLoadState('load');
     await headlampPage.hasTitleContaining(/Choose a cluster/);
   });
+
+  test('react-hotkey to open cluster chooser', async ({ page }) => {
+    const testClusterAnchor = page.locator('table tbody tr td a', {
+      hasText: /^test$/,
+    });
+    await expect(testClusterAnchor).toBeVisible();
+    await expect(testClusterAnchor).toHaveAttribute('href', '/c/test/');
+
+    await Promise.all([page.waitForNavigation(), testClusterAnchor.click()]);
+
+    await headlampPage.authenticate(testToken);
+    await headlampPage.pageLocatorContent(
+      'button:has-text("Our Cluster Chooser button. Cluster: test")',
+      'Our Cluster Chooser button. Cluster: test'
+    );
+
+    await page.keyboard.press('Control+Shift+L');
+
+    const chooseClusterLabel = page.getByLabel(/^Choose cluster$/);
+    await expect(chooseClusterLabel).toBeVisible();
+
+    const clusterNameInput = page.getByPlaceholder(/^Name$/);
+    await expect(clusterNameInput).toBeVisible();
+    await expect(clusterNameInput).toHaveValue(/^$/);
+    await expect(clusterNameInput).toBeFocused();
+  });
 });

e2e-tests/tests/podsPage.spec.ts

@@ -1,4 +1,4 @@
-import { test } from '@playwright/test';
+import { expect, test } from '@playwright/test';
 import { HeadlampPage } from './headlampPage';
 import { podsPage } from './podsPage';
 
@@ -39,3 +39,39 @@ test('multi tab create delete pod', async ({ browser }) => {
   await realtimeUpdate1.deletePod(name);
   await realtimeUpdate2.confirmPodDeletion(name);
 });
+
+test('react-hotkey for logs search', async ({ page }) => {
+  const headlampPage = new HeadlampPage(page);
+  await headlampPage.navigateToCluster('test', process.env.HEADLAMP_TEST_TOKEN);
+
+  await new podsPage(page).navigateToPods();
+
+  const podsTable = page.getByRole('table');
+  await expect(podsTable).toBeVisible();
+
+  const podLink = podsTable
+    .locator('tbody')
+    .nth(0)
+    .locator('tr')
+    .nth(0)
+    .locator('td')
+    .nth(1)
+    .locator('a');
+  const podName = await podLink.textContent();
+
+  await Promise.all([page.waitForNavigation(), podLink.click()]);
+
+  await expect(page.getByRole('heading', { level: 1 })).toHaveText(new RegExp(`^Pod: ${podName}$`));
+
+  const showLogsButton = page.getByRole('button', { name: /^Show Logs$/ });
+  await showLogsButton.click();
+
+  const terminal = page.locator('#xterm-container');
+  await expect(terminal).toBeVisible();
+
+  await page.keyboard.press('Control+Shift+F');
+
+  const searchInput = page.getByPlaceholder(/^Find$/);
+  await expect(searchInput).toBeVisible();
+  await expect(searchInput).toBeFocused();
+});