add toggle pricing test (#13)

Author: josefbogar

package-lock.json

@@ -9,6 +9,7 @@
                     </div>
                     <div class="float-end me-1">
                         <button class="btn btn-sm btn-secondary" [ngClass]="{ 'active': showPricing }" type="button"
+                                id="pricingToggle"
                                 data-toggle="button" [attr.aria-pressed]="showPricing" autocomplete="off" (click)="togglePricing()">
                             <fa-icon [icon]="dollarIcon" class="fa-lg"></fa-icon>
                         </button>
@@ -130,7 +131,7 @@
                         <label for="o2UnitPrice" class="form-label">Unit price O2:</label>
                         <input formControlName="o2UnitPrice" class="form-control" type="number"
                                (input)="applyChange()" [min]="ranges.money[0]" [max]="ranges.money[1]" step="1"
-                               required [class.is-invalid]="o2UnitPriceInvalid" id="o2UnitPrice" />
+                               required [class.is-invalid]="o2UnitPriceInvalid" id="o2UnitPrice"/>
                         <div class="text-danger" *ngIf="o2UnitPriceInvalid">Needs to be number
                             {{ranges.moneyLabel}}</div>
                     </div>
@@ -175,7 +176,7 @@
                             </tr>
                             <tr>
                                 <td><strong>Total price</strong></td>
-                                <td class="table-active"><strong>{{ pricing.totalPrice | number:'1.0-1' }}</strong></td>
+                                <td class="table-active" id="totalPrice"><strong>{{ pricing.totalPrice | number:'1.0-1' }}</strong></td>
                             </tr>
                         </tbody>
                     </table>

projects/planner/src/app/gas-blender/gas-blender.component.html

@@ -1,4 +1,5 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ReactiveFormsModule } from '@angular/forms';
 import { DecimalPipe } from '@angular/common';
 import { GasBlenderComponent } from './gas-blender.component';
 import { UnitConversion } from '../shared/UnitConversion';
@@ -14,15 +15,40 @@ import { DiveSchedules } from '../shared/dive.schedules';
 import { ReloadDispatcher } from '../shared/reloadDispatcher';
 import { ApplicationSettingsService } from '../shared/ApplicationSettings';
 import { BlendPricingService } from '../shared/blend-pricing.service';
+import { By } from '@angular/platform-browser';
 
+class GasBlenderPage {
+    constructor(private fixture: ComponentFixture<GasBlenderComponent>) { }
+
+    public get pricingToggleBtn(): HTMLInputElement {
+        return this.fixture.debugElement.query(By.css('#pricingToggle')).nativeElement as HTMLInputElement;
+    }
+
+    public get o2unitPriceInput(): HTMLInputElement {
+        return this.fixture.debugElement.query(By.css('#o2UnitPrice')).nativeElement as HTMLInputElement;
+    }
+
+    public get heUnitPriceInput(): HTMLInputElement {
+        return this.fixture.debugElement.query(By.css('#heUnitPrice')).nativeElement as HTMLInputElement;
+    }
+
+    public get topMixUnitPriceInput(): HTMLInputElement {
+        return this.fixture.debugElement.query(By.css('#topMixUnitPrice')).nativeElement as HTMLInputElement;
+    }
+
+    public get totalPriceDisplay(): HTMLElement {
+        return this.fixture.debugElement.query(By.css('#totalPrice')).nativeElement as HTMLElement;
+    }
+}
 describe('GasBlenderComponent', () => {
     let component: GasBlenderComponent;
     let fixture: ComponentFixture<GasBlenderComponent>;
     let calculateSpy: jasmine.Spy<() => void>;
-
-    beforeEach(() => {
-        TestBed.configureTestingModule({
+    let simplePage: GasBlenderPage;
+    beforeEach(async() => {
+        await TestBed.configureTestingModule({
             declarations: [GasBlenderComponent],
+            imports: [ReactiveFormsModule],
             providers: [
                 UnitConversion,
                 GasBlenderService, BlendPricingService,
@@ -31,12 +57,39 @@ describe('GasBlenderComponent', () => {
                 Preferences, ViewSwitchService, DiveSchedules,
                 ReloadDispatcher, ApplicationSettingsService
             ]
-        });
+        }).compileComponents();
+    });
+
+    beforeEach(() => {
         fixture = TestBed.createComponent(GasBlenderComponent);
         component = fixture.componentInstance;
         fixture.detectChanges();
         const calc = TestBed.inject(GasBlenderService);
         calculateSpy = spyOn(calc, 'calculate');
+        simplePage = new GasBlenderPage(fixture);
+    });
+
+    it('should toggle pricing and display total price', () => {
+
+        expect(simplePage.pricingToggleBtn.checked).toBeFalsy();
+
+        simplePage.pricingToggleBtn.click();
+        fixture.detectChanges();
+
+        const pricingElement = simplePage.totalPriceDisplay;
+        expect(pricingElement).toBeTruthy();
+
+        simplePage.o2unitPriceInput.value = '50';
+        simplePage.o2unitPriceInput.dispatchEvent(new Event('input'));
+
+        simplePage.heUnitPriceInput.value = '75';
+        simplePage.heUnitPriceInput.dispatchEvent(new Event('input'));
+
+        simplePage.topMixUnitPriceInput.value = '100';
+        simplePage.topMixUnitPriceInput.dispatchEvent(new Event('input'));
+
+        fixture.detectChanges();
+        expect(simplePage.totalPriceDisplay.textContent).toBe('20,000');
     });
 
     it('Apply change calls calculate', () => {