From 677e0fdccf47a0c0a47b4feb1c4aecacc377697d Mon Sep 17 00:00:00 2001
From: Matthew Griffin <mgriffin@scottlogic.com>
Date: Mon, 10 Jun 2024 15:17:01 +0100
Subject: [PATCH] Remove the estimation component if the form is reset

---
 .../carbon-estimator-form.component.spec.ts            |  8 ++++++++
 .../carbon-estimator-form.component.ts                 |  2 ++
 .../tech-carbon-estimator.component.html               |  1 +
 .../tech-carbon-estimator.component.spec.ts            | 10 ++++++++++
 .../tech-carbon-estimator.component.ts                 |  4 ++++
 5 files changed, 25 insertions(+)

diff --git a/src/app/carbon-estimator-form/carbon-estimator-form.component.spec.ts b/src/app/carbon-estimator-form/carbon-estimator-form.component.spec.ts
index a81573d0..fc9a1034 100644
--- a/src/app/carbon-estimator-form/carbon-estimator-form.component.spec.ts
+++ b/src/app/carbon-estimator-form/carbon-estimator-form.component.spec.ts
@@ -22,6 +22,14 @@ describe('CarbonEstimatorFormComponent', () => {
     expect(component.estimatorForm.valid).toBeTruthy();
   });
 
+  it('should emit an event when reset is clicked', () => {
+    spyOn(component.formReset, 'emit');
+
+    fixture.nativeElement.querySelector('button.tce-button-reset').click();
+
+    expect(component.formReset.emit).toHaveBeenCalledTimes(1);
+  });
+
   describe('Downstream', () => {
     it('should invalidate form when monthly active users are zero', () => {
       component.ngOnInit();
diff --git a/src/app/carbon-estimator-form/carbon-estimator-form.component.ts b/src/app/carbon-estimator-form/carbon-estimator-form.component.ts
index c877a668..59c5ca44 100644
--- a/src/app/carbon-estimator-form/carbon-estimator-form.component.ts
+++ b/src/app/carbon-estimator-form/carbon-estimator-form.component.ts
@@ -39,6 +39,7 @@ export class CarbonEstimatorFormComponent implements OnInit {
   public formValue = input<EstimatorValues>();
 
   @Output() public formSubmit: EventEmitter<EstimatorValues> = new EventEmitter<EstimatorValues>();
+  @Output() public formReset: EventEmitter<void> = new EventEmitter();
 
   public estimatorForm!: FormGroup<EstimatorFormValues>;
 
@@ -170,6 +171,7 @@ export class CarbonEstimatorFormComponent implements OnInit {
 
   public resetForm() {
     this.estimatorForm.reset();
+    this.formReset.emit();
   }
 
   private refreshPreviewServerCount() {
diff --git a/src/app/tech-carbon-estimator/tech-carbon-estimator.component.html b/src/app/tech-carbon-estimator/tech-carbon-estimator.component.html
index 99b1ff83..d800762a 100644
--- a/src/app/tech-carbon-estimator/tech-carbon-estimator.component.html
+++ b/src/app/tech-carbon-estimator/tech-carbon-estimator.component.html
@@ -11,6 +11,7 @@ <h1 class="tce-text-3xl tce-mb-6">Technology Carbon Estimator</h1>
       <carbon-estimator-form
         [formValue]="formValue"
         (formSubmit)="handleFormSubmit($event)"
+        (formReset)="handleFormReset()"
         class="tce-w-full md:tce-w-1/2 tce-pb-4 md:tce-pb-0 md:tce-pr-4"></carbon-estimator-form>
     }
     @if (showEstimation) {
diff --git a/src/app/tech-carbon-estimator/tech-carbon-estimator.component.spec.ts b/src/app/tech-carbon-estimator/tech-carbon-estimator.component.spec.ts
index 4537462a..3a0deacc 100644
--- a/src/app/tech-carbon-estimator/tech-carbon-estimator.component.spec.ts
+++ b/src/app/tech-carbon-estimator/tech-carbon-estimator.component.spec.ts
@@ -3,6 +3,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { TechCarbonEstimatorComponent } from './tech-carbon-estimator.component';
 import { CarbonEstimationService } from '../services/carbon-estimation.service';
 import { EstimatorValues } from '../types/carbon-estimator';
+import { By } from '@angular/platform-browser';
 
 describe('TechCarbonEstimatorComponent', () => {
   let component: TechCarbonEstimatorComponent;
@@ -93,6 +94,15 @@ describe('TechCarbonEstimatorComponent', () => {
     expect(component.showEstimation).toBeTrue();
   });
 
+  it('should hide estimation if form is reset', () => {
+    component.showEstimation = true;
+    fixture.detectChanges();
+
+    fixture.debugElement.query(By.css('carbon-estimator-form')).triggerEventHandler('formReset');
+
+    expect(component.showEstimation).toBeFalse();
+  });
+
   it('should scroll to top of assumptions and limitation when showAssumptionsAndLimitation is called', () => {
     component.showEstimation = true;
     component.showAssumptionsAndLimitationView = true;
diff --git a/src/app/tech-carbon-estimator/tech-carbon-estimator.component.ts b/src/app/tech-carbon-estimator/tech-carbon-estimator.component.ts
index 9b9d1f30..69e67a94 100644
--- a/src/app/tech-carbon-estimator/tech-carbon-estimator.component.ts
+++ b/src/app/tech-carbon-estimator/tech-carbon-estimator.component.ts
@@ -43,6 +43,10 @@ export class TechCarbonEstimatorComponent {
     this.estimations.nativeElement.scrollIntoView();
   }
 
+  public handleFormReset() {
+    this.showEstimation = false;
+  }
+
   public showAssumptionsAndLimitation(): void {
     this.showAssumptionsAndLimitationView = true;
     this.changeDetector.detectChanges();