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
+ -
@@ -1166,7 +1245,7 @@ exports[`Results View The table should match snapshot and other elements should
- Windows
+ Windows 10
@@ -1218,7 +1297,18 @@ exports[`Results View The table should match snapshot and other elements should
class="confidence cell"
role="cell"
>
- -
+
+ High
- Base
+
+ Base
+
- New
+
+ New
+
- Delta
+
+
+
+ Delta
+
+
+
-
- Confidence
- (
- 4
- )
+
+
+
+
+
+ Confidence
+
+ (
+ 4
+ )
+
+
+
+
-
-
-
+
- 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
@@ -1842,6 +1930,8 @@ exports[`Results Table Should match snapshot 1`] = `
data-testid="expand-revision-button"
>
a11yr
@@ -1943,7 +2034,7 @@ exports[`Results Table Should match snapshot 1`] = `
- Windows
+ Windows 10
@@ -1987,7 +2078,7 @@ exports[`Results Table Should match snapshot 1`] = `
role="cell"
>
- -2.4
+ -24
%
@@ -2097,6 +2188,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 a descending sort 1`] = `
+
+
+ Delta
+
+
+`;
+
+exports[`Results Table can load the sort parameters from the URL for an ascending sort 1`] = `
+
+
+ Delta
+
+
+`;
+
+exports[`Results Table can sort the table and persist the sort parameters to the URL 1`] = `
+
+
+ Delta
+
+
+`;
+
+exports[`Results Table can sort the table and persist the sort parameters to the URL 2`] = `
+
+
+ Delta
+
+
+
+
+
+
+`;
+
+exports[`Results Table can sort the table and persist the sort parameters to the URL 3`] = `
+
+
+ Delta
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`Results Table can sort the table and persist the sort parameters to the URL 4`] = `
+
+
+ Delta
+
+
+
+
+
+
+
+
+
+`;
+
+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"
>
- OSX
+ OS X 10.15
@@ -2636,6 +2979,8 @@ exports[`Results Table should render different blocks when rendering several rev
data-testid="expand-revision-button"
>
-
+
`;
exports[`Results View Should display Base, New and Common graphs with replicates 1`] = `
-
-
+
`;
exports[`Results View Should display Base, New and Common graphs with tooltips 1`] = `
-
-
+
`;
exports[`Results View The table should match snapshot and other elements should be present in the page 1`] = `
@@ -1103,7 +1109,13 @@ exports[`Results View The table should match snapshot and other elements should
class="cell base-header"
role="columnheader"
>
- Base
+
+ Base
+
- New
+
+ New
+
- Delta
+
+
+
+ Delta
+
+
+
-
- Confidence
- (
- 4
- )
+
+
+
+
+
+ Confidence
+
+ (
+ 4
+ )
+
+
+
+
-
-
-
+
- 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
+ -
@@ -1976,7 +2061,7 @@ exports[`Results View The table should match snapshot and other elements should
- Windows
+ Windows 10
@@ -2028,7 +2113,18 @@ exports[`Results View The table should match snapshot and other elements should
class="confidence cell"
role="cell"
>
- -
+
+ High
-
- Linux
+ Linux 18.04
|
@@ -735,6 +734,8 @@ exports[`SubtestsResultsView Component Tests should render the subtests results
role="cell"
>
- 1.44
+ -1.44
%
@@ -904,6 +905,8 @@ exports[`SubtestsResultsView Component Tests should render the subtests results
role="cell"
>
- Sorted by Delta in ascending order
+ Sorted by Delta in descending order
Delta
@@ -1335,7 +1342,7 @@ exports[`SubtestsResultsView Component Tests table sorting can sort the table an
type="button"
>
- Sorted by Delta in descending order
+ Sorted by Delta in ascending order
Delta
@@ -1425,7 +1432,7 @@ exports[`SubtestsResultsView Component Tests table sorting can sort the table an
type="button"
>
- Sorted by Confidence in ascending order
+ Sorted by Confidence in descending order
- Sorted by Subtests in ascending order
+ Sorted by Subtests in descending order
Subtests
@@ -1582,7 +1589,7 @@ exports[`SubtestsResultsView Component Tests table sorting initializes the sort
`;
-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`] = `
- Sorted by Delta in ascending order
+ Sorted by Delta in descending order
Delta
@@ -1751,7 +1758,7 @@ exports[`SubtestsViewCompareOverTime Component Tests should render the subtests
-
- Linux
+ Linux 18.04
|
@@ -1902,7 +1908,7 @@ exports[`SubtestsViewCompareOverTime Component Tests should render the subtests
aria-invalid="false"
aria-label="Search by title, platform, revision or options"
class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedStart MuiInputBase-inputAdornedEnd css-rg83rj-MuiInputBase-input-MuiOutlinedInput-input"
- id=":rl:"
+ id=":r1h:"
placeholder="Search results"
type="text"
value=""
@@ -2338,6 +2344,8 @@ exports[`SubtestsViewCompareOverTime Component Tests should render the subtests
role="cell"
>
- 1.44
+ -1.44
%
@@ -2507,6 +2515,8 @@ exports[`SubtestsViewCompareOverTime Component Tests should render the subtests
role="cell"
>