From be0deec5d52db66ae9084ebdbb3131908e94708d Mon Sep 17 00:00:00 2001
From: TresaAnnThomas <teeesa728@gmail.com>
Date: Sat, 28 Sep 2024 00:35:04 +0800
Subject: [PATCH] Fix build errors

---
 peer-prep-fe/src/app/app.component.spec.ts    |  2 +-
 .../question-box.component.spec.ts            | 53 ++++++++++++++++---
 .../question-description.component.spec.ts    | 17 ++++--
 peer-prep-fe/src/styles.css                   |  2 +-
 4 files changed, 61 insertions(+), 13 deletions(-)

diff --git a/peer-prep-fe/src/app/app.component.spec.ts b/peer-prep-fe/src/app/app.component.spec.ts
index 9cc0f6aa7c..68b866fc03 100644
--- a/peer-prep-fe/src/app/app.component.spec.ts
+++ b/peer-prep-fe/src/app/app.component.spec.ts
@@ -24,6 +24,6 @@ describe('AppComponent', () => {
     const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
     const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, peer-prep-fe');
+    expect(compiled.querySelector('h1')?.textContent).toContain('List of Questions');
   });
 });
diff --git a/peer-prep-fe/src/components/question-box/question-box.component.spec.ts b/peer-prep-fe/src/components/question-box/question-box.component.spec.ts
index 5137b9c47b..bf533014d1 100644
--- a/peer-prep-fe/src/components/question-box/question-box.component.spec.ts
+++ b/peer-prep-fe/src/components/question-box/question-box.component.spec.ts
@@ -1,23 +1,60 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
+import { TestBed, ComponentFixture } from '@angular/core/testing';
 import { QuestionBoxComponent } from './question-box.component';
+import { MatDialog, MatDialogRef } from '@angular/material/dialog';
+import { Question } from '../../app/models/question.model';
+import { of } from 'rxjs';
 
 describe('QuestionBoxComponent', () => {
   let component: QuestionBoxComponent;
   let fixture: ComponentFixture<QuestionBoxComponent>;
+  let dialogSpy: jasmine.SpyObj<MatDialog>;
+  let dialogRefSpy: jasmine.SpyObj<MatDialogRef<any>>;
+
+  beforeEach(() => {
+    // Create a mock for MatDialog and MatDialogRef
+    dialogRefSpy = jasmine.createSpyObj('MatDialogRef', ['afterClosed', 'close']);
+    dialogRefSpy.afterClosed.and.returnValue(of(true)); // Mock afterClosed to return an observable
 
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [QuestionBoxComponent]
-    })
-    .compileComponents();
+    dialogSpy = jasmine.createSpyObj('MatDialog', ['open']);
+    dialogSpy.open.and.returnValue(dialogRefSpy); // Mock open to return the MatDialogRef mock
+    
+    TestBed.configureTestingModule({
+      declarations: [QuestionBoxComponent],
+      providers: [
+        { provide: MatDialog, useValue: dialogSpy }, // Provide the mock MatDialog
+      ],
+    }).compileComponents();
 
     fixture = TestBed.createComponent(QuestionBoxComponent);
     component = fixture.componentInstance;
+
+    // Provide mock data for question and index inputs
+    component.question = {
+      title: 'Mock Question Title',
+      difficulty: 'Medium',
+      description: 'Mock Description',
+    } as Question;
+    component.index = 0; // Mock index value
+
     fixture.detectChanges();
   });
 
-  it('should create', () => {
+  it('should create the component', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should open a modal with correct data when openModal is called', () => {
+    component.openModal();
+    expect(dialogSpy.open).toHaveBeenCalledWith(
+      jasmine.any(Function), // The component to be opened in the dialog
+      {
+        data: {
+          questionTitle: 'Mock Question Title',
+          questionDifficulty: 'Medium',
+        },
+        panelClass: 'custom-modalbox',
+        width: '400px',
+      }
+    );
+  });
 });
diff --git a/peer-prep-fe/src/components/question-description/question-description.component.spec.ts b/peer-prep-fe/src/components/question-description/question-description.component.spec.ts
index 87ef8f6394..5c0178be17 100644
--- a/peer-prep-fe/src/components/question-description/question-description.component.spec.ts
+++ b/peer-prep-fe/src/components/question-description/question-description.component.spec.ts
@@ -1,5 +1,5 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { QuestionDescriptionComponent } from './question-description.component';
 
 describe('QuestionDescriptionComponent', () => {
@@ -8,16 +8,27 @@ describe('QuestionDescriptionComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [QuestionDescriptionComponent]
+      declarations: [QuestionDescriptionComponent], 
+      providers: [
+        {
+          provide: MAT_DIALOG_DATA, 
+          useValue: { questionTitle: 'Sample Title', questionDifficulty: 'Easy' } 
+        },
+        {
+          provide: MatDialogRef, 
+          useValue: {} 
+        }
+      ]
     })
     .compileComponents();
 
     fixture = TestBed.createComponent(QuestionDescriptionComponent);
     component = fixture.componentInstance;
-    fixture.detectChanges();
+    fixture.detectChanges(); 
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
 });
diff --git a/peer-prep-fe/src/styles.css b/peer-prep-fe/src/styles.css
index 5a122d2d78..8510483397 100644
--- a/peer-prep-fe/src/styles.css
+++ b/peer-prep-fe/src/styles.css
@@ -48,7 +48,7 @@
     border-radius: 15px;
     font-size: 14px;
     font-family: Arial, Helvetica, sans-serif;
-    margin-left: auto; /* Space between title and difficulty */
+    margin-left: auto; 
     background-color: #f0f0f0;
   }