Merge pull request #34 from WebFuzzing/warnings-and-examples

Warnings and examples

Author: arcuri82

web-report/src-e2e/static/report.json

@@ -4868,5 +4868,13 @@
         }
       ]
     }
+  ],
+  "warnings": [
+    {
+      "message": "No authentication info was provided. Unless you are testing an example API, you should setup some authentication info for different users. If this is the first time you are using EvoMaster, and you just want to get a feeling of how it works, then ignore this warning. However, to get better results, you will need setup authentication info, eventually. More info is currently available at https://github.com/WebFuzzing/EvoMaster/blob/master/docs/auth.md",
+      "category": "FUZZER",
+      "displayPriority": 1,
+      "additionalProperties": {}
+    }
   ]
 }

web-report/src/components/Dashboard.tsx

@@ -7,6 +7,8 @@ import {Overview} from "@/pages/Overview.tsx";
 import {Endpoints} from "@/pages/Endpoints.tsx";
 import {TestResults} from "@/pages/TestResults.tsx";
 import {Tests} from "@/pages/Tests.tsx";
+import {Warnings} from "@/pages/Warnings.tsx";
+import {Examples} from "@/pages/Examples.tsx";
 
 import {ScrollArea, ScrollBar} from "@/components/ui/scroll-area.tsx";
 import {useAppContext} from "@/AppProvider.tsx";
@@ -15,11 +17,26 @@ import {REVIEW_STATE} from "@/types/Review.ts";
 
 export interface ITestTabs {
     value: string;
+    origin: string;
 }
 
