diff --git a/README.md b/README.md index 4f5bac1..c6946ac 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ [![npm badge](https://img.shields.io/npm/v/@guihss/ngx-dynamic-forms?color=green)](https://www.npmjs.com/package/@guihss/ngx-dynamic-forms) # DynamicForms -A dynamic form generator using class annotations. +A dynamic form generator using Typescript Decorators. More info in [Dynamic Forms](https://guilherme-fafic.github.io/ngx-dynamic-forms/). diff --git a/package.json b/package.json index 0c6cf28..e0d6b05 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,8 @@ "build": "ng build", "test": "ng test", "lint": "ng lint", - "e2e": "ng e2e" + "e2e": "ng e2e", + "test-coverage": "ng test --no-watch --no-progress --browsers=ChromeHeadlessCI --code-coverage dynamic-forms" }, "private": true, "dependencies": { diff --git a/projects/dynamic-forms-showcase/karma.conf.js b/projects/dynamic-forms-showcase/karma.conf.js index 5394d3b..c5334d0 100644 --- a/projects/dynamic-forms-showcase/karma.conf.js +++ b/projects/dynamic-forms-showcase/karma.conf.js @@ -26,6 +26,12 @@ module.exports = function (config) { logLevel: config.LOG_INFO, autoWatch: true, browsers: ['Chrome'], + customLaunchers: { + ChromeHeadlessCI: { + base: 'ChromeHeadless', + flags: ['--no-sandbox'] + } + }, singleRun: false, restartOnFileChange: true }); diff --git a/projects/dynamic-forms-showcase/src/app/app.component.spec.ts b/projects/dynamic-forms-showcase/src/app/app.component.spec.ts deleted file mode 100644 index 0049cc3..0000000 --- a/projects/dynamic-forms-showcase/src/app/app.component.spec.ts +++ /dev/null @@ -1,31 +0,0 @@ -import { TestBed, async } from '@angular/core/testing'; -import { AppComponent } from './app.component'; - -describe('AppComponent', () => { - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ - AppComponent - ], - }).compileComponents(); - })); - - it('should create the app', () => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.componentInstance; - expect(app).toBeTruthy(); - }); - - it(`should have as title 'dynamic-forms-showcase'`, () => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.componentInstance; - expect(app.title).toEqual('dynamic-forms-showcase'); - }); - - it('should render title', () => { - const fixture = TestBed.createComponent(AppComponent); - fixture.detectChanges(); - const compiled = fixture.nativeElement; - expect(compiled.querySelector('.content span').textContent).toContain('dynamic-forms-showcase app is running!'); - }); -}); diff --git a/projects/dynamic-forms-showcase/src/app/app.component.ts b/projects/dynamic-forms-showcase/src/app/app.component.ts index c9d7bd1..ecef8f1 100644 --- a/projects/dynamic-forms-showcase/src/app/app.component.ts +++ b/projects/dynamic-forms-showcase/src/app/app.component.ts @@ -19,6 +19,9 @@ export class AppComponent implements AfterViewInit{ let formResult = this.dynamicForm.getResult(); + console.log(formResult); + + } diff --git a/projects/dynamic-forms-showcase/src/app/custom-input/custom-input.component.spec.ts b/projects/dynamic-forms-showcase/src/app/custom-input/custom-input.component.spec.ts deleted file mode 100644 index 91dcfa1..0000000 --- a/projects/dynamic-forms-showcase/src/app/custom-input/custom-input.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - -import { CustomInputComponent } from './custom-input.component'; - -describe('CustomInputComponent', () => { - let component: CustomInputComponent; - let fixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ CustomInputComponent ] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(CustomInputComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/projects/dynamic-forms/README.md b/projects/dynamic-forms/README.md index 461f2a6..996381b 100644 --- a/projects/dynamic-forms/README.md +++ b/projects/dynamic-forms/README.md @@ -1,6 +1,8 @@ # DynamicForms -A dynamic form generator using class annotations. +A dynamic form generator using Typescript Decorators. + +More info in [Dynamic Forms](https://guilherme-fafic.github.io/ngx-dynamic-forms/). ## How to install diff --git a/projects/dynamic-forms/karma.conf.js b/projects/dynamic-forms/karma.conf.js index 372b79f..112cf9c 100644 --- a/projects/dynamic-forms/karma.conf.js +++ b/projects/dynamic-forms/karma.conf.js @@ -26,6 +26,12 @@ module.exports = function (config) { logLevel: config.LOG_INFO, autoWatch: true, browsers: ['Chrome'], + customLaunchers: { + ChromeHeadlessCI: { + base: 'ChromeHeadless', + flags: ['--no-sandbox'] + } + }, singleRun: false, restartOnFileChange: true }); diff --git a/projects/dynamic-forms/package.json b/projects/dynamic-forms/package.json index 5b36d5e..c057a2b 100644 --- a/projects/dynamic-forms/package.json +++ b/projects/dynamic-forms/package.json @@ -1,6 +1,6 @@ { "name": "@guihss/ngx-dynamic-forms", - "version": "1.0.1", + "version": "1.0.2", "peerDependencies": { "@angular/common": "^9.1.9", "@angular/core": "^9.1.9" @@ -18,6 +18,7 @@ "email": "guilherme.fafic@gmail.com", "url": "https://github.com/guilherme-fafic" }, + "license": "MIT", "keywords": [ "dynamic", "forms", diff --git a/projects/dynamic-forms/src/lib/tests/custom-component-test.spec.ts b/projects/dynamic-forms/src/lib/tests/custom-component-test.spec.ts index d101b6d..b6d0861 100644 --- a/projects/dynamic-forms/src/lib/tests/custom-component-test.spec.ts +++ b/projects/dynamic-forms/src/lib/tests/custom-component-test.spec.ts @@ -1,21 +1,29 @@ import {DynamicFormsComponent} from "../dynamic-forms.component"; import {async, ComponentFixture, TestBed} from "@angular/core/testing"; -import {FormBuilder} from "@angular/forms"; +import {FormBuilder, FormControl, ReactiveFormsModule} from "@angular/forms"; import {MatCheckbox} from "@angular/material/checkbox"; import {of} from "rxjs"; import {ConfigurableInput, CustomInput, FormInput} from "dynamic-forms"; -import {Component} from "@angular/core"; +import {Component, DebugElement} from "@angular/core"; @Component({ selector: '', - template: '' + template: '

{{args}}

' }) class CustomComponent implements ConfigurableInput { + + args; + formControl = new FormControl(''); + applyArguments(args: any): any { + this.args = JSON.stringify(args); + if (args.descriptor.args.t3) this.formControl.setValue('test'); } + getFormControl(): any { + return this.formControl; } } @@ -23,9 +31,12 @@ class CustomComponent implements ConfigurableInput { class FormObjectMock { @CustomInput(CustomComponent, { - label: 'Custom Label' + label: 'Custom Label', + args: {t1: 1, t2: 2, t3: true}, + required: true, + errorMessage: 'error message' }) - customInput; + customInput = 12; } @@ -35,7 +46,7 @@ describe('Custom Component', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - providers: [FormBuilder, MatCheckbox], + providers: [FormBuilder, ReactiveFormsModule], declarations: [ DynamicFormsComponent ] }) .compileComponents(); @@ -51,4 +62,37 @@ describe('Custom Component', () => { it('should create', () => { expect(component).toBeDefined(); }); + + it('should have correct input', () => { + const rootForm = fixture.debugElement.children[0]; + const childElement: HTMLElement = rootForm.children[0].children[0].nativeElement; + expect(rootForm.children.length).toBe(1); + expect(childElement.tagName).toBe("H1"); + }); + + it('should have correct arguments', () => { + const rootForm = fixture.debugElement.children[0]; + const childElement: HTMLElement = rootForm.children[0].children[0].nativeElement; + + const argsObject = JSON.parse(childElement.innerText); + expect(argsObject).toEqual({ + type: 'custom-input', + descriptor: { + label: 'Custom Label', + args: {t1: 1, t2: 2, t3: true}, + required: true, + errorMessage: 'error message' + }, + defaultValue: 12 + }); + + }); + + it('should return correct value', () => { + const formResult = component.getResult(); + + expect(formResult).toEqual({ + customInput: 'test' + }); + }); }); diff --git a/projects/dynamic-forms/src/lib/tests/nested-input.spec.ts b/projects/dynamic-forms/src/lib/tests/nested-input.spec.ts index 6ac4edc..a7029d1 100644 --- a/projects/dynamic-forms/src/lib/tests/nested-input.spec.ts +++ b/projects/dynamic-forms/src/lib/tests/nested-input.spec.ts @@ -8,9 +8,16 @@ import {of} from "rxjs"; class NestedInputModel { + @FormInput({label: 'f1'}) + field1 = 1; + @FormInput({label: 'f2'}) + field2 = 2; + } class FormObjectMock { + @FormInput({label: 'f1'}) + field1 = 1; @NestedInput('Title', 1) nestedInput = new NestedInputModel(); @@ -38,4 +45,21 @@ describe('Nested Input', () => { it('should create', () => { expect(component).toBeDefined(); }); + + it('should have correct input', () => { + const rootForm = fixture.debugElement.children[0]; + expect(rootForm.children.length).toBe(4); + }); + + it('should return correct value', () => { + const formResult = component.getResult(); + + expect(formResult).toEqual({ + field1: 1, + nestedInput: { + field1: 1, + field2: 2 + } + }); + }); }); diff --git a/projects/dynamic-forms/src/lib/utils/utils.spec.ts b/projects/dynamic-forms/src/lib/utils/utils.spec.ts deleted file mode 100644 index 0eb8e62..0000000 --- a/projects/dynamic-forms/src/lib/utils/utils.spec.ts +++ /dev/null @@ -1,10 +0,0 @@ -let utils = require('./utils'); - -describe('utils test', () => { - - - it('test assign', () => { - - expect(2).toEqual(2); - }) -}) diff --git a/projects/dynamic-forms/src/lib/utils/utils.ts b/projects/dynamic-forms/src/lib/utils/utils.ts index 07cf113..67006d5 100644 --- a/projects/dynamic-forms/src/lib/utils/utils.ts +++ b/projects/dynamic-forms/src/lib/utils/utils.ts @@ -3,27 +3,4 @@ export function toPascalCase(text: string) { } -export function assign(target, src, depth) { - if (depth <= 0) { - return; - } - for (const key of Object.keys(src)) { - - if (src[key] && typeof src[key] === 'object') { - if (target[key]) { - assign(target[key], src[key], depth - 1); - }else { - target[key] = src[key]; - } - - } else { - try { - target[key] = src[key]; - }catch (e) { - - } - - } - } -}