feat: adding validation for required input fields

Author: willmendesneto

CHANGELOG.md

@@ -7,6 +7,17 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Unreleased][]
 
+### Added
+
+- Adding validation for @Input attributes that needs internal manipulation. After these changes:
+  - if `count` is not a numeric value, it will use the default value as `1`
+  - if `animation` is not a valid attribute, it will use the default value as `progress`
+  - PS: The other values alredy have a fallback, so nothing to worry here
+
+### Updated
+
+- Adding `ngOnChange` to validate `count` input in case of changes via binding
+
 ## [2.8.0][] - 2021-02-18
 
 ### Fixed
@@ -387,7 +398,5 @@ Now we can define the animation we want to use in `<ngx-skeleton-loader>` compon
 [2.6.2]: https://github.com/willmendesneto/ngx-skeleton-loader/tree/v2.6.2
 [unreleased]: https://github.com/willmendesneto/ngx-skeleton-loader/compare/v2.7.0...HEAD
 [2.7.0]: https://github.com/willmendesneto/ngx-skeleton-loader/tree/v2.7.0
-
-
-[Unreleased]: https://github.com/willmendesneto/ngx-skeleton-loader/compare/v2.8.0...HEAD
-[2.8.0]: https://github.com/willmendesneto/ngx-skeleton-loader/tree/v2.8.0
+[unreleased]: https://github.com/willmendesneto/ngx-skeleton-loader/compare/v2.8.0...HEAD
+[2.8.0]: https://github.com/willmendesneto/ngx-skeleton-loader/tree/v2.8.0

package.json

