update to ionic 5 and angular 9

1a9692da · Konstantin Schulz · e42b1b16 · 1a9692da · 1a9692da · 1a9692da
Commit 1a9692da authored Mar 02, 2020 by Konstantin Schulz
65 changed files
--- a/.gitlab-ci.yml
+++ b/.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
--- a/README.md
+++ b/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`.
--- a/angular.json
+++ b/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",

--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/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": {

--- a/src/app/app.component.html
+++ b/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>

--- a/src/app/app.component.spec.ts
+++ b/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!

 });
--- a/src/app/app.component.ts
+++ b/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() {

--- a/src/app/app.module.ts
+++ b/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 {
 }
--- a/src/app/author-detail/author-detail.page.html
+++ b/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)">

--- a/src/app/author-detail/author-detail.page.spec.ts
+++ b/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();
+    });
 });
--- a/src/app/author/author.page.html
+++ b/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>
        <ion-row>
            <ion-col>
@@ -50,7 +52,7 @@
        <ion-row>
            <ion-col size="12">
                <label>
-                    <ion-icon name="search" class="search"></ion-icon>
+                    <ion-icon name="md-search" class="search"></ion-icon>
                    <input type="search" (ngModelChange)="getAuthors($event.toString())"
                           placeholder="{{ 'AUTHOR_SEARCH' | translate }}" [(ngModel)]="currentSearchValue"/>
                </label>

--- a/src/app/author/author.page.spec.ts
+++ b/src/app/author/author.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 { AuthorPage } from './author.page';
+import {AuthorPage} from './author.page';
+import {FormsModule} from '@angular/forms';
+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('AuthorPage', () => {
-  let component: AuthorPage;
-  let fixture: ComponentFixture<AuthorPage>;
+    let component: AuthorPage;
+    let fixture: ComponentFixture<AuthorPage>;

-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ AuthorPage ],
-      schemas: [CUSTOM_ELEMENTS_SCHEMA],
-    })
-    .compileComponents();
-  }));
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            declarations: [
+                AuthorPage,
+            ],
+            imports: [
+                FormsModule,
+                HttpClientModule,
+                IonicStorageModule.forRoot(),
+                RouterModule.forRoot([]),
+                TranslateTestingModule,
+            ],
+            providers: [
+                {provide: APP_BASE_HREF, useValue: '/'},
+            ],
+            schemas: [CUSTOM_ELEMENTS_SCHEMA],
+        })
+            .compileComponents();
+    }));

-  beforeEach(() => {
-    fixture = TestBed.createComponent(AuthorPage);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
+    beforeEach(() => {
+        fixture = TestBed.createComponent(AuthorPage);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });

-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
 });
--- a/src/app/confirm-cancel/confirm-cancel.page.html
+++ b/src/app/confirm-cancel/confirm-cancel.page.html
@@ -4,7 +4,7 @@
    </ion-toolbar>
 </ion-header>

-<ion-content padding>
+<ion-content class="ion-padding">
    <ion-grid>
        <ion-row>
            <ion-col>

--- a/src/app/confirm-cancel/confirm-cancel.page.spec.ts
+++ b/src/app/confirm-cancel/confirm-cancel.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 { ConfirmCancelPage } from './confirm-cancel.page';
+import {ConfirmCancelPage} from './confirm-cancel.page';
+import {HttpClientModule} from '@angular/common/http';
+import {IonicStorageModule} from '@ionic/storage';
+import {RouterModule} from '@angular/router';
+import {TranslateTestingModule} from '../translate-testing/translate-testing.module';
+import {APP_BASE_HREF} from '@angular/common';

 describe('ConfirmCancelPage', () => {
-  let component: ConfirmCancelPage;
-  let fixture: ComponentFixture<ConfirmCancelPage>;
+    let component: ConfirmCancelPage;
+    let fixture: ComponentFixture<ConfirmCancelPage>;

-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ ConfirmCancelPage ],
-      schemas: [CUSTOM_ELEMENTS_SCHEMA],
-    })
-    .compileComponents();
-  }));
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({