enhance test template

convert test template to ng-template to make it possible to reuse it several times if needed;
antonborisoff · Feb 29, 2024 · eea178e · eea178e
1 parent 58a235e
commit eea178e
Show file tree

Hide file tree

Showing 2 changed files with 81 additions and 70 deletions.
diff --git a/src/app/tests/foundation/tests/test.component.html b/src/app/tests/foundation/tests/test.component.html
@@ -1,74 +1,79 @@
 <!-- eslint-disable @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->
-<div>
-    <button data-id="enabled-button" (click)="clickElement('enabled-button')">Enabled Button</button>
-    <button data-id="disabled-button" (click)="clickElement('disabled-button')" disabled>Disabled Button</button>
-
-    <a data-id="link" (click)="clickElement('link')">Link</a>
-
-    <h1 data-id="h1-element-visible">h1 visible</h1>
-    @if(false){
-        <h1 data-id="h1-element-invisible-if">h1 hidden via ngIf</h1>
-    }
-    <h1 data-id="h1-element-hidden" hidden>h1 hidden via 'hidden' attribute</h1>
-    <h1 data-id="h1-element-style-display-none" style="display: none;">h1 hidden via inline display: none</h1>
-    <h1 data-id="h1-element-style-visibility-hidden" style="visibility: hidden;">h1 hidden via inline visibility: hidden</h1>
-    <h1 data-id="h1-element-class-display-none" class="displayNone">h1 hidden via class display: none</h1>
-    <h1 data-id="h1-element-class-visibility-hidden" class="visibilityHidden">h1 hidden via class visibility: hidden</h1>
-
-    <p data-id="p-element-visible">p visible</p>
-    @if(false){
-        <p data-id="p-element-invisible-if">p hidden via ngIf</p>
-    }
-    <p data-id="p-element-hidden" hidden>p hidden via 'hidden' attribute</p>
-    <p data-id="p-element-style-display-none" style="display: none;">p hidden via inline display: none</p>
-    <p data-id="p-element-style-visibility-hidden" style="visibility: hidden;">p hidden via inline visibility: hidden</p>
-    <p data-id="p-element-class-display-none" class="displayNone">p hidden via class display: none</p>
-    <p data-id="p-element-class-visibility-hidden" class="visibilityHidden">p hidden via class visibility: hidden</p>
-
-    <div data-id="div-element-visible">div visible</div>
-    @if(false){
-        <div data-id="div-element-invisible-if">div hidden via ngIf</div>
-    }
-    <div data-id="div-element-hidden" hidden>div hidden via 'hidden' attribute</div>
-    <div data-id="div-element-style-display-none" style="display: none;">div hidden via inline display: none</div>
-    <div data-id="div-element-style-visibility-hidden" style="visibility: hidden;">div hidden via inline visibility: hidden</div>
-    <div data-id="div-element-class-display-none" class="displayNone">div hidden via class display: none</div>
-    <div data-id="div-element-class-visibility-hidden" class="visibilityHidden">div hidden via class visibility: hidden</div>
-
-    <button data-id="button-element-visible">button visible</button>
-    @if(false){
-        <button data-id="button-element-invisible-if">button hidden via ngIf</button>
-    }
-    <button data-id="button-element-hidden" hidden>button hidden via 'hidden' attribute</button>
-    <button data-id="button-element-style-display-none" style="display: none;">button hidden via inline display: none</button>
-    <button data-id="button-element-style-visibility-hidden" style="visibility: hidden;">button hidden via inline visibility: hidden</button>
-    <button data-id="button-element-class-display-none" class="displayNone">button hidden via class display: none</button>
-    <button data-id="button-element-class-visibility-hidden" class="visibilityHidden">button hidden via class visibility: hidden</button>
-
-    <h1 data-id="h1-element-text">h1 text</h1>
-    <h4 data-id="h4-element-text">h4 text</h4>
-    <p data-id="p-element-text">p text</p>
-    <div data-id="div-element-text">div text</div>
-
+<ng-template #testTemplate>
     <div>
