From b0bad44a9ecc01ab780cc42527e6121374b3bcef Mon Sep 17 00:00:00 2001 From: billcuthbert <96billc@gmail.com> Date: Mon, 16 Aug 2021 02:01:24 +0100 Subject: [PATCH] tests --- src/app/app.component.html | 42 +++++++------- src/app/app.component.spec.ts | 13 ----- src/app/app.component.ts | 20 +------ src/app/model.ts | 21 +++++-- .../transaction-form.component.html | 21 +++---- .../transaction-form.component.spec.ts | 58 +++++++++++++++++-- .../transaction-form.component.ts | 7 +-- .../transaction-list.component.html | 2 +- .../transaction-list.component.scss | 3 +- .../transaction-list.component.spec.ts | 55 +++++++++++++----- .../transaction-list.component.ts | 2 +- 11 files changed, 151 insertions(+), 93 deletions(-) diff --git a/src/app/app.component.html b/src/app/app.component.html index 79ec5ae..dc2692d 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,26 +1,28 @@ -
- -
-
-
-
-
-
-
- -

Make Transfer

+
+
+ +
+
+
+
+
+
+
+ +

Make Transfer

+
+
- -
-
-
- -

Transactions List

+
+
+ +

Transactions List

+
+
-
-
- \ No newline at end of file + +
\ No newline at end of file diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts index d7e2f27..27a9448 100644 --- a/src/app/app.component.spec.ts +++ b/src/app/app.component.spec.ts @@ -15,17 +15,4 @@ describe('AppComponent', () => { const app = fixture.componentInstance; expect(app).toBeTruthy(); }); - - it(`should have as title 'backbase-app'`, () => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.componentInstance; - expect(app.title).toEqual('backbase-app'); - }); - - it('should render title', () => { - const fixture = TestBed.createComponent(AppComponent); - fixture.detectChanges(); - const compiled = fixture.nativeElement; - expect(compiled.querySelector('.content span').textContent).toContain('backbase-app app is running!'); - }); }); diff --git a/src/app/app.component.ts b/src/app/app.component.ts index ff79582..66f2e64 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -13,24 +13,6 @@ export class AppComponent { transaction!: Transaction recieveTransfer(event: Transfer) { - this.transaction = { - id: "", - categoryCode: "#d9bcf5", - dates: { - valueDate: Date.now() - }, - transaction: { - amountCurrency: { - amount: event.amount, - currencyCode: "EUR" - }, - type: "New Transfer", - creditDebitIndicator: "DBIT" - }, - merchant: { - name: event.account, - accountNumber: "" - } - } + this.transaction = new Transaction(event.amount, "New Transfer", event.account) } } diff --git a/src/app/model.ts b/src/app/model.ts index caac7c7..74f7b61 100644 --- a/src/app/model.ts +++ b/src/app/model.ts @@ -1,9 +1,9 @@ -export interface Transaction { - id: string | null, - categoryCode: string, +export class Transaction { + id!: string; + categoryCode: string; dates: { valueDate: string | number - }, + }; transaction: { amountCurrency: { amount: number, @@ -11,11 +11,22 @@ export interface Transaction { }, type: string, creditDebitIndicator: string - }, + }; merchant: { name: string, accountNumber: string } + + constructor(tAmount?: number, tType?: string, merchantName?: string, date?: number) { + this.categoryCode = "#d9bcf5" + this.dates = { valueDate: date ? date : 1234 } + this.transaction = { + amountCurrency: { amount: tAmount || 0, currencyCode: "EUR" }, + type: tType || "New Transfer", + creditDebitIndicator: "DBIT" + } + this.merchant = { name: merchantName || "Merchant", accountNumber: "" } + } } export interface Transfer { diff --git a/src/app/transaction-form/transaction-form.component.html b/src/app/transaction-form/transaction-form.component.html index 0e8e8e0..805a87b 100644 --- a/src/app/transaction-form/transaction-form.component.html +++ b/src/app/transaction-form/transaction-form.component.html @@ -8,8 +8,9 @@
- + [ngClass]="{ 'is-invalid': isControlInvalid(transactionForm.controls.toAcc) }"> +
@@ -17,13 +18,13 @@
€
- +
-
- - - +
+ + +
@@ -41,9 +42,9 @@

Review Transfer

Are you ready to send out this transfer?

It will be sent to account:

-

{{cs.toAcc.value}}

+

{{transactionForm.controls.toAcc.value}}

With the amount of:

-

€ {{decimalString(cs.amount)}}

+

€ {{decimalString(transactionForm.controls.amount)}}

diff --git a/src/app/transaction-form/transaction-form.component.spec.ts b/src/app/transaction-form/transaction-form.component.spec.ts index 30b946a..dd42ee1 100644 --- a/src/app/transaction-form/transaction-form.component.spec.ts +++ b/src/app/transaction-form/transaction-form.component.spec.ts @@ -1,25 +1,75 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { FormBuilder } from '@angular/forms'; +import { By } from '@angular/platform-browser'; +import { SubmitButtonComponent } from 'bb-ui/components/submit-button/submit-button.component'; +import { collapseTextChangeRangesAcrossMultipleVersions } from 'typescript'; import { TransactionFormComponent } from './transaction-form.component'; describe('TransactionFormComponent', () => { let component: TransactionFormComponent; + let component2: ComponentFixture; + let fixture: ComponentFixture; + let fixture2: ComponentFixture; beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ TransactionFormComponent ] - }) - .compileComponents(); + declarations: [TransactionFormComponent, SubmitButtonComponent], + providers: [FormBuilder] + }).compileComponents(); }); beforeEach(() => { fixture = TestBed.createComponent(TransactionFormComponent); + fixture2 = TestBed.createComponent(SubmitButtonComponent); component = fixture.componentInstance; fixture.detectChanges(); }); - it('should create', () => { + it('should create the TransactionFormComponent', () => { expect(component).toBeTruthy(); }); + + it('should display validation errors if controls are empty on submit', () => { + component.transactionForm.controls.amount.setValue("") + component.transactionForm.controls.toAcc.setValue("") + component.submitClicked = true + fixture.detectChanges() + + expect(component.transactionForm.valid).toBeFalsy() + expect(fixture.debugElement.queryAll(By.css('.error')).length).toBe(2) + }); + + it('should not display validation errors if controls are valid', () => { + component.transactionForm.controls.amount.setValue("123") + component.transactionForm.controls.toAcc.setValue("test account") + fixture.detectChanges() + + expect(component.transactionForm.valid).toBeTruthy() + expect(fixture.debugElement.queryAll(By.css('.error')).length).toBe(0) + }); + + xit('should display validation errors if amount field is too large on submit', () => { + component.userBalance = 5000 + component.transactionForm.controls.toAcc.setValue("test account") + component.transactionForm.controls.amount.setValue(5501) + component.transactionForm.updateValueAndValidity() + component.submitClicked = true + + fixture.detectChanges() + + expect(component.transactionForm.invalid).toBeTruthy() + expect(fixture.debugElement.queryAll(By.css('.error')).length).toBe(1) + }); + + it('should display validation errors if amount field is negative on submit', () => { + component.transactionForm.controls.toAcc.setValue("test account") + component.transactionForm.controls.amount.setValue("-1") + component.submitClicked = true + fixture.detectChanges() + + expect(component.transactionForm.valid).toBeFalsy() + expect(fixture.debugElement.queryAll(By.css('.error')).length).toBe(1) + }); }); diff --git a/src/app/transaction-form/transaction-form.component.ts b/src/app/transaction-form/transaction-form.component.ts index 16e5182..9c3c7d6 100644 --- a/src/app/transaction-form/transaction-form.component.ts +++ b/src/app/transaction-form/transaction-form.component.ts @@ -16,7 +16,6 @@ export class TransactionFormComponent { userBalance: number = 5824.76 submitClicked: boolean = false transactionForm: FormGroup = this.emptyTransactionForm() - cs = this.transactionForm.controls //TODO remove shorthand private emptyTransactionForm() { return this.formBuilder.group({ @@ -29,7 +28,6 @@ export class TransactionFormComponent { private resetForm() { this.transactionForm = this.emptyTransactionForm() this.submitClicked = false - this.cs = this.transactionForm.controls } dismissModal() { @@ -43,8 +41,9 @@ export class TransactionFormComponent { } onConfirm() { - this.userBalance -= this.cs.amount.value - this.newTransfer.emit({ 'amount': this.cs.amount.value, 'account': this.cs.toAcc.value }) + const amount = this.transactionForm.controls.amount.value + this.userBalance -= amount + this.newTransfer.emit({ 'amount': amount, 'account': this.transactionForm.controls.toAcc.value }) this.resetForm() this.dismissModal() } diff --git a/src/app/transaction-list/transaction-list.component.html b/src/app/transaction-list/transaction-list.component.html index 742680c..f12c33f 100644 --- a/src/app/transaction-list/transaction-list.component.html +++ b/src/app/transaction-list/transaction-list.component.html @@ -9,7 +9,7 @@
  - {{dateString(t.dates.valueDate)}} + {{dateString(t.dates.valueDate)}}
diff --git a/src/app/transaction-list/transaction-list.component.scss b/src/app/transaction-list/transaction-list.component.scss index b2d8165..89a9681 100644 --- a/src/app/transaction-list/transaction-list.component.scss +++ b/src/app/transaction-list/transaction-list.component.scss @@ -5,12 +5,13 @@ .list-container { overflow: auto; - height: 68vh; + height: 66vh; } .item { border-width: 0; border-bottom-width: 1px; + border-radius: 0; } ::-webkit-scrollbar { diff --git a/src/app/transaction-list/transaction-list.component.spec.ts b/src/app/transaction-list/transaction-list.component.spec.ts index d72eeaf..bde20ab 100644 --- a/src/app/transaction-list/transaction-list.component.spec.ts +++ b/src/app/transaction-list/transaction-list.component.spec.ts @@ -1,25 +1,50 @@ +import { HttpClient, HttpHandler } from '@angular/common/http'; import { ComponentFixture, TestBed } from '@angular/core/testing'; - +import { By } from '@angular/platform-browser'; +import { Transaction } from '../model'; import { TransactionListComponent } from './transaction-list.component'; describe('TransactionListComponent', () => { - let component: TransactionListComponent; - let fixture: ComponentFixture; + let component: TransactionListComponent + let fixture: ComponentFixture beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ TransactionListComponent ] - }) - .compileComponents(); - }); + declarations: [TransactionListComponent], + providers: [HttpClient, HttpHandler] + }).compileComponents() + }) beforeEach(() => { - fixture = TestBed.createComponent(TransactionListComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); + fixture = TestBed.createComponent(TransactionListComponent) + component = fixture.componentInstance + fixture.detectChanges() + }) + + it('should create the TransactionListComponent', () => { + expect(component).toBeTruthy() + }) + + it('should display a list entry for each transaction', () => { + component.transactions = [new Transaction(1), new Transaction(2), new Transaction(3)] + fixture.detectChanges() + expect(fixture.debugElement.queryAll(By.css('.list-group-item')).length).toBe(3) + }) + + it('should add a transaction to the list if the @Input is updated and ngOnChanges is called', () => { + component.transactions = [new Transaction(1), new Transaction(2), new Transaction(3)] + component.newTransaction = new Transaction(4) + component.ngOnChanges() + fixture.detectChanges() + expect(fixture.debugElement.queryAll(By.css('.list-group-item')).length).toBe(4) + }) - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); + xit('should sort the transactions by date', () => { + component.transactions = [new Transaction(1, "", "", 0), new Transaction(2, "", "", 86400), new Transaction(3, "", "", 172800)] + fixture.detectChanges() + const list = fixture.debugElement.queryAll(By.css('.date')) + for (let i = 0; i < 3; i++) { + expect(list[i].nativeNode.innerHTML).toContain("Jan " + (i + 1)) + } + }) +}) diff --git a/src/app/transaction-list/transaction-list.component.ts b/src/app/transaction-list/transaction-list.component.ts index 0e71388..5f70498 100644 --- a/src/app/transaction-list/transaction-list.component.ts +++ b/src/app/transaction-list/transaction-list.component.ts @@ -35,7 +35,7 @@ export class TransactionListComponent implements OnInit, OnChanges { } private getData(): Observable { - const corsProxy = 'https://cors.bridged.cc/' //TODO + const corsProxy = 'https://cors.bridged.cc/' const url = 'https://r9vdzv10vd.execute-api.eu-central-1.amazonaws.com/dev/transactions' return this.http.get>(corsProxy + url).pipe( map((data: Transaction[]) => data),