added GitLab CI configuration

.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
+before_script:
+  - which node
+  - node --version
+  - which npm
+  - npm --version
+  - npm install
+stages:
+  - test
+  - deploy
+coverage:
+  stage: test
+  script:
+    - npm run test
+  coverage: '/Statements.*?(\d+(?:\.\d+)?)%/'
+  tags:
+    - node
+    - npm
+    - angular

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/)
@@ -11,7 +10,6 @@
 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`
 2. Move to the newly created folder: `cd mc_frontend`
@@ -21,21 +19,14 @@
 6. Run `npm start`.
 If you already ran `npm install` and the CLI still complains about missing dependencies, install them one by one using `npm install DEPENDENCY_NAME`. 
 7. Open http://localhost:8100 in your browser.
-
-----------------------------------------------------------------
 ## Production Build
 To build the application for production environments, use: `ionic cordova build browser --prod --release --max-old-space-size=4096` and serve the content of the `platforms/browser/www` folder, e.g. with Nginx.
-
-----------------------------------------------------------------
 # Development
 To add new pages to the application, use: `ionic generate page PAGE_NAME`.
-
-----------------------------------------------------------------
 # Access to the Docker container
 Use `docker-compose down` to stop and remove the currently running containers.
 To access a running container directly, get the container ID via `docker ps` and connect via `docker exec -it CONTAINER_ID bash`. Or, for root access, use: `docker exec -u 0 -it CONTAINER_ID bash`
 To snapshot a running container, use `docker commit CONTAINER_ID`. It returns a snapshot ID, which you can access via `docker run -it SNAPSHOT_ID`.
-----------------------------------------------------------------
 # Configuration
 ## Backend URL
 To change the URL for the backend, use the `ionic.config.json` file (proxies > proxyUrl). By default, the system assumes that backend and frontend are installed on the same machine.
@@ -43,7 +34,6 @@ 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`.
+To write new tests or debug existing ones, use `npm run test-debug`.