@@ -49,7 +49,7 @@
   "bundlesize": [
     {
       "path": "./dist/ngx-skeleton-loader/bundles/ngx-skeleton-loader.umd.min.js",
-      "maxSize": "1.50KB"
+      "maxSize": "1.6KB"
     }
   ],
   "dependencies": {

projects/ngx-skeleton-loader/src/lib/ngx-skeleton-loader.component.spec.ts

@@ -39,6 +39,10 @@ import { NgxSkeletonLoaderComponent } from './ngx-skeleton-loader.component';
         <ngx-skeleton-loader animation="invalid-option"></ngx-skeleton-loader>
       </div>
 
+      <div class="skeletons-count-invalid-option">
+        <ngx-skeleton-loader [count]="invalidValueIncount"></ngx-skeleton-loader>
+      </div>
+
       <div class="skeletons-with-count">
         <ngx-skeleton-loader count="2"></ngx-skeleton-loader>
       </div>
@@ -56,6 +60,7 @@ import { NgxSkeletonLoaderComponent } from './ngx-skeleton-loader.component';
 })
 class ContainerComponent {
   animationWithFalsePassedViaBinding = false;
+  invalidValueIncount = 'two';
 }
 
 describe('NgxSkeletonLoaderComponent', () => {
@@ -73,21 +78,31 @@ describe('NgxSkeletonLoaderComponent', () => {
     }),
   );
 
+  it('should console 2 errors if `animation` and `count` receives invalid options and is running in development mode', () => {
+    expect(console.error).toHaveBeenCalledTimes(2);
+  });
+
   it('should console errors if `animation` is an invalid option and is running in development mode', () => {
-    expect(console.error).toHaveBeenCalledTimes(1);
     expect(console.error).toHaveBeenCalledWith(
       // tslint:disable-next-line: max-line-length
       `\`NgxSkeletonLoaderComponent\` need to receive 'animation' as: progress, progress-dark, pulse, false. Forcing default to "progress".`,
     );
   });
 
+  it('should console errors if `animation` is an invalid option and is running in development mode', () => {
+    expect(console.error).toHaveBeenCalledWith(
+      // tslint:disable-next-line: max-line-length
+      `\`NgxSkeletonLoaderComponent\` need to receive 'count' a numeric value. Forcing default to "1".`,
+    );
+  });
+
   it('should add all relevant WAI-ARIA `aria-` attributes in all ngx-skeleton-loader', () => {
-    expect(fixture.nativeElement.querySelectorAll('[aria-busy="true"]').length).toBe(12);
-    expect(fixture.nativeElement.querySelectorAll('[aria-valuemin="0"]').length).toBe(12);
-    expect(fixture.nativeElement.querySelectorAll('[aria-valuemax="100"]').length).toBe(12);
-    expect(fixture.nativeElement.querySelectorAll('[aria-valuetext]').length).toBe(12);
-    expect(fixture.nativeElement.querySelectorAll('[role="progressbar"]').length).toBe(12);
-    expect(fixture.nativeElement.querySelectorAll('[tabindex="0"]').length).toBe(12);
+    expect(fixture.nativeElement.querySelectorAll('[aria-busy="true"]').length).toBe(13);
+    expect(fixture.nativeElement.querySelectorAll('[aria-valuemin="0"]').length).toBe(13);
+    expect(fixture.nativeElement.querySelectorAll('[aria-valuemax="100"]').length).toBe(13);
+    expect(fixture.nativeElement.querySelectorAll('[aria-valuetext]').length).toBe(13);
+    expect(fixture.nativeElement.querySelectorAll('[role="progressbar"]').length).toBe(13);
+    expect(fixture.nativeElement.querySelectorAll('[tabindex="0"]').length).toBe(13);
   });
 
   it('should use progress as default animation if `animation` is not passed as component attribute', () => {

projects/ngx-skeleton-loader/src/lib/ngx-skeleton-loader.component.ts

@@ -1,4 +1,14 @@
-import { Component, OnInit, Input, isDevMode, OnDestroy, AfterViewInit, ChangeDetectionStrategy } from '@angular/core';
+import {
+  Component,
+  OnInit,
+  Input,
+  isDevMode,
+  OnDestroy,
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  OnChanges,
+  SimpleChanges,
+} from '@angular/core';
 import { start, end } from 'perf-marks/marks';
 
 @Component({
@@ -7,7 +17,7 @@ import { start, end } from 'perf-marks/marks';
   styleUrls: ['./ngx-skeleton-loader.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class NgxSkeletonLoaderComponent implements OnInit, AfterViewInit, OnDestroy {
+export class NgxSkeletonLoaderComponent implements OnInit, AfterViewInit, OnDestroy, OnChanges {
   // tslint:disable-next-line: variable-name
   static ngAcceptInputType_count: number | string;
   // tslint:disable-next-line: variable-name
@@ -37,7 +47,23 @@ export class NgxSkeletonLoaderComponent implements OnInit, AfterViewInit, OnDest
     start('NgxSkeletonLoader:Rendered');
     start('NgxSkeletonLoader:Loaded');
 
-    this.items.length = +this.count;
+    this.validateInputValues();
+  }
+
+  private validateInputValues() {
+    // Checking if it's receiving a numeric value (string having ONLY numbers or if it's a number)
+    if (!/^\d+$/.test(`${this.count}`)) {
+      // Shows error message only in Development
+      if (isDevMode()) {
+        console.error(
+          `\`NgxSkeletonLoaderComponent\` need to receive 'count' a numeric value. Forcing default to "1".`,
+        );
+      }
+      this.count = 1;
+    }
+
+    this.items.length = this.count;
+
     const allowedAnimations = ['progress', 'progress-dark', 'pulse', 'false'];
     if (allowedAnimations.indexOf(String(this.animation)) === -1) {
       // Shows error message only in Development
@@ -52,6 +78,22 @@ export class NgxSkeletonLoaderComponent implements OnInit, AfterViewInit, OnDest
     }
   }
 
+  ngOnChanges(changes: SimpleChanges) {
+    // Avoiding multiple calls for the same input in case there's no changes in the fields
+    // Checking if the fields that require validation are available and if they were changed
+    // In case were not changed, we stop the function. Otherwise, `validateInputValues` will be called.
+    if (
+      ['count', 'animation'].find(
+        key =>
+          changes[key] && (changes[key].isFirstChange() || changes[key].previousValue === changes[key].currentValue),
+      )
+    ) {
+      return;
+    }
+
+    this.validateInputValues();
+  }
+
   ngAfterViewInit() {
     end('NgxSkeletonLoader:Rendered');
   }

src/app/app.component.html

@@ -76,6 +76,8 @@ <h2>Line skeletons with theming - Changing Colors and Switching Animations</h2>
   Also, this example will be switching between `<b>pulse</b>` and
   `<b>progress-dark</b>` animations
 </p>
+<p>Current value: <b>{{animation}}</b></p>
+
 <div class="item-with-background">
   <ngx-skeleton-loader
     count="5"
@@ -110,6 +112,22 @@ <h2>Circle skeletons with theming</h2>
   </ngx-skeleton-loader>
 </div>
 
+<h2>Circle skeletons with mixing theming and `ngStyle` via `[theme]` input</h2>
+<p>Width and height will be switching between 50px and 100px every 5 seconds</p>
+<p>Current value: <b>{{widthHeightSizeInPixels}}px</b></p>
+<div class="item">
+  <ngx-skeleton-loader
+    count="5"
+    appearance="circle"
+    [theme]="{
+      'width.px': widthHeightSizeInPixels,
+      'height.px': widthHeightSizeInPixels,
+      'border-radius': '10px'
+    }"
+  >
+  </ngx-skeleton-loader>
+</div>
+
 <h2>Facebook skeleton example</h2>
 
 <div class="fb-item">
@@ -246,6 +264,13 @@ <h3>Skeleton using `progress-dark` animation</h3>
   ></ngx-skeleton-loader>
 </div>
 
+<h3>Skeleton switching values for `animation` and `count` @Input</h3>
+<p>Current values:</p>
+<ul>
+  <li>Count: <b>{{count}}</b></li>
+  <li>Animation: <b>{{animation}}</b></li>
+</ul>
+
 <div class="item-with-background">
   <ngx-skeleton-loader
     [count]="count"

src/app/app.component.ts

@@ -11,6 +11,7 @@ export class AppComponent implements OnInit, OnDestroy {
   animation = 'pulse';
   contentLoaded = false;
   count = 2;
+  widthHeightSizeInPixels = 50;
 
   intervalId: number | null = null;
 
@@ -22,6 +23,7 @@ export class AppComponent implements OnInit, OnDestroy {
     this.intervalId = window.setInterval(() => {
       this.animation = this.animation === 'pulse' ? 'progress-dark' : 'pulse';
       this.count = this.count === 2 ? 5 : 2;
+      this.widthHeightSizeInPixels = this.widthHeightSizeInPixels === 50 ? 100 : 50;
     }, 5000);
   }