Merge pull request #225 from TAMULib/sprint11-staging

Sprint11 staging

.travis.yml

@@ -31,4 +31,4 @@ deploy:
   github_token: $GITHUB_TOKEN
   keep_history: true
   on:
-    branch: master
+    branch: sprint11-staging

lighthouserc.json

@@ -11,7 +11,7 @@
       "assertions": {
         "first-contentful-paint": "off",
         "categories:performance": ["error", {"minScore":  0}],
-        "categories:accessibility": ["error", {"minScore":  0.8}],
+        "categories:accessibility": ["error", {"minScore":  0.9}],
         "categories:best-practices": ["error", {"minScore":  0}],
         "categories:seo": ["error", {"minScore":  0}],
         "categories:pwa":["error", {"minScore":  0}]

package.json

@@ -4,7 +4,7 @@
     "type": "git",
     "url": "git+https://github.com/TAMULib/weaver-components.git"
   },
-  "version": "1.4.0",
+  "version": "1.5.0",
   "private": false,
   "license": "MIT",
   "bin": {
@@ -45,7 +45,7 @@
     "test:e2e": "ng e2e",
     "test:unit": "ng test --no-watch",
     "test:watch": "ng test",
-    "test:report": "cat ./static/weaver-components/reports/coverage/weaver-components/lcov.info | ./node_modules/coveralls/bin/coveralls.js",
+    "test:report": "cat ./static/weaver-components/reports/coverage/wvr-elements/lcov.info | ./node_modules/coveralls/bin/coveralls.js",
     "test:coverage": "ng test --no-watch --code-coverage",
     "test:ci": "npm run test:coverage && npm run test:audit"
   },

projects/wvr-elements/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wvr/elements",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "Collection of angular components for Weaver's Custom Web Component UI",
   "author": "Texas A&M University Libraries",
   "private": false,

projects/wvr-elements/src/lib/core/component-registry.service.spec.ts

@@ -0,0 +1,58 @@
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { WvrBaseComponent } from '../shared/wvr-base.component';
+import { WvrItWorksComponent } from '../wvr-it-works/wvr-it-works.component';
+
+import { ComponentRegistryService } from './component-registry.service';
+
+describe('ComponentRegistryService', () => {
+  let service: ComponentRegistryService;
+  let component: WvrItWorksComponent;
+  let fixture: ComponentFixture<WvrItWorksComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [BrowserAnimationsModule],
+      declarations: [WvrItWorksComponent],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA]
+    })
+      .compileComponents()
+      .catch(err => { console.error(err); });
+    service = TestBed.inject(ComponentRegistryService);
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(WvrItWorksComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(service)
+      .toBeTruthy();
+  });
+
+  it('should register a new component', () => {
+    expect(component.id >= 0)
+      .toBeTruthy();
+  });
+
+  it('should retrieve components', () => {
+    expect(service.getComponent(component.id) === component)
+      .toBeTruthy();
+  });
+
+  it('should retrieve components by element', () => {
+    // tslint:disable-next-line:no-string-literal
+    expect(service.getComponentByElement(component['_eRef'].nativeElement as HTMLElement) === component)
+      .toBeTruthy();
+  });
+
+  it('should unregister components', () => {
+    service.unRegisterComponent(component.id);
+    expect(service.getComponent(component.id))
+      .toBeUndefined();
+  });
+
+});

projects/wvr-elements/src/lib/core/component-registry.service.ts

