Fix build errors

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');
   });
 });

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',
+      }
+    );
+  });
 });

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();
   });
+
 });

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;
   }