fix(cdk/testing): incorrectly handling ancestor of compound selector

Currently the component harness handles the `ancestor` option by prepending it to the `hostSelector` of the harness. This breaks down if the `hostSelector` is a compound selector, because we end up with something like `.parent .a, .b`, rather than `.parent .a, .parent .b`.

These changes resolve the issue and add a bit of extra logic to account for the case where the selector might include commas inside quotes which will break us, because we split compound selectors on the comma. The logic is loosely based on my changes from angular/angular#38716.

Fixes #22475.

Author: crisbeto

src/cdk/testing/component-harness.ts

@@ -520,9 +520,25 @@ export class HarnessPredicate<T extends ComponentHarness> {
 
   /** Gets the selector used to find candidate elements. */
   getSelector() {
-    return this._ancestor.split(',')
-        .map(part => `${part.trim()} ${this.harnessType.hostSelector}`.trim())
-        .join(',');
+    // We don't have to go through the extra trouble if there are no ancestors.
+    if (!this._ancestor) {
+      return (this.harnessType.hostSelector || '').trim();
+    }
+
+    const [ancestors, ancestorPlaceholders] = _splitAndEscapeSelector(this._ancestor);
+    const [selectors, selectorPlaceholders] =
+      _splitAndEscapeSelector(this.harnessType.hostSelector || '');
+    const result: string[] = [];
+
+    // We have to add the ancestor to each part of the host compound selector, otherwise we can get
+    // incorrect results. E.g. `.ancestor .a, .ancestor .b` vs `.ancestor .a, .b`.
+    ancestors.forEach(escapedAncestor => {
+      const ancestor = _restoreSelector(escapedAncestor, ancestorPlaceholders);
+      return selectors.forEach(escapedSelector =>
+        result.push(`${ancestor} ${_restoreSelector(escapedSelector, selectorPlaceholders)}`));
+    });
+
+    return result.join(', ');
   }
 
   /** Adds base options common to all harness types. */
@@ -560,3 +576,34 @@ function _valueAsString(value: unknown) {
     return '{...}';
   }
 }
+
+/**
+ * Splits up a compound selector into its parts and escapes any quoted content. The quoted content
+ * has to be escaped, because it can contain commas which will throw throw us off when trying to
+ * split it.
+ * @param selector Selector to be split.
+ * @returns The escaped string where any quoted content is replaced with a placeholder. E.g.
+ * `[foo="bar"]` turns into `[foo=__cdkPlaceholder-0__]`. Use `_restoreSelector` to restore
+ * the placeholders.
+ */
+function _splitAndEscapeSelector(selector: string): [parts: string[], placeholders: string[]] {
+  const placeholders: string[] = [];
+
+  // Note that the regex doesn't account for nested quotes so something like `"ab'cd'e"` will be
+  // considered as two blocks. It's a bit of an edge case, but if we find that it's a problem,
+  // we can make it a bit smarter using a loop. Use this for now since it's more readable and
+  // compact. More complete implementation:
+  // https://github.com/angular/angular/blob/bd34bc9e89f18a/packages/compiler/src/shadow_css.ts#L655
+  const result = selector.replace(/(["'][^["']*["'])/g, (_, keep) => {
+    const replaceBy = `__cdkPlaceholder-${placeholders.length}__`;
+    placeholders.push(keep);
+    return replaceBy;
+  });
+
+  return [result.split(',').map(part => part.trim()), placeholders];
+}
+
+/** Restores a selector whose content was escaped in `_splitAndEscapeSelector`. */
+function _restoreSelector(selector: string, placeholders: string[]): string {
+  return selector.replace(/__cdkPlaceholder-(\d+)__/g, (_, index) => placeholders[+index]);
+}

src/cdk/testing/tests/cross-environment.spec.ts

@@ -246,6 +246,15 @@ export function crossEnvironmentSpecs(
       const subcomps = await harness.directAncestorSelectorSubcomponent();
       expect(subcomps.length).toBe(2);
     });
+
+    it('should handle a compound selector with an ancestor', async () => {
+      const elements = await harness.compoundSelectorWithAncestor();
+
+      expect(await parallel(() => elements.map(element => element.getText()))).toEqual([
+        'Div inside parent',
+        'Span inside parent'
+      ]);
+    });
   });
 
   describe('HarnessPredicate', () => {

src/cdk/testing/tests/harnesses/compound-selector-harness.ts

@@ -0,0 +1,21 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {ComponentHarness, HarnessPredicate} from '../../component-harness';
+
+export class CompoundSelectorHarness extends ComponentHarness {
+  static readonly hostSelector = '.some-div, .some-span';
+
+  static with(options = {}) {
+    return new HarnessPredicate(CompoundSelectorHarness, options);
+  }
+
+  async getText(): Promise<string> {
+    return (await this.host()).text();
+  }
+}

src/cdk/testing/tests/harnesses/main-component-harness.ts

@@ -8,6 +8,7 @@
 
 import {ComponentHarness} from '../../component-harness';
 import {TestElement, TestKey} from '../../test-element';
+import {CompoundSelectorHarness} from './compound-selector-harness';
 import {SubComponentHarness, SubComponentSpecialHarness} from './sub-component-harness';
 
 export class WrongComponentHarness extends ComponentHarness {
@@ -81,6 +82,8 @@ export class MainComponentHarness extends ComponentHarness {
       this.locatorForAll(SubComponentHarness.with({ancestor: '.other, .subcomponents'}));
   readonly directAncestorSelectorSubcomponent =
       this.locatorForAll(SubComponentHarness.with({ancestor: '.other >'}));
+  readonly compoundSelectorWithAncestor =
+      this.locatorForAll(CompoundSelectorHarness.with({ancestor: '.parent'}));
 
   readonly subcomponentHarnessesAndElements =
       this.locatorForAll('#counter', SubComponentHarness);

src/cdk/testing/tests/test-main-component.html

@@ -57,6 +57,12 @@ <h1 style="height: 100px; width: 200px;">Main Component</h1>
   <test-sub title="other 1"></test-sub>
   <test-sub title="other 2"></test-sub>
 </div>
+<div class="parent">
+  <div class="some-div">Div inside parent</div>
+  <div class="some-span">Span inside parent</div>
+</div>
+<div class="some-div">Div outside parent</div>
+<div class="some-span">Span outside parent</div>
 <div class="task-state-tests">
   <button (click)="runTaskOutsideZone()" id="task-state-test-trigger">
     Run task outside zone