fix(ct): ct ID clash on similar imports (#30108)

This restores the [best
effort](https://github.com/microsoft/playwright/pull/29407/files#diff-8dd3534dc5013c3779edeaded71324b0dd1c1807668f3c6d9e9a1aab1c20ae91L152)
logic if its a relativ path.

Fixes https://github.com/microsoft/playwright/issues/30085

---------

Signed-off-by: Max Schmitt <max@schmitt.mx>
Co-authored-by: Pavel Feldman <pavel.feldman@gmail.com>

packages/playwright-ct-core/src/tsxTransform.ts

@@ -150,7 +150,7 @@ export type ImportInfo = {
 
 export function importInfo(importNode: T.ImportDeclaration, specifier: T.ImportSpecifier | T.ImportDefaultSpecifier, filename: string): { localName: string, info: ImportInfo } {
   const importSource = importNode.source.value;
-  const idPrefix = importSource.replace(/[^\w_\d]/g, '_');
+  const idPrefix = path.join(filename, '..', importSource).replace(/[^\w_\d]/g, '_');
 
   const result: ImportInfo = {
     id: idPrefix,

tests/playwright-test/playwright.ct-build.spec.ts

@@ -16,6 +16,7 @@
 
 import { test, expect, playwrightCtConfigText } from './playwright-test-fixtures';
 import fs from 'fs';
+import path from 'path';
 
 test.describe.configure({ mode: 'parallel' });
 
@@ -121,6 +122,28 @@ test('should extract component list', async ({ runInlineTest }, testInfo) => {
         await expect(component).toHaveText('Clashing name 2');
       });
     `,
+    'src/relative-import-different-folders/one/index.tsx': `
+      export default () => <button>Button</button>;
+    `,
+    'src/relative-import-different-folders/one/one.spec.tsx': `
+      import { test, expect } from '@playwright/experimental-ct-react';
+      import Button from '.';
+      test('pass', async ({ mount }) => {
+        const component = await mount(<Button></Button>);
+        await expect(component).toHaveText('Button');
+      });
+    `,
+    'src/relative-import-different-folders/two/index.tsx': `
+      export default () => <button>Button</button>;
+    `,
+    'src/relative-import-different-folders/two/two.spec.tsx': `
+      import { test, expect } from '@playwright/experimental-ct-react';
+      import Button from '.';
+      test('pass', async ({ mount }) => {
+        const component = await mount(<Button></Button>);
+        await expect(component).toHaveText('Button');
+      });
+    `,
   }, { workers: 1 });
   expect(result.exitCode).toBe(0);
 
@@ -158,6 +181,14 @@ test('should extract component list', async ({ runInlineTest }, testInfo) => {
     id: expect.stringContaining('defaultExport'),
     importSource: expect.stringContaining('./defaultExport'),
     filename: expect.stringContaining('default-import.spec.tsx'),
+  }, {
+    id: expect.stringContaining('_one'),
+    importSource: expect.stringContaining('.'),
+    filename: expect.stringContaining(`one${path.sep}one.spec.tsx`),
+  }, {
+    id: expect.stringContaining('_two'),
+    importSource: expect.stringContaining('.'),
+    filename: expect.stringContaining(`two${path.sep}two.spec.tsx`),
   }]);
 
   for (const [, value] of Object.entries(metainfo.deps))
@@ -184,6 +215,14 @@ test('should extract component list', async ({ runInlineTest }, testInfo) => {
       expect.stringContaining('jsx-runtime.js'),
       expect.stringContaining('button.tsx'),
     ]],
+    [expect.stringContaining(`one${path.sep}index.tsx`), [
+      expect.stringContaining('jsx-runtime.js'),
+      expect.stringContaining(`one${path.sep}index.tsx`),
+    ]],
+    [expect.stringContaining(`two${path.sep}index.tsx`), [
+      expect.stringContaining('jsx-runtime.js'),
+      expect.stringContaining(`two${path.sep}index.tsx`),
+    ]],
   ]);
 });