Skip to content

PCF-391 The keyboard handling for the revision dropdown should be done differently #926

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
esanuandra wants to merge 7 commits into
base: main
Choose a base branch
from
Open

PCF-391 The keyboard handling for the revision dropdown should be done differently #926

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
ff0c47b
Add autocomplete component
esanuandra Jul 21, 2025
4d9e7c9
fix tests
esanuandra Aug 27, 2025
22be33b
fix multiple select revision checkbox
esanuandra Dec 18, 2025
d6a366b
Fix Snackbar, fetchRevisionBySearch and fetchRevisionbyID test
esanuandra Apr 9, 2026
a005b92
Update SearchInputAndResult to theme.palette
esanuandra Apr 30, 2026
406cedf
Rename AutocompleteInput and AutocompleteOption
esanuandra May 6, 2026
dd8fff3
Remove SearchResultsList and SearchResultsListItem
esanuandra May 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/__tests__/CompareResults/__snapshots__/OverTimeResultsView.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -513,7 +513,7 @@ exports[`Results View The table should match snapshot and other elements should
role="columnheader"
>
<div
class="MuiButtonGroup-root MuiButtonGroup-contained MuiButtonGroup-horizontal MuiButtonGroup-disableElevation MuiButtonGroup-colorTableHeaderButton css-1fyroww-MuiButtonGroup-root"
class="MuiButtonGroup-root MuiButtonGroup-contained MuiButtonGroup-horizontal MuiButtonGroup-disableElevation MuiButtonGroup-colorTableHeaderButton css-6gd5sl-MuiButtonGroup-root"
role="group"
>
<button
Expand Down
472 changes: 320 additions & 152 deletions src/__tests__/CompareResults/__snapshots__/ResultsTable.test.tsx.snap
View file
Open in desktop

Large diffs are not rendered by default.

16 changes: 8 additions & 8 deletions src/__tests__/CompareResults/__snapshots__/ResultsView.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ exports[`Results View Should display Base, New and Common graphs with replicates
<section
aria-label="Revision Row Details"
class="MuiBox-root css-13s8wtg"
id="_r_b5_"
id="_r_bt_"
>
<div
class="MuiStack-root css-1714cpj-MuiStack-root"
Expand Down Expand Up @@ -396,7 +396,7 @@ exports[`Results View Should display Base, New and Common graphs with tooltips 1
<section
aria-label="Revision Row Details"
class="MuiBox-root css-13s8wtg"
id="_r_9n_"
id="_r_ab_"
>
<div
class="MuiStack-root css-1714cpj-MuiStack-root"
Expand Down Expand Up @@ -901,7 +901,7 @@ exports[`Results View The table should match snapshot and other elements should
aria-invalid="false"
aria-label="Search by title, platform, revision or options"
class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedStart MuiInputBase-inputAdornedEnd css-3v3un6-MuiInputBase-input-MuiOutlinedInput-input"
id="_r_g_"
id="_r_k_"
placeholder="Filter results"
type="search"
value=""
Expand Down Expand Up @@ -1362,7 +1362,7 @@ exports[`Results View The table should match snapshot and other elements should
role="columnheader"
>
<div
class="MuiButtonGroup-root MuiButtonGroup-contained MuiButtonGroup-horizontal MuiButtonGroup-disableElevation MuiButtonGroup-colorTableHeaderButton css-1fyroww-MuiButtonGroup-root"
class="MuiButtonGroup-root MuiButtonGroup-contained MuiButtonGroup-horizontal MuiButtonGroup-disableElevation MuiButtonGroup-colorTableHeaderButton css-6gd5sl-MuiButtonGroup-root"
role="group"
>
<button
Expand Down Expand Up @@ -1725,7 +1725,7 @@ exports[`Results View The table should match snapshot and other elements should
data-testid="expand-revision-button"
>
<button
aria-controls="_r_17_"
aria-controls="_r_1b_"
aria-expanded="false"
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorPrimary MuiIconButton-sizeSmall css-1pgb59k-MuiButtonBase-root-MuiIconButton-root"
tabindex="0"
Expand Down Expand Up @@ -1924,7 +1924,7 @@ exports[`Results View The table should match snapshot and other elements should
data-testid="expand-revision-button"
>
<button
aria-controls="_r_1e_"
aria-controls="_r_1i_"
aria-expanded="false"
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorPrimary MuiIconButton-sizeSmall css-1pgb59k-MuiButtonBase-root-MuiIconButton-root"
tabindex="0"
Expand Down Expand Up @@ -2123,7 +2123,7 @@ exports[`Results View The table should match snapshot and other elements should
data-testid="expand-revision-button"
>
<button
aria-controls="_r_1l_"
aria-controls="_r_1p_"
aria-expanded="false"
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorPrimary MuiIconButton-sizeSmall css-1pgb59k-MuiButtonBase-root-MuiIconButton-root"
tabindex="0"
Expand Down Expand Up @@ -2322,7 +2322,7 @@ exports[`Results View The table should match snapshot and other elements should
data-testid="expand-revision-button"
>
<button
aria-controls="_r_1s_"
aria-controls="_r_20_"
aria-expanded="false"
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorPrimary MuiIconButton-sizeSmall css-1pgb59k-MuiButtonBase-root-MuiIconButton-root"
tabindex="0"
Expand Down
2 changes: 1 addition & 1 deletion src/__tests__/CompareResults/__snapshots__/SearchInput.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ exports[`Search by title/test name should filter results after a timeout or imme
aria-invalid="false"
aria-label="Search by title, platform, revision or options"
class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedStart MuiInputBase-inputAdornedEnd css-3v3un6-MuiInputBase-input-MuiOutlinedInput-input"
id="_r_i_"
id="_r_m_"
placeholder="Filter results"
type="search"
value=""
Expand Down
30 changes: 15 additions & 15 deletions src/__tests__/CompareResults/__snapshots__/SubtestsResultsView.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -376,11 +376,11 @@ exports[`SubtestsResultsView Component Tests should render the subtests results
type="checkbox"
/>
<span
class="MuiSwitch-thumb css-1mw77bv-MuiSwitch-thumb"
class="MuiSwitch-thumb css-17jyosd-MuiSwitch-thumb"
/>
</span>
<span
class="MuiSwitch-track css-1kf3qur-MuiSwitch-track"
class="MuiSwitch-track css-tj8d99-MuiSwitch-track"
/>
</span>
<span
Expand Down Expand Up @@ -1033,7 +1033,7 @@ exports[`SubtestsResultsView Component Tests should render the subtests results
role="columnheader"
>
<div
class="MuiButtonGroup-root MuiButtonGroup-contained MuiButtonGroup-horizontal MuiButtonGroup-disableElevation MuiButtonGroup-colorTableHeaderButton css-1fyroww-MuiButtonGroup-root"
class="MuiButtonGroup-root MuiButtonGroup-contained MuiButtonGroup-horizontal MuiButtonGroup-disableElevation MuiButtonGroup-colorTableHeaderButton css-6gd5sl-MuiButtonGroup-root"
role="group"
>
<button
Expand Down Expand Up @@ -2293,11 +2293,11 @@ exports[`SubtestsViewCompareOverTime Component Tests in mann-whitney-u testVersi
type="checkbox"
/>
<span
class="MuiSwitch-thumb css-1mw77bv-MuiSwitch-thumb"
class="MuiSwitch-thumb css-17jyosd-MuiSwitch-thumb"
/>
</span>
<span
class="MuiSwitch-track css-1kf3qur-MuiSwitch-track"
class="MuiSwitch-track css-tj8d99-MuiSwitch-track"
/>
</span>
<span
Expand Down Expand Up @@ -2942,7 +2942,7 @@ exports[`SubtestsViewCompareOverTime Component Tests in mann-whitney-u testVersi
role="columnheader"
>
<div
class="MuiButtonGroup-root MuiButtonGroup-contained MuiButtonGroup-horizontal MuiButtonGroup-disableElevation MuiButtonGroup-colorTableHeaderButton css-1fyroww-MuiButtonGroup-root"
class="MuiButtonGroup-root MuiButtonGroup-contained MuiButtonGroup-horizontal MuiButtonGroup-disableElevation MuiButtonGroup-colorTableHeaderButton css-6gd5sl-MuiButtonGroup-root"
role="group"
>
<button
Expand Down Expand Up @@ -3893,11 +3893,11 @@ exports[`SubtestsViewCompareOverTime Component Tests in mann-whitney-u testVersi
type="checkbox"
/>
<span
class="MuiSwitch-thumb css-1mw77bv-MuiSwitch-thumb"
class="MuiSwitch-thumb css-17jyosd-MuiSwitch-thumb"
/>
</span>
<span
class="MuiSwitch-track css-1kf3qur-MuiSwitch-track"
class="MuiSwitch-track css-tj8d99-MuiSwitch-track"
/>
</span>
<span
Expand Down Expand Up @@ -4542,7 +4542,7 @@ exports[`SubtestsViewCompareOverTime Component Tests in mann-whitney-u testVersi
role="columnheader"
>
<div
class="MuiButtonGroup-root MuiButtonGroup-contained MuiButtonGroup-horizontal MuiButtonGroup-disableElevation MuiButtonGroup-colorTableHeaderButton css-1fyroww-MuiButtonGroup-root"
class="MuiButtonGroup-root MuiButtonGroup-contained MuiButtonGroup-horizontal MuiButtonGroup-disableElevation MuiButtonGroup-colorTableHeaderButton css-6gd5sl-MuiButtonGroup-root"
role="group"
>
<button
Expand Down Expand Up @@ -5493,11 +5493,11 @@ exports[`SubtestsViewCompareOverTime Component Tests renders over-time view when
type="checkbox"
/>
<span
class="MuiSwitch-thumb css-1mw77bv-MuiSwitch-thumb"
class="MuiSwitch-thumb css-17jyosd-MuiSwitch-thumb"
/>
</span>
<span
class="MuiSwitch-track css-1kf3qur-MuiSwitch-track"
class="MuiSwitch-track css-tj8d99-MuiSwitch-track"
/>
</span>
<span
Expand Down Expand Up @@ -6142,7 +6142,7 @@ exports[`SubtestsViewCompareOverTime Component Tests renders over-time view when
role="columnheader"
>
<div
class="MuiButtonGroup-root MuiButtonGroup-contained MuiButtonGroup-horizontal MuiButtonGroup-disableElevation MuiButtonGroup-colorTableHeaderButton css-1fyroww-MuiButtonGroup-root"
class="MuiButtonGroup-root MuiButtonGroup-contained MuiButtonGroup-horizontal MuiButtonGroup-disableElevation MuiButtonGroup-colorTableHeaderButton css-6gd5sl-MuiButtonGroup-root"
role="group"
>
<button
Expand Down Expand Up @@ -7093,11 +7093,11 @@ exports[`SubtestsViewCompareOverTime Component Tests should render the subtests
type="checkbox"
/>
<span
class="MuiSwitch-thumb css-1mw77bv-MuiSwitch-thumb"
class="MuiSwitch-thumb css-17jyosd-MuiSwitch-thumb"
/>
</span>
<span
class="MuiSwitch-track css-1kf3qur-MuiSwitch-track"
class="MuiSwitch-track css-tj8d99-MuiSwitch-track"
/>
</span>
<span
Expand Down Expand Up @@ -7742,7 +7742,7 @@ exports[`SubtestsViewCompareOverTime Component Tests should render the subtests
role="columnheader"
>
<div
class="MuiButtonGroup-root MuiButtonGroup-contained MuiButtonGroup-horizontal MuiButtonGroup-disableElevation MuiButtonGroup-colorTableHeaderButton css-1fyroww-MuiButtonGroup-root"
class="MuiButtonGroup-root MuiButtonGroup-contained MuiButtonGroup-horizontal MuiButtonGroup-disableElevation MuiButtonGroup-colorTableHeaderButton css-6gd5sl-MuiButtonGroup-root"
role="group"
>
<button
Expand Down
33 changes: 25 additions & 8 deletions src/__tests__/Search/CompareOverTime.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,9 @@ import {
waitFor,
} from '../utils/test-utils';

const searchRevisionPlaceholder =
Strings.components.searchDefault.base.collapsed.base.inputPlaceholder;

function setUpTestData() {
const { testData } = getTestData();
fetchMock
Expand Down Expand Up @@ -259,7 +262,11 @@ describe('Compare Over Time', () => {
const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });

// Click inside the input box to show search results.
const searchInput = screen.getByRole('textbox');

// focus input to show results
const searchInput = screen.getAllByPlaceholderText(
searchRevisionPlaceholder,
)[2];
await user.click(searchInput);

const comment = await screen.findAllByText("you've got no arms left!");
Expand All @@ -281,7 +288,9 @@ describe('Compare Over Time', () => {

expect(within(formElement).getByText(/Time range/)).toBeInTheDocument();

const searchInput = screen.getByRole('textbox');
const searchInput = screen.getAllByPlaceholderText(
searchRevisionPlaceholder,
)[2];
await user.click(searchInput);
const checkbox = await screen.findByTestId('checkbox-0');
await user.click(checkbox);
Expand Down Expand Up @@ -310,7 +319,10 @@ describe('Compare Over Time', () => {
const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });

// focus input to show results
const searchInput = screen.getByRole('textbox');
const searchInput = screen.getAllByPlaceholderText(
searchRevisionPlaceholder,
)[2];

await user.click(searchInput);

const noArmsLeft = await screen.findByText(/no arms left/);
Expand Down Expand Up @@ -368,8 +380,10 @@ describe('Compare Over Time', () => {
).toBeInTheDocument();

// focus first input to show results
const inputs = screen.getAllByRole('textbox');
await user.click(inputs[0]);
const searchInputs = screen.getAllByPlaceholderText(
searchRevisionPlaceholder,
);
await user.click(searchInputs[2]);

// Select a rev
const items = await screen.findAllByText("you've got no arms left!");
Expand Down Expand Up @@ -534,14 +548,17 @@ describe('Compare Over Time', () => {
expect(formElement).toMatchSnapshot('After clicking edit button');
expect(editButton).not.toBeVisible();

//add a new revision
const searchInput = within(formElement).getByRole('textbox');
// add a new revision
const searchInput = screen.getAllByPlaceholderText(
searchRevisionPlaceholder,
)[0];

await user.click(searchInput);
const alvesOfCoconut = await screen.findByText(/alves of coconuts/);
await user.click(alvesOfCoconut);
expect(checkboxForText(alvesOfCoconut)).toHaveClass('Mui-checked');

//change time range
// change time range
const timeRangeDropdown = screen.getByRole('combobox', {
name: /Time range/i,
});
Expand Down
8 changes: 7 additions & 1 deletion src/__tests__/Search/CompareWithBase.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,9 @@ import { Strings } from '../../resources/Strings';
import getTestData from '../utils/fixtures';
import { screen, renderWithRouter, within, waitFor } from '../utils/test-utils';

const searchRevisionPlaceholder =
Strings.components.searchDefault.base.collapsed.base.inputPlaceholder;

function setUpTestData() {
const { testData } = getTestData();
fetchMock
Expand Down Expand Up @@ -165,7 +168,10 @@ describe('Compare With Base', () => {
// set delay to null to prevent test time-out due to useFakeTimers
const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });

const searchInput = screen.getAllByRole('textbox')[0];
// focus input to show results
const searchInput = screen.getAllByPlaceholderText(
searchRevisionPlaceholder,
)[1];
await user.click(searchInput);
const checkbox = (await screen.findAllByTestId('checkbox-0'))[0];
await user.click(checkbox);
Expand Down
Loading