Adjusting some frontend tests

Frontend/karma.conf.js

@@ -2,32 +2,35 @@
 // https://karma-runner.github.io/1.0/config/configuration-file.html
 
 module.exports = function (config) {
-  config.set({
-    basePath: '',
-    frameworks: ['jasmine', '@angular-devkit/build-angular'],
-    plugins: [
-      require('karma-jasmine'),
-      require('karma-firefox-launcher'),
-      require('karma-chrome-launcher'),
-      require('karma-jasmine-html-reporter'),
-      require('karma-coverage-istanbul-reporter'),
-      require('@angular-devkit/build-angular/plugins/karma')
-    ],
-    client: {
-      clearContext: false // leave Jasmine Spec Runner output visible in browser
-    },
-    coverageIstanbulReporter: {
-      dir: require('path').join(__dirname, './coverage/Betterzon'),
-      reports: ['html', 'lcovonly', 'text-summary'],
-      fixWebpackSourcePaths: true
-    },
-    reporters: ['progress', 'kjhtml'],
-    port: 9876,
-    colors: true,
-    logLevel: config.LOG_INFO,
-    autoWatch: true,
-    browsers: ['Firefox'],
-    singleRun: false,
-    restartOnFileChange: true
-  });
+    config.set({
+        basePath: '',
+        frameworks: ['jasmine', '@angular-devkit/build-angular'],
+        plugins: [
+            require('karma-jasmine'),
+            require('karma-firefox-launcher'),
+            require('karma-chrome-launcher'),
+            require('karma-jasmine-html-reporter'),
+            require('karma-coverage-istanbul-reporter'),
+            require('@angular-devkit/build-angular/plugins/karma')
+        ],
+        client: {
+            clearContext: false, // leave Jasmine Spec Runner output visible in browser
+            jasmine: {
+                random: false
+            }
+        },
+        coverageIstanbulReporter: {
+            dir: require('path').join(__dirname, './coverage/Betterzon'),
+            reports: ['html', 'lcovonly', 'text-summary'],
+            fixWebpackSourcePaths: true
+        },
+        reporters: ['progress', 'kjhtml'],
+        port: 9876,
+        colors: true,
+        logLevel: config.LOG_INFO,
+        autoWatch: true,
+        browsers: ['Firefox'],
+        singleRun: false,
+        restartOnFileChange: true
+    });
 };

Frontend/src/app/app.component.spec.ts

@@ -1,8 +1,8 @@
 import {TestBed} from '@angular/core/testing';
 import {AppComponent} from './app.component';