-        <div>Form control with update on change:</div>
-        <input data-id="input-element-update-on-change" [formControl]="formControlUpdateOnChange"/>
-    </div>
-
-    <div>
-        <div>Form control with update on blur:</div>
-        <input data-id="input-element-update-on-blur" [formControl]="formControlUpdateOnBlur"/>
-    </div>
-
-    <div data-id="div-child-count-no-grandchild-present">
-        <div>child 1</div>
-        <div>child 2</div>
-    </div>
-    <div data-id="div-child-count-grandchild-present">
+        <button data-id="enabled-button" (click)="clickElement('enabled-button')">Enabled Button</button>
+        <button data-id="disabled-button" (click)="clickElement('disabled-button')" disabled>Disabled Button</button>
+
+        <a data-id="link" (click)="clickElement('link')">Link</a>
+
+        <h1 data-id="h1-element-visible">h1 visible</h1>
+        @if(false){
+            <h1 data-id="h1-element-invisible-if">h1 hidden via ngIf</h1>
+        }
+        <h1 data-id="h1-element-hidden" hidden>h1 hidden via 'hidden' attribute</h1>
+        <h1 data-id="h1-element-style-display-none" style="display: none;">h1 hidden via inline display: none</h1>
+        <h1 data-id="h1-element-style-visibility-hidden" style="visibility: hidden;">h1 hidden via inline visibility: hidden</h1>
+        <h1 data-id="h1-element-class-display-none" class="displayNone">h1 hidden via class display: none</h1>
+        <h1 data-id="h1-element-class-visibility-hidden" class="visibilityHidden">h1 hidden via class visibility: hidden</h1>
+
+        <p data-id="p-element-visible">p visible</p>
+        @if(false){
+            <p data-id="p-element-invisible-if">p hidden via ngIf</p>
+        }
+        <p data-id="p-element-hidden" hidden>p hidden via 'hidden' attribute</p>
+        <p data-id="p-element-style-display-none" style="display: none;">p hidden via inline display: none</p>
+        <p data-id="p-element-style-visibility-hidden" style="visibility: hidden;">p hidden via inline visibility: hidden</p>
+        <p data-id="p-element-class-display-none" class="displayNone">p hidden via class display: none</p>
+        <p data-id="p-element-class-visibility-hidden" class="visibilityHidden">p hidden via class visibility: hidden</p>
+
+        <div data-id="div-element-visible">div visible</div>
+        @if(false){
+            <div data-id="div-element-invisible-if">div hidden via ngIf</div>
+        }
+        <div data-id="div-element-hidden" hidden>div hidden via 'hidden' attribute</div>
+        <div data-id="div-element-style-display-none" style="display: none;">div hidden via inline display: none</div>
+        <div data-id="div-element-style-visibility-hidden" style="visibility: hidden;">div hidden via inline visibility: hidden</div>
+        <div data-id="div-element-class-display-none" class="displayNone">div hidden via class display: none</div>
+        <div data-id="div-element-class-visibility-hidden" class="visibilityHidden">div hidden via class visibility: hidden</div>
+
+        <button data-id="button-element-visible">button visible</button>
+        @if(false){
+            <button data-id="button-element-invisible-if">button hidden via ngIf</button>
+        }
+        <button data-id="button-element-hidden" hidden>button hidden via 'hidden' attribute</button>
+        <button data-id="button-element-style-display-none" style="display: none;">button hidden via inline display: none</button>
+        <button data-id="button-element-style-visibility-hidden" style="visibility: hidden;">button hidden via inline visibility: hidden</button>
+        <button data-id="button-element-class-display-none" class="displayNone">button hidden via class display: none</button>
+        <button data-id="button-element-class-visibility-hidden" class="visibilityHidden">button hidden via class visibility: hidden</button>
+
+        <h1 data-id="h1-element-text">h1 text</h1>
+        <h4 data-id="h4-element-text">h4 text</h4>
+        <p data-id="p-element-text">p text</p>
+        <div data-id="div-element-text">div text</div>
+
         <div>
-            <div>grandchild 1</div>
-            <div>grandchild 2</div>
+            <div>Form control with update on change:</div>
+            <input data-id="input-element-update-on-change" [formControl]="formControlUpdateOnChange"/>
+        </div>
+
+        <div>
+            <div>Form control with update on blur:</div>
+            <input data-id="input-element-update-on-blur" [formControl]="formControlUpdateOnBlur"/>
+        </div>
+
+        <div data-id="div-child-count-no-grandchild-present">
+            <div>child 1</div>
+            <div>child 2</div>
+        </div>
+        <div data-id="div-child-count-grandchild-present">
+            <div>
+                <div>grandchild 1</div>
+                <div>grandchild 2</div>
+            </div>
+            <div>child 2</div>
         </div>
-        <div>child 2</div>
     </div>
-</div>
+</ng-template>
+
+<!--1. test template for regular base harness method calls-->
+<ng-container *ngTemplateOutlet="testTemplate" />
diff --git a/src/app/tests/foundation/tests/test.component.ts b/src/app/tests/foundation/tests/test.component.ts
@@ -1,3 +1,6 @@
+import {
+  CommonModule
+} from '@angular/common'
 import {
   Component
 } from '@angular/core'
@@ -9,7 +12,10 @@ import {
 @Component({
   selector: 'app-test-component',
   standalone: true,
-  imports: [ReactiveFormsModule],
+  imports: [
+    ReactiveFormsModule,
+    CommonModule
+  ],
   templateUrl: './test.component.html',
   styleUrl: './test.component.css'
 })