kyfx
/
playwright
mirror of https://github.com/microsoft/playwright.git
4
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat(html-reporter): Add extra space after any special token (#35365)

This commit is contained in:
Chris 2025-03-28 14:47:08 +01:00 committed by GitHub
parent cb7f1121ee
commit fbf519c5a5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 51 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
packages/html-reporter/src/headerView.spec.tsx
View File

@ -16,18 +16,21 @@
import { test, expect } from '@playwright/experimental-ct-react';
import { HeaderView } from './headerView';
import { SearchParamsProvider } from './links';
test.use({ viewport: { width: 720, height: 200 } });
test('should render counters', async ({ mount }) => {
const component = await mount(<HeaderView stats={{
total: 100,
expected: 42,
unexpected: 31,
flaky: 17,
skipped: 10,
ok: false,
}} filterText='' setFilterText={() => { }}></HeaderView>);
const component = await mount(<SearchParamsProvider>
<HeaderView stats={{
total: 100,
expected: 42,
unexpected: 31,
flaky: 17,
skipped: 10,
ok: false,
}} filterText='' setFilterText={() => { }} />
</SearchParamsProvider>);
await expect(component.locator('a', { hasText: 'All' }).locator('.counter')).toHaveText('90');
await expect(component.locator('a', { hasText: 'Passed' }).locator('.counter')).toHaveText('42');
await expect(component.locator('a', { hasText: 'Failed' }).locator('.counter')).toHaveText('31');
@ -42,19 +45,20 @@ test('should render counters', async ({ mount }) => {
test('should toggle filters', async ({ page, mount }) => {
const filters: string[] = [];
const component = await mount(<HeaderView
stats={{
total: 100,
expected: 42,
unexpected: 31,
flaky: 17,
skipped: 10,
ok: false,
}}
filterText=''
setFilterText={(filterText: string) => filters.push(filterText)}
>
</HeaderView>);
const component = await mount(<SearchParamsProvider>
<HeaderView
stats={{
total: 100,
expected: 42,
unexpected: 31,
flaky: 17,
skipped: 10,
ok: false,
}}
filterText=''
setFilterText={(filterText: string) => filters.push(filterText)}
/>
</SearchParamsProvider>);
await component.locator('a', { hasText: 'All' }).click();
await component.locator('a', { hasText: 'Passed' }).click();
await expect(page).toHaveURL(/#\?q=s:passed/);
@ -65,5 +69,5 @@ test('should toggle filters', async ({ page, mount }) => {
await component.locator('a', { hasText: 'Skipped' }).click();
await expect(page).toHaveURL(/#\?q=s:skipped/);
await component.getByRole('textbox').fill('annot:annotation type=annotation description');
expect(filters).toEqual(['', 's:passed', 's:failed', 's:flaky', 's:skipped', 'annot:annotation type=annotation description']);
expect(filters).toEqual(['', '', 's:passed ', 's:failed ', 's:flaky ', 's:skipped ', 'annot:annotation type=annotation description']);
});

19
packages/html-reporter/src/headerView.tsx
View File

@ -24,22 +24,17 @@ import { Link, navigate, SearchParamsContext } from './links';
import { statusIcon } from './statusIcon';
import { filterWithToken } from './filter';
export const HeaderView: React.FC<React.PropsWithChildren<{
export const HeaderView: React.FC<{
stats: Stats,
filterText: string,
setFilterText: (filterText: string) => void,
}>> = ({ stats, filterText, setFilterText }) => {
}> = ({ stats, filterText, setFilterText }) => {
const searchParams = React.useContext(SearchParamsContext);
React.useEffect(() => {
const popstateFn = () => {
const params = new URLSearchParams(window.location.hash.slice(1));
setFilterText(params.get('q') || '');
};
window.addEventListener('popstate', popstateFn);
return () => {
window.removeEventListener('popstate', popstateFn);
};
}, [setFilterText]);
// Add an extra space such that users can easily add to query
const query = searchParams.get('q');
setFilterText(query ? `${query.trim()} ` : '');
}, [searchParams, setFilterText]);
return (<>
<div className='pt-3'>

36
tests/playwright-test/reporter-html.spec.ts
View File

@ -1623,7 +1623,7 @@ for (const useIntermediateMergeReport of [true, false] as const) {
await expect(page.locator('.label')).toHaveText(['chromium', 'flaky']);
await page.locator('.label', { has: page.getByText('flaky', { exact: true }) }).click();
await expect(page).not.toHaveURL(/testId/);
await expect(searchInput).toHaveValue('@flaky');
await expect(searchInput).toHaveValue('@flaky ');
await page.goBack();
await expect(page).toHaveURL(/testId/);
await expect(page.locator('.label')).toHaveCount(2);
@ -1698,7 +1698,7 @@ for (const useIntermediateMergeReport of [true, false] as const) {
await expect(smokeLabelButton).toBeVisible();
await smokeLabelButton.click();
await expect(searchInput).toHaveValue('@smoke');
await expect(searchInput).toHaveValue('@smoke ');
await expect(page.locator('.test-file-test')).toHaveCount(1);
await expect(page.locator('.chip', { hasText: 'a.test.js' })).toHaveCount(0);
await expect(page.locator('.chip', { hasText: 'b.test.js' })).toHaveCount(1);
@ -1718,7 +1718,7 @@ for (const useIntermediateMergeReport of [true, false] as const) {
await expect(page.locator('.chip', { hasText: 'b.test.js' })).toHaveCount(1);
await regressionLabelButton.click();
await expect(searchInput).toHaveValue('@regression');
await expect(searchInput).toHaveValue('@regression ');
await expect(page.locator('.test-file-test')).toHaveCount(1);
await expect(page.locator('.chip', { hasText: 'a.test.js' })).toHaveCount(1);
await expect(page.locator('.chip', { hasText: 'b.test.js' })).toHaveCount(0);
@ -1731,7 +1731,7 @@ for (const useIntermediateMergeReport of [true, false] as const) {
const tagWithDash = page.locator('.test-file-test', { has: page.getByText('Error Pages › @GCC-1508 passes', { exact: true }) }).locator('.label', { hasText: 'GCC-1508' });
await tagWithDash.click();
await expect(searchInput).toHaveValue('@GCC-1508');
await expect(searchInput).toHaveValue('@GCC-1508 ');
await expect(page.locator('.test-file-test')).toHaveCount(1);
await expect(page.locator('.chip', { hasText: 'a.test.js' })).toHaveCount(1);
await expect(page.locator('.chip', { hasText: 'b.test.js' })).toHaveCount(0);
@ -1742,7 +1742,7 @@ for (const useIntermediateMergeReport of [true, false] as const) {
const tagWithDash2 = page.locator('.test-file-test', { has: page.getByText('Error Pages › @GCC-1510 fails', { exact: true }) }).locator('.label', { hasText: 'GCC-1510' });
await tagWithDash2.click();
await expect(searchInput).toHaveValue('@GCC-1510');
await expect(searchInput).toHaveValue('@GCC-1510 ');
await expect(page.locator('.test-file-test')).toHaveCount(1);
await expect(page.locator('.chip', { hasText: 'a.test.js' })).toHaveCount(0);
await expect(page.locator('.chip', { hasText: 'b.test.js' })).toHaveCount(1);
@ -1950,7 +1950,7 @@ for (const useIntermediateMergeReport of [true, false] as const) {
await expect(page.locator('.chip', { hasText: 'a.test.js' })).toHaveCount(0);
await expect(page.locator('.chip', { hasText: 'b.test.js' })).toHaveCount(1);
await expect(page.locator('.test-file-test .test-file-title')).toHaveText('@smoke fails');
await expect(searchInput).toHaveValue('s:failed @smoke');
await expect(searchInput).toHaveValue('s:failed @smoke ');
await expect(page).toHaveURL(/s:failed%20@smoke/);
await passedNavMenu.click();
@ -1960,7 +1960,7 @@ for (const useIntermediateMergeReport of [true, false] as const) {
await expect(page.locator('.chip', { hasText: 'a.test.js' })).toHaveCount(1);
await expect(page.locator('.chip', { hasText: 'b.test.js' })).toHaveCount(0);
await expect(page.locator('.test-file-test .test-file-title')).toHaveText('@regression passes');
await expect(searchInput).toHaveValue('s:passed @regression');
await expect(searchInput).toHaveValue('s:passed @regression ');
await expect(page).toHaveURL(/s:passed%20@regression/);
await allNavMenu.click();
@ -1969,7 +1969,7 @@ for (const useIntermediateMergeReport of [true, false] as const) {
await expect(page.locator('.chip', { hasText: 'a.test.js' })).toHaveCount(1);
await expect(page.locator('.chip', { hasText: 'b.test.js' })).toHaveCount(1);
await expect(page.locator('.test-file-test .test-file-title')).toHaveCount(2);
await expect(searchInput).toHaveValue('@regression');
await expect(searchInput).toHaveValue('@regression ');
await expect(page).toHaveURL(/@regression/);
});
@ -2011,7 +2011,7 @@ for (const useIntermediateMergeReport of [true, false] as const) {
await expect(page.locator('.chip', { hasText: 'a.test.js' })).toHaveCount(1);
await expect(page.locator('.chip', { hasText: 'b.test.js' })).toHaveCount(1);
await expect(page.locator('.test-file-test .test-file-title')).toHaveCount(2);
await expect(searchInput).toHaveValue('@smoke');
await expect(searchInput).toHaveValue('@smoke ');
await expect(page).toHaveURL(/%40smoke/);
await searchInput.fill('@regression');
@ -2020,7 +2020,7 @@ for (const useIntermediateMergeReport of [true, false] as const) {
await expect(page.locator('.chip', { hasText: 'a.test.js' })).toHaveCount(1);
await expect(page.locator('.chip', { hasText: 'b.test.js' })).toHaveCount(1);
await expect(page.locator('.test-file-test .test-file-title')).toHaveCount(2);
await expect(searchInput).toHaveValue('@regression');
await expect(searchInput).toHaveValue('@regression ');
await expect(page).toHaveURL(/%40regression/);
});
@ -2143,7 +2143,7 @@ for (const useIntermediateMergeReport of [true, false] as const) {
await page.keyboard.down(process.platform === 'darwin' ? 'Meta' : 'Control');
await smokeButton.click();
await expect(searchInput).toHaveValue('@smoke');
await expect(searchInput).toHaveValue('@smoke ');
await expect(page).toHaveURL(/@smoke/);
await expect(page.locator('.chip')).toHaveCount(2);
await expect(page.locator('.chip', { hasText: 'a.test.js' })).toHaveCount(1);
@ -2152,7 +2152,7 @@ for (const useIntermediateMergeReport of [true, false] as const) {
await regressionButton.click();
await expect(searchInput).toHaveValue('@smoke @regression');
await expect(searchInput).toHaveValue('@smoke @regression ');
await expect(page).toHaveURL(/@smoke%20@regression/);
await expect(page.locator('.chip')).toHaveCount(1);
await expect(page.locator('.chip', { hasText: 'a.test.js' })).toHaveCount(1);
@ -2161,7 +2161,7 @@ for (const useIntermediateMergeReport of [true, false] as const) {
await smokeButton.click();
await expect(searchInput).toHaveValue('@regression');
await expect(searchInput).toHaveValue('@regression ');
await expect(page).toHaveURL(/@regression/);
await expect(page.locator('.chip')).toHaveCount(2);
await expect(page.locator('.chip', { hasText: 'a.test.js' })).toHaveCount(1);
@ -2170,7 +2170,7 @@ for (const useIntermediateMergeReport of [true, false] as const) {
await flakyButton.click();
await expect(searchInput).toHaveValue('@regression @flaky');
await expect(searchInput).toHaveValue('@regression @flaky ');
await expect(page).toHaveURL(/@regression%20@flaky/);
await expect(page.locator('.chip')).toHaveCount(1);
await expect(page.locator('.chip', { hasText: 'a.test.js' })).toHaveCount(0);
@ -2179,7 +2179,7 @@ for (const useIntermediateMergeReport of [true, false] as const) {
await regressionButton.click();
await expect(searchInput).toHaveValue('@flaky');
await expect(searchInput).toHaveValue('@flaky ');
await expect(page).toHaveURL(/@flaky/);
await expect(page.locator('.chip')).toHaveCount(2);
await expect(page.locator('.chip', { hasText: 'a.test.js' })).toHaveCount(0);
@ -2198,7 +2198,7 @@ for (const useIntermediateMergeReport of [true, false] as const) {
await page.keyboard.up(process.platform === 'darwin' ? 'Meta' : 'Control');
await smokeButton.click();
await expect(searchInput).toHaveValue('@smoke');
await expect(searchInput).toHaveValue('@smoke ');
await expect(page).toHaveURL(/@smoke/);
await expect(page.locator('.chip')).toHaveCount(2);
await expect(page.locator('.chip', { hasText: 'a.test.js' })).toHaveCount(1);
@ -2207,7 +2207,7 @@ for (const useIntermediateMergeReport of [true, false] as const) {
await regressionButton.click();
await expect(searchInput).toHaveValue('@regression');
await expect(searchInput).toHaveValue('@regression ');
await expect(page).toHaveURL(/@regression/);
await expect(page.locator('.chip')).toHaveCount(2);
await expect(page.locator('.chip', { hasText: 'a.test.js' })).toHaveCount(1);
@ -2216,7 +2216,7 @@ for (const useIntermediateMergeReport of [true, false] as const) {
await flakyButton.click();
await expect(searchInput).toHaveValue('@flaky');
await expect(searchInput).toHaveValue('@flaky ');
await expect(page).toHaveURL(/@flaky/);
await expect(page.locator('.chip')).toHaveCount(2);
await expect(page.locator('.chip', { hasText: 'a.test.js' })).toHaveCount(0);