test(wtr): remove console spy util (#5512)

* test(wtr): update tests to use relative path to utils

instead of weird fake module

* test(wtr): revert removing TestUtils

* test(wtr): remove useless describe

There's no setup/teardown needed, it's a single test, and WTR provides per-file encapsulation

* test(wtr): replace IIFE script with module import

* test(wtr): clean up SSR execution script

working toward just importing and executing things, but not quite there yet

* test(wtr): always use DISABLE_SYNTHETIC

two env vars for the same goal is unnecessary

* test(wtr): enable all hydration tests

I think the last one was a concurrency related timeout,
which was previously addressed.

* test(wtr): remove side effect from signals helper

helper files shouldn't have side effects; all setup should be in the setup file

* test(wtr): import directly from file, not from barrel exporter

* test(wtr): change bulk export statement to individual exports

* test(wtr): remove unnecessary aria re-export

* test(wtr): fix a few more ARIA util imports

* chore: move comment for nicer aesthetic

* test(wtr): remove unused option

* test(wtr): fix another ARIA util import

* test(wtr): import directly from hooks file rather than utils

* test(wtr): import directly from signals file rather than utils

* test(wtr): import directly from console helper rather than utils

* test(wtr): import directly from constants helper rather than utils

* test(wtr): only import what is needed from LWC

* test(wtr): split lwc:dynamic load helpers into separate file

* test(wtr): avoid relying on global LWC

* test(wtr): remove unnecessary wrapping of hydration test config

* test(wtr): remove test-utils logic from resolveImport

no longer necessary

* test(wtr): move plugin from shared config to only config that uses it

* test(wtr): remove useless guid

all tests are run in isolation

* test(wtr): remove unnecessary test-utils global

* test(wtr): clean up component definition

* test(wtr): change component in test from IIFE to import

* test(wtr): shift logic out of wrapper into static test runner file

we want to keep the generated wrappers as thin as possible

and use regular js files as much as possible

* test(wtr): make test setup/teardown more idiomatic

* test(wtr): clean up module compilation

* chore(wtr): make dependency on @vitest/spy explicit

* test(wtr): remove console suppression

It was originally implemented to suppress distracting warnings in Karma tests,
but WTR's log output is different / managed differently.

* test(wtr): clean up names and comments

* test(wtr): move and rename file

* test(wtr): remove usage of global TestUtils from hydration tests

* test(wtr): remove LWC import from utils

It breaks hydration tests if there's an import from LWC.

* test(wtr): remove unused external deps

* test(wtr): use imports instead of jasmine globals

* chore(eslint): remove unused rule config

* fix: attribute cte syntax in integration tests

* test(wtr): fix case in import

mismatched case passes locally, but causes issues in CI

* test(wtr): re-enable tests that used to fail in CI

they should all work now

* test(wtr): enable browser logs

* test(wtr): name plugins

helpful when debugging

* test(wtr): rename variables and document functions for clarity

* test(wtr): convert promise chains to async/await

* test(wtr): load code from known url, rather than sniffing script tag

* test(wtr): convert LWC from iife to fake cjs

* test(wtr): remove unnecessary wrapping

* test(wtr): data can be data, not a function

* test(wtr): replace `evaluate` with functions that require less wrapping

* test(wtr): only fetch scripts once

* test(wtr): john was here

* test(wtr): add line breaks and vars for clarity

* test(wtr): rename variable

it's just one code blob now, not multiple scripts

* test(wtr): fix param pass through

* test(wtr): more cleanup

* test(wtr): remove outdated comment

* test(wtr): avoid shadowing global var

ensures we never accidentally use the wrong one

* test(wtr): enable custom element registry tests

* test(wtr): hoist function definition

* chore: use vitest spy instead of custom hack

* test(wtr): use vitest spy instead of custom

* test(wtr): convert test to async/await

* test(wtr): use vitest spy instead of custom

* test(wtr): move util into only file that uses it

---------

Co-authored-by: John Hefferman <jhefferman@salesforce.com>

Author: wjhsf

packages/@lwc/integration-not-karma/configs/plugins/serve-integration.js

@@ -32,12 +32,8 @@ const createRollupPlugin = (input, options) => {
         enableStaticContentOptimization: !DISABLE_STATIC_CONTENT_OPTIMIZATION,
         disableSyntheticShadowSupport: DISABLE_SYNTHETIC_SHADOW_SUPPORT_IN_COMPILER,
         apiVersion: API_VERSION,
-        modules: [
-            {
-                // Assume `ctx.path` is a component file, e.g. modules/x/foo/foo.js
-                dir: path.resolve(input, '../../..'),
-            },
-        ],
+        // Assume `ctx.path` is a component file, e.g. modules/x/foo/foo.js
+        modules: [{ dir: path.resolve(input, '../../..') }],
         ...options,
     });
 };
