Merge pull request #6 from sartography/chore/update-angular

Chore/update angular

package.json

@@ -22,67 +22,66 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^8.2.14",
+    "@angular/animations": "^9.0.2",
-    "@angular/cdk": "^8.2.3",
+    "@angular/cdk": "^9.1.0",
-    "@angular/common": "^8.2.14",
+    "@angular/common": "^9.0.2",
-    "@angular/compiler": "^8.2.14",
+    "@angular/compiler": "^9.0.2",
-    "@angular/core": "^8.2.14",
+    "@angular/core": "^9.0.2",
-    "@angular/flex-layout": "^8.0.0-beta.27",
+    "@angular/flex-layout": "^9.0.0-beta.29",
-    "@angular/forms": "^8.2.14",
+    "@angular/forms": "^9.0.2",
-    "@angular/material": "^8.2.3",
+    "@angular/material": "^9.1.0",
-    "@angular/platform-browser": "^8.2.14",
+    "@angular/platform-browser": "^9.0.2",
-    "@angular/platform-browser-dynamic": "^8.2.14",
+    "@angular/platform-browser-dynamic": "^9.0.2",
-    "@angular/router": "^8.2.14",
+    "@angular/router": "^9.0.2",
-    "@ngx-formly/core": "^5.5.10",
+    "@ngx-formly/core": "^5.5.13",
-    "@ngx-formly/material": "^5.5.10",
+    "@ngx-formly/material": "^5.5.13",
-    "bpmn-js": "^3.5.0",
+    "bpmn-js": "^6.3.0",
     "bpmn-js-properties-panel": "^0.33.1",
-    "camunda-bpmn-moddle": "^4.3.0",
+    "camunda-bpmn-moddle": "^4.4.0",
     "camunda-dmn-moddle": "^1.0.0",
-    "diagram-js": "^5.0",
     "diagram-js-minimap": "^2.0.3",
-    "dmn-js": "^7.3.0",
+    "diagram-js": "^6.0.1",
+    "dmn-js": "^7.2.0",
+    "dmn-moddle": "^6.0.0",
     "dmn-js-properties-panel": "^0.3.4",
-    "dmn-moddle": "^7.0.0",
     "file-saver": "^2.0.2",
-    "hammerjs": "^2.0.8",
     "rxjs": "~6.5.4",
-    "sartography-workflow-lib": "^0.0.48",
+    "sartography-workflow-lib": "^0.0.50",
     "tslib": "^1.10.0",
-    "uuid": "^3.4.0",
+    "uuid": "^7.0.0",
-    "zone.js": "~0.9.1"
+    "zone.js": "~0.10.2"
   },
   "devDependencies": {
-    "@angular-builders/custom-webpack": "^8.4.1",
+    "@angular-builders/custom-webpack": "^9.0.0",
-    "@angular-devkit/build-angular": "^0.803.22",
+    "@angular-devkit/build-angular": "~0.900.3",
-    "@angular/cli": "^8.3.22",
+    "@angular/cli": "^9.0.3",
-    "@angular/compiler-cli": "^8.2.14",
+    "@angular/compiler-cli": "^9.0.2",
-    "@angular/language-service": "^8.2.14",
+    "@angular/language-service": "^9.0.2",
-    "@babel/core": "^7.8.3",
+    "@babel/core": "^7.8.4",
-    "@babel/preset-env": "^7.8.3",
+    "@babel/preset-env": "^7.8.4",
     "@babel/preset-react": "^7.8.3",
-    "@types/jasmine": "^3.5.0",
+    "@types/jasmine": "^3.5.7",
     "@types/jasminewd2": "^2.0.8",
-    "@types/node": "~8.9.4",
+    "@types/node": "^12.11.1",
     "babel-loader": "^8.0.6",
-    "codelyzer": "^5.0.1",
+    "codelyzer": "^5.1.2",
-    "jasmine-core": "~2.99.1",
+    "jasmine-core": "~3.5.0",
     "jasmine-spec-reporter": "~4.2.1",
-    "karma": "^3.1.4",
+    "karma": "^4.4.1",
-    "karma-chrome-launcher": "~2.2.0",
+    "karma-chrome-launcher": "~3.1.0",
     "karma-coverage-istanbul-reporter": "^2.1.1",
-    "karma-jasmine": "~1.1.2",
+    "karma-jasmine": "~3.1.1",
-    "karma-jasmine-html-reporter": "^0.2.2",
+    "karma-jasmine-html-reporter": "^1.5.2",
     "mockdate": "^2.0.5",
     "postcss-short": "^5.0.0",
-    "protractor": "^5.4.2",
+    "protractor": "^5.4.3",
-    "puppeteer": "^1.20.0",
+    "puppeteer": "^2.1.1",
     "sonar-scanner": "^3.1.0",
-    "ts-node": "~7.0.0",
+    "ts-node": "~8.6.2",
-    "tslint": "~5.11.0",
+    "tslint": "~6.0.0",
-    "typescript": "~3.5.3",
+    "typescript": "^3.7.5",
-    "webpack": "^4.41.5",
+    "webpack": "^4.41.6",
-    "webpack-dev-server": "^3.10.1",
+    "webpack-dev-server": "^3.10.3",
     "webpack-notifier": "^1.8.0"
   }
 }

