Feature/test

package.json

@@ -5,7 +5,7 @@
     "ng": "ng",
     "start": "ng serve",
     "build": "ng build",
-    "test": "ng test",
+    "test": "jest",
     "lint": "ng lint",
     "e2e": "ng e2e"
   },
@@ -31,12 +31,14 @@
     "@angular/cli": "~9.1.1",
     "@angular/compiler-cli": "~9.1.1",
     "@angular/language-service": "~9.1.1",
-    "@types/node": "^12.11.1",
-    "@types/jasmine": "~3.5.0",
     "@types/jasminewd2": "~2.0.3",
+    "@types/jest": "^26.0.0",
+    "@types/node": "^12.11.1",
     "codelyzer": "^5.1.2",
     "jasmine-core": "~3.5.0",
     "jasmine-spec-reporter": "~4.2.1",
+    "jest": "^26.0.1",
+    "jest-preset-angular": "^8.2.0",
     "karma": "~4.4.1",
     "karma-chrome-launcher": "~3.1.0",
     "karma-coverage-istanbul-reporter": "~2.1.0",
@@ -46,5 +48,20 @@
     "ts-node": "~8.3.0",
     "tslint": "~6.1.0",
     "typescript": "~3.8.3"
+  },
+  "jest": {
+    "preset": "jest-preset-angular",
+    "setupFilesAfterEnv": ["<rootDir>/setupJest.ts"],
+    "testPathIgnorePatterns": [
+      "<rootDir>/node_modules/",
+      "<rootDir>/dist/",
+      "<rootDir>/src/test.ts"
+    ],
+    "moduleNameMapper": {
+      "^@app(.*)": "<rootDir>/src/app/$1",
+      "^@app/helpers(.*)": "<rootDir>/src/app/helpers/$1",
+      "^@app/services(.*)": "<rootDir>/src/app/services/$1",
+      "^@env(.*)": "<rootDir>/src/environments/$1"
+    }
   }
 }

setupJest.ts

@@ -0,0 +1 @@
+import 'jest-preset-angular';

src/app/app-routing.module.ts

@@ -4,7 +4,7 @@ import { AuthGuard } from './guards/auth.guard';
 import { UnauthGuard } from './guards/unauth.guard';
 
 
