From b7b7c2d7e783bad9f385c3ca9306607598c17533 Mon Sep 17 00:00:00 2001
From: Simon Knott <info@simonknott.de>
Date: Thu, 6 Feb 2025 17:05:12 +0100
Subject: [PATCH] add button

---
 examples/todomvc/playwright.config.ts         |  2 ++
 examples/todomvc/tests/integration.spec.ts    |  1 +
 packages/html-reporter/src/testErrorView.tsx  | 28 ++++++++++++-------
 packages/html-reporter/src/testResultView.tsx |  2 +-
 4 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/examples/todomvc/playwright.config.ts b/examples/todomvc/playwright.config.ts
index 3d76370d4d..b379d3f11f 100644
--- a/examples/todomvc/playwright.config.ts
+++ b/examples/todomvc/playwright.config.ts
@@ -7,6 +7,8 @@ import { defineConfig, devices } from '@playwright/test';
  */
 export default defineConfig({
 
+  populateGitInfo: true,
+
   testDir: './tests',
 
   /* Maximum time one test can run for. */
diff --git a/examples/todomvc/tests/integration.spec.ts b/examples/todomvc/tests/integration.spec.ts
index 007896bb2c..e171b7a900 100644
--- a/examples/todomvc/tests/integration.spec.ts
+++ b/examples/todomvc/tests/integration.spec.ts
@@ -36,6 +36,7 @@ test.describe('New Todo', () => {
     await expect(page.getByTestId('todo-title')).toHaveText([
       TODO_ITEMS[0],
       TODO_ITEMS[1],
+      'faux'
     ]);
 
     await checkNumberOfTodosInLocalStorage(page, 2);
diff --git a/packages/html-reporter/src/testErrorView.tsx b/packages/html-reporter/src/testErrorView.tsx
index 97db1b5c42..18d5bee736 100644
--- a/packages/html-reporter/src/testErrorView.tsx
+++ b/packages/html-reporter/src/testErrorView.tsx
@@ -24,11 +24,12 @@ import { GitCommitInfoContext } from './reportView';
 export const TestErrorView: React.FC<{
   error: string;
   testId?: string;
-}> = ({ error, testId }) => {
+  hidePrompt?: boolean;
+}> = ({ error, testId, hidePrompt }) => {
   const html = React.useMemo(() => ansiErrorToHtml(error), [error]);
   return (
     <div className='test-error-view test-error-text' data-testid={testId}>
-      <PromptButton error={error} />
+      {!hidePrompt && <PromptButton error={error} />}
       <div dangerouslySetInnerHTML={{ __html: html || '' }}></div>
     </div>
   );
@@ -42,6 +43,7 @@ export function stripAnsiEscapes(str: string): string {
 const PromptButton: React.FC<{
   error: string;
 }> = ({ error }) => {
+  const [copied, setCopied] = React.useState(false);
   const gitCommitInfo = React.useContext(GitCommitInfoContext);
   if (!gitCommitInfo)
     return undefined;
@@ -51,14 +53,20 @@ const PromptButton: React.FC<{
     return undefined;
 
   return (
-    <button onClick={() => {
-      navigator.clipboard.writeText([
-        'You are a helpful assistant. Help me understand the error cause. Here is the error:',
-        stripAnsiEscapes(error),
-        'And this is the code diff:',
-        diff
-      ].join('\n'));
-    }}>Copy AI Prompt</button>
+    <button
+      style={{ width: 200, padding: '10px', marginBottom: '10px', borderRadius: '5px', border: '1px solid #ccc', backgroundColor: copied ? '#4caf50' : '#f0f0f0', color: copied ? '#fff' : '#000', cursor: 'pointer' }}
+      onClick={async () => {
+        await navigator.clipboard.writeText([
+          'You are a helpful assistant. Help me understand the error cause. Here is the error:',
+          stripAnsiEscapes(error),
+          'And this is the code diff:',
+          diff
+        ].join('\n\n'));
+        setCopied(true);
+        setTimeout(() => setCopied(false), 1000);
+      }}>
+      {copied ? 'Copied!' : 'Copy prompt to fix with AI'}
+    </button>
   );
 };
 
diff --git a/packages/html-reporter/src/testResultView.tsx b/packages/html-reporter/src/testResultView.tsx
index 681f4b507a..502edbd23e 100644
--- a/packages/html-reporter/src/testResultView.tsx
+++ b/packages/html-reporter/src/testResultView.tsx
@@ -182,7 +182,7 @@ const StepTreeItem: React.FC<{
     {step.count > 1 && <> ✕ <span className='test-result-counter'>{step.count}</span></>}
     {step.location && <span className='test-result-path'>— {step.location.file}:{step.location.line}</span>}
   </span>} loadChildren={step.steps.length || step.snippet ? () => {
-    const snippet = step.snippet ? [<TestErrorView testId='test-snippet' key='line' error={step.snippet}/>] : [];
+    const snippet = step.snippet ? [<TestErrorView testId='test-snippet' key='line' error={step.snippet} hidePrompt />] : [];
     const steps = step.steps.map((s, i) => <StepTreeItem key={i} step={s} depth={depth + 1} result={result} test={test} />);
     return snippet.concat(steps);
   } : undefined} depth={depth}/>;