From 7937699b28b47cccda80a55e3ff6da83998aa39d Mon Sep 17 00:00:00 2001
From: Alex Neo <alexneo2003@gmail.com>
Date: Fri, 28 Apr 2023 06:04:54 +0300
Subject: [PATCH] fix(html): label not matched if first with describe (#22680)

---
 packages/html-reporter/src/filter.ts        |  2 +-
 packages/html-reporter/src/testFileView.tsx |  2 +-
 tests/playwright-test/reporter-html.spec.ts | 23 +++++++++++++--------
 3 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/packages/html-reporter/src/filter.ts b/packages/html-reporter/src/filter.ts
index 3177128f17..88fa56fbe3 100644
--- a/packages/html-reporter/src/filter.ts
+++ b/packages/html-reporter/src/filter.ts
@@ -108,7 +108,7 @@ export class Filter {
       if (test.outcome === 'skipped')
         status = 'skipped';
       const searchValues: SearchValues = {
-        text: (status + ' ' + test.projectName + ' ' + test.path.join(' ') + test.title).toLowerCase(),
+        text: (status + ' ' + test.projectName + ' ' + test.path.join(' ') + ' ' + test.title).toLowerCase(),
         project: test.projectName.toLowerCase(),
         status: status as any,
       };
diff --git a/packages/html-reporter/src/testFileView.tsx b/packages/html-reporter/src/testFileView.tsx
index 8a5b15658e..d1fd8dcef3 100644
--- a/packages/html-reporter/src/testFileView.tsx
+++ b/packages/html-reporter/src/testFileView.tsx
@@ -118,7 +118,7 @@ const LabelsClickView: React.FC<React.PropsWithChildren<{
   return labels.length > 0 ? (
     <>
       {labels.map(tag => (
-        <span style={{ margin: '6px 0 0 6px', cursor: 'pointer' }} className={'label label-color-' + (hashStringToInt(tag))} onClick={e => onClickHandle(e, tag)}>
+        <span key={tag} style={{ margin: '6px 0 0 6px', cursor: 'pointer' }} className={'label label-color-' + (hashStringToInt(tag))} onClick={e => onClickHandle(e, tag)}>
           {tag}
         </span>
       ))}
diff --git a/tests/playwright-test/reporter-html.spec.ts b/tests/playwright-test/reporter-html.spec.ts
index 7a0a328f15..0edb5bd773 100644
--- a/tests/playwright-test/reporter-html.spec.ts
+++ b/tests/playwright-test/reporter-html.spec.ts
@@ -1261,18 +1261,23 @@ test.describe('labels', () => {
     expect((await firstTitle.boundingBox()).height).toBeGreaterThanOrEqual(100);
   });
 
-  test('should show filtered tests by labels when click on label', async ({ runInlineTest, showReport, page }) => {
+  test('with describe. should show filtered tests by labels when click on label', async ({ runInlineTest, showReport, page }) => {
     const result = await runInlineTest({
       'a.test.js': `
         const { expect, test } = require('@playwright/test');
-        test('@regression passes', async ({}) => {
-          expect(1).toBe(1);
+        test.describe('Error Pages', () => {
+          test('@regression passes', async ({}) => {
+            expect(1).toBe(1);
+          });
         });
       `,
       'b.test.js': `
         const { expect, test } = require('@playwright/test');
-        test('@smoke fails', async ({}) => {
-          expect(1).toBe(2);
+
+        test.describe('Error Pages', () => {
+          test('@smoke fails', async ({}) => {
+            expect(1).toBe(2);
+          });
         });
       `,
     }, { reporter: 'dot,html' }, { PW_TEST_HTML_REPORT_OPEN: 'never' });
@@ -1284,7 +1289,7 @@ test.describe('labels', () => {
     await showReport();
 
     const searchInput = page.locator('.subnav-search-input');
-    const smokeLabelButton =  page.locator('.test-file-test', { has: page.getByText('@smoke fails', { exact: true }) }).locator('.label', { hasText: 'smoke' });
+    const smokeLabelButton =  page.locator('.test-file-test', { has: page.getByText('Error Pages › @smoke fails', { exact: true }) }).locator('.label', { hasText: 'smoke' });
 
     await expect(smokeLabelButton).toBeVisible();
     await smokeLabelButton.click();
@@ -1292,9 +1297,9 @@ test.describe('labels', () => {
     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);
-    await expect(page.locator('.test-file-test .test-file-title')).toHaveText('@smoke fails');
+    await expect(page.locator('.test-file-test .test-file-title')).toHaveText('Error Pages › @smoke fails');
 
-    const regressionLabelButton =  page.locator('.test-file-test', { has: page.getByText('@regression passes', { exact: true }) }).locator('.label', { hasText: 'regression' });
+    const regressionLabelButton =  page.locator('.test-file-test', { has: page.getByText('Error Pages › @regression passes', { exact: true }) }).locator('.label', { hasText: 'regression' });
 
     await expect(regressionLabelButton).not.toBeVisible();
 
@@ -1310,7 +1315,7 @@ test.describe('labels', () => {
     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);
-    await expect(page.locator('.test-file-test .test-file-title')).toHaveText('@regression passes');
+    await expect(page.locator('.test-file-test .test-file-title')).toHaveText('Error Pages › @regression passes');
   });
 
   test('click label should change URL', async ({ runInlineTest, showReport, page }) => {