frontend: Add e2e-tests for react-hotkeys dependency

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

Author: adwait-godbole

e2e-tests/tests/headlamp.spec.ts

@@ -51,6 +51,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

@@ -76,6 +76,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

@@ -111,4 +111,34 @@ test.describe('multi-cluster setup', () => {
     await page.waitForLoadState('load');
     await headlampPage.hasTitleContaining(/Choose a cluster/);
   });
+
+  // This is commented out because the CI e2e test job loads the plugins
+  // Which interferes with the test. It replaces the cluster chooser,
+  // so this test does not work.
+
+  // 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

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { test } from '@playwright/test';
+import { expect, test } from '@playwright/test';
 import { HeadlampPage } from './headlampPage';
 import { podsPage } from './podsPage';
 
@@ -51,3 +51,40 @@ test('multi tab create delete pod', async ({ browser }) => {
   await realtimeUpdate1.createPod(name);
   await realtimeUpdate2.confirmPodCreation(name);
 });
+
+test('react-hotkey for logs search', async ({ page }) => {
+  const headlampPage = new HeadlampPage(page);
+  await headlampPage.navigateToCluster('test', process.env.HEADLAMP_TEST_TOKEN);
+
+  await headlampPage.navigateTopage('/c/test/pods', /Pods/);
+
+  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 podLink.click();
+
+  const podHeading = page.getByRole('heading', { level: 1, name: new RegExp(`^Pod: ${podName}$`) });
+  await expect(podHeading).toBeVisible();
+
+  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();
+});