Merge pull request #103 from Pear-Trading/finn/fixes

Bring dependencies up to date

.idea/codeStyles/Project.xml

@@ -0,0 +1,14 @@
+<component name="ProjectCodeStyleConfiguration">
+  <code_scheme name="Project" version="173">
+    <TypeScriptCodeStyleSettings version="0">
+      <option name="SPACES_WITHIN_IMPORTS" value="true" />
+      <option name="BLANK_LINES_AROUND_FUNCTION" value="0" />
+    </TypeScriptCodeStyleSettings>
+    <codeStyleSettings language="TypeScript">
+      <option name="BLANK_LINES_AROUND_METHOD" value="0" />
+      <option name="BLANK_LINES_AROUND_METHOD_IN_INTERFACE" value="0" />
+      <option name="KEEP_SIMPLE_BLOCKS_IN_ONE_LINE" value="true" />
+      <option name="KEEP_SIMPLE_METHODS_IN_ONE_LINE" value="true" />
+    </codeStyleSettings>
+  </code_scheme>
+</component>

.idea/codeStyles/codeStyleConfig.xml

@@ -0,0 +1,5 @@
+<component name="ProjectCodeStyleConfiguration">
+  <state>
+    <option name="USE_PER_PROJECT_SETTINGS" value="true" />
+  </state>
+</component>

README.md

@@ -35,12 +35,34 @@ npm install
 The app defaults to using the development server. For other options, see
 `src/environments/environments.ts`
 
+## Testing
+
+There are two types of test in this codebase, unit tests (using Karma) and E2E tests (using Protractor).
+
+### Karma Unit Tests
+
+To run these, you just need to run `npm run test` - this should work without any further configuration. These run the `*.spec.ts` files next to the normal source files, and are for basic tests for each function on their own.
+
+These tests are a long-running process, and will automatically run on file changes. Just run the command above, and then check back to the browser window that appears to see any errors as you work!
+
+### Protractor E2E Tests
+
+To run these, you will need to run the following:
+
+```
+webdriver-manager update
+```
+
+This will download the correct webdriver for you (we use chromedriver), and any other dependencies it needs. After that, you can run the tests with `npm run e2e`. Note these run once, and will need to be re-run every time you want to run an e2e test. You will also need to run the 
+
+These tests are best run regularly, and should show if any issues have emerged in other parts of the application that you are not aware of, or if some part of the flow through the app has changed sufficiently. 
+
 ## Licences
 
 ### CoreUI
 
 The interface itself is based off of [CoreUI][core-ui] which is MIT Licenced.
-For information, see [MIT Licence](./LICENCE.MIT) included in this repo.
+For information, see `LICENCE.MIT` included in this repo.
 
 [core-ui]: http://coreui.io
 

angular.json

