{"library":"ngx-cva-test-suite","title":"Angular ControlValueAccessor Test Suite","description":"ngx-cva-test-suite is an Angular testing utility designed to streamline and standardize the process of unit testing custom form components that implement `ControlValueAccessor` (CVA). Currently at version 2.0.1, this library provides a comprehensive set of pre-defined test cases, ensuring that custom controls correctly handle essential CVA behaviors such as `onChange` and `onTouched` calls, disabled states, and `reset()` functionality, which are common sources of errors in CVA implementations. It is compatible with both Jest and Jasmine test runners and offers various configuration options to accommodate diverse component structures. Releases for this library typically align with major Angular version updates, with patch releases addressing bug fixes. Its key differentiator lies in its robust, pre-built test suite that reduces boilerplate and potential oversight when developing complex, custom form controls, aiming for extensive unit test coverage.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install ngx-cva-test-suite"],"cli":null},"imports":["import { runValueAccessorTests } from 'ngx-cva-test-suite';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import { runValueAccessorTests } from 'ngx-cva-test-suite';\nimport { Component, Input, Output, EventEmitter, forwardRef } from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR, NG_VALIDATORS, Validator, AbstractControl, ValidationErrors } from '@angular/forms';\n\n@Component({\n  selector: 'app-combobox',\n  template: `<input class=\"combobox-input\" [value]=\"value\" (input)=\"onInput($event)\" (blur)=\"onBlur()\">`,\n  providers: [\n    { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => ComboboxComponent), multi: true },\n    { provide: NG_VALIDATORS, useExisting: forwardRef(() => ComboboxComponent), multi: true }\n  ]\n})\nexport class ComboboxComponent implements ControlValueAccessor, Validator {\n  value: string = '';\n  onChange: any = () => {};\n  onTouched: any = () => {};\n\n  @Input() options: string[] = [];\n  @Output() valueChange = new EventEmitter<string>();\n\n  writeValue(value: any): void {\n    this.value = value || '';\n  }\n\n  registerOnChange(fn: any): void {\n    this.onChange = fn;\n  }\n\n  registerOnTouched(fn: any): void {\n    this.onTouched = fn;\n  }\n\n  setDisabledState(isDisabled: boolean): void {\n    // Implement logic to disable/enable the input\n  }\n\n  onInput(event: Event): void {\n    const newValue = (event.target as HTMLInputElement).value;\n    this.value = newValue;\n    this.onChange(newValue);\n    this.valueChange.emit(newValue);\n  }\n\n  onBlur(): void {\n    this.onTouched();\n  }\n\n  setValue(value: string, emitEvent: boolean = false): void {\n    this.value = value;\n    if (emitEvent) {\n      this.onChange(value);\n      this.valueChange.emit(value);\n    }\n  }\n\n  validate(control: AbstractControl): ValidationErrors | null {\n    return null; // Example validation\n  }\n}\n\n// In your test file (e.g., combobox.component.spec.ts)\nrunValueAccessorTests({\n  component: ComboboxComponent,\n  testModuleMetadata: {\n    declarations: [ComboboxComponent],\n  },\n  supportsOnBlur: true,\n  nativeControlSelector: 'input.combobox-input',\n  internalValueChangeSetter: (fixture, value) => {\n    fixture.componentInstance.setValue(value, true);\n  },\n  getComponentValue: (fixture) => fixture.componentInstance.value,\n  // Optional: Add a custom name for the test suite in the console output\n  name: 'ComboboxComponent CVA Tests'\n});","lang":"typescript","description":"This example demonstrates how to set up `ngx-cva-test-suite` for an Angular component implementing `ControlValueAccessor` and basic validation, showing the component definition alongside its test suite invocation.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}