inElement wrapper

Introduce inElement wrapper and make elementText support it;

src/app/tests/foundation/base.component.harness.ts

@@ -3,18 +3,31 @@ import {
 } from '@angular/cdk/testing'
 
 export class BaseHarness extends ComponentHarness {
+  private 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): BaseHarness {
+    const copy = Object.create(
+      Object.getPrototypeOf(this),
+      Object.getOwnPropertyDescriptors(this)
+    )
+    copy.ancestorSelector = `div${this.getIdSelector(id)} `
+    return copy
+  }
   /********************************
    * ACTIONS
    *******************************/
@@ -71,7 +84,7 @@ export class BaseHarness extends ComponentHarness {
       'h4',
       'p',
       'div'
-    ])
+    ], this.ancestorSelector)
     const element = await this.locatorFor(cssSelector)()
     return await element.text()
   }

src/app/tests/foundation/tests/test.component.html

@@ -50,6 +50,20 @@ <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>
             <div>Form control with update on change:</div>

src/app/tests/foundation/tests/test.component.spec.ts

@@ -101,6 +101,8 @@ describe('Base harness', () => {
 
       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.inElement('text-element-wrapper').elementText(`${tag}-element-text`)).toBeResolvedTo(`${tag} text in wrapper`)
     }
   })