diff --git a/src/__tests__/CompareResults/ResultsTable.test.tsx b/src/__tests__/CompareResults/ResultsTable.test.tsx index bebbb018a..465b064d7 100644 --- a/src/__tests__/CompareResults/ResultsTable.test.tsx +++ b/src/__tests__/CompareResults/ResultsTable.test.tsx @@ -6,7 +6,10 @@ import { loader } from '../../components/CompareResults/loader'; import ResultsView from '../../components/CompareResults/ResultsView'; import { Strings } from '../../resources/Strings'; import type { CompareResultsItem } from '../../types/state'; -import getTestData from '../utils/fixtures'; +import getTestData, { + augmentCompareDataWithSeveralTests, + augmentCompareDataWithSeveralRevisions, +} from '../utils/fixtures'; import { renderWithRouter, screen, @@ -14,15 +17,20 @@ import { FetchMockSandbox, } from '../utils/test-utils'; -function renderWithRoute(component: ReactElement) { +function renderWithRoute(component: ReactElement, extraParameters?: string) { return renderWithRouter(component, { route: '/compare-results/', - search: '?baseRev=spam&baseRepo=try&framework=1', + search: + '?baseRev=spam&baseRepo=try&framework=1' + + (extraParameters ? '&' + extraParameters : ''), loader, }); } -function setupAndRender(testCompareData: CompareResultsItem[]) { +function setupAndRender( + testCompareData: CompareResultsItem[], + extraParameters?: string, +) { const { testData } = getTestData(); (window.fetch as FetchMockSandbox) .get( @@ -32,7 +40,10 @@ function setupAndRender(testCompareData: CompareResultsItem[]) { .get('begin:https://treeherder.mozilla.org/api/project/', { results: [testData[0]], }); - renderWithRoute(); + renderWithRoute( + , + extraParameters, + ); } // This handy function parses the results page and returns an array of visible @@ -65,7 +76,7 @@ function summarizeVisibleRows() { const rows = within(revisionGroup).getAllByRole('row'); for (const row of rows) { - const rowString = ['.platform span', '.status', '.confidence'] + const rowString = ['.platform span', '.status', '.delta', '.confidence'] .map((selector) => row.querySelector(selector)!.textContent!.trim()) .join(', '); @@ -91,13 +102,19 @@ function summarizeTableFiltersFromUrl() { return result; } +function expectParameterToHaveValue(parameter: string, expectedValue: string) { + const searchParams = new URLSearchParams(window.location.search); + const currentValue = searchParams.get(parameter); + expect(currentValue).toEqual(expectedValue); +} + async function clickMenuItem( user: UserEvent, - menuMatcher: string | RegExp, + menuMatcher: string, itemMatcher: string | RegExp, ) { const platformColumnButton = screen.getByRole('button', { - name: menuMatcher, + name: new RegExp(`${menuMatcher}.*filter`), }); await user.click(platformColumnButton); @@ -147,9 +164,9 @@ describe('Results Table', () => { expect(summarizeVisibleRows()).toEqual([ 'a11yr dhtml.html opt e10s fission stylo webrender', ' rev: spam', - ' - OSX, Improvement, Low', + ' - OS X 10.15, Improvement, 1.08 %, Low', ' rev: devilrabbit', - ' - OSX, Improvement, Low', + ' - OS X 10.15, Improvement, 1.08 %, Low', ]); expect(screen.getByRole('rowgroup')).toMatchSnapshot(); }); @@ -165,86 +182,86 @@ describe('Results Table', () => { await screen.findByText('a11yr'); expect(summarizeVisibleRows()).toEqual([ 'a11yr dhtml.html spam opt e10s fission stylo webrender', - ' - OSX, Improvement, Low', - ' - Linux, Regression, Medium', - ' - Windows, -, High', - ' - Windows, -, -', - ' - Android, Improvement, Low', + ' - Android, Improvement, 1.08 %, Low', + ' - Linux 18.04, Regression, 1.85 %, Medium', + ' - OS X 10.15, Improvement, 1.08 %, Low', + ' - Windows 10, -, -24 %, -', + ' - Windows 10, -, -2.4 %, High', ]); expect(summarizeTableFiltersFromUrl()).toEqual({}); const user = userEvent.setup({ delay: null }); - await clickMenuItem(user, /Platform/, /Windows/); + await clickMenuItem(user, 'Platform', /Windows/); expect(summarizeVisibleRows()).toEqual([ 'a11yr dhtml.html spam opt e10s fission stylo webrender', - ' - OSX, Improvement, Low', - ' - Linux, Regression, Medium', - ' - Android, Improvement, Low', + ' - Android, Improvement, 1.08 %, Low', + ' - Linux 18.04, Regression, 1.85 %, Medium', + ' - OS X 10.15, Improvement, 1.08 %, Low', ]); expect(summarizeTableFiltersFromUrl()).toEqual({ platform: ['osx', 'linux', 'android'], }); - await clickMenuItem(user, /Platform/, /Linux/); + await clickMenuItem(user, 'Platform', /Linux/); expect(summarizeVisibleRows()).toEqual([ 'a11yr dhtml.html spam opt e10s fission stylo webrender', - ' - OSX, Improvement, Low', - ' - Android, Improvement, Low', + ' - Android, Improvement, 1.08 %, Low', + ' - OS X 10.15, Improvement, 1.08 %, Low', ]); expect(summarizeTableFiltersFromUrl()).toEqual({ platform: ['osx', 'android'], }); - await clickMenuItem(user, /Platform/, /Linux/); + await clickMenuItem(user, 'Platform', /Linux/); expect(summarizeVisibleRows()).toEqual([ 'a11yr dhtml.html spam opt e10s fission stylo webrender', - ' - OSX, Improvement, Low', - ' - Linux, Regression, Medium', - ' - Android, Improvement, Low', + ' - Android, Improvement, 1.08 %, Low', + ' - Linux 18.04, Regression, 1.85 %, Medium', + ' - OS X 10.15, Improvement, 1.08 %, Low', ]); expect(summarizeTableFiltersFromUrl()).toEqual({ platform: ['osx', 'linux', 'android'], }); - await clickMenuItem(user, /Platform/, 'Select all values'); + await clickMenuItem(user, 'Platform', 'Select all values'); expect(summarizeVisibleRows()).toEqual([ 'a11yr dhtml.html spam opt e10s fission stylo webrender', - ' - OSX, Improvement, Low', - ' - Linux, Regression, Medium', - ' - Windows, -, High', - ' - Windows, -, -', - ' - Android, Improvement, Low', + ' - Android, Improvement, 1.08 %, Low', + ' - Linux 18.04, Regression, 1.85 %, Medium', + ' - OS X 10.15, Improvement, 1.08 %, Low', + ' - Windows 10, -, -24 %, -', + ' - Windows 10, -, -2.4 %, High', ]); expect(summarizeTableFiltersFromUrl()).toEqual({}); - await clickMenuItem(user, /Platform/, /OSX/); + await clickMenuItem(user, 'Platform', /macOS/); expect(summarizeVisibleRows()).toEqual([ 'a11yr dhtml.html spam opt e10s fission stylo webrender', - ' - Linux, Regression, Medium', - ' - Windows, -, High', - ' - Windows, -, -', - ' - Android, Improvement, Low', + ' - Android, Improvement, 1.08 %, Low', + ' - Linux 18.04, Regression, 1.85 %, Medium', + ' - Windows 10, -, -24 %, -', + ' - Windows 10, -, -2.4 %, High', ]); expect(summarizeTableFiltersFromUrl()).toEqual({ platform: ['windows', 'linux', 'android'], }); - await clickMenuItem(user, /Platform/, /Android/); + await clickMenuItem(user, 'Platform', /Android/); expect(summarizeVisibleRows()).toEqual([ 'a11yr dhtml.html spam opt e10s fission stylo webrender', - ' - Linux, Regression, Medium', - ' - Windows, -, High', - ' - Windows, -, -', + ' - Linux 18.04, Regression, 1.85 %, Medium', + ' - Windows 10, -, -24 %, -', + ' - Windows 10, -, -2.4 %, High', ]); expect(summarizeTableFiltersFromUrl()).toEqual({ platform: ['windows', 'linux'], }); - await clickMenuItem(user, /Platform/, /Select only.*Android/); + await clickMenuItem(user, 'Platform', /Select only.*Android/); expect(summarizeVisibleRows()).toEqual([ 'a11yr dhtml.html spam opt e10s fission stylo webrender', - ' - Android, Improvement, Low', + ' - Android, Improvement, 1.08 %, Low', ]); expect(summarizeTableFiltersFromUrl()).toEqual({ platform: ['android'], @@ -258,50 +275,50 @@ describe('Results Table', () => { await screen.findByText('a11yr'); expect(summarizeVisibleRows()).toEqual([ 'a11yr dhtml.html spam opt e10s fission stylo webrender', - ' - OSX, Improvement, Low', - ' - Linux, Regression, Medium', - ' - Windows, -, High', - ' - Windows, -, -', + ' - Linux 18.04, Regression, 1.85 %, Medium', + ' - OS X 10.15, Improvement, 1.08 %, Low', + ' - Windows 10, -, -24 %, -', + ' - Windows 10, -, -2.4 %, High', ]); expect(summarizeTableFiltersFromUrl()).toEqual({}); const user = userEvent.setup({ delay: null }); - await clickMenuItem(user, /Status/, /No changes/); + await clickMenuItem(user, 'Status', /No changes/); expect(summarizeVisibleRows()).toEqual([ 'a11yr dhtml.html spam opt e10s fission stylo webrender', - ' - OSX, Improvement, Low', - ' - Linux, Regression, Medium', + ' - Linux 18.04, Regression, 1.85 %, Medium', + ' - OS X 10.15, Improvement, 1.08 %, Low', ]); expect(summarizeTableFiltersFromUrl()).toEqual({ status: ['improvement', 'regression'], }); - await clickMenuItem(user, /Status/, /Select all values/); - await clickMenuItem(user, /Status/, /Improvement/); + await clickMenuItem(user, 'Status', /Select all values/); + await clickMenuItem(user, 'Status', /Improvement/); expect(summarizeVisibleRows()).toEqual([ 'a11yr dhtml.html spam opt e10s fission stylo webrender', - ' - Linux, Regression, Medium', - ' - Windows, -, High', - ' - Windows, -, -', + ' - Linux 18.04, Regression, 1.85 %, Medium', + ' - Windows 10, -, -24 %, -', + ' - Windows 10, -, -2.4 %, High', ]); expect(summarizeTableFiltersFromUrl()).toEqual({ status: ['none', 'regression'], }); - await clickMenuItem(user, /Status/, /Regression/); + await clickMenuItem(user, 'Status', /Regression/); expect(summarizeVisibleRows()).toEqual([ 'a11yr dhtml.html spam opt e10s fission stylo webrender', - ' - Windows, -, High', - ' - Windows, -, -', + ' - Windows 10, -, -24 %, -', + ' - Windows 10, -, -2.4 %, High', ]); expect(summarizeTableFiltersFromUrl()).toEqual({ status: ['none'], }); - await clickMenuItem(user, /Status/, /Select only.*Regression/); + await clickMenuItem(user, 'Status', /Select only.*Regression/); expect(summarizeVisibleRows()).toEqual([ 'a11yr dhtml.html spam opt e10s fission stylo webrender', - ' - Linux, Regression, Medium', + ' - Linux 18.04, Regression, 1.85 %, Medium', ]); expect(summarizeTableFiltersFromUrl()).toEqual({ status: ['regression'], @@ -315,72 +332,258 @@ describe('Results Table', () => { await screen.findByText('a11yr'); expect(summarizeVisibleRows()).toEqual([ 'a11yr dhtml.html spam opt e10s fission stylo webrender', - ' - OSX, Improvement, Low', - ' - Linux, Regression, Medium', - ' - Windows, -, High', - ' - Windows, -, -', + ' - Linux 18.04, Regression, 1.85 %, Medium', + ' - OS X 10.15, Improvement, 1.08 %, Low', + ' - Windows 10, -, -24 %, -', + ' - Windows 10, -, -2.4 %, High', ]); expect(summarizeTableFiltersFromUrl()).toEqual({}); const user = userEvent.setup({ delay: null }); - await clickMenuItem(user, /Confidence/, /Low/); + await clickMenuItem(user, 'Confidence', /Low/); expect(summarizeVisibleRows()).toEqual([ 'a11yr dhtml.html spam opt e10s fission stylo webrender', - ' - Linux, Regression, Medium', - ' - Windows, -, High', - ' - Windows, -, -', + ' - Linux 18.04, Regression, 1.85 %, Medium', + ' - Windows 10, -, -24 %, -', + ' - Windows 10, -, -2.4 %, High', ]); expect(summarizeTableFiltersFromUrl()).toEqual({ confidence: ['none', 'medium', 'high'], }); - await clickMenuItem(user, /Confidence/, /High/); + await clickMenuItem(user, 'Confidence', /High/); expect(summarizeVisibleRows()).toEqual([ 'a11yr dhtml.html spam opt e10s fission stylo webrender', - ' - Linux, Regression, Medium', - ' - Windows, -, -', + ' - Linux 18.04, Regression, 1.85 %, Medium', + ' - Windows 10, -, -24 %, -', ]); expect(summarizeTableFiltersFromUrl()).toEqual({ confidence: ['none', 'medium'], }); - await clickMenuItem(user, /Confidence/, /Medium/); + await clickMenuItem(user, 'Confidence', /Medium/); expect(summarizeVisibleRows()).toEqual([ 'a11yr dhtml.html spam opt e10s fission stylo webrender', - ' - Windows, -, -', + ' - Windows 10, -, -24 %, -', ]); expect(summarizeTableFiltersFromUrl()).toEqual({ confidence: ['none'], }); - await clickMenuItem(user, /Confidence/, /Select all values/); + await clickMenuItem(user, 'Confidence', /Select all values/); expect(summarizeVisibleRows()).toEqual([ 'a11yr dhtml.html spam opt e10s fission stylo webrender', - ' - OSX, Improvement, Low', - ' - Linux, Regression, Medium', - ' - Windows, -, High', - ' - Windows, -, -', + ' - Linux 18.04, Regression, 1.85 %, Medium', + ' - OS X 10.15, Improvement, 1.08 %, Low', + ' - Windows 10, -, -24 %, -', + ' - Windows 10, -, -2.4 %, High', ]); expect(summarizeTableFiltersFromUrl()).toEqual({}); - await clickMenuItem(user, /Confidence/, /No value/); + await clickMenuItem(user, 'Confidence', /No value/); expect(summarizeVisibleRows()).toEqual([ 'a11yr dhtml.html spam opt e10s fission stylo webrender', - ' - OSX, Improvement, Low', - ' - Linux, Regression, Medium', - ' - Windows, -, High', + ' - Linux 18.04, Regression, 1.85 %, Medium', + ' - OS X 10.15, Improvement, 1.08 %, Low', + ' - Windows 10, -, -2.4 %, High', ]); expect(summarizeTableFiltersFromUrl()).toEqual({ confidence: ['low', 'medium', 'high'], }); - await clickMenuItem(user, /Confidence/, /Select only.*High/); + await clickMenuItem(user, 'Confidence', /Select only.*High/); expect(summarizeVisibleRows()).toEqual([ 'a11yr dhtml.html spam opt e10s fission stylo webrender', - ' - Windows, -, High', + ' - Windows 10, -, -2.4 %, High', ]); expect(summarizeTableFiltersFromUrl()).toEqual({ confidence: ['high'], }); }); + + it('can sort the table and persist the sort parameters to the URL', async () => { + const { testCompareData } = getTestData(); + const testCompareDataForSorting = augmentCompareDataWithSeveralRevisions( + augmentCompareDataWithSeveralTests(testCompareData), + ); + setupAndRender(testCompareDataForSorting); + await screen.findByText('dhtml.html'); + + // This is the initial situation. + expect(summarizeVisibleRows()).toEqual([ + 'a11yr aria.html opt e10s fission stylo webrender', + ' rev: spam', + ' - Linux 18.04, Regression, 1.97 %, Medium', + ' - OS X 10.15, Improvement, 1.2 %, Low', + ' - Windows 10, -, -23.88 %, -', + ' - Windows 10, -, -2.28 %, High', + ' rev: tictactoe', + ' - Linux 18.04, Regression, 2.05 %, Medium', + ' - OS X 10.15, Improvement, 1.28 %, Low', + ' - Windows 10, -, -23.8 %, -', + ' - Windows 10, -, -2.2 %, High', + 'a11yr dhtml.html opt e10s fission stylo webrender', + ' rev: spam', + ' - Linux 18.04, Regression, 1.85 %, Medium', + ' - OS X 10.15, Improvement, 1.08 %, Low', + ' - Windows 10, -, -24 %, -', + ' - Windows 10, -, -2.4 %, High', + ' rev: tictactoe', + ' - Linux 18.04, Regression, 1.93 %, Medium', + ' - OS X 10.15, Improvement, 1.16 %, Low', + ' - Windows 10, -, -23.92 %, -', + ' - Windows 10, -, -2.32 %, High', + ]); + expect(window.location.search).not.toContain('sort='); + + // Sort by Delta + const user = userEvent.setup({ delay: null }); + const deltaButton = screen.getByRole('button', { name: /Delta/ }); + expect(deltaButton).toMatchSnapshot(); + // Sort descending + await user.click(deltaButton); + expect(summarizeVisibleRows()).toEqual([ + 'a11yr dhtml.html opt e10s fission stylo webrender', + ' rev: spam', + ' - Windows 10, -, -24 %, -', + ' - Windows 10, -, -2.4 %, High', + ' - Linux 18.04, Regression, 1.85 %, Medium', + ' - OS X 10.15, Improvement, 1.08 %, Low', + ' rev: tictactoe', + ' - Windows 10, -, -23.92 %, -', + ' - Windows 10, -, -2.32 %, High', + ' - Linux 18.04, Regression, 1.93 %, Medium', + ' - OS X 10.15, Improvement, 1.16 %, Low', + 'a11yr aria.html opt e10s fission stylo webrender', + ' rev: spam', + ' - Windows 10, -, -23.88 %, -', + ' - Windows 10, -, -2.28 %, High', + ' - Linux 18.04, Regression, 1.97 %, Medium', + ' - OS X 10.15, Improvement, 1.2 %, Low', + ' rev: tictactoe', + ' - Windows 10, -, -23.8 %, -', + ' - Windows 10, -, -2.2 %, High', + ' - Linux 18.04, Regression, 2.05 %, Medium', + ' - OS X 10.15, Improvement, 1.28 %, Low', + ]); + // It should have the "descending" SVG. + expect(deltaButton).toMatchSnapshot(); + // It should be persisted in the URL + expectParameterToHaveValue('sort', 'delta|desc'); + + // sort ascending + await user.click(deltaButton); + expect(summarizeVisibleRows()).toEqual([ + 'a11yr dhtml.html opt e10s fission stylo webrender', + ' rev: spam', + ' - OS X 10.15, Improvement, 1.08 %, Low', + ' - Linux 18.04, Regression, 1.85 %, Medium', + ' - Windows 10, -, -2.4 %, High', + ' - Windows 10, -, -24 %, -', + ' rev: tictactoe', + ' - OS X 10.15, Improvement, 1.16 %, Low', + ' - Linux 18.04, Regression, 1.93 %, Medium', + ' - Windows 10, -, -2.32 %, High', + ' - Windows 10, -, -23.92 %, -', + 'a11yr aria.html opt e10s fission stylo webrender', + ' rev: spam', + ' - OS X 10.15, Improvement, 1.2 %, Low', + ' - Linux 18.04, Regression, 1.97 %, Medium', + ' - Windows 10, -, -2.28 %, High', + ' - Windows 10, -, -23.88 %, -', + ' rev: tictactoe', + ' - OS X 10.15, Improvement, 1.28 %, Low', + ' - Linux 18.04, Regression, 2.05 %, Medium', + ' - Windows 10, -, -2.2 %, High', + ' - Windows 10, -, -23.8 %, -', + ]); + // It should have the "ascending" SVG. + expect(deltaButton).toMatchSnapshot(); + // It should be persisted in the URL + expectParameterToHaveValue('sort', 'delta|asc'); + + // Sort by Confidence descending + const confidenceButton = screen.getByRole('button', { + name: /Confidence.*sort/, + }); + await user.click(confidenceButton); + expect(summarizeVisibleRows()).toEqual([ + 'a11yr aria.html opt e10s fission stylo webrender', + ' rev: tictactoe', + ' - Windows 10, -, -2.2 %, High', + ' - Linux 18.04, Regression, 2.05 %, Medium', + ' - OS X 10.15, Improvement, 1.28 %, Low', + ' - Windows 10, -, -23.8 %, -', + ' rev: spam', + ' - Windows 10, -, -2.28 %, High', + ' - Linux 18.04, Regression, 1.97 %, Medium', + ' - OS X 10.15, Improvement, 1.2 %, Low', + ' - Windows 10, -, -23.88 %, -', + 'a11yr dhtml.html opt e10s fission stylo webrender', + ' rev: tictactoe', + ' - Windows 10, -, -2.32 %, High', + ' - Linux 18.04, Regression, 1.93 %, Medium', + ' - OS X 10.15, Improvement, 1.16 %, Low', + ' - Windows 10, -, -23.92 %, -', + ' rev: spam', + ' - Windows 10, -, -2.4 %, High', + ' - Linux 18.04, Regression, 1.85 %, Medium', + ' - OS X 10.15, Improvement, 1.08 %, Low', + ' - Windows 10, -, -24 %, -', + ]); + // It should have the "no sort" SVG. + expect(deltaButton).toMatchSnapshot(); + // It should have the "descending" SVG. + expect(confidenceButton).toMatchSnapshot(); + // It should be persisted in the URL + expectParameterToHaveValue('sort', 'confidence|desc'); + }); + + it('can load the sort parameters from the URL for an ascending sort', async () => { + const { testCompareData } = getTestData(); + setupAndRender(testCompareData, 'sort=delta|asc'); + await screen.findByText('dhtml.html'); + + // It should have the "ascending" SVG. + const deltaButton = screen.getByRole('button', { name: /Delta/ }); + expect(deltaButton).toMatchSnapshot(); + + expect(summarizeVisibleRows()).toEqual([ + 'a11yr dhtml.html spam opt e10s fission stylo webrender', + ' - OS X 10.15, Improvement, 1.08 %, Low', + ' - Linux 18.04, Regression, 1.85 %, Medium', + ' - Windows 10, -, -2.4 %, High', + ' - Windows 10, -, -24 %, -', + ]); + + // And clicking the button once should move it back to the initial state. + const user = userEvent.setup({ delay: null }); + await user.click(deltaButton); + expect(summarizeVisibleRows()).toEqual([ + 'a11yr dhtml.html spam opt e10s fission stylo webrender', + ' - Linux 18.04, Regression, 1.85 %, Medium', + ' - OS X 10.15, Improvement, 1.08 %, Low', + ' - Windows 10, -, -24 %, -', + ' - Windows 10, -, -2.4 %, High', + ]); + expect(window.location.search).not.toContain('sort='); + }); + + it('can load the sort parameters from the URL for a descending sort', async () => { + const { testCompareData } = getTestData(); + setupAndRender(testCompareData, 'sort=delta|desc'); + await screen.findByText('dhtml.html'); + + // It should have the "descending" SVG. + const deltaButton = screen.getByRole('button', { name: /Delta/ }); + expect(deltaButton).toMatchSnapshot(); + + expect(summarizeVisibleRows()).toEqual([ + 'a11yr dhtml.html spam opt e10s fission stylo webrender', + ' - Windows 10, -, -24 %, -', + ' - Windows 10, -, -2.4 %, High', + ' - Linux 18.04, Regression, 1.85 %, Medium', + ' - OS X 10.15, Improvement, 1.08 %, Low', + ]); + }); }); diff --git a/src/__tests__/CompareResults/RevisionRow.test.tsx b/src/__tests__/CompareResults/RevisionRow.test.tsx index f32552d40..2e4b1f661 100644 --- a/src/__tests__/CompareResults/RevisionRow.test.tsx +++ b/src/__tests__/CompareResults/RevisionRow.test.tsx @@ -29,17 +29,17 @@ describe('', () => { it.each([ { platform: 'linux1804-32-shippable-qr', - shortName: 'Linux', + shortName: 'Linux 18.04', hasIcon: true, }, { platform: 'macosx1014-64-shippable-qr', - shortName: 'OSX', + shortName: 'OS X 10.14', hasIcon: true, }, { platform: 'windows2012-64-shippable', - shortName: 'Windows', + shortName: 'Windows 2012', hasIcon: true, }, { diff --git a/src/__tests__/CompareResults/SubtestsResultsView.test.tsx b/src/__tests__/CompareResults/SubtestsResultsView.test.tsx index a7f822bdc..0ac6da7dd 100644 --- a/src/__tests__/CompareResults/SubtestsResultsView.test.tsx +++ b/src/__tests__/CompareResults/SubtestsResultsView.test.tsx @@ -209,7 +209,7 @@ describe('SubtestsResultsView Component Tests', () => { // Initial view (alphabetical ordered, even if "sort by subtests" isn't specified expect(summarizeVisibleRows()).toEqual([ 'dhtml.html: 1.14 %, Low', - 'improvement.html: 1.44 %, Low', + 'improvement.html: -1.44 %, Low', 'regression.html: 1.04 %, High', 'tablemutation.html: 0.98 %, Low', ]); @@ -219,67 +219,67 @@ describe('SubtestsResultsView Component Tests', () => { const deltaButton = screen.getByRole('button', { name: /Delta/ }); expect(deltaButton).toMatchSnapshot(); expect(window.location.search).not.toContain('sort='); - // Sort ascending + // Sort descending await user.click(deltaButton); expect(summarizeVisibleRows()).toEqual([ - 'tablemutation.html: 0.98 %, Low', - 'regression.html: 1.04 %, High', + 'improvement.html: -1.44 %, Low', 'dhtml.html: 1.14 %, Low', - 'improvement.html: 1.44 %, Low', + 'regression.html: 1.04 %, High', + 'tablemutation.html: 0.98 %, Low', ]); - // It should have the "ascending" SVG. + // It should have the "descending" SVG. expect(deltaButton).toMatchSnapshot(); // It should be persisted in the URL - expectParameterToHaveValue('sort', 'delta|asc'); + expectParameterToHaveValue('sort', 'delta|desc'); - // Sort descending + // Sort ascending await user.click(deltaButton); expect(summarizeVisibleRows()).toEqual([ - 'improvement.html: 1.44 %, Low', - 'dhtml.html: 1.14 %, Low', - 'regression.html: 1.04 %, High', 'tablemutation.html: 0.98 %, Low', + 'regression.html: 1.04 %, High', + 'dhtml.html: 1.14 %, Low', + 'improvement.html: -1.44 %, Low', ]); - // It should have the "descending" SVG. + // It should have the "ascending" SVG. expect(deltaButton).toMatchSnapshot(); // It should be persisted in the URL - expectParameterToHaveValue('sort', 'delta|desc'); + expectParameterToHaveValue('sort', 'delta|asc'); - // Sort by Confidence ascending + // Sort by Confidence descending const confidenceButton = screen.getByRole('button', { name: /Confidence.*sort/, }); await user.click(confidenceButton); expect(summarizeVisibleRows()).toEqual([ - 'tablemutation.html: 0.98 %, Low', - 'dhtml.html: 1.14 %, Low', - 'improvement.html: 1.44 %, Low', 'regression.html: 1.04 %, High', + 'improvement.html: -1.44 %, Low', + 'dhtml.html: 1.14 %, Low', + 'tablemutation.html: 0.98 %, Low', ]); // It should have the "no sort" SVG. expect(deltaButton).toMatchSnapshot(); - // It should have the "ascending" SVG. + // It should have the "descending" SVG. expect(confidenceButton).toMatchSnapshot(); // It should be persisted in the URL - expectParameterToHaveValue('sort', 'confidence|asc'); + expectParameterToHaveValue('sort', 'confidence|desc'); - // Sort by subtest name ascending + // Sort by subtest name descending const subtestsButton = screen.getByRole('button', { name: /Subtests/ }); await user.click(subtestsButton); expect(summarizeVisibleRows()).toEqual([ - 'dhtml.html: 1.14 %, Low', - 'improvement.html: 1.44 %, Low', - 'regression.html: 1.04 %, High', 'tablemutation.html: 0.98 %, Low', + 'regression.html: 1.04 %, High', + 'improvement.html: -1.44 %, Low', + 'dhtml.html: 1.14 %, Low', ]); // It should have the "no sort" SVG. expect(confidenceButton).toMatchSnapshot(); - // It should have the "ascending" SVG. + // It should have the "descending" SVG. expect(subtestsButton).toMatchSnapshot(); // It should be persisted in the URL - expectParameterToHaveValue('sort', 'subtests|asc'); + expectParameterToHaveValue('sort', 'subtests|desc'); - // Clickince twice more should reset the URL. + // Clicking twice more should reset the URL. await user.click(subtestsButton); await user.click(subtestsButton); expect(window.location.search).not.toContain('sort='); @@ -292,29 +292,29 @@ describe('SubtestsResultsView Component Tests', () => { 'tablemutation.html: 0.98 %, Low', 'regression.html: 1.04 %, High', 'dhtml.html: 1.14 %, Low', - 'improvement.html: 1.44 %, Low', + 'improvement.html: -1.44 %, Low', ]); // It should have the "ascending" SVG. expect(screen.getByRole('button', { name: /Delta/ })).toMatchSnapshot(); }); - it('initializes the sort from the URL at load time for an implicit ascending sort', async () => { + it('initializes the sort from the URL at load time for an implicit descending sort', async () => { await setupForSorting({ extraParameters: 'sort=delta' }); await screen.findByText('dhtml.html'); expect(summarizeVisibleRows()).toEqual([ - 'tablemutation.html: 0.98 %, Low', - 'regression.html: 1.04 %, High', + 'improvement.html: -1.44 %, Low', 'dhtml.html: 1.14 %, Low', - 'improvement.html: 1.44 %, Low', + 'regression.html: 1.04 %, High', + 'tablemutation.html: 0.98 %, Low', ]); - // It should have the "ascending" SVG. + // It should have the "descending" SVG. expect(screen.getByRole('button', { name: /Delta/ })).toMatchSnapshot(); }); it('initializes the sort from the URL at load time for a descending sort', async () => { await setupForSorting({ extraParameters: 'sort=delta|desc' }); expect(summarizeVisibleRows()).toEqual([ - 'improvement.html: 1.44 %, Low', + 'improvement.html: -1.44 %, Low', 'dhtml.html: 1.14 %, Low', 'regression.html: 1.04 %, High', 'tablemutation.html: 0.98 %, Low', diff --git a/src/__tests__/CompareResults/__snapshots__/OverTimeResultsView.test.tsx.snap b/src/__tests__/CompareResults/__snapshots__/OverTimeResultsView.test.tsx.snap index 8e69ea466..5670f61f2 100644 --- a/src/__tests__/CompareResults/__snapshots__/OverTimeResultsView.test.tsx.snap +++ b/src/__tests__/CompareResults/__snapshots__/OverTimeResultsView.test.tsx.snap @@ -293,7 +293,13 @@ exports[`Results View The table should match snapshot and other elements should class="cell base-header" role="columnheader" > - Base + + Base +
- New + + New +
- Delta + + +
- +
- - - +
- Total Runs + + Total Runs +
a11yr @@ -490,23 +574,22 @@ exports[`Results View The table should match snapshot and other elements should role="cell" >
- OSX + Linux 18.04
@@ -515,7 +598,7 @@ exports[`Results View The table should match snapshot and other elements should role="cell" > - 704.84 + 776.97 ms @@ -531,7 +614,7 @@ exports[`Results View The table should match snapshot and other elements should role="cell" > - 712.44 + 791.34 ms @@ -540,20 +623,20 @@ exports[`Results View The table should match snapshot and other elements should role="cell" >
- Improvement + Regression
- 1.08 + 1.85 %
@@ -571,16 +654,16 @@ exports[`Results View The table should match snapshot and other elements should > - Low + Medium @@ -738,7 +824,7 @@ exports[`Results View The table should match snapshot and other elements should role="cell" > - 776.97 + 704.84 ms @@ -754,7 +840,7 @@ exports[`Results View The table should match snapshot and other elements should role="cell" > - 791.34 + 712.44 ms @@ -763,20 +849,20 @@ exports[`Results View The table should match snapshot and other elements should role="cell" >
- Regression + Improvement
- 1.85 + 1.08 %
@@ -794,16 +880,16 @@ exports[`Results View The table should match snapshot and other elements should > - Medium + Low
@@ -997,7 +1085,7 @@ exports[`Results View The table should match snapshot and other elements should role="cell" > - -2.4 + -24 % @@ -1005,18 +1093,7 @@ exports[`Results View The table should match snapshot and other elements should class="confidence cell" role="cell" > - - High + -
@@ -1218,7 +1297,18 @@ exports[`Results View The table should match snapshot and other elements should class="confidence cell" role="cell" > - - + + High
+
- +
- - - +
- Total Runs + + Total Runs +
a11yr @@ -1214,23 +1298,22 @@ exports[`Results Table Should match snapshot 1`] = ` role="cell" >
- OSX + Linux 18.04
@@ -1239,7 +1322,7 @@ exports[`Results Table Should match snapshot 1`] = ` role="cell" > - 704.84 + 776.97 ms @@ -1255,7 +1338,7 @@ exports[`Results Table Should match snapshot 1`] = ` role="cell" > - 712.44 + 791.34 ms @@ -1264,20 +1347,20 @@ exports[`Results Table Should match snapshot 1`] = ` role="cell" >
- Improvement + Regression
- 1.08 + 1.85 %
@@ -1295,16 +1378,16 @@ exports[`Results Table Should match snapshot 1`] = ` > - Low + Medium @@ -1462,7 +1548,7 @@ exports[`Results Table Should match snapshot 1`] = ` role="cell" > - 776.97 + 704.84 ms @@ -1478,7 +1564,7 @@ exports[`Results Table Should match snapshot 1`] = ` role="cell" > - 791.34 + 712.44 ms @@ -1487,20 +1573,20 @@ exports[`Results Table Should match snapshot 1`] = ` role="cell" >
- Regression + Improvement
- 1.85 + 1.08 %
@@ -1518,16 +1604,16 @@ exports[`Results Table Should match snapshot 1`] = ` > - Medium + Low
@@ -1842,6 +1930,8 @@ exports[`Results Table Should match snapshot 1`] = ` data-testid="expand-revision-button" > +`; + +exports[`Results Table can load the sort parameters from the URL for an ascending sort 1`] = ` + +`; + +exports[`Results Table can sort the table and persist the sort parameters to the URL 1`] = ` + +`; + +exports[`Results Table can sort the table and persist the sort parameters to the URL 2`] = ` + +`; + +exports[`Results Table can sort the table and persist the sort parameters to the URL 3`] = ` + +`; + +exports[`Results Table can sort the table and persist the sort parameters to the URL 4`] = ` + +`; + +exports[`Results Table can sort the table and persist the sort parameters to the URL 5`] = ` + +`; + exports[`Results Table should render different blocks when rendering several revisions 1`] = `
a11yr @@ -2224,7 +2565,7 @@ exports[`Results Table should render different blocks when rendering several rev /> - OSX + OS X 10.15
@@ -2400,6 +2741,8 @@ exports[`Results Table should render different blocks when rendering several rev data-testid="expand-revision-button" > +
- +
- - - +
- Total Runs + + Total Runs +
a11yr @@ -1300,23 +1390,22 @@ exports[`Results View The table should match snapshot and other elements should role="cell" >
- OSX + Linux 18.04
@@ -1325,7 +1414,7 @@ exports[`Results View The table should match snapshot and other elements should role="cell" > - 704.84 + 776.97 ms @@ -1341,7 +1430,7 @@ exports[`Results View The table should match snapshot and other elements should role="cell" > - 712.44 + 791.34 ms @@ -1350,20 +1439,20 @@ exports[`Results View The table should match snapshot and other elements should role="cell" >
- Improvement + Regression
- 1.08 + 1.85 %
@@ -1381,16 +1470,16 @@ exports[`Results View The table should match snapshot and other elements should > - Low + Medium @@ -1548,7 +1640,7 @@ exports[`Results View The table should match snapshot and other elements should role="cell" > - 776.97 + 704.84 ms @@ -1564,7 +1656,7 @@ exports[`Results View The table should match snapshot and other elements should role="cell" > - 791.34 + 712.44 ms @@ -1573,20 +1665,20 @@ exports[`Results View The table should match snapshot and other elements should role="cell" >
- Regression + Improvement
- 1.85 + 1.08 %
@@ -1604,16 +1696,16 @@ exports[`Results View The table should match snapshot and other elements should > - Medium + Low
@@ -1807,7 +1901,7 @@ exports[`Results View The table should match snapshot and other elements should role="cell" > - -2.4 + -24 % @@ -1815,18 +1909,7 @@ exports[`Results View The table should match snapshot and other elements should class="confidence cell" role="cell" > - - High + -
@@ -2028,7 +2113,18 @@ exports[`Results View The table should match snapshot and other elements should class="confidence cell" role="cell" > - - + + High
@@ -904,6 +905,8 @@ exports[`SubtestsResultsView Component Tests should render the subtests results role="cell" > `; -exports[`SubtestsResultsView Component Tests table sorting initializes the sort from the URL at load time for an implicit ascending sort 1`] = ` +exports[`SubtestsResultsView Component Tests table sorting initializes the sort from the URL at load time for an implicit descending sort 1`] = `