Skip to content

Commit fbf519c

Browse files
cpAdmcpAdm
authored
feat(html-reporter): Add extra space after any special token (microsoft#35365)
1 parent cb7f112 commit fbf519c

File tree

3 files changed

+51
-52
lines changed

3 files changed

+51
-52
lines changed

‎packages/html-reporter/src/headerView.spec.tsx‎

Lines changed: 26 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -16,18 +16,21 @@
1616

1717
import { test, expect } from '@playwright/experimental-ct-react';
1818
import { HeaderView } from './headerView';
19+
import { SearchParamsProvider } from './links';
1920

2021
test.use({ viewport: { width: 720, height: 200 } });
2122

2223
test('should render counters', async ({ mount }) => {
23-
const component = await mount(<HeaderView stats={{
24-
total: 100,
25-
expected: 42,
26-
unexpected: 31,
27-
flaky: 17,
28-
skipped: 10,
29-
ok: false,
30-
}} filterText='' setFilterText={() => { }}></HeaderView>);
24+
const component = await mount(<SearchParamsProvider>
25+
<HeaderView stats={{
26+
total: 100,
27+
expected: 42,
28+
unexpected: 31,
29+
flaky: 17,
30+
skipped: 10,
31+
ok: false,
32+
}} filterText='' setFilterText={() => { }} />
33+
</SearchParamsProvider>);
3134
await expect(component.locator('a', { hasText: 'All' }).locator('.counter')).toHaveText('90');
3235
await expect(component.locator('a', { hasText: 'Passed' }).locator('.counter')).toHaveText('42');
3336
await expect(component.locator('a', { hasText: 'Failed' }).locator('.counter')).toHaveText('31');
@@ -42,19 +45,20 @@ test('should render counters', async ({ mount }) => {
4245

4346
test('should toggle filters', async ({ page, mount }) => {
4447
const filters: string[] = [];
45-
const component = await mount(<HeaderView
46-
stats={{
47-
total: 100,
48-
expected: 42,
49-
unexpected: 31,
50-
flaky: 17,
51-
skipped: 10,
52-
ok: false,
53-
}}
54-
filterText=''
55-
setFilterText={(filterText: string) => filters.push(filterText)}
56-
>
57-
</HeaderView>);
48+
const component = await mount(<SearchParamsProvider>
49+
<HeaderView
50+
stats={{
51+
total: 100,
52+
expected: 42,
53+
unexpected: 31,
54+
flaky: 17,
55+
skipped: 10,
56+
ok: false,
57+
}}
58+
filterText=''
59+
setFilterText={(filterText: string) => filters.push(filterText)}
60+
/>
61+
</SearchParamsProvider>);
5862
await component.locator('a', { hasText: 'All' }).click();
5963
await component.locator('a', { hasText: 'Passed' }).click();
6064
await expect(page).toHaveURL(/#\?q=s:passed/);
@@ -65,5 +69,5 @@ test('should toggle filters', async ({ page, mount }) => {
6569
await component.locator('a', { hasText: 'Skipped' }).click();
6670
await expect(page).toHaveURL(/#\?q=s:skipped/);
6771
await component.getByRole('textbox').fill('annot:annotation type=annotation description');
68-
expect(filters).toEqual(['', 's:passed', 's:failed', 's:flaky', 's:skipped', 'annot:annotation type=annotation description']);
72+
expect(filters).toEqual(['', '', 's:passed ', 's:failed ', 's:flaky ', 's:skipped ', 'annot:annotation type=annotation description']);
6973
});

‎packages/html-reporter/src/headerView.tsx‎

Lines changed: 7 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -24,22 +24,17 @@ import { Link, navigate, SearchParamsContext } from './links';
2424
import { statusIcon } from './statusIcon';
2525
import { filterWithToken } from './filter';
2626

27-
export const HeaderView: React.FC<React.PropsWithChildren<{
27+
export const HeaderView: React.FC<{
2828
stats: Stats,
2929
filterText: string,
3030
setFilterText: (filterText: string) => void,
31-
}>> = ({ stats, filterText, setFilterText }) => {
31+
}> = ({ stats, filterText, setFilterText }) => {
32+
const searchParams = React.useContext(SearchParamsContext);
3233
React.useEffect(() => {
33-
const popstateFn = () => {
34-
const params = new URLSearchParams(window.location.hash.slice(1));
35-
setFilterText(params.get('q') || '');
36-
};
37-
window.addEventListener('popstate', popstateFn);
38-
39-
return () => {
40-
window.removeEventListener('popstate', popstateFn);
41-
};
42-
}, [setFilterText]);
34+
// Add an extra space such that users can easily add to query
35+
const query = searchParams.get('q');
36+
setFilterText(query ? `${query.trim()} ` : '');
37+
}, [searchParams, setFilterText]);
4338

4439
return (<>
4540
<div className='pt-3'>

‎tests/playwright-test/reporter-html.spec.ts‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1623,7 +1623,7 @@ for (const useIntermediateMergeReport of [true, false] as const) {
16231623
await expect(page.locator('.label')).toHaveText(['chromium', 'flaky']);
16241624
await page.locator('.label', { has: page.getByText('flaky', { exact: true }) }).click();
16251625
await expect(page).not.toHaveURL(/testId/);
1626-
await expect(searchInput).toHaveValue('@flaky');
1626+
await expect(searchInput).toHaveValue('@flaky ');
16271627
await page.goBack();
16281628
await expect(page).toHaveURL(/testId/);
16291629
await expect(page.locator('.label')).toHaveCount(2);
@@ -1698,7 +1698,7 @@ for (const useIntermediateMergeReport of [true, false] as const) {
16981698

16991699
await expect(smokeLabelButton).toBeVisible();
17001700
await smokeLabelButton.click();
1701-
await expect(searchInput).toHaveValue('@smoke');
1701+
await expect(searchInput).toHaveValue('@smoke ');
17021702
await expect(page.locator('.test-file-test')).toHaveCount(1);
17031703
await expect(page.locator('.chip', { hasText: 'a.test.js' })).toHaveCount(0);
17041704
await expect(page.locator('.chip', { hasText: 'b.test.js' })).toHaveCount(1);
@@ -1718,7 +1718,7 @@ for (const useIntermediateMergeReport of [true, false] as const) {
17181718
await expect(page.locator('.chip', { hasText: 'b.test.js' })).toHaveCount(1);
17191719

17201720
await regressionLabelButton.click();
1721-
await expect(searchInput).toHaveValue('@regression');
1721+
await expect(searchInput).toHaveValue('@regression ');
17221722
await expect(page.locator('.test-file-test')).toHaveCount(1);
17231723
await expect(page.locator('.chip', { hasText: 'a.test.js' })).toHaveCount(1);
17241724
await expect(page.locator('.chip', { hasText: 'b.test.js' })).toHaveCount(0);
@@ -1731,7 +1731,7 @@ for (const useIntermediateMergeReport of [true, false] as const) {
17311731
const tagWithDash = page.locator('.test-file-test', { has: page.getByText('Error Pages › @GCC-1508 passes', { exact: true }) }).locator('.label', { hasText: 'GCC-1508' });
17321732

17331733
await tagWithDash.click();
1734-
await expect(searchInput).toHaveValue('@GCC-1508');
1734+
await expect(searchInput).toHaveValue('@GCC-1508 ');
17351735
await expect(page.locator('.test-file-test')).toHaveCount(1);
17361736
await expect(page.locator('.chip', { hasText: 'a.test.js' })).toHaveCount(1);
17371737
await expect(page.locator('.chip', { hasText: 'b.test.js' })).toHaveCount(0);
@@ -1742,7 +1742,7 @@ for (const useIntermediateMergeReport of [true, false] as const) {
17421742
const tagWithDash2 = page.locator('.test-file-test', { has: page.getByText('Error Pages › @GCC-1510 fails', { exact: true }) }).locator('.label', { hasText: 'GCC-1510' });
17431743

17441744
await tagWithDash2.click();
1745-
await expect(searchInput).toHaveValue('@GCC-1510');
1745+
await expect(searchInput).toHaveValue('@GCC-1510 ');
17461746
await expect(page.locator('.test-file-test')).toHaveCount(1);
17471747
await expect(page.locator('.chip', { hasText: 'a.test.js' })).toHaveCount(0);
17481748
await expect(page.locator('.chip', { hasText: 'b.test.js' })).toHaveCount(1);
@@ -1950,7 +1950,7 @@ for (const useIntermediateMergeReport of [true, false] as const) {
19501950
await expect(page.locator('.chip', { hasText: 'a.test.js' })).toHaveCount(0);
19511951
await expect(page.locator('.chip', { hasText: 'b.test.js' })).toHaveCount(1);
19521952
await expect(page.locator('.test-file-test .test-file-title')).toHaveText('@smoke fails');
1953-
await expect(searchInput).toHaveValue('s:failed @smoke');
1953+
await expect(searchInput).toHaveValue('s:failed @smoke ');
19541954
await expect(page).toHaveURL(/s:failed%20@smoke/);
19551955

19561956
await passedNavMenu.click();
@@ -1960,7 +1960,7 @@ for (const useIntermediateMergeReport of [true, false] as const) {
19601960
await expect(page.locator('.chip', { hasText: 'a.test.js' })).toHaveCount(1);
19611961
await expect(page.locator('.chip', { hasText: 'b.test.js' })).toHaveCount(0);
19621962
await expect(page.locator('.test-file-test .test-file-title')).toHaveText('@regression passes');
1963-
await expect(searchInput).toHaveValue('s:passed @regression');
1963+
await expect(searchInput).toHaveValue('s:passed @regression ');
19641964
await expect(page).toHaveURL(/s:passed%20@regression/);
19651965

19661966
await allNavMenu.click();
@@ -1969,7 +1969,7 @@ for (const useIntermediateMergeReport of [true, false] as const) {
19691969
await expect(page.locator('.chip', { hasText: 'a.test.js' })).toHaveCount(1);
19701970
await expect(page.locator('.chip', { hasText: 'b.test.js' })).toHaveCount(1);
19711971
await expect(page.locator('.test-file-test .test-file-title')).toHaveCount(2);
1972-
await expect(searchInput).toHaveValue('@regression');
1972+
await expect(searchInput).toHaveValue('@regression ');
19731973
await expect(page).toHaveURL(/@regression/);
19741974
});
19751975

@@ -2011,7 +2011,7 @@ for (const useIntermediateMergeReport of [true, false] as const) {
20112011
await expect(page.locator('.chip', { hasText: 'a.test.js' })).toHaveCount(1);
20122012
await expect(page.locator('.chip', { hasText: 'b.test.js' })).toHaveCount(1);
20132013
await expect(page.locator('.test-file-test .test-file-title')).toHaveCount(2);
2014-
await expect(searchInput).toHaveValue('@smoke');
2014+
await expect(searchInput).toHaveValue('@smoke ');
20152015
await expect(page).toHaveURL(/%40smoke/);
20162016

20172017
await searchInput.fill('@regression');
@@ -2020,7 +2020,7 @@ for (const useIntermediateMergeReport of [true, false] as const) {
20202020
await expect(page.locator('.chip', { hasText: 'a.test.js' })).toHaveCount(1);
20212021
await expect(page.locator('.chip', { hasText: 'b.test.js' })).toHaveCount(1);
20222022
await expect(page.locator('.test-file-test .test-file-title')).toHaveCount(2);
2023-
await expect(searchInput).toHaveValue('@regression');
2023+
await expect(searchInput).toHaveValue('@regression ');
20242024
await expect(page).toHaveURL(/%40regression/);
20252025
});
20262026

@@ -2143,7 +2143,7 @@ for (const useIntermediateMergeReport of [true, false] as const) {
21432143
await page.keyboard.down(process.platform === 'darwin' ? 'Meta' : 'Control');
21442144
await smokeButton.click();
21452145

2146-
await expect(searchInput).toHaveValue('@smoke');
2146+
await expect(searchInput).toHaveValue('@smoke ');
21472147
await expect(page).toHaveURL(/@smoke/);
21482148
await expect(page.locator('.chip')).toHaveCount(2);
21492149
await expect(page.locator('.chip', { hasText: 'a.test.js' })).toHaveCount(1);
@@ -2152,7 +2152,7 @@ for (const useIntermediateMergeReport of [true, false] as const) {
21522152

21532153
await regressionButton.click();
21542154

2155-
await expect(searchInput).toHaveValue('@smoke @regression');
2155+
await expect(searchInput).toHaveValue('@smoke @regression ');
21562156
await expect(page).toHaveURL(/@smoke%20@regression/);
21572157
await expect(page.locator('.chip')).toHaveCount(1);
21582158
await expect(page.locator('.chip', { hasText: 'a.test.js' })).toHaveCount(1);
@@ -2161,7 +2161,7 @@ for (const useIntermediateMergeReport of [true, false] as const) {
21612161

21622162
await smokeButton.click();
21632163

2164-
await expect(searchInput).toHaveValue('@regression');
2164+
await expect(searchInput).toHaveValue('@regression ');
21652165
await expect(page).toHaveURL(/@regression/);
21662166
await expect(page.locator('.chip')).toHaveCount(2);
21672167
await expect(page.locator('.chip', { hasText: 'a.test.js' })).toHaveCount(1);
@@ -2170,7 +2170,7 @@ for (const useIntermediateMergeReport of [true, false] as const) {
21702170

21712171
await flakyButton.click();
21722172

2173-
await expect(searchInput).toHaveValue('@regression @flaky');
2173+
await expect(searchInput).toHaveValue('@regression @flaky ');
21742174
await expect(page).toHaveURL(/@regression%20@flaky/);
21752175
await expect(page.locator('.chip')).toHaveCount(1);
21762176
await expect(page.locator('.chip', { hasText: 'a.test.js' })).toHaveCount(0);
@@ -2179,7 +2179,7 @@ for (const useIntermediateMergeReport of [true, false] as const) {
21792179

21802180
await regressionButton.click();
21812181

2182-
await expect(searchInput).toHaveValue('@flaky');
2182+
await expect(searchInput).toHaveValue('@flaky ');
21832183
await expect(page).toHaveURL(/@flaky/);
21842184
await expect(page.locator('.chip')).toHaveCount(2);
21852185
await expect(page.locator('.chip', { hasText: 'a.test.js' })).toHaveCount(0);
@@ -2198,7 +2198,7 @@ for (const useIntermediateMergeReport of [true, false] as const) {
21982198
await page.keyboard.up(process.platform === 'darwin' ? 'Meta' : 'Control');
21992199
await smokeButton.click();
22002200

2201-
await expect(searchInput).toHaveValue('@smoke');
2201+
await expect(searchInput).toHaveValue('@smoke ');
22022202
await expect(page).toHaveURL(/@smoke/);
22032203
await expect(page.locator('.chip')).toHaveCount(2);
22042204
await expect(page.locator('.chip', { hasText: 'a.test.js' })).toHaveCount(1);
@@ -2207,7 +2207,7 @@ for (const useIntermediateMergeReport of [true, false] as const) {
22072207

22082208
await regressionButton.click();
22092209

2210-
await expect(searchInput).toHaveValue('@regression');
2210+
await expect(searchInput).toHaveValue('@regression ');
22112211
await expect(page).toHaveURL(/@regression/);
22122212
await expect(page.locator('.chip')).toHaveCount(2);
22132213
await expect(page.locator('.chip', { hasText: 'a.test.js' })).toHaveCount(1);
@@ -2216,7 +2216,7 @@ for (const useIntermediateMergeReport of [true, false] as const) {
22162216

22172217
await flakyButton.click();
22182218

2219-
await expect(searchInput).toHaveValue('@flaky');
2219+
await expect(searchInput).toHaveValue('@flaky ');
22202220
await expect(page).toHaveURL(/@flaky/);
22212221
await expect(page.locator('.chip')).toHaveCount(2);
22222222
await expect(page.locator('.chip', { hasText: 'a.test.js' })).toHaveCount(0);

0 commit comments

Comments
 (0)