@ruc-lib/metaform 2.0.0 → 2.0.1

package/src/lib/ruclib-metaform/ruclib-metaform.component.spec.ts

@@ -0,0 +1,1253 @@
+import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
+
+import { RuclibMetaformComponent } from './ruclib-metaform.component';
+import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
+import { RucMetaFormService } from '../../services/ruc-meta-form.service';
+import { HttpClientModule } from '@angular/common/http';
+import { RucMetaFormValidationService } from '../../services/ruc-meta-form-validation.service';
+import { MetaFormConfig } from '../../interfaces/metaFormsDefault';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+import { FormsModule } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatRadioModule } from '@angular/material/radio';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatSelectModule } from '@angular/material/select';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatButtonModule} from '@angular/material/button';
+import { MatTooltipModule} from '@angular/material/tooltip';
+import { TextFieldModule} from '@angular/cdk/text-field';
+import {MatStepperModule} from '@angular/material/stepper';
+
+import { RucMetaInputsComponent } from '../../components/ruc-meta-inputs/ruc-meta-inputs.component';
+import { RucMetaRadioGroupComponent } from '../../components/ruc-meta-radio-group/ruc-meta-radio-group.component';
+import { RucMetaCheckboxGroupComponent } from '../../components/ruc-meta-checkbox-group/ruc-meta-checkbox-group.component';
+import { RucMetaSelectComponent } from '../../components/ruc-meta-select/ruc-meta-select.component';
+import { RucTextAreaComponent } from '../../components/ruc-text-area/ruc-text-area.component';
+
+import { of } from 'rxjs';
+describe('RuclibMetaformComponent', () => {
+  let component: RuclibMetaformComponent;
+  let fixture: ComponentFixture<RuclibMetaformComponent>;
+  let mockFormData: MetaFormConfig[] = [];
+  let service: RucMetaFormService;
+
+  mockFormData = [
+    {
+      "formType": "simple",
+      "fieldType": "input",
+      "inputType": "text",
+      "id": "firstName",
+      "name": "firstName",
+      "errorMsg": false,
+      "label": "First Name",
+      "className": "firstName",
+      "value": "",
+      "alt": "na",
+      "appearance": "outline",
+      "min": "4",
+      "max": "20",
+      "width": "100",
+      "height": "20",
+      "checked": false,
+      "disabled": false,
+      "maxlength": "100",
+      "readonly": false,
+      "required": false,
+      "size": "100",
+      "tooltip": "First Name",
+      "tooltipPosition": "right",
+      "pattern": "any",
+      "placeholder": "First Name",
+      "autofocus": true,
+      "autocomplete": ["amar", "bharat", "charan"],
+      "customComponentName": "none",
+      "rucDialogInput": {},
+      "hasDependentFields": false,
+      "dependentFieldParentId": "any",
+      "dependentFields": [],
+      "toolTipDescription": "none",
+      "showErrorOnPopUp": true,
+      "groupOptions": []
+    },
+    {
+      "formType": "simple",
+      "fieldType": "input",
+      "inputType": "text",
+      "id": "lastName",
+      "errorMsg": false,
+      "name": "lastName",
+      "label": "Last Name",
+      "className": "lastName",
+      "value": "",
+      "alt": "na",
+      "appearance": "outline",
+      "min": "4",
+      "max": "20",
+      "width": "100",
+      "height": "20",
+      "checked": false,
+      "disabled": false,
+      "maxlength": "100",
+      "readonly": false,
+      "required": true,
+      "size": "100",
+      "sameRow": true,
+      "sameRowColumnWidth": "50",
+      "tooltip": "Last Name",
+      "tooltipPosition": "below",
+      "pattern": "any",
+      "placeholder": "Last Name",
+      "autofocus": true,
+      "autocomplete": ["singh", "rai", "lal"],
+      "customComponentName": "none",
+      "rucDialogInput": {},
+      "hasDependentFields": false,
+      "dependentFieldParentId": "any",
+      "dependentFields": [],
+      "toolTipDescription": "none",
+      "showErrorOnPopUp": true,
+      "groupOptions": []
+    },
+
+    {
+
+      "formType": "simple",
+
+      "fieldType": "input",
+
+      "inputType": "password",
+
+      "id": "password",
+
+      "errorMsg": false,
+
+      "name": "password",
+
+      "label": "Password",
+
+      "className": "password",
+
+      "value": "",
+
+      "alt": "na",
+
+      "appearance": "outline",
+
+      "min": "4",
+
+      "max": "20",
+
+      "width": "100",
+
+      "height": "20",
+
+      "checked": false,
+
+      "disabled": false,
+
+      "maxlength": "100",
+
+      "readonly": false,
+
+      "required": true,
+
+      "size": "100",
+
+      "sameRow": true,
+
+      "sameRowColumnWidth": "25",
+
+      "tooltip": "Password",
+
+      "tooltipPosition": "right",
+
+      "pattern": "any",
+
+      "placeholder": "First Name",
+
+      "autofocus": true,
+
+      "autocomplete": false,
+
+      "customComponentName": "none",
+
+      "rucDialogInput": {},
+
+      "hasDependentFields": false,
+
+      "dependentFieldParentId": "any",
+
+      "dependentFields": [],
+
+      "toolTipDescription": "none",
+
+      "showErrorOnPopUp": true,
+
+      "groupOptions": []
+
+    },
+
+    {
+
+      "formType": "simple",
+
+      "fieldType": "radio",
+
+      "inputType": "radio",
+
+      "id": "radio",
+
+      "name": "radio",
+
+      "errorMsg": false,
+
+      "label": "Pick your favorite season",
+
+      "className": "radio",
+
+      "value": "",
+
+      "alt": "na",
+
+      "appearance": "outline",
+
+      "min": "4",
+
+      "max": "20",
+
+      "width": "100",
+
+      "height": "20",
+
+      "checked": false,
+
+      "disabled": false,
+
+      "maxlength": "100",
+
+      "readonly": false,
+
+      "required": true,
+
+      "size": "100",
+
+      "sameRow": false,
+
+      "sameRowColumnWidth": "100",
+
+      "tooltip": "Radio",
+
+      "tooltipPosition": "left",
+
+      "pattern": "any",
+
+      "placeholder": "",
+
+      "autofocus": true,
+
+      "autocomplete": false,
+
+      "customComponentName": "none",
+
+      "rucDialogInput": {},
+
+      "hasDependentFields": false,
+
+      "dependentFieldParentId": "any",
+
+      "dependentFields": [],
+
+      "toolTipDescription": "none",
+
+      "showErrorOnPopUp": true,
+
+      "groupOptions": [
+
+        {
+
+          "id": "Winter",
+
+          "name": "Winter",
+
+          "value": ""
+
+        },
+
+        {
+
+          "id": "Spring",
+
+          "name": "Spring",
+
+          "value": ""
+
+        },
+
+        {
+
+          "id": "Summer",
+
+          "name": "Summer",
+
+          "value": ""
+
+        },
+
+        {
+
+          "id": "Autumn",
+
+          "name": "Autumn",
+
+          "value": ""
+
+        }
+
+      ]
+
+    },
+
+    {
+
+      "formType": "simple",
+
+      "fieldType": "checkbox",
+
+      "inputType": "checkbox",
+
+      "id": "radio",
+
+      "name": "radio",
+
+      "label": "Checkbox configuration",
+
+      "className": "checkbox",
+
+      "value": "",
+
+      "alt": "na",
+
+      "appearance": "outline",
+
+      "min": "4",
+
+      "max": "20",
+
+      "width": "100",
+
+      "height": "20",
+
+      "checked": false,
+
+      "disabled": false,
+
+      "maxlength": "100",
+
+      "readonly": false,
+
+      "required": true,
+
+      "size": "100",
+
+      "sameRow": false,
+
+      "sameRowColumnWidth": "100",
+
+      "tooltip": "Checkpoint",
+
+      "tooltipPosition": "above",
+
+      "pattern": "any",
+
+      "placeholder": "",
+
+      "autofocus": true,
+
+      "autocomplete": false,
+
+      "customComponentName": "none",
+
+      "rucDialogInput": {},
+
+      "hasDependentFields": false,
+
+      "dependentFieldParentId": "any",
+
+      "dependentFields": [],
+
+      "toolTipDescription": "none",
+
+      "errorMsg": false,
+
+      "customErrorMessage": "invalid selection",
+
+      "showErrorOnPopUp": true,
+
+      "groupOptions": [
+
+        {
+
+          "id": "Winter",
+
+          "name": "Winter",
+
+          "value": "Winter"
+
+        },
+
+        {
+
+          "id": "Spring",
+
+          "name": "Spring",
+
+          "value": "Spring"
+
+        },
+
+        {
+
+          "id": "Summer",
+
+          "name": "Summer",
+
+          "value": "Summer"
+
+        },
+
+        {
+
+          "id": "Autumn",
+
+          "name": "Autumn",
+
+          "value": "Autumn"
+
+        }
+
+      ]
+
+    },
+
+    {
+
+      "formType": "simple",
+
+      "fieldType": "select",
+
+      "inputType": "select",
+
+      "id": "select",
+
+      "name": "select",
+
+      "label": "select configuration",
+
+      "className": "select",
+
+      "value": "",
+
+      "alt": "na",
+
+      "appearance": "outline",
+
+      "min": "4",
+
+      "max": "20",
+
+      "width": "100",
+
+      "height": "20",
+
+      "checked": false,
+
+      "disabled": false,
+
+      "maxlength": "100",
+
+      "readonly": false,
+
+      "required": true,
+
+      "size": "100",
+
+
+      "sameRow": true,
+
+      "tooltip": "select",
+
+      "tooltipPosition": "below",
+
+      "sameRowColumnWidth": "100",
+
+      "pattern": "any",
+
+      "placeholder": "",
+
+      "autofocus": true,
+
+      "autocomplete": false,
+
+      "customComponentName": "none",
+
+      "rucDialogInput": {},
+
+      "hasDependentFields": true,
+
+      "toolTipDescription": "none",
+
+      "errorMsg": false,
+
+      "customErrorMessage": "Invalid select option",
+
+      "showErrorOnPopUp": true,
+
+      "groupOptions": [
+
+        {
+
+          "id": "w11",
+
+          "name": "Winter",
+
+          "value": "Winter"
+
+        },
+
+        {
+
+          "id": "s1",
+
+          "name": "Spring",
+
+          "value": "Spring"
+
+        },
+
+        {
+
+          "id": "su1",
+
+          "name": "Summer",
+
+          "value": "Summer",
+
+          "disable": true
+
+        },
+
+        {
+
+          "id": "a1",
+
+          "name": "Autumn",
+
+          "value": "Autumn"
+
+        }
+
+      ],
+
+      "dependentFields":
+
+        [
+
+          {
+
+            "formType": "simple",
+
+            "fieldType": "input",
+
+            "inputType": "text",
+
+            "id": "w1",
+
+            "name": "w1",
+
+            "errorMsg": false,
+
+            "label": "Winter Name",
+
+            "className": "winter",
+
+            "value": "",
+
+            "alt": "na",
+
+            "appearance": "outline",
+
+            "min": "4",
+
+            "max": "20",
+
+            "width": "50%",
+
+            "height": "20",
+
+            "checked": false,
+
+            "disabled": false,
+
+            "maxlength": "100",
+
+            "readonly": false,
+
+            "required": false,
+
+            "size": "100",
+
+            "pattern": "any",
+
+            "placeholder": "w1 Name",
+
+            "autofocus": false,
+
+            "autocomplete": "",
+
+            "customComponentName": "none",
+
+            "rucDialogInput": {},
+
+            "hasDependentFields": false,
+
+            "dependentFieldParentId": "w11",
+
+            "dependentFields": [],
+
+            "toolTipDescription": "none",
+
+            "showErrorOnPopUp": true,
+
+            "groupOptions": []
+
+          },
+
+          {
+
+            "formType": "simple",
+
+            "fieldType": "input",
+
+            "inputType": "text",
+
+            "id": "a11",
+
+            "name": "a11",
+
+            "errorMsg": false,
+
+            "label": "Autumn Name",
+
+            "className": "Autumn",
+
+            "value": "",
+
+            "alt": "na",
+
+            "appearance": "outline",
+
+            "min": "4",
+
+            "max": "20",
+
+            "width": "50%",
+
+            "height": "20",
+
+            "checked": false,
+
+            "disabled": false,
+
+            "maxlength": "100",
+
+            "readonly": false,
+
+            "required": false,
+
+            "size": "100",
+
+            "pattern": "any",
+
+            "placeholder": "Autumn Name",
+
+            "autofocus": false,
+
+            "autocomplete": "",
+
+            "customComponentName": "none",
+
+            "rucDialogInput": {},
+
+            "hasDependentFields": false,
+
+            "dependentFieldParentId": "a1",
+
+            "dependentFields": [],
+
+            "toolTipDescription": "none",
+
+            "showErrorOnPopUp": true,
+
+            "groupOptions": []
+
+          }]
+
+
+
+    },
+
+    {
+
+      "formType": "simple",
+
+      "fieldType": "select",
+
+      "inputType": "select",
+
+      "id": "country",
+
+      "name": "select",
+
+      "label": "select Country",
+
+      "className": "select",
+
+      "value": "India",
+
+      "alt": "na",
+
+      "min": "4",
+
+      "max": "20",
+
+      "width": "50%",
+
+      "size": "100",
+
+      "height": "20",
+
+      "appearance": "outline",
+
+      "autofocus": true,
+
+      "autocomplete": false,
+
+      "sameRow": false,
+
+      "sameRowColumnWidth": "100",
+
+      "tooltip": "select",
+
+      "tooltipPosition": "above",
+
+      "rucDialogInput": {},
+
+      "hasDependentFields": true,
+
+      "errorMsg": false,
+
+      "customErrorMessage": "Invalid select option",
+
+      "showErrorOnPopUp": true,
+
+      "selectedParentId": "ind1",
+
+      "groupOptions": [
+
+        {
+
+          "id": "ind1",
+
+          "name": "India",
+
+          "value": "India"
+
+        },
+
+        {
+
+          "id": "usa1",
+
+          "name": "USA",
+
+          "value": "USA"
+
+        },
+
+        {
+
+          "id": "uk1",
+
+          "name": "UK",
+
+          "value": "UK"
+
+        },
+
+        {
+
+          "id": "ch1",
+
+          "name": "Chaina",
+
+          "value": "Chaina"
+
+        }
+
+      ],
+
+      "dependentFields": [
+
+        {
+
+          "formType": "simple",
+
+          "fieldType": "select",
+
+          "inputType": "select",
+
+          "id": "indianState",
+
+          "name": "select",
+
+          "label": "select State",
+
+          "className": "select",
+
+          "value": "MP",
+
+          "appearance": "outline",
+
+          "hasDependentFields": true,
+
+          "dependentFieldParentId": "ind1",
+
+          "selectedParentId": "mp1",
+
+          "groupOptions": [
+
+            {
+
+              "id": "mp1",
+
+              "name": "MP",
+
+              "value": "MP"
+
+            },
+
+            {
+
+              "id": "up1",
+
+              "name": "UP",
+
+              "value": "UP"
+
+            },
+
+            {
+
+              "id": "pb1",
+
+              "name": "PB",
+
+              "value": "PB"
+
+            }
+
+          ],
+
+          "dependentFields": [
+
+            {
+
+              "formType": "simple",
+
+              "fieldType": "select",
+
+              "inputType": "select",
+
+              "id": "mpCity",
+
+              "name": "select",
+
+              "label": "select City",
+
+              "className": "select",
+
+              "appearance": "outline",
+
+              "value": "INDORE",
+
+              "hasDependentFields": false,
+
+              "dependentFieldParentId": "mp1",
+
+              "selectedParentId": "indre1",
+
+              "groupOptions": [
+
+                {
+
+                  "id": "indre1",
+
+                  "name": "INDORE",
+
+                  "value": "INDORE"
+
+                },
+
+                {
+
+                  "id": "bh1",
+
+                  "name": "bhopal",
+
+                  "value": "bhopal"
+
+                }
+
+              ],
+
+              "dependentFields": [
+
+
+
+              ]
+
+            },
+
+            {
+
+              "formType": "simple",
+
+              "fieldType": "select",
+
+              "inputType": "select",
+
+              "id": "upcity",
+
+              "name": "select",
+
+              "appearance": "outline",
+
+              "label": "select City",
+
+              "className": "select",
+
+              "value": "",
+
+              "hasDependentFields": false,
+
+              "dependentFieldParentId": "up1",
+
+              "groupOptions": [
+
+                {
+
+                  "id": "m1",
+
+                  "name": "Mathura",
+
+                  "value": "Mathura"
+
+                },
+
+                {
+
+                  "id": "v1",
+
+                  "name": "Vrindavan",
+
+                  "value": "Vrindavan"
+
+                }
+
+              ],
+
+              "dependentFields": [
+
+
+
+              ]
+
+            }
+
+          ]
+
+        },
+
+        {
+
+          "formType": "simple",
+
+          "fieldType": "select",
+
+          "inputType": "select",
+
+          "id": "usaState",
+
+          "name": "select",
+
+          "appearance": "outline",
+
+          "label": "select State",
+
+          "className": "select",
+
+          "value": "",
+
+          "hasDependentFields": true,
+
+          "dependentFieldParentId": "usa1",
+
+          "groupOptions": [
+
+            {
+
+              "id": "p1",
+
+              "name": "Phenix",
+
+              "value": "Phenix"
+
+            },
+
+            {
+
+              "id": "v1",
+
+              "name": "Vasingtan",
+
+              "value": "Vasingtan"
+
+            }
+
+          ],
+
+          "dependentFields": [
+
+            {
+
+              "formType": "simple",
+
+              "fieldType": "select",
+
+              "inputType": "select",
+
+              "id": "phinexCity",
+
+              "name": "select",
+
+              "appearance": "outline",
+
+              "label": "select City",
+
+              "className": "select",
+
+              "value": "",
+
+              "hasDependentFields": false,
+
+              "dependentFieldParentId": "p1",
+
+              "groupOptions": [
+
+                {
+
+                  "id": "p11",
+
+                  "name": "p111",
+
+                  "value": "p111"
+
+                },
+
+                {
+
+                  "id": "p2",
+
+                  "name": "p222",
+
+                  "value": "p222"
+
+                }
+
+              ],
+
+              "dependentFields": [
+
+
+
+              ]
+
+            },
+
+            {
+
+              "formType": "simple",
+
+              "fieldType": "select",
+
+              "inputType": "select",
+
+              "id": "vashigtonCity",
+
+              "name": "select",
+
+              "appearance": "outline",
+
+              "label": "select City",
+
+              "className": "select",
+
+              "value": "",
+
+              "hasDependentFields": false,
+
+              "dependentFieldParentId": "v1",
+
+              "groupOptions": [
+
+                {
+
+                  "id": "v11",
+
+                  "name": "v111",
+
+                  "value": "v111"
+
+                },
+
+                {
+
+                  "id": "v2",
+
+                  "name": "v222",
+
+                  "value": "v222"
+
+                }
+
+              ],
+
+              "dependentFields": [
+
+
+
+              ]
+
+            }
+
+          ]
+
+        }
+
+      ]
+
+    }
+
+  ]
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ RuclibMetaformComponent,
+        RucMetaInputsComponent,RucMetaRadioGroupComponent,RucMetaCheckboxGroupComponent,
+        RucMetaSelectComponent,RucTextAreaComponent
+    ],
+    imports: [HttpClientTestingModule, HttpClientModule,BrowserAnimationsModule,
+      FormsModule,
+      MatFormFieldModule,
+      MatInputModule,
+      MatRadioModule,
+      MatCheckboxModule,
+      MatSelectModule,
+      MatAutocompleteModule,
+      MatButtonModule,
+      MatTooltipModule,
+      TextFieldModule,
+      MatStepperModule],
+    providers: [
+      RucMetaFormService,
+    ],
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(RuclibMetaformComponent);
+    component = fixture.componentInstance;
+    service = TestBed.inject(RucMetaFormService);
+    fixture.detectChanges();
+    component.dataSource = mockFormData;
+    
+    fixture.detectChanges();
+  });
+
+  it('should create', fakeAsync(() => {
+    component.isChild = false;
+    spyOn(service, 'getFormJson').and.returnValue(of(mockFormData) as any); // Explicitly specify return type
+    fixture.detectChanges();
+    tick();  
+    // Add another round of change detection to ensure any asynchronous tasks are completed
+    fixture.detectChanges();
+    tick();  
+    expect(component).toBeTruthy();
+  }));
+
+  it('should initialize as a child', () => {
+    // Set component properties to simulate being a child
+    component.isChild = true;
+    component.childForm = mockFormData;
+    // Call ngOnInit
+    component.ngOnInit();
+    expect(component.formData).toEqual(component.childForm);
+  });
+
+  it('should called passEvent', () => {
+    component.dataSource = mockFormData;
+    const event = {
+      value: "Winter"
+    }
+   const spy= spyOn(component.rucEvent, 'emit');
+    component.passEvent(event, 1);
+   
+    expect(spy).toHaveBeenCalled();
+  });
+
+  it('should called passEvent when upload something', () => {
+    component.dataSource = mockFormData;
+    const event = {
+      value: "file",
+      eventName: 'onUploading',
+      eventOutput: {
+        name: 'fileUpload'
+      }
+    }
+    const formElement = {value:''};
+   const spy= spyOn(component.rucEvent, 'emit');
+    component.passEvent(event,formElement);
+   
+    expect(spy).toHaveBeenCalled();
+  });
+
+  it('should called getMetaFormData', () => {
+    component.dataSource = mockFormData;
+    const event = {
+      value: "Winter"
+    }
+    const spy= spyOn(component.rucEvent, 'emit');
+
+    component.getMetaFormData(event);
+    expect(spy).toHaveBeenCalled();
+  });
+
+  it('should clear form data', () => {
+    const testData: MetaFormConfig[] = mockFormData;
+    component.formData = testData;
+    component.clearForm();
+    component.formData.forEach((field: { value: any; }) => {
+      expect(field.value).toBe('');
+    });
+  });
+});