From 679f9208e5f18563004b18be8e38da4685463155 Mon Sep 17 00:00:00 2001 From: Brittany Hancock Date: Sun, 9 Mar 2025 23:41:55 -0700 Subject: [PATCH 1/2] Fix failing Angular spec tests for ProjectPageComponent, ContributorsComponent, and ProjectListPageComponent --- .../contributors.component.spec.ts | 30 +++++++++--- .../project-list-page.component.spec.ts | 19 ++++++- .../project-page.component.spec.ts | 49 +++++++++++++++---- 3 files changed, 82 insertions(+), 16 deletions(-) diff --git a/modelcabinet.client/src/app/components/contributors/contributors.component.spec.ts b/modelcabinet.client/src/app/components/contributors/contributors.component.spec.ts index 5d100c6..f276764 100644 --- a/modelcabinet.client/src/app/components/contributors/contributors.component.spec.ts +++ b/modelcabinet.client/src/app/components/contributors/contributors.component.spec.ts @@ -1,6 +1,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing'; import { ContributorsComponent } from './contributors.component'; +import { HttpTestingController, provideHttpClientTesting } from '@angular/common/http/testing'; +import { provideHttpClient } from '@angular/common/http'; describe('ContributorsComponent', () => { let component: ContributorsComponent; @@ -10,17 +11,26 @@ describe('ContributorsComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ declarations: [ContributorsComponent], - imports: [HttpClientTestingModule] + providers: [ + provideHttpClient(), + provideHttpClientTesting() + ] }).compileComponents(); fixture = TestBed.createComponent(ContributorsComponent); component = fixture.componentInstance; - httpTestingController = TestBed.inject(HttpTestingController); - fixture.detectChanges(); + httpTestingController = TestBed.inject(HttpTestingController); + + + fixture.detectChanges(); // Triggers ngOnInit() and its API call + + // Intercept the initial API request triggered by ngOnInit() + httpTestingController.expectOne('https://api.github.com/repos/CCAppDevs/ModelCabinet/contributors') + .flush([]); // Respond with an empty array to resolve the request }); afterEach(() => { - httpTestingController.verify(); + httpTestingController.verify(); // Ensures no unhandled requests remain }); it('should create', () => { @@ -29,11 +39,19 @@ describe('ContributorsComponent', () => { it('should fetch contributors', () => { const expectedData = [{ login: 'user1', avatar_url: 'url1', html_url: 'html1' }]; + + // Trigger the request manually if needed component.ngOnInit(); + fixture.detectChanges(); + + // Capture the request made by ngOnInit() const req = httpTestingController.expectOne('https://api.github.com/repos/CCAppDevs/ModelCabinet/contributors'); expect(req.request.method).toEqual('GET'); - req.flush(expectedData); + // Respond with mock data + req.flush(expectedData); + + // Assert that the component received the expected data expect(component.contributors).toEqual(expectedData); }); }); diff --git a/modelcabinet.client/src/app/projects/project-list-page/project-list-page.component.spec.ts b/modelcabinet.client/src/app/projects/project-list-page/project-list-page.component.spec.ts index 739b2e4..65ab9bb 100644 --- a/modelcabinet.client/src/app/projects/project-list-page/project-list-page.component.spec.ts +++ b/modelcabinet.client/src/app/projects/project-list-page/project-list-page.component.spec.ts @@ -1,6 +1,18 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; import { ProjectListPageComponent } from './project-list-page.component'; +import { provideHttpClient } from '@angular/common/http'; +import { DataService } from '../../data.service'; +import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; +import { BehaviorSubject, of } from 'rxjs'; + +// Mock DataService +const mockDataService = { + projects$: new BehaviorSubject([]), // Mimic BehaviorSubject for live updates + getAllProjects: jasmine.createSpy('getAllProjects').and.callFake(() => { + mockDataService.projects$.next([]); // Update BehaviorSubject, mimicking API call + }), +}; describe('ProjectListPageComponent', () => { let component: ProjectListPageComponent; @@ -8,7 +20,12 @@ describe('ProjectListPageComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ProjectListPageComponent] + declarations: [ProjectListPageComponent], + providers: [ + provideHttpClient(), // New way to provide HttpClient in testing + { provide: DataService, useValue: mockDataService } // Provide mock implementation + ], + schemas: [CUSTOM_ELEMENTS_SCHEMA] // Ignore unknown elements if needed }) .compileComponents(); diff --git a/modelcabinet.client/src/app/projects/project-page/project-page.component.spec.ts b/modelcabinet.client/src/app/projects/project-page/project-page.component.spec.ts index 71d6159..7bf4647 100644 --- a/modelcabinet.client/src/app/projects/project-page/project-page.component.spec.ts +++ b/modelcabinet.client/src/app/projects/project-page/project-page.component.spec.ts @@ -1,5 +1,4 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; - import { ProjectPageComponent } from './project-page.component'; import { Project } from '../../Models/project'; import { provideHttpClient } from '@angular/common/http'; @@ -7,6 +6,24 @@ import { provideHttpClientTesting } from '@angular/common/http/testing'; import { ActivatedRoute, convertToParamMap } from '@angular/router'; import { BehaviorSubject, of } from 'rxjs'; import { DataService } from '../../data.service'; +import { Component, Input } from '@angular/core'; +import { Asset } from '../../Models/asset'; + + @Component({ + selector: 'app-asset-detail', + template: '
' + }) +class MockAssetDetailComponent { + @Input() asset!: Asset; // Simulate the real component's input +} +// Mock app-viewport component +@Component({ + selector: 'app-viewport', + template: '
' +}) +class MockViewportComponent { + @Input() stlModels: Asset[] = []; // Mock real component's input +} class MockActivateRoute { public paramMap = of(convertToParamMap({id: 1})) @@ -24,25 +41,39 @@ describe('ProjectPageComponent', () => { description: 'Test description', author: 'Author name', version: '1.0', - assets: [], + assets: [ + { + assetId: 1, + name: "Sample Asset", + path: '/assets/sample.png', + dateCreation: new Date(), + dateUpdated: new Date(), + fileSize: 12345, + projectId: 1, + assetTags: [] + } + ], shortDescription: 'Short description', slug: 'test-project', projectTags: [] }; - let mockDataService; - let activatedMockRoute:MockActivateRoute = new MockActivateRoute(); + let mockDataService: jasmine.SpyObj; + const activatedMockRoute = new MockActivateRoute(); beforeEach(async () => { - mockDataService = jasmine.createSpyObj(['getProjectById']); - mockDataService.getProjectById.and.returnValue(''); - activatedMockRoute = - + mockDataService = jasmine.createSpyObj('DataService', ['getProjectById']); + // Simulate BehaviorSubject update like real service + mockDataService.getProjectById.and.callFake(() => { + mockDataService.project$.next(mockProject); + }); await TestBed.configureTestingModule({ declarations: [ - ProjectPageComponent + ProjectPageComponent, + MockViewportComponent, // Declare mock component + MockAssetDetailComponent // ✅ Mocked asset-detail component ], providers: [ provideHttpClient(), From d099866ee0b838673187f600136e99e3edba7acd Mon Sep 17 00:00:00 2001 From: Brittany Hancock Date: Mon, 10 Mar 2025 10:24:36 -0700 Subject: [PATCH 2/2] note amend --- .../app/projects/project-page/project-page.component.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modelcabinet.client/src/app/projects/project-page/project-page.component.spec.ts b/modelcabinet.client/src/app/projects/project-page/project-page.component.spec.ts index 7bf4647..b478cad 100644 --- a/modelcabinet.client/src/app/projects/project-page/project-page.component.spec.ts +++ b/modelcabinet.client/src/app/projects/project-page/project-page.component.spec.ts @@ -73,7 +73,7 @@ describe('ProjectPageComponent', () => { declarations: [ ProjectPageComponent, MockViewportComponent, // Declare mock component - MockAssetDetailComponent // ✅ Mocked asset-detail component + MockAssetDetailComponent // Mocked asset-detail component ], providers: [ provideHttpClient(),