@@ -17,7 +17,12 @@
             "tsConfig": "src/tsconfig.app.json",
             "polyfills": "src/polyfills.ts",
             "assets": [
-              "src/assets"
+              "src/assets",
+              {"input":
+                "./node_modules/@google/markerclustererplus/images",
+                "glob": "*", 
+                "output": "/images"
+              }
             ],
             "styles": [
               "src/scss/style.scss"

e2e/login.e2e-spec.ts

@@ -1,4 +1,5 @@
 import { LoginPageObject } from './login.po';
+import { browser } from "protractor";
 
 describe('Login Page', () => {
   let page: LoginPageObject;
@@ -13,12 +14,46 @@ describe('Login Page', () => {
   });
 
   it('should have a username box of type email', () => {
-    expect(page.isUsernameFieldPresent()).toBeTruthy();
+    expect(page.isEmailFieldPresent()).toBeTruthy();
-    expect(page.getUsernameFieldType()).toEqual('email');
+    expect(page.getEmailFieldType()).toEqual('email');
   });
 
   it('should have a password box of type password', () => {
     expect(page.isPasswordFieldPresent()).toBeTruthy();
     expect(page.getPasswordFieldType()).toBe('password');
   });
+
+  it('should have a login button of type submit', () => {
+    expect(page.isLoginButtonPresent()).toBeTruthy();
+    expect(page.getLoginButtonType()).toBe('submit');
+  });
+
+  it('should have a disabled login button when empty', () => {
+    expect(page.isLoginButtonEnabled()).toBeFalsy();
+  });
+
+  it('should have a disabled login button when only email', () => {
+    page.fillEmailFieldWith('test@example.com');
+    expect(page.isLoginButtonEnabled()).toBeFalsy();
+  });
+
+  it('should have a disabled login button when only password', () => {
+    page.fillPasswordFieldWith('abc123');
+    expect(page.isLoginButtonEnabled()).toBeFalsy();
+  });
+
+  it('should have an enabled login button when both inputs filled', () => {
+    page.fillEmailFieldWith('test@example.com');
+    page.fillPasswordFieldWith('abc123');
+    expect(page.isLoginButtonEnabled()).toBeTruthy();
+  });
+
+  it('should submit the filled data when login pressed', () => {
+    page.fillEmailFieldWith('test@example.com');
+    page.fillPasswordFieldWith('abc123');
+    expect(page.isLoginButtonEnabled()).toBeTruthy();
+    page.getLoginButton().click();
+    browser.waitForAngular();
+    expect(browser.getCurrentUrl()).toContain('dashboard');
+  });
 });

e2e/login.po.ts

@@ -9,12 +9,23 @@ export class LoginPageObject {
     return element(by.css('app-root h1')).getText();
   }
 
-  getUsernameField() { return element(by.id('username')); }
+  getEmailField() { return element(by.id('username')); }
   getPasswordField() { return element(by.id('password')); }
+  getLoginButton() { return element(by.id('login')); }
 
-  isUsernameFieldPresent() { return this.getUsernameField().isPresent(); }
+  isEmailFieldPresent() { return this.getEmailField().isPresent(); }
   isPasswordFieldPresent() { return this.getPasswordField().isPresent(); }
+  isLoginButtonPresent() { return this.getLoginButton().isPresent(); }
 
-  getUsernameFieldType() { return this.getUsernameField().getAttribute('type'); }
+  getEmailFieldType() { return this.getEmailField().getAttribute('type'); }
   getPasswordFieldType() { return this.getPasswordField().getAttribute('type'); }
+  getLoginButtonType() { return this.getLoginButton().getAttribute('type'); }
+
+  isLoginButtonEnabled() { return this.getLoginButton().isEnabled(); }
+
+  clearEmailField() { return this.getEmailField().clear() };
+  clearPasswordField() { return this.getPasswordField().clear() };
+
+  fillEmailFieldWith(text) { return this.getEmailField().sendKeys(text) };
+  fillPasswordFieldWith(text) { return this.getPasswordField().sendKeys(text) };
 }

package.json

@@ -22,18 +22,19 @@
   },
   "private": true,
   "dependencies": {
-    "@agm/core": "1.0.0-beta.6",
+    "@agm/core": "^3.0.0-beta.0",
-    "@agm/js-marker-clusterer": "1.0.0-beta.6",
+    "@agm/markerclusterer": "^3.0.0-beta.0",
-    "@angular/common": "8.1.0",
+    "@angular/common": "10.0.6",
-    "@angular/compiler": "8.1.0",
+    "@angular/compiler": "10.0.6",
-    "@angular/core": "8.1.0",
+    "@angular/core": "10.0.6",
-    "@angular/forms": "8.1.0",
+    "@angular/forms": "10.0.6",
-    "@angular/platform-browser": "8.1.0",
+    "@angular/platform-browser": "10.0.6",
-    "@angular/platform-browser-dynamic": "8.1.0",
+    "@angular/platform-browser-dynamic": "10.0.6",
-    "@angular/router": "8.1.0",
+    "@angular/router": "10.0.6",
-    "@angular/upgrade": "8.1.0",
+    "@angular/upgrade": "10.0.6",
     "@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.3.1",
     "@coreui/icons": "0.3.0",
+    "@google/markerclustererplus": "^5.0.4",
     "ajv": "^6.10.0",
     "ajv-keywords": "^3.4.0",
     "angular2-datetimepicker": "^1.1.1",
@@ -43,45 +44,45 @@
     "devextreme": "^19.1.4",
     "devextreme-angular": "^19.1.4",
     "jasmine": "^3.4.0",
-    "jquery": "^3.3.1",
+    "jquery": "^3.5.1",
-    "js-marker-clusterer": "1.0.0",
     "jszip": "^3.2.2",
     "luxon": "^1.16.1",
     "moment": "^2.24.0",
-    "ng2-charts": "^2.3.0",
+    "ng2-charts": "^2.3.2",
     "ng2-validation-manager": "0.5.3",
     "ngx-bootstrap": "^5.0.0",
     "ngx-filter-pipe": "^2.1.2",
     "ngx-pagination": "^4.0.0",
     "popper.js": "^1.15.0",
-    "rxjs": "6.5.2",
+    "rxjs": "6.6.0",
     "stream": "0.0.2",
     "ts-helpers": "1.1.2",
     "tslib": "^1.10.0",
     "web-animations-js": "^2.3.2",
-    "webpack-dev-server": "^3.7.2",
+    "webpack-dev-server": "^3.11.0",
-    "zone.js": "~0.9.1"
+    "zone.js": "~0.10.3"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.801.0",
+    "@angular-devkit/build-angular": "^0.1000.4",
-    "@angular/cli": "^8.1.0",
+    "@angular/cli": "^10.0.4",
-    "@angular/compiler-cli": "8.1.0",
+    "@angular/compiler-cli": "10.0.6",
+    "@types/googlemaps": "^3.39.8",
     "@types/jasmine": "3.3.13",
     "@types/jasminewd2": "2.0.6",
     "@types/node": "12.0.10",
-    "codelyzer": "^5.1.0",
+    "codelyzer": "^6.0.0",
     "jasmine-core": "^3.4.0",
     "jasmine-spec-reporter": "4.2.1",
-    "karma": "^4.1.0",
+    "karma": "^5.1.1",
     "karma-chrome-launcher": "2.2.0",
     "karma-cli": "2.0.0",
     "karma-coverage-istanbul-reporter": "^2.0.5",
     "karma-jasmine": "^2.0.1",
-    "readable-stream": "latest",
     "karma-jasmine-html-reporter": "^1.4.2",
-    "protractor": "^5.4.2",
+    "protractor": "^7.0.0",
+    "readable-stream": "latest",
     "ts-node": "^8.3.0",
     "tslint": "^5.18.0",
-    "typescript": "~3.4.5"
+    "typescript": "~3.9.7"
   }
 }