@@ -85,6 +81,7 @@ const transform = async (ctx) => {
         plugins: [customLwcRollupPlugin],
 
         external: [
+            '@vitest/spy',
             'lwc',
             'wire-service',
             // Some helper files export functions that mutate a global state. The setup file calls

packages/@lwc/integration-not-karma/configs/plugins/test-hydration.js

@@ -1,5 +1,5 @@
+import { spyOn } from '@vitest/spy';
 import * as LWC from 'lwc';
-import { spyConsole } from '../../helpers/console';
 import { setHooks } from '../../helpers/hooks';
 
 setHooks({ sanitizeHtmlContent: (content) => content });
@@ -8,6 +8,28 @@ function parseStringToDom(html) {
     return Document.parseHTMLUnsafe(html).body.firstChild;
 }
 
+/**
+ * A much simplified version of the spies originally used for Karma.
+ * Should probably be eventually replaced with individual spies.
+ */
+export function spyConsole() {
+    const log = spyOn(console, 'log');
+    const warn = spyOn(console, 'warn');
+    const error = spyOn(console, 'error');
+    return {
+        calls: {
+            log: log.mock.calls,
+            warn: warn.mock.calls,
+            error: error.mock.calls,
+        },
+        reset() {
+            log.mockRestore();
+            warn.mockRestore();
+            error.mockRestore();
+        },
+    };
+}
+
 function appendTestTarget(ssrText) {
     const div = document.createElement('div');
     const testTarget = parseStringToDom(ssrText);

packages/@lwc/integration-not-karma/helpers/console.js

@@ -9,7 +9,7 @@ import AttrChanged from 'x/attrChanged';
 import ReflectCamel from 'x/reflectCamel';
 import WithChildElmsHasSlot from 'x/withChildElmsHasSlot';
 import WithChildElmsHasSlotLight from 'x/withChildElmsHasSlotLight';
-import { spyConsole } from '../../../helpers/console.js';
+import { spyOn } from '@vitest/spy';
 import { USE_COMMENTS_FOR_FRAGMENT_BOOKENDS } from '../../../helpers/constants.js';
 
 const vFragBookend = USE_COMMENTS_FOR_FRAGMENT_BOOKENDS ? '<!---->' : '';
@@ -69,19 +69,9 @@ it('should create custom element if it exists before customElements.define', ()
 describe('non-empty custom element', () => {
     let consoleSpy;
     beforeEach(() => {
-        consoleSpy = spyConsole();
+        consoleSpy = spyOn(console, 'warn').mockImplementation(() => {});
     });
-    afterEach(() => {
-        consoleSpy.reset();
-    });
-
-    function expectWarnings(expectedWarnings) {
-        const observedWarnings = consoleSpy.calls.warn
-            .flat()
-            .map((err) => (err instanceof Error ? err.message : err));
-
-        expect(observedWarnings).toEqual(expectedWarnings);
-    }
+    afterEach(() => consoleSpy.mockRestore());
 
     it('should log error if non-native-shadow custom element has children', () => {
         const elm = document.createElement('test-custom-element-preexisting2');
@@ -93,11 +83,11 @@ describe('non-empty custom element', () => {
             class extends WithChildElms.CustomElementConstructor {}
         );
         if (process.env.NODE_ENV !== 'production' && !process.env.NATIVE_SHADOW) {
-            expectWarnings([
-                'Light DOM and synthetic shadow custom elements cannot have child nodes. Ensure the element is empty, including whitespace.',
-            ]);
+            expect(consoleSpy).toHaveBeenCalledExactlyOnceWith(
+                'Light DOM and synthetic shadow custom elements cannot have child nodes. Ensure the element is empty, including whitespace.'
+            );
         } else {
-            expectWarnings([]);
+            expect(consoleSpy).not.toHaveBeenCalled();
         }
 
         expect(elm.shadowRoot.childNodes.length).toBe(1);
@@ -123,11 +113,11 @@ describe('non-empty custom element', () => {
         );
 
         if (process.env.NODE_ENV !== 'production') {
-            expectWarnings([
-                'Light DOM and synthetic shadow custom elements cannot have child nodes. Ensure the element is empty, including whitespace.',
-            ]);
+            expect(consoleSpy).toHaveBeenCalledExactlyOnceWith(
+                'Light DOM and synthetic shadow custom elements cannot have child nodes. Ensure the element is empty, including whitespace.'
+            );
         } else {
-            expectWarnings([]);
+            expect(consoleSpy).not.toHaveBeenCalled();
         }
 
         expect(elm.innerHTML).toBe(`${vFragBookend}${vFragBookend}`);
@@ -143,11 +133,11 @@ describe('non-empty custom element', () => {
             class extends WithChildElmsHasSlot.CustomElementConstructor {}
         );
         if (process.env.NODE_ENV !== 'production' && !process.env.NATIVE_SHADOW) {
-            expectWarnings([
-                'Light DOM and synthetic shadow custom elements cannot have child nodes. Ensure the element is empty, including whitespace.',
-            ]);
+            expect(consoleSpy).toHaveBeenCalledExactlyOnceWith(
+                'Light DOM and synthetic shadow custom elements cannot have child nodes. Ensure the element is empty, including whitespace.'
+            );
         } else {
-            expectWarnings([]);
+            expect(consoleSpy).not.toHaveBeenCalled();
         }
 
         expect(elm.shadowRoot.childNodes.length).toBe(1);
@@ -174,11 +164,11 @@ describe('non-empty custom element', () => {
         );
 
         if (process.env.NODE_ENV === 'production') {
-            expectWarnings([]);
+            expect(consoleSpy).not.toHaveBeenCalled();
         } else {
-            expectWarnings([
-                'Found an existing shadow root for the custom element "Child". Call `hydrateComponent` instead.',
-            ]);
+            expect(consoleSpy).toHaveBeenCalledExactlyOnceWith(
+                'Found an existing shadow root for the custom element "Child". Call `hydrateComponent` instead.'
+            );
         }
         expect(elm.shadowRoot.innerHTML).toBe('<div></div>');
     });
@@ -194,11 +184,11 @@ describe('non-empty custom element', () => {
         document.body.appendChild(elm);
 
         if (process.env.NODE_ENV !== 'production' && !process.env.NATIVE_SHADOW) {
-            expectWarnings([
-                'Light DOM and synthetic shadow custom elements cannot have child nodes. Ensure the element is empty, including whitespace.',
-            ]);
+            expect(consoleSpy).toHaveBeenCalledExactlyOnceWith(
+                'Light DOM and synthetic shadow custom elements cannot have child nodes. Ensure the element is empty, including whitespace.'
+            );
         } else {
-            expectWarnings([]);
+            expect(consoleSpy).not.toHaveBeenCalled();
         }
 
         expect(elm.childNodes.length).toBe(1);

packages/@lwc/integration-not-karma/test/api/CustomElementConstructor-getter/index.spec.js

@@ -3,7 +3,7 @@ import { createElement } from 'lwc';
 import EventHandler from 'x/eventHandler';
 import EventHandlerOptions from 'x/eventHandlerOptions';
 import AdditionWhileDispatch from 'x/additionWhileDispatch';
-import { spyConsole } from '../../../helpers/console.js';
+import { spyOn } from '@vitest/spy';
 
 it('should be able to attach an event listener on the host element', () => {
     let thisValue;
@@ -39,12 +39,11 @@ it('should warn when passing a 3rd parameter to the event handler', () => {
 
 describe('event handler is not a function', () => {
     let consoleSpy;
-    beforeEach(() => {
-        consoleSpy = spyConsole();
-    });
-    afterEach(() => {
-        consoleSpy.reset();
+    beforeAll(() => {
+        consoleSpy = spyOn(console, 'error');
     });
+    afterEach(() => consoleSpy.mockReset());
+    afterAll(() => consoleSpy.mockRestore());
 
     it('should log an error if event handler is not a function', () => {
         const elm = createElement('x-event-handler', { is: EventHandler });
@@ -54,11 +53,10 @@ describe('event handler is not a function', () => {
         }).toThrowCallbackReactionError(/Expected an EventListener but received undefined/);
 
         if (process.env.NODE_ENV === 'production') {
-            expect(consoleSpy.calls.error.length).toEqual(0);
+            expect(consoleSpy).not.toHaveBeenCalled();
         } else {
-            expect(consoleSpy.calls.error.length).toEqual(1);
-            expect(consoleSpy.calls.error[0][0].message).toContain(
-                'Invalid second argument for this.addEventListener()'
+            expect(consoleSpy).toHaveBeenCalledExactlyOnceWith(
+                expect.stringContaining('Invalid second argument for this.addEventListener()')
             );
         }
     });

packages/@lwc/integration-not-karma/test/component/LightningElement.addEventListener/index.spec.js

@@ -10,7 +10,7 @@ import LwcDynamicSlotted from 'x/lwcDynamicSlotted';
 import ContainerFoo from 'x/containerFoo';
 import ContainerBar from 'x/containerBar';
 
-import { spyConsole } from '../../../helpers/console.js';
+import { spyOn } from '@vitest/spy';
 import { registerForLoad, clearRegister } from '../../../helpers/dynamic-loader.js';
 
 beforeEach(() => {
@@ -116,12 +116,10 @@ it('should not cache DOM elements using lwc:dynamic', async () => {
 
 describe('slotted content using lwc:dynamic', () => {
     let consoleSpy;
-    beforeEach(() => {
-        consoleSpy = spyConsole();
-    });
-    afterEach(() => {
-        consoleSpy.reset();
+    beforeAll(() => {
+        consoleSpy = spyOn(console, 'error');
     });
+    afterAll(() => consoleSpy.mockRestore());
 
     it('reallocate slotted content after changing constructor', async () => {
         const elm = createElement('x-dynamic-slotted', { is: LwcDynamicSlotted });
@@ -136,7 +134,7 @@ describe('slotted content using lwc:dynamic', () => {
             // `slot-bar` is not rendered in synthetic shadow
             expect(elm.shadowRoot.querySelector('[data-id="slot-bar"]').assignedSlot).toBe(null);
         }
-        expect(consoleSpy.calls.error.length).toEqual(0);
+        expect(consoleSpy).not.toHaveBeenCalled();
 
         // Swap construstor and check if nodes have been reallocated.
         elm.ctor = ContainerBar;
@@ -150,7 +148,7 @@ describe('slotted content using lwc:dynamic', () => {
             // `slot-foo` is not rendered in synthetic shadow
             expect(elm.shadowRoot.querySelector('[data-id="slot-foo"]').assignedSlot).toBe(null);
         }
-        expect(consoleSpy.calls.error.length).toEqual(0);
+        expect(consoleSpy).not.toHaveBeenCalled();
     });
 });
 
@@ -242,12 +240,10 @@ it('should not cache DOM elements', async () => {
 
 describe('slotted content', () => {
     let consoleSpy;
-    beforeEach(() => {
-        consoleSpy = spyConsole();
-    });
-    afterEach(() => {
-        consoleSpy.reset();
+    beforeAll(() => {
+        consoleSpy = spyOn(console, 'error');
     });
+    afterAll(() => consoleSpy.mockRestore());
 
     it('reallocate slotted content after changing constructor', async () => {
         const elm = createElement('x-dynamic-slotted', { is: DynamicSlotted });
@@ -262,7 +258,7 @@ describe('slotted content', () => {
             // `slot-bar` is not rendered in synthetic shadow
             expect(elm.shadowRoot.querySelector('[data-id="slot-bar"]').assignedSlot).toBe(null);
         }
-        expect(consoleSpy.calls.error.length).toEqual(0);
+        expect(consoleSpy).not.toHaveBeenCalled();
 
         // Swap constructor and check if nodes have been reallocated.
         elm.ctor = ContainerBar;
@@ -276,6 +272,6 @@ describe('slotted content', () => {
             // `slot-foo` is not rendered in synthetic shadow
             expect(elm.shadowRoot.querySelector('[data-id="slot-foo"]').assignedSlot).toBe(null);
         }
-        expect(consoleSpy.calls.error.length).toEqual(0);
+        expect(consoleSpy).not.toHaveBeenCalled();
     });
 });