fix client tests

.devcontainer/Dockerfile

@@ -28,7 +28,17 @@ RUN curl -fsSL -o get_node.sh https://deb.nodesource.com/setup_18.x \
     && chmod 700 get_node.sh \
     && ./get_node.sh
 
-RUN apt-get -y install --no-install-recommends sshpass chromium chromium-driver temurin-17-jdk maven docker-ce-cli nodejs python3 python3-pip
+RUN apt-get -y install --no-install-recommends \
+    sshpass \
+    chromium \
+    chromium-sandbox \
+    chromium-driver \
+    temurin-17-jdk \
+    maven \
+    docker-ce-cli \
+    nodejs \
+    python3 \
+    python3-pip
 
 # Apt cleanup
 RUN apt-get autoremove -y; \

.github/workflows/build.yml

@@ -10,21 +10,39 @@ concurrency:
   cancel-in-progress: true
 
 jobs:
-  test:
+  test-server:
     runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: server
     steps:
       - uses: actions/checkout@v3
       - uses: actions/setup-java@v3
         with:
-          distribution: "temurin" # See 'Supported distributions' for available options
+          distribution: "temurin"
           java-version: "17"
           cache: "maven"
-      - name: Test
-        working-directory: ./server
-        run: mvn test
+      - run: mvn test
+
+  test-client:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: client
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: "yarn"
+          cache-dependency-path: client/yarn.lock
+      - run: yarn --frozen-lockfile
+      - run: yarn test:ci
 
   build-images:
-    needs: test
+    needs:
+      - test-server
+      - test-client
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3

TODO.md

@@ -2,4 +2,5 @@
 - Try using WebTestClient https://docs.spring.io/spring-framework/reference/testing/webtestclient.html#webtestclient-json
 - Add pgAdmin to dev container https://www.pgadmin.org/download/pgadmin-4-container/s
 - fix client tests
+- add new web component based UI
 - add logs to server services

client/karma.conf.js

@@ -33,12 +33,13 @@ module.exports = function (config) {
       ]
     },
     reporters: ['progress', 'kjhtml'],
-    port: 9876,
-    colors: true,
-    logLevel: config.LOG_INFO,
-    autoWatch: true,
-    browsers: ['Chrome'],
-    singleRun: false,
-    restartOnFileChange: true
+    browsers: ["ChromeHeadlessNoSandbox"],
+    customLaunchers: {
+      ChromeHeadlessNoSandbox: {
+        base: "ChromeHeadless",
+        flags: ["--no-sandbox"],
+      },
+    },
+    restartOnFileChange: true,
   });
 };

client/package.json

@@ -6,7 +6,8 @@
     "start": "ng serve",
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
-    "test": "ng test"
+    "test": "ng test",
+    "test:ci": "ng test --watch=false --code-coverage"
   },
   "private": true,
   "dependencies": {

client/src/app/app.component.html

@@ -2,4 +2,4 @@
 
 <h1 *ngIf="syncState.hasFailed">Error occured</h1>
 
-<p *ngIf="syncState.isLoading">Loading....</p>
+<p *ngIf="syncState.isLoading">Loading...</p>

client/src/app/app.component.spec.ts

@@ -1,35 +1,29 @@
 import { TestBed } from '@angular/core/testing';
-import { RouterTestingModule } from '@angular/router/testing';
+import { of } from 'rxjs';
 import { AppComponent } from './app.component';
+import { WithingsService } from './withings.service';
 
-describe('AppComponent', () => {
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [
-        RouterTestingModule
-      ],
-      declarations: [
-        AppComponent
-      ],
-    }).compileComponents();
+async function setup() {
+  const mockWithingsService = jasmine.createSpyObj('WithingsService', {
+    sync: of(),
   });
+  await TestBed.configureTestingModule({
+    declarations: [AppComponent],
+    providers: [{ provide: WithingsService, useValue: mockWithingsService }],
+  }).compileComponents();
 
-  it('should create the app', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app).toBeTruthy();
-  });
+  const fixture = TestBed.createComponent(AppComponent);
+  fixture.detectChanges();
 
-  it(`should have as title 'client'`, () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app.title).toEqual('client');
-  });
+  return {
+    fixture,
+    element: fixture.nativeElement as HTMLElement
+  };
+}
 
-  it('should render title', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
-    const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('.content span')?.textContent).toContain('client app is running!');
+describe('AppComponent', () => {
+  it('should render loading state', async () => {
+    const { element } = await setup();
+    expect(element.textContent).toEqual('Loading...');
   });
 });

client/src/app/weight.service.spec.ts

@@ -0,0 +1,23 @@
+
+import { of } from 'rxjs';
+import { WeightService } from './weight.service';
+import { WeightResponse } from './types';
+
+async function setup() {
+  const mockHttpClient = jasmine.createSpyObj('HttpClient', {
+    get: of({ weight: 89.6 } as WeightResponse ),
+  });
+
+  const service = new WeightService(mockHttpClient);
+
+  return {
+    service,
+  };
+}
+
+describe('WeightService', () => {
+  it('should be created', async () => {
+    const { service } = await setup()
+    expect(service).toBeTruthy();
+  });
+});

client/src/app/weight/weight.component.html

@@ -2,4 +2,4 @@
 
 <h1 *ngIf="weightState.hasFailed">Error occured</h1>
 
-<p *ngIf="weightState.isLoading">Loading....</p>
+<p *ngIf="weightState.isLoading">Loading...</p>

client/src/app/weight/weight.component.spec.ts

@@ -1,23 +1,30 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { WeightComponent } from './weight.component';
+import { WeightService } from '../weight.service';
+import { of } from 'rxjs';
 
-describe('WeightComponent', () => {
-  let component: WeightComponent;
-  let fixture: ComponentFixture<WeightComponent>;
+async function setup() {
+  const mockWeightService = jasmine.createSpyObj('WeightService', {
+    getWeight: of(),
+  });
+  await TestBed.configureTestingModule({
+    declarations: [WeightComponent],
+    providers: [{ provide: WeightService, useValue: mockWeightService }],
+  }).compileComponents();
 
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ WeightComponent ]
-    })
-    .compileComponents();
+  const fixture = TestBed.createComponent(WeightComponent);
+  fixture.detectChanges();
 
-    fixture = TestBed.createComponent(WeightComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
+  return {
+    fixture,
+    element: fixture.nativeElement as HTMLElement
+  };
+}
 
-  it('should create', () => {
-    expect(component).toBeTruthy();
+describe('WeightComponent', () => {
+  it('should create', async () => {
+    const { element } = await setup();
+    expect(element.textContent).toEqual('Loading...')
   });
 });

client/src/app/withings.service.spec.ts

@@ -1,16 +1,22 @@
-import { TestBed } from '@angular/core/testing';
 
+import { of } from 'rxjs';
 import { WithingsService } from './withings.service';
 
-describe('WithingsService', () => {
-  let service: WithingsService;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-    service = TestBed.inject(WithingsService);
+async function setup() {
+  const mockHttpClient = jasmine.createSpyObj('HttpClient', {
+    post: of(),
   });
 
-  it('should be created', () => {
+  const service = new WithingsService(mockHttpClient);
+
+  return {
+    service,
+  };
+}
+
+describe('WithingsService', () => {
+  it('should be created', async () => {
+    const { service } = await setup()
     expect(service).toBeTruthy();
   });
 });