@@ -0,0 +1,54 @@
+import { Injectable } from '@angular/core';
+import { WvrBaseComponent } from '../shared/wvr-base.component';
+
+/**
+ * A registry for each WvrBaseComponent currently present on the page.
+ */
+@Injectable({
+  providedIn: 'root'
+})
+export class ComponentRegistryService {
+
+  /** Incrementing index of all registered components. */
+  private index = -1;
+
+  /** Registry for all WvrBaseComponent. */
+  private readonly registry: Map<number | string, WvrBaseComponent> = new Map<number, WvrBaseComponent>();
+
+  /** Adds a WvrBaseComponent to the registry. */
+  register(component: WvrBaseComponent): number {
+
+    // tslint:disable-next-line:no-string-literal
+    const element = (component['_eRef'].nativeElement as HTMLElement);
+    // tslint:disable-next-line:increment-decrement
+    this.registry.set(++this.index, component);
+
+    return this.index;
+  }
+
+  /** Removes a WvrBaseComponent from the registry. */
+  unRegisterComponent(id: number | string): void {
+    this.registry.delete(id);
+  }
+
+  /** Retrieves a WvrBaseComponent from the registry. */
+  getComponent(id: number | string): WvrBaseComponent {
+    return this.registry.get(id);
+  }
+
+  /** Retrieves a WvrBaseComponent from the registry by HTMLElement. */
+  getComponentByElement(element: HTMLElement): WvrBaseComponent {
+
+    const hasNativeId = element.hasAttribute('wvr-id');
+    const htmlID = hasNativeId ? element.getAttribute('wvr-id') : element.getAttribute('id');
+
+    if (!htmlID) {
+      return;
+    }
+
+    const id = parseInt(htmlID.replace(`${WvrBaseComponent.HTML_ID_BASE}-`, ''), 10);
+
+    return this.getComponent(id);
+  }
+
+}

projects/wvr-elements/src/lib/core/icon.service.ts

@@ -6,11 +6,15 @@ import { AppConfig, APP_CONFIG } from '../shared/config/app-config';
 import { Icon } from '../wvr-icon/icon';
 import { IconSet } from '../wvr-icon/icon-set';
 
