cva-test-suite added

Author: lnu

bun.lock

@@ -1,5 +1,6 @@
 {
   "lockfileVersion": 1,
+  "configVersion": 0,
   "workspaces": {
     "": {
       "name": "ngx-mask",
@@ -56,6 +57,7 @@
         "lint-staged": "16.1.2",
         "markdownlint-cli": "0.45.0",
         "ng-packagr": "20.1.0",
+        "ngx-cva-test-suite": "^2.0.1",
         "npm-check-updates": "18.0.1",
         "postcss": "8.5.6",
         "postcss-nesting": "13.0.2",
@@ -2432,6 +2434,8 @@
 
     "ng-packagr": ["[email protected]", "", { "dependencies": { "@ampproject/remapping": "^2.3.0", "@rollup/plugin-json": "^6.1.0", "@rollup/wasm-node": "^4.24.0", "ajv": "^8.17.1", "ansi-colors": "^4.1.3", "browserslist": "^4.22.1", "chokidar": "^4.0.1", "commander": "^14.0.0", "dependency-graph": "^1.0.0", "esbuild": "^0.25.0", "find-cache-directory": "^6.0.0", "injection-js": "^2.4.0", "jsonc-parser": "^3.3.1", "less": "^4.2.0", "ora": "^8.2.0", "piscina": "^5.0.0", "postcss": "^8.4.47", "rollup-plugin-dts": "^6.2.0", "rxjs": "^7.8.1", "sass": "^1.81.0", "tinyglobby": "^0.2.12" }, "optionalDependencies": { "rollup": "^4.24.0" }, "peerDependencies": { "@angular/compiler-cli": "^20.0.0 || ^20.1.0-next.0 || ^20.2.0-next.0", "tailwindcss": "^2.0.0 || ^3.0.0 || ^4.0.0", "tslib": "^2.3.0", "typescript": ">=5.8 <5.9" }, "optionalPeers": ["tailwindcss"], "bin": { "ng-packagr": "src/cli/main.js" } }, "sha512-objHk39HWnSSv54KD0Ct4A02rug6HiqbmXo1KJW39npzuVc37QWfiZy94afltH1zIx+mQqollmGaCmwibmagvQ=="],
 
+    "ngx-cva-test-suite": ["[email protected]", "", { "dependencies": { "tslib": "^2.3.0" }, "peerDependencies": { "@angular/core": ">=12.0.0", "@angular/forms": ">=12.0.0", "@angular/platform-browser": ">=12.0.0" } }, "sha512-Q6JrUVFXq1J4AdxOoD6KMO4vTZei+l8GYQdlWbT2vExUNu7KW6bulqXsl+OBNHiQ6tj3BKS/+K42HEOuaSfNWg=="],
+
     "ngx-highlightjs": ["[email protected]", "", { "dependencies": { "highlight.js": "^11.11.1", "tslib": "^2.3.0" }, "peerDependencies": { "@angular/cdk": ">=19.0.0", "@angular/common": ">=19.0.0", "@angular/core": ">=19.0.0", "rxjs": ">=7.0.0" } }, "sha512-pa4YPChIho+Qs6P036oMvTt8pmTlMwberz/kGBojKVMEHSj9t4PT1YzBplM+RMK0VWgLK4zRbJbxivQrLPr1fQ=="],
 
     "ngxtension": ["[email protected]", "", { "dependencies": { "tslib": "^2.3.0" }, "peerDependencies": { "@angular/common": ">=16.0.0", "@angular/core": ">=16.0.0", "@use-gesture/vanilla": "^10.0.0", "rxjs": "^6.0.0 || ^7.0.0" }, "optionalPeers": ["@use-gesture/vanilla"] }, "sha512-ZYs5Fkgrcu+aa/GBqIf/2N7SUZoYam+Fjmu7WxP9rIm4Mx0SECzq+glpWDwBYyPtyfCBwuo6Z8dSPyyzR7PTFQ=="],

package.json

@@ -99,7 +99,10 @@
         "@typescript-eslint/parser": "8.38.0",
         "@web/test-runner": "0.20.2",
         "angular-cli-ghpages": "2.0.3",
+        "angular-eslint": "20.1.1",
         "angular-http-server": "1.12.0",
+        "bun-types": "1.2.19",
+        "cssnano": "7.1.0",
         "eslint": "9.31.0",
         "eslint-config-prettier": "10.1.8",
         "eslint-plugin-json": "4.0.1",
@@ -109,23 +112,21 @@
         "lint-staged": "16.1.2",
         "markdownlint-cli": "0.45.0",
         "ng-packagr": "20.1.0",
+        "ngx-cva-test-suite": "^2.0.1",
         "npm-check-updates": "18.0.1",
+        "postcss": "8.5.6",
+        "postcss-nesting": "13.0.2",
+        "postcss-scss": "4.0.9",
         "prettier": "3.6.2",
         "puppeteer": "24.14.0",
         "stylelint": "16.22.0",
         "stylelint-config-prettier": "9.0.5",
         "stylelint-config-recommended-scss": "15.0.1",
         "stylelint-prettier": "5.0.3",
+        "tailwindcss": "3.4.16",
         "type-coverage": "2.29.7",
         "typescript": "5.8.3",
-        "angular-eslint": "20.1.1",
-        "typescript-eslint": "8.38.0",
-        "tailwindcss": "3.4.16",
-        "bun-types": "1.2.19",
-        "postcss": "8.5.6",
-        "postcss-nesting": "13.0.2",
-        "cssnano": "7.1.0",
-        "postcss-scss": "4.0.9"
+        "typescript-eslint": "8.38.0"
     },
     "typeCoverage": {
         "atLeast": 91,

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

@@ -0,0 +1,93 @@
+import { Component } from '@angular/core';
+import {
+    ControlValueAccessor,
+    FormControl,
+    FormsModule,
+    ReactiveFormsModule,
+} from '@angular/forms';
+import { runValueAccessorTests } from 'ngx-cva-test-suite';
+import { NgxMaskDirective, provideEnvironmentNgxMask } 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()" />
+    `,
+})
+class TestComponent implements ControlValueAccessor {
+    innerFormControl = new FormControl('');
+    private _onChange: null | ((value: string) => void) = null;
+    private _onTouched: null | (() => void) = null;
+
+    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 });
+    }
+}
+
+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],
+    });
+});