address comments

Author: mmalerba

src/cdk/testing/protractor/protractor-harness-environment.ts

@@ -10,21 +10,31 @@ import {HarnessEnvironment, HarnessLoader, TestElement} from '@angular/cdk/testi
 import {by, element as protractorElement, ElementArrayFinder, ElementFinder} from 'protractor';
 import {ProtractorElement} from './protractor-element';
 
-/** The default query function that respects shadow boundaries. */
-const defaultQueryFn = (selector: string, root: ElementFinder) => root.all(by.css(selector));
+/** Options to configure the environment. */
+export interface ProtractorHarnessEnvironmentOptions {
+  /** The query function used to find DOM elements. */
+  queryFn: (selector: string, root: ElementFinder) => ElementArrayFinder;
+}
+
+/** The default environment options. */
+const defaultEnvironmentOptions: ProtractorHarnessEnvironmentOptions = {
+  queryFn: (selector: string, root: ElementFinder) => root.all(by.css(selector))
+};
 
 /** A `HarnessEnvironment` implementation for Protractor. */
 export class ProtractorHarnessEnvironment extends HarnessEnvironment<ElementFinder> {
-  protected constructor(rawRootElement: ElementFinder,
-      private _queryFn: (selector: string, root: ElementFinder) => ElementArrayFinder =
-          defaultQueryFn) {
+  /** The options for this environment. */
+  private _options: ProtractorHarnessEnvironmentOptions;
+
+  protected constructor(
+      rawRootElement: ElementFinder, options?: ProtractorHarnessEnvironmentOptions) {
     super(rawRootElement);
+    this._options = {...defaultEnvironmentOptions, ...options};
   }
 
   /** Creates a `HarnessLoader` rooted at the document root. */
-  static loader(queryFn?: (selector: string, root: ElementFinder) => ElementArrayFinder):
-      HarnessLoader {
-    return new ProtractorHarnessEnvironment(protractorElement(by.css('body')), queryFn);
+  static loader(options?: ProtractorHarnessEnvironmentOptions): HarnessLoader {
+    return new ProtractorHarnessEnvironment(protractorElement(by.css('body')), options);
   }
 
   async forceStabilize(): Promise<void> {}
@@ -43,11 +53,11 @@ export class ProtractorHarnessEnvironment extends HarnessEnvironment<ElementFind
   }
 
   protected createEnvironment(element: ElementFinder): HarnessEnvironment<ElementFinder> {
-    return new ProtractorHarnessEnvironment(element, this._queryFn);
+    return new ProtractorHarnessEnvironment(element, this._options);
   }
 
   protected async getAllRawElements(selector: string): Promise<ElementFinder[]> {
-    const elementArrayFinder = this._queryFn(selector, this.rawRootElement);
+    const elementArrayFinder = this._options.queryFn(selector, this.rawRootElement);
     const length = await elementArrayFinder.count();
     const elements: ElementFinder[] = [];
     for (let i = 0; i < length; i++) {

src/cdk/testing/testbed/testbed-harness-environment.ts

@@ -19,36 +19,49 @@ import {takeWhile} from 'rxjs/operators';
 import {TaskState, TaskStateZoneInterceptor} from './task-state-zone-interceptor';
 import {UnitTestElement} from './unit-test-element';
 
-/** The default query function that respects shadow boundaries. */
-const defaultQueryFn = (selector: string, root: Element) => root.querySelectorAll(selector);
+/** Options to configure the environment. */
+export interface TestbedHarnessEnvironmentOptions {
+  /** The query function used to find DOM elements. */
+  queryFn: (selector: string, root: Element) => ArrayLike<Element>;
+}
+
+/** The default environment options. */
+const defaultEnvironmentOptions: TestbedHarnessEnvironmentOptions = {
+  queryFn: (selector: string, root: Element) => root.querySelectorAll(selector)
+};
 
 /** A `HarnessEnvironment` implementation for Angular's Testbed. */
 export class TestbedHarnessEnvironment extends HarnessEnvironment<Element> {
+  /** Whether the environment has been destroyed. */
   private _destroyed = false;
 
   /** Observable that emits whenever the test task state changes. */
   private _taskState: Observable<TaskState>;
 
+  /** The options for this environment. */
+  private _options: TestbedHarnessEnvironmentOptions;
+
   protected constructor(rawRootElement: Element, private _fixture: ComponentFixture<unknown>,
-      private _queryFn: (selector: string, root: Element) => ArrayLike<Element> = defaultQueryFn) {
+      options?: TestbedHarnessEnvironmentOptions) {
     super(rawRootElement);
+    this._options = {...defaultEnvironmentOptions, ...options};
     this._taskState = TaskStateZoneInterceptor.setup();
     _fixture.componentRef.onDestroy(() => this._destroyed = true);
   }
 
   /** Creates a `HarnessLoader` rooted at the given fixture's root element. */
-  static loader(fixture: ComponentFixture<unknown>,
-      queryFn?: (selector: string, root: Element) => ArrayLike<Element>): HarnessLoader {
-    return new TestbedHarnessEnvironment(fixture.nativeElement, fixture, queryFn);
+  static loader(fixture: ComponentFixture<unknown>, options?: TestbedHarnessEnvironmentOptions):
+      HarnessLoader {
+    return new TestbedHarnessEnvironment(fixture.nativeElement, fixture, options);
   }
 
   /**
    * Creates a `HarnessLoader` at the document root. This can be used if harnesses are
    * located outside of a fixture (e.g. overlays appended to the document body).
    */
   static documentRootLoader(fixture: ComponentFixture<unknown>,
-      queryFn?: (selector: string, root: Element) => ArrayLike<Element>): HarnessLoader {
-    return new TestbedHarnessEnvironment(document.body, fixture, queryFn);
+      options?: TestbedHarnessEnvironmentOptions): HarnessLoader {
+    return new TestbedHarnessEnvironment(document.body, fixture, options);
   }
 
   /**
@@ -59,8 +72,8 @@ export class TestbedHarnessEnvironment extends HarnessEnvironment<Element> {
    */
   static async harnessForFixture<T extends ComponentHarness>(
       fixture: ComponentFixture<unknown>, harnessType: ComponentHarnessConstructor<T>,
-      queryFn?: (selector: string, root: Element) => ArrayLike<Element>): Promise<T> {
-    const environment = new TestbedHarnessEnvironment(fixture.nativeElement, fixture, queryFn);
+      options?: TestbedHarnessEnvironmentOptions): Promise<T> {
+    const environment = new TestbedHarnessEnvironment(fixture.nativeElement, fixture, options);
     await environment.forceStabilize();
     return environment.createComponentHarness(harnessType, fixture.nativeElement);
   }
@@ -101,11 +114,11 @@ export class TestbedHarnessEnvironment extends HarnessEnvironment<Element> {
   }
 
   protected createEnvironment(element: Element): HarnessEnvironment<Element> {
-    return new TestbedHarnessEnvironment(element, this._fixture, this._queryFn);
+    return new TestbedHarnessEnvironment(element, this._fixture, this._options);
   }
 
   protected async getAllRawElements(selector: string): Promise<Element[]> {
     await this.forceStabilize();
-    return Array.from(this._queryFn(selector, this.rawRootElement));
+    return Array.from(this._options.queryFn(selector, this.rawRootElement));
   }
 }

src/cdk/testing/tests/protractor.e2e.spec.ts

@@ -10,7 +10,8 @@ import {browser, by, element as protractorElement, ElementFinder} from 'protract
 import {MainComponentHarness} from './harnesses/main-component-harness';
 import {SubComponentHarness, SubComponentSpecialHarness} from './harnesses/sub-component-harness';
 
-// TODO: is there some better way to do this?
+// Kagekiri is available globally in the browser. We declare it here so we can use it in the
+// browser-side script passed to `by.js`.
 declare const kagekiri: {
   querySelectorAll: (selector: string, root: Element) => NodeListOf<Element>;
 };
@@ -473,14 +474,14 @@ describe('ProtractorHarnessEnvironment', () => {
       });
 
       it('should pierce shadow boundary when using piercing query', async () => {
-        const harness = await ProtractorHarnessEnvironment.loader(piercingQueryFn)
+        const harness = await ProtractorHarnessEnvironment.loader({queryFn: piercingQueryFn})
             .getHarness(MainComponentHarness);
         const shadows = await harness.shadows();
         expect(await Promise.all(shadows.map(el => el.text()))).toEqual(['Shadow 1', 'Shadow 2']);
       });
 
       it('should allow querying across shadow boundary', async () => {
-        const harness = await ProtractorHarnessEnvironment.loader(piercingQueryFn)
+        const harness = await ProtractorHarnessEnvironment.loader({queryFn: piercingQueryFn})
             .getHarness(MainComponentHarness);
         expect(await (await harness.deepShadow()).text()).toBe('Shadow 2');
       });

src/cdk/testing/tests/testbed.spec.ts

@@ -513,14 +513,14 @@ describe('TestbedHarnessEnvironment', () => {
 
       it('should pierce shadow boundary when using piercing query', async () => {
         const harness = await TestbedHarnessEnvironment
-            .harnessForFixture(fixture, MainComponentHarness, piercingQuerySelectorAll);
+            .harnessForFixture(fixture, MainComponentHarness, {queryFn: piercingQuerySelectorAll});
         const shadows = await harness.shadows();
         expect(await Promise.all(shadows.map(el => el.text()))).toEqual(['Shadow 1', 'Shadow 2']);
       });
 
       it('should allow querying across shadow boundary', async () => {
         const harness = await TestbedHarnessEnvironment
-            .harnessForFixture(fixture, MainComponentHarness, piercingQuerySelectorAll);
+            .harnessForFixture(fixture, MainComponentHarness, {queryFn: piercingQuerySelectorAll});
         expect(await (await harness.deepShadow()).text()).toBe('Shadow 2');
       });
     });