feat(html-report): Keep query when clicking project filter and right click (#37916)

Author: cpAdm

packages/html-reporter/src/filter.ts

@@ -213,7 +213,8 @@ function cacheSearchValues(test: TestCaseSummary & { [searchValuesSymbol]?: Sear
 // Extract quoted groups of search params, or tokens separated by whitespace
 const SEARCH_PARAM_GROUP_REGEX = /("[^"]*"|"[^"]*$|\S+)/g;
 
-export function filterWithQuery(existingQuery: string, token: string, append: boolean): string {
+export function filterWithQuery(searchParams: URLSearchParams, token: string, append: boolean): string {
+  const existingQuery = searchParams.get('q') ?? '';
   const tokens = [...existingQuery.matchAll(SEARCH_PARAM_GROUP_REGEX)].map(m => {
     const rawValue = m[0];
     return rawValue.startsWith('"') && rawValue.endsWith('"') && rawValue.length > 1 ? rawValue.slice(1, rawValue.length - 1) : rawValue;

packages/html-reporter/src/headerView.tsx

@@ -102,11 +102,10 @@ const NavLink: React.FC<{
   count: number,
 }> = ({ token, count }) => {
   const searchParams = React.useContext(SearchParamsContext);
-  const q = searchParams.get('q')?.toString() || '';
   const queryToken = `s:${token}`;
 
-  const clickUrl = filterWithQuery(q, queryToken, false);
-  const ctrlClickUrl = filterWithQuery(q, queryToken, true);
+  const clickUrl = filterWithQuery(searchParams, queryToken, false);
+  const ctrlClickUrl = filterWithQuery(searchParams, queryToken, true);
 
   const label = token.charAt(0).toUpperCase() + token.slice(1);
 

packages/html-reporter/src/labels.tsx

@@ -60,8 +60,7 @@ const LabelsClickView: React.FC<{
 
   const onClickHandle = React.useCallback((e: React.MouseEvent, label: string) => {
     e.preventDefault();
-    const q = searchParams.get('q')?.toString() || '';
-    navigate(filterWithQuery(q, label, e.metaKey || e.ctrlKey));
+    navigate(filterWithQuery(searchParams, label, e.metaKey || e.ctrlKey));
   }, [searchParams]);
 
   return <>

packages/html-reporter/src/links.tsx

@@ -24,6 +24,7 @@ import { clsx, useFlash } from '@web/uiUtils';
 import { trace } from './icons';
 import { Expandable } from './expandable';
 import { Label } from './labels';
+import { filterWithQuery } from './filter';
 
 export function navigate(href: string | URL) {
   window.history.pushState({}, '', href);
@@ -61,10 +62,9 @@ export const LinkBadge: React.FunctionComponent<LinkProps & { dim?: boolean }> =
 export const ProjectLink: React.FunctionComponent<{
   projectNames: string[],
   projectName: string,
-}> = ({ projectNames, projectName }) => {
-  const encoded = encodeURIComponent(projectName);
-  const value = projectName === encoded ? projectName : `"${encoded.replace(/%22/g, '%5C%22')}"`;
-  return <Link href={`#?q=p:${value}`}>
+}> = ({  projectNames, projectName }) => {
+  const searchParams = React.useContext(SearchParamsContext);
+  return <Link click={filterWithQuery(searchParams, `p:${projectName}`, false)} ctrlClick={filterWithQuery(searchParams, `p:${projectName}`, true)}>
     <Label label={projectName} colorIndex={projectNames.indexOf(projectName) % 6} />
   </Link>;
 };

packages/html-reporter/src/reportView.tsx

@@ -90,11 +90,11 @@ export const ReportView: React.FC<{
           break;
         case 'p':
           event.preventDefault();
-          navigate(filterWithQuery(q, 's:passed', false));
+          navigate(filterWithQuery(searchParams, 's:passed', false));
           break;
         case 'f':
           event.preventDefault();
-          navigate(filterWithQuery(q, 's:failed', false));
+          navigate(filterWithQuery(searchParams, 's:failed', false));
           break;
         case 'ArrowLeft':
           if (prev) {
@@ -113,7 +113,7 @@ export const ReportView: React.FC<{
 
     document.addEventListener('keydown', handleKeyDown);
     return () => document.removeEventListener('keydown', handleKeyDown);
-  }, [prev, next, filterParam, q]);
+  }, [prev, next, filterParam, q, searchParams]);
 
   React.useEffect(() => {
     if (reportTitle)

packages/html-reporter/src/testCaseView.spec.tsx

@@ -216,7 +216,7 @@ test('should correctly render prev and next', async ({ mount }) => {
     - text: group
     - link "« previous"
     - link "next »"
-    - text: "My test test.spec.ts:42 10ms"
+    - text: "My test test.spec.ts:42 10ms chromium"
   `);
 });
 
@@ -241,17 +241,17 @@ const testCaseWithTwoAttempts: TestCase = {
 test('total duration is selected run duration', async ({ mount, page }) => {
   const component = await mount(<TestCaseView projectNames={['chromium', 'webkit']} testRunMetadata={{}} test={testCaseWithTwoAttempts} prev={undefined} next={undefined} run={0}></TestCaseView>);
   await expect(component).toMatchAriaSnapshot(`
-    - text: "My test test.spec.ts:42 200ms"
+    - text: "My test test.spec.ts:42 200ms chromium"
     - tablist:
       - tab "Run 50ms"
       - 'tab "Retry #1 150ms"'
   `);
   await page.getByRole('tab', { name: 'Run' }).click();
   await expect(component).toMatchAriaSnapshot(`
-    - text: "My test test.spec.ts:42 200ms"
+    - text: "My test test.spec.ts:42 200ms chromium"
   `);
   await page.getByRole('tab', { name: 'Retry' }).click();
   await expect(component).toMatchAriaSnapshot(`
-    - text: "My test test.spec.ts:42 200ms"
+    - text: "My test test.spec.ts:42 200ms chromium"
   `);
 });