tests

Author: lnu

projects/ngx-mask-lib/src/test/cva.spec.ts

@@ -1,93 +1,42 @@
-import { Component } from '@angular/core';
-import {
-    ControlValueAccessor,
-    FormControl,
-    FormsModule,
-    ReactiveFormsModule,
-} from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { runValueAccessorTests } from 'ngx-cva-test-suite';
-import { NgxMaskDirective, provideEnvironmentNgxMask } from 'ngx-mask';
+import { Component, ElementRef, ViewChild } from '@angular/core';
+import { NgxMaskDirective, provideNgxMask } from 'ngx-mask';
 
 @Component({
-    imports: [NgxMaskDirective, FormsModule, ReactiveFormsModule],
-    template: `
-        <input
-            class="text-align-right"
-            mask="Hh:m0"
-            [dropSpecialCharacters]="false"
-            [showMaskTyped]="true"
-            [leadZeroDateTime]="true"
-            [formControl]="innerFormControl"
-            (blur)="onTouched()" />
-    `,
+  template: `<input
+    mask="Hh:m0"
+    [dropSpecialCharacters]="false"
+    [showMaskTyped]="true"
+    [leadZeroDateTime]="true"
+    #ctrl />`,
+  imports: [NgxMaskDirective],
 })
-class TestComponent implements ControlValueAccessor {
-    innerFormControl = new FormControl('');
-    private _onChange: null | ((value: string) => void) = null;
-    private _onTouched: null | (() => void) = null;
+export class CVAWrapperComponent {
+  @ViewChild(NgxMaskDirective) defaultCtrl!: NgxMaskDirective;
+  @ViewChild('ctrl') readonly ctrl!: ElementRef<HTMLInputElement>;
 
-    registerOnChange(onChange: (value: string) => void): void {
-        this._onChange = onChange;
-    }
-
-    registerOnTouched(onTouched: () => void): void {
-        this._onTouched = onTouched;
-    }
-
-    onChange(value: string): void {
-        if (this._onChange) {
-            this._onChange(value);
-        }
-    }
-
-    onTouched(): void {
-        if (this._onTouched) {
-            this._onTouched();
-        }
-    }
-
-    setDisabledState(isDisabled: boolean): void {
-      if (isDisabled) this.innerFormControl.disable({ emitEvent: false });
-      else this.innerFormControl.enable({ emitEvent: false });
-    }
-
-    get disabled() {
-      return this.innerFormControl.disabled;
-    }
-
-    writeValue(value: string): void {
-      this.innerFormControl.setValue(value, { emitEvent: false });
-    }
+  get value(): string {
+    return this.ctrl?.nativeElement.value;
+  }
 }
 
-describe('CVA', () => {
-    runValueAccessorTests({
-        /** Component, that is being tested */
-        component: TestComponent,
-
-        /**
-         * All the metadata required for this test to run.
-         * Under the hood calls TestBed.configureTestingModule with provided config.
-         */
-        testModuleMetadata: {
-            imports: [ReactiveFormsModule, FormsModule],
-            providers: [provideEnvironmentNgxMask()],
-        },
-        /** Whether component is able to track "onBlur" events separately */
-        supportsOnBlur: true,
-        /**
-         * CSS selector for the element, that should dispatch `blur` event.
-         * Required and used only if `supportsOnBlur` is set to true.
-         */
-        nativeControlSelector: 'input',
-        /**
-         * Tests the correctness of an approach that is used to set value in the component,
-         * when the change is internal. It's optional and can be omitted by passing "null"
-         */
-        internalValueChangeSetter: null,
-        /** Function to get the value of a component in a runtime. */
-        getComponentValue: (fixture) => fixture.componentInstance.innerFormControl.value,
-        resetCustomValue: { value: null },
-        getValues: () => ['20:00', '10:00', null],
-    });
+describe('TimeFieldFormComponent', () => {
+  runValueAccessorTests<NgxMaskDirective, CVAWrapperComponent>({
+    component: NgxMaskDirective,
+    testModuleMetadata: {
+      providers: [provideNgxMask()],
+      imports: [FormsModule, ReactiveFormsModule],
+    },
+    hostTemplate: {
+      hostComponent: CVAWrapperComponent,
+      getTestingComponent: fixture => fixture.componentInstance.defaultCtrl,
+    },
+    supportsOnBlur: true,
+    nativeControlSelector: 'input[mask]',
+    internalValueChangeSetter: null,
+    getComponentValue: null,
+    resetCustomValue: { value: '__:__' },
+    getValues: () => ['10:00', '20:00', null],
+  });
 });