src/app/auth/login.component.html

@@ -28,7 +28,7 @@
                   </div>
                   <div class="row">
                     <div class="col-6">
-                      <button type="submit" [disabled]="!signin.valid" class="btn btn-primary px-4">Login</button>
+                      <button id="login" type="submit" [disabled]="!signin.valid" class="btn btn-primary px-4">Login</button>
                     </div>
                     <div class="col-6 text-right">
                       <button type="button" class="btn btn-link px-0" disabled>Forgot password?</button>

src/app/dashboard/dashboard.module.ts

@@ -5,7 +5,7 @@ import { ChartsModule } from 'ng2-charts';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { NgxPaginationModule } from 'ngx-pagination';
 import { AgmCoreModule, GoogleMapsAPIWrapper } from '@agm/core';
-import { AgmJsMarkerClustererModule } from '@agm/js-marker-clusterer';
+import { AgmMarkerClustererModule } from '@agm/markerclusterer';
 import { ModalModule } from 'ngx-bootstrap/modal';
 
 import { CurrencyPipe } from '@angular/common';
@@ -57,7 +57,7 @@ import { environment } from '../../environments/environment';
     AgmCoreModule.forRoot({
       apiKey: environment.mapApiKey
     }),
-    AgmJsMarkerClustererModule,
+    AgmMarkerClustererModule,
     BsDropdownModule,
     NgxPaginationModule,
     DashboardRoutingModule,

src/app/dashboard/map.component.html

@@ -39,9 +39,8 @@
           [latitude]="lat"
           [longitude]="lng"
           [zoom]="zoom"
-          [scaleControl]="true"
           (idle)="viewBoundsChanged()">
-          <agm-marker-cluster maxZoom="13" imagePath="https://raw.githubusercontent.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m">
+          <agm-marker-cluster maxZoom="13">
             <agm-marker
                 *ngFor="let m of markers"
                 [latitude]="m.latitude"

src/app/dashboard/more-graphs-and-tables.component.ts

@@ -227,7 +227,7 @@ export class MoreStuffComponent implements OnInit {
 
   }
 
-  @ViewChild('supplierChart', {read: BaseChartDirective, static: false}) supplierChart: BaseChartDirective;
+  @ViewChild('supplierChart', { read: BaseChartDirective }) supplierChart: BaseChartDirective;
 
   private loadSupplierHistory() {
     this.api.loadMiscUrl('organisation/external/supplier_history').subscribe(

src/app/dashboard/trail-map.component.html

@@ -72,9 +72,8 @@
           [latitude]="lat"
           [longitude]="lng"
           [zoom]="zoom"
-          [scaleControl]="true"
           (idle)="viewBoundsChanged()">
-          <agm-marker-cluster maxZoom="13" imagePath="https://raw.githubusercontent.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m">
+          <agm-marker-cluster maxZoom="13">
             <agm-marker
                 *ngFor="let m of markers"
                 [iconUrl]="'/assets/img/association/' + assocMap + '-map-pin.png'"

src/scss/_custom-variables.scss

@@ -48,7 +48,7 @@ $navbar-border: (
 );
 $navbar-brand-width:                155px;
 $navbar-brand-bg:                   #fff;
-$navbar-brand-logo:                 url('../assets/img/logo.png');
+$navbar-brand-logo:                 url('../../assets/img/logo.png');
 $navbar-brand-logo-size:            70px auto;
 $navbar-brand-border: (
   bottom: (