src/app/_dialogs/delete-file-dialog/delete-file-dialog.component.spec.ts

@@ -1,5 +1,5 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import {MAT_DIALOG_DATA, MatDialogModule, MatDialogRef} from '@angular/material';
+import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
 import {MatIconModule} from '@angular/material/icon';
 import {BrowserAnimationsModule, NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {mockFileMeta0} from 'sartography-workflow-lib';

src/app/_dialogs/delete-workflow-spec-dialog/delete-workflow-spec-dialog.component.spec.ts

@@ -1,5 +1,5 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import {MAT_DIALOG_DATA, MatDialogModule, MatDialogRef} from '@angular/material';
+import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
 import {MatIconModule} from '@angular/material/icon';
 import {BrowserAnimationsModule, NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {mockWorkflowSpec0} from 'sartography-workflow-lib';

src/app/_dialogs/file-meta-dialog/file-meta-dialog.component.spec.ts

@@ -1,6 +1,6 @@
 import {async, ComponentFixture, TestBed} from '@angular/core/testing';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {MAT_DIALOG_DATA, MatDialogModule, MatDialogRef} from '@angular/material';
+import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
 import {MatFormFieldModule} from '@angular/material/form-field';
 import {MatInputModule} from '@angular/material/input';
 import {BrowserAnimationsModule, NoopAnimationsModule} from '@angular/platform-browser/animations';

src/app/_dialogs/new-file-dialog/new-file-dialog.component.spec.ts

@@ -1,5 +1,5 @@
 import {async, ComponentFixture, TestBed} from '@angular/core/testing';
-import {MAT_DIALOG_DATA, MatDialog, MatDialogModule, MatDialogRef} from '@angular/material';
+import { MAT_DIALOG_DATA, MatDialog, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
 import {MatIconModule} from '@angular/material/icon';
 import {BrowserAnimationsModule, NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {FileType} from 'sartography-workflow-lib';

src/app/_dialogs/open-file-dialog/open-file-dialog.component.spec.ts

@@ -1,7 +1,7 @@
 import {HttpClientTestingModule, HttpTestingController} from '@angular/common/http/testing';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {MAT_DIALOG_DATA, MatDialog, MatDialogModule, MatDialogRef} from '@angular/material';
+import { MAT_DIALOG_DATA, MatDialog, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
 import {MatFormFieldModule} from '@angular/material/form-field';
 import {MatIconModule} from '@angular/material/icon';
 import {MatInputModule} from '@angular/material/input';
@@ -54,7 +54,7 @@ describe('OpenFileDialogComponent', () => {
   }));
 
   beforeEach(() => {
-    httpMock = TestBed.get(HttpTestingController);
+    httpMock = TestBed.inject(HttpTestingController);
     fixture = TestBed.createComponent(OpenFileDialogComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();

src/app/_dialogs/workflow-spec-dialog/workflow-spec-dialog.component.spec.ts

@@ -1,6 +1,6 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {MAT_DIALOG_DATA, MatDialogModule, MatDialogRef} from '@angular/material';
+import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
 import {MatFormFieldModule} from '@angular/material/form-field';
 import {MatIconModule} from '@angular/material/icon';
 import {MatInputModule} from '@angular/material/input';

src/app/app.component.spec.ts

@@ -1,12 +1,24 @@
+import {Component} from '@angular/core';
 import {async, ComponentFixture, TestBed} from '@angular/core/testing';
-import {MatIconModule} from '@angular/material/icon';
-import {MatMenuModule} from '@angular/material/menu';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {RouterTestingModule} from '@angular/router/testing';
-
+import {MockEnvironment} from 'sartography-workflow-lib';
 import {AppComponent} from './app.component';
-import {FooterComponent} from './footer/footer.component';
+
-import {NavbarComponent} from './navbar/navbar.component';
+
+@Component({
+  selector: 'app-navbar',
+  template: ''
+})
+class MockNavbarComponent {
+}
+
+@Component({
+  selector: 'app-footer',
+  template: ''
+})
+class MockFooterComponent {
+}
 
 describe('AppComponent', () => {
   let component: AppComponent;
@@ -16,15 +28,16 @@ describe('AppComponent', () => {
     TestBed.configureTestingModule({
       declarations: [
         AppComponent,
-        FooterComponent,
+        MockNavbarComponent,
-        NavbarComponent
+        MockFooterComponent
       ],
       imports: [
         BrowserAnimationsModule,
-        MatIconModule,
-        MatMenuModule,
         RouterTestingModule,
-      ]
+      ],
+      providers: [
+        {provide: 'APP_ENVIRONMENT', useClass: MockEnvironment},
+      ],
     })
       .compileComponents();
   }));

src/app/app.module.ts

@@ -41,6 +41,7 @@ import {SignInComponent} from './sign-in/sign-in.component';
 import {SignOutComponent} from './sign-out/sign-out.component';
 import {WorkflowSpecListComponent} from './workflow-spec-list/workflow-spec-list.component';
 
+@Injectable()
 export class ThisEnvironment implements AppEnvironment {
   production = environment.production;
   api = environment.api;

src/app/diagram/diagram.component.spec.ts

@@ -30,7 +30,7 @@ describe('DiagramComponent', () => {
       ]
     });
 
-    httpMock = TestBed.get(HttpTestingController);
+    httpMock = TestBed.inject(HttpTestingController);
     fixture = TestBed.createComponent(DiagramComponent);
     component = fixture.debugElement.componentInstance;
     component.fileName = '';

src/app/file-list/file-list.component.spec.ts

@@ -67,7 +67,7 @@ describe('FileListComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(FileListComponent);
     component = fixture.componentInstance;
-    httpMock = TestBed.get(HttpTestingController);
+    httpMock = TestBed.inject(HttpTestingController);
     component.workflowSpec = mockWorkflowSpec0;
     fixture.detectChanges();
 

src/app/modeler/modeler.component.spec.ts

@@ -101,7 +101,7 @@ describe('ModelerComponent', () => {
       }
     })
       .compileComponents();
-    httpMock = TestBed.get(HttpTestingController);
+    httpMock = TestBed.inject(HttpTestingController);
     fixture = TestBed.createComponent(ModelerComponent);
     component = fixture.debugElement.componentInstance;
     component.diagramComponent = TestBed.createComponent(DiagramComponent).componentInstance;
@@ -238,10 +238,11 @@ describe('ModelerComponent', () => {
   });
 
   it('should update the diagram file on change', () => {
-    const initialValue = component.diagramComponent.value;
+    const valBefore = BPMN_DIAGRAM.replace('REPLACE_ME', 'raindrops_on_roses');
-    expect(initialValue).toBeFalsy();
+    component.diagramComponent.writeValue(valBefore);
+    expect(component.diagramComponent.value).toEqual(valBefore);
 
-    const newValue = '<xml>newExpectedValue</xml>';
+    const newValue = BPMN_DIAGRAM.replace('REPLACE_ME', 'whiskers_on_kittens');
     component.diagramComponent.writeValue(newValue);
 
     expect(component.diagramComponent.value).toEqual(newValue);
@@ -254,7 +255,7 @@ describe('ModelerComponent', () => {
 
     component.workflowSpec = mockWorkflowSpec0;
     component.diagramFileMeta = mockFileMeta0;
-    component.diagramComponent.writeValue('<xml>newValue</xml>');
+    component.diagramComponent.writeValue(BPMN_DIAGRAM.replace('REPLACE_ME', 'bright_copper_kettles'));
     component.saveChanges();
 
     expect(saveFileChangesSpy).toHaveBeenCalled();
@@ -268,7 +269,7 @@ describe('ModelerComponent', () => {
     component.newDiagram(FileType.BPMN);
     expect(component.diagramFileMeta).toBeFalsy();
 
-    component.diagramComponent.writeValue('<xml>newValue</xml>');
+    component.diagramComponent.writeValue(BPMN_DIAGRAM.replace('REPLACE_ME', 'warm_woolen_mittens'));
     component.saveChanges();
 
     expect(saveFileChangesSpy).not.toHaveBeenCalled();
@@ -282,7 +283,7 @@ describe('ModelerComponent', () => {
 
     component.workflowSpec = mockWorkflowSpec0;
     component.diagramFileMeta = mockFileMeta0;
-    component.diagramComponent.writeValue('<xml>newValue</xml>');
+    component.diagramComponent.writeValue(BPMN_DIAGRAM.replace('REPLACE_ME', 'brown_paper_packages_tied_up_with_strings'));
     component.saveFileChanges();
 
     expect(updateFileMetaSpy).toHaveBeenCalledWith(mockFileMeta0);
@@ -305,7 +306,7 @@ describe('ModelerComponent', () => {
   });
 
   it('should update file metadata for existing file', () => {
-    const newXml = '<xml>New Value</xml>';
+    const newXml = BPMN_DIAGRAM.replace('REPLACE_ME', 'cream_colored_ponies');
     const data: FileMetaDialogData = {
       fileName: mockFileMeta0.name,
       fileType: FileType.BPMN,
@@ -335,7 +336,7 @@ describe('ModelerComponent', () => {
   });
 
   it('should create new file metadata for new file', () => {
-    const newXml = '<xml>New Value</xml>';
+    const newXml = BPMN_DIAGRAM.replace('REPLACE_ME', 'crisp_apple_strudels');
     const data: FileMetaDialogData = {
       fileName: mockFileMeta0.name,
       fileType: FileType.BPMN,
@@ -399,8 +400,8 @@ describe('ModelerComponent', () => {
   });
 
   it('should start a new diagram', () => {
-    component.xml = '<xml>old value</xml>';
+    component.xml = BPMN_DIAGRAM.replace('REPLACE_ME', 'doorbells');
-    component.draftXml = '<xml>even older value</xml>';
+    component.draftXml = BPMN_DIAGRAM.replace('REPLACE_ME', 'sleigh_bells');
     component.diagramFileMeta = mockFileMeta0;
     component.diagramFile = mockFileMeta0.file;
     component.workflowSpec = mockWorkflowSpec0;

src/app/modeler/modeler.component.ts

@@ -34,7 +34,7 @@ export class ModelerComponent implements AfterViewInit {
   fileTypes = FileType;
   private xml = '';
   private draftXml = '';
-  @ViewChild(DiagramComponent, {static: false}) private diagramComponent: DiagramComponent;
+  @ViewChild(DiagramComponent) private diagramComponent: DiagramComponent;
   private diagramType: FileType;
   private workflowSpecId: string;
   private fileMetaId: number;

src/app/navbar/navbar.component.spec.ts

@@ -5,9 +5,9 @@ import {MatMenuModule} from '@angular/material/menu';
 import {Router} from '@angular/router';
 import {RouterTestingModule} from '@angular/router/testing';
 import {ApiService, MockEnvironment, mockUser} from 'sartography-workflow-lib';
-
 import { NavbarComponent } from './navbar.component';
 
+
 describe('NavbarComponent', () => {
   let component: NavbarComponent;
   let fixture: ComponentFixture<NavbarComponent>;
@@ -39,7 +39,7 @@ describe('NavbarComponent', () => {
 
   beforeEach(() => {
     localStorage.setItem('token', 'some_token');
-    httpMock = TestBed.get(HttpTestingController);
+    httpMock = TestBed.inject(HttpTestingController);
     fixture = TestBed.createComponent(NavbarComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();

src/app/sign-in/sign-in.component.spec.ts

@@ -58,7 +58,7 @@ describe('SignInComponent', () => {
   }));
 
   beforeEach(() => {
-    httpMock = TestBed.get(HttpTestingController);
+    httpMock = TestBed.inject(HttpTestingController);
     fixture = TestBed.createComponent(SignInComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();

src/app/sign-in/sign-in.component.ts

@@ -37,7 +37,7 @@ export class SignInComponent implements OnInit {
     {
       key: 'first_name',
       type: 'input',
-      defaultValue: 'Cordi',
+      defaultValue: 'Addison',
       templateOptions: {
         label: 'First Name',
       },
@@ -45,7 +45,7 @@ export class SignInComponent implements OnInit {
     {
       key: 'last_name',
       type: 'input',
-      defaultValue: 'Nator',
+      defaultValue: 'Minh',
       templateOptions: {
         label: 'First Name',
       },

src/app/sign-out/sign-out.component.spec.ts

@@ -26,7 +26,7 @@ describe('SignOutComponent', () => {
   }));
 
   beforeEach(() => {
-    httpMock = TestBed.get(HttpTestingController);
+    httpMock = TestBed.inject(HttpTestingController);
     fixture = TestBed.createComponent(SignOutComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();

src/app/workflow-spec-list/workflow-spec-list.component.spec.ts

@@ -71,7 +71,7 @@ describe('WorkflowSpecListComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(WorkflowSpecListComponent);
     component = fixture.componentInstance;
-    httpMock = TestBed.get(HttpTestingController);
+    httpMock = TestBed.inject(HttpTestingController);
     fixture.detectChanges();
 
     const sReq = httpMock.expectOne('apiRoot/workflow-specification');

src/main.ts

@@ -1,4 +1,4 @@
-import 'hammerjs';
+
 import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 

tsconfig.json

@@ -22,5 +22,12 @@
     "resolveJsonModule": true,
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": true
-  }
+  },
+  "files": [
+    "src/main.ts",
+    "src/polyfills.ts"
+  ],
+  "include": [
+    "src/**/*.d.ts"
+  ]
 }

webpack.config.js

@@ -3,6 +3,11 @@ const webpack = require('webpack');
 const path = require('path');
 
 module.exports = {
+  resolve: {
+    alias: {
+      'inferno': 'inferno/dist/index.dev.esm.js'
+    }
+  },
   module: {
     rules: [
       {