feat(helpers): move helper class to services and add tests

Author: Ismaestro

.huskyrc

@@ -0,0 +1,5 @@
+{
+  "hooks": {
+    "pre-push": "npm run ci"
+  }
+}

package-lock.json

@@ -71,6 +71,7 @@
     "hammerjs": "2.0.8",
     "html2canvas": "1.0.0-alpha.12",
     "http-server": "0.11.1",
+    "husky": "1.1.2",
     "jasmine-core": "3.2.1",
     "jasmine-spec-reporter": "4.2.1",
     "karma": "3.0.0",

package.json

@@ -6,7 +6,7 @@ import {MatSnackBar} from '@angular/material';
 import {_} from '@biesbjerg/ngx-translate-extract/dist/utils/utils';
 import {AppConfig} from './configs/app.config';
 import {LocalStorage} from 'ngx-store';
-import {isBrowserValid} from './shared/helpers/utils.helper';
+import {UtilsHelperService} from './core/services/utils-helper.service';
 
 declare const require;
 declare const Modernizr;
@@ -65,7 +65,7 @@ export class AppComponent implements OnInit {
   }
 
   checkBrowser() {
-    if (isBrowserValid()) {
+    if (UtilsHelperService.isBrowserValid()) {
       this.checkBrowserFeatures();
     } else {
       this.translateService.get([String(_('changeBrowser'))]).subscribe((texts) => {

src/app/app.component.ts

@@ -0,0 +1,42 @@
+import {TestBed} from '@angular/core/testing';
+import {UtilsHelperService} from './utils-helper.service';
+
+describe('UtilsHelperService', () => {
+  let utilsHelperService;
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [
+        UtilsHelperService
+      ]
+    });
+
+    utilsHelperService = TestBed.get(UtilsHelperService);
+  });
+
+  it('should create instance', (() => {
+    expect(utilsHelperService).toBeDefined();
+  }));
+
+  it('should return fadeInOut trigger', (() => {
+    expect(UtilsHelperService.fadeInOut().name).toBe('fadeInOut');
+  }));
+
+  it('should focus in element', (() => {
+    const div = document.createElement('div');
+    expect(UtilsHelperService.scrollToElement(div)).toBe(undefined);
+  }));
+
+  it('should check if is palindrome', (() => {
+    expect(UtilsHelperService.isPalindrome('')).toBe(true);
+    expect(UtilsHelperService.isPalindrome('asd')).toBe(false);
+    expect(UtilsHelperService.isPalindrome('aas')).toBe(false);
+    expect(UtilsHelperService.isPalindrome('ass')).toBe(false);
+    expect(UtilsHelperService.isPalindrome('aassaa')).toBe(true);
+    expect(UtilsHelperService.isPalindrome('asa')).toBe(true);
+    expect(UtilsHelperService.isPalindrome('asswssa')).toBe(true);
+  }));
+
+  it('should check if browser is valid', (() => {
+    expect(UtilsHelperService.isBrowserValid()).toBe(true);
+  }));
+});

src/app/core/services/utils-helper.service.spec.ts

@@ -0,0 +1,75 @@
+import {Injectable} from '@angular/core';
+import {animate, AnimationTriggerMetadata, style, transition, trigger} from '@angular/animations';
+
+declare const require;
+const bowser = require('bowser');
+
+@Injectable({
+  providedIn: 'root'
+})
+export class UtilsHelperService {
+  static fadeInOut(): AnimationTriggerMetadata {
+    return trigger('fadeInOut', [
+      transition(':enter', [
+        style({opacity: 0}),
+        animate(500, style({opacity: 1}))
+      ]),
+      transition(':leave', [
+        animate(500, style({opacity: 0}))
+      ])
+    ]);
+  }
+
+  static scrollToElement(element) {
+    if (element) {
+      const distance = window.pageYOffset - Math.abs(element.getBoundingClientRect().y);
+
+      window.scroll({
+        behavior: 'smooth',
+        left: 0,
+        top: element.getBoundingClientRect().top + window.scrollY - 150
+      });
+
+      setTimeout(() => {
+        element.focus();
+        element.blur(); // Trigger error messages
+        element.focus();
+      }, distance);
+    }
+  }
+
+  static markFormGroupTouched(formGroup) {
+    (<any>Object).values(formGroup.controls).forEach(control => {
+      control.markAsTouched();
+
+      if (control.controls) {
+        UtilsHelperService.markFormGroupTouched(control);
+      }
+    });
+  }
+
+  static isPalindrome(str) {
+    const len = Math.floor(str.length / 2);
+    for (let i = 0; i < len; i++) {
+      if (str[i] !== str[str.length - i - 1]) {
+        return false;
+      }
+    }
+    return true;
+  }
+
+  static isBrowserValid() {
+    const browser = bowser.getParser(window.navigator.userAgent);
+    return browser.satisfies({
+      windows: {
+        'internet explorer': '>10',
+      },
+      macos: {
+        safari: '>10.1'
+      },
+      chrome: '>20.1.1432',
+      firefox: '>31',
+      opera: '>22'
+    });
+  }
+}

src/app/core/services/utils-helper.service.ts

@@ -4,13 +4,13 @@ import {HeroService} from '../../shared/hero.service';
 import {ActivatedRoute, Router} from '@angular/router';
 import {Location} from '@angular/common';
 import {AppConfig} from '../../../../configs/app.config';
-import {fadeInOut} from '../../../../shared/helpers/utils.helper';
+import {UtilsHelperService} from '../../../../core/services/utils-helper.service';
 
 @Component({
   selector: 'app-hero-detail-page',
   templateUrl: './hero-detail-page.component.html',
   styleUrls: ['./hero-detail-page.component.scss'],
-  animations: [fadeInOut]
+  animations: [UtilsHelperService.fadeInOut()]
 })
 
 export class HeroDetailPageComponent implements OnInit {

src/app/modules/heroes/pages/hero-detail-page/hero-detail-page.component.ts

@@ -7,15 +7,15 @@ import {Router} from '@angular/router';
 import {LoggerService} from '../../../../core/services/logger.service';
 import {HeroRemoveComponent} from '../../components/hero-remove/hero-remove.component';
 import {AppConfig} from '../../../../configs/app.config';
-import {fadeInOut, isPalindrome} from '../../../../shared/helpers/utils.helper';
 import {_} from '@biesbjerg/ngx-translate-extract/dist/utils/utils';
 import {TranslateService} from '@ngx-translate/core';
+import {UtilsHelperService} from '../../../../core/services/utils-helper.service';
 
 @Component({
   selector: 'app-heroes-list-page',
   templateUrl: './heroes-list-page.component.html',
   styleUrls: ['./heroes-list-page.component.scss'],
-  animations: [fadeInOut]
+  animations: [UtilsHelperService.fadeInOut()]
 })
 
 export class HeroesListPageComponent implements OnInit {
@@ -95,7 +95,7 @@ export class HeroesListPageComponent implements OnInit {
 
   private onChanges() {
     this.newHeroForm.get('name').valueChanges.subscribe((value) => {
-      if (value && value.length >= 3 && isPalindrome(value)) {
+      if (value && value.length >= 3 && UtilsHelperService.isPalindrome(value)) {
         this.snackBar.open(this.translateService.instant(String(_('yeahPalindrome'))));
       } else {
         this.snackBar.dismiss();