+/**
+ * A registry for each IconSet currently in use by any Icon Component.
+ */
 @Injectable({
   providedIn: 'root'
 })
 export class IconService {
 
+  /** A registry of all icon sets. */
   private readonly _iconRegister: Map<string, IconSet> = new Map<string, IconSet>();
 
   constructor(
@@ -19,16 +23,19 @@ export class IconService {
   ) {
   }
 
+  /** Registers an IconSet with the _iconRegister. */
   registerIcons(icons: IconSet): void {
     this._iconRegister.set(icons.name, icons);
   }
 
+  /** Retrieves the specified icon from the _iconRegister. If the specified icon has not been retrieved previsouly it registers it. */
   getIcon(set: string, name: string): Observable<string> {
     const iSet = this.getOrSetIconSet(set);
 
     return this.getOrSetIcon(iSet, name).svg;
   }
 
+  /** Retireves the IconSet from the _iconRegister, or sets it if it has not been previously registered. */
   private getOrSetIconSet(set: string): IconSet {
     let iSet = this._iconRegister.get(set);
     if (iSet) {
@@ -43,6 +50,7 @@ export class IconService {
     return iSet;
   }
 
+  /** Retireves the Icon from the IconSet, or sets it if it has not been previously registered. */
   private getOrSetIcon(set: IconSet, name: string): Icon {
     let icon: Icon = set.icons
       .find(i => i.name === name);
@@ -58,6 +66,7 @@ export class IconService {
     return icon;
   }
 
+  /** Initialized the http request for the specified icon.  */
   private fetchIcon(set: IconSet, name: string): Observable<string> {
 
     return this.http.get(`${this.appConfig.assetsUrl}/icons/${set.name}/${name}.svg`, { responseType: 'text' })

projects/wvr-elements/src/lib/core/mobile.service.ts

@@ -2,13 +2,18 @@ import { Injectable } from '@angular/core';
 import { fromEvent, Observable } from 'rxjs';
 import { delay, map, throttleTime } from 'rxjs/operators';
 
+/**
+ * A centralized uitlity for logic conerning mobile layout.
+ */
 @Injectable({
   providedIn: 'root'
 })
 export class MobileService {
 
+  /** Indicates the layout state of the viewport. */
   isMobileLayout: boolean;
 
+  /** An observable used for resize events. */
   private readonly screenSizeChanged$: Observable<boolean>;
 
   constructor() {
@@ -23,6 +28,7 @@ export class MobileService {
     this.isMobileLayout = this.checkScreenSize();
   }
 
+  /** A mapping method to map resize events to boolean.  */
   private readonly checkScreenSize = () => window.innerWidth < 767;
 
 }

projects/wvr-elements/src/lib/core/wvr-animation.service.spec.ts

@@ -1,20 +1,93 @@
-import { TestBed } from '@angular/core/testing';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed, tick } from '@angular/core/testing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { WvrItWorksComponent } from '../wvr-it-works/wvr-it-works.component';
 import { WvrAnimationService } from './wvr-animation.service';
 
 describe('WvrAnimationService', () => {
   let service: WvrAnimationService;
+  let componentOne: WvrItWorksComponent;
+  let componentTwo: WvrItWorksComponent;
+  let fixtureOne: ComponentFixture<WvrItWorksComponent>;
+  let fixtureTwo: ComponentFixture<WvrItWorksComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [BrowserAnimationsModule],
+      declarations: [WvrItWorksComponent],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA]
+    })
+      .compileComponents();
+  });
 
   beforeEach(() => {
-    TestBed.configureTestingModule({
-      imports: [BrowserAnimationsModule]
-    });
     service = TestBed.inject(WvrAnimationService);
+
+    fixtureOne = TestBed.createComponent(WvrItWorksComponent);
+    componentOne = fixtureOne.componentInstance;
+    componentOne.animate = `{
+      click: "rotateToggle"
+    }`;
+    componentOne.animateConfig = `{
+      rotateToggle: {
+        timing: '1000ms ease-in',
+        to: 180,
+        from: 0
+      }
+    }`;
+    componentOne.animateId = 'animateComponentOne';
+
+    fixtureTwo = TestBed.createComponent(WvrItWorksComponent);
+    componentTwo = fixtureTwo.componentInstance;
+    componentTwo.animate = `{
+      click: "animationTrigger"
+    }`;
+    componentTwo.animateTarget = 'componentOne.animateId';
+    componentTwo.animateId = 'animateComponentTwo';
   });
 
   it('should be created', () => {
     expect(service)
       .toBeTruthy();
   });
 
+  it('should register new animation targets', () => {
+    // tslint:disable-next-line:no-string-literal
+    expect(service['_animationTargetsRegistry'].size)
+     .toEqual(0);
+    service.registerAnimationTargets(componentOne.animateId, componentOne);
+    // tslint:disable-next-line:no-string-literal
+    expect(service['_animationTargetsRegistry'].size)
+     .toEqual(1);
+  });
+
+  it('should register new animation states', () => {
+    // tslint:disable-next-line:no-string-literal
+    expect(componentOne['animationStateId'])
+      .toBeUndefined();
+
+    // tslint:disable-next-line:no-string-literal
+    componentOne['animationStateId'] = service.registerAnimationStates();
+
+    // tslint:disable-next-line:no-string-literal
+    expect(componentOne['animationStateId'])
+      .toBeDefined();
+  });
+
+  // it('should trigger animation target', () => {
+  //   componentOne.animationRootElem = fixtureOne.elementRef;
+  //   // tslint:disable-next-line:no-string-literal
+  //   componentOne['initializeAnimationRegistration']();
+  //   // tslint:disable-next-line:no-string-literal
+  //   componentOne['initializeAnimationElement']();
+  //   // tslint:disable-next-line:no-string-literal
+  //   componentTwo['initializeAnimationRegistration']();
+  //   // tslint:disable-next-line:no-string-literal
+  //   componentTwo['initializeAnimationElement']();
+
+  //   service.triggerAnimationTarget(componentTwo.animateTarget);
+  //   // tslint:disable-next-line:no-string-literal
+
+  // });
+
 });