package.json

 {
   "name": "mc_frontend",
-  "version": "1.5.6",
+  "version": "1.5.7",
   "author": "Ionic Framework",
   "homepage": "https://ionicframework.com/",
   "scripts": {
     "ng": "ng",
     "start": "ng serve --port 8100",
     "build": "ng build",
-    "test": "ng test --code-coverage --watch=false",
+    "test": "ng test --code-coverage --watch=false --browsers=ChromeHeadless",
+    "test-debug": "ng test --watch=true --browsers=Chrome",
     "lint": "ng lint",
     "e2e": "ng e2e"
   },
@@ -24,7 +25,7 @@
     "@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/core": "^5.0.4",
     "@ionic/storage": "^2.2.0",
     "@ngtools/webpack": "^9.0.4",
     "@ngx-translate/core": "^11.0.1",
@@ -43,15 +44,15 @@
     "zone.js": "^0.10.2"
   },
   "devDependencies": {
-    "@angular-devkit/architect": "~0.13.8",
+    "@angular-devkit/architect": "^0.900.4",
     "@angular-devkit/build-angular": "^0.900.4",
-    "@angular-devkit/core": "~7.3.8",
-    "@angular-devkit/schematics": "~7.3.8",
+    "@angular-devkit/core": "^9.0.4",
+    "@angular-devkit/schematics": "^9.0.4",
     "@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",
+    "@ionic/angular-toolkit": "^2.2.0",
     "@types/jasmine": "~2.8.8",
     "@types/jasminewd2": "^2.0.8",
     "@types/node": "^12.0.12",
@@ -59,7 +60,7 @@
     "jasmine-core": "~2.99.1",
     "jasmine-spec-reporter": "~4.2.1",
     "karma": "~4.1.0",
-    "karma-chrome-launcher": "~2.2.0",
+    "karma-chrome-launcher": "^3.1.0",
     "karma-coverage-istanbul-reporter": "^2.0.6",
     "karma-jasmine": "~1.1.2",
     "karma-jasmine-html-reporter": "^0.2.2",

src/app/app.component.spec.ts

@@ -12,6 +12,8 @@ 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';
+import {HelperService} from './helper.service';
+import MockMC from './models/mock';
 
 describe('AppComponent', () => {
     class PlatformStub {
@@ -28,12 +30,11 @@ describe('AppComponent', () => {
         }
     }
 
-    let statusBarSpy, splashScreenSpy, platformReadySpy;
+    let statusBarSpy, splashScreenSpy, platformReadySpy, fixture;
     beforeEach(async(() => {
         platformReadySpy = Promise.resolve();
         statusBarSpy = jasmine.createSpyObj('StatusBar', ['styleDefault']);
         splashScreenSpy = jasmine.createSpyObj('SplashScreen', ['hide']);
-
         TestBed.configureTestingModule({
             declarations: [AppComponent],
             imports: [
@@ -51,16 +52,16 @@ describe('AppComponent', () => {
                 {provide: MenuController}
             ],
         }).compileComponents();
+        spyOn(HelperService, 'makeGetRequest').and.returnValue(Promise.resolve(MockMC.apiResponseCorporaGet));
+        fixture = TestBed.createComponent(AppComponent);
     }));
 
     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;

src/app/app.component.ts

@@ -5,6 +5,7 @@ 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';
+import {CorpusService} from './corpus.service';
 
 @Component({
     selector: 'app-root',
@@ -21,9 +22,11 @@ export class AppComponent {
                 private splashScreen: SplashScreen,
                 public helperService: HelperService,
                 public navCtrl: NavController,
-                public menuCtrl: MenuController
+                public menuCtrl: MenuController,
+                public corpusService: CorpusService,
     ) {
         platform.ready().then(() => {
+            this.corpusService.initCorpusService().then();
             // Okay, so the platform is ready and our plugins are available.
             // Here you can do any higher level native things you might need.
             this.statusBar.styleDefault();

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 {async, ComponentFixture, inject, TestBed} from '@angular/core/testing';
 
 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';
+import {HttpClientTestingModule} from '@angular/common/http/testing';
 
 describe('AuthorDetailPage', () => {
     let component: AuthorDetailPage;
@@ -16,7 +16,7 @@ describe('AuthorDetailPage', () => {
         TestBed.configureTestingModule({
             declarations: [AuthorDetailPage],
             imports: [
-                HttpClientModule,
+                HttpClientTestingModule,
                 IonicStorageModule.forRoot(),
                 RouterModule.forRoot([]),
                 TranslateTestingModule

src/app/corpus.service.spec.ts

@@ -14,7 +14,7 @@ describe('CorpusService', () => {
     let httpClient: HttpClient;
     let httpTestingController: HttpTestingController;
     let corpusService: CorpusService;
-    beforeEach(() => {
+    beforeEach(async () => {
         TestBed.configureTestingModule({
             imports: [
                 HttpClientTestingModule,
@@ -35,14 +35,14 @@ describe('CorpusService', () => {
     });
 
     it('should be created', () => {
-        const service: CorpusService = TestBed.get(CorpusService);
-        expect(service).toBeTruthy();
+        expect(corpusService).toBeTruthy();
     });
 
-    it('should load corpora', async () => {
+    it('should load corpora',  (done) => {
         spyOn(HelperService, 'makeGetRequest').and.returnValue(Promise.resolve(MockMC.apiResponseCorporaGet));
-        // await corpusService.ngOnInit();
-        // TODO: FIX THIS
-        expect(HelperService.makeGetRequest).toHaveBeenCalled();
+        corpusService.initCorpusService().then(() => {
+            expect(HelperService.makeGetRequest).toHaveBeenCalled();
+            done();
+        });
     });
 });

src/app/corpus.service.ts

@@ -79,7 +79,6 @@ export class CorpusService {
                 public helperService: HelperService,
                 public storage: Storage
     ) {
-        this.initCorpusService().then();
     }
 
     adjustQueryValue(query: QueryMC, queryIndex: number) {

src/app/test/test.page.spec.ts

 import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
-import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+import {async, ComponentFixture, inject, TestBed, TestBedStatic} from '@angular/core/testing';
 
 import {TestPage} from './test.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 {PopoverController} from '@ionic/angular';
+import {PopoverController, ToastController} from '@ionic/angular';
 import {APP_BASE_HREF} from '@angular/common';
+import {HttpClientTestingModule} from '@angular/common/http/testing';
 
 describe('TestPage', () => {
     let component: TestPage;
     let fixture: ComponentFixture<TestPage>;
+    let tbs: TestBedStatic;
 
     beforeEach(async(() => {
-        TestBed.configureTestingModule({
+        tbs = TestBed.configureTestingModule({
             declarations: [TestPage],
             imports: [
-                HttpClientModule,
+                HttpClientTestingModule,
                 IonicStorageModule.forRoot(),
                 RouterModule.forRoot([]),
                 TranslateTestingModule,
             ],
             providers: [
                 {provide: APP_BASE_HREF, useValue: '/'},
-                {provide: PopoverController},
+                {provide: ToastController},
+                {provide: PopoverController, useValue: {}},
             ],
             schemas: [CUSTOM_ELEMENTS_SCHEMA],
-        })
-            .compileComponents();
+        });
     }));
 
     beforeEach(() => {

src/app/test/test.page.ts

@@ -476,7 +476,7 @@ export class TestPage implements OnDestroy, OnInit {
                             checkButton.click();
                         }
                     }
-                });
+                }, {passive: true});
             });
         }
     }

src/app/translate-testing/translate-testing.module.ts

 import {EventEmitter, Injectable, NgModule, Pipe, PipeTransform} from '@angular/core';
 import {TranslateLoader, TranslateModule, TranslatePipe, TranslateService} from '@ngx-translate/core';
 import {Observable, of} from 'rxjs';
-import {LangChangeEvent} from '@ngx-translate/core/lib/translate.service';
+import {
+    DefaultLangChangeEvent,
+    LangChangeEvent,
+    TranslationChangeEvent
+} from '@ngx-translate/core/lib/translate.service';
 
 
 const translations: any = {};
@@ -26,7 +30,9 @@ export class TranslatePipeMock implements PipeTransform {
 @Injectable()
 export class TranslateServiceStub {
     currentLang = 'en';
+    onDefaultLangChange: EventEmitter<DefaultLangChangeEvent> = new EventEmitter<DefaultLangChangeEvent>();
     readonly onLangChange: EventEmitter<LangChangeEvent> = new EventEmitter<LangChangeEvent>();
+    onTranslationChange: EventEmitter<TranslationChangeEvent> = new EventEmitter<TranslationChangeEvent>();
 
     public get<T>(key: T): Observable<T> {
         return of(key);

src/karma.conf.js

@@ -2,33 +2,33 @@
 // 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-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'),
-      reports: ['html', 'lcovonly', 'text-summary'],
-      fixWebpackSourcePaths: true
-    },
-    files: [
-        "./assets/dist/js/h5p-standalone-main.min.js"
-    ],
-    reporters: ['progress', 'kjhtml'],
-    port: 9876,
-    colors: true,
-    logLevel: config.LOG_INFO,
-    autoWatch: true,
-    browsers: ['ChromeHeadless'], // Chrome
-    singleRun: false
-  });
+    config.set({
+        basePath: '',
+        frameworks: ['jasmine', '@angular-devkit/build-angular'],
+        plugins: [
+            require('karma-jasmine'),
+            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'),
+            reports: ['html', 'lcovonly', 'text-summary'],
+            fixWebpackSourcePaths: true
+        },
+        files: [
+            "./assets/dist/js/h5p-standalone-main.min.js"
+        ],
+        reporters: ['progress', 'kjhtml'],
+        port: 9876,
+        colors: true,
+        logLevel: config.LOG_INFO,
+        autoWatch: true,
+        browsers: ['Chrome', 'ChromeHeadless'],
+        singleRun: false
+    });
 };

src/tsconfig.app.json

@@ -7,6 +7,40 @@
   },
   "exclude": [
     "test.ts",
-    "**/*.spec.ts"
+    "**/*.spec.ts",
+    "app/translate-testing/translate-testing.module.ts",
+    "app/models/mock.ts",
+    "environments/environment.prod.ts",
+    "app/models/xAPI/IdFormattedSubStatement.ts",
+    "app/models/xAPI/ClientModel.ts",
+    "app/models/xAPI/FilterAgent.ts",
+    "app/models/xAPI/FormattedContextActivities.ts",
+    "app/models/xAPI/FullActivityModel.ts",
+    "app/models/xAPI/IdFormattedActivity.ts",
+    "app/models/xAPI/IdFormattedActor.ts",
+    "app/models/xAPI//IdFormattedContext.ts",
+    "app/models/xAPI/IdFormattedVerb.ts",
+    "app/models/xAPI/IdFormattedSubStatementObject.ts",
+    "app/models/xAPI/AttachmentModel.ts",
+    "app/models/xAPI/IdFormattedStatementObject.ts",
+    "app/models/xAPI/IdFormattedStatementBase.ts",
+    "app/models/xAPI/IdFormattedStatement.ts",
+    "app/models/xAPI/Part.ts",
+    "app/models/xAPI/Statement.ts",
+    "app/models/xAPI/StatementHash.ts",
+    "app/models/xAPI/StatementsResult.ts",
+    "app/models/xAPI/UnstoredStatementModel.ts",
+    "app/models/xAPI/StoredStatementModel.ts",
+    "app/models/xAPI/UpRef.ts",
+    "app/models/xAPI/UnstoredStatementModel.ts"
   ]
+//  "files": [
+//    "main.ts",
+//    "zone-flags.ts",
+//    "polyfills.ts"
+//  ],
+//  "include": [
+//    "app/models/**/*.ts",
+//    "app/**/*.module.ts"
+//  ]
 }