-const routes: Routes = [
+export const routes: Routes = [
   { path: '', redirectTo: '/login', pathMatch: 'full' },
   {
     path: '',

src/app/guards/auth.guard.ts

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 import { CanActivate, Router } from '@angular/router';
-import { UserService } from '@app/services/user.service';
+import { UserService } from '@app/services/user/user.service';
 
 @Injectable()
 export class AuthGuard implements CanActivate {
@@ -12,5 +12,5 @@ export class AuthGuard implements CanActivate {
     this.router.navigateByUrl('/login');
     return false;
   }
-  
+
 }

src/app/guards/guard.spec.ts

@@ -0,0 +1,57 @@
+import { UnauthGuard } from '@app/guards/unauth.guard';
+import { AuthGuard } from '@app/guards/auth.guard';
+
+class MockRouter {
+  navigateByUrl(path) {}
+}
+
+describe('Guards', () => {
+  let authGuard: AuthGuard;
+  let unAuthGuard: UnauthGuard;
+  let userService;
+  let router;
+
+  beforeEach(() => {
+    router = new MockRouter();
+    jest.spyOn(router, 'navigateByUrl');
+  });
+
+  describe('AuthGuard', () => {
+    const createAuthLogginMock = response => {
+      userService = { isLoggedIn: () => response };
+      authGuard = new AuthGuard(router, userService);
+    };
+
+    it('should return true for a logged in user', () => {
+      createAuthLogginMock(true);
+      expect(authGuard.canActivate()).toEqual(true);
+    });
+
+    it('should navigate to home for a logged out user', () => {
+      createAuthLogginMock(false);
+      expect(authGuard.canActivate()).toEqual(false);
+      expect(router.navigateByUrl).toHaveBeenCalledWith('/login');
+    });
+  });
+
+  describe('UnAuthGuard', () => {
+
+    const createUnAuthLogginMock = response => {
+      userService = { isLoggedIn: () => response };
+      unAuthGuard = new UnauthGuard(router, userService);
+    };
+
+    it('should return false if a user is loggued in', () => {
+      createUnAuthLogginMock(true);
+      expect(unAuthGuard.canActivate()).toEqual(false);
+    });
+
+    it('should navigate to Books for a logged user', () => {
+      createUnAuthLogginMock(true);
+
+      expect(unAuthGuard.canActivate()).toEqual(false);
+      expect(router.navigateByUrl).toHaveBeenCalledWith('/books');
+    });
+  });
+
+});

src/app/guards/unauth.guard.ts

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 import { CanActivate, Router } from '@angular/router';
-import { UserService } from '@app/services/user.service';
+import { UserService } from '@app/services/user/user.service';
 
 @Injectable()
 export class UnauthGuard implements CanActivate {
@@ -14,5 +14,5 @@ export class UnauthGuard implements CanActivate {
     }
     return true;
   }
-  
+
 }

src/app/helpers/utils/utils.ts

@@ -1,4 +1,4 @@
-export function toSnakeCase (value: string) {
+export function toSnakeCase (value: string): string {
   return value.replace(/([A-Z])/g, letter => `_${letter.toLowerCase()}`);
 };
 

src/app/modules/auth/auth.component.ts

@@ -19,7 +19,7 @@ export class AuthComponent implements OnInit {
 
   constructor(
     private router: Router,
-    private localStorageService: LocalStorageService, 
+    private localStorageService: LocalStorageService,
     private store: Store<{ shopping: Book[] }>) {
     this.shoppingBooks$ = store.pipe(select('shopping'));
   }
@@ -48,6 +48,4 @@ export class AuthComponent implements OnInit {
     this.store.dispatch(removeBook({index}));
   }
 
-
-
 }

src/app/screens/authentication/components/login/login.component.spec.ts

@@ -0,0 +1,106 @@
+import { fillForm } from './../../../../test/utils';
+import { LocalStorageService } from '@app/services/local-storage.service';
+import { TranslateService, TranslateModule, TranslateLoader } from '@ngx-translate/core';
+import { LoginComponent } from '@app/screens/Authentication/components/Login/login.component';
+import { userMock } from '@app/test/userMock';
+import { AuthenticationComponent } from '@app/screens/Authentication/authentication.component';
+import { ButtonComponent } from '@app/components/Button/button.component';
+import { UserService } from '@app/services/user/user.service';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { By } from '@angular/platform-browser';
+import { Routes, Router } from '@angular/router';
+import { of } from 'rxjs';
+import { storeMock } from '@app/test/storeMock';
+
+
+
+describe('LoginComponent', () => {
+  let component: LoginComponent;
+  let fixture: ComponentFixture<LoginComponent>;
+  let router;
+  let submitButton;
+  const routes: Routes = [
+    { path: 'books', component: LoginComponent }
+  ];
+  const inputs = ['email', 'password'];
+
+  const elements = {
+    email: null,
+    password: null
+  };
+
+  const loginResponse = {
+    body: { data: userMock },
+    headers: new Map([
+      ['client', storeMock.client],
+      ['uid', storeMock.uid],
+      ['access-token', storeMock['access-token']]
+    ])
+  };
+
+  beforeEach(async(() => {
+    const userServiceStub = () => ({
+      login: user => ({ subscribe: f => f(loginResponse) })
+    });
+    TestBed.configureTestingModule({
+      imports: [
+        FormsModule,
+        RouterTestingModule.withRoutes(routes),
+        ReactiveFormsModule,
+        TranslateModule.forRoot({})
+      ],
+      providers: [
+        { provide: UserService, useFactory: userServiceStub },
+        LocalStorageService,
+        TranslateService
+      ],
+      declarations: [
+        LoginComponent,
+        ButtonComponent,
+        AuthenticationComponent,
+      ]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LoginComponent);
+    component = fixture.componentInstance;
+    fixture.autoDetectChanges();
+    router = TestBed.inject(Router);
+
+    elements.email = fixture.debugElement.query(By.css('input[formcontrolname="email"]')).nativeElement;
+    elements.password = fixture.debugElement.query(By.css('input[formcontrolname="password"]')).nativeElement;
+
+    submitButton = fixture.debugElement.query(By.css('.primary')).nativeElement;
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('Should create object when press submit', () => {
+    fillForm(inputs, elements);
+    submitButton.click();
+    fixture.detectChanges();
+    expect(component.loginForm.value).toEqual({ email: userMock.email, password: userMock.password });
+  });
+
+  it('The submit button should be disable when inputs are missing', () => {
+    fixture.detectChanges();
+    expect(component.loginForm.invalid).toBeTruthy();
+  });
+
+  it('Should send to Books route when create user responds fine', () => {
+    const routerNavigateSpy = jest
+      .spyOn(router, 'navigateByUrl')
+      .mockImplementation(() => of(true).toPromise());
+    fillForm(inputs, elements);
+    component.onSubmit();
+    fixture.detectChanges();
+    expect(routerNavigateSpy).toHaveBeenCalledWith('/books');
+  });
+
+});

src/app/screens/authentication/components/login/login.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { UserService } from '@app/services/user.service';
+import { UserService } from '@app/services/user/user.service';
 import { Router } from '@angular/router';
 import { LocalStorageService } from '@app/services/local-storage.service';
 
@@ -34,6 +34,6 @@ export class LoginComponent implements OnInit {
         this.store.save('client', resp.headers.get('client'));
         this.store.save('uid', resp.headers.get('uid'));
         this.router.navigateByUrl('/books');
-      }); 
+      });
   }
 }

src/app/screens/authentication/components/signup/signup.component.spec.ts

@@ -0,0 +1,101 @@
+import { keysToSnakeCase } from '@app/helpers/utils/utils';
+import { fillForm } from './../../../../test/utils';
+import { userMock } from '@app/test/userMock';
+import { AuthenticationComponent } from '@app/screens/Authentication/authentication.component';
+import { ButtonComponent } from '@app/components/Button/button.component';
+import { UserService } from '@app/services/user/user.service';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { By } from '@angular/platform-browser';
+
+import { SignupComponent } from '@app/screens/authentication/components/signup/signup.component';
+import { Routes, Router } from '@angular/router';
+import { of } from 'rxjs';
+
+
+
+describe('SignUpComponent', () => {
+  let component: SignupComponent;
+  let fixture: ComponentFixture<SignupComponent>;
+  let router;
+  const routes: Routes = [
+    { path: 'login', component: SignupComponent }
+  ];
+  const elements = {
+    email: null,
+    password: null,
+    firstName: null,
+    lastName: null,
+    passwordConfirmation: null,
+    submitButton: null
+  };
+
+  const inputs = ['email', 'password', 'firstName', 'lastName', 'passwordConfirmation'];
+
+  beforeEach(async(() => {
+    const userServiceStub = () => ({
+      createUser: user => ({ subscribe: f => f(userMock) })
+    });
+    TestBed.configureTestingModule({
+      imports: [
+        FormsModule,
+        RouterTestingModule.withRoutes(routes),
+        ReactiveFormsModule
+      ],
+      providers: [
+        { provide: UserService, useFactory: userServiceStub },
+      ],
+      declarations: [
+        SignupComponent,
+        ButtonComponent,
+        AuthenticationComponent,
+      ]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SignupComponent);
+    component = fixture.componentInstance;
+    fixture.autoDetectChanges();
+    router = TestBed.inject(Router);
+
+    inputs.forEach(input => {
+      elements[input] = fixture.debugElement.query(By.css(`input[formcontrolname="${input}"]`)).nativeElement;
+    });
+
+    elements.submitButton = fixture.debugElement.query(By.css('.primary')).nativeElement;
+
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('Should create object when press submit', () => {
+    fillForm(inputs, elements);
+    elements.submitButton.click();
+    fixture.detectChanges();
+
+    const formValue = component.authForm.value;
+
+    expect({id: userMock.id, ...keysToSnakeCase(formValue.user) }).toEqual(userMock);
+  });
+
+  it('The submit button should be disable when inputs are missing', () => {
+    fixture.detectChanges();
+    expect(component.authForm.invalid).toBeTruthy();
+  });
+
+  it('Should send to login route when create user responds fine', () => {
+    const routerNavigateSpy = jest
+      .spyOn(router, 'navigate')
+      .mockImplementation(() => of(true).toPromise());
+    fillForm(inputs, elements);
+    elements.submitButton.click();
+    component.onSubmit();
+    fixture.detectChanges();
+    expect(routerNavigateSpy).toHaveBeenCalledWith(['/login']);
+  });
+});