upgrade angular to 10 and add unit testing

Author: vicmans

CHANGELOG.md

@@ -1,6 +1,11 @@
 # Changelog
 All notable changes to this project will be documented in this file.
 
+## [1.0.0] - 2022-02-23
+### Added
+- Update to Angular 10
+- Added unit test to lib component
+
 ## [0.2.3] - 2022-02-19
 ### Added
 - Add forRoot default configuration for component

package-lock.json

@@ -2,7 +2,7 @@
   "name": "ng-toggle-button",
   "description": "A toggle button component",
   "author": "vicmans",
-  "version": "0.2.3",
+  "version": "1.0.0",
   "homepage": "https://github.com/vicmans/ng-toggle-button#readme",
   "repository": {
     "type": "git",
@@ -33,39 +33,39 @@
   },
   "private": false,
   "dependencies": {
-    "@angular/animations": "^9.0.4",
-    "@angular/common": "^9.0.4",
-    "@angular/compiler": "^9.0.4",
-    "@angular/core": "^9.0.4",
-    "@angular/forms": "^9.0.4",
-    "@angular/platform-browser": "^9.0.4",
-    "@angular/platform-browser-dynamic": "^9.0.4",
-    "@angular/router": "^9.0.4",
+    "@angular/animations": "^10.2.5",
+    "@angular/common": "^10.2.5",
+    "@angular/compiler": "^10.2.5",
+    "@angular/core": "^10.2.5",
+    "@angular/forms": "^10.2.5",
+    "@angular/platform-browser": "^10.2.5",
+    "@angular/platform-browser-dynamic": "^10.2.5",
+    "@angular/router": "^10.2.5",
     "rxjs": "~6.5.5",
-    "tslib": "^1.10.0",
+    "tslib": "^2.0.0",
     "zone.js": "~0.10.2"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.901.15",
-    "@angular-devkit/build-ng-packagr": "~0.901.15",
-    "@angular/cli": "^9.0.4",
-    "@angular/compiler-cli": "^9.0.4",
-    "@angular/language-service": "~9.0.4",
+    "@angular-devkit/build-angular": "~0.1002.4",
+    "@angular-devkit/build-ng-packagr": "~0.1002.4",
+    "@angular/cli": "^10.2.4",
+    "@angular/compiler-cli": "^10.2.5",
+    "@angular/language-service": "~10.2.5",
     "@types/jasmine": "~3.3.8",
     "@types/jasminewd2": "~2.0.3",
     "@types/node": "^12.11.1",
     "codelyzer": "^5.0.0",
-    "jasmine-core": "^3.5.0",
-    "jasmine-spec-reporter": "~4.2.1",
-    "karma": "^6.3.14",
-    "karma-chrome-launcher": "~2.2.0",
-    "karma-coverage-istanbul-reporter": "~2.0.1",
-    "karma-jasmine": "~2.0.1",
-    "karma-jasmine-html-reporter": "^1.4.0",
-    "ng-packagr": "^10.1.1",
-    "protractor": "^5.4.3",
+    "jasmine-core": "~3.5.0",
+    "jasmine-spec-reporter": "~5.0.0",
+    "karma": "~5.0.0",
+    "karma-chrome-launcher": "~3.1.0",
+    "karma-coverage-istanbul-reporter": "~3.0.2",
+    "karma-jasmine": "~4.0.0",
+    "karma-jasmine-html-reporter": "^1.5.0",
+    "ng-packagr": "^10.1.0",
+    "protractor": "~7.0.0",
     "ts-node": "~8.3.0",
-    "tslint": "^5.7.0",
-    "typescript": "3.8.3"
+    "tslint": "~6.1.0",
+    "typescript": "4.0.8"
   }
 }

package.json

@@ -3,7 +3,7 @@
   "compilerOptions": {
     "outDir": "../../../out-tsc/e2e",
     "module": "commonjs",
-    "target": "es5",
+    "target": "es2018",
     "types": [
       "jasmine",
       "jasminewd2",

projects/demo/browserslist renamed to projects/demo/.browserslistrc

@@ -1,31 +1,31 @@
-import { TestBed, async } from '@angular/core/testing';
+import { TestBed } from '@angular/core/testing';
 import { AppComponent } from './app.component';
 
 describe('AppComponent', () => {
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
       declarations: [
         AppComponent
       ],
     }).compileComponents();
-  }));
+  });
 
   it('should create the app', () => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.debugElement.componentInstance;
     expect(app).toBeTruthy();
   });
 
