reafactor code and names

src/app/components/options-sidebar/time-clock/time-clock.component.css

@@ -7,36 +7,4 @@
     display: flex;
     height: 100%;
     justify-content: center;
-}
-
-.place-holder-danger::-webkit-input-placeholder {
-    /* WebKit, Blink, Edge */
-    color: #909;
-}
-
-.place-holder-danger:-moz-placeholder {
-    /* Mozilla Firefox 4 to 18 */
-    color: #909;
-    opacity: 1;
-}
-
-.placeholder-danger::-moz-placeholder {
-    /* Mozilla Firefox 19+ */
-    color: #DC3545 !important;
-    opacity: 1;
-}
-
-.placeholder-danger:-ms-input-placeholder {
-    /* Internet Explorer 10-11 */
-    color: #DC3545 !important;
-}
-
-.placeholder-danger::-ms-input-placeholder {
-    /* Microsoft Edge */
-    color: #DC3545 !important;
-}
-
-.placeholder-danger::placeholder {
-    /* Most modern browsers support this now. */
-    color: #DC3545 !important;
 }

src/app/components/options-sidebar/time-clock/time-clock.component.html

@@ -23,11 +23,11 @@ <h3>{{ hourCounterRealTime | number: '2.0-2' }}:{{ minuteCounterRealTime | numbe
                 </div>
                 <div class="col-4">
                     <h6>Day</h6>
-                    <h3>4:22</h3>
+                    <h3>00:00</h3>
                 </div>
                 <div class="col-4">
                     <h6>Week</h6>
-                    <h3>14:00</h3>
+                    <h3>00:00</h3>
                 </div>
             </div>
             <h6 class="text-left"><strong>Projects</strong></h6>
@@ -41,7 +41,7 @@ <h6 class="text-left"><strong>Projects</strong></h6>
                 <app-project-list-hover [projects]="projects" (showFields)="setShowFields($event)"></app-project-list-hover>
             </ul>
             <br>
-            <form *ngIf="!isClockIn || showFields">
+            <form *ngIf="(!isClockIn || showFields) && !isHidenForm">
                 <div class="form-group row">
                     <label for="inputActivity" class="col-sm-2 col-form-label text-center"><strong>Activity</strong></label>
                     <div class="col-sm-10">
@@ -58,19 +58,22 @@ <h6 class="text-left"><strong>Projects</strong></h6>
                     <label for="inputTechnology" class="col-sm-2 col-form-label text-center"><strong>Technology</strong></label>
                     <div class="col-sm-10">
                         <input *ngIf="!showAlertEnterTecnology" #data type="text" (keyup)="enterTechnology(data.value)" class="form-control">
-                        <input *ngIf="showAlertEnterTecnology" #data type="text" (keyup)="enterTechnology(data.value)" class="form-control border-danger placeholder-danger " placeholder="Field technology is required. Enter this field for clock out.">
+                        <input *ngIf="showAlertEnterTecnology" #data type="text" (keyup)="enterTechnology(data.value)" class="form-control border-danger">
+                        <div class="">
+                            <h6 *ngIf="showAlertEnterTecnology" class="text-danger text-left">Technology field is required. Enter this field to clock out.</h6>
+                        </div>
                     </div>
                 </div>
             </form>
             <hr>
             <div class="container">
                 <div class="row">
-                    <div class="col text-left">
+                    <div class="col text-left" id="optionsContainer">
                         <button class="btn btn-light btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                             Options
                           </button>
                     </div>
-                    <div class="col text-right">
+                    <div class="col text-right" id="clockInOutContainer">
                         <button *ngIf="isClockIn" class="btn btn-success btn-sm" type="button" (click)="employeClockIn()">Clock In</button>
                         <button *ngIf="!isClockIn" class="btn btn-danger btn-sm" type="button" (click)="employeClockOut()">Clock Out</button>
                     </div>

src/app/components/options-sidebar/time-clock/time-clock.component.spec.ts

@@ -1,6 +1,6 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { async, ComponentFixture, TestBed, fakeAsync } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-import { DebugElement } from '@angular/core';
+import { DebugElement, Component } from '@angular/core';
 import { TimeClockComponent } from './time-clock.component';
 import { ProjectListHoverComponent } from '../../shared/project-list-hover/project-list-hover.component';
 
@@ -10,7 +10,6 @@ describe('TimeClockComponent', () => {
   let de: DebugElement;
 
   function setup() {
-    // tslint:disable-next-line: no-shadowed-variable
     const fixture = TestBed.createComponent(TimeClockComponent);
     const app = fixture.debugElement.componentInstance;
     return { fixture, app };
@@ -34,8 +33,7 @@ describe('TimeClockComponent', () => {
   });
 
   it('should have p tag as \'Dario clocked out at 00:00:00\'', async(() => {
-    // tslint:disable-next-line: no-shadowed-variable
-    const { app, fixture } = setup();
+    const { fixture } = setup();
     fixture.detectChanges();
     const compile = fixture.debugElement.nativeElement;
     const ptag = compile.querySelector('p');
@@ -63,4 +61,68 @@ describe('TimeClockComponent', () => {
     li.nativeElement.click();
     expect(component.setShowFields).toHaveBeenCalledWith(true);
   });
+
+  it('should have button text as Options', async(() => {
+    const { fixture } = setup();
+    fixture.detectChanges();
+    const x = document.getElementById('optionsContainer');
+    const ptag = x.querySelector('button');
+    expect(ptag.textContent).toBe(' Options ');
+  }));
+
+  it('should set Clock In', () => {
+    const { fixture } = setup();
+    fixture.detectChanges();
+    const x = document.getElementById('clockInOutContainer');
+    const ptag = x.querySelector('button');
+    expect(ptag.textContent).toBe('Clock In');
+  });
+
+  it('should setVartToEmpty called', () => {
+    spyOn(component, 'setDefaultValuesToFields');
+    component.setDefaultValuesToFields();
+    expect(component.setDefaultValuesToFields).toHaveBeenCalled();
+  });
+
+  it('should employeClockIn called', () => {
+    spyOn(component, 'employeClockIn');
+    component.employeClockIn();
+    expect(component.employeClockIn).toHaveBeenCalled();
+  });
+
+  it('should employeClockOut called', () => {
+    spyOn(component, 'employeClockOut');
+    component.employeClockOut();
+    expect(component.employeClockOut).toHaveBeenCalled();
+  });
+
+  it('should enterTechnolofy called', () => {
+    spyOn(component, 'enterTechnology');
+    component.enterTechnology('');
+    expect(component.enterTechnology).toHaveBeenCalled();
+  });
+
+  // it('show init state of vars', () => {
+  //   spyOn(component, 'employeClockIn');
+  //   const isClockIn = true;
+  //   const isEnterTechnology = false;
+  //   const hourCounterRealTime = 0;
+  //   const minuteCounterRealTime = 0;
+  //   const secondsCounterRealTime = 0;
+  //   const hour = 0;
+  //   const minute = 0;
+  //   const seconds = 0;
+  //   expect(component.isClockIn).toBe(isClockIn);
+  //   expect(component.isEnterTechnology).toBe(isEnterTechnology);
+  //   expect(component.hourCounterRealTime).toBe(hourCounterRealTime);
+  //   expect(component.minuteCounterRealTime).toBe(minuteCounterRealTime);
+  //   expect(component.secondsCounterRealTime).toBe(secondsCounterRealTime);
+  //   expect(component.hour).toBe(hour);
+  //   expect(component.minute).toBe(minute);
+  //   expect(component.seconds).toBe(hour);
+  // });
+
+
+
+
 });

src/app/components/options-sidebar/time-clock/time-clock.component.ts

@@ -28,10 +28,11 @@ export class TimeClockComponent  implements OnInit {
   minute: number;
   seconds: number;
   interval;
-  dataTechnology: string;
-  execOnlyOneTimeCounter = 0;
-  execOnlyOneTimeClockIn = 0;
+  dataTechnology: string[] = new Array();
+  execOnlyOneTimeCounter = false;
+  execOnlyOneTimeClockIn = false;
   isClockInEnable = false;
+  isHidenForm = true;
 
   constructor() {
     this.isClockIn = true;
@@ -47,8 +48,9 @@ export class TimeClockComponent  implements OnInit {
    employeClockIn(): boolean {
      this.isClockInEnable = true;
      this.isClockIn = !this.isClockIn;
+     this.isHidenForm = false;
      this.startTimer();
-     this.setTimeToInOut();
+     this.setArrivalAndDepartureTimes();
      return this.isClockIn;
    }
 
@@ -57,15 +59,13 @@ export class TimeClockComponent  implements OnInit {
        this.isClockIn = false;
        this.showAlertEnterTecnology = true;
      } else {
-       this.setVarToEmpty();
+       this.setDefaultValuesToFields();
        this.pauseTimer();
-       this.setTimeToInOut();
-
+       this.setArrivalAndDepartureTimes();
      }
    }
 
    enterTechnology(data: string) {
-     this.dataTechnology = data;
      if ( data.length > 0 ) {
       this.isEnterTechnology = true;
      } else {
@@ -74,14 +74,15 @@ export class TimeClockComponent  implements OnInit {
    }
 
    setShowFields(show: boolean) {
+     this.isHidenForm = false;
      if ( this.isClockInEnable !== true ) {
       this.isClockIn = false;
       this.showFields = show;
-      if (  this.execOnlyOneTimeCounter === 0 ) {
+      if (  !this.execOnlyOneTimeCounter  ) {
         this.startTimer();
-        this.execOnlyOneTimeCounter++;
+        this.execOnlyOneTimeCounter = true;
       }
-      this.setTimeToInOut();
+      this.setArrivalAndDepartureTimes();
      }
   }
 
@@ -107,27 +108,28 @@ export class TimeClockComponent  implements OnInit {
     }
   }
 
-  setTimeToInOut() {
-    if ( this.execOnlyOneTimeClockIn === 0 ) {
+  setArrivalAndDepartureTimes() {
+    if ( !this.execOnlyOneTimeClockIn ) {
       this.currentDate = new Date();
       this.hour = this.currentDate.getHours();
       this.minute = this.currentDate.getMinutes();
       this.seconds = this.currentDate.getSeconds();
-      this.execOnlyOneTimeClockIn++;
+      this.execOnlyOneTimeClockIn = true;
     }
 
   }
 
-  setVarToEmpty() {
-    this.dataTechnology = '';
+  setDefaultValuesToFields() {
+    this.isHidenForm = true;
     this.isClockIn = true;
     this.isEnterTechnology = false;
     this.showAlertEnterTecnology = false;
-    this.execOnlyOneTimeClockIn = 0;
-    this.execOnlyOneTimeCounter = 0;
+    this.execOnlyOneTimeClockIn = false;
+    this.execOnlyOneTimeCounter = false;
     this.isClockInEnable = false;
   }
 
-  ngOnInit(): void {}
+  ngOnInit(): void {
+  }
 
 }

src/app/components/shared/clock/clock.component.spec.ts

@@ -1,11 +1,19 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { ClockComponent } from './clock.component';
+import { interval, timer } from 'rxjs';
 
 describe('ClockComponent', () => {
   let component: ClockComponent;
   let fixture: ComponentFixture<ClockComponent>;
 
+  function setup() {
+    // tslint:disable-next-line: no-shadowed-variable
+    const fixture = TestBed.createComponent(ClockComponent);
+    const app = fixture.debugElement.componentInstance;
+    return { fixture, app };
+  }
+
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [ ClockComponent ]
@@ -38,4 +46,5 @@ describe('ClockComponent', () => {
     expect(component.currentDate.getSeconds()).toEqual(currentDate.getSeconds());
   });
 
+
 });

src/app/components/shared/clock/clock.component.ts

@@ -15,14 +15,14 @@ export class ClockComponent implements OnInit {
   displayTime: boolean;
 
   constructor() {
-    this.showClcok();
+    this.showClock();
     this.displayTime = false;
     setTimeout(() => {
       this.displayTime = true;
     }, 3000);
    }
 
-   showClcok() {
+   showClock() {
     const timenInterval = interval(1000);
     timenInterval.subscribe( (data) => {
       this.currentDate = new Date();