diff --git a/src/__tests__/App.test.tsx b/src/__tests__/App.test.tsx index c684e3bc4..4df21b013 100644 --- a/src/__tests__/App.test.tsx +++ b/src/__tests__/App.test.tsx @@ -29,6 +29,18 @@ describe('App', () => { expect(homeText).toBeInTheDocument(); }); + test('Should display File bug link', async () => { + render(); + + const link = await screen.findByRole('link', { + name: /File a bug on Bugzilla/, + }); + expect(link).toHaveAttribute( + 'href', + 'https://bugzilla.mozilla.org/enter_bug.cgi?product=Testing&component=PerfCompare&status_whiteboard=[pcf]', + ); + }); + test('Should display PerfCompare Matrix channel link', async () => { render(); diff --git a/src/__tests__/CompareResults/ResultsView.test.tsx b/src/__tests__/CompareResults/ResultsView.test.tsx index 46d952cf9..7f8eb93e6 100644 --- a/src/__tests__/CompareResults/ResultsView.test.tsx +++ b/src/__tests__/CompareResults/ResultsView.test.tsx @@ -7,15 +7,12 @@ import { Bubble, ChartProps, Line } from 'react-chartjs-2'; import { loader } from '../../components/CompareResults/loader'; import ResultsView from '../../components/CompareResults/ResultsView'; import RevisionHeader from '../../components/CompareResults/RevisionHeader'; -import { setSelectedRevisions } from '../../reducers/SelectedRevisionsSlice'; import { Strings } from '../../resources/Strings'; import { RevisionsHeader } from '../../types/state'; import getTestData from '../utils/fixtures'; -import { store } from '../utils/setupTests'; import { renderWithRouter, screen, - act, FetchMockSandbox, } from '../utils/test-utils'; @@ -29,6 +26,7 @@ function renderWithRoute(component: ReactElement) { .get('begin:https://treeherder.mozilla.org/api/project/', { results: [testData[0]], }); + return renderWithRouter(component, { route: '/compare-results/', search: '?baseRev=spam&baseRepo=mozilla-central&framework=2', @@ -45,100 +43,6 @@ describe('Results View', () => { expect(link).toBeInTheDocument(); }); - // TODO Edit mode is not implemented properly currently - // eslint-disable-next-line jest/no-disabled-tests - it.skip('The CompareWithBase component should have an edit mode', async () => { - renderWithRoute(); - expect(await screen.findByText('Compare with a base')).toBeInTheDocument(); - const formElement = await screen.findByRole('form'); - expect(formElement).toMatchSnapshot('Initial state for the form'); - - const user = userEvent.setup({ delay: null }); - - // add some selected revs to the selection - // TODO: handle this with the URL instead - const { testData } = getTestData(); - const selectedRevs = testData.slice(0, 2); - act(() => { - store.dispatch(setSelectedRevisions({ selectedRevisions: selectedRevs })); - }); - - // Find out if the base revision is rendered - const baseRevisionText = screen.getByText(/you've got no arms left!/); - const newRevisionText = screen.getByText(/just a flesh wound/); - expect(baseRevisionText).toBeInTheDocument(); - expect(newRevisionText).toBeInTheDocument(); - - // The search container should be hidden - const baseSearchContainer = document.querySelector( - '#base-search-container', - ); - expect(baseSearchContainer).toHaveClass('hide-container'); - - // Click the edit button - let editButton = screen.getAllByRole('button', { name: 'edit button' })[0]; - await user.click(editButton); - - expect(baseSearchContainer).toHaveClass('show-container'); - - expect(formElement).toMatchSnapshot( - 'After clicking edit for the base revision', - ); - expect(editButton).not.toBeInTheDocument(); - - // Press the cancel button should hide input and dropdown - const cancelButton = screen.getByRole('button', { name: 'cancel button' }); - await user.click(cancelButton); - - expect(baseSearchContainer).toHaveClass('hide-container'); - - // Click the edit button again - editButton = screen.getAllByRole('button', { name: 'edit button' })[0]; - await user.click(editButton); - expect(baseSearchContainer).toHaveClass('show-container'); - - // Remove the base revision by clicking the X button - const closeBaseButton = screen.getByRole('button', { - name: 'close-button', - }); - await user.click(closeBaseButton); - expect(baseRevisionText).not.toBeInTheDocument(); - - // Click the save button - const saveButtonBase = screen.getByRole('button', { name: 'save button' }); - await user.click(saveButtonBase); - - // The baseRevision is still hidden - expect(baseRevisionText).not.toBeInTheDocument(); - - // The search container is hidden. - expect(baseSearchContainer).toHaveClass('hide-container'); - - // Do the same operation with the components for the "new" revisions - const newSearchContainer = document.querySelector('#new-search-container'); - expect(newSearchContainer).toHaveClass('hide-container'); - - // Click the edit button - editButton = screen.getAllByRole('button', { name: 'edit button' })[1]; - await user.click(editButton); - expect(formElement).toMatchSnapshot( - 'After clicking edit for the new revision', - ); - expect(newSearchContainer).toHaveClass('show-container'); - - // Remove the new revision by clicking the X button - const closeNewButton = screen.getByRole('button', { - name: 'close-button', - }); - await user.click(closeNewButton); - expect(newRevisionText).not.toBeInTheDocument(); - - // Click the save button - const saveButtonNew = screen.getByRole('button', { name: 'save button' }); - await user.click(saveButtonNew); - expect(newSearchContainer).toHaveClass('hide-container'); - }); - it('Should render revision header with link to suite docs', async () => { const revisionHeader: RevisionsHeader = { extra_options: 'e10s fission stylo webgl-ipc webrender', @@ -199,7 +103,7 @@ describe('Results View', () => { ); const expandButton = await screen.findByRole('button', { - name: 'expand row', + name: 'expand this row', }); await user.click(expandButton); expect(await screen.findByTestId('expanded-row-content')).toMatchSnapshot(); diff --git a/src/__tests__/CompareResults/__snapshots__/ResultsTable.test.tsx.snap b/src/__tests__/CompareResults/__snapshots__/ResultsTable.test.tsx.snap index 2b7996ee1..83e40443a 100644 --- a/src/__tests__/CompareResults/__snapshots__/ResultsTable.test.tsx.snap +++ b/src/__tests__/CompareResults/__snapshots__/ResultsTable.test.tsx.snap @@ -200,6 +200,7 @@ exports[`Results Table Should match snapshot 1`] = ` class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-1qhous5-MuiTypography-root-MuiLink-root" href="https://treeherder.mozilla.org/jobs?repo=mozilla-central&revision=spam" target="_blank" + title="open treeherder view for spam" > spam @@ -344,33 +345,28 @@ exports[`Results Table Should match snapshot 1`] = `
- +
+
+
+
+
+
+
+
+
+
+ +
+ +
+
+
    +
  • + + +
    +
    + mozilla-central +
    -
    + + + + coconut + +
    - - + + + johncleese@python.com
    -
    -
    -
    -
    -
    -
    -
    - -
    - - + + + 03/29/51 00:00
    -
    + +

    + you've got no arms left! +

    + +
    +
    • +
+
+
+ +
+
+ + +
+
+ +
+
- +
+ + +
+
+
+
+
+
+
+
    +
  • + + +
    +
    + mozilla-central +
    -
    + + + + spam + +
    - - + + + ericidle@python.com
    -
    -
    -
    -
    -
    -
    -
    - -
    - - + + + 02/22/58 00:00
    -
    + +

    + it's just a flesh wound +

    -
    -
    -
    -
      -
    • - - -
      -
      - mozilla-central -
      -
      -
      -
      - - - - spam - - -
      -
      - - - - ericidle@python.com -
      -
      - - 02/22/58 00:00 -
      -
      -       -

      - it's just a flesh wound -

      -
      - - -
      -
      • -
    • - - -
      -
      - try -
      -
      -
      -
      - - - - spamspam - - -
      -
      - - - - terrygilliam@python.com -
      -
      - - 07/29/87 00:00 -
      -
      -       -

      - What, ridden on a horse? -

      -
      - - -
      -
      • -
    -
    -
    -
-
-
-
- - -
-
- - +
+ + +
+ + +
+
+
+ +
+ - + + +
+
- + `; exports[`Compare With Base selects and displays new framework when clicked 1`] = ` @@ -884,6 +769,1832 @@ exports[`Compare With Base selects and displays new framework when clicked 1`] = `; +exports[`Compare With Base should have an edit mode in Results View: After clicking edit for the base revision 1`] = ` +
+
+
+ +
+
+ +
+
+
+
+
+ +
+ + +
+
+
+
+
+ + +
+
+
+
+
    +
  • + + +
    +
    + mozilla-central +
    +
    +
    +
    + + + + coconut + + +
    +
    + + + + johncleese@python.com +
    +
    + + 03/29/51 00:00 +
    +
    +     +

    + you've got no arms left! +

    +
    + + +
    +
    • +
+
+
+
+
+
+ + +
+
+ +
+
+
+
+
+ +
+ + +
+
+
+
+
+
+
+
    +
  • + + +
    +
    + mozilla-central +
    +
    +
    +
    + + + + spam + + +
    +
    + + + + ericidle@python.com +
    +
    + + 02/22/58 00:00 +
    +
    +     +

    + it's just a flesh wound +

    +
    + + +
    +
    • +
+
+
+
+
+
+
+ +
+ + + +
+
+
+ +
+
+`; + +exports[`Compare With Base should have an edit mode in Results View: After clicking edit for the new revision 1`] = ` +
+
+
+ + +
+
+ +
+
+
+
+
+ +
+ + +
+
+
+
+
+
+
+
    +
+
+
+
+
+ +
+
+ +
+
+
+
+
+ +
+ + +
+
+
+
+
+ + +
+
+
+
+
    +
  • + + +
    +
    + mozilla-central +
    +
    +
    +
    + + + + spam + + +
    +
    + + + + ericidle@python.com +
    +
    + + 02/22/58 00:00 +
    +
    +     +

    + it's just a flesh wound +

    +
    + + +
    +
    • +
+
+
+
+
+
+
+ +
+ + + +
+
+
+ +
+
+`; + +exports[`Compare With Base should have an edit mode in Results View: Initial state for the form 1`] = ` +
+
+
+ + +
+
+ +
+
+
+
+
+ +
+ + +
+
+
+
+
+
+
+
    +
  • + + +
    +
    + mozilla-central +
    +
    +
    +
    + + + + coconut + + +
    +
    + + + + johncleese@python.com +
    +
    + + 03/29/51 00:00 +
    +
    +     +

    + you've got no arms left! +

    +
    + + +
    +
    • +
+
+
+
+
+
+ + +
+
+ +
+
+
+
+
+ +
+ + +
+
+
+
+
+
+
+
    +
  • + + +
    +
    + mozilla-central +
    +
    +
    +
    + + + + spam + + +
    +
    + + + + ericidle@python.com +
    +
    + + 02/22/58 00:00 +
    +
    +     +

    + it's just a flesh wound +

    +
    + + +
    +
    • +
+
+
+
+
+
+
+ +
+ + + +
+
+
+ +
+
+`; + exports[`Compare With Base should remove the checked revision once X button is clicked 1`] = `
-
    + +
    -
  • + try +
    • +
+
+
- - -
-
- try -
-
-
+ + + coconut + +
- - - - coconut - - - - -

+ + + johncleese@python.com +

+
- you've got no arms left! -

+ + 03/29/51 00:00 +
- - +

+ you've got no arms left! +

+
+
- - -
+ + + + +
+ `; diff --git a/src/components/App.tsx b/src/components/App.tsx index e7c74cafe..5bb5659f5 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -69,6 +69,8 @@ export const router = createBrowserRouter( element={} errorElement={} /> + + , ), ); diff --git a/src/components/CompareResults/RevisionHeader.tsx b/src/components/CompareResults/RevisionHeader.tsx index cf68e19af..bca1e00c4 100644 --- a/src/components/CompareResults/RevisionHeader.tsx +++ b/src/components/CompareResults/RevisionHeader.tsx @@ -1,6 +1,7 @@ import { Link } from '@mui/material'; import { style } from 'typestyle'; +import { Strings } from '../../resources/Strings'; import { Colors, Spacing } from '../../styles'; import type { RevisionsHeader } from '../../types/state'; import { @@ -101,6 +102,7 @@ function RevisionHeader(props: RevisionHeaderProps) { {shortHash} diff --git a/src/components/CompareResults/RevisionRow.tsx b/src/components/CompareResults/RevisionRow.tsx index 0e54d40f1..93d4e7ee2 100644 --- a/src/components/CompareResults/RevisionRow.tsx +++ b/src/components/CompareResults/RevisionRow.tsx @@ -7,7 +7,6 @@ import FileDownloadOutlinedIcon from '@mui/icons-material/FileDownloadOutlined'; import RefreshOutlinedIcon from '@mui/icons-material/RefreshOutlined'; import TimelineIcon from '@mui/icons-material/Timeline'; import { IconButton } from '@mui/material'; -import Link from '@mui/material/Link'; import { style } from 'typestyle'; import { useAppSelector } from '../../hooks/app'; @@ -206,24 +205,33 @@ function RevisionRow(props: RevisionRowProps) {
- - - - + +
- +
-
- +
+
@@ -235,7 +243,14 @@ function RevisionRow(props: RevisionRowProps) { onClick={toggleIsExpanded} data-testid='expand-revision-button' > - + {expanded ? : }
diff --git a/src/components/Search/CompareWithBase.tsx b/src/components/Search/CompareWithBase.tsx index 1800cf9c3..c57127f5e 100644 --- a/src/components/Search/CompareWithBase.tsx +++ b/src/components/Search/CompareWithBase.tsx @@ -173,28 +173,11 @@ function CompareWithBase({ handleCancelNew(); }; - const handleDisplayedRevisionsBase = () => { - if (baseInProgress.isInProgress) { - setDisplayedRevisionsBase(baseInProgress); - } else { - setDisplayedRevisionsBase(baseStaging); - } - }; - - const handleDisplayedRevisionsNew = () => { - if (newInProgress.isInProgress) { - setDisplayedRevisionsNew(newInProgress); - } else { - setDisplayedRevisionsNew(newStaging); - } - }; - const handleEditBase = () => { setInProgressBase({ ...baseStaging, isInProgress: true, }); - handleDisplayedRevisionsBase(); }; const handleEditNew = () => { @@ -202,7 +185,6 @@ function CompareWithBase({ ...newStaging, isInProgress: true, }); - handleDisplayedRevisionsNew(); }; const handleRemoveEditViewRevisionBase = (item: RevisionsList) => { @@ -272,6 +254,7 @@ function CompareWithBase({ action='/compare-results' className='form-wrapper' onSubmit={possiblyPreventFormSubmission} + role='form' >