Skip to content

Commit ac3874b

Browse files
omursahinomursahin
committed
update
1 parent 555e84d commit ac3874b

1 file changed

Lines changed: 75 additions & 32 deletions

File tree

‎web-report/src/components/GeneratedTests.tsx‎

Lines changed: 75 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import {Card} from "@/components/ui/card.tsx";
2-
import {Target, Clock} from "lucide-react";
2+
import {Target, Clock, FileText, TestTube, Network, CheckCircle, FolderOpen} from "lucide-react";
33
import type React from "react";
44
import {getFileColor, getText} from "@/lib/utils";
55
import info from "@/assets/info.json";
@@ -35,29 +35,62 @@ export const GeneratedTests: React.FC<IGeneratedTests> = ({totalTests, testFiles
3535
<div className="flex items-start gap-4">
3636
<Target className="w-6 h-6 text-gray-500"/>
3737
<div className="flex-1">
38-
<div className="flex justify-between">
38+
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
3939
<ReportTooltip tooltipText={info.generatedTestFiles}>
40-
<span className="text-lg font-bold"># Generated Test Files:</span>
40+
<div className="bg-gradient-to-br from-green-50 to-emerald-50 border-2 border-green-300 rounded-lg p-4 hover:shadow-md transition-shadow">
41+
<div className="flex items-center gap-3">
42+
<div className="bg-green-500 rounded-full p-2">
43+
<FileText className="w-5 h-5 text-white"/>
44+
</div>
45+
<div className="flex-1">
46+
<div className="text-sm font-medium text-gray-600">Generated Test Files</div>
47+
<div className="text-2xl font-bold text-green-700" data-testid="generated-tests-total-test-files">{testFiles.length}</div>
48+
</div>
49+
</div>
50+
</div>
4151
</ReportTooltip>
42-
<span className="text-lg font-bold" data-testid="generated-tests-total-test-files">{testFiles.length}</span>
43-
</div>
44-
<div className="flex justify-between">
52+
4553
<ReportTooltip tooltipText={info.generatedTestCases}>
46-
<span className="text-lg font-bold"># Generated Tests Cases:</span>
54+
<div className="bg-gradient-to-br from-orange-50 to-amber-50 border-2 border-orange-300 rounded-lg p-4 hover:shadow-md transition-shadow">
55+
<div className="flex items-center gap-3">
56+
<div className="bg-orange-500 rounded-full p-2">
57+
<TestTube className="w-5 h-5 text-white"/>
58+
</div>
59+
<div className="flex-1">
60+
<div className="text-sm font-medium text-gray-600">Generated Test Cases</div>
61+
<div className="text-2xl font-bold text-orange-700" data-testid="generated-tests-total-tests">{totalTests}</div>
62+
</div>
63+
</div>
64+
</div>
4765
</ReportTooltip>
48-
<span className="text-lg font-bold" data-testid="generated-tests-total-tests">{totalTests}</span>
49-
</div>
50-
<div className="flex justify-between">
66+
5167
<ReportTooltip tooltipText={info.outputHttpCalls}>
52-
<span className="text-lg font-bold"># Output HTTP Calls:</span>
68+
<div className="bg-gradient-to-br from-cyan-50 to-sky-50 border-2 border-cyan-300 rounded-lg p-4 hover:shadow-md transition-shadow">
69+
<div className="flex items-center gap-3">
70+
<div className="bg-cyan-500 rounded-full p-2">
71+
<Network className="w-5 h-5 text-white"/>
72+
</div>
73+
<div className="flex-1">
74+
<div className="text-sm font-medium text-gray-600">Output HTTP Calls</div>
75+
<div className="text-2xl font-bold text-cyan-700" data-testid="rest-report-output-http-calls">{outputHttpCalls}</div>
76+
</div>
77+
</div>
78+
</div>
5379
</ReportTooltip>
54-
<span className="text-lg font-bold" data-testid="rest-report-output-http-calls">{outputHttpCalls}</span>
55-
</div>
56-
<div className="flex justify-between">
80+
5781
<ReportTooltip tooltipText={info.evaluatedHttpCalls}>
58-
<span className="text-lg font-bold"># Evaluated HTTP Calls:</span>
82+
<div className="bg-gradient-to-br from-pink-50 to-rose-50 border-2 border-pink-300 rounded-lg p-4 hover:shadow-md transition-shadow">
83+
<div className="flex items-center gap-3">
84+
<div className="bg-pink-500 rounded-full p-2">
85+
<CheckCircle className="w-5 h-5 text-white"/>
86+
</div>
87+
<div className="flex-1">
88+
<div className="text-sm font-medium text-gray-600">Evaluated HTTP Calls</div>
89+
<div className="text-2xl font-bold text-pink-700" data-testid="rest-report-evaluated-http-calls">{evaluatedHttpCalls}</div>
90+
</div>
91+
</div>
92+
</div>
5993
</ReportTooltip>
60-
<span className="text-lg font-bold" data-testid="rest-report-evaluated-http-calls">{evaluatedHttpCalls}</span>
6194
</div>
6295
{timeBreakdown && (
6396
<div className="mt-4 p-4 bg-gradient-to-r from-blue-50 to-indigo-50 border-2 border-blue-300 rounded-lg">
@@ -88,27 +121,37 @@ export const GeneratedTests: React.FC<IGeneratedTests> = ({totalTests, testFiles
88121
</div>
89122
)}
90123

91-
<div className="mt-4 pt-4 border-t border-gray-200">
92-
<div className="text-sm font-medium text-gray-700 mb-2">Test Files</div>
93-
<div className="space-y-1">
94-
{
95-
testFiles.length > 0 ? (
96-
testFiles.map((file, index) => (
97-
<div className="flex items-center gap-2 text-sm text-gray-600" key={index}>
98-
<div className={`w-2 h-2 ${getFileColor(index, file.fileName)} rounded-full`}></div>
99-
<ReportTooltip tooltipText={getText(info.testFilesLocated,
124+
<div className="mt-4">
125+
<div className="bg-gradient-to-r from-slate-50 to-gray-50 border-2 border-slate-300 rounded-lg p-4">
126+
<div className="flex items-center gap-2 mb-3">
127+
<FolderOpen className="w-5 h-5 text-slate-600"/>
128+
<span className="text-base font-bold text-slate-900">Test Files</span>
129+
</div>
130+
<div className="space-y-2">
131+
{
132+
testFiles.length > 0 ? (
133+
testFiles.map((file, index) => (
134+
<ReportTooltip key={index} tooltipText={getText(info.testFilesLocated,
100135
{
101136
fileName: file.fileName,
102137
numberOfTestCases: file.numberOfTestCases
103138
})}>
104-
<span>{file.fileName} (# {file.numberOfTestCases})</span>
139+
<div className="flex items-center gap-3 bg-white rounded-md p-3 border border-slate-200 hover:border-slate-400 hover:shadow-sm transition-all">
140+
<div className={`w-3 h-3 ${getFileColor(index, file.fileName)} rounded-full flex-shrink-0`}></div>
141+
<div className="flex-1 min-w-0">
142+
<span className="text-sm font-medium text-gray-700 truncate block">{file.fileName}</span>
143+
</div>
144+
<div className="flex-shrink-0 bg-slate-100 px-2 py-1 rounded-md">
145+
<span className="text-xs font-bold text-slate-700">{file.numberOfTestCases}</span>
146+
</div>
147+
</div>
105148
</ReportTooltip>
106-
</div>
107-
))
108-
) : (
109-
<div className="text-gray-500 italic">No test files generated.</div>
110-
)
111-
}
149+
))
150+
) : (
151+
<div className="text-center text-gray-500 italic py-4">No test files generated.</div>
152+
)
153+
}
154+
</div>
112155
</div>
113156
</div>
114157
</div>

0 commit comments

Comments
 (0)