inElement wrapper

Introduce inElement wrapper and make elementText support it;
antonborisoff · Mar 4, 2024 · 3d0b9c2 · 3d0b9c2
1 parent fb15553
commit 3d0b9c2
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 8 deletions.
diff --git a/src/app/tests/foundation/base.component.harness.ts b/src/app/tests/foundation/base.component.harness.ts
@@ -3,18 +3,33 @@ import {
 } from '@angular/cdk/testing'
 
 export class BaseHarness extends ComponentHarness {
+  // TODO: convert to private once ancestorSelector is managed centrally via getCssSelector (not passed to it)
+  protected ancestorSelector: string = ''
+
   protected getIdSelector(id: string): string {
     return `[data-id="${id}"]`
   }
 
-  protected getCssSelector(id: string, tags: string[]): string {
+  protected getCssSelector(id: string, tags: string[], ancestorSelector: string = ''): string {
     return tags.reduce((selector: string, tag: string) => {
       if (selector) {
         selector = `${selector},`
       }
-      return `${selector}${tag}${this.getIdSelector(id)}`
+      return `${selector}${ancestorSelector}${tag}${this.getIdSelector(id)}`
     }, '')
   }
+
+  /********************************
+   * WRAPPERS
+   *******************************/
+  public inElement(id: string): this {
+    const copy = Object.create(
+      Object.getPrototypeOf(this),
+      Object.getOwnPropertyDescriptors(this)
+    )
+    copy.ancestorSelector = `div${this.getIdSelector(id)} `
+    return copy
+  }
   /********************************
    * ACTIONS
    *******************************/
@@ -71,7 +86,7 @@ export class BaseHarness extends ComponentHarness {
       'h4',
       'p',
       'div'
-    ])
+    ], this.ancestorSelector)
     const element = await this.locatorFor(cssSelector)()
     return await element.text()
   }

diff --git a/src/app/tests/foundation/tests/test.component.harness.ts b/src/app/tests/foundation/tests/test.component.harness.ts
@@ -9,7 +9,7 @@ export class TestComponentHarness extends BaseHarness {
   // not needed in base harness itself;
   // should not be moved to base harness;
   public async elementPresent(id: string, tag: string): Promise<boolean> {
-    const element = await this.locatorForOptional(`${tag}${this.getIdSelector(id)}`)()
+    const element = await this.locatorForOptional(`${this.ancestorSelector}${tag}${this.getIdSelector(id)}`)()
     return !!element
   }
 }
diff --git a/src/app/tests/foundation/tests/test.component.html b/src/app/tests/foundation/tests/test.component.html
@@ -50,6 +50,22 @@ <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>
+        <!--1. It is important that we use the same ids for text elements in wrapper,
+        this way the tests will fail if wrapper does not focus element lookup and picks up global elements instead;-->
+        <!--2. It is important that text elements in wrapper are not direct children
+        since we want wrappers to look up any descendants;-->
+        <!--3. It is important that text element texts are different for global elements and wrapper elements,
+        this is how we differentiate between them in tests;-->
+        <div data-id="text-element-wrapper">
+            <div>
+                <h1 data-id="h1-element-text">h1 text in wrapper</h1>
+                <h4 data-id="h4-element-text">h4 text in wrapper</h4>
+                <p data-id="p-element-text">p text in wrapper</p>
+                <div data-id="div-element-text">div text in wrapper</div>
+            </div>
+        </div>
+        <div data-id="text-element-wrapper-non-existent-elements">
+        </div>
 
         <div>
             <div>Form control with update on change:</div>

diff --git a/src/app/tests/foundation/tests/test.component.spec.ts b/src/app/tests/foundation/tests/test.component.spec.ts
@@ -96,11 +96,20 @@ describe('Base harness', () => {
       'div'
     ]
     for (const tag of tags) {
-      await expectAsync(baseHarness.elementPresent(`${tag}-element-text`, tag)).toBeResolvedTo(true)
-      await expectAsync(baseHarness.elementText(`${tag}-element-text`)).toBeResolvedTo(`${tag} text`)
+      const elementId = `${tag}-element-text`
+      await expectAsync(baseHarness.elementPresent(elementId, tag)).toBeResolvedTo(true)
+      await expectAsync(baseHarness.elementText(elementId)).toBeResolvedTo(`${tag} text`)
 
-      await expectAsync(baseHarness.elementPresent(`${tag}-element-text-non-existent`, tag)).toBeResolvedTo(false)
-      await expectAsync(baseHarness.elementText(`${tag}-element-text-non-existent`)).toBeRejected()
+      await expectAsync(baseHarness.elementPresent(`${elementId}-non-existent`, tag)).toBeResolvedTo(false)
+      await expectAsync(baseHarness.elementText(`${elementId}-non-existent`)).toBeRejected()
+
+      // elements in wrapper found, not global ones
+      await expectAsync(baseHarness.inElement('text-element-wrapper').elementPresent(elementId, tag)).toBeResolvedTo(true)
+      await expectAsync(baseHarness.inElement('text-element-wrapper').elementText(elementId)).toBeResolvedTo(`${tag} text in wrapper`)
+
+      // elements in wrapper are looked up and not found, global elements are ignored
+      await expectAsync(baseHarness.inElement('text-element-wrapper-non-existent-elements').elementPresent(elementId, tag)).toBeResolvedTo(false)
+      await expectAsync(baseHarness.inElement('text-element-wrapper-non-existent-elements').elementText(elementId)).toBeRejected()
     }
   })