-import {RouterTestingModule} from "@angular/router/testing";
-import {NgcCookieConsentConfig, NgcCookieConsentModule} from "ngx-cookieconsent";
-import {FormsModule} from "@angular/forms";
+import {RouterTestingModule} from '@angular/router/testing';
+import {NgcCookieConsentConfig, NgcCookieConsentModule} from 'ngx-cookieconsent';
+import {FormsModule} from '@angular/forms';
 
 // For cookie consent module testing
 const cookieConfig: NgcCookieConsentConfig = {

Frontend/src/app/app.component.ts

@@ -1,7 +1,7 @@
 import {Component, OnDestroy, OnInit} from '@angular/core';
 import {NgcCookieConsentService, NgcInitializeEvent, NgcNoCookieLawEvent, NgcStatusChangeEvent} from 'ngx-cookieconsent';
 import {Subscription} from 'rxjs';
-import {ApiService} from "./services/api.service";
+import {ApiService} from './services/api.service';
 
 
 @Component({
@@ -26,8 +26,7 @@ export class AppComponent implements OnInit, OnDestroy {
     username?: string;
 
     constructor(
-        private ccService: NgcCookieConsentService,
-        private api: ApiService
+        private ccService: NgcCookieConsentService
     ) {
     }
 

Frontend/src/app/app.module.ts

@@ -38,7 +38,7 @@ import { CopyrightComponent } from './components/copyright/copyright.component';
 import { GreetingInfoSliderComponent } from './components/greeting-info-slider/greeting-info-slider.component';
 import { KundenComponent } from './components/kunden/kunden.component';
 import { AboutUsComponent } from './components/about-us/about-us.component';
-import { ProfileComponent } from './components/profile/profile.component';
+import { ProfileComponent } from './pages/profile/profile.component';
 import { ProfilePageComponent } from './pages/profile-page/profile-page.component';
 
 // For cookie popup

Frontend/src/app/app.routing.ts

@@ -9,10 +9,10 @@ import {ProductSearchPageComponent} from './pages/product-search-page/product-se
 import {PageNotFoundPageComponent} from './pages/page-not-found-page/page-not-found-page.component';
 import {ImprintComponent} from './pages/imprint/imprint.component';
 import {PrivacyComponent} from './pages/privacy/privacy.component';
-import {SigninComponent} from "./components/auth/signin/signin.component";
-import {RegistrationComponent} from "./components/auth/registration/registration.component";
-import {ProfileComponent} from "./components/profile/profile.component";
-import {ProfilePageComponent} from "./pages/profile-page/profile-page.component";
+import {SigninComponent} from './components/auth/signin/signin.component';
+import {RegistrationComponent} from './components/auth/registration/registration.component';
+import {ProfileComponent} from './pages/profile/profile.component';
+import {ProfilePageComponent} from './pages/profile-page/profile-page.component';
 
 const routes: Routes = [
     {path: '', component: LandingpageComponent, pathMatch: 'full'},
@@ -22,8 +22,8 @@ const routes: Routes = [
     {path: 'datenschutz', component: PrivacyComponent},
     {path: 'signin', component: SigninComponent},
     {path: 'registration', component: RegistrationComponent},
-    {path: "product-detail", component: ProductDetailPageComponent},
-    {path: "profile", component: ProfilePageComponent},
+    {path: 'product-detail', component: ProductDetailPageComponent},
+    {path: 'profile', component: ProfilePageComponent},
     {path: '**', component: PageNotFoundPageComponent}
 ];
 

Frontend/src/app/components/auth/registration/registration.component.spec.ts

@@ -1,25 +1,54 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
 
-import { RegistrationComponent } from './registration.component';
+import {RegistrationComponent} from './registration.component';
+import {AbstractMockObservableService} from '../../../mocks/mock.service';
+import {ApiService} from '../../../services/api.service';
+import {FormBuilder, FormControl, Validators} from '@angular/forms';
+import {Router} from '@angular/router';
+
+class MockApiService extends AbstractMockObservableService {
+    registerUser(username: string, password: string, email: string): any {
+        this.content = [];
+        return this;
+    }
+}
 
 describe('RegistrationComponent', () => {
-  let component: RegistrationComponent;
-  let fixture: ComponentFixture<RegistrationComponent>;
+    let component: RegistrationComponent;
+    let fixture: ComponentFixture<RegistrationComponent>;
+    let mockService;
+    let formBuilder: FormBuilder;
+    const router = {
+        navigate: jasmine.createSpy('navigate'),
+        routerState: jasmine.createSpy('routerState')
+    };
 
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ RegistrationComponent ]
-    })
-    .compileComponents();
-  });
+    beforeEach(async () => {
+        mockService = new MockApiService();
+        await TestBed.configureTestingModule({
+            declarations: [RegistrationComponent],
+            providers: [{provide: ApiService, useValue: mockService}, {provide: Router, useValue: router}, FormBuilder]
+        })
+            .compileComponents();
+    });
 
-  beforeEach(() => {
-    fixture = TestBed.createComponent(RegistrationComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
+    beforeEach(() => {
+        fixture = TestBed.createComponent(RegistrationComponent);
+        component = fixture.componentInstance;
+        formBuilder = TestBed.get(FormBuilder);
+        component.form = formBuilder.group({
+            recipientTypes: new FormControl(
+                {
+                    value: ['mock'],
+                    disabled: true
+                },
+                Validators.required
+            )
+        });
+        fixture.detectChanges();
+    });
 
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
 });

Frontend/src/app/components/auth/signin/signin.component.spec.ts

@@ -1,25 +1,54 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
 
-import { SigninComponent } from './signin.component';
+import {SigninComponent} from './signin.component';
+import {AbstractMockObservableService} from '../../../mocks/mock.service';
+import {ApiService} from '../../../services/api.service';
+import {FormBuilder, FormControl, Validators} from '@angular/forms';
+import {Router} from '@angular/router';
+
+class MockApiService extends AbstractMockObservableService {
+    loginUser(username: string, password: string): any {
+        this.content = [];
+        return this;
+    }
+}
 
 describe('SigninComponent', () => {
-  let component: SigninComponent;
-  let fixture: ComponentFixture<SigninComponent>;
+    let component: SigninComponent;
+    let fixture: ComponentFixture<SigninComponent>;
+    let mockService;
+    let formBuilder: FormBuilder;
+    const router = {
+        navigate: jasmine.createSpy('navigate'),
+        routerState: jasmine.createSpy('routerState')
+    };
 
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ SigninComponent ]
-    })
-    .compileComponents();
-  });
+    beforeEach(async () => {
+        mockService = new MockApiService();
+        await TestBed.configureTestingModule({
+            declarations: [SigninComponent],
+            providers: [{provide: ApiService, useValue: mockService}, {provide: Router, useValue: router}, FormBuilder]
+        })
+            .compileComponents();
+    });
 
