From f672d6dcf13a7f23eddf3ec61a759b76ae698ab8 Mon Sep 17 00:00:00 2001
From: Simon Knott <info@simonknott.de>
Date: Wed, 17 Jul 2024 15:43:16 +0200
Subject: [PATCH] add test about component tests

---
 tests/playwright-test/only-changed.spec.ts | 60 +++++++++++++++++++++-
 1 file changed, 59 insertions(+), 1 deletion(-)

diff --git a/tests/playwright-test/only-changed.spec.ts b/tests/playwright-test/only-changed.spec.ts
index d034ffc9d6..7201d4f947 100644
--- a/tests/playwright-test/only-changed.spec.ts
+++ b/tests/playwright-test/only-changed.spec.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { test as baseTest, expect } from './playwright-test-fixtures';
+import { test as baseTest, expect, playwrightCtConfigText } from './playwright-test-fixtures';
 import { execSync } from 'node:child_process';
 
 const test = baseTest.extend({
@@ -182,3 +182,61 @@ test('should throw nice error message if git doesnt work', async ({ setupReposit
   expect(result.exitCode).toBe(1);
   expect(result.output).toContain('only works with Git repositories');
 });
+
+test('should suppport component tests', async ({ runInlineTest, setupRepository, writeFiles }) => {
+  const git = await setupRepository();
+
+  await writeFiles({
+    'playwright.config.ts': playwrightCtConfigText,
+    'playwright/index.html': `<script type="module" src="./index.ts"></script>`,
+    'playwright/index.ts': `
+    `,
+    'src/button.tsx': `
+      export const Button = () => <button>Button</button>;
+    `,
+    'src/button.test.tsx': `
+      import { test, expect } from '@playwright/experimental-ct-react';
+      import { Button } from './button';
+
+      test('pass', async ({ mount }) => {
+        const component = await mount(<Button></Button>);
+        await expect(component).toHaveText('Button');
+      });
+    `,
+    'src/button2.test.tsx': `
+      import { test, expect } from '@playwright/experimental-ct-react';
+      import { Button } from './button';
+
+      test('pass', async ({ mount }) => {
+        const component = await mount(<Button></Button>);
+        await expect(component).toHaveText('Button');
+      });
+    `,
+  });
+
+  git('add .');
+  git('commit -m "init components"');
+
+  const result = await runInlineTest({}, { 'workers': 1, 'only-changed': true });
+
+  expect(result.exitCode).toBe(1);
+  expect(result.passed).toBe(0);
+  expect(result.output).toContain('No tests found');
+
+  const result2 = await runInlineTest({
+    'src/button2.test.tsx': `
+      import { test, expect } from '@playwright/experimental-ct-react';
+      import { Button } from './button';
+
+      test('pass', async ({ mount }) => {
+        const component = await mount(<Button></Button>);
+        await expect(component).toHaveText('Different Button');
+      });
+    `
+  }, { 'workers': 1, 'only-changed': true });
+
+  expect(result2.exitCode).toBe(1);
+  expect(result2.failed).toBe(1);
+  expect(result2.output).toContain('button2.test.tsx');
+  expect(result2.output).not.toContain('button.test.tsx');
+});