update to ionic 5 and angular 9

.gitlab-ci.yml

+#before_script:
+#  - which node
+#  - node --version
+#  - which npm
+#  - npm --version
+#  - npm install
+#  - which coverage
+#stages:
+#  - test
+#  - deploy
+#coverage:
+#  stage: test
+#  script:
+#    - coverage run --rcfile=.coveragerc tests.py
+#    - coverage combine
+#    - coverage report -m
+#  coverage: '/^TOTAL.+?(\d+\%)$/'
+#  tags:
+#    - python
+#    - pip
+#    - flask

README.md

+[![pipeline status](https://scm.cms.hu-berlin.de/callidus/mc_frontend/badges/master/pipeline.svg)](https://scm.cms.hu-berlin.de/callidus/mc_frontend/-/commits/master)
+[![coverage report](https://scm.cms.hu-berlin.de/callidus/mc_frontend/badges/master/coverage.svg)](https://scm.cms.hu-berlin.de/callidus/mc_frontend/-/commits/master)
+
 # Installation 
 ## via Docker:
 1. Install Docker (https://docs.docker.com/v17.12/install/) and Docker-Compose (https://docs.docker.com/compose/install/)
@@ -5,9 +8,9 @@
     `git clone https://scm.cms.hu-berlin.de/callidus/mc_frontend.git`
 3. Move to the newly created folder:
     `cd mc_frontend`
-4. Run `docker-compose build`.
-Make sure to assign at least 4GB RAM (Memory) to the Docker container, otherwise the build will fail.
-5. Run `docker-compose up -d` and enjoy!
+4. Make sure to assign at least 4GB RAM (Memory) to the Docker engine, otherwise the build will fail.
+5. Run `docker-compose build`.
+6. Run `docker-compose up -d` and enjoy!
 
 ## via Command Line:
 1. Clone the repo: `git clone https://scm.cms.hu-berlin.de/callidus/mc_frontend.git`
@@ -40,3 +43,7 @@ To change the URL for the backend, use the `ionic.config.json` file (proxies > p
 Use the `--host 0.0.0.0 --disable-host-check` flag for `ng serve` if you want to use it in a production environment with an Nginx server using proxy_pass.
 ## Other
 For all other kinds of configuration, use `src/configMC.ts`.
+
+----------------------------------------------------------------
+# Testing
+To test the application and check the code coverage, run `npm run test`.

angular.json

@@ -72,7 +72,7 @@
           }
         },
         "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
+          "builder": "@angular-builders/custom-webpack:dev-server",
           "options": {
             "browserTarget": "app:build",
             "proxyConfig": "proxy.conf.json"
@@ -93,7 +93,7 @@
           }
         },
         "test": {
-          "builder": "@angular-devkit/build-angular:karma",
+          "builder": "@angular-builders/custom-webpack:karma",
           "options": {
             "main": "src/test.ts",
             "polyfills": "src/polyfills.ts",

package.json

 {
   "name": "mc_frontend",
-  "version": "1.5.4",
+  "version": "1.5.6",
   "author": "Ionic Framework",
   "homepage": "https://ionicframework.com/",
   "scripts": {
     "ng": "ng",
     "start": "ng serve --port 8100",
     "build": "ng build",
-    "test": "ng test",
+    "test": "ng test --code-coverage --watch=false",
     "lint": "ng lint",
     "e2e": "ng e2e"
   },
   "private": true,
   "dependencies": {
-    "@angular/common": "^7.2.10",
-    "@angular/core": "^7.2.10",
-    "@angular/forms": "^7.2.10",
-    "@angular/http": "^7.2.10",
-    "@angular/platform-browser": "^7.2.10",
-    "@angular/platform-browser-dynamic": "^7.2.10",
-    "@angular/router": "^7.2.10",
-    "@ionic-native/core": "^5.6.0",
-    "@ionic-native/splash-screen": "^5.6.0",
-    "@ionic-native/status-bar": "^5.6.0",
-    "@ionic/angular": "^4.3.1",
-    "@ionic/core": "^4.4.0",
+    "@angular-builders/custom-webpack": "^9.0.0",
+    "@angular/common": "^9.0.4",
+    "@angular/core": "^9.0.4",
+    "@angular/forms": "^9.0.4",
+    "@angular/platform-browser": "^9.0.4",
+    "@angular/platform-browser-dynamic": "^9.0.4",
+    "@angular/router": "^9.0.4",
+    "@ionic-native/core": "^5.21.6",
+    "@ionic-native/splash-screen": "^5.21.6",
+    "@ionic-native/status-bar": "^5.21.6",
+    "@ionic/angular": "^5.0.4",
+    "@ionic/core": "^4.11.10",
     "@ionic/storage": "^2.2.0",
-    "@ngtools/webpack": "^7.3.9",
+    "@ngtools/webpack": "^9.0.4",
     "@ngx-translate/core": "^11.0.1",
     "@ngx-translate/http-loader": "^4.0.0",
     "cordova-browser": "5.0.4",
-    "cordova-plugin-device": "^2.0.2",
-    "cordova-plugin-ionic-keyboard": "^2.1.3",
-    "cordova-plugin-ionic-webview": "^4.0.1",
-    "cordova-plugin-splashscreen": "^5.0.2",
-    "cordova-plugin-statusbar": "^2.4.2",
-    "cordova-plugin-whitelist": "^1.3.3",
-    "core-js": "^2.5.4",
-    "rxjs": "~6.5.1",
-    "tslib": "^1.9.0",
-    "zone.js": "~0.8.29"
+    "cordova-plugin-device": "^2.0.3",
+    "cordova-plugin-ionic-keyboard": "^2.2.0",
+    "cordova-plugin-ionic-webview": "^4.1.3",
+    "cordova-plugin-splashscreen": "^5.0.3",
+    "cordova-plugin-statusbar": "^2.4.3",
+    "cordova-plugin-whitelist": "^1.3.4",
+    "core-js": "^2.6.11",
+    "rxjs": "^6.5.4",
+    "tslib": "^1.11.1",
+    "webpack": "^4.42.0",
+    "zone.js": "^0.10.2"
   },
   "devDependencies": {
     "@angular-devkit/architect": "~0.13.8",
-    "@angular-devkit/build-angular": "^0.13.9",
+    "@angular-devkit/build-angular": "^0.900.4",
     "@angular-devkit/core": "~7.3.8",
     "@angular-devkit/schematics": "~7.3.8",
-    "@angular/cli": "~7.3.8",
-    "@angular/compiler": "^7.2.10",
-    "@angular/compiler-cli": "^7.2.10",
-    "@angular/language-service": "~7.2.2",
+    "@angular/cli": "^9.0.4",
+    "@angular/compiler": "^9.0.4",
+    "@angular/compiler-cli": "^9.0.4",
+    "@angular/language-service": "^7.2.16",
     "@ionic/angular-toolkit": "~1.5.1",
     "@types/jasmine": "~2.8.8",
-    "@types/jasminewd2": "~2.0.3",
-    "@types/node": "~12.0.0",
-    "codelyzer": "~4.5.0",
+    "@types/jasminewd2": "^2.0.8",
+    "@types/node": "^12.0.12",
+    "codelyzer": "^5.2.1",
     "jasmine-core": "~2.99.1",
     "jasmine-spec-reporter": "~4.2.1",
     "karma": "~4.1.0",
     "karma-chrome-launcher": "~2.2.0",
-    "karma-coverage-istanbul-reporter": "~2.0.1",
+    "karma-coverage-istanbul-reporter": "^2.0.6",
     "karma-jasmine": "~1.1.2",
     "karma-jasmine-html-reporter": "^0.2.2",
-    "protractor": "~5.4.0",
-    "ts-node": "~8.1.0",
+    "protractor": "^5.4.3",
+    "ts-node": "^8.1.1",
     "tslint": "~5.16.0",
-    "typescript": "~3.1.6"
+    "typescript": "^3.6.5"
   },
   "description": "An Ionic project",
   "cordova": {

src/app/app.component.html

 <ion-app>
-    <ion-menu contentId="content1" side="end" menuId="{{HelperService.menuId}}">
+    <ion-menu contentId="content1" side="end" menuId="{{configMC.menuId}}">
         <ion-header>
             <ion-toolbar>
                 <ion-title>{{ 'MACHINA_CALLIDA' | translate }}</ion-title>
                 <ion-buttons slot="end">
                     <ion-button (click)="closeMenu(true)">
-                        <ion-icon name="close-circle"></ion-icon>
+                        <ion-icon name="md-close-circle"></ion-icon>
                     </ion-button>
                 </ion-buttons>
             </ion-toolbar>
         </ion-header>
-        <ion-content padding>
+        <ion-content class="ion-padding">
             <ion-grid style="text-align: left">
                 <ion-row>
                     <ion-col>
@@ -73,6 +73,13 @@
                                 </a>
                             </ion-col>
                         </ion-row>
+                        <ion-row>
+                            <ion-col>
+                                <a (click)="HelperService.goToSourcesPage(navCtrl).then(closeMenu.bind(this))">
+                                    {{ 'SOURCES' | translate }}
+                                </a>
+                            </ion-col>
+                        </ion-row>
                     </ion-grid>
                 </ion-row>
             </ion-grid>

src/app/app.component.spec.ts

-import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { TestBed, async } from '@angular/core/testing';
+import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
+import {TestBed, async} from '@angular/core/testing';
 
-import { Platform } from '@ionic/angular';
-import { SplashScreen } from '@ionic-native/splash-screen/ngx';
-import { StatusBar } from '@ionic-native/status-bar/ngx';
+import {MenuController, Platform} from '@ionic/angular';
+import {SplashScreen} from '@ionic-native/splash-screen/ngx';
+import {StatusBar} from '@ionic-native/status-bar/ngx';
 
-import { AppComponent } from './app.component';
+import {AppComponent} from './app.component';
+import {HttpClientModule} from '@angular/common/http';
+import {IonicStorageModule} from '@ionic/storage';
+import {AppRoutingModule} from './app-routing.module';
+import {TranslateTestingModule} from './translate-testing/translate-testing.module';
+import {APP_BASE_HREF} from '@angular/common';
+import {Subscription} from 'rxjs';
 
 describe('AppComponent', () => {
+    class PlatformStub {
+        backButton = {
+            subscribeWithPriority(priority: number, callback: () => (Promise<any> | void)): Subscription {
+                return Subscription.EMPTY;
+            }
+        };
+        wasReadyCalled = false;
 
-  let statusBarSpy, splashScreenSpy, platformReadySpy, platformSpy;
-
-  beforeEach(async(() => {
-    statusBarSpy = jasmine.createSpyObj('StatusBar', ['styleDefault']);
-    splashScreenSpy = jasmine.createSpyObj('SplashScreen', ['hide']);
-    platformReadySpy = Promise.resolve();
-    platformSpy = jasmine.createSpyObj('Platform', { ready: platformReadySpy });
-
-    TestBed.configureTestingModule({
-      declarations: [AppComponent],
-      schemas: [CUSTOM_ELEMENTS_SCHEMA],
-      providers: [
-        { provide: StatusBar, useValue: statusBarSpy },
-        { provide: SplashScreen, useValue: splashScreenSpy },
-        { provide: Platform, useValue: platformSpy },
-      ],
-    }).compileComponents();
-  }));
-
-  it('should create the app', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
-    expect(app).toBeTruthy();
-  });
-
-  it('should initialize the app', async () => {
-    TestBed.createComponent(AppComponent);
-    expect(platformSpy.ready).toHaveBeenCalled();
-    await platformReadySpy;
-    expect(statusBarSpy.styleDefault).toHaveBeenCalled();
-    expect(splashScreenSpy.hide).toHaveBeenCalled();
-  });
-
-  // TODO: add more tests!
+        public ready(): Promise<any> {
+            this.wasReadyCalled = true;
+            return Promise.resolve();
+        }
+    }
+
+    let statusBarSpy, splashScreenSpy, platformReadySpy;
+    beforeEach(async(() => {
+        platformReadySpy = Promise.resolve();
+        statusBarSpy = jasmine.createSpyObj('StatusBar', ['styleDefault']);
+        splashScreenSpy = jasmine.createSpyObj('SplashScreen', ['hide']);
+
+        TestBed.configureTestingModule({
+            declarations: [AppComponent],
+            imports: [
+                AppRoutingModule,
+                HttpClientModule,
+                IonicStorageModule.forRoot({name: 'mc_db', driverOrder: ['indexeddb', 'websql', 'localstorage']}),
+                TranslateTestingModule
+            ],
+            schemas: [CUSTOM_ELEMENTS_SCHEMA],
+            providers: [
+                {provide: StatusBar, useValue: statusBarSpy},
+                {provide: SplashScreen, useValue: splashScreenSpy},
+                {provide: Platform, useClass: PlatformStub},
+                {provide: APP_BASE_HREF, useValue: '/'},
+                {provide: MenuController}
+            ],
+        }).compileComponents();
+    }));
+
+    it('should create the app', () => {
+        const fixture = TestBed.createComponent(AppComponent);
+        const app = fixture.debugElement.componentInstance;
+        expect(app).toBeTruthy();
+    });
+
+    it('should initialize the app', async () => {
+        TestBed.createComponent(AppComponent);
+        const platformStub: PlatformStub = TestBed.get(Platform);
+        expect(platformStub.wasReadyCalled).toBeTruthy();
+        await platformReadySpy;
+        expect(statusBarSpy.styleDefault).toHaveBeenCalled();
+        expect(splashScreenSpy.hide).toHaveBeenCalled();
+    });
+
+    // TODO: add more tests!
 
 });

src/app/app.component.ts

@@ -4,17 +4,19 @@ import {Config, MenuController, NavController, Platform} from '@ionic/angular';
 import {SplashScreen} from '@ionic-native/splash-screen/ngx';
 import {TranslateService} from '@ngx-translate/core';
 import {HelperService} from 'src/app/helper.service';
+import configMC from '../configMC';
 
 @Component({
     selector: 'app-root',
     templateUrl: 'app.component.html'
 })
 export class AppComponent {
+    public configMC = configMC;
     public HelperService = HelperService;
 
     constructor(platform: Platform,
                 public statusBar: StatusBar,
-                private translate: TranslateService,
+                public translate: TranslateService,
                 private config: Config,
                 private splashScreen: SplashScreen,
                 public helperService: HelperService,
@@ -31,7 +33,7 @@ export class AppComponent {
     }
 
     closeMenu(result: boolean) {
-        this.menuCtrl.close(HelperService.menuId).then();
+        this.menuCtrl.close(configMC.menuId).then();
     }
 
     initTranslate() {

src/app/app.module.ts

@@ -19,8 +19,8 @@ import {APP_BASE_HREF} from '@angular/common';
     declarations: [AppComponent],
     entryComponents: [],
     imports: [
-        BrowserModule,
         IonicModule.forRoot(),
+        BrowserModule,
         AppRoutingModule,
         IonicStorageModule.forRoot({name: 'mc_db', driverOrder: ['indexeddb', 'websql', 'localstorage']}),
         HttpClientModule,
@@ -42,7 +42,7 @@ import {APP_BASE_HREF} from '@angular/common';
         SplashScreen,
         {provide: RouteReuseStrategy, useClass: IonicRouteStrategy},
     ],
-    bootstrap: [AppComponent]
+    bootstrap: [AppComponent],
 })
 export class AppModule {
 }

src/app/author-detail/author-detail.page.html

@@ -10,13 +10,15 @@
         <ion-spinner *ngIf="HelperService.isLoading"></ion-spinner>
         <ion-title *ngIf="HelperService.applicationState | async as state">{{ state.currentSetup.currentAuthor?.name }}</ion-title>
         <ion-buttons slot="end">
-            <ion-menu-button autoHide="false"></ion-menu-button>
+            <ion-menu-button autoHide="false">
+                <ion-icon name="md-menu"></ion-icon>
+            </ion-menu-button>
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
 
 
-<ion-content padding>
+<ion-content class="ion-padding">
     <ion-list *ngIf="HelperService.applicationState | async as state">
         <ion-item *ngFor="let corpus of state.currentSetup.currentAuthor?.corpora">
             <button (click)="showPossibleReferences(corpus)">

src/app/author-detail/author-detail.page.spec.ts

-import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
 
-import { AuthorDetailPage } from './author-detail.page';
+import {AuthorDetailPage} from './author-detail.page';
+import {RouterModule} from '@angular/router';
+import {HttpClientModule} from '@angular/common/http';
+import {IonicStorageModule} from '@ionic/storage';
+import {TranslateTestingModule} from '../translate-testing/translate-testing.module';
+import {APP_BASE_HREF} from '@angular/common';
 
 describe('AuthorDetailPage', () => {
-  let component: AuthorDetailPage;
-  let fixture: ComponentFixture<AuthorDetailPage>;
+    let component: AuthorDetailPage;
+    let fixture: ComponentFixture<AuthorDetailPage>;
 
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ AuthorDetailPage ],
-      schemas: [CUSTOM_ELEMENTS_SCHEMA],
-    })
-    .compileComponents();
-  }));
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            declarations: [AuthorDetailPage],
+            imports: [
+                HttpClientModule,
+                IonicStorageModule.forRoot(),
+                RouterModule.forRoot([]),
+                TranslateTestingModule
+            ],
+            providers: [
+                {provide: APP_BASE_HREF, useValue: '/'},
+            ],
+            schemas: [CUSTOM_ELEMENTS_SCHEMA],
+        })
+            .compileComponents();
+    }));
 
-  beforeEach(() => {
-    fixture = TestBed.createComponent(AuthorDetailPage);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
+    beforeEach(() => {
+        fixture = TestBed.createComponent(AuthorDetailPage);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
 
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
 });

src/app/author/author.page.html

@@ -10,12 +10,14 @@
         <ion-spinner *ngIf="HelperService.isLoading"></ion-spinner>
         <ion-title>{{ 'AUTHOR_SELECT' | translate }}</ion-title>
         <ion-buttons slot="end">
-            <ion-menu-button autoHide="false"></ion-menu-button>
+            <ion-menu-button autoHide="false">
+                <ion-icon name="md-menu"></ion-icon>
+            </ion-menu-button>
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
 
-<ion-content padding>
+<ion-content class="ion-padding">
     <ion-grid>