-  beforeEach(() => {
-    fixture = TestBed.createComponent(SigninComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
+    beforeEach(() => {
+        fixture = TestBed.createComponent(SigninComponent);
+        component = fixture.componentInstance;
+        formBuilder = TestBed.get(FormBuilder);
+        component.loginForm = formBuilder.group({
+            recipientTypes: new FormControl(
+                {
+                    value: ['mock'],
+                    disabled: true
+                },
+                Validators.required
+            )
+        });
+        fixture.detectChanges();
+    });
 
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
 });

Frontend/src/app/components/copyright/copyright.component.css

@@ -0,0 +1,24 @@
+#imprintSection {
+    right: 1em;
+    bottom: 1em;
+    width: 100%;
+    text-align: right;
+    padding-right: 1em;
+    grid-area: right;
+}
+
+#imprintSection a {
+    color: white;
+    text-decoration: none;
+}
+
+#copyright {
+    display: grid;
+    grid-template-areas:
+        'left center right';
+    grid-template-columns: 30% 40% 30%;
+}
+
+#copyright-text {
+    grid-area: center;
+}

Frontend/src/app/components/copyright/copyright.component.html

@@ -1,3 +1,7 @@
-<div class="copyright py-4 text-center text-white">
-    <div class="container"><small>Copyright &copy; Betterzon 2021</small></div>
+<div class="copyright py-4 text-center text-white" id="copyright">
+    <div class="container" id="copyright-text"><small>Copyright &copy; Betterzon 2021</small></div>
+    <div id="imprintSection">
+        <a href="/impressum" >Imprint</a><br>
+        <a href="/datenschutz">Privacy Policy</a>
+    </div>
 </div>

Frontend/src/app/components/hot-deals-widget/hot-deals-widget.component.spec.ts

@@ -1,25 +1,58 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
 
-import { HotDealsWidgetComponent } from './hot-deals-widget.component';
+import {HotDealsWidgetComponent} from './hot-deals-widget.component';
+import {AbstractMockObservableService} from '../../mocks/mock.service';
+import {ApiService} from '../../services/api.service';
+import {ActivatedRoute, convertToParamMap, Router} from '@angular/router';
+import {Observable, of} from 'rxjs';
+
+class MockApiService extends AbstractMockObservableService {
+    getBestDeals(): any {
+        this.content = [];
+        return this;
+    }
+
+    getProductsByIds(): any {
+        this.content = [];
+        return this;
+    }
+}
+
+class ActivatedRouteMock {
+    public paramMap = of(convertToParamMap({
+        testId: 'abc123',
+        anotherId: 'd31e8b48-7309-4c83-9884-4142efdf7271',
+    }));
+}
 
 describe('HotDealsWidgetComponent', () => {
-  let component: HotDealsWidgetComponent;
-  let fixture: ComponentFixture<HotDealsWidgetComponent>;
+    let component: HotDealsWidgetComponent;
+    let fixture: ComponentFixture<HotDealsWidgetComponent>;
+    let mockService;
+    const router = {
+        navigate: jasmine.createSpy('navigate'),
+        routerState: jasmine.createSpy('routerState')
+    };
 
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ HotDealsWidgetComponent ]
-    })
-    .compileComponents();
-  });
+    beforeEach(async () => {
+        mockService = new MockApiService();
+        await TestBed.configureTestingModule({
+            declarations: [HotDealsWidgetComponent],
+            providers: [{provide: ApiService, useValue: mockService}, {provide: Router, useValue: router}, {
+                provide: ActivatedRoute,
+                useValue: ActivatedRouteMock
+            }]
+        })
+            .compileComponents();
+    });
 
