Merge pull request #72 from ScottLogic/sfd-104-remove-on-reset

Remove the Diagram when 'Reset' button is clicked

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();

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();
   }
 
   public get headCount() {

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) {

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;

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();