Programming exercises: Add visualization of test case errors

src/main/webapp/app/exercises/programming/manage/grading/programming-exercise-configure-grading.component.html

@@ -16,20 +16,23 @@ <h3 class="fw-medium" jhiTranslate="artemisApp.programmingExercise.configureGrad
                 <div class="tab-item submission-policy" (click)="selectTab('submission-policy')" [ngClass]="activeTab === 'submission-policy' ? 'active' : ''">
                     <b>Submission Policy</b>
                 </div>
+                <div class="tab-item test-analysis" (click)="selectTab('test-analysis')" [ngClass]="activeTab === 'test-analysis' ? 'active' : ''">
+                    <b>Test Analysis</b>
+                </div>
             </div>
             <ng-template>
                 <div></div>
             </ng-template>
             <div class="d-flex align-items-center">
-                @if (activeTab !== 'submission-policy') {
+                @if (activeTab !== 'submission-policy' && activeTab !== 'test-analysis') {
                     <jhi-programming-exercise-configure-grading-status
                         [exerciseIsReleasedAndHasResults]="isReleasedAndHasResults"
                         [hasUnsavedTestCaseChanges]="hasUnsavedChanges"
                         [hasUnsavedCategoryChanges]="!!changedCategoryIds.length"
                         [hasUpdatedGradingConfig]="hasUpdatedGradingConfig"
                     />
                 }
-                @if (programmingExercise.isAtLeastInstructor) {
+                @if (programmingExercise.isAtLeastInstructor && activeTab !== 'test-analysis') {
                     <jhi-programming-exercise-configure-grading-actions
                         [exercise]="programmingExercise"
                         [hasUpdatedGradingConfig]="hasUpdatedGradingConfig"
@@ -256,5 +259,12 @@ <h2 class="mb-5 fw-medium">
                 </div>
             }
         </div>
+        <div class="grading-body-container mt-3">
+            @if (activeTab === 'test-analysis') {
+                <div>
+                    <jhi-testcase-analysis [exerciseTitle]="programmingExercise.title" />
+                </div>
+            }
+        </div>
     }
 </div>

src/main/webapp/app/exercises/programming/manage/grading/programming-exercise-configure-grading.component.ts

@@ -56,7 +56,7 @@ const DefaultFieldValues: { [key: string]: number } = {
     [EditableField.MAX_PENALTY]: 0,
 };
 
-export type GradingTab = 'test-cases' | 'code-analysis' | 'submission-policy';
+export type GradingTab = 'test-cases' | 'code-analysis' | 'submission-policy' | 'test-analysis';
 
 export type Table = 'testCases' | 'codeAnalysis';
 

src/main/webapp/app/exercises/programming/manage/grading/programming-exercise-grading.module.ts

@@ -19,6 +19,7 @@ import { SubmissionPolicyUpdateModule } from 'app/exercises/shared/submission-po
 import { ProgrammingExerciseGradingTasksTableComponent } from 'app/exercises/programming/manage/grading/tasks/programming-exercise-grading-tasks-table.component';
 import { BarChartModule } from '@swimlane/ngx-charts';
 import { ProgrammingExerciseTaskComponent } from 'app/exercises/programming/manage/grading/tasks/programming-exercise-task/programming-exercise-task.component';
+import { TestcaseAnalysisComponent } from 'app/exercises/programming/manage/grading/testcase-analysis/testcase-analysis.component';
 
 @NgModule({
     imports: [
@@ -42,6 +43,7 @@ import { ProgrammingExerciseTaskComponent } from 'app/exercises/programming/mana
         ProgrammingExerciseGradingTableActionsComponent,
         ProgrammingExerciseGradingSubmissionPolicyConfigurationActionsComponent,
         ProgrammingExerciseGradingTasksTableComponent,
+        TestcaseAnalysisComponent,
         TestCasePassedBuildsChartComponent,
         CategoryIssuesChartComponent,
         TestCaseDistributionChartComponent,

src/main/webapp/app/exercises/programming/manage/grading/testcase-analysis/testcase-analysis.component.html

@@ -0,0 +1,27 @@
+<div class="container">
+    <h2>{{ 'artemisApp.programmingExercise.configureGrading.testAnalysis.title' | artemisTranslate: { exerciseTitle: exerciseTitle } }}</h2>
+    <table class="table">
+        <thead>
+            <tr>
+                <th scope="col" jhiTranslate="artemisApp.programmingExercise.configureGrading.testAnalysis.occurrence"></th>
+                <th scope="col" jhiTranslate="artemisApp.programmingExercise.configureGrading.testAnalysis.testCaseFeedback"></th>
+                <th scope="col" jhiTranslate="artemisApp.programmingExercise.configureGrading.testAnalysis.task"></th>
+                <th scope="col" jhiTranslate="artemisApp.programmingExercise.configureGrading.testAnalysis.testcase"></th>
+                <th scope="col" jhiTranslate="artemisApp.programmingExercise.configureGrading.testAnalysis.errorCategory"></th>
+            </tr>
+        </thead>
+        <tbody class="table-group-divider">
+            @for (item of feedbacks; track item) {
+                <tr>
+                    <td class="text-center">{{ item.count }} ({{ getRelativeCount(item.count) | number: '1.0-0' }}%)</td>
+                    <td>{{ item.detailText }}</td>
+                    <td class="text-center">{{ item.task }}</td>
+                    <td>{{ item.testcase }}</td>
+                    <td>Student Error</td>
+                    <!-- This is a placeholder, will be covered in follow up PRs -->
+                </tr>
+            }
+        </tbody>
+    </table>
+    <div>{{ 'artemisApp.programmingExercise.configureGrading.testAnalysis.totalItems' | artemisTranslate: { count: feedbacks.length } }}</div>
+</div>

src/main/webapp/app/exercises/programming/manage/grading/testcase-analysis/testcase-analysis.component.scss

@@ -0,0 +1,13 @@
+.container {
+    margin: 20px;
+}
+
+h2 {
+    margin-bottom: 20px;
+}
+
+.table {
+    width: 100%;
+    margin-bottom: 1rem;
+    color: #212529;
+}

src/main/webapp/app/exercises/programming/manage/grading/testcase-analysis/testcase-analysis.component.ts

@@ -0,0 +1,93 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { Feedback } from 'app/entities/feedback.model';
+import { ProgrammingExerciseTaskService } from 'app/exercises/programming/manage/grading/tasks/programming-exercise-task.service';
+import { ResultService } from 'app/exercises/shared/result/result.service';
+import { Participation } from 'app/entities/participation/participation.model';
+import { ParticipationService } from 'app/exercises/shared/participation/participation.service';
+import { ProgrammingExerciseTask } from 'app/exercises/programming/manage/grading/tasks/programming-exercise-task';
+import { ProgrammingExerciseTestCase } from 'app/entities/programming-exercise-test-case.model';
+
+// Define the structure for FeedbackDetail
+type FeedbackDetail = {
+    count: number;
+    detailText: string;
+    testcase: string;
+    task: number;
+};
+
+@Component({
+    selector: 'jhi-testcase-analysis',
+    templateUrl: './testcase-analysis.component.html',
+    styleUrls: ['./testcase-analysis.component.scss'],
+})
+export class TestcaseAnalysisComponent implements OnInit {
+    @Input() exerciseTitle?: string;
+    participation: Participation[] = [];
+    tasks: ProgrammingExerciseTask[] = [];
+    feedbacks: FeedbackDetail[] = [];
+
+    constructor(
+        private participationService: ParticipationService,
+        private resultService: ResultService,
+        private programmingExerciseTaskService: ProgrammingExerciseTaskService,
+    ) {}
+
+    ngOnInit(): void {
+        if (this.programmingExerciseTaskService.exercise.id != undefined) {
+            // Find all participations for the programming exercise and instantiate the feedbacks array with the FeedbackDetail structure
+            this.participationService.findAllParticipationsByExercise(this.programmingExerciseTaskService.exercise.id, true).subscribe((participationsResponse) => {
+                this.participation = participationsResponse.body ?? [];
+                this.loadFeedbacks(this.participation);
+            });
+        }
+        // Load tasks for the programming exercise
+        this.tasks = this.programmingExerciseTaskService.updateTasks();
+    }
+
+    loadFeedbacks(participations: Participation[]): void {
+        // Iterate over all participations, get feedback details for each result, and filter them for negative feedback
+        participations.forEach((participation) => {
+            participation.results?.forEach((result) => {
+                this.resultService.getFeedbackDetailsForResult(participation.id!, result).subscribe((response) => {
+                    const feedbackArray = response.body ?? [];
+                    const negativeFeedbackArray = feedbackArray.filter((feedback) => !feedback.positive); // Filter out positive feedback
+                    this.saveFeedbacks(negativeFeedbackArray); // Save only negative feedback
+                });
+            });
+        });
+    }
+
+    saveFeedbacks(feedbackArray: Feedback[]): void {
+        // Iterate over all feedback and save them in the feedbacks array
+        // If a feedback with the corresponding testcase already exists in the list, then the count is incremented; otherwise, a new FeedbackDetail is added
+        feedbackArray.forEach((feedback) => {
+            const feedbackText = feedback.detailText ?? '';
+            const existingFeedback = this.feedbacks.find((f) => f.detailText === feedbackText && f.testcase === feedback.testCase?.testName);
+            if (existingFeedback) {
+                existingFeedback.count += 1; // Increment count if feedback already exists
+            } else {
+                const task = this.findTaskIndexForTestCase(feedback.testCase); // Find the task index for the test case
+                this.feedbacks.push(<FeedbackDetail>{
+                    count: 1,
+                    detailText: feedback.detailText ?? '',
+                    testcase: feedback.testCase?.testName,
+                    task: task,
+                });
+            }
+        });
+        this.feedbacks.sort((a, b) => b.count - a.count); // Sort feedback by count in descending order
+    }
+
+    findTaskIndexForTestCase(testCase?: ProgrammingExerciseTestCase): number | undefined {
+        if (!testCase) {
+            return undefined;
+        }
+        // Find the index of the task and add 1 to it (to make it a 1-based index), if 0 is returned then no element was found
+        return this.tasks.findIndex((task) => task.testCases.some((tc) => tc.testName === testCase.testName)) + 1;
+    }
+
+    // Used to calculate the relative occurrence of a feedback
+    getRelativeCount(count: number): number {
+        return (this.participation.length > 0 ? count / this.participation.length : 0) * 100;
+    }
+}

src/main/webapp/i18n/de/programmingExercise.json

@@ -306,6 +306,15 @@
                     "testType": "Type",
                     "passedPercent": "Bestanden %"
                 },
+                "testAnalysis": {
+                    "title": "Error Analyse für {{exerciseTitle}}",
+                    "occurrence": "Häufigkeit",
+                    "testCaseFeedback": "Test Fall Feedback",
+                    "task": "Task",
+                    "testcase": "Test Fall",
+                    "errorCategory": "Error Kategorie",
+                    "totalItems": "Insgesamt {{count}} items"
+                },
                 "help": {
                     "name": "Aufgabennamen werden fett geschrieben, während Testnamen normal sind. Ob es ein Aufgabenname oder Testname ist hängt davon ab, ob die Reihe eine Aufgabe oder einen Test darstellt.",
                     "state": "Gibt an, ob Issues in dieser Kategorie den Studierenden angezeigt und bewertet werden sollen.",

src/main/webapp/i18n/en/programmingExercise.json

@@ -308,6 +308,15 @@
                     "testType": "Type",
                     "passedPercent": "Passed %"
                 },
+                "testAnalysis": {
+                    "title": "Error Analysis for {{exerciseTitle}}",
+                    "occurrence": "Occurrency",
+                    "testCaseFeedback": "Test Case Feedback",
+                    "task": "Task",
+                    "testcase": "Testcase",
+                    "errorCategory": "Error Category",
+                    "totalItems": "Total {{count}} items"
+                },
                 "help": {
                     "name": "Task names are written in bold whereas Test names are normal. Task or test name depending on whether the row is a task or test.",
                     "state": "Determines whether issues in this category should be shown to the students and used for grading.",

src/test/javascript/spec/component/programming-exercise/testcase-analysis/testcase-analysis.component.spec.ts

@@ -0,0 +1,118 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { of } from 'rxjs';
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
+import { MockTranslateService } from '../../../helpers/mocks/service/mock-translate.service';
+import { ArtemisTestModule } from '../../../test.module';
+import { TestcaseAnalysisComponent } from 'app/exercises/programming/manage/grading/testcase-analysis/testcase-analysis.component';
+import { ParticipationService } from 'app/exercises/shared/participation/participation.service';
+import { ResultService } from 'app/exercises/shared/result/result.service';
+import { ProgrammingExerciseTaskService } from 'app/exercises/programming/manage/grading/tasks/programming-exercise-task.service';
+import { Participation } from 'app/entities/participation/participation.model';
+import { Feedback } from 'app/entities/feedback.model';
+import { ProgrammingExerciseTask } from 'app/exercises/programming/manage/grading/tasks/programming-exercise-task';
+import { ProgrammingExerciseTestCase } from 'app/entities/programming-exercise-test-case.model';
+import { ArtemisTranslatePipe } from 'app/shared/pipes/artemis-translate.pipe';
+import { ButtonComponent } from 'app/shared/components/button.component';
+import { MockComponent, MockPipe } from 'ng-mocks';
+import { HttpResponse } from '@angular/common/http';
+
+describe('TestcaseAnalysisComponent', () => {
+    let component: TestcaseAnalysisComponent;
+    let fixture: ComponentFixture<TestcaseAnalysisComponent>;
+    let participationService: ParticipationService;
+    let resultService: ResultService;
+
+    const participationMock: Participation[] = [
+        {
+            id: 1,
+            results: [{ id: 1 }],
+        },
+    ] as Participation[];
+
+    const feedbackMock: Feedback[] = [
+        {
+            text: 'Test feedback 1',
+            positive: false,
+            detailText: 'Test feedback 1 detail',
+            testCase: { testName: 'test1' } as ProgrammingExerciseTestCase,
+        },
+        {
+            text: 'Test feedback 2',
+            positive: false,
+            detailText: 'Test feedback 2 detail',
+            testCase: { testName: 'test2' } as ProgrammingExerciseTestCase,
+        },
+    ] as Feedback[];
+
+    const tasksMock: ProgrammingExerciseTask[] = [
+        { id: 1, taskName: 'Task 1', testCases: [{ testName: 'test1' } as ProgrammingExerciseTestCase] },
+        { id: 2, taskName: 'Task 2', testCases: [{ testName: 'test2' } as ProgrammingExerciseTestCase] },
+    ] as ProgrammingExerciseTask[];
+
+    const participationResponseMock = new HttpResponse({ body: participationMock });
+    const feedbackResponseMock = new HttpResponse({ body: feedbackMock });
+
+    beforeEach(() => {
+        const mockProgrammingExerciseTaskService = {
+            exercise: { id: 1 }, // Mock the exercise with an id
+            updateTasks: jest.fn().mockReturnValue(tasksMock),
+        };
+
+        TestBed.configureTestingModule({
+            imports: [ArtemisTestModule, TranslateModule.forRoot()],
+            declarations: [TestcaseAnalysisComponent, MockPipe(ArtemisTranslatePipe), MockComponent(ButtonComponent)],
+            providers: [
+                { provide: TranslateService, useClass: MockTranslateService },
+                ParticipationService,
+                ResultService,
+                { provide: ProgrammingExerciseTaskService, useValue: mockProgrammingExerciseTaskService },
+            ],
+        }).compileComponents();
+
+        fixture = TestBed.createComponent(TestcaseAnalysisComponent);
+        component = fixture.componentInstance;
+        participationService = TestBed.inject(ParticipationService);
+        resultService = TestBed.inject(ResultService);
+
+        jest.spyOn(participationService, 'findAllParticipationsByExercise').mockReturnValue(of(participationResponseMock));
+        jest.spyOn(resultService, 'getFeedbackDetailsForResult').mockReturnValue(of(feedbackResponseMock));
+    });
+
+    it('should initialize and load feedbacks correctly', () => {
+        component.ngOnInit();
+        fixture.detectChanges();
+
+        expect(participationService.findAllParticipationsByExercise).toHaveBeenCalled();
+        expect(resultService.getFeedbackDetailsForResult).toHaveBeenCalled();
+        expect(component.participation).toEqual(participationMock);
+        expect(component.feedbacks).toHaveLength(2);
+        expect(component.feedbacks[0].detailText).toBe('Test feedback 1 detail');
+    });
+
+    it('should save feedbacks and sort them by count', () => {
+        component.saveFeedbacks(feedbackMock);
+
+        expect(component.feedbacks).toHaveLength(2);
+        expect(component.feedbacks[0].count).toBe(1);
+        expect(component.feedbacks[1].count).toBe(1);
+        expect(component.feedbacks[0].detailText).toBe('Test feedback 1 detail');
+    });
+
+    it('should find task index for a given test case', () => {
+        component.tasks = tasksMock;
+        const index = component.findTaskIndexForTestCase({ testName: 'test1' } as ProgrammingExerciseTestCase);
+        expect(index).toBe(1);
+
+        const zeroIndex = component.findTaskIndexForTestCase({ testName: 'test3' } as ProgrammingExerciseTestCase);
+        expect(zeroIndex).toBe(0);
+    });
+
+    it('should calculate relative count correctly', () => {
+        component.participation = participationMock;
+        const relativeCount = component.getRelativeCount(1);
+        expect(relativeCount).toBe(100);
+
+        const zeroRelativeCount = component.getRelativeCount(0);
+        expect(zeroRelativeCount).toBe(0);
+    });
+});