rework client tests

TODO.md

@@ -8,4 +8,3 @@
 - create weight graph
 - create weight endpoints which retuns weight in last day, week, month, year
 - fix pgexporter logs about missing role
-- fix test for notification, notifications + service

client/src/app/common-components/badge/badge.component.spec.ts

@@ -0,0 +1,37 @@
+import { TestBed } from '@angular/core/testing';
+
+import { Component } from '@angular/core';
+import { BadgeComponent } from './badge.component';
+
+async function setup({
+  template,
+}: {
+  template?: string;
+} = {}) {
+  @Component({
+    template,
+  })
+  class TestComponent {}
+
+  await TestBed.configureTestingModule({
+    declarations: [BadgeComponent, TestComponent],
+  }).compileComponents();
+
+  const fixture = TestBed.createComponent(TestComponent);
+  const debugElement = fixture.debugElement.children[0];
+  fixture.detectChanges();
+
+  return {
+    fixture,
+    nativeElement: debugElement.nativeElement as HTMLElement,
+  };
+}
+
+describe('BadgeComponent', () => {
+  it('renders content', async () => {
+    const { nativeElement } = await setup({
+      template: '<app-badge>test text</app-badge>',
+    });
+    expect(nativeElement.textContent).toBe('test text');
+  });
+});

client/src/app/common-components/header/header.component.spec.ts

@@ -2,27 +2,45 @@ import { TestBed } from '@angular/core/testing';
 
 import { HeadingComponent } from '../heading/heading.component';
 import { HeaderComponent } from './header.component';
