refactor: make cross environment tests compatible with Vitest

Updates the cross environment harness tests to account for Vitest and exclude some that don't work with a virtual DOM.

Author: crisbeto

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

@@ -28,7 +28,7 @@ import {SubComponentHarness, SubComponentSpecialHarness} from './harnesses/sub-c
  * @param getHarnessLoaderFromEnvironment env specific closure to get HarnessLoader
  * @param getMainComponentHarnessFromEnvironment env specific closure to get MainComponentHarness
  * @param getActiveElementId env specific closure to get active element
- * @param skipAsyncTests skip tests that rely on Angular framework stabilization
+ * @param isVirtualDom Whether the tests are running inside a virtual DOM implementation.
  *
  * @docs-private
  */
@@ -38,7 +38,7 @@ export function crossEnvironmentSpecs(
   // Maybe we should introduce HarnessLoader.getActiveElement(): TestElement
   // then this 3rd parameter could get removed.
   getActiveElementId: () => Promise<string | null>,
-  skipAsyncTests: boolean = false,
+  isVirtualDom: boolean,
 ) {
   describe('HarnessLoader', () => {
     let loader: HarnessLoader;
@@ -57,15 +57,11 @@ export function crossEnvironmentSpecs(
     });
 
     it('should error after failing to find required HarnessLoader for child element', async () => {
-      try {
-        await loader.getChildLoader('error');
-        fail('Expected to throw');
-      } catch (e) {
-        expect((e as Error).message).toBe(
-          'Failed to find element matching one of the following queries:' +
-            '\n(HarnessLoader for element matching selector: "error")',
-        );
-      }
+      await expectRejection(
+        () => loader.getChildLoader('error'),
+        'Failed to find element matching one of the following queries:' +
+          '\n(HarnessLoader for element matching selector: "error")',
+      );
     });
 
     it('should find all HarnessLoaders for child elements', async () => {
@@ -81,14 +77,10 @@ export function crossEnvironmentSpecs(
 
     it('should throw if no matching component found for required harness', async () => {
       const countersLoader = await loader.getChildLoader('.counters');
-      try {
-        await countersLoader.getHarness(SubComponentHarness);
-        fail('Expected to throw');
-      } catch (e) {
-        expect((e as Error).message).toMatch(
-          /Failed to find element matching one of the following queries:\n\(_?SubComponentHarness with host element matching selector: "test-sub"\)/,
-        );
-      }
+      await expectRejection(
+        () => countersLoader.getHarness(SubComponentHarness),
+        /Failed to find element matching one of the following queries:\n\(_?SubComponentHarness with host element matching selector: "test-sub"\)/,
+      );
     });
 
     it('should get first matching component for optional harness', async () => {
@@ -128,15 +120,11 @@ export function crossEnvironmentSpecs(
     });
 
     it('should throw when failing to locate a required element based on CSS selector', async () => {
-      try {
-        await harness.errorItem();
-        fail('Expected to throw');
-      } catch (e) {
-        expect((e as Error).message).toBe(
-          'Failed to find element matching one of the following queries:' +
-            '\n(TestElement for element matching selector: "wrong locator")',
-        );
-      }
+      await expectRejection(
+        () => harness.errorItem(),
+        'Failed to find element matching one of the following queries:' +
+          '\n(TestElement for element matching selector: "wrong locator")',
+      );
     });
 
     it('should locate an optional element based on CSS selector', async () => {
@@ -163,15 +151,11 @@ export function crossEnvironmentSpecs(
     });
 
     it('should throw when failing to locate required sub harnesses', async () => {
-      try {
-        await harness.errorSubComponent();
-        fail('Expected to throw');
-      } catch (e) {
-        expect((e as Error).message).toBe(
-          'Failed to find element matching one of the following queries:' +
-            '\n(WrongComponentHarness with host element matching selector: "wrong-selector")',
-        );
-      }
+      await expectRejection(
+        () => harness.errorSubComponent(),
+        'Failed to find element matching one of the following queries:\n' +
+          '(WrongComponentHarness with host element matching selector: "wrong-selector")',
+      );
     });
 
     it('should locate optional sub harnesses', async () => {
@@ -220,14 +204,10 @@ export function crossEnvironmentSpecs(
     });
 
     it('should throw when failing to find required harness with ancestor selector restriction', async () => {
-      try {
-        await harness.requiredAncestorRestrictedMissingSubcomponent();
-        fail('Expected to throw');
-      } catch (e) {
-        expect((e as Error).message).toMatch(
-          /Failed to find element matching one of the following queries:\n\(_?SubComponentHarness with host element matching selector: "test-sub" satisfying the constraints: has ancestor matching selector ".not-found"\)/,
-        );
-      }
+      await expectRejection(
+        () => harness.requiredAncestorRestrictedMissingSubcomponent(),
+        /Failed to find element matching one of the following queries:\n\(_?SubComponentHarness with host element matching selector: "test-sub" satisfying the constraints: has ancestor matching selector ".not-found"\)/,
+      );
     });
 
     it('should load optional harness with ancestor selector restriction', async () => {
@@ -280,14 +260,12 @@ export function crossEnvironmentSpecs(
       expect(await element.getText()).toBe('Has comma inside attribute');
     });
 
-    if (!skipAsyncTests) {
-      it('should wait for async operation to complete', async () => {
-        const asyncCounter = await harness.asyncCounter();
-        expect(await asyncCounter.text()).toBe('5');
-        await harness.increaseCounter(3);
-        expect(await asyncCounter.text()).toBe('8');
-      });
-    }
+    it('should wait for async operation to complete', async () => {
+      const asyncCounter = await harness.asyncCounter();
+      expect(await asyncCounter.text()).toBe('5');
+      await harness.increaseCounter(3);
+      expect(await asyncCounter.text()).toBe('8');
+    });
   });
 
   describe('HarnessPredicate', () => {
@@ -327,14 +305,10 @@ export function crossEnvironmentSpecs(
     });
 
     it('should error if predicate does not match but a harness is required', async () => {
-      try {
-        await harness.requiredFourIteamToolsLists();
-        fail('Expected to throw');
-      } catch (e) {
-        expect((e as Error).message).toMatch(
-          /Failed to find element matching one of the following queries:\n\(_?SubComponentHarness with host element matching selector: "test-sub" satisfying the constraints: title = "List of test tools", item count = 4\)/,
-        );
-      }
+      await expectRejection(
+        () => harness.requiredFourIteamToolsLists(),
+        /Failed to find element matching one of the following queries:\n\(_?SubComponentHarness with host element matching selector: "test-sub" satisfying the constraints: title = "List of test tools", item count = 4\)/,
+      );
     });
 
     it('should have correct description for debugging', () => {
@@ -429,12 +403,14 @@ export function crossEnvironmentSpecs(
       expect(await modifiersResult.text()).toBe('shift---meta');
     });
 
-    it('should be able to click the center of an element', async () => {
-      const clickTest = await harness.clickTest();
-      const clickTestResult = await harness.clickTestResult();
-      await clickTest.click('center');
-      expect(await clickTestResult.text()).toBe('50-50');
-    });
+    if (!isVirtualDom) {
+      it('should be able to click the center of an element', async () => {
+        const clickTest = await harness.clickTest();
+        const clickTestResult = await harness.clickTestResult();
+        await clickTest.click('center');
+        expect(await clickTestResult.text()).toBe('50-50');
+      });
+    }
 
     it('should be able to click the center of an element with shift meta modifiers', async () => {
       const clickTest = await harness.clickTest();
@@ -491,35 +467,41 @@ export function crossEnvironmentSpecs(
       expect(await value.text()).toBe('Number value: -123');
     });
 
-    it('should be able to retrieve dimensions', async () => {
-      const dimensions = await (await harness.title()).getDimensions();
-      expect(dimensions).toEqual(jasmine.objectContaining({height: 100, width: 200}));
-    });
+    if (!isVirtualDom) {
+      it('should be able to retrieve dimensions', async () => {
+        const dimensions = await (await harness.title()).getDimensions();
+        expect(dimensions.height).toBe(100);
+        expect(dimensions.width).toBe(200);
+      });
+    }
 
-    it('should dispatch `mouseenter` and `mouseover` on hover', async () => {
-      const box = await harness.hoverTest();
-      let classAttr = await box.getAttribute('class');
-      expect(classAttr).not.toContain('hovering');
-      expect(classAttr).not.toContain('pointer-over');
-      await box.hover();
-      classAttr = await box.getAttribute('class');
-      expect(classAttr).toContain('hovering');
-      expect(classAttr).toContain('pointer-over');
-    });
+    // TODO(crisbeto): this _should_ work with a virtual DOM.
+    if (!isVirtualDom) {
+      it('should dispatch `mouseenter` and `mouseover` on hover', async () => {
+        const box = await harness.hoverTest();
+        let classAttr = await box.getAttribute('class');
+        expect(classAttr).not.toContain('hovering');
+        expect(classAttr).not.toContain('pointer-over');
+        await box.hover();
+        classAttr = (await box.getAttribute('class')) || '';
+        expect(classAttr).toContain('hovering');
+        expect(classAttr).toContain('pointer-over');
+      });
 
-    it('should dispatch `mouseleave` and `mouseout` on mouseAway', async () => {
-      const box = await harness.hoverTest();
-      let classAttr = await box.getAttribute('class');
-      expect(classAttr).not.toContain('hovering');
-      await box.hover();
-      classAttr = await box.getAttribute('class');
-      expect(classAttr).toContain('hovering');
-      expect(classAttr).toContain('pointer-over');
-      await box.mouseAway();
-      classAttr = await box.getAttribute('class');
-      expect(classAttr).not.toContain('hovering');
-      expect(classAttr).not.toContain('pointer-over');
-    });
+      it('should dispatch `mouseleave` and `mouseout` on mouseAway', async () => {
+        const box = await harness.hoverTest();
+        let classAttr = await box.getAttribute('class');
+        expect(classAttr).not.toContain('hovering');
+        await box.hover();
+        classAttr = await box.getAttribute('class');
+        expect(classAttr).toContain('hovering');
+        expect(classAttr).toContain('pointer-over');
+        await box.mouseAway();
+        classAttr = await box.getAttribute('class');
+        expect(classAttr).not.toContain('hovering');
+        expect(classAttr).not.toContain('pointer-over');
+      });
+    }
 
     it('should be able to getAttribute', async () => {
       const memoStr = `
@@ -559,17 +541,20 @@ export function crossEnvironmentSpecs(
       expect(await input.getProperty<string>('value')).toBe('hello');
     });
 
-    it('should be able to set the value of a select in single selection mode', async () => {
-      const [select, value, changeEventCounter] = await parallel(() => [
-        harness.singleSelect(),
-        harness.singleSelectValue(),
-        harness.singleSelectChangeEventCounter(),
-      ]);
+    // TODO(crisbeto): this _should_ work with a virtual DOM.
+    if (!isVirtualDom) {
+      it('should be able to set the value of a select in single selection mode', async () => {
+        const [select, value, changeEventCounter] = await parallel(() => [
+          harness.singleSelect(),
+          harness.singleSelectValue(),
+          harness.singleSelectChangeEventCounter(),
+        ]);
 
-      await select.selectOptions(2);
-      expect(await value.text()).toBe('Select: three');
-      expect(await changeEventCounter.text()).toBe('Change events: 1');
-    });
+        await select.selectOptions(2);
+        expect(await value.text()).toBe('Select: three');
+        expect(await changeEventCounter.text()).toBe('Change events: 1');
+      });
+    }
 
     it('should be able to set the value of a select in multi-selection mode', async () => {
       const [select, value, changeEventCounter] = await parallel(() => [
@@ -686,14 +671,10 @@ export function crossEnvironmentSpecs(
     });
 
     it('should throw when multiple queries fail to match', async () => {
-      try {
-        await harness.missingElementsAndHarnesses();
-        fail('Expected to throw.');
-      } catch (e) {
-        expect((e as Error).message).toMatch(
-          /Failed to find element matching one of the following queries:\n\(TestElement for element matching selector: ".not-found"\),\n\(_?SubComponentHarness with host element matching selector: "test-sub" satisfying the constraints: title = \/not found\/\)/,
-        );
-      }
+      await expectRejection(
+        () => harness.missingElementsAndHarnesses(),
+        /Failed to find element matching one of the following queries:\n\(TestElement for element matching selector: ".not-found"\),\n\(_?SubComponentHarness with host element matching selector: "test-sub" satisfying the constraints: title = \/not found\/\)/,
+      );
     });
 
     it('should check if element is focused', async () => {
@@ -737,3 +718,19 @@ export async function checkIsHarness<T extends ComponentHarness>(
     await finalCheck(result as T);
   }
 }
+
+async function expectRejection(fn: () => Promise<unknown>, expectedError: string | RegExp) {
+  let error = '<blank>';
+
+  try {
+    await fn();
+  } catch (e) {
+    error = (e as Error).message;
+  }
+
+  if (typeof expectedError === 'string') {
+    expect(error).toContain(expectedError);
+  } else {
+    expect(error).toMatch(expectedError);
+  }
+}

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

@@ -97,6 +97,7 @@ describe('ProtractorHarnessEnvironment', () => {
       () => ProtractorHarnessEnvironment.loader(),
       () => ProtractorHarnessEnvironment.loader().getHarness(MainComponentHarness),
       async () => (await activeElement()).getAttribute('id'),
+      false,
     ));
 });
 

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

@@ -189,5 +189,6 @@ describe('TestbedHarnessEnvironment', () => {
       () => TestbedHarnessEnvironment.loader(fixture),
       () => TestbedHarnessEnvironment.harnessForFixture(fixture, MainComponentHarness),
       () => Promise.resolve(document.activeElement!.id),
+      false,
     ));
 });

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

@@ -143,5 +143,6 @@ describe('WebDriverHarnessEnvironment', () => {
       () => SeleniumWebDriverHarnessEnvironment.loader(wd),
       () => SeleniumWebDriverHarnessEnvironment.loader(wd).getHarness(MainComponentHarness),
       async () => (await activeElement()).getAttribute('id'),
+      false,
     ));
 });