fix: properly count and display missed placeholders

Author: navix

projects/ngxe/src/app/placeholders/extract-placeholder.spec.ts

@@ -0,0 +1,23 @@
+import { extractPlaceholders } from './extract-placeholders';
+
+describe('extractPlaceholders', () => {
+  it('should extract one placeholder', () => {
+    const res = extractPlaceholders('{$PLACEHOLDER}');
+    expect(res).toEqual(['{$PLACEHOLDER}']);
+  });
+
+  it('should extract one placeholder surrounded with text', () => {
+    const res = extractPlaceholders('Prev text {$PLACEHOLDER}after text');
+    expect(res).toEqual(['{$PLACEHOLDER}']);
+  });
+
+  it('should extract multiple placeholders', () => {
+    const res = extractPlaceholders('{$PLACEHOLDER1}{$PLACEHOLDER2}');
+    expect(res).toEqual(['{$PLACEHOLDER1}', '{$PLACEHOLDER2}']);
+  });
+
+  it('should extract multiple placeholders surrounded with text', () => {
+    const res = extractPlaceholders('Prev text {$PLACEHOLDER1} middle text{$PLACEHOLDER2}after text');
+    expect(res).toEqual(['{$PLACEHOLDER1}', '{$PLACEHOLDER2}']);
+  });
+});

projects/ngxe/src/app/placeholders/placeholders-validator.directive.spec.ts

@@ -0,0 +1,55 @@
+import { PlaceholdersValidatorDirective } from './placeholders-validator.directive';
+
+describe('PlaceholdersValidatorDirective', () => {
+  let directive: PlaceholdersValidatorDirective;
+
+  beforeEach(() => {
+    directive = new PlaceholdersValidatorDirective();
+  });
+
+  it('should create', () => {
+    expect(directive).toBeTruthy();
+  });
+
+  it('should be valid without original and value placeholders', () => {
+    directive.originalPlaceholders = [];
+    const err = directive.validate({value: 'No placeholder text'} as any);
+    expect(err).toEqual({placeholders: null});
+  });
+
+  it('should be valid without original placeholder', () => {
+    directive.originalPlaceholders = [];
+    const err = directive.validate({value: '{$PLACEHOLDER}'} as any);
+    expect(err).toEqual({placeholders: null});
+  });
+
+  it('should be valid when placeholders are equal', () => {
+    directive.originalPlaceholders = ['{$PLACEHOLDER}'];
+    const err = directive.validate({value: '{$PLACEHOLDER}'} as any);
+    expect(err).toEqual({placeholders: null});
+  });
+
+  it('should be invalid when placeholder are different', () => {
+    directive.originalPlaceholders = ['{$PLACEHOLDER_ORIG}'];
+    const err = directive.validate({value: '{$PLACEHOLDER_VAL}'} as any);
+    expect(err).toEqual({placeholders: ['{$PLACEHOLDER_ORIG}']});
+  });
+
+  it('should be invalid when multiple placeholder are different', () => {
+    directive.originalPlaceholders = ['{$PLACEHOLDER_1}', '{$PLACEHOLDER_2}', '{$PLACEHOLDER_3}', '{$PLACEHOLDER_4}'];
+    const err = directive.validate({value: '{$PLACEHOLDER_1}, {$PLACEHOLDER_3}'} as any);
+    expect(err).toEqual({placeholders: ['{$PLACEHOLDER_2}', '{$PLACEHOLDER_4}']});
+  });
+
+  it('should be invalid when similar placeholder in original have another count in content', () => {
+    directive.originalPlaceholders = ['{$PLACEHOLDER_ORIG}', '{$PLACEHOLDER_ORIG}', '{$PLACEHOLDER_ORIG}'];
+    const err = directive.validate({value: '{$PLACEHOLDER_ORIG}{$PLACEHOLDER_ORIG}'} as any);
+    expect(err).toEqual({placeholders: ['{$PLACEHOLDER_ORIG}']});
+  });
+
+  it('should be invalid when multiple similar placeholder in original have another count in content', () => {
+    directive.originalPlaceholders = ['{$PLACEHOLDER_ORIG}', '{$PLACEHOLDER_ORIG_2}', '{$PLACEHOLDER_ORIG}', '{$PLACEHOLDER_ORIG_2}', '{$PLACEHOLDER_ORIG_3}', '{$PLACEHOLDER_ORIG}'];
+    const err = directive.validate({value: '{$PLACEHOLDER_ORIG}{$PLACEHOLDER_ORIG}{$PLACEHOLDER_ORIG_2}{$PLACEHOLDER_ORIG_3}'} as any);
+    expect(err).toEqual({placeholders: ['{$PLACEHOLDER_ORIG_2}', '{$PLACEHOLDER_ORIG}']});
+  });
+});

projects/ngxe/src/app/placeholders/placeholders-validator.directive.ts

@@ -14,11 +14,17 @@ export class PlaceholdersValidatorDirective implements Validator {
 
   validate(control: AbstractControl): ValidationErrors | null {
     const placeholders = extractPlaceholders(control.value);
-    const changes = this
-      .originalPlaceholders
-      .filter(op => placeholders.indexOf(op) === -1);
+    const misses: string[] = [];
+    for (const original of this.originalPlaceholders) {
+      const ind = placeholders.indexOf(original);
+      if (ind !== -1) {
+        placeholders.splice(ind, 1);
+      } else {
+        misses.push(original);
+      }
+    }
     return {
-      placeholders: changes.length > 0 ? changes : null,
+      placeholders: misses.length > 0 ? misses : null,
     };
   }
 }

projects/ngxe/src/app/table/table.component.html

@@ -83,9 +83,9 @@ <h5 class="row-title">Suggestions</h5>
                 💡 {{ suggestion }}
               </button>
             </div>
-            <div *ngIf="model.hasError('placeholders')" class="validation">
+            <div *ngIf="model.getError('placeholders'); let error" class="validation">
               <h5 class="row-title">Validation</h5>
-              🚧 Placeholders not found: {{ row.placeholders.join(', ') }}.
+              🚧 Placeholders not found: {{ error.join(', ') }}.
             </div>
           </ng-container>
           <ng-container *ngIf="row.type === 'deleted'">