Skip to content

Commit 4dbd118

Browse files
omursahinomursahin
committed
updates
1 parent 6328cef commit 4dbd118

13 files changed

Lines changed: 161 additions & 82 deletions

‎web-report/src/assets/info.json‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,20 @@
11
{
2-
"number_of_endpoints": "Number of endpoints (ver:path) in the API.",
2+
"number_of_endpoints": "Number of endpoints (verb:path) in the API.",
33
"number_of_http_calls": "Total number of HTTP calls in the generated test suites.",
4-
"number_of_fault_codes": "Code number identifiers for detected fault types",
4+
"code_number_identifiers": "Code number identifiers for detected fault types",
5+
"identifier_name": "Identifier name for the fault type.",
6+
"number_of_faults_per_code": "Number of faults detected for each code.",
7+
"generated_test_files": "Number of generated test files.",
8+
"generated_test_cases": "Number of generated test cases.",
9+
"total_faults": "Total number of faults detected in the API.",
10+
"distinct_fault_types": "Total number of distinct fault types detected in the API.",
11+
"creation_date": "Date when the report was generated.",
12+
"tool_name_version": "Name and version of the tool that generated the report.",
13+
"schema_version": "Version of the schema used for the report.",
14+
"status_2xx": "2xx status codes",
15+
"status_3xx": "3xx status codes",
16+
"status_4xx": "4xx status codes",
17+
"status_5xx": "5xx status codes",
518
"fault_codes": [
619
{
720
"short_definition": "HTTP_STATUS_500",

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

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,14 @@ export const Dashboard: React.FC<IDashboard> = ({data, test_files}) => {
4545
setActiveTab(updatedTabs[0].value)
4646
}
4747
}
48+
49+
const numberOfTestCaseOfFiles = data.test_file_paths.map((test_file) => {
50+
return {
51+
"file_name": test_file,
52+
"number_of_test_cases": data.test_cases.filter((test_case) => test_case.file_path === test_file).length
53+
}
54+
});
55+
4856
return (
4957
<div className="border border-black p-4 w-[80%] mx-auto bg-white">
5058
<Header date={data.creation_time}
@@ -101,7 +109,7 @@ export const Dashboard: React.FC<IDashboard> = ({data, test_files}) => {
101109
<TabsContent value="overview" className="mt-0">
102110
<Overview rest={data.problem_details.rest}
103111
test_cases={data.test_cases}
104-
test_file_paths={data.test_file_paths}
112+
test_files={numberOfTestCaseOfFiles}
105113
faults={data.faults}/>
106114
</TabsContent>
107115

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

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -25,11 +25,6 @@ export const EndpointAccordion: React.FC<IEndpointAccordionProps> = ({
2525
addTestTab
2626
}) => {
2727

28-
const [selectedCode, setSelectedCode] = useState<number | string>(0);
29-
const [isFault, setIsFault] = useState(false);
30-
31-
const selectedTestCases = status_codes.find((code) => code.code === selectedCode)?.test_cases || [];
32-
const selectedFaultTestCases = faults.find((code) => code.code === selectedCode)?.test_cases || [];
3328

3429
const sortedStatusCodes = status_codes.sort((a, b) =>
3530
{
@@ -42,6 +37,12 @@ export const EndpointAccordion: React.FC<IEndpointAccordionProps> = ({
4237
}
4338
);
4439

40+
const [selectedCode, setSelectedCode] = useState<number | string>(sortedStatusCodes[0]?.code || 0);
41+
const [isFault, setIsFault] = useState(false);
42+
43+
const selectedTestCases = status_codes.find((code) => code.code === selectedCode)?.test_cases || [];
44+
const selectedFaultTestCases = faults.find((code) => code.code === selectedCode)?.test_cases || [];
45+
4546
const sortedFaults = faults.sort((a, b) => {
4647
const codeA = Number(a.code);
4748
const codeB = Number(b.code);
@@ -50,6 +51,12 @@ export const EndpointAccordion: React.FC<IEndpointAccordionProps> = ({
5051
}
5152
return codeA - codeB;
5253
});
54+
const getSelectedStyle = (code: number | string, fault: boolean) => {
55+
56+
const isSelected = selectedCode === code && isFault === fault;
57+
return isSelected ? "ring-2 ring-offset-2 ring-offset-white ring-blue-400 shadow-md" : "";
58+
59+
}
5360

5461
const faultColors = ["bg-red-300", "bg-red-500", "bg-red-700"];
5562
return (
@@ -79,7 +86,7 @@ export const EndpointAccordion: React.FC<IEndpointAccordionProps> = ({
7986
setSelectedCode(code.code);
8087
setIsFault(false);
8188
}}
82-
className={`${getColor(code.code, true, false)} hover:bg-green-600 cursor-pointer text-white px-4 py-2 text-base font-bold border-2 border-black shadow-[2px_2px_0px_0px_rgba(0,0,0,1)]`}>
89+
className={`${getColor(code.code, true, false)} ${getSelectedStyle(code.code, false)} hover:bg-green-600 cursor-pointer text-white px-4 py-2 text-base font-bold border-2 border-black shadow-[2px_2px_0px_0px_rgba(0,0,0,1)]`}>
8390
{code.code}
8491
</Badge>
8592
))
@@ -100,7 +107,7 @@ export const EndpointAccordion: React.FC<IEndpointAccordionProps> = ({
100107
setSelectedCode(fault.code)
101108
setIsFault(true);
102109
}}
103-
className={`${faultColors[index % faultColors.length]} hover:bg-red-400 cursor-pointer text-white px-4 py-2 text-base font-bold border-2 border-black shadow-[2px_2px_0px_0px_rgba(0,0,0,1)]`}>
110+
className={`${faultColors[index % faultColors.length]} ${getSelectedStyle(fault.code, true)} hover:bg-red-400 cursor-pointer text-white px-4 py-2 text-base font-bold border-2 border-black shadow-[2px_2px_0px_0px_rgba(0,0,0,1)]`}>
104111
{fault.code}
105112
</Badge>
106113
))
@@ -111,6 +118,7 @@ export const EndpointAccordion: React.FC<IEndpointAccordionProps> = ({
111118
}
112119
</div>
113120
</div>
121+
<div className="text-xs text-gray-500 mt-1">Click to show test cases.</div>
114122

115123
{
116124
(selectedTestCases.length > 0 || selectedFaultTestCases.length > 0) &&

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

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@ import {ShieldAlert} from "lucide-react";
33
import React, {useState} from "react";
44
import {Faults} from "@/types/GeneratedTypes.tsx";
55
import {getFaultCounts} from "@/utils.tsx";
6-
import {Tooltip, TooltipContent, TooltipTrigger} from "@/components/ui/tooltip.tsx";
76
import info from "@/assets/info.json";
87
import {StatusCodeModal} from "@/components/StatusCodeModal.tsx";
8+
import {ReportTooltip} from "@/components/ui/report-tooltip.tsx";
99

1010
export const FaultsComponent: React.FC<Faults> = ({total_number, found_faults}) => {
1111
const faultCounts = getFaultCounts(found_faults);
@@ -29,28 +29,31 @@ export const FaultsComponent: React.FC<Faults> = ({total_number, found_faults})
2929
<ShieldAlert className="w-6 h-6 text-gray-500" />
3030
<div className="flex-1">
3131
<div className="flex justify-between">
32-
<span className="text-lg font-bold">Total Faults</span>
32+
<ReportTooltip tooltipText={info.total_faults}>
33+
<span className="text-lg font-bold">Total Faults:</span>
34+
</ReportTooltip>
3335
<span className="text-lg font-bold" data-testid="faults-component-total-faults">{total_number}</span>
3436
</div>
3537
<div className="flex justify-between">
36-
<span className="text-lg font-bold">Distinct Fault Types:</span>
38+
<ReportTooltip tooltipText={info.distinct_fault_types}>
39+
<span className="text-lg font-bold">Distinct Fault Types:</span>
40+
</ReportTooltip>
3741
<span className="text-lg font-bold" data-testid="faults-component-fault-counts">{faultCounts.size}</span>
3842
</div>
3943
</div>
4044
</div>
4145

4246
<div className="mt-4">
4347
<div className="flex justify-between font-bold border-b border-black pb-2">
44-
<Tooltip>
45-
<TooltipTrigger asChild>
46-
<span>Codes</span>
47-
</TooltipTrigger>
48-
<TooltipContent>
49-
<p>{info.number_of_fault_codes}</p>
50-
</TooltipContent>
51-
</Tooltip>
52-
<span>Name</span>
53-
<span>#</span>
48+
<ReportTooltip tooltipText={info.code_number_identifiers}>
49+
<span>Codes</span>
50+
</ReportTooltip>
51+
<ReportTooltip tooltipText={info.identifier_name}>
52+
<span>Name</span>
53+
</ReportTooltip>
54+
<ReportTooltip tooltipText={info.number_of_faults_per_code}>
55+
<span>#</span>
56+
</ReportTooltip>
5457
</div>
5558
<div className="border-2 border-black mt-2 p-2">
5659
{

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

Lines changed: 26 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,34 +2,53 @@ import {Card} from "@/components/ui/card.tsx";
22
import {Target} from "lucide-react";
33
import type React from "react";
44
import {getFileColor} from "@/utils.tsx";
5+
import info from "@/assets/info.json";
6+
import {ReportTooltip} from "@/components/ui/report-tooltip.tsx";
57

68
interface IGeneratedTests {
79
total_tests: number
8-
test_files: Array<string>
10+
test_files: Array<{
11+
file_name: string,
12+
number_of_test_cases: number
13+
}>
14+
total_http_calls?: number
915
}
1016

11-
export const GeneratedTests: React.FC<IGeneratedTests> = ({total_tests, test_files}) => (
17+
export const GeneratedTests: React.FC<IGeneratedTests> = ({total_tests, test_files, total_http_calls}) => (
1218
<Card className="border-2 border-black p-6 rounded-none">
1319
<div className="flex items-start gap-4">
1420
<Target className="w-6 h-6 text-gray-500"/>
1521
<div className="flex-1">
1622
<div className="flex justify-between">
17-
<span className="text-lg font-bold">Generated Tests Cases:</span>
23+
<ReportTooltip tooltipText={info.generated_test_files}>
24+
<span className="text-lg font-bold">Generated Test Files:</span>
25+
</ReportTooltip>
26+
<span className="text-lg font-bold" data-testid="generated-tests-total-test-files">{test_files.length}</span>
27+
</div>
28+
<div className="flex justify-between">
29+
<ReportTooltip tooltipText={info.generated_test_cases}>
30+
<span className="text-lg font-bold">Generated Tests Cases:</span>
31+
</ReportTooltip>
1832
<span className="text-lg font-bold" data-testid="generated-tests-total-tests">{total_tests}</span>
1933
</div>
2034
<div className="flex justify-between">
21-
<span className="text-lg font-bold">Generated Test Files:</span>
22-
<span className="text-lg font-bold" data-testid="generated-tests-total-test-files">{test_files.length}</span>
35+
<ReportTooltip tooltipText={info.number_of_http_calls}>
36+
<span className="text-lg font-bold"># HTTP Calls:</span>
37+
</ReportTooltip>
38+
<span className="text-lg font-bold" data-testid="rest-report-http-calls">{total_http_calls}</span>
2339
</div>
40+
2441
<div className="mt-4 pt-4 border-t border-gray-200">
2542
<div className="text-sm font-medium text-gray-700 mb-2">Test Files</div>
2643
<div className="space-y-1">
2744
{
2845
test_files.length > 0 ? (
2946
test_files.map((file, index) => (
3047
<div className="flex items-center gap-2 text-sm text-gray-600" key={index}>
31-
<div className={`w-2 h-2 ${getFileColor(index, file)} rounded-full`}></div>
32-
<span>{file}</span>
48+
<div className={`w-2 h-2 ${getFileColor(index, file.file_name)} rounded-full`}></div>
49+
<ReportTooltip tooltipText={`${file.number_of_test_cases} test cases are located in ${file.file_name}`}>
50+
<span>{file.file_name} (# {file.number_of_test_cases})</span>
51+
</ReportTooltip>
3352
</div>
3453
))
3554
) : (

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

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
import type React from "react";
2+
import {ReportTooltip} from "@/components/ui/report-tooltip.tsx";
3+
import info from "@/assets/info.json";
24

35
interface IHeaderProps {
46
date: string;
@@ -8,8 +10,15 @@ interface IHeaderProps {
810

911
export const Header: React.FC<IHeaderProps> = ({date, tool_name_version, schema_version}) => (
1012
<div className="flex justify-between border-b border-black pb-2 mb-4">
11-
<div className="font-bold" data-testid="header-creation-date">Creation Date: {new Date(date).toUTCString()}</div>
12-
<div className="font-bold text-center" data-testid="header-tool-name-version">Tool: {tool_name_version}</div>
13-
<div className="font-bold text-right" data-testid="header-schema-version">Schema Version: {schema_version}</div>
13+
<ReportTooltip tooltipText={info.creation_date}>
14+
<div className="font-bold" data-testid="header-creation-date">Creation Date: {new Date(date).toUTCString()}</div>
15+
</ReportTooltip>
16+
<ReportTooltip tooltipText={info.tool_name_version}>
17+
<div className="font-bold text-center" data-testid="header-tool-name-version">Tool: {tool_name_version}</div>
18+
</ReportTooltip>
19+
<ReportTooltip tooltipText={info.schema_version}>
20+
<div className="font-bold text-right" data-testid="header-schema-version">Schema Version: {schema_version}</div>
21+
</ReportTooltip>
22+
1423
</div>
1524
)

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

Lines changed: 17 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,10 @@ import type React from "react";
33
import {CoveragePieChart} from "@/components/CoveragePieChart.tsx";
44
import {RESTReport} from "@/types/GeneratedTypes.tsx";
55
import {calculateAllStatusCounts} from "@/utils.tsx";
6-
import {Tooltip, TooltipContent, TooltipTrigger} from "@/components/ui/tooltip.tsx";
76
import info from "@/assets/info.json";
7+
import {ReportTooltip} from "@/components/ui/report-tooltip.tsx";
88

9-
export const RestReports: React.FC<RESTReport> = ({total_http_calls, covered_http_status, endpoint_ids}) => {
9+
export const RestReports: React.FC<RESTReport> = ({covered_http_status, endpoint_ids}) => {
1010
const total = endpoint_ids.length;
1111
const allStatusCounts = calculateAllStatusCounts(covered_http_status, endpoint_ids);
1212

@@ -18,38 +18,28 @@ export const RestReports: React.FC<RESTReport> = ({total_http_calls, covered_htt
1818
<div className="border-t border-black my-2"></div>
1919

2020
<div className="grid grid-cols-2 gap-4 mb-6">
21-
<CoveragePieChart covered={allStatusCounts["2XX"]} total={total} color={"#7fd561"} label={"2XX"}/>
22-
<CoveragePieChart covered={allStatusCounts["3XX"]} total={total} color={"#b8c1e6"} label={"3XX"}/>
23-
<CoveragePieChart covered={allStatusCounts["4XX"]} total={total} color={"#FFAB5B"} label={"4XX"}/>
24-
<CoveragePieChart covered={allStatusCounts["5XX"]} total={total} color={"#930d3b"} label={"5XX"}/>
21+
<ReportTooltip tooltipText={info.status_2xx}>
22+
<CoveragePieChart covered={allStatusCounts["2XX"]} total={total} color={"#7fd561"} label={"2XX"}/>
23+
</ReportTooltip>
24+
<ReportTooltip tooltipText={info.status_3xx}>
25+
<CoveragePieChart covered={allStatusCounts["3XX"]} total={total} color={"#b8c1e6"} label={"3XX"}/>
26+
</ReportTooltip>
27+
<ReportTooltip tooltipText={info.status_4xx}>
28+
<CoveragePieChart covered={allStatusCounts["4XX"]} total={total} color={"#FFAB5B"} label={"4XX"}/>
29+
</ReportTooltip>
30+
<ReportTooltip tooltipText={info.status_5xx}>
31+
<CoveragePieChart covered={allStatusCounts["5XX"]} total={total} color={"#930d3b"} label={"5XX"}/>
32+
</ReportTooltip>
2533
</div>
2634

2735
<div className="mt-6">
2836

2937
<div className="flex justify-between font-bold">
30-
<Tooltip>
31-
<TooltipTrigger asChild>
32-
<span># Endpoints:</span>
33-
</TooltipTrigger>
34-
<TooltipContent>
35-
<p>{info.number_of_endpoints}</p>
36-
</TooltipContent>
37-
</Tooltip>
38+
<ReportTooltip tooltipText={info.number_of_endpoints}>
39+
<span># Endpoints:</span>
40+
</ReportTooltip>
3841
<span data-testid="rest-report-endpoint">{endpoint_ids.length}</span>
3942
</div>
40-
41-
<div className="border-t border-black my-2"></div>
42-
<div className="flex justify-between font-bold">
43-
<Tooltip>
44-
<TooltipTrigger asChild>
45-
<span># HTTP Calls:</span>
46-
</TooltipTrigger>
47-
<TooltipContent>
48-
<p>{info.number_of_http_calls}</p>
49-
</TooltipContent>
50-
</Tooltip>
51-
<span data-testid="rest-report-http-calls">{total_http_calls}</span>
52-
</div>
5343
<div className="border-t border-black my-2"></div>
5444
</div>
5545
</Card>

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

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { useState } from "react"
2+
import {Badge} from "@/components/ui/badge.tsx";
23

34
type FilterState = "inactive" | "active" | "removed"
45

@@ -25,7 +26,7 @@ export function StatusCodeFilterButton({ code, initialState = "inactive", onChan
2526
}
2627

2728
const getStyles = () => {
28-
const baseStyles = `${getBackgroundColor()} text-white font-mono rounded-full px-3 py-1 transition-all duration-200`
29+
const baseStyles = `${getBackgroundColor()} cursor-pointer text-white font-mono rounded-full px-5 py-1 transition-all duration-200`
2930

3031
switch (state) {
3132
case "active":
@@ -47,8 +48,8 @@ export function StatusCodeFilterButton({ code, initialState = "inactive", onChan
4748
}
4849

4950
return (
50-
<button className={getStyles()} onClick={toggleState}>
51-
{isFault ? `${-1 * code}`: code}
52-
</button>
51+
<Badge className={getStyles()} onClick={toggleState}>
52+
{isFault ? `F${-1 * code}`: `H${code}`}
53+
</Badge>
5354
)
5455
}

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,11 @@ export function StatusCodeFilters({data, onFiltersChange}: StatusCodeFiltersProp
6262
onChange={handleFilterChange}
6363
/>
6464
))}
65+
</div>
66+
</div>
67+
<div className="flex items-center mb-2">
68+
<h3 className="text-sm font-medium text-gray-700 mr-3">Filter by Fault Code:</h3>
69+
<div className="flex flex-wrap gap-2">
6570
{allFaultCodes.map((code) => (
6671
<StatusCodeFilterButton
6772
key={-code}

0 commit comments

Comments
 (0)