-  beforeEach(() => {
-    fixture = TestBed.createComponent(HotDealsWidgetComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
+    beforeEach(() => {
+        fixture = TestBed.createComponent(HotDealsWidgetComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
 
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
 });

Frontend/src/app/components/kunden/kunden.component.spec.ts

@@ -1,25 +1,53 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
 
-import { KundenComponent } from './kunden.component';
+import {KundenComponent} from './kunden.component';
+import {AbstractMockObservableService} from '../../mocks/mock.service';
+import {ApiService} from '../../services/api.service';
+import {ActivatedRoute, convertToParamMap, Router} from '@angular/router';
+import {of} from 'rxjs';
+
+class MockApiService extends AbstractMockObservableService {
+    getProducts(): any {
+        this.content = [];
+        return this;
+    }
+}
+
+class ActivatedRouteMock {
+    public paramMap = of(convertToParamMap({
+        testId: 'abc123',
+        anotherId: 'd31e8b48-7309-4c83-9884-4142efdf7271',
+    }));
+}
 
 describe('KundenComponent', () => {
-  let component: KundenComponent;
-  let fixture: ComponentFixture<KundenComponent>;
+    let component: KundenComponent;
+    let fixture: ComponentFixture<KundenComponent>;
+    let mockService;
+    const router = {
+        navigate: jasmine.createSpy('navigate'),
+        routerState: jasmine.createSpy('routerState')
+    };
 
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ KundenComponent ]
-    })
-    .compileComponents();
-  });
+    beforeEach(async () => {
+        mockService = new MockApiService();
+        await TestBed.configureTestingModule({
+            declarations: [KundenComponent],
+            providers: [{provide: ApiService, useValue: mockService}, {provide: Router, useValue: router}, {
+                provide: ActivatedRoute,
+                useValue: ActivatedRouteMock
+            }]
+        })
+            .compileComponents();
+    });
 
-  beforeEach(() => {
-    fixture = TestBed.createComponent(KundenComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
+    beforeEach(() => {
+        fixture = TestBed.createComponent(KundenComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
 
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
 });

Frontend/src/app/components/product-details/product-details.component.spec.ts

@@ -58,6 +58,11 @@ class MockApiService extends AbstractMockObservableService {
         this.content = [vendor];
         return this;
     }
+
+    getSessionInfoFromLocalStorage(): any {
+        this.content = [];
+        return this;
+    }
 }
 
 describe('ProductDetailsComponent', () => {

Frontend/src/app/components/product-list/product-list.component.spec.ts

@@ -70,7 +70,8 @@ describe('ProductListComponent', () => {
             last_modified: new Date(),
             manufacturer_id: 1,
             selling_rank: '1',
-            category_id: 1
+            category_id: 1,
+            price: 0
         };
 
         component.clickedProduct(product);

Frontend/src/app/components/profile/profile.component.spec.ts

@@ -1,25 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { ProfileComponent } from './profile.component';
-
-describe('ProfileComponent', () => {
-  let component: ProfileComponent;
-  let fixture: ComponentFixture<ProfileComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ ProfileComponent ]
-    })
-    .compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(ProfileComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

Frontend/src/app/components/top-bar/top-bar.component.spec.ts

@@ -1,25 +1,48 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
 
-import { TopBarComponent } from './top-bar.component';
+import {TopBarComponent} from './top-bar.component';
+import {FormBuilder} from '@angular/forms';
+import {ApiService} from '../../services/api.service';
+import {Router} from '@angular/router';
+import {AbstractMockObservableService} from '../../mocks/mock.service';
+
+class MockApiService extends AbstractMockObservableService {
+    getUserInfo(): any {
+        this.content = [];
+        return this;
+    }
+
+    getSessionInfoFromLocalStorage(): any {
+        this.content = [];
+        return this;
+    }
+}
 
 describe('TopBarComponent', () => {
-  let component: TopBarComponent;
-  let fixture: ComponentFixture<TopBarComponent>;
+    let component: TopBarComponent;
+    let fixture: ComponentFixture<TopBarComponent>;
+    let mockService;
+    const router = {
+        navigate: jasmine.createSpy('navigate'),
+        routerState: jasmine.createSpy('routerState')
+    };
 
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ TopBarComponent ]
-    })
-    .compileComponents();
-  });
+    beforeEach(async () => {
+        mockService = new MockApiService();
+        await TestBed.configureTestingModule({
+            declarations: [TopBarComponent],
+            providers: [{provide: ApiService, useValue: mockService}, {provide: Router, useValue: router}]
+        })
+            .compileComponents();
+    });
 
-  beforeEach(() => {
-    fixture = TestBed.createComponent(TopBarComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
+    beforeEach(() => {
+        fixture = TestBed.createComponent(TopBarComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
 
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
 });

Frontend/src/app/pages/imprint/imprint.component.html

@@ -1,5 +1,5 @@
-<app-header [showSearch]="true"></app-header>
-<div id="imprint">
+<app-top-bar></app-top-bar>
+<div id="imprint" class="container masthead">
     <h1>Impressum</h1>
 
     <h2>Angaben gem&auml;&szlig; &sect; 5 TMG</h2>
@@ -56,4 +56,5 @@
         derartige Inhalte umgehend entfernen.
     </p>
 </div>
-<app-footer></app-footer>
+<app-bottom-bar></app-bottom-bar>
+<app-copyright></app-copyright>

Frontend/src/app/pages/landingpage/landingpage.component.ts

@@ -12,8 +12,7 @@ export class LandingpageComponent implements OnInit {
     isLoggedIn = false;
 
     constructor(
-        private router: Router,
-        private api: ApiService
+        private router: Router
     ) {
     }
 

Frontend/src/app/pages/privacy/privacy.component.html

@@ -1,5 +1,5 @@
-<app-header [showSearch]="true"></app-header>
-<div id="privacy">
+<app-top-bar></app-top-bar>
+<div id="privacy" class="container masthead">
     <h1>Datenschutz&shy;erkl&auml;rung</h1>
     <h2>1. Datenschutz auf einen Blick</h2>
     <h3>Allgemeine Hinweise</h3>
@@ -405,4 +405,5 @@
         von Font Awesome unter: <a href="https://fontawesome.com/privacy" target="_blank" rel="noopener noreferrer">https://fontawesome.com/privacy</a>.
     </p>
 </div>
-<app-footer></app-footer>
+<app-bottom-bar></app-bottom-bar>
+<app-copyright></app-copyright>

Frontend/src/app/pages/profile/profile.component.spec.ts

@@ -0,0 +1,47 @@
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {ProfileComponent} from './profile.component';
+import {AbstractMockObservableService} from '../../mocks/mock.service';
+import {ApiService} from '../../services/api.service';
+
+class MockApiService extends AbstractMockObservableService {
+    getUserInfo(): any {
+        this.content = [];
+        return this;
+    }
+
+    getPriceAlarms(): any {
+        this.content = [];
+        return this;
+    }
+
+    getProductsByIds(): any {
+        this.content = [];
+        return this;
+    }
+}
+
+describe('ProfileComponent', () => {
+    let component: ProfileComponent;
+    let fixture: ComponentFixture<ProfileComponent>;
+    let mockService;
+
+    beforeEach(async () => {
+        mockService = new MockApiService();
+        await TestBed.configureTestingModule({
+            declarations: [ProfileComponent],
+            providers: [{provide: ApiService, useValue: mockService}]
+        })
+            .compileComponents();
+    });
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(ProfileComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});

Frontend/src/app/services/api.service.ts

@@ -106,7 +106,7 @@ export class ApiService {
         let asin = '';
 
         // Check if the parameter is a link or an asin
-        const linkRegex: RegExp = /^http[s]{0,1}:\/\/.*\/dp\/(.[^\/]*)\/{0,1}.*$/;
+        const linkRegex: RegExp = /^http[s]?:\/\/.*\/dp\/(.[^\/]*)\/?.*$/;
         const matches = linkRegex.exec(asinOrLink);
         if (matches) {
             // param is a link, extract asin