-  it(`should have as title 'angular-toogle-button'`, () => {
+  it(`should have as title 'ng-toggle-button'`, () => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.debugElement.componentInstance;
-    expect(app.title).toEqual('angular-toogle-button');
+    expect(app.title).toEqual('ng-toggle-button');
   });
 
   it('should render title in a h1 tag', () => {
     const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
     const compiled = fixture.debugElement.nativeElement;
-    expect(compiled.querySelector('h1').textContent).toContain('Welcome to angular-toogle-button!');
+    expect(compiled.querySelector('h1').textContent).toContain('ng-toggle-button');
   });
 });

projects/demo/e2e/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "name": "ng-toggle-button",
-  "version": "0.2.3",
+  "version": "1.0.0",
   "description": "Angular toggle button switch",
   "author": "vicmans",
   "license": "MIT",
@@ -20,6 +20,9 @@
     "switch",
     "ui"
   ],
+  "dependencies": {
+    "tslib": "^2.0.0"
+  },
   "peerDependencies": {
     "@angular/common": ">=9.0.0",
     "@angular/core": ">=9.0.0"

projects/demo/src/app/app.component.spec.ts

@@ -1,17 +1,20 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { NgToggleComponent } from './ng-toggle.component';
+import { NgToggleConfig } from './ng-toggle.config';
+import { NgToggleModule } from './ng-toggle.module';
 
 describe('NgToggleComponent', () => {
   let component: NgToggleComponent;
   let fixture: ComponentFixture<NgToggleComponent>;
 
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ NgToggleComponent ]
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [NgToggleComponent],
+      providers: [NgToggleConfig]
     })
     .compileComponents();
-  }));
+  });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(NgToggleComponent);
@@ -22,4 +25,78 @@ describe('NgToggleComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should have default values', () => {
+    expect(component.value).toBeTruthy();
+    expect(component.width).toBe(45);
+    expect(component.height).toBe(25);
+    expect(component.margin).toBe(2);
+    expect(component.speed).toBe(300);
+  });
+
+  it('should change the value when click', () => {
+    let label = fixture.debugElement.nativeElement.querySelector('label');
+    label.click();
+    fixture.detectChanges();
+
+    expect(component.value).toBeFalsy();
+  })
 });
+
+describe('NgToggleComponent with values forRoot module imports', () => {
+  let component: NgToggleComponent;
+  let fixture: ComponentFixture<NgToggleComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [NgToggleModule.forRoot({
+        values: {
+          checked: 'yes',
+          unchecked: 'no'
+        },
+        color: {
+          checked: 'green',
+          unchecked: '#fbfafc'
+        },
+        labels: {
+          checked: 'si',
+          unchecked: 'no'
+        }
+      })]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NgToggleComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create component', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should have config values', () => {
+    expect(component.values.checked).toEqual('yes');
+    expect(component.values.unchecked).toEqual('no');
+
+    expect(component.labels).toEqual({
+      checked: 'si',
+      unchecked: 'no'
+    });
+
+    expect(component.color).toEqual({
+      checked: 'green',
+      unchecked: '#fbfafc'
+    });
+  });
+
+  it('should have checked when clicked', () => {
+    let label = fixture.debugElement.nativeElement.querySelector('label');
+    label.click();
+    fixture.detectChanges();
+
+    expect(component.value).toBe('yes');
+  });
+});

projects/ng-toggle/package.json

@@ -1,5 +1,7 @@
 import { toggleConfig, valueConfig } from "./ng-toggle.component";
+import { Injectable } from "@angular/core";
 
+@Injectable()
 export class NgToggleConfig {
   value?: any;
   name?: string;

projects/ng-toggle/src/lib/ng-toggle.component.spec.ts

@@ -5,7 +5,7 @@
     "outDir": "./dist/out-tsc",
     "sourceMap": true,
     "declaration": false,
-    "module": "esnext",
+    "module": "es2020",
     "moduleResolution": "node",
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,