Fix and append to frontend tests

Author: XanderVertegaal

frontend/src/app/annotate/annotation-input/annotation-input.component.spec.ts

@@ -50,6 +50,7 @@ describe("AnnotationInputComponent", () => {
             const mockProblem: Problem = {
                 id: 123,
                 base: null,
+                hidden: false,
                 premises: ["First premise", "Second premise"],
                 hypothesis: "Test hypothesis",
                 entailmentLabel: EntailmentLabel.ENTAILMENT,
@@ -121,6 +122,7 @@ describe("AnnotationInputComponent", () => {
             const mockProblem: Problem = {
                 id: 123,
                 base: null,
+                hidden: false,
                 premises: [],
                 hypothesis: "Empty test hypothesis",
                 entailmentLabel: EntailmentLabel.NEUTRAL,
@@ -143,6 +145,7 @@ describe("AnnotationInputComponent", () => {
             const mockProblem: Problem = {
                 id: 1,
                 base: null,
+                hidden: false,
                 premises: ["Test premise"],
                 hypothesis: "Test hypothesis",
                 entailmentLabel: EntailmentLabel.CONTRADICTION,
@@ -166,6 +169,7 @@ describe("AnnotationInputComponent", () => {
             const mockProblem: Problem = {
                 id: 12,
                 base: null,
+                hidden: false,
                 premises: [],
                 hypothesis: "",
                 entailmentLabel: EntailmentLabel.UNKNOWN,
@@ -187,6 +191,7 @@ describe("AnnotationInputComponent", () => {
             const mockProblem: Problem = {
                 id: 17,
                 base: null,
+                hidden: false,
                 premises: [],
                 hypothesis: "",
                 entailmentLabel: EntailmentLabel.UNKNOWN,

frontend/src/app/annotate/annotation-input/problem-details/problem-details.component.spec.ts

@@ -12,6 +12,7 @@ const createMockProblem = (
 ): Problem => ({
     id,
     base: null,
+    hidden: false,
     dataset,
     entailmentLabel,
     premises: ["premise"],

frontend/src/app/annotate/annotation-input/problem-details/visibility-toggle/visibility-toggle.component.spec.ts

@@ -1,23 +1,54 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { VisibilityToggleComponent } from './visibility-toggle.component';
+import { provideHttpClient } from '@angular/common/http';
+import { ProblemService } from '@/services/problem.service';
 
 describe('VisibilityToggleComponent', () => {
     let component: VisibilityToggleComponent;
     let fixture: ComponentFixture<VisibilityToggleComponent>;
+    let problemService: ProblemService;
 
     beforeEach(async () => {
         await TestBed.configureTestingModule({
-            imports: [VisibilityToggleComponent]
+            imports: [VisibilityToggleComponent],
+            providers: [provideHttpClient()],
         })
             .compileComponents();
 
         fixture = TestBed.createComponent(VisibilityToggleComponent);
         component = fixture.componentInstance;
+        problemService = TestBed.inject(ProblemService);
+        const componentRef = fixture.componentRef;
+        componentRef.setInput("problem", {
+            id: 123,
+            hidden: false
+        });
         fixture.detectChanges();
     });
 
     it('should create', () => {
         expect(component).toBeTruthy();
     });
+
+    it('should emit toggleVisibility$ with hidden=true when problem is visible', () => {
+        const emitted: { id: number, hidden: boolean; }[] = [];
+        problemService.toggleVisibility$.subscribe(v => emitted.push(v));
+
+        component.onToggleHidden();
+
+        expect(emitted).toEqual([{ id: 123, hidden: true }]);
+    });
+
+    it('should show the alert banner only when the problem is hidden', () => {
+        const getAlert = () =>
+            fixture.nativeElement.querySelector('[role="alert"]');
+
+        expect(getAlert()).toBeNull();
+
+        fixture.componentRef.setInput('problem', { id: 123, hidden: true });
+        fixture.detectChanges();
+
+        expect(getAlert()).not.toBeNull();
+    });
 });

frontend/src/app/annotate/search/search.component.spec.ts

@@ -1,31 +1,34 @@
-import { ComponentFixture, TestBed } from "@angular/core/testing";
-
-import { SearchComponent } from "./search.component";
-import { ActivatedRoute } from "@angular/router";
-import { of } from "rxjs";
-
-describe("SearchComponent", () => {
-    let component: SearchComponent;
-    let fixture: ComponentFixture<SearchComponent>;
-
-    beforeEach(async () => {
-        await TestBed.configureTestingModule({
-            imports: [SearchComponent],
-            providers: [{
-                provide: ActivatedRoute,
-                useValue: {
-                    params: of({ problemId: "1" }),
-                    queryParamMap: of({ dataset: null, entailmentLabel: null, gold: null, text: "" }),
-                }
-            }]
-        }).compileComponents();
-
-        fixture = TestBed.createComponent(SearchComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
-
-    it("should create", () => {
-        expect(component).toBeTruthy();
-    });
-});
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+
+import { SearchComponent } from "./search.component";
+import { ActivatedRoute } from "@angular/router";
+import { of } from "rxjs";
+import { provideHttpClient, withInterceptorsFromDi } from "@angular/common/http";
+
+describe("SearchComponent", () => {
+    let component: SearchComponent;
+    let fixture: ComponentFixture<SearchComponent>;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            imports: [SearchComponent],
+            providers: [
+                provideHttpClient(withInterceptorsFromDi()),
+                {
+                    provide: ActivatedRoute,
+                    useValue: {
+                        params: of({ problemId: "1" }),
+                        queryParamMap: of({ dataset: null, entailmentLabel: null, gold: null, text: "" }),
+                    }
+                }]
+        }).compileComponents();
+
+        fixture = TestBed.createComponent(SearchComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it("should create", () => {
+        expect(component).toBeTruthy();
+    });
+});

frontend/src/app/menu/user-menu/user-menu.component.spec.ts

@@ -26,6 +26,7 @@ const fakeUserResponse: UserResponse = {
     canEditKb: false,
     canAddLabelAnnotations: false,
     canCopyProblem: false,
+    canChangeProblemVisibility: false,
 };
 
 const fakeAdminResponse: UserResponse = {
@@ -41,6 +42,7 @@ const fakeAdminResponse: UserResponse = {
     canEditKb: true,
     canAddLabelAnnotations: true,
     canCopyProblem: true,
+    canChangeProblemVisibility: true,
 };
 
 describe("UserMenuComponent", () => {

frontend/src/app/services/problem.service.spec.ts

@@ -60,6 +60,7 @@ describe("ProblemService", () => {
                     },
                     kbAnnotations: [],
                     labelAnnotations: [],
+                    hidden: false,
                 },
                 index: 1,
                 total: 1,
@@ -81,7 +82,7 @@ describe("ProblemService", () => {
                 done();
             });
 
-            const req = httpMock.expectOne(`/api/problem/${mockProblemId}/?text=&dataset=&gold=&entailmentLabel=`);
+            const req = httpMock.expectOne(`/api/problem/${mockProblemId}/?text=&dataset=&gold=&entailmentLabel=&hidden=`);
             expect(req.request.method).toBe("GET");
             req.flush(mockResponse);
         });

frontend/src/app/user/user-settings/user-settings.component.spec.ts

@@ -29,6 +29,7 @@ const fakeUser: User = {
     canEditKb: false,
     canAddLabelAnnotations: false,
     canCopyProblem: false,
+    canChangeProblemVisibility: false,
 };
 
 @Injectable({ providedIn: "root" })

frontend/src/app/user/utils.spec.ts

@@ -45,6 +45,7 @@ describe("User utils", () => {
                 canEditKb: false,
                 canAddLabelAnnotations: false,
                 canCopyProblem: false,
+                canChangeProblemVisibility: false,
             };
             const user = parseUserData(result);
             expect(user).toBeInstanceOf(User);