make existing frontend tests pass

Author: Alexander Bainczyk

.github/workflows/ci.yml

@@ -92,9 +92,20 @@ jobs:
           node-version: '14'
       - run: cd ./frontend && npm ci && npm run lint
 
-  package-frontend:
+  test-unit-frontend:
     needs: lint-frontend
     runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: Run Angular unit tests
+        uses: actions/setup-node@v2
+        with:
+          node-version: '14'
+      - run: cd ./frontend && npm ci && npm run test -- --no-watch --no-progress --browsers=ChromeHeadlessCI
+
+  package-frontend:
+    needs: test-unit-frontend
+    runs-on: ubuntu-latest
     if: github.event_name == 'push'
     steps:
       - uses: actions/checkout@v2

frontend/karma.conf.js

@@ -25,7 +25,13 @@ module.exports = function (config) {
     colors: true,
     logLevel: config.LOG_INFO,
     autoWatch: true,
-    browsers: ['Chrome'],
+    browsers: ['Chrome', 'ChromeHeadless', 'ChromeHeadlessCI'],
+    customLaunchers: {
+      ChromeHeadlessCI: {
+        base: 'ChromeHeadless',
+        flags: ['--no-sandbox']
+      }
+    },
     singleRun: false,
     restartOnFileChange: true
   });

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

@@ -1,15 +1,31 @@
-import { async, TestBed } from '@angular/core/testing';
+import { waitForAsync, TestBed } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 import { AppComponent } from './app.component';
+import { AppStoreService } from './services/app-store.service';
+import { ClipboardService } from './services/clipboard.service';
+import { ProjectApiService } from './services/api/project-api.service';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { EnvironmentProvider } from '../environments/environment.provider';
+import { WebSocketService } from './services/websocket.service';
+import { WebSocketAPIService } from './services/api/websocket-api.service';
 
 describe('AppComponent', () => {
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
-        RouterTestingModule
+        RouterTestingModule,
+        HttpClientTestingModule
       ],
       declarations: [
         AppComponent
+      ],
+      providers: [
+        AppStoreService,
+        ClipboardService,
+        ProjectApiService,
+        EnvironmentProvider,
+        WebSocketService,
+        WebSocketAPIService
       ]
     }).compileComponents();
   }));
@@ -19,17 +35,4 @@ describe('AppComponent', () => {
     const app = fixture.debugElement.componentInstance;
     expect(app).toBeTruthy();
   });
-
-  it(`should have as title 'alex-frontend'`, () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
-    expect(app.title).toEqual('alex-frontend');
-  });
-
-  it('should render title', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
-    const compiled = fixture.debugElement.nativeElement;
-    expect(compiled.querySelector('.content span').textContent).toContain('alex-frontend app is running!');
-  });
 });