+import { Component } from '@angular/core';
+
+async function setup({
+  template,
+}: {
+  template?: string;
+} = {}) {
+  @Component({
+    template,
+  })
+  class TestComponent {}
 
-async function setup() {
   await TestBed.configureTestingModule({
-    declarations: [HeaderComponent, HeadingComponent],
+    declarations: [HeaderComponent, TestComponent, HeadingComponent],
   }).compileComponents();
 
-  const fixture = TestBed.createComponent(HeaderComponent);
+  const fixture = TestBed.createComponent(TestComponent);
+  const debugElement = fixture.debugElement.children[0];
+  fixture.detectChanges();
 
   return {
     fixture,
-    component: fixture.componentInstance,
-    element: fixture.nativeElement as HTMLElement,
+    nativeElement: debugElement.nativeElement as HTMLElement,
   };
 }
 
 describe('HeaderComponent', () => {
+  it('render content', async () => {
+    const { nativeElement } = await setup({
+      template: '<app-header>test text</app-header>',
+    });
+    expect(nativeElement.textContent).toBe('test text');
+  });
+
   it('render title', async () => {
-    const { fixture, component, element } = await setup();
-    component.title = 'test title';
-    fixture.detectChanges();
-    expect(element.querySelector('app-heading')?.textContent).toBe(
+    const { nativeElement } = await setup({
+      template: '<app-header title="test title"></app-header>',
+    });
+    expect(nativeElement.querySelector('app-heading')?.textContent).toBe(
       'test title'
     );
   });

client/src/app/common-components/heading/heading.component.spec.ts

@@ -1,34 +1,46 @@
 import { TestBed } from '@angular/core/testing';
-
+import { Component } from '@angular/core';
 import { HeadingComponent } from './heading.component';
 
-async function setup() {
+async function setup({
+  template,
+}: {
+  template?: string;
+} = {}) {
+  @Component({
+    template,
+  })
+  class TestComponent {}
+
   await TestBed.configureTestingModule({
-    declarations: [HeadingComponent],
+    declarations: [TestComponent, HeadingComponent],
   }).compileComponents();
 
-  const fixture = TestBed.createComponent(HeadingComponent);
+  const fixture = TestBed.createComponent(TestComponent);
+  const debugElement = fixture.debugElement.children[0];
+  fixture.detectChanges();
 
   return {
     fixture,
-    component: fixture.componentInstance,
-    element: fixture.nativeElement as HTMLElement,
+    nativeElement: debugElement.nativeElement as HTMLElement,
   };
 }
 
 describe('HeadingComponent', () => {
+  it('renders content', async () => {
+    const { nativeElement } = await setup({ template: '<app-heading>test text</app-heading>'});
+    expect(nativeElement.textContent).toContain('test text');
+  });
+
   it('defaults to level 1', async () => {
-    const { element, fixture } = await setup();
-    fixture.detectChanges();
-    expect(element.className).toContain('level1');
+    const { nativeElement } = await setup({ template: '<app-heading></app-heading>'});
+    expect(nativeElement.className).toContain('level1');
   });
 
   [1, 2, 3, 4, 5, 6].forEach((level) => {
     it(`renderes level ${level}`, async () => {
-      const { component, element, fixture } = await setup();
-      component.level = level;
-      fixture.detectChanges();
-      expect(element.className).toContain(`level${level}`);
+      const { nativeElement } = await setup({ template: `<app-heading level="${level}"></app-heading>`});
+      expect(nativeElement.className).toContain(`level${level}`);
     });
   });
 });

client/src/app/common-components/main/main.component.spec.ts

@@ -0,0 +1,37 @@
+import { TestBed } from '@angular/core/testing';
+
+import { Component } from '@angular/core';
+import { MainComponent } from './main.component';
+
+async function setup({
+  template,
+}: {
+  template?: string;
+} = {}) {
+  @Component({
+    template,
+  })
+  class TestComponent {}
+
+  await TestBed.configureTestingModule({
+    declarations: [MainComponent, TestComponent],
+  }).compileComponents();
+
+  const fixture = TestBed.createComponent(TestComponent);
+  const debugElement = fixture.debugElement.children[0];
+  fixture.detectChanges();
+
+  return {
+    fixture,
+    nativeElement: debugElement.nativeElement as HTMLElement,
+  };
+}
+
+describe('MainComponent', () => {
+  it('renders content', async () => {
+    const { nativeElement } = await setup({
+      template: '<app-main>test text</app-main>',
+    });
+    expect(nativeElement.textContent).toBe('test text');
+  });
+});

client/src/app/common-components/notification.service.spec.ts

@@ -1,16 +1,55 @@
 import { TestBed } from '@angular/core/testing';
 
-import { NotificationService } from './notification.service';
+import { Notification, NotificationService } from './notification.service';
 
-describe('NotificationService', () => {
-  let service: NotificationService;
+function setup() {
+  TestBed.configureTestingModule({});
+
+  const service = TestBed.inject(NotificationService);
+  return { service };
+}
 
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-    service = TestBed.inject(NotificationService);
+describe('NotificationService', () => {
+  it('stores notifications', () => {
+    const notifications: Notification[] = [];
+    const { service } = setup();
+    service.$notifications.subscribe((notification) =>
+      notifications.push(notification)
+    );
+    service.showNotification('test notification');
+    expect(notifications).toHaveSize(1);
+    expect(notifications[0]).toEqual({
+      type: 'success',
+      message: 'test notification',
+    });
   });
 
-  it('should be created', () => {
-    expect(service).toBeTruthy();
+  it('stores multiple notifications', () => {
+    const notifications: Notification[] = [];
+    const { service } = setup();
+    service.$notifications.subscribe((notification) =>
+      notifications.push(notification)
+    );
+    service.showNotification('test notification 1');
+    service.showNotification('test notification 2', 'error');
+    service.showNotification('test notification 3', 'success');
+    service.showNotification('test notification 4', 'error');
+    expect(notifications).toHaveSize(4);
+    expect(notifications[0]).toEqual({
+      type: 'success',
+      message: 'test notification 1',
+    });
+    expect(notifications[1]).toEqual({
+      type: 'error',
+      message: 'test notification 2',
+    });
+    expect(notifications[2]).toEqual({
+      type: 'success',
+      message: 'test notification 3',
+    });
+    expect(notifications[3]).toEqual({
+      type: 'error',
+      message: 'test notification 4',
+    });
   });
 });

client/src/app/common-components/notification/notification.component.spec.ts

@@ -1,25 +1,63 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { TestBed } from '@angular/core/testing';
 
-import { NotificationComponent } from './notification.component';
+import { Component } from '@angular/core';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { NotificationComponent } from './notification.component';
+
+async function setup({
+  template,
+}: {
+  template?: string;
+} = {}) {
+  @Component({
+    template,
+  })
+  class TestComponent {}
+
+  await TestBed.configureTestingModule({
+    declarations: [NotificationComponent, TestComponent],
+    imports: [NoopAnimationsModule],
+  }).compileComponents();
+
+  const fixture = TestBed.createComponent(TestComponent);
+  const debugElement = fixture.debugElement.children[0];
+  fixture.detectChanges();
+
+  return {
+    fixture,
+    nativeElement: debugElement.nativeElement as HTMLElement,
+  };
+}
 
 describe('NotificationComponent', () => {
-  let component: NotificationComponent;
-  let fixture: ComponentFixture<NotificationComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ NotificationComponent ],
-      imports: [NoopAnimationsModule]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(NotificationComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
+  it('renders content', async () => {
+    const { nativeElement } = await setup({
+      template: '<app-notification>Test notification</app-notification>',
+    });
+    expect(nativeElement.textContent).toBe('Test notification');
   });
 
-  it('should create', () => {
-    expect(component).toBeTruthy();
+  it('defaults to success type', async () => {
+    const { nativeElement } = await setup({
+      template: '<app-notification></app-notification>',
+    });
+
+    expect(nativeElement.classList.contains('success')).toBe(true);
+  });
+
+  it('renders success type', async () => {
+    const { nativeElement } = await setup({
+      template: '<app-notification type="success"></app-notification>',
+    });
+
+    expect(nativeElement.classList.contains('success')).toBe(true);
+  });
+
+  it('renders error type', async () => {
+    const { nativeElement } = await setup({
+      template: '<app-notification type="error"></app-notification>',
+    });
+
+    expect(nativeElement.classList.contains('error')).toBe(true);
   });
 });