[FEATURE] Fix tests and incorporate into CI pipeline

[jfmcquade]

#2197 includes some fixes to allow the test runner to function for some spec tests. That PR includes the fixes originally included in WIP PR #2080 (now closed).

From #2080:

TODO

• Fix or remove all component test specs to include basic row value if parsing parameter_list in ngOnInit
• Fix service injection issues, creating new mock services to inject where required
• Fix other test issues
• Add ng test to web-build action tests
• Add support for ng test coverage
• Consider migrating component tests to cypress or other runner (or keeping component tests but adding back e2e)
• Start to add more meaningful component spec tests (could be follow-up)

Description

Angular has a component and service testing system which is included during new component and service creation, however only partially used for some of the newer services added to the platform.

This PR aims to fix and remove legacy code to allow the testrunner to function, and include any working tests within existing github actions testing pipelines.

https://angular.io/guide/testing

Git Issues

Closes #

Screenshots/Videos

Significant number of test issues to fix

[chrismclarke]

As a quick update on the current state of ng tests, 163 specs, 65 failures, 1 pending

I'm aware that angular is in the process of deprecating karma, however would still be good to get the entire suite passing with karma before trying to migrate to any other test runner to make it easier to identify which issues are legacy and which are migration

As as summary of the types of issues see table below

reason	specs
NullInjectorError: R3InjectorError(DynamicTestModule)[TaskService -> DynamicDataService -> DeploymentService -> InjectionToken Application Configuration -> InjectionToken Application Configuration]:	TaskService, TaskService, TaskService, TaskService, TaskService, TaskService, TaskService, TaskService, TaskService, TaskService, TaskService, TaskService, TaskService, TaskService, TaskService
Failed: Cannot read properties of undefined (reading 'parameter_list')	NavigationBarComponent, NumberSelectorComponent, TmplDashedBoxComponent, PdfComponent, TmplSimpleCheckboxComponent, TmplTileComponent, TmplIconBannerComponent
TypeError: Cannot read properties of undefined (reading 'plh_parse_family_input')	Template Calc - PLH Functions QA, Template Calc - PLH Functions, Template Calc - PLH Functions, Template Calc - PLH Functions, Template Calc - PLH Functions
Failed: R3InjectorError(DynamicTestModule)[TemplateTranslateService -> AppDataService -> HttpClient -> HttpClient]:	SelectTextComponent, TmplProgressPathComponent, TmplButtonComponent, YoutubeComponent
NullInjectorError: R3InjectorError(DynamicTestModule)[LocalNotificationService -> AppConfigService -> DeploymentService -> InjectionToken Application Configuration -> InjectionToken Application Configuration]:	NotificationsDebugPage, LocalNotificationService
Failed: R3InjectorError(DynamicTestModule)[ThemeService -> AppConfigService -> DeploymentService -> InjectionToken Application Configuration -> InjectionToken Application Configuration]:	CssVariableTableComponent, ThemeEditorPage
Failed: R3InjectorError(DynamicTestModule)[TaskService -> AppConfigService -> DeploymentService -> InjectionToken Application Configuration -> InjectionToken Application Configuration]:	CarouselComponent, TmplTaskCardComponent
Failed: R3InjectorError(DynamicTestModule)[DynamicDataService -> AppDataService -> HttpClient -> HttpClient]:	TmplTaskProgressBarComponent
Failed: R3InjectorError(DynamicTestModule)[ActivatedRoute -> ActivatedRoute]:	ComponentPage, TemplatePage
NullInjectorError: R3InjectorError(DynamicTestModule)[DeploymentService -> InjectionToken Application Configuration -> InjectionToken Application Configuration]:	AppComponent, AppComponent
NullInjectorError: R3InjectorError(DynamicTestModule)[ScreenOrientationService -> TemplateMetadataService -> TemplateService -> AppDataService -> HttpClient -> HttpClient]:	ScreenOrientationService
NullInjectorError: R3InjectorError(DynamicTestModule)[DataItemsService -> DynamicDataService -> AppDataService -> HttpClient -> HttpClient]:	RadioButtonGridComponent
NullInjectorError: R3InjectorError(DynamicTestModule)[FeedbackService -> ContextMenuService -> PopoverController -> PopoverController]:	FeedbackToolbarComponent
Failed: NG0302: The pipe 'plhAsset' could not be found in the 'RoundIconButtonComponent' component. Verify that it is declared or imported in this module. Find more at https://angular.io/errors/NG0302	RoundIconButtonComponent
NullInjectorError: R3InjectorError(DynamicTestModule)[LifecycleActionsService -> AppDataService -> HttpClient -> HttpClient]:	LifecycleActionsService
NullInjectorError: R3InjectorError(DynamicTestModule)[TemplateMetadataService -> TemplateService -> AppDataService -> HttpClient -> HttpClient]:	TemplateMetadataService
NullInjectorError: R3InjectorError(DynamicTestModule)[ErrorHandlerService -> DeploymentService -> InjectionToken Application Configuration -> InjectionToken Application Configuration]:	ErrorHandlerService
Failed: R3InjectorError(DynamicTestModule)[TemplateAssetService -> TemplateTranslateService -> AppDataService -> HttpClient -> HttpClient]:	TmplAudioComponent
NullInjectorError: R3InjectorError(DynamicTestModule)[FileManagerService -> ErrorHandlerService -> FirebaseService -> DeploymentService -> InjectionToken Application Configuration -> InjectionToken Application Configuration]:	FileManagerService
Failed: NG0304: 'nouislider' is not a known element (used in the 'TmplSliderComponent' component template):	SliderNewComponent
NullInjectorError: R3InjectorError(DynamicTestModule)[CrashlyticsService -> DeploymentService -> InjectionToken Application Configuration -> InjectionToken Application Configuration]:	CrashlyticsService
Failed: NG0304: 'plh-template-container' is not a known element (used in the 'NavStackComponent' component template):	NavStackComponent
NullInjectorError: R3InjectorError(DynamicTestModule)[CampaignService -> DataEvaluationService -> AppEventService -> AppConfigService -> DeploymentService -> InjectionToken Application Configuration -> InjectionToken Application Configuration]:	CampaignDebugPage
Failed: R3InjectorError(DynamicTestModule)[TemplateService -> AppDataService -> HttpClient -> HttpClient]:	TemplateComponent
NullInjectorError: R3InjectorError(DynamicTestModule)[TemplateAssetService -> TemplateTranslateService -> AppDataService -> HttpClient -> HttpClient]:	OdkFormComponent
NullInjectorError: R3InjectorError(DynamicTestModule)[AppUpdateService -> AppConfigService -> DeploymentService -> InjectionToken Application Configuration -> InjectionToken Application Configuration]:	AppUpdateService
Failed: Cannot read properties of undefined (reading 'value')	QrCodeComponent
Failed: NG0302: The pipe 'filterDisplayComponent' could not be found in the 'TmplDrawerComponent' component. Verify that it is declared or imported in this module. Find more at https://angular.io/errors/NG0302	DrawerComponent
NullInjectorError: R3InjectorError(DynamicTestModule)[ShareService -> ErrorHandlerService -> FirebaseService -> DeploymentService -> InjectionToken Application Configuration -> InjectionToken Application Configuration]:	ShareService
NullInjectorError: R3InjectorError(DynamicTestModule)[TourService -> TemplateFieldService -> TemplateTranslateService -> AppDataService -> HttpClient -> HttpClient]:	TourService
NullInjectorError: R3InjectorError(DynamicTestModule)[AuthService -> DeploymentService -> InjectionToken Application Configuration -> InjectionToken Application Configuration]:	AuthService
NullInjectorError: R3InjectorError(DynamicTestModule)[SeoService -> DeploymentService -> InjectionToken Application Configuration -> InjectionToken Application Configuration]:	SeoService

|

[chrismclarke]

Sidenote - table above generated by adding karma-json-result-reporter and manipulating output karmaResults json

const failed: Record<string, any> = {};
for (const [suite, spec] of Object.entries(karmaResults)) {
  for (const [name, entry] of Object.entries(spec)) {
    if (entry.status === "FAILED") {
      const [reason] = entry.log;
      failed[reason] ??= { reason, specs: [] };
      failed[reason].specs.push(suite);
    }
  }
}
const output = Object.values(failed)
  .map((v) => ({
    ...v,
    specs: v.specs.join(", "),
  }))
  .sort((a, b) => b.specs.length - a.specs.length);

Final output converted to markdown using https://github.com/Angular-cz/karma-json-result-reporter

[chrismclarke]

I've started work on slowly fixing in #2742