+const MAIN_TABS = new Set(["overview", "endpoints", "examples", "tests", "warnings"]);
+
 export const Dashboard: React.FC = () => {
     const {data, isDirty, reviews} = useAppContext();
 
+    const warningCount = data?.warnings?.length ?? 0;
+
+    const examplesCount = useMemo(() => {
+        const set = new Set<string>();
+        for (const tc of data?.testCases ?? []) {
+            for (const ex of tc.namedExamples ?? []) {
+                if (ex) set.add(ex);
+            }
+        }
+        return set.size;
+    }, [data]);
+
     const reviewRatio = useMemo(() => {
         if (!data) return null;
         const total = data.testCases.length;
@@ -37,9 +54,16 @@ export const Dashboard: React.FC = () => {
 
     const [testTabs, setTestTabs] = useState<Array<ITestTabs>>([]);
 
+    const [openExamples, setOpenExamples] = useState<string[]>([]);
+    const [openEndpoint, setOpenEndpoint] = useState<string>("");
+    const [openTestFiles, setOpenTestFiles] = useState<string[]>([]);
+
     const addTestTab = (testName: string, event: React.MouseEvent<HTMLElement>) => {
+        const origin = MAIN_TABS.has(activeTab)
+            ? activeTab
+            : (testTabs.find(t => t.value === activeTab)?.origin ?? "endpoints");
         if (!testTabs.find((t) => t.value === testName)) {
-            setTestTabs([{value: testName}, ...testTabs]);
+            setTestTabs([{value: testName, origin}, ...testTabs]);
         }
 
         if (!event.ctrlKey) {
@@ -48,12 +72,15 @@ export const Dashboard: React.FC = () => {
     }
 
     const handleCloseTestsTab = (testName: string) => {
+        const closing = testTabs.find(t => t.value === testName);
         const updatedTabs = testTabs.filter((t) => t.value !== testName);
         setTestTabs(updatedTabs);
+        if (activeTab !== testName) return;
         if (updatedTabs.length === 0) {
-            setActiveTab("endpoints")
+            const fallback = closing?.origin ?? "endpoints";
+            setActiveTab(MAIN_TABS.has(fallback) ? fallback : "endpoints");
         } else {
-            setActiveTab(updatedTabs[0].value)
+            setActiveTab(updatedTabs[0].value);
         }
     }
 
@@ -79,7 +106,7 @@ export const Dashboard: React.FC = () => {
                     toolNameVersion={`${data.toolName}-${data.toolVersion}`}/>
             <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
                 <div className="flex justify-center mb-2 w-full">
-                    <TabsList className={`flex gap-2 sm:gap-4 w-full max-w-[700px] h-auto p-1 bg-transparent`}>
+                    <TabsList className={`flex gap-2 sm:gap-4 w-full max-w-[1000px] h-auto p-1 bg-transparent`}>
                         <TabsTrigger
                             value="overview"
                             className="flex-1 sm:flex-none sm:min-w-[150px] py-3 text-xs sm:text-sm border border-gray-500 data-[state=active]:bg-blue-100 data-[state=active]:border-2 data-[state=active]:border-black data-[state=active]:shadow-[2px_2px_0px_0px_rgba(0,0,0,1)]"
@@ -94,6 +121,18 @@ export const Dashboard: React.FC = () => {
                         >
                             Endpoints
                         </TabsTrigger>
+                        <TabsTrigger
+                            value="examples"
+                            className="flex-1 sm:flex-none sm:min-w-[150px] py-3 text-xs sm:text-sm border border-gray-500 data-[state=active]:bg-blue-100 data-[state=active]:border-2 data-[state=active]:border-black data-[state=active]:shadow-[2px_2px_0px_0px_rgba(0,0,0,1)]"
+                            data-testid="tab-examples"
+                        >
+                            Examples
+                            {examplesCount > 0 && (
+                                <span className="ml-2 text-xs font-mono text-gray-600" data-testid="tab-examples-count">
+                                    {examplesCount}
+                                </span>
+                            )}
+                        </TabsTrigger>
                         <TabsTrigger
                             value="tests"
                             className="flex-1 sm:flex-none sm:min-w-[150px] py-3 text-xs sm:text-sm border border-gray-500 data-[state=active]:bg-blue-100 data-[state=active]:border-2 data-[state=active]:border-black data-[state=active]:shadow-[2px_2px_0px_0px_rgba(0,0,0,1)]"
@@ -107,13 +146,25 @@ export const Dashboard: React.FC = () => {
                             )}
                             {isDirty && <span className="ml-1 text-orange-600" title="Unsaved review changes">•</span>}
                         </TabsTrigger>
+                        <TabsTrigger
+                            value="warnings"
+                            className="flex-1 sm:flex-none sm:min-w-[150px] py-3 text-xs sm:text-sm border border-gray-500 data-[state=active]:bg-orange-100 data-[state=active]:border-2 data-[state=active]:border-black data-[state=active]:shadow-[2px_2px_0px_0px_rgba(0,0,0,1)]"
+                            data-testid="tab-warnings"
+                        >
+                            Warnings
+                            {warningCount > 0 && (
+                                <span className="ml-2 text-xs font-mono px-1.5 py-0.5 border border-orange-600 bg-orange-50 text-orange-700" data-testid="tab-warnings-count">
+                                    {warningCount}
+                                </span>
+                            )}
+                        </TabsTrigger>
                     </TabsList>
                 </div>
                 <div className="border-t border-black my-2"></div>
 
                 <div className="flex justify-center w-full">
                     {
-                        <TabsList className={`flex gap-2 sm:gap-4 w-full max-w-[700px] h-auto p-1 bg-transparent`}>
+                        <TabsList className={`flex gap-2 sm:gap-4 w-full max-w-[1000px] h-auto p-1 bg-transparent`}>
                             <ScrollArea className="w-[130%] whitespace-nowrap py-3">
                                 {
                                     testTabs.map((test, index) => (
@@ -148,11 +199,19 @@ export const Dashboard: React.FC = () => {
                 </TabsContent>
 
                 <TabsContent value="endpoints">
-                    <Endpoints addTestTab={addTestTab}/>
+                    <Endpoints addTestTab={addTestTab} openEndpoint={openEndpoint} setOpenEndpoint={setOpenEndpoint}/>
+                </TabsContent>
+
+                <TabsContent value="examples">
+                    <Examples addTestTab={addTestTab} openExamples={openExamples} setOpenExamples={setOpenExamples}/>
                 </TabsContent>
 
                 <TabsContent value="tests">
-                    <Tests/>
+                    <Tests openTestFiles={openTestFiles} setOpenTestFiles={setOpenTestFiles}/>
+                </TabsContent>
+
+                <TabsContent value="warnings">
+                    <Warnings/>
                 </TabsContent>
 
                 {

web-report/src/pages/Endpoints.tsx

@@ -6,9 +6,11 @@ import {useAppContext} from "@/AppProvider.tsx";
 
 interface IProps {
     addTestTab: (value: string, event: React.MouseEvent<HTMLElement>) => void;
+    openEndpoint: string;
+    setOpenEndpoint: (value: string) => void;
 }
 
-export const Endpoints: React.FC<IProps> = ({addTestTab}) => {
+export const Endpoints: React.FC<IProps> = ({addTestTab, openEndpoint, setOpenEndpoint}) => {
 
     const {transformedReport, filteredEndpoints, statusFilters, setStatusFilters} = useAppContext();
 
@@ -21,10 +23,10 @@ export const Endpoints: React.FC<IProps> = ({addTestTab}) => {
                     <p className="text-black-400">{filteredEndpoints.length}</p> / <p className="text-red-400">{transformedReport.length}</p>
                 </div>
             </div>
-            <Accordion type="single" collapsible className="w-full">
+            <Accordion type="single" collapsible value={openEndpoint} onValueChange={setOpenEndpoint} className="w-full">
                 {
                     filteredEndpoints.map((item, index) => (
-                        <EndpointAccordion data-testid="endpoint" key={index} value={`_${index}`}
+                        <EndpointAccordion data-testid="endpoint" key={index} value={item.endpoint}
                                            endpoint={item.endpoint}
                                            statusCodes={item.httpStatusCodes} faults={item.faults}
                                            addTestTab={addTestTab}/>

web-report/src/pages/Examples.tsx

@@ -0,0 +1,116 @@
+import React, {useMemo, useState} from "react";
+import {Accordion, AccordionContent, AccordionItem, AccordionTrigger} from "@/components/ui/accordion.tsx";
+import {useAppContext} from "@/AppProvider.tsx";
+import {ChevronRight, Code} from "lucide-react";
+
+interface IProps {
+    addTestTab: (testName: string, event: React.MouseEvent<HTMLElement>) => void;
+    openExamples: string[];
+    setOpenExamples: (value: string[]) => void;
+}
+
+interface ExampleEntry {
+    name: string;
+    cases: Array<{id: string; name: string}>;
+}
+
+export const Examples: React.FC<IProps> = ({addTestTab, openExamples, setOpenExamples}) => {
+    const {data} = useAppContext();
+    const testCases = useMemo(() => data?.testCases ?? [], [data]);
+
+    const [filter, setFilter] = useState("");
+
+    const namedExamples = useMemo<ExampleEntry[]>(() => {
+        const map = new Map<string, Array<{id: string; name: string}>>();
+        for (const tc of testCases) {
+            if (!tc.namedExamples || !tc.id) continue;
+            const tcId = tc.id;
+            const tcName = tc.name ?? tc.id;
+            for (const ex of tc.namedExamples) {
+                if (!ex) continue;
+                const arr = map.get(ex) ?? [];
+                if (!arr.some(existing => existing.id === tcId)) {
+                    arr.push({id: tcId, name: tcName});
+                }
+                map.set(ex, arr);
+            }
+        }
+        const out: ExampleEntry[] = Array.from(map.entries()).map(([name, cases]) => ({name, cases}));
+        out.sort((a, b) => a.name.localeCompare(b.name));
+        return out;
+    }, [testCases]);
+
+    const filteredExamples = useMemo(() => {
+        const q = filter.trim().toLowerCase();
+        if (!q) return namedExamples;
+        return namedExamples.filter(e => e.name.toLowerCase().includes(q));
+    }, [namedExamples, filter]);
+
+    return (
+        <div className="border-2 border-black p-3 sm:p-6 rounded-none" data-testid="examples-page">
+            <div className="flex flex-wrap items-center gap-2 mb-4">
+                <h2 className="text-lg font-bold">Named Examples</h2>
+                <span className="ml-2 font-mono text-xs px-2 py-1 border-2 border-black bg-white" data-testid="examples-count">
+                    {namedExamples.length}
+                </span>
+            </div>
+            <p className="text-sm text-gray-700 mb-4">
+                Unique named examples used across the generated test cases (sorted alphabetically).
+                Click on one to see all test cases that include it.
+            </p>
+
+            {namedExamples.length > 0 && (
+                <input
+                    type="text"
+                    placeholder="Filter by name..."
+                    value={filter}
+                    onChange={e => setFilter(e.target.value)}
+                    className="border-2 border-black px-2 py-1 mb-4 w-full sm:w-80 font-mono text-sm"
+                    data-testid="examples-filter"
+                />
+            )}
+
+            {namedExamples.length === 0 ? (
+                <div className="border-2 border-dashed border-gray-400 bg-gray-50 p-6 text-center text-sm text-gray-600 font-mono" data-testid="examples-empty">
+                    No named examples recorded.
+                </div>
+            ) : filteredExamples.length === 0 ? (
+                <div className="text-gray-500 italic text-sm">No named examples match the current filter.</div>
+            ) : (
+                <Accordion type="multiple" value={openExamples} onValueChange={setOpenExamples} className="w-full">
+                    {filteredExamples.map((ex, idx) => (
+                        <AccordionItem
+                            key={ex.name}
+                            value={ex.name}
+                            className="border-2 border-black mb-4 overflow-hidden"
+                            data-testid={`example-${idx}`}
+                        >
+                            <AccordionTrigger className="bg-blue-100 px-3 sm:px-4 py-3 text-sm sm:text-lg font-bold hover:no-underline hover:bg-blue-200">
+                                <div className="flex-1 font-mono text-left break-all">{ex.name}</div>
+                                <div className="mr-4 font-mono text-sm">{ex.cases.length}</div>
+                            </AccordionTrigger>
+                            <AccordionContent className="p-3 sm:p-4">
+                                <div className="flex flex-col gap-2">
+                                    {ex.cases.map((tc, j) => (
+                                        <button
+                                            key={`${tc.id}-${j}`}
+                                            onClick={(event) => addTestTab(tc.id, event)}
+                                            className="w-full flex items-center justify-between p-3 border border-gray-200 hover:bg-blue-50 hover:border-blue-300 text-left transition-colors"
+                                            data-testid={`example-${idx}-test-${j}`}
+                                        >
+                                            <div className="flex items-center">
+                                                <Code className="mr-3 text-gray-500 shrink-0" size={20}/>
+                                                <span className="font-mono text-sm break-all">{tc.name}</span>
+                                            </div>
+                                            <ChevronRight className="text-gray-400 shrink-0" size={18}/>
+                                        </button>
+                                    ))}
+                                </div>
+                            </AccordionContent>
+                        </AccordionItem>
+                    ))}
+                </Accordion>
+            )}
+        </div>
+    );
+};

web-report/src/pages/Tests.tsx

@@ -17,7 +17,12 @@ const filterButtonClass = (active: boolean) =>
             : "bg-white hover:bg-gray-100"
     }`;
 
-export const Tests: React.FC = () => {
+interface IProps {
+    openTestFiles: string[];
+    setOpenTestFiles: (value: string[]) => void;
+}
+
+export const Tests: React.FC<IProps> = ({openTestFiles, setOpenTestFiles}) => {
     const {
         data,
         reviews,
@@ -153,13 +158,13 @@ export const Tests: React.FC = () => {
                 ))}
             </div>
 
-            <Accordion type="multiple" className="w-full">
+            <Accordion type="multiple" value={openTestFiles} onValueChange={setOpenTestFiles} className="w-full">
                 {testFilePaths.map((file, idx) => {
                     const items = grouped.get(file) ?? [];
                     return (
                         <AccordionItem
                             key={file}
-                            value={`file-${idx}`}
+                            value={file}
                             className="border-2 border-black mb-4 overflow-hidden"
                             data-testid={`test-file-${idx}`}
                         >