fix: TT-354 solving bug in Add new activity button

Author: Edgar Guaman

src/app/modules/activities-management/components/activity-list/activity-list.component.ts

@@ -14,8 +14,8 @@ import { ActivityState } from './../../store/activity-management.reducers';
   styleUrls: ['./activity-list.component.scss'],
 })
 export class ActivityListComponent implements OnInit {
-  @Input() showActivityForm: boolean;
   @Output() changeValueShowActivityForm = new EventEmitter<boolean>();
+  showActivityForm: boolean;
 
   constructor(private store: Store<ActivityState>) {
     this.isLoading$ = store.pipe(delay(0), select(getIsLoading));

src/app/modules/activities-management/components/create-activity/create-activity.component.html

@@ -1,5 +1,10 @@
 <div>
-  <form [formGroup]="activityForm" (ngSubmit)="onSubmit(activityForm.value)">
+  <div class="row">
+    <div style="padding: 15px;">
+      <button (click)="activateActivityForm()" class="btn btn-primary">Add new activity</button>
+    </div>
+  </div>
+  <form *ngIf="showActivityForm" [formGroup]="activityForm" (ngSubmit)="onSubmit(activityForm.value)">
     <div class="form-group">
       <label>Name:</label>
       <div>

src/app/modules/activities-management/components/create-activity/create-activity.component.spec.ts

@@ -10,6 +10,7 @@ import {
   activityIdToEdit,
   allActivities,
   ResetActivityToEdit,
+  SetActivityToEdit,
 } from '../../store';
 import { getActivityById } from '../../store/activity-management.selectors';
 import { Activity } from 'src/app/modules/shared/models';
@@ -151,4 +152,12 @@ describe('CreateActivityComponent', () => {
     expect(store.dispatch).toHaveBeenCalledTimes(1);
     expect(store.dispatch).toHaveBeenCalledWith(new ResetActivityToEdit());
   });
+
+  it('should dispatch an action on activateActivityForm', () => {
+    spyOn(store, 'dispatch');
+
+    component.activateActivityForm();
+
+    expect(store.dispatch).toHaveBeenCalledWith(new SetActivityToEdit(null));
+  });
 });

src/app/modules/activities-management/components/create-activity/create-activity.component.ts

@@ -1,17 +1,18 @@
 import { FormBuilder, Validators, FormGroup } from '@angular/forms';
-import { Component, EventEmitter, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { Store, select } from '@ngrx/store';
 import { Activity } from '../../../shared/models';
 import { ActivityState } from './../../store/activity-management.reducers';
-import { CreateActivity, UpdateActivity, getActivityById, ResetActivityToEdit } from '../../store';
+import { CreateActivity, UpdateActivity, getActivityById, ResetActivityToEdit, SetActivityToEdit } from '../../store';
 
 @Component({
   selector: 'app-create-activity',
   templateUrl: './create-activity.component.html',
   styleUrls: ['./create-activity.component.scss'],
 })
 export class CreateActivityComponent implements OnInit {
-  @Output() closeActivityForm = new EventEmitter<boolean>();
+  @Input() showActivityForm: boolean;
+  @Output() changeValueShowActivityForm = new EventEmitter<boolean>();
   activityForm: FormGroup;
   activityToEdit: Activity;
   constructor(private formBuilder: FormBuilder, private store: Store<ActivityState>) {
@@ -59,12 +60,20 @@ export class CreateActivityComponent implements OnInit {
       this.store.dispatch(new CreateActivity(activityData));
       this.activityForm.get('description').setValue('');
     }
-    this.closeActivityForm.emit(false);
+    this.showActivityForm = false;
+    this.changeValueShowActivityForm.emit(this.showActivityForm);
   }
 
   cancelButton() {
     this.activityForm.reset();
     this.store.dispatch(new ResetActivityToEdit());
-    this.closeActivityForm.emit(false);
+    this.showActivityForm = false;
+    this.changeValueShowActivityForm.emit(this.showActivityForm);
+  }
+
+  activateActivityForm() {
+    this.store.dispatch(new SetActivityToEdit(null));
+    this.showActivityForm = true;
+    this.activityForm.reset();
   }
 }

src/app/modules/activities-management/pages/activities-management.component.html

@@ -1,12 +1,7 @@
 <div class="col-12 col-md-9 px-0">
-  <div class="row">
-    <div style="padding: 15px;">
-      <button (click)="activateActivityForm()" class="btn btn-primary">Add new Activity</button>
-    </div>
-  </div>
-  <div *ngIf="showActivityForm">
+  <div>
     <app-create-activity
-    (closeActivityForm)="closeFormActivity($event)"></app-create-activity>
+    [showActivityForm]="showActivityForm" (changeValueShowActivityForm)="showActivityForm = $event"></app-create-activity>
   </div>
   <app-activity-list
   (changeValueShowActivityForm)="showActivityForm = $event"></app-activity-list>

src/app/modules/activities-management/pages/activities-management.component.spec.ts

@@ -1,46 +1,24 @@
 import { waitForAsync, TestBed, ComponentFixture } from '@angular/core/testing';
-import { MockStore, provideMockStore } from '@ngrx/store/testing';
 import { ActivitiesManagementComponent } from './activities-management.component';
-import { SetActivityToEdit } from '../store';
-import { Activity } from '../../shared/models';
 
 describe('ActivitiesManagementComponent', () => {
   let component: ActivitiesManagementComponent;
   let fixture: ComponentFixture<ActivitiesManagementComponent>;
-  let store: MockStore<Activity>;
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [],
-      declarations: [ActivitiesManagementComponent],
-      providers: [provideMockStore({ initialState: {} })],
+      declarations: [ActivitiesManagementComponent]
     }).compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(ActivitiesManagementComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
-    store = TestBed.inject(MockStore);
   });
 
   it('should create the component', () => {
     expect(component).toBeTruthy();
   });
-
-  it('should dispatch an action on activateActivityForm', () => {
-    spyOn(store, 'dispatch');
-
-    component.activateActivityForm();
-
-    expect(store.dispatch).toHaveBeenCalledWith(new SetActivityToEdit(null));
-  });
-
-  it('should call closeActivityForm function', () => {
-    component.closeFormActivity(false);
-
-    expect(component.showActivityForm).toBe(false);
-  });
-
-
 });

src/app/modules/activities-management/pages/activities-management.component.ts

@@ -1,24 +1,12 @@
-import { Component, EventEmitter, Output } from '@angular/core';
-import { Store } from '@ngrx/store';
-import { Activity } from '../../shared/models';
-import { SetActivityToEdit } from '../store';
-
+import { Component, Input } from '@angular/core';
 @Component({
   selector: 'app-activities-management',
   templateUrl: './activities-management.component.html',
   styleUrls: ['./activities-management.component.scss'],
 })
 export class ActivitiesManagementComponent {
-  @Output() closeActivityForm = new EventEmitter<boolean>();
-  showActivityForm = false;
-  constructor(private store: Store<Activity>) {}
+  @Input() showActivityForm: boolean;
 
-  activateActivityForm() {
-    this.store.dispatch(new SetActivityToEdit(null));
-    this.showActivityForm = true;
-  }
+  constructor() {}
 
-  closeFormActivity(event) {
-    this.showActivityForm = event;
-  }
 }