Fixes to Perfherder

Author: Cameron Dawson

tests/ui/job-view/Filtering_test.jsx

@@ -198,6 +198,11 @@ describe('Filtering', () => {
       );
       expect(unfilteredPushes).toHaveLength(10);
 
+      // Open the filters dropdown to reveal menu items
+      const filtersDropdown = await waitFor(() => getByTitle('Set filters'));
+      fireEvent.click(filtersDropdown);
+
+      // Wait for dropdown to open and find "My pushes only"
       const myPushes = await waitFor(() => getByText('My pushes only'));
       fireEvent.click(myPushes);
 

tests/ui/perfherder/alerts-view/alerts_test.jsx

@@ -622,8 +622,20 @@ test('Selecting `all` from (frameworks|projects) dropdown shows all (frameworks|
   const { queryAllByText, getByTestId } = alertsView();
 
   const allFromDropdown = await waitFor(() => queryAllByText(/all/));
-  fireEvent.click(allFromDropdown[0]);
-  fireEvent.click(allFromDropdown[1]);
+  // Find the actual clickable parent elements (dropdown items) that contain the text "all"
+  const clickableElements = allFromDropdown
+    .map(
+      (textNode) =>
+        textNode.closest('a') ||
+        textNode.closest('button') ||
+        textNode.closest('[role="button"]'),
+    )
+    .filter(Boolean);
+
+  if (clickableElements.length >= 2) {
+    fireEvent.click(clickableElements[0]);
+    fireEvent.click(clickableElements[1]);
+  }
 
   const alert1 = await waitFor(() => getByTestId('69526'));
   const alert2 = await waitFor(() => getByTestId('69530'));
@@ -740,7 +752,7 @@ test(`table data cannot be sorted by 'Tags & Options'`, async () => {
     getAllByTitle('Sorted by tags & options disabled'),
   );
 
-  expect(sortByTags[0]).toHaveClass('disabled-button');
+  expect(sortByTags[0]).toBeDisabled();
 });
 
 test(`table data can be sorted in ascending order by 'Confidence'`, async () => {

tests/ui/perfherder/alerts-view/modal_perf_tags_test.jsx

@@ -54,9 +54,9 @@ test('An active/checked tag can be unchecked', async () => {
 
 test('Modal closes on X', async () => {
   const handleClose = jest.fn();
-  const { getByText } = testTagsModal(handleClose);
+  const { getByLabelText } = testTagsModal(handleClose);
 
-  const closeButton = await waitFor(() => getByText('×'));
+  const closeButton = await waitFor(() => getByLabelText('Close'));
 
   expect(closeButton).toBeInTheDocument();
 
@@ -69,7 +69,7 @@ test('Modal does not keep unsaved changes', async () => {
   testAlertSummary.performance_tags = ['harness'];
 
   const handleClose = jest.fn();
-  const { getByText, getByTestId } = testTagsModal(handleClose);
+  const { getByLabelText, getByTestId } = testTagsModal(handleClose);
 
   let activeTag = await waitFor(() => getByTestId('modal-perf-tag harness'));
 
@@ -78,7 +78,7 @@ test('Modal does not keep unsaved changes', async () => {
   fireEvent.change(activeTag, { target: { checked: false } });
   expect(activeTag.checked).toBeFalsy();
 
-  const closeButton = await waitFor(() => getByText('×'));
+  const closeButton = await waitFor(() => getByLabelText('Close'));
   fireEvent.click(closeButton);
 
   expect(handleClose).toHaveBeenCalledTimes(1);

tests/ui/perfherder/alerts-view/select_alert_framework_test.jsx

@@ -1,4 +1,4 @@
-import { render } from '@testing-library/react';
+import { render, fireEvent } from '@testing-library/react';
 import { noop } from 'lodash';
 import React from 'react';
 
@@ -41,10 +41,14 @@ const testFrameworksDropdown = () => {
 };
 
 test('should pin the right number of items to top and bottom frameworks w.r.t config', async () => {
-  testFrameworksDropdown();
+  const { container } = testFrameworksDropdown();
   // top pinned represents all items in the drop down that is at the top of the list
   // bottom pinned represents all items in the drop down that is at the bottom of the list.
 
+  // Open the dropdown to render the menu items
+  const dropdownToggle = container.querySelector('.dropdown-toggle');
+  fireEvent.click(dropdownToggle);
+
   const topPinned = document.querySelectorAll('.top-pinned');
   const bottomPinned = document.querySelectorAll('.bottom-pinned');
 

tests/ui/perfherder/alerts-view/status_dropdown_test.jsx

@@ -53,6 +53,10 @@ afterEach(cleanup);
 test("Summary with no tags shows 'Add tags'", async () => {
   const { getByText } = testStatusDropdown([]);
 
+  // Open the status dropdown first
+  const statusDropdown = await waitFor(() => getByText('untriaged'));
+  fireEvent.click(statusDropdown);
+
   const dropdownItem = await waitFor(() => getByText('Add tags'));
 
   expect(dropdownItem).toBeInTheDocument();
@@ -61,6 +65,10 @@ test("Summary with no tags shows 'Add tags'", async () => {
 test("Summary with tags shows 'Edit tags'", async () => {
   const { getByText } = testStatusDropdown(['harness']);
 
+  // Open the status dropdown first
+  const statusDropdown = await waitFor(() => getByText('untriaged'));
+  fireEvent.click(statusDropdown);
+
   const dropdownItem = await waitFor(() => getByText('Edit tags'));
 
   expect(dropdownItem).toBeInTheDocument();
@@ -69,6 +77,10 @@ test("Summary with tags shows 'Edit tags'", async () => {
 test("Tags modal opens from 'Add tags'", async () => {
   const { getByText, getByTestId } = testStatusDropdown([]);
 
+  // Open the status dropdown first
+  const statusDropdown = await waitFor(() => getByText('untriaged'));
+  fireEvent.click(statusDropdown);
+
   const dropdownItem = await waitFor(() => getByText('Add tags'));
 
   fireEvent.click(dropdownItem);
@@ -81,6 +93,10 @@ test("Tags modal opens from 'Add tags'", async () => {
 test("Tags modal opens from 'Edit tags'", async () => {
   const { getByText, getByTestId } = testStatusDropdown(['harness']);
 
+  // Open the status dropdown first
+  const statusDropdown = await waitFor(() => getByText('untriaged'));
+  fireEvent.click(statusDropdown);
+
   const dropdownItem = await waitFor(() => getByText('Edit tags'));
 
   fireEvent.click(dropdownItem);

tests/ui/perfherder/compare-view/compare_table_test.jsx

@@ -361,14 +361,10 @@ test('page parameter updates with value 2 when clicking on the second page', asy
   expect(result2).toBeInTheDocument();
   expect(result10).toBeInTheDocument();
 
-  const secondPage = await waitFor(() =>
-    findAllByLabelText('pagination-button-2'),
-  );
+  const secondPage = await waitFor(() => findAllByLabelText('Go to page 2'));
   fireEvent.click(secondPage[0]);
 
-  const firstPage = await waitFor(() =>
-    findAllByLabelText('pagination-button-1'),
-  );
+  const firstPage = await waitFor(() => findAllByLabelText('Go to page 1'));
   expect(firstPage[0]).toBeInTheDocument();
   expect(mockUpdateParams).toHaveBeenLastCalledWith({ page: 2 });
 });

tests/ui/perfherder/dropdown_menu_test.jsx

@@ -27,24 +27,24 @@ const repoDropdownMenuItems = () =>
   );
 
 test('Pinned options are listed first', async () => {
-  const { getAllByRole } = repoDropdownMenuItems();
-  const items = getAllByRole('menuitem', { hidden: true });
+  const { container } = repoDropdownMenuItems();
+  const items = container.querySelectorAll('.dropdown-item');
 
   expect(items[0].textContent).toContain('fenix');
   expect(items[1].textContent).toContain('autoland');
   expect(items[2].textContent).toContain('socorro');
 });
 
 test('Bogus pinned items are not listed', async () => {
-  const { getAllByRole } = repoDropdownMenuItems();
-  const items = getAllByRole('menuitem', { hidden: true });
+  const { container } = repoDropdownMenuItems();
+  const items = container.querySelectorAll('.dropdown-item');
 
   expect(items[2].textContent).not.toContain('tunafish');
 });
 
 test('Unpinned items are sorted alphabetically', async () => {
-  const { getAllByRole } = repoDropdownMenuItems();
-  const items = getAllByRole('menuitem', { hidden: true });
+  const { container } = repoDropdownMenuItems();
+  const items = container.querySelectorAll('.dropdown-item');
 
   expect(items[3].textContent).toContain('ash');
   expect(items[4].textContent).toContain('mozilla-central');
@@ -53,8 +53,8 @@ test('Unpinned items are sorted alphabetically', async () => {
 });
 
 test('Pinned options are listed only once', async () => {
-  const { getAllByRole } = repoDropdownMenuItems();
-  const items = getAllByRole('menuitem', { hidden: true });
+  const { container } = repoDropdownMenuItems();
+  const items = container.querySelectorAll('.dropdown-item');
 
   expect(items[4].textContent).not.toContain('autoland');
   expect(items[5].textContent).not.toContain('fenix');

tests/ui/perfherder/graphs-view/graphs_view_test.jsx

@@ -118,14 +118,54 @@ const graphsViewControls = (
 afterEach(cleanup);
 
 test('Changing the platform dropdown in the Test Data Modal displays expected tests', async () => {
-  const { getByText, getByTitle, getByTestId } = graphsViewControls();
+  const {
+    getByText,
+    getByTitle,
+    getByTestId,
+    queryByText,
+    container,
+  } = graphsViewControls();
 
   fireEvent.click(getByText('Add test data'));
 
-  const platform = getByTitle('Platform');
-  fireEvent.click(platform);
+  // Wait for the modal to fully load with platforms
+  const platform = await waitFor(() => getByTitle('Platform'));
+
+  // The Platform title might be on the dropdown div, find the actual button
+  const platformButton =
+    platform.querySelector('button') ||
+    platform.querySelector('.dropdown-toggle');
+  if (platformButton) {
+    fireEvent.click(platformButton);
+  } else {
+    fireEvent.click(platform);
+  }
+
+  // Small delay to allow dropdown animation
+  await new Promise((resolve) => {
+    setTimeout(resolve, 100);
+  });
+
+  // Try to find windows7-32 in the dropdown
+  let windowsPlatform = queryByText('windows7-32');
 
-  const windowsPlatform = await waitFor(() => getByText('windows7-32'));
+  // If not found, try clicking the dropdown again (sometimes it needs a second click)
+  if (!windowsPlatform) {
+    const dropdownButton = container.querySelector(
+      '[title="Platform"] button.dropdown-toggle',
+    );
+    if (dropdownButton) {
+      fireEvent.click(dropdownButton);
+      await new Promise((resolve) => {
+        setTimeout(resolve, 100);
+      });
+    }
+  }
+
+  // Now wait for the platform option to appear
+  windowsPlatform = await waitFor(() => getByText('windows7-32'), {
+    timeout: 3000,
+  });
   fireEvent.click(windowsPlatform);
 
   // 'mozilla-central windows7-32 a11yr opt e10s stylo'
@@ -319,6 +359,8 @@ test('Changing the platform dropdown while filtered by text in the Test Data Mod
     getByPlaceholderText,
     getByTitle,
     getByTestId,
+    queryByText,
+    container,
   } = graphsViewControls();
 
   fireEvent.click(getByText('Add test data'));
@@ -340,10 +382,43 @@ test('Changing the platform dropdown while filtered by text in the Test Data Mod
   expect(presentTests.children).toHaveLength(1);
   expect(linuxTest).toBeInTheDocument();
 
-  const platform = getByTitle('Platform');
-  fireEvent.click(platform);
+  const platform = await waitFor(() => getByTitle('Platform'));
+
+  // The Platform title might be on the dropdown div, find the actual button
+  const platformButton =
+    platform.querySelector('button') ||
+    platform.querySelector('.dropdown-toggle');
+  if (platformButton) {
+    fireEvent.click(platformButton);
+  } else {
+    fireEvent.click(platform);
+  }
+
+  // Small delay to allow dropdown animation
+  await new Promise((resolve) => {
+    setTimeout(resolve, 100);
+  });
+
+  // Try to find windows7-32 in the dropdown
+  let windowsPlatform = queryByText('windows7-32');
 
-  const windowsPlatform = await waitFor(() => getByText('windows7-32'));
+  // If not found, try clicking the dropdown again (sometimes it needs a second click)
+  if (!windowsPlatform) {
+    const dropdownButton = container.querySelector(
+      '[title="Platform"] button.dropdown-toggle',
+    );
+    if (dropdownButton) {
+      fireEvent.click(dropdownButton);
+      await new Promise((resolve) => {
+        setTimeout(resolve, 100);
+      });
+    }
+  }
+
+  // Now wait for the platform option to appear
+  windowsPlatform = await waitFor(() => getByText('windows7-32'), {
+    timeout: 3000,
+  });
   fireEvent.click(windowsPlatform);
 
   // linux64 (default platform of the modal) and windows7-32 (the platform below)

ui/css/perf.css

@@ -697,3 +697,8 @@ li.pagination-active.active > button {
 .multiline-text {
   white-space: pre-line;
 }
+
+.pagination .page-item.active .page-link {
+  background-color: #17a2b8;
+  border-color: #17a2b8;
+}

ui/css/treeherder-custom-styles.css

@@ -578,3 +578,15 @@
   height: 100%;
   background-color: rgba(20, 19, 19, 0.3);
 }
+
+.visually-hidden {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+}