diff --git a/src/__tests__/CompareResults/__snapshots__/OverTimeResultsView.test.tsx.snap b/src/__tests__/CompareResults/__snapshots__/OverTimeResultsView.test.tsx.snap index 470b689ae..07b968c62 100644 --- a/src/__tests__/CompareResults/__snapshots__/OverTimeResultsView.test.tsx.snap +++ b/src/__tests__/CompareResults/__snapshots__/OverTimeResultsView.test.tsx.snap @@ -513,7 +513,7 @@ exports[`Results View The table should match snapshot and other elements should role="columnheader" >
+
+ + @@ -546,7 +588,7 @@ exports[`Results Table Should match snapshot 1`] = ` class="MuiFormControl-root search-dropdown f1o9jg5h css-1iw3t7y-MuiFormControl-root" >
- -
- - + +
+ +
+ +
+ +
@@ -945,7 +1029,7 @@ exports[`Results Table Should match snapshot 1`] = ` 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="" @@ -1406,7 +1490,7 @@ exports[`Results Table Should match snapshot 1`] = ` role="columnheader" >
+
+ + @@ -3302,7 +3428,7 @@ exports[`Results Table for MannWhitneyResultsItem for mann-whitney-u testVersion class="MuiFormControl-root search-dropdown f1o9jg5h css-1iw3t7y-MuiFormControl-root" >
- -
- - + +
+ +
+ +
+ +
@@ -3701,7 +3869,7 @@ exports[`Results Table for MannWhitneyResultsItem for mann-whitney-u testVersion 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_p5_" + id="_r_qh_" placeholder="Filter results" type="search" value="" @@ -4162,7 +4330,7 @@ exports[`Results Table for MannWhitneyResultsItem for mann-whitney-u testVersion role="columnheader" >
+
+ + @@ -338,7 +380,7 @@ exports[`Compare Over Time renders correctly in Search View: Initial state for t
@@ -968,7 +1010,7 @@ exports[`Compare Over Time should have an edit mode in Results View: After click class="MuiFormControl-root search-dropdown f1o9jg5h css-1iw3t7y-MuiFormControl-root" >
- -
- - + +
+ +
+ +
+ +
@@ -1758,7 +1842,7 @@ exports[`Compare Over Time should remove the checked revision once X button is c class="MuiFormControl-root search-dropdown f1o9jg5h css-1iw3t7y-MuiFormControl-root" >
- -
- - + +
+ +
+ +
+ +
@@ -2022,7 +2148,7 @@ exports[`Compare Over Time should remove the checked revision once X button is c
- -
- - + +
+ +
+ +
+ +
diff --git a/src/__tests__/Search/__snapshots__/CompareWithBase.test.tsx.snap b/src/__tests__/Search/__snapshots__/CompareWithBase.test.tsx.snap index 832aaddab..748627c8b 100644 --- a/src/__tests__/Search/__snapshots__/CompareWithBase.test.tsx.snap +++ b/src/__tests__/Search/__snapshots__/CompareWithBase.test.tsx.snap @@ -69,7 +69,7 @@ exports[`Compare With Base renders correctly when there are no results: Initial class="MuiFormControl-root search-dropdown f1o9jg5h css-1iw3t7y-MuiFormControl-root" >
- -
- - + +
+ +
+ +
+ +
@@ -374,7 +416,7 @@ exports[`Compare With Base renders correctly when there are no results: Initial class="MuiFormControl-root search-dropdown f1o9jg5h css-1iw3t7y-MuiFormControl-root" >
- -
- - + +
+ +
+ +
+ +
@@ -658,7 +742,7 @@ exports[`Compare With Base selects and displays new framework when clicked 1`] =
    @@ -869,7 +953,7 @@ exports[`Compare With Base should have an edit mode in Results View: After click class="MuiFormControl-root search-dropdown f1o9jg5h css-1iw3t7y-MuiFormControl-root" >
    - -
    - - + +
    + +
    + +
    + +
    @@ -1174,7 +1300,7 @@ exports[`Compare With Base should have an edit mode in Results View: After click class="MuiFormControl-root search-dropdown f1o9jg5h css-1iw3t7y-MuiFormControl-root" >
    - -
    - - + +
    + +
    + +
    + +
    @@ -1383,7 +1551,7 @@ exports[`Compare With Base should have an edit mode in Results View: After click class="MuiFormControl-root search-dropdown f1o9jg5h css-1iw3t7y-MuiFormControl-root" >
    - -
    - - + +
    + +
    + +
    + +
    @@ -1688,7 +1898,7 @@ exports[`Compare With Base should have an edit mode in Results View: After click class="MuiFormControl-root search-dropdown f1o9jg5h css-1iw3t7y-MuiFormControl-root" >
    - -
    - - + +
    + +
    + +
    + +
    @@ -2061,7 +2313,7 @@ exports[`Compare With Base should have an edit mode in Results View: Initial sta class="MuiFormControl-root search-dropdown f1o9jg5h css-1iw3t7y-MuiFormControl-root" >
    - -
    - - + +
    + +
    + +
    + +
    @@ -2366,7 +2660,7 @@ exports[`Compare With Base should have an edit mode in Results View: Initial sta class="MuiFormControl-root search-dropdown f1o9jg5h css-1iw3t7y-MuiFormControl-root" >
    - -
    - - + +
    + +
    + +
    + +
    @@ -2743,7 +3079,7 @@ exports[`Compare With Base should have an edit mode in Results View: after remov class="MuiFormControl-root search-dropdown f1o9jg5h css-1iw3t7y-MuiFormControl-root" >
    - -
    - - + +
    + +
    + +
    + +
    @@ -2888,7 +3266,7 @@ exports[`Compare With Base should have an edit mode in Results View: after remov class="MuiFormControl-root search-dropdown f1o9jg5h css-1iw3t7y-MuiFormControl-root" >
    - -
    - - + +
    + +
    + +
    + +
    @@ -3297,7 +3717,7 @@ exports[`Compare With Base should have an edit mode in Results View: after remov class="MuiFormControl-root search-dropdown f1o9jg5h css-1iw3t7y-MuiFormControl-root" >
    - -
    - - + +
    + +
    + +
    + +
    @@ -3602,7 +4064,7 @@ exports[`Compare With Base should have an edit mode in Results View: after remov class="MuiFormControl-root search-dropdown f1o9jg5h css-1iw3t7y-MuiFormControl-root" >
    - -
    - - + +
    + +
    + +
    + +
    @@ -3790,11 +4294,11 @@ exports[`Compare With Base should remove the checked revision once X button is c type="checkbox" />
    - -
    - - + +
    + +
    + +
    + +
    @@ -4150,7 +4696,7 @@ exports[`Compare With Base should remove the checked revision once X button is c class="MuiFormControl-root search-dropdown f1o9jg5h css-1iw3t7y-MuiFormControl-root" >
    - -
    - - + +
    + +
    + +
    + +
    @@ -4288,7 +4876,7 @@ exports[`Compare With Base should remove the checked revision once X button is c
- -
- - + +
+ +
+ +
+ +
@@ -4711,7 +5341,7 @@ exports[`Compare With Base should remove the checked revision once X button is c
diff --git a/src/__tests__/Search/__snapshots__/SearchContainer.test.tsx.snap b/src/__tests__/Search/__snapshots__/SearchContainer.test.tsx.snap index 8efc27d5d..8f644f47d 100644 --- a/src/__tests__/Search/__snapshots__/SearchContainer.test.tsx.snap +++ b/src/__tests__/Search/__snapshots__/SearchContainer.test.tsx.snap @@ -90,7 +90,7 @@ exports[`Search Containter should match snapshot 1`] = ` class="MuiFormControl-root search-dropdown f1o9jg5h css-1iw3t7y-MuiFormControl-root" >
- -
- - + +
+ +
+ +
+ +
@@ -235,7 +277,7 @@ exports[`Search Containter should match snapshot 1`] = ` class="MuiFormControl-root search-dropdown f1o9jg5h css-1iw3t7y-MuiFormControl-root" >
- -
- - + +
+ +
+ +
+ +
@@ -373,7 +457,7 @@ exports[`Search Containter should match snapshot 1`] = `
- -
- - + +
+ +
+ +
+ +
@@ -796,7 +922,7 @@ exports[`Search Containter should match snapshot 1`] = `
-
    -
  • -
    + - -
    + + + + +
    • +
    +
    + + coconut +
    - - + + + johncleese@python.com +
    +
    +
    -
    - - - - johncleese@python.com -
    -
    - -
    - Mar 29, 51, 00:00 UTC -
    -
    + Mar 29, 51, 00:00 UTC
    - - - you've got no arms left! - +
    - +
    + + you've got no arms left! +
+ +
  • -
  • -
    + - -
    + + + + +
    • +
    +
    + + spam +
    - - + + + ericidle@python.com +
    +
    +
    -
    - - - - ericidle@python.com -
    -
    - -
    - Feb 22, 58, 00:00 UTC -
    -
    + Feb 22, 58, 00:00 UTC
    - - - it's just a flesh wound - +
    - +
    + + it's just a flesh wound +
    + +
  • -
  • -
    + - -
    + + + + +
    • +
    +
    + + spamspam +
    - - + + + terrygilliam@python.com +
    +
    +
    -
    - - - - terrygilliam@python.com -
    -
    - -
    - Jul 29, 87, 00:00 UTC -
    -
    + Jul 29, 87, 00:00 UTC
    - - - What, ridden on a horse? - +
    - +
    + + What, ridden on a horse? +
    + +
  • -
  • -
    + - -
    + + + + +
    • +
    +
    + + spamspamspam +
    - - + + + michaelpalin@python.com +
    +
    +
    -
    - - - - michaelpalin@python.com -
    -
    - -
    - Jul 4, 20, 00:00 UTC -
    -
    + Jul 4, 20, 00:00 UTC
    - - - You've got two empty 'alves of coconuts and you're bangin' 'em togetha! - +
    - +
    + + You've got two empty 'alves of coconuts and you're bangin' 'em togetha! +
    + +
  • -
  • -
    + - -
    + + + + +
    • +
    +
    + + spamspamspam +
    - - -
    + + grahamchapman@python.com +
    +
    +
    - - - - grahamchapman@python.com -
    -
    - -
    - Apr 13, 22, 00:00 UTC -
    -
    + + +
    + Apr 13, 22, 00:00 UTC
    - - - She turned me into a newt! - +
    - +
    + + She turned me into a newt! +
    + +
  • -
  • -
    + - -
    + + + + +
    • +
    +
    + + ed24spamspam +
    - - + + + nathanniy@python.com +
    +
    +
    -
    - - - - nathanniy@python.com -
    -
    - -
    - Apr 13, 22, 00:03 UTC -
    -
    + Apr 13, 22, 00:03 UTC
    - - - Bug 123456 Fuzzy She turned me into a newt! - +
    - +
    + + Bug 123456 Fuzzy She turned me into a newt! +
    + +
  • -
  • -
    + - -
    + + + + +
    • +
    +
    + + spamspamspam +
    - - + + + grahamchapman@python.com +
    +
    +
    -
    - - - - grahamchapman@python.com -
    -
    - -
    - Apr 13, 22, 00:00 UTC -
    -
    + Apr 13, 22, 00:00 UTC
    - - - Commit message with no newline at the end - +
    - +
    + + Commit message with no newline at the end +
    - -
    + + `; exports[`SearchResultsList should match snapshot 1`] = ` @@ -839,11 +836,11 @@ exports[`SearchResultsList should match snapshot 1`] = ` type="checkbox" />
    - -
    - - -
    -
    -
    -
    -
      -
      -
    • -
      - - - - - - - -
      -
      - - - coconut - -
      -
      - - - - johncleese@python.com -
      -
      - -
      - Mar 29, 51, 00:00 UTC -
      -
      -
      -       - - you've got no arms left! - -
      -
      • -
      -
      -
    • -
      - -
      -
      - - - spam - -
      -
      - - - - ericidle@python.com -
      -
      - -
      - Feb 22, 58, 00:00 UTC -
      -
      -
      -       - - it's just a flesh wound - +
      -
      • -
      -
      -
    • +
      - - - - + + +
      - -
      • + + +
    -
    -
  • -
    - - - - - - - -
    -
    - - - spamspamspam - -
    -
    - - - - michaelpalin@python.com -
    -
    - -
    - Jul 4, 20, 00:00 UTC -
    -
    -
    -     - - You've got two empty 'alves of coconuts and you're bangin' 'em togetha! - -
    -
    • -
    -
    -
  • -
    - - - - - - - -
    -
    - - - spamspamspam - -
    -
    - - - - grahamchapman@python.com -
    -
    - -
    - Apr 13, 22, 00:00 UTC -
    -
    -
    -     - - She turned me into a newt! - -
    -
    • -
    -
    -
  • -
    - - - - - - - -
    -
    - - - ed24spamspam - -
    -
    - - - - nathanniy@python.com -
    -
    - -
    - Apr 13, 22, 00:03 UTC -
    -
    -
    -     - - Bug 123456 Fuzzy She turned me into a newt! - -
    -
    • -
    -
    -
  • -
    - - - - - - - -
    -
    - - - spamspamspam - -
    -
    - - - - grahamchapman@python.com -
    -
    - -
    - Apr 13, 22, 00:00 UTC -
    -
    -
    -     - - Commit message with no newline at the end - -
    -
    • -
    - +
    @@ -1993,7 +1239,7 @@ exports[`SearchResultsList should match snapshot 1`] = ` class="MuiFormControl-root search-dropdown f1o9jg5h css-1iw3t7y-MuiFormControl-root" >
    - -
    - - + +
    + +
    + +
    + +
    @@ -2131,7 +1419,7 @@ exports[`SearchResultsList should match snapshot 1`] = `
    - -
    - - + +
    + +
    + +
    + +
    @@ -2554,7 +1884,7 @@ exports[`SearchResultsList should match snapshot 1`] = `
    + `; diff --git a/src/__tests__/Search/__snapshots__/SearchView.test.tsx.snap b/src/__tests__/Search/__snapshots__/SearchView.test.tsx.snap index 5a7e386c5..9ab0e5f28 100644 --- a/src/__tests__/Search/__snapshots__/SearchView.test.tsx.snap +++ b/src/__tests__/Search/__snapshots__/SearchView.test.tsx.snap @@ -42,11 +42,11 @@ exports[`Search View renders correctly when there are no results 1`] = ` type="checkbox" />
    - -
    - - + +
    + +
    + +
    + +
    @@ -402,7 +444,7 @@ exports[`Search View renders correctly when there are no results 1`] = ` class="MuiFormControl-root search-dropdown f1o9jg5h css-1iw3t7y-MuiFormControl-root" >
    - -
    - - + +
    + +
    + +
    + +
    @@ -540,7 +624,7 @@ exports[`Search View renders correctly when there are no results 1`] = `
    - -
    - - + +
    + +
    + +
    + +
    @@ -963,7 +1089,7 @@ exports[`Search View renders correctly when there are no results 1`] = `
    - -
    - - + +
    + +
    + +
    + +
    @@ -1500,7 +1668,7 @@ exports[`With search parameters both search components are populated as expected
    - -
    - - + +
    + +
    + +
    + +
    @@ -1743,7 +1953,7 @@ exports[`With search parameters both search components are populated as expected class="MuiFormControl-root search-dropdown f1o9jg5h css-1iw3t7y-MuiFormControl-root" >
    - -
    - - + +
    + +
    + +
    + +
    @@ -2021,7 +2273,7 @@ exports[`With search parameters both search components are populated as expected
    - -
    - - + +
    + +
    + +
    + +
    @@ -2551,7 +2845,7 @@ exports[`With search parameters both search components are populated as expected
    - -
    - - + +
    + +
    + +
    + +
    @@ -2794,7 +3130,7 @@ exports[`With search parameters both search components are populated as expected class="MuiFormControl-root search-dropdown f1o9jg5h css-1iw3t7y-MuiFormControl-root" >
    - -
    - - + +
    + +
    + +
    + +
    @@ -3072,7 +3450,7 @@ exports[`With search parameters both search components are populated as expected
    - -
    - - + +
    + +
    + +
    + +
    @@ -3602,7 +4022,7 @@ exports[`With search parameters displays the default value for framework if the
    - -
    - - + +
    + +
    + +
    + +
    @@ -3845,7 +4307,7 @@ exports[`With search parameters displays the default value for framework if the class="MuiFormControl-root search-dropdown f1o9jg5h css-1iw3t7y-MuiFormControl-root" >
    - -
    - - + +
    + +
    + +
    + +
    @@ -4123,7 +4627,7 @@ exports[`With search parameters displays the default value for framework if the
    - -
    - - + +
    + +
    + +
    + +
    @@ -4513,7 +5059,7 @@ exports[`With search parameters displays the default values if some values are b
    - -
    - - + +
    + +
    + +
    + +
    @@ -4756,7 +5344,7 @@ exports[`With search parameters displays the default values if some values are b class="MuiFormControl-root search-dropdown f1o9jg5h css-1iw3t7y-MuiFormControl-root" >
    - -
    - - + +
    + +
    + +
    + +
    @@ -4894,7 +5524,7 @@ exports[`With search parameters displays the default values if some values are b
    { await user.click(screen.getByRole('option', { name: 'autoland' })); expect(baseRepoSelect).toHaveTextContent('autoland'); - const searchInput = screen.getAllByRole('textbox')[0]; + const placeholder = + Strings.components.searchDefault.base.collapsed.base.inputPlaceholder; + + // focus input to show results + const searchInput = screen.getAllByPlaceholderText(placeholder)[1]; await user.click(searchInput); await screen.findAllByText("you've got no arms left!"); @@ -63,9 +67,10 @@ describe('Search View/fetchRecentRevisions', () => { const errorMessages = await screen.findAllByText('No results found'); expect(errorMessages).toHaveLength(3); - const inputs = screen.getAllByRole('textbox'); - expect(inputs[0]).toBeInvalid(); - expect(inputs[1]).toBeInvalid(); + const inputs = screen.queryAllByTestId('autocomplete-option'); + + expect(inputs[0]).toBeUndefined(); + expect(inputs[1]).toBeUndefined(); expect(global.fetch).toHaveFetched( 'https://treeherder.mozilla.org/api/project/try/push/?hide_reviewbot_pushes=true&count=30', undefined, @@ -86,9 +91,9 @@ describe('Search View/fetchRecentRevisions', () => { const errorMessages = await screen.findAllByText(errorMessage); expect(errorMessages).toHaveLength(3); - const inputs = screen.getAllByRole('textbox'); - expect(inputs[0]).toBeInvalid(); - expect(inputs[1]).toBeInvalid(); + const inputs = screen.queryAllByTestId('autocomplete-option'); + expect(inputs[0]).toBeUndefined(); + expect(inputs[1]).toBeUndefined(); expect(global.fetch).toHaveFetched( 'https://treeherder.mozilla.org/api/project/try/push/?hide_reviewbot_pushes=true&count=30', undefined, diff --git a/src/__tests__/Search/fetchRevisionByID.test.tsx b/src/__tests__/Search/fetchRevisionByID.test.tsx index 1f5ba91c7..d5fdac6ad 100644 --- a/src/__tests__/Search/fetchRevisionByID.test.tsx +++ b/src/__tests__/Search/fetchRevisionByID.test.tsx @@ -5,7 +5,10 @@ import { loader } from '../../components/Search/loader'; import SearchView from '../../components/Search/SearchView'; import { Strings } from '../../resources/Strings'; import getTestData from '../utils/fixtures'; -import { screen, renderWithRouter, act } from '../utils/test-utils'; +import { screen, renderWithRouter, act, waitFor } from '../utils/test-utils'; + +const searchRevisionPlaceholder = + Strings.components.searchDefault.base.collapsed.base.inputPlaceholder; async function renderSearchViewComponent() { renderWithRouter(, { @@ -29,7 +32,9 @@ describe('Search View/fetchRevisionByID', () => { await renderSearchViewComponent(); - const searchInput = screen.getAllByRole('textbox')[0]; + const searchInput = screen.getAllByPlaceholderText( + searchRevisionPlaceholder, + )[0]; await user.type(searchInput, 'abcdef123456'); act(() => void jest.runAllTimers()); expect(global.fetch).toHaveFetched( @@ -73,7 +78,9 @@ describe('Search View/fetchRevisionByID', () => { await renderSearchViewComponent(); - const searchInput = screen.getAllByRole('textbox')[0]; + const searchInput = screen.getAllByPlaceholderText( + searchRevisionPlaceholder, + )[0]; await user.type(searchInput, 'abcdef1234567890abcdef1234567890abcdef12'); act(() => void jest.runAllTimers()); @@ -83,7 +90,10 @@ describe('Search View/fetchRevisionByID', () => { ); expect(await screen.findByText('No results found')).toBeInTheDocument(); - expect(searchInput).toBeInvalid(); + + await waitFor(() => { + expect(searchInput).toHaveAttribute('aria-invalid', 'true'); + }); }); it('should update error state if fetchRevisionByID returns an error', async () => { @@ -106,7 +116,9 @@ describe('Search View/fetchRevisionByID', () => { await renderSearchViewComponent(); - const searchInput = screen.getAllByRole('textbox')[0]; + const searchInput = screen.getAllByPlaceholderText( + searchRevisionPlaceholder, + )[0]; await user.type(searchInput, 'abcdef1234567890abcdef1234567890abcdef12'); act(() => void jest.runAllTimers()); @@ -114,8 +126,11 @@ describe('Search View/fetchRevisionByID', () => { 'https://treeherder.mozilla.org/api/project/try/push/?revision=abcdef1234567890abcdef1234567890abcdef12', undefined, ); - expect(await screen.findByText(errorMessage)).toBeInTheDocument(); - expect(searchInput).toBeInvalid(); + const errorMessageNode = await screen.findAllByText(errorMessage); + expect(errorMessageNode[0]).toBeInTheDocument(); + await waitFor(() => { + expect(searchInput).toHaveAttribute('aria-invalid', 'true'); + }); expect(console.error).toHaveBeenCalledWith( 'Error while fetching recent revisions:', new Error(errorMessage), @@ -141,7 +156,10 @@ describe('Search View/fetchRevisionByID', () => { await renderSearchViewComponent(); - const searchInput = screen.getAllByRole('textbox')[0]; + const searchInput = screen.getAllByPlaceholderText( + searchRevisionPlaceholder, + )[0]; + await user.type(searchInput, 'abcdef123456'); act(() => void jest.runAllTimers()); @@ -149,10 +167,15 @@ describe('Search View/fetchRevisionByID', () => { 'https://treeherder.mozilla.org/api/project/try/push/?revision=abcdef123456', undefined, ); - expect( - await screen.findByText('An error has occurred'), - ).toBeInTheDocument(); - expect(searchInput).toBeInvalid(); + const errorMessageNode = await screen.findAllByText( + 'An error has occurred', + ); + expect(errorMessageNode[0]).toBeInTheDocument(); + + await waitFor(() => { + expect(searchInput).toHaveAttribute('aria-invalid', 'true'); + }); + expect(console.error).toHaveBeenCalledWith( 'Error while fetching recent revisions:', new Error(), diff --git a/src/__tests__/Search/fetchRevisionsBySearch.test.tsx b/src/__tests__/Search/fetchRevisionsBySearch.test.tsx index 6d7f6def2..fc7f1d9d7 100644 --- a/src/__tests__/Search/fetchRevisionsBySearch.test.tsx +++ b/src/__tests__/Search/fetchRevisionsBySearch.test.tsx @@ -5,7 +5,10 @@ import { loader } from '../../components/Search/loader'; import SearchView from '../../components/Search/SearchView'; import { Strings } from '../../resources/Strings'; import getTestData from '../utils/fixtures'; -import { screen, act, renderWithRouter } from '../utils/test-utils'; +import { screen, act, renderWithRouter, waitFor } from '../utils/test-utils'; + +const searchRevisionPlaceholder = + Strings.components.searchDefault.base.collapsed.base.inputPlaceholder; async function renderSearchViewComponent() { renderWithRouter(, { @@ -110,7 +113,9 @@ describe('SearchView/fetchRevisions', () => { await renderSearchViewComponent(); - const searchInput = screen.getAllByRole('textbox')[0]; + const searchInput = screen.getAllByPlaceholderText( + searchRevisionPlaceholder, + )[0]; await user.type(searchInput, 'ericidle@python.com'); act(() => void jest.runAllTimers()); @@ -120,7 +125,9 @@ describe('SearchView/fetchRevisions', () => { ); expect(await screen.findByText('No results found')).toBeInTheDocument(); - expect(searchInput).toBeInvalid(); + await waitFor(() => { + expect(searchInput).toHaveAttribute('aria-invalid', 'true'); + }); }); it('should update error state if fetchRevisionsByAuthor returns an error', async () => { @@ -143,7 +150,9 @@ describe('SearchView/fetchRevisions', () => { await renderSearchViewComponent(); - const searchInput = screen.getAllByRole('textbox')[0]; + const searchInput = screen.getAllByPlaceholderText( + searchRevisionPlaceholder, + )[0]; await user.type(searchInput, 'grahamchapman@python.com'); act(() => void jest.runAllTimers()); @@ -151,8 +160,12 @@ describe('SearchView/fetchRevisions', () => { 'https://treeherder.mozilla.org/api/project/try/push/?search=grahamchapman%40python.com', undefined, ); - expect(await screen.findByText(errorMessage)).toBeInTheDocument(); - expect(searchInput).toBeInvalid(); + + const messages = await screen.findAllByText(errorMessage); + expect(messages[0]).toBeInTheDocument(); + await waitFor(() => { + expect(searchInput).toHaveAttribute('aria-invalid', 'true'); + }); expect(console.error).toHaveBeenCalledWith( 'Error while fetching recent revisions:', new Error(errorMessage), @@ -178,7 +191,9 @@ describe('SearchView/fetchRevisions', () => { await renderSearchViewComponent(); - const searchInput = screen.getAllByRole('textbox')[0]; + const searchInput = screen.getAllByPlaceholderText( + searchRevisionPlaceholder, + )[0]; await user.type(searchInput, 'grahamchapman@python.com'); act(() => void jest.runAllTimers()); @@ -186,10 +201,12 @@ describe('SearchView/fetchRevisions', () => { 'https://treeherder.mozilla.org/api/project/try/push/?search=grahamchapman%40python.com', undefined, ); - expect( - await screen.findByText('An error has occurred'), - ).toBeInTheDocument(); - expect(searchInput).toBeInvalid(); + + const messages = await screen.findAllByText('An error has occurred'); + expect(messages[0]).toBeInTheDocument(); + await waitFor(() => { + expect(searchInput).toHaveAttribute('aria-invalid', 'true'); + }); expect(console.error).toHaveBeenCalledWith( 'Error while fetching recent revisions:', new Error(), @@ -209,6 +226,7 @@ describe('SearchView/fetchRevisions', () => { const searchInput = screen.getAllByRole('textbox')[0]; await user.type(searchInput, 'abcdef123456'); + act(() => void jest.runAllTimers()); expect(global.fetch).toHaveFetched( 'https://treeherder.mozilla.org/api/project/try/push/?revision=abcdef123456', diff --git a/src/__tests__/Snackbar.test.tsx b/src/__tests__/Snackbar.test.tsx index 20d323297..be4aab61e 100644 --- a/src/__tests__/Snackbar.test.tsx +++ b/src/__tests__/Snackbar.test.tsx @@ -2,9 +2,6 @@ import fetchMock from '@fetch-mock/jest'; import userEvent from '@testing-library/user-event'; import App from '../components/App'; -import { loader } from '../components/Search/loader'; -import SearchView from '../components/Search/SearchView'; -import { Strings } from '../resources/Strings'; import getTestData from './utils/fixtures'; import { screen, @@ -13,6 +10,12 @@ import { render, waitForElementToBeRemoved, } from './utils/test-utils'; +import { loader } from '../components/Search/loader'; +import SearchView from '../components/Search/SearchView'; +import { Strings } from '../resources/Strings'; + +const searchRevisionPlaceholder = + Strings.components.searchDefault.base.collapsed.base.inputPlaceholder; describe('Snackbar', () => { beforeEach(() => { @@ -32,7 +35,10 @@ describe('Snackbar', () => { render(); // focus input to show results - const searchInput = screen.getAllByRole('textbox')[1]; + // const searchInput = screen.getAllByRole('textbox')[1]; + const searchInput = screen.getAllByPlaceholderText( + searchRevisionPlaceholder, + )[1]; await user.click(searchInput); await user.click(await screen.findByTestId('checkbox-0')); @@ -56,7 +62,10 @@ describe('Snackbar', () => { render(); // focus input to show results - const searchInput = screen.getAllByRole('textbox')[0]; + // const searchInput = screen.getAllByRole('textbox')[0]; + const searchInput = screen.getAllByPlaceholderText( + searchRevisionPlaceholder, + )[0]; await user.click(searchInput); await user.click((await screen.findAllByTestId('checkbox-0'))[0]); @@ -71,12 +80,23 @@ describe('Snackbar', () => { // set delay to null to prevent test time-out due to useFakeTimers const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime }); - renderWithRouter(, { - loader, - }); + // eslint-disable-next-line testing-library/no-unnecessary-act + await act(async () => + renderWithRouter( + , + { + loader, + route: '/', + search: '?useFulltextSearch', + }, + ), + ); // focus input to show results - const searchInput = (await screen.findAllByRole('textbox'))[1]; + // const searchInput = (await screen.findAllByRole('textbox'))[1]; + const searchInput = screen.getAllByPlaceholderText( + searchRevisionPlaceholder, + )[1]; await user.click(searchInput); await user.click(await screen.findByTestId('checkbox-0')); diff --git a/src/__tests__/__snapshots__/App.test.tsx.snap b/src/__tests__/__snapshots__/App.test.tsx.snap index 3743500be..a9ce8d359 100644 --- a/src/__tests__/__snapshots__/App.test.tsx.snap +++ b/src/__tests__/__snapshots__/App.test.tsx.snap @@ -40,11 +40,11 @@ exports[`App CompareResults or CompareOverTime loader Should render an error pag type="checkbox" /> state.theme.mode); + + // Styling from original SearchInput + const inputStyles = { + container: style({ + $nest: { + '.hide': { + visibility: 'hidden', + }, + '.search-text-field': { + width: '100%', + }, + '.MuiInputBase-root': { + ...(mode == 'light' ? InputStylesRaw.Light : InputStylesRaw.Dark), + flexDirection: 'row', + }, + }, + }), + inputAdornment: { + marginLeft: `${Spacing.Small}px`, + marginRight: 0, + }, + }; + + return ( + + + + + ), + }, + htmlInput: { + 'aria-label': inputPlaceholder, + ...params.inputProps, + }, + }} + /> + + ); +} + +export default AutocompleteInput; diff --git a/src/components/Search/RevisionAutocompleteOption.tsx b/src/components/Search/RevisionAutocompleteOption.tsx new file mode 100644 index 000000000..95f7bcbfc --- /dev/null +++ b/src/components/Search/RevisionAutocompleteOption.tsx @@ -0,0 +1,138 @@ +import { HTMLAttributes } from 'react'; + +import AccessTimeOutlinedIcon from '@mui/icons-material/AccessTimeOutlined'; +import MailOutlineOutlinedIcon from '@mui/icons-material/MailOutlineOutlined'; +import Box from '@mui/material/Box'; +import Checkbox from '@mui/material/Checkbox'; +import Radio from '@mui/material/Radio'; +import Typography from '@mui/material/Typography'; +import { style } from 'typestyle'; + +import DateTimeDisplay from './DateTimeDisplay'; +import { Spacing } from '../../styles'; +import type { Changeset } from '../../types/state'; +import { truncateHash, getLatestCommitMessage } from '../../utils/helpers'; + +interface AutocompleteOptionProps { + index: number; + item: Changeset; + isChecked: boolean; + onToggle: (item: Changeset) => void; + listItemComponent?: 'checkbox' | 'radio'; +} + +type AutocompleteOptionWithHTMLProps = AutocompleteOptionProps & + Omit, 'onToggle'>; + +const styles = { + container: style({ + display: 'flex', + alignItems: 'flex-start', + padding: `${Spacing.xSmall}px ${Spacing.Small}px`, + paddingTop: 0, + cursor: 'pointer', + width: '100%', + $nest: { + '&:hover': { + backgroundColor: 'inherit', // Let parent handle hover + }, + '.search-revision-item-icon': { + minWidth: '0', + }, + '.search-revision-item-text': { + flex: 1, + }, + '.MuiListItemText-primary': { + display: 'flex', + justifyContent: 'space-between', + flexWrap: 'wrap', + }, + '.info-caption': { + flexWrap: 'wrap', + $nest: { + svg: { + marginRight: `${Spacing.xSmall}px`, + fontSize: '1rem', + }, + '.item-author': { + marginRight: `${Spacing.xSmall + 1}px`, + }, + }, + }, + }, + }), +}; + +function AutocompleteOption({ + index, + item, + isChecked, + onToggle, + listItemComponent, + ...htmlProps +}: AutocompleteOptionWithHTMLProps) { + const ListItemComponent = listItemComponent === 'radio' ? Radio : Checkbox; + const revisionHash = truncateHash(item.revision); + const commitMessage = getLatestCommitMessage(item); + const itemDate = new Date(item.push_timestamp * 1000); + + const onToggleAction = () => { + onToggle(item); + }; + + return ( +
  • + + + + + + + + {revisionHash} + +
    +
    + + {item.author} +
    + +
    + + +
    +
    +     + + + {commitMessage} + +     +
    • + ); +} + +export default AutocompleteOption; diff --git a/src/components/Search/SearchInputAndResults.tsx b/src/components/Search/SearchInputAndResults.tsx index 0d6a0c6b3..f85e67c20 100644 --- a/src/components/Search/SearchInputAndResults.tsx +++ b/src/components/Search/SearchInputAndResults.tsx @@ -1,11 +1,30 @@ -import { useState, useEffect, useCallback, useRef } from 'react'; +import { + useState, + useEffect, + useCallback, + useRef, + HTMLAttributes, +} from 'react'; +import Autocomplete, { + AutocompleteRenderInputParams, +} from '@mui/material/Autocomplete'; import Box from '@mui/material/Box'; +import { useTheme } from '@mui/material/styles'; +import { style } from 'typestyle'; -import SearchInput from './SearchInput'; -import SearchResultsList from './SearchResultsList'; +import AutocompleteInput from './RevisionAutocompleteInput'; +import AutocompleteOption from './RevisionAutocompleteOption'; +import { useAppSelector } from '../../hooks/app'; import { fetchRecentRevisions } from '../../logic/treeherder'; import { Strings } from '../../resources/Strings'; +import { + Colors, + FontsRaw, + Spacing, + captionStylesLight, + captionStylesDark, +} from '../../styles'; import type { Changeset, Repository } from '../../types/state'; import { simpleDebounce } from '../../utils/simple-debounce'; @@ -28,7 +47,9 @@ export default function SearchInputAndResults({ onSearchResultsToggle, listItemComponent, }: Props) { - const [displayDropdown, setDisplayDropdown] = useState(false); + const mode = useAppSelector((state) => state.theme.mode); + const theme = useTheme(); + const [recentRevisions, setRecentRevisions] = useState( null as null | Changeset[], ); @@ -45,26 +66,83 @@ export default function SearchInputAndResults({ const containerRef = useRef(null as null | HTMLElement); - const handleDocumentMousedown = useCallback( - (e: MouseEvent) => { - if (!displayDropdown) { - return; - } - const target = e.target as HTMLElement; - if (!containerRef.current?.contains(target)) { - // Close the dropdown only if the click is outside the search input or one - // of it's descendants. - setDisplayDropdown(false); - } - }, - [displayDropdown], - ); + // Styling from original SearchResultsList + const sharedSelectStyles = { + borderRadius: '4px', + marginTop: `${Spacing.xSmall}px`, + maxHeight: '285px', + overflow: 'auto', + maxWidth: '100%', + padding: `${Spacing.xSmall}px`, + border: `1px solid ${Colors.BorderDefault}`, + zIndex: 100, + }; - const handleEscKeypress = useCallback((e: KeyboardEvent) => { - if (e.key === 'Escape') { - setDisplayDropdown(false); - } - }, []); + const getListStyles = (themeMode: string) => { + const captionStyle = + themeMode === 'light' ? captionStylesLight : captionStylesDark; + + return style({ + backgroundColor: theme.palette.searchDropdown.background, + position: 'relative', + ...sharedSelectStyles, + $nest: { + // Autocomplete option highlighting + 'li[aria-selected="true"]': { + backgroundColor: `${theme.palette.searchDropdown.hover} !important`, + borderRadius: '4px', + paddingTop: `${Spacing.xSmall}px`, + }, + 'li:hover': { + backgroundColor: `${theme.palette.searchDropdown.hover} !important`, + borderRadius: '4px', + paddingTop: `${Spacing.xSmall}px`, + }, + 'li[data-focus="true"]': { + backgroundColor: `${theme.palette.searchDropdown.hover} !important`, + borderRadius: '4px', + paddingTop: `${Spacing.xSmall}px`, + }, + 'li.Mui-focused': { + backgroundColor: `${theme.palette.searchDropdown.hover} !important`, + borderRadius: '4px', + paddingTop: `${Spacing.xSmall}px`, + }, + // General li styling for all options + li: { + paddingTop: `${Spacing.xSmall}px`, + }, + // Original list item button styles (keeping for compatibility) + '.MuiListItemButton-root': { + padding: `${Spacing.xSmall}px ${Spacing.Small}px`, + $nest: { + '&:hover': { + backgroundColor: theme.palette.searchDropdown.hover, + borderRadius: '4px', + }, + '&:active': { + backgroundColor: theme.palette.searchDropdown.active, + borderRadius: '4px', + }, + }, + }, + '.item-selected': { + backgroundColor: theme.palette.searchDropdown.hover, + borderRadius: '4px', + }, + '.revision-hash': { + ...FontsRaw.BodyDefault, + marginRight: Spacing.Small, + }, + '.info-caption': { + ...captionStyle, + }, + '.MuiTypography-root': { + ...FontsRaw.BodyDefault, + }, + }, + }); + }; const searchRecentRevisions = useCallback( async (searchTerm: string) => { @@ -159,40 +237,64 @@ export default function SearchInputAndResults({ void searchRecentRevisions(lastSearchTermRef.current); }, [repository]); - useEffect(() => { - document.addEventListener('mousedown', handleDocumentMousedown); - return () => { - document.removeEventListener('mousedown', handleDocumentMousedown); - }; - }, [handleDocumentMousedown]); + const renderInput = (params: AutocompleteRenderInputParams) => ( + + ); - useEffect(() => { - document.addEventListener('keydown', handleEscKeypress); - return () => { - document.removeEventListener('keydown', handleEscKeypress); - }; - }, [handleEscKeypress]); + const renderOption = ( + props: HTMLAttributes, + option: Changeset, + ) => ( + rev.id).includes(option.id)} + onToggle={onSearchResultsToggle} + listItemComponent={listItemComponent} + /> + ); return ( - setDisplayDropdown(true)} - compact={compact} - inputPlaceholder={inputPlaceholder} - searchType={searchType} - searchError={searchError} - onChange={onValueChange} + options.revision} + isOptionEqualToValue={(option, value) => option.id === value.id} + multiple={listItemComponent !== 'radio'} + disableCloseOnSelect={listItemComponent !== 'radio'} + filterOptions={(options) => options} + onInputChange={(_, value) => onValueChange(value)} + onChange={(_, value) => { + if (value) { + if (Array.isArray(value)) { + // Handle multiple selection (checkbox mode) + value.forEach((item) => onSearchResultsToggle(item)); + } else { + // Handle single selection (radio mode) + onSearchResultsToggle(value); + } + } + }} + renderInput={renderInput} + renderOption={renderOption} + loading={recentRevisions?.length === 0} + loadingText={'Loading...'} + noOptionsText={searchError || 'No results found'} + slotProps={{ + listbox: { + className: `${getListStyles(mode)} results-list-${mode}`, + }, + }} + data-testid='autocomplete' /> - - {recentRevisions && displayDropdown && ( - - )} ); } diff --git a/src/components/Search/SearchResultsList.tsx b/src/components/Search/SearchResultsList.tsx deleted file mode 100644 index f3250e953..000000000 --- a/src/components/Search/SearchResultsList.tsx +++ /dev/null @@ -1,124 +0,0 @@ -import Box from '@mui/material/Box'; -import List from '@mui/material/List'; -import { style } from 'typestyle'; - -import SearchResultsListItem from './SearchResultsListItem'; -import { useAppSelector } from '../../hooks/app'; -import { - Colors, - FontsRaw, - Spacing, - captionStylesLight, - captionStylesDark, -} from '../../styles'; -import { Changeset } from '../../types/state'; - -interface SearchResultsListProps { - compact: boolean; - searchResults: Changeset[]; - displayedRevisions: Changeset[]; - onToggle: (item: Changeset) => void; - listItemComponent?: 'checkbox' | 'radio'; -} - -const sharedSelectStyles = { - borderRadius: '4px', - marginTop: `${Spacing.xSmall}px`, - maxHeight: '285px', - overflow: 'auto', - maxWidth: '100%', - padding: `${Spacing.xSmall}px`, - border: `1px solid ${Colors.BorderDefault}`, - zIndex: 100, -}; - -function getStyles(theme: string) { - const backgroundColor = - theme === 'light' ? Colors.Background300 : Colors.Background300Dark; - const hoverColor = - theme === 'light' ? Colors.SecondaryHover : Colors.SecondaryHoverDark; - const activeColor = - theme === 'light' ? Colors.SecondaryActive : Colors.SecondaryActiveDark; - const captionStyle = - theme === 'light' ? captionStylesLight : captionStylesDark; - - return style({ - backgroundColor, - position: 'relative', - ...sharedSelectStyles, - $nest: { - '.MuiListItemButton-root': { - padding: `${Spacing.xSmall}px ${Spacing.Small}px`, - $nest: { - '&:hover': { - backgroundColor: hoverColor, - borderRadius: '4px', - }, - '&:active': { - backgroundColor: activeColor, - borderRadius: '4px', - }, - }, - }, - '.item-selected': { - backgroundColor: hoverColor, - borderRadius: '4px', - }, - '.revision-hash': { - ...FontsRaw.BodyDefault, - marginRight: Spacing.Small, - }, - '.info-caption': { - ...captionStyle, - }, - '.MuiTypography-root': { - ...FontsRaw.BodyDefault, - }, - }, - }); -} - -function SearchResultsList({ - compact, - searchResults, - displayedRevisions, - onToggle, - listItemComponent, -}: SearchResultsListProps) { - const mode = useAppSelector((state) => state.theme.mode); - const styles = { - light: getStyles('light'), - dark: getStyles('dark'), - }; - // const styles = mode === 'light' ? SelectListLight : SelectListDark; - - const isInProgressChecked = (item: Changeset) => { - return displayedRevisions.map((rev) => rev.id).includes(item.id); - }; - - return ( - - - {searchResults.map((item, index) => ( - - ))} - - - ); -} - -export default SearchResultsList; diff --git a/src/components/Search/SearchResultsListItem.tsx b/src/components/Search/SearchResultsListItem.tsx deleted file mode 100644 index c80dbe640..000000000 --- a/src/components/Search/SearchResultsListItem.tsx +++ /dev/null @@ -1,146 +0,0 @@ -import { Fragment } from 'react'; - -import AccessTimeOutlinedIcon from '@mui/icons-material/AccessTimeOutlined'; -import MailOutlineOutlinedIcon from '@mui/icons-material/MailOutlineOutlined'; -import Checkbox from '@mui/material/Checkbox'; -import ListItem from '@mui/material/ListItem'; -import ListItemButton from '@mui/material/ListItemButton'; -import ListItemIcon from '@mui/material/ListItemIcon'; -import ListItemText from '@mui/material/ListItemText'; -import Radio from '@mui/material/Radio'; -import Typography from '@mui/material/Typography'; -import { style } from 'typestyle'; - -import DateTimeDisplay from './DateTimeDisplay'; -import { Spacing } from '../../styles'; -import type { Changeset } from '../../types/state'; -import { truncateHash, getLatestCommitMessage } from '../../utils/helpers'; - -interface SearchResultsListItemProps { - index: number; - item: Changeset; - isChecked: boolean; - onToggle: (item: Changeset) => void; - listItemComponent?: 'checkbox' | 'radio'; -} - -const styles = { - listItemButton: style({ - paddingTop: 0, - $nest: { - '.MuiListItem-root': { - alignItems: 'flex-start', - }, - '.search-revision-item-icon': { - minWidth: '0', - }, - - '.MuiListItemText-primary': { - display: 'flex', - justifyContent: 'space-between', - flexWrap: 'wrap', - }, - '.info-caption': { - flexWrap: 'wrap', - $nest: { - svg: { - marginRight: `${Spacing.xSmall}px`, - fontSize: '1rem', - }, - '.item-author': { - marginRight: `${Spacing.xSmall + 1}px`, - }, - }, - }, - }, - }), -}; - -function SearchResultsListItem({ - index, - item, - isChecked, - onToggle, - listItemComponent, -}: SearchResultsListItemProps) { - const ListItemComponent = listItemComponent === 'radio' ? Radio : Checkbox; - const revisionHash = truncateHash(item.revision); - const commitMessage = getLatestCommitMessage(item); - const itemDate = new Date(item.push_timestamp * 1000); - - const onToggleAction = () => { - onToggle(item); - }; - - return ( - <> - - - - - - - - {revisionHash} - -
    -
    - {' '} - {' '} - {item.author} -
    - -
    - - -
    -
    - - } - secondary={`${commitMessage} `} - slotProps={{ - primary: { noWrap: true }, - secondary: { noWrap: true }, - }} - /> -     -     - - ); -} - -export default SearchResultsListItem; diff --git a/src/theme/protocolTheme.ts b/src/theme/protocolTheme.ts index d3eb075d4..d2620bcdd 100644 --- a/src/theme/protocolTheme.ts +++ b/src/theme/protocolTheme.ts @@ -41,6 +41,11 @@ const lightMode = { expandedRow: { background: Colors.SecondaryDefault, }, + searchDropdown: { + background: Colors.Background300, + hover: Colors.SecondaryHover, + active: Colors.SecondaryActive, + }, manWhitneyComps: { background: Colors.Background100, @@ -88,6 +93,11 @@ const darkMode = { expandedRow: { background: Colors.Background100Dark, }, + searchDropdown: { + background: Colors.Background300Dark, + hover: Colors.SecondaryHoverDark, + active: Colors.SecondaryActiveDark, + }, manWhitneyComps: { background: Colors.Background100Dark, compareMetricsBg: Colors.Background300Dark, @@ -132,3 +142,20 @@ declare module '@mui/material/ButtonGroup' { tableHeaderButton: true; } } + +declare module '@mui/material/styles' { + interface Palette { + searchDropdown: { + background: string; + hover: string; + active: string; + }; + } + interface PaletteOptions { + searchDropdown?: { + background?: string; + hover?: string; + active?: string; + }; + } +}