diff --git a/eslint.config.mjs b/eslint.config.mjs index b47c158219..494c669bdc 100644 --- a/eslint.config.mjs +++ b/eslint.config.mjs @@ -361,16 +361,9 @@ export default tseslint.config( globals: { lwcRuntimeFlags: true, process: true, - TestUtils: true, ...globals.browser, - ...globals.jasmine, }, }, - - rules: { - 'no-var': 'off', - 'prefer-rest-params': 'off', - }, }, { files: ['packages/@lwc/integration-karma/**'], @@ -385,11 +378,6 @@ export default tseslint.config( ...globals.jasmine, }, }, - - rules: { - 'no-var': 'off', - 'prefer-rest-params': 'off', - }, }, { files: ['packages/@lwc/synthetic-shadow/**'], diff --git a/packages/@lwc/integration-karma/test-hydration/context/index.spec.js b/packages/@lwc/integration-karma/test-hydration/context/index.spec.js index ed71537fac..4e8ffea3c7 100644 --- a/packages/@lwc/integration-karma/test-hydration/context/index.spec.js +++ b/packages/@lwc/integration-karma/test-hydration/context/index.spec.js @@ -1,12 +1,4 @@ export default { - // server is expected to generate the same console error as the client - expectedSSRConsoleCalls: { - error: [], - warn: [ - 'Attempted to connect to trusted context but received the following error', - 'Multiple contexts of the same variety were provided. Only the first context will be used.', - ], - }, requiredFeatureFlags: ['ENABLE_EXPERIMENTAL_SIGNALS'], snapshot(target) { const grandparent = target.shadowRoot.querySelector('x-grandparent'); diff --git a/packages/@lwc/integration-karma/test/template-expressions/errors/x/throwDuringCallChild/throwDuringCallChild.html b/packages/@lwc/integration-karma/test/template-expressions/errors/x/throwDuringCallChild/throwDuringCallChild.html index 0df4ddecff..863a84e5a9 100644 --- a/packages/@lwc/integration-karma/test/template-expressions/errors/x/throwDuringCallChild/throwDuringCallChild.html +++ b/packages/@lwc/integration-karma/test/template-expressions/errors/x/throwDuringCallChild/throwDuringCallChild.html @@ -1,3 +1,3 @@ \ No newline at end of file diff --git a/packages/@lwc/integration-karma/test/template-expressions/errors/x/undefinedMemberExpressionObjChild/undefinedMemberExpressionObjChild.html b/packages/@lwc/integration-karma/test/template-expressions/errors/x/undefinedMemberExpressionObjChild/undefinedMemberExpressionObjChild.html index b53700e8b4..555b5177c3 100644 --- a/packages/@lwc/integration-karma/test/template-expressions/errors/x/undefinedMemberExpressionObjChild/undefinedMemberExpressionObjChild.html +++ b/packages/@lwc/integration-karma/test/template-expressions/errors/x/undefinedMemberExpressionObjChild/undefinedMemberExpressionObjChild.html @@ -1,3 +1,3 @@ \ No newline at end of file diff --git a/packages/@lwc/integration-karma/test/template-expressions/smoke-test/x/test/test.html b/packages/@lwc/integration-karma/test/template-expressions/smoke-test/x/test/test.html index 7ec1c634d0..566bc15e1c 100644 --- a/packages/@lwc/integration-karma/test/template-expressions/smoke-test/x/test/test.html +++ b/packages/@lwc/integration-karma/test/template-expressions/smoke-test/x/test/test.html @@ -1,3 +1,3 @@ \ No newline at end of file diff --git a/packages/@lwc/integration-not-karma/configs/base.js b/packages/@lwc/integration-not-karma/configs/base.js index ea4e4459ff..57714539f4 100644 --- a/packages/@lwc/integration-not-karma/configs/base.js +++ b/packages/@lwc/integration-not-karma/configs/base.js @@ -1,6 +1,5 @@ import { join } from 'node:path'; import { LWC_VERSION } from '@lwc/shared'; -import { importMapsPlugin } from '@web/dev-server-import-maps'; import * as options from '../helpers/options.js'; const pluck = (obj, keys) => Object.fromEntries(keys.map((k) => [k, obj[k]])); @@ -28,16 +27,15 @@ export default { // time out before they receive focus. But it also makes the full suite take 3x longer to run... // Potential workaround: https://github.com/modernweb-dev/web/issues/2588 concurrency: 1, - filterBrowserLogs: () => false, nodeResolve: true, rootDir: join(import.meta.dirname, '..'), + staticLogging: true, + debug: true, plugins: [ - importMapsPlugin({ inject: { importMap: { imports: { lwc: './mocks/lwc.js' } } } }), { + name: 'lwc-base-plugin', resolveImport({ source }) { - if (source === 'test-utils') { - return '/helpers/utils.js'; - } else if (source === 'wire-service') { + if (source === 'wire-service') { // To serve files outside the web root (e.g. node_modules in the monorepo root), // @web/dev-server provides this "magic" path. It's hacky of us to use it directly. // `/__wds-outside-root__/${depth}/` === '../'.repeat(depth) diff --git a/packages/@lwc/integration-not-karma/configs/integration.js b/packages/@lwc/integration-not-karma/configs/integration.js index b49ae009e2..ccdecadb09 100644 --- a/packages/@lwc/integration-not-karma/configs/integration.js +++ b/packages/@lwc/integration-not-karma/configs/integration.js @@ -1,3 +1,4 @@ +import { importMapsPlugin } from '@web/dev-server-import-maps'; import baseConfig from './base.js'; import testPlugin from './plugins/serve-integration.js'; @@ -5,23 +6,13 @@ import testPlugin from './plugins/serve-integration.js'; export default { ...baseConfig, files: [ - // FIXME: These tests are just symlinks to integration-karma for now so the git diff smaller - 'test/**/*.spec.js', - - // Hacky nonsense highly tailored to Karma - '!test/custom-elements-registry/index.spec.js', - - // Logging mismatches - '!test/component/LightningElement.addEventListener/index.spec.js', - - // Implement objectContaining / arrayWithExactContents - '!test/profiler/mutation-logging/index.spec.js', - - // Broken in CI? - '!test/lwc-on/index.spec.js', - '!test/api/sanitizeAttribute/index.spec.js', - '!test/template-expressions/errors/index.spec.js', - '!test/template-expressions/smoke-test/index.spec.js', + 'test/lwc-on/index.spec.js', + 'test/template-expressions/errors/index.spec.js', + 'test/template-expressions/smoke-test/index.spec.js', + ], + plugins: [ + ...baseConfig.plugins, + importMapsPlugin({ inject: { importMap: { imports: { lwc: './mocks/lwc.js' } } } }), + testPlugin, ], - plugins: [...baseConfig.plugins, testPlugin], }; diff --git a/packages/@lwc/integration-not-karma/configs/plugins/serve-hydration.js b/packages/@lwc/integration-not-karma/configs/plugins/serve-hydration.js index 0ae204ef46..f994798524 100644 --- a/packages/@lwc/integration-not-karma/configs/plugins/serve-hydration.js +++ b/packages/@lwc/integration-not-karma/configs/plugins/serve-hydration.js @@ -18,9 +18,8 @@ lwcSsr.setHooks({ }); const ROOT_DIR = path.join(import.meta.dirname, '../..'); - -let guid = 0; -const COMPONENT_UNDER_TEST = 'main'; +const COMPONENT_NAME = 'x-main'; +const COMPONENT_ENTRYPOINT = 'x/main/main.js'; // Like `fs.existsSync` but async async function exists(path) { @@ -32,13 +31,14 @@ async function exists(path) { } } -async function getCompiledModule(dir, compileForSSR) { +async function compileModule(input, targetSSR, format) { + const modulesDir = path.join(ROOT_DIR, input.slice(0, -COMPONENT_ENTRYPOINT.length)); const bundle = await rollup({ - input: path.join(dir, 'x', COMPONENT_UNDER_TEST, `${COMPONENT_UNDER_TEST}.js`), + input, plugins: [ lwcRollupPlugin({ - targetSSR: !!compileForSSR, - modules: [{ dir: path.join(ROOT_DIR, dir) }], + targetSSR, + modules: [{ dir: modulesDir }], experimentalDynamicComponent: { loader: fileURLToPath(new URL('../../helpers/loader.js', import.meta.url)), strict: true, @@ -50,7 +50,7 @@ async function getCompiledModule(dir, compileForSSR) { }), ], - external: ['lwc', '@lwc/ssr-runtime', 'test-utils', '@test/loader'], // @todo: add ssr modules for test-utils and @test/loader + external: ['lwc', '@lwc/ssr-runtime'], onwarn(warning, warn) { // Ignore warnings from our own Rollup plugin @@ -61,102 +61,49 @@ async function getCompiledModule(dir, compileForSSR) { }); const { output } = await bundle.generate({ - format: 'iife', - name: 'Main', + format, + name: 'Component', globals: { lwc: 'LWC', '@lwc/ssr-runtime': 'LWC', - 'test-utils': 'TestUtils', }, }); return output[0].code; } -function throwOnUnexpectedConsoleCalls(runnable, expectedConsoleCalls = {}) { - // The console is shared between the VM and the main realm. Here we ensure that known warnings - // are ignored and any others cause an explicit error. - const methods = ['error', 'warn', 'log', 'info']; - const originals = {}; - for (const method of methods) { - // eslint-disable-next-line no-console - originals[method] = console[method]; - // eslint-disable-next-line no-console - console[method] = function (error) { - if ( - method === 'warn' && - // This eslint warning is a false positive due to RegExp.prototype.test - // eslint-disable-next-line vitest/no-conditional-tests - /Cannot set property "(inner|outer)HTML"/.test(error?.message) - ) { - return; - } else if ( - expectedConsoleCalls[method]?.some((matcher) => error.message.includes(matcher)) - ) { - return; - } - - throw new Error(`Unexpected console.${method} call: ${error}`); - }; - } - try { - return runnable(); - } finally { - Object.assign(console, originals); - } -} - /** - * This is the function that takes SSR bundle code and test config, constructs a script that will - * run in a separate JS runtime environment with its own global scope. The `context` object - * (defined at the top of this file) is passed in as the global scope for that script. The script - * runs, utilizing the `LWC` object that we've attached to the global scope, it sets a - * new value (the rendered markup) to `globalThis.moduleOutput`, which corresponds to - * `context.moduleOutput in this file's scope. - * - * So, script runs, generates markup, & we get that markup out and return it for use - * in client-side tests. + * This function takes a path to a component definition and a config file and returns the + * SSR-generated markup for the component. It does so by compiling the component and then + * running a script in a separate JS runtime environment to render it. */ -async function getSsrCode(moduleCode, testConfig, filePath, expectedSSRConsoleCalls) { +async function getSsrMarkup(componentEntrypoint, configPath) { + const componentIife = await compileModule(componentEntrypoint, !ENGINE_SERVER, 'iife'); + // To minimize the amount of code in the generated script, ideally we'd do `import Component` + // and delegate the bundling to the loader. However, that's complicated to configure and using + // imports with vm.Script/vm.Module is still experimental, so we use an IIFE for simplicity. + // Additionally, we could import LWC, but the framework requires configuration before each test + // (setHooks/setFeatureFlagForTest), so instead we configure it once in the top-level context + // and inject it as a global variable. const script = new vm.Script( - `(() => { - ${testConfig} - ${moduleCode} + `(async () => { + const {default: config} = await import('./${configPath}'); + ${componentIife /* var Component = ... */} return LWC.renderComponent( - 'x-${COMPONENT_UNDER_TEST}-${guid++}', - Main, + '${COMPONENT_NAME}', + Component, config.props || {}, false, 'sync' ); })()`, - { filename: `[SSR] ${filePath}` } + { + filename: `[SSR] ${configPath}`, + importModuleDynamically: vm.constants.USE_MAIN_CONTEXT_DEFAULT_LOADER, + } ); - return throwOnUnexpectedConsoleCalls( - () => script.runInContext(vm.createContext({ LWC: lwcSsr })), - expectedSSRConsoleCalls - ); -} - -async function getTestConfig(input) { - const bundle = await rollup({ - input, - external: ['lwc', 'test-utils', '@test/loader'], - }); - - const { output } = await bundle.generate({ - format: 'iife', - globals: { - lwc: 'LWC', - 'test-utils': 'TestUtils', - }, - name: 'config', - }); - - const { code } = output[0]; - - return code; + return await script.runInContext(vm.createContext({ LWC: lwcSsr })); } async function existsUp(dir, file) { @@ -172,45 +119,32 @@ async function existsUp(dir, file) { * Hydration test `index.spec.js` files are actually config files, not spec files. * This function wraps those configs in the test code to be executed. */ -async function wrapHydrationTest(filePath) { - const { - default: { expectedSSRConsoleCalls, requiredFeatureFlags }, - } = await import(path.join(ROOT_DIR, filePath)); +async function wrapHydrationTest(configPath) { + const { default: config } = await import(path.join(ROOT_DIR, configPath)); try { - requiredFeatureFlags?.forEach((featureFlag) => { + config.requiredFeatureFlags?.forEach((featureFlag) => { lwcSsr.setFeatureFlagForTest(featureFlag, true); }); - const suiteDir = path.dirname(filePath); - // You can add an `.only` file alongside an `index.spec.js` file to make it `fdescribe()` + const suiteDir = path.dirname(configPath); + const componentEntrypoint = path.join(suiteDir, COMPONENT_ENTRYPOINT); + // You can add an `.only` file alongside an `index.spec.js` file to make the test focused const onlyFileExists = await existsUp(suiteDir, '.only'); + const ssrOutput = await getSsrMarkup(componentEntrypoint, configPath); - const componentDefCSR = await getCompiledModule(suiteDir, false); - const componentDefSSR = ENGINE_SERVER - ? componentDefCSR - : await getCompiledModule(suiteDir, true); - const ssrOutput = await getSsrCode( - componentDefSSR, - await getTestConfig(filePath), - filePath, - expectedSSRConsoleCalls - ); - - // FIXME: can we turn these IIFEs into ESM imports? return ` import * as LWC from 'lwc'; - import { runTest } from '/helpers/test-hydrate.js'; - import config from '/${filePath}?original=1'; - ${onlyFileExists ? 'it.only' : 'it'}('${filePath}', async () => { - const ssrRendered = ${JSON.stringify(ssrOutput) /* escape quotes */}; - // Component code, IIFE set as Main - ${componentDefCSR}; - return await runTest(ssrRendered, Main, config); - }); + import { runTest } from '/configs/plugins/test-hydration.js'; + runTest( + '/${configPath}?original=1', + '/${componentEntrypoint}', + ${JSON.stringify(ssrOutput) /* escape quotes */}, + ${onlyFileExists} + ); `; } finally { - requiredFeatureFlags?.forEach((featureFlag) => { + config.requiredFeatureFlags?.forEach((featureFlag) => { lwcSsr.setFeatureFlagForTest(featureFlag, false); }); } @@ -218,6 +152,7 @@ async function wrapHydrationTest(filePath) { /** @type {import('@web/dev-server-core').Plugin} */ export default { + name: 'lwc-hydration-plugin', async serve(ctx) { // Hydration test "index.spec.js" files are actually just config files. // They don't directly define the tests. Instead, when we request the file, @@ -226,6 +161,8 @@ export default { // to return the file unmodified. if (ctx.path.endsWith('.spec.js') && !ctx.query.original) { return await wrapHydrationTest(ctx.path.slice(1)); // remove leading / + } else if (ctx.path.endsWith('/' + COMPONENT_ENTRYPOINT)) { + return await compileModule(ctx.path.slice(1) /* remove leading / */, false, 'esm'); } }, }; diff --git a/packages/@lwc/integration-not-karma/configs/plugins/serve-integration.js b/packages/@lwc/integration-not-karma/configs/plugins/serve-integration.js index fdac34287f..3864925f65 100644 --- a/packages/@lwc/integration-not-karma/configs/plugins/serve-integration.js +++ b/packages/@lwc/integration-not-karma/configs/plugins/serve-integration.js @@ -84,12 +84,9 @@ const transform = async (ctx) => { cache, plugins: [customLwcRollupPlugin], - // Rollup should not attempt to resolve the engine and the test utils, Karma takes care of injecting it - // globally in the page before running the tests. external: [ 'lwc', 'wire-service', - '@test/loader', // Some helper files export functions that mutate a global state. The setup file calls // some of those functions and does not get bundled. Including the helper files in the // bundle would create a separate global state, causing tests to fail. We don't need to @@ -119,6 +116,7 @@ const transform = async (ctx) => { /** @type {import('@web/dev-server-core').Plugin} */ export default { + name: 'lwc-integration-plugin', async serve(ctx) { if (ctx.path.endsWith('.spec.js')) { return await transform(ctx); diff --git a/packages/@lwc/integration-not-karma/configs/plugins/test-hydration.js b/packages/@lwc/integration-not-karma/configs/plugins/test-hydration.js new file mode 100644 index 0000000000..96d0371034 --- /dev/null +++ b/packages/@lwc/integration-not-karma/configs/plugins/test-hydration.js @@ -0,0 +1,77 @@ +import * as LWC from 'lwc'; +import { spyConsole } from '../../helpers/console'; +import { setHooks } from '../../helpers/hooks'; + +setHooks({ sanitizeHtmlContent: (content) => content }); + +function parseStringToDom(html) { + return Document.parseHTMLUnsafe(html).body.firstChild; +} + +function appendTestTarget(ssrText) { + const div = document.createElement('div'); + const testTarget = parseStringToDom(ssrText); + div.appendChild(testTarget); + document.body.appendChild(div); + return div; +} + +function setFeatureFlags(requiredFeatureFlags, value) { + requiredFeatureFlags?.forEach((featureFlag) => { + LWC.setFeatureFlagForTest(featureFlag, value); + }); +} + +// Must be sync to properly register tests; async behavior can happen in before/after blocks +export function runTest(configPath, componentPath, ssrRendered, focused) { + const test = focused ? it.only : it; + const description = new URL(configPath, location.href).pathname; + let consoleSpy; + let testConfig; + let Component; + + beforeAll(async () => { + testConfig = await import(configPath); + Component = await import(componentPath); + setFeatureFlags(testConfig.requiredFeatureFlags, true); + }); + + beforeEach(async () => { + consoleSpy = spyConsole(); + }); + + afterEach(() => { + consoleSpy.reset(); + }); + + afterAll(() => { + setFeatureFlags(testConfig.requiredFeatureFlags, false); + }); + + test(description, async () => { + const container = appendTestTarget(ssrRendered); + const selector = container.firstChild.tagName.toLowerCase(); + let target = container.querySelector(selector); + + if (testConfig.test) { + const snapshot = testConfig.snapshot ? testConfig.snapshot(target) : {}; + + const props = testConfig.props || {}; + const clientProps = testConfig.clientProps || props; + + LWC.hydrateComponent(target, Component, clientProps); + + // let's select again the target, it should be the same elements as in the snapshot + target = container.querySelector(selector); + await testConfig.test(target, snapshot, consoleSpy.calls); + } else if (testConfig.advancedTest) { + await testConfig.advancedTest(target, { + Component, + hydrateComponent: LWC.hydrateComponent.bind(LWC), + consoleSpy, + container, + selector, + }); + } + }); +} diff --git a/packages/@lwc/integration-not-karma/helpers/jasmine.js b/packages/@lwc/integration-not-karma/helpers/jasmine.js new file mode 100644 index 0000000000..8a459204af --- /dev/null +++ b/packages/@lwc/integration-not-karma/helpers/jasmine.js @@ -0,0 +1,37 @@ +import { spyOn, fn } from '@vitest/spy'; + +/** + * Adds the jasmine interfaces we use in the Karma tests to a Vitest spy. + * Should ultimately be removed and tests updated to use Vitest spies. + * @param {import('@vitest/spy').MockInstance} + */ +function jasmineSpyAdapter(spy) { + Object.defineProperties(spy, { + and: { get: () => spy }, + calls: { get: () => spy.mock.calls }, + returnValue: { value: () => spy.mockReturnValue() }, + // calling mockImplementation() with nothing restores the original + callThrough: { value: () => spy.mockImplementation() }, + callFake: { value: (impl) => spy.mockImplementation(impl) }, + }); + + Object.defineProperties(spy.mock.calls, { + // Must be non-enumerable for equality checks to work on array literal expected values + allArgs: { value: () => spy.mock.calls }, + count: { value: () => spy.mock.calls.length }, + reset: { value: () => spy.mockReset() }, + argsFor: { value: (index) => spy.mock.calls.at(index) }, + }); + + return spy; +} + +export const jasmineSpyOn = (object, prop) => jasmineSpyAdapter(spyOn(object, prop)); +export const jasmine = { + any: expect.any, + arrayWithExactContents: () => { + throw new Error('TODO: jasmine.arrayWithExactContents'); + }, + createSpy: (name, impl) => jasmineSpyAdapter(fn(impl)), + objectContaining: expect.objectContaining, +}; diff --git a/packages/@lwc/integration-not-karma/helpers/reporting-control.js b/packages/@lwc/integration-not-karma/helpers/reporting-control.js new file mode 100644 index 0000000000..390b2b6679 --- /dev/null +++ b/packages/@lwc/integration-not-karma/helpers/reporting-control.js @@ -0,0 +1,18 @@ +import { __unstable__ReportingControl } from 'lwc'; + +/** + * + * @param dispatcher + * @param runtimeEvents List of runtime events to filter by. If no list is provided, all events will be dispatched. + */ +export function attachReportingControlDispatcher(dispatcher, runtimeEvents) { + __unstable__ReportingControl.attachDispatcher((eventName, payload) => { + if (!runtimeEvents || runtimeEvents.includes(eventName)) { + dispatcher(eventName, payload); + } + }); +} + +export function detachReportingControlDispatcher() { + __unstable__ReportingControl.detachDispatcher(); +} diff --git a/packages/@lwc/integration-not-karma/helpers/setup.js b/packages/@lwc/integration-not-karma/helpers/setup.js index 07f7f27d89..691332359c 100644 --- a/packages/@lwc/integration-not-karma/helpers/setup.js +++ b/packages/@lwc/integration-not-karma/helpers/setup.js @@ -1,17 +1,11 @@ // This import ensures that the global `Mocha` object is present for mutation. import { JestAsymmetricMatchers, JestChaiExpect, JestExtend } from '@vitest/expect'; import * as chai from 'chai'; -import { spyOn, fn } from '@vitest/spy'; import { registerCustomMatchers } from './matchers/index.js'; -import * as TestUtils from './utils.js'; import { initSignals } from './signals.js'; initSignals(); -// FIXME: As a relic of the Karma tests, some test files rely on the global object, -// rather than importing from `test-utils`. -window.TestUtils = TestUtils; - // allows using expect.extend instead of chai.use to extend plugins chai.use(JestExtend); // adds all jest matchers to expect @@ -20,44 +14,8 @@ chai.use(JestChaiExpect); chai.use(JestAsymmetricMatchers); // add our custom matchers chai.use(registerCustomMatchers); - -/** - * Adds the jasmine interfaces we use in the Karma tests to a Vitest spy. - * Should ultimately be removed and tests updated to use Vitest spies. - * @param {import('@vitest/spy').MockInstance} - */ -function jasmineSpyAdapter(spy) { - Object.defineProperties(spy, { - and: { get: () => spy }, - calls: { get: () => spy.mock.calls }, - returnValue: { value: () => spy.mockReturnValue() }, - // calling mockImplementation() with nothing restores the original - callThrough: { value: () => spy.mockImplementation() }, - callFake: { value: (impl) => spy.mockImplementation(impl) }, - }); - - Object.defineProperties(spy.mock.calls, { - // Must be non-enumerable for equality checks to work on array literal expected values - allArgs: { value: () => spy.mock.calls }, - count: { value: () => spy.mock.calls.length }, - reset: { value: () => spy.mockReset() }, - argsFor: { value: (index) => spy.mock.calls.at(index) }, - }); - - return spy; -} - // expose so we don't need to import `expect` in every test file globalThis.expect = chai.expect; -globalThis.spyOn = (object, prop) => jasmineSpyAdapter(spyOn(object, prop)); -globalThis.jasmine = { - any: expect.any, - arrayWithExactContents: () => { - throw new Error('TODO: jasmine.arrayWithExactContents'); - }, - createSpy: (name, impl) => jasmineSpyAdapter(fn(impl)), - objectContaining: expect.objectContaining, -}; /** * `@web/test-runner-mocha`'s autorun.js file inlines its own copy of mocha, and there's no direct diff --git a/packages/@lwc/integration-not-karma/helpers/test-hydrate.js b/packages/@lwc/integration-not-karma/helpers/test-hydrate.js deleted file mode 100644 index 95c8823860..0000000000 --- a/packages/@lwc/integration-not-karma/helpers/test-hydrate.js +++ /dev/null @@ -1,60 +0,0 @@ -import * as LWC from 'lwc'; -import { spyConsole } from './console'; -import { setHooks } from './hooks'; - -setHooks({ sanitizeHtmlContent: (content) => content }); - -function parseStringToDom(html) { - return Document.parseHTMLUnsafe(html).body.firstChild; -} - -function appendTestTarget(ssrText) { - const div = document.createElement('div'); - const testTarget = parseStringToDom(ssrText); - div.appendChild(testTarget); - document.body.appendChild(div); - return div; -} - -function setFeatureFlags(requiredFeatureFlags, value) { - requiredFeatureFlags?.forEach((featureFlag) => { - LWC.setFeatureFlagForTest(featureFlag, value); - }); -} - -async function runTest(ssrRendered, Component, testConfig) { - const container = appendTestTarget(ssrRendered); - const selector = container.firstChild.tagName.toLowerCase(); - let target = container.querySelector(selector); - - let testResult; - const consoleSpy = spyConsole(); - setFeatureFlags(testConfig.requiredFeatureFlags, true); - - if (testConfig.test) { - const snapshot = testConfig.snapshot ? testConfig.snapshot(target) : {}; - - const props = testConfig.props || {}; - const clientProps = testConfig.clientProps || props; - - LWC.hydrateComponent(target, Component, clientProps); - - // let's select again the target, it should be the same elements as in the snapshot - target = container.querySelector(selector); - testResult = await testConfig.test(target, snapshot, consoleSpy.calls); - } else if (testConfig.advancedTest) { - testResult = await testConfig.advancedTest(target, { - Component, - hydrateComponent: LWC.hydrateComponent.bind(LWC), - consoleSpy, - container, - selector, - }); - } - - consoleSpy.reset(); - - return testResult; -} - -export { runTest }; diff --git a/packages/@lwc/integration-not-karma/helpers/utils.js b/packages/@lwc/integration-not-karma/helpers/utils.js index 21abab22ca..ef6fde2c77 100644 --- a/packages/@lwc/integration-not-karma/helpers/utils.js +++ b/packages/@lwc/integration-not-karma/helpers/utils.js @@ -1,7 +1,6 @@ /* * An as yet uncategorized mishmash of helpers, relics of Karma */ -import { __unstable__ReportingControl } from 'lwc'; // Listen for errors thrown directly by the callback function directErrorListener(callback) { @@ -47,23 +46,6 @@ export function customElementCallbackReactionErrorListener(callback) { : windowErrorListener(callback); } -/** - * - * @param dispatcher - * @param runtimeEvents List of runtime events to filter by. If no list is provided, all events will be dispatched. - */ -export function attachReportingControlDispatcher(dispatcher, runtimeEvents) { - __unstable__ReportingControl.attachDispatcher((eventName, payload) => { - if (!runtimeEvents || runtimeEvents.includes(eventName)) { - dispatcher(eventName, payload); - } - }); -} - -export function detachReportingControlDispatcher() { - __unstable__ReportingControl.detachDispatcher(); -} - export function extractDataIds(root) { const nodes = {}; diff --git a/packages/@lwc/integration-not-karma/package.json b/packages/@lwc/integration-not-karma/package.json index 2618714eab..fb25ede17b 100644 --- a/packages/@lwc/integration-not-karma/package.json +++ b/packages/@lwc/integration-not-karma/package.json @@ -16,6 +16,7 @@ "@lwc/synthetic-shadow": "8.22.1", "@types/chai": "^5.2.2", "@types/jasmine": "^5.1.9", + "@vitest/spy": "^3.2.4", "@web/dev-server-import-maps": "^0.2.1", "@web/dev-server-rollup": "^0.6.4", "@web/test-runner": "^0.20.2", diff --git a/packages/@lwc/integration-not-karma/test-hydration/attributes/falsy-mismatch/index.spec.js b/packages/@lwc/integration-not-karma/test-hydration/attributes/falsy-mismatch/index.spec.js index fc730181aa..7fe011220f 100644 --- a/packages/@lwc/integration-not-karma/test-hydration/attributes/falsy-mismatch/index.spec.js +++ b/packages/@lwc/integration-not-karma/test-hydration/attributes/falsy-mismatch/index.spec.js @@ -1,3 +1,5 @@ +import { expectConsoleCallsDev } from '../../../helpers/utils.js'; + export default { props: { isFalse: false, @@ -28,7 +30,7 @@ export default { expect(divs[i].getAttribute('data-foo')).toEqual(expectedAttrValues[i]); } - TestUtils.expectConsoleCallsDev(consoleCalls, { + expectConsoleCallsDev(consoleCalls, { error: [], warn: [ 'Hydration attribute mismatch on:
- rendered on server: data-foo=null - expected on client: data-foo="undefined"', diff --git a/packages/@lwc/integration-not-karma/test-hydration/context/index.spec.js b/packages/@lwc/integration-not-karma/test-hydration/context/index.spec.js index ed71537fac..572e73f46d 100644 --- a/packages/@lwc/integration-not-karma/test-hydration/context/index.spec.js +++ b/packages/@lwc/integration-not-karma/test-hydration/context/index.spec.js @@ -1,3 +1,5 @@ +import { expectConsoleCalls } from '../../helpers/utils.js'; + export default { // server is expected to generate the same console error as the client expectedSSRConsoleCalls: { @@ -40,7 +42,7 @@ export default { // Expect an error as one context was generated twice. // Expect an error as one context was malformed (did not define connectContext or disconnectContext methods). // Expect server/client context output parity (no hydration warnings) - TestUtils.expectConsoleCalls(consoleCalls, { + expectConsoleCalls(consoleCalls, { error: [], warn: [ 'Attempted to connect to trusted context but received the following error', diff --git a/packages/@lwc/integration-not-karma/test-hydration/errors/already-hydrated/index.spec.js b/packages/@lwc/integration-not-karma/test-hydration/errors/already-hydrated/index.spec.js index 251c761b6e..63eb4fdac4 100644 --- a/packages/@lwc/integration-not-karma/test-hydration/errors/already-hydrated/index.spec.js +++ b/packages/@lwc/integration-not-karma/test-hydration/errors/already-hydrated/index.spec.js @@ -1,3 +1,5 @@ +import { expectConsoleCalls } from '../../../helpers/utils.js'; + export default { advancedTest(target, { Component, hydrateComponent, consoleSpy }) { hydrateComponent(target, Component, {}); @@ -6,7 +8,7 @@ export default { const consoleCalls = consoleSpy.calls; - TestUtils.expectConsoleCalls(consoleCalls, { + expectConsoleCalls(consoleCalls, { warn: ['"hydrateComponent" expects an element that is not hydrated.'], }); }, diff --git a/packages/@lwc/integration-not-karma/test-hydration/inner-outer-html/index.spec.js b/packages/@lwc/integration-not-karma/test-hydration/inner-outer-html/index.spec.js index 4d584c357a..3ae85ba4db 100644 --- a/packages/@lwc/integration-not-karma/test-hydration/inner-outer-html/index.spec.js +++ b/packages/@lwc/integration-not-karma/test-hydration/inner-outer-html/index.spec.js @@ -1,7 +1,9 @@ +import { extractDataIds } from '../../helpers/utils.js'; + export default { props: {}, advancedTest(target, { consoleSpy }) { - const ids = Object.entries(TestUtils.extractDataIds(target)).filter( + const ids = Object.entries(extractDataIds(target)).filter( ([id]) => !id.endsWith('.shadowRoot') ); for (const [id, node] of ids) { diff --git a/packages/@lwc/integration-not-karma/test-hydration/light-dom/scoped-styles/deduped-scoped-styles/index.spec.js b/packages/@lwc/integration-not-karma/test-hydration/light-dom/scoped-styles/deduped-scoped-styles/index.spec.js index 84218066a9..c2aad762a0 100644 --- a/packages/@lwc/integration-not-karma/test-hydration/light-dom/scoped-styles/deduped-scoped-styles/index.spec.js +++ b/packages/@lwc/integration-not-karma/test-hydration/light-dom/scoped-styles/deduped-scoped-styles/index.spec.js @@ -1,7 +1,9 @@ +import { expectConsoleCalls } from '../../../../helpers/utils.js'; + export default { test(target, snapshot, consoleCalls) { // W-19087941: Expect no errors or warnings, hydration or otherwise - TestUtils.expectConsoleCalls(consoleCalls, { + expectConsoleCalls(consoleCalls, { error: [], warn: [], }); diff --git a/packages/@lwc/integration-not-karma/test-hydration/mismatches/attrs-compatibility/index.spec.js b/packages/@lwc/integration-not-karma/test-hydration/mismatches/attrs-compatibility/index.spec.js index e59544e875..144234c381 100644 --- a/packages/@lwc/integration-not-karma/test-hydration/mismatches/attrs-compatibility/index.spec.js +++ b/packages/@lwc/integration-not-karma/test-hydration/mismatches/attrs-compatibility/index.spec.js @@ -1,3 +1,5 @@ +import { expectConsoleCallsDev } from '../../../helpers/utils.js'; + export default { props: { ssr: true, @@ -18,7 +20,7 @@ export default { expect(p.getAttribute('data-same')).toBe('same-value'); expect(p.getAttribute('data-another-diff')).toBe('client-val'); - TestUtils.expectConsoleCallsDev(consoleCalls, { + expectConsoleCallsDev(consoleCalls, { error: [], warn: [ 'Hydration attribute mismatch on:

- rendered on server: title="ssr-title" - expected on client: title="client-title"', diff --git a/packages/@lwc/integration-not-karma/test-hydration/mismatches/attrs-expression/index.spec.js b/packages/@lwc/integration-not-karma/test-hydration/mismatches/attrs-expression/index.spec.js index 00585b1f87..d1de3fb3a4 100644 --- a/packages/@lwc/integration-not-karma/test-hydration/mismatches/attrs-expression/index.spec.js +++ b/packages/@lwc/integration-not-karma/test-hydration/mismatches/attrs-expression/index.spec.js @@ -1,3 +1,5 @@ +import { expectConsoleCallsDev } from '../../../helpers/utils.js'; + export default { props: { foo: 'server', @@ -17,7 +19,7 @@ export default { expect(div.getAttribute('data-foo')).toBe('client'); expect(div.getAttribute('data-static')).toBe('same-value'); - TestUtils.expectConsoleCallsDev(consoleCalls, { + expectConsoleCallsDev(consoleCalls, { error: [], warn: [ 'Hydration attribute mismatch on:

- rendered on server: data-foo="server" - expected on client: data-foo="client"', diff --git a/packages/@lwc/integration-not-karma/test-hydration/mismatches/class-attr/dynamic-different/index.spec.js b/packages/@lwc/integration-not-karma/test-hydration/mismatches/class-attr/dynamic-different/index.spec.js index 57e77fa42c..9f30773d04 100644 --- a/packages/@lwc/integration-not-karma/test-hydration/mismatches/class-attr/dynamic-different/index.spec.js +++ b/packages/@lwc/integration-not-karma/test-hydration/mismatches/class-attr/dynamic-different/index.spec.js @@ -1,3 +1,5 @@ +import { expectConsoleCallsDev } from '../../../../helpers/utils.js'; + export default { props: { classes: 'c1 c2 c3', @@ -18,7 +20,7 @@ export default { expect(p).not.toBe(snapshots.p); expect(p.className).not.toBe(snapshots.classes); - TestUtils.expectConsoleCallsDev(consoleCalls, { + expectConsoleCallsDev(consoleCalls, { error: [], warn: [ 'Hydration attribute mismatch on:

- rendered on server: class="c1 c2 c3" - expected on client: class="c2 c3 c4"', diff --git a/packages/@lwc/integration-not-karma/test-hydration/mismatches/class-attr/dynamic-empty-in-ssr-null-string-in-client/index.spec.js b/packages/@lwc/integration-not-karma/test-hydration/mismatches/class-attr/dynamic-empty-in-ssr-null-string-in-client/index.spec.js index d9662f2dd1..d314088097 100644 --- a/packages/@lwc/integration-not-karma/test-hydration/mismatches/class-attr/dynamic-empty-in-ssr-null-string-in-client/index.spec.js +++ b/packages/@lwc/integration-not-karma/test-hydration/mismatches/class-attr/dynamic-empty-in-ssr-null-string-in-client/index.spec.js @@ -1,3 +1,5 @@ +import { expectConsoleCallsDev } from '../../../../helpers/utils.js'; + // SSR has no class at all, whereas the client has `class="null"`. // This is to test if hydration is smart enough to recognize the difference between a null // attribute and the literal string "null". @@ -21,7 +23,7 @@ export default { expect(p).not.toBe(snapshots.p); expect(p.className).not.toBe(snapshots.className); - TestUtils.expectConsoleCallsDev(consoleCalls, { + expectConsoleCallsDev(consoleCalls, { error: [], warn: [ 'Hydration attribute mismatch on:

- rendered on server: class="" - expected on client: class="null"', diff --git a/packages/@lwc/integration-not-karma/test-hydration/mismatches/class-attr/dynamic-null-string-in-ssr-empty-in-client/index.spec.js b/packages/@lwc/integration-not-karma/test-hydration/mismatches/class-attr/dynamic-null-string-in-ssr-empty-in-client/index.spec.js index ba5521c8b8..65b3eb3256 100644 --- a/packages/@lwc/integration-not-karma/test-hydration/mismatches/class-attr/dynamic-null-string-in-ssr-empty-in-client/index.spec.js +++ b/packages/@lwc/integration-not-karma/test-hydration/mismatches/class-attr/dynamic-null-string-in-ssr-empty-in-client/index.spec.js @@ -1,3 +1,5 @@ +import { expectConsoleCallsDev } from '../../../../helpers/utils.js'; + // SSR has `class="null"`, whereas the client has no class at all. // This is to test if hydration is smart enough to recognize the difference between a null // attribute and the literal string "null". @@ -21,7 +23,7 @@ export default { expect(p).not.toBe(snapshots.p); expect(p.className).not.toBe(snapshots.className); - TestUtils.expectConsoleCallsDev(consoleCalls, { + expectConsoleCallsDev(consoleCalls, { error: [], warn: [ 'Hydration attribute mismatch on:

- rendered on server: class="null" - expected on client: class=""', diff --git a/packages/@lwc/integration-not-karma/test-hydration/mismatches/class-attr/dynamic-same-different-order-does-not-throw/index.spec.js b/packages/@lwc/integration-not-karma/test-hydration/mismatches/class-attr/dynamic-same-different-order-does-not-throw/index.spec.js index d60cecb71e..56d60f9fc7 100644 --- a/packages/@lwc/integration-not-karma/test-hydration/mismatches/class-attr/dynamic-same-different-order-does-not-throw/index.spec.js +++ b/packages/@lwc/integration-not-karma/test-hydration/mismatches/class-attr/dynamic-same-different-order-does-not-throw/index.spec.js @@ -1,3 +1,5 @@ +import { expectConsoleCallsDev } from '../../../../helpers/utils.js'; + export default { props: { classes: 'c1 c2 c3', @@ -18,7 +20,7 @@ export default { expect(p).toBe(snapshots.p); expect(p.className).toBe(snapshots.classes); - TestUtils.expectConsoleCallsDev(consoleCalls, { + expectConsoleCallsDev(consoleCalls, { error: [], warn: [], }); diff --git a/packages/@lwc/integration-not-karma/test-hydration/mismatches/class-attr/empty-string-on-client-nonempty-on-server/index.spec.js b/packages/@lwc/integration-not-karma/test-hydration/mismatches/class-attr/empty-string-on-client-nonempty-on-server/index.spec.js index 06fa19d842..238a20847b 100644 --- a/packages/@lwc/integration-not-karma/test-hydration/mismatches/class-attr/empty-string-on-client-nonempty-on-server/index.spec.js +++ b/packages/@lwc/integration-not-karma/test-hydration/mismatches/class-attr/empty-string-on-client-nonempty-on-server/index.spec.js @@ -1,3 +1,5 @@ +import { expectConsoleCallsDev } from '../../../../helpers/utils.js'; + export default { props: { classes: 'yolo', @@ -17,7 +19,7 @@ export default { expect(p).not.toBe(snapshots.p); expect(p.className).toBe(''); - TestUtils.expectConsoleCallsDev(consoleCalls, { + expectConsoleCallsDev(consoleCalls, { error: [], warn: [ 'Hydration attribute mismatch on:

- rendered on server: class="yolo" - expected on client: class=""', diff --git a/packages/@lwc/integration-not-karma/test-hydration/mismatches/class-attr/empty-string-on-server-nonempty-on-client/index.spec.js b/packages/@lwc/integration-not-karma/test-hydration/mismatches/class-attr/empty-string-on-server-nonempty-on-client/index.spec.js index cf15d194a8..ca71555d77 100644 --- a/packages/@lwc/integration-not-karma/test-hydration/mismatches/class-attr/empty-string-on-server-nonempty-on-client/index.spec.js +++ b/packages/@lwc/integration-not-karma/test-hydration/mismatches/class-attr/empty-string-on-server-nonempty-on-client/index.spec.js @@ -1,3 +1,5 @@ +import { expectConsoleCallsDev } from '../../../../helpers/utils.js'; + export default { props: { classes: '', @@ -17,7 +19,7 @@ export default { expect(p).not.toBe(snapshots.p); expect(p.className).toBe('yolo'); - TestUtils.expectConsoleCallsDev(consoleCalls, { + expectConsoleCallsDev(consoleCalls, { error: [], warn: [ 'Hydration attribute mismatch on:

- rendered on server: class="" - expected on client: class="yolo"', diff --git a/packages/@lwc/integration-not-karma/test-hydration/mismatches/class-attr/empty-string/index.spec.js b/packages/@lwc/integration-not-karma/test-hydration/mismatches/class-attr/empty-string/index.spec.js index 6766da610d..b986510723 100644 --- a/packages/@lwc/integration-not-karma/test-hydration/mismatches/class-attr/empty-string/index.spec.js +++ b/packages/@lwc/integration-not-karma/test-hydration/mismatches/class-attr/empty-string/index.spec.js @@ -1,3 +1,5 @@ +import { expectConsoleCallsDev } from '../../../../helpers/utils.js'; + export default { props: { classes: '', @@ -14,7 +16,7 @@ export default { expect(p).toBe(snapshots.p); expect(p.className).toBe(snapshots.classes); - TestUtils.expectConsoleCallsDev(consoleCalls, { + expectConsoleCallsDev(consoleCalls, { error: [], warn: [], }); diff --git a/packages/@lwc/integration-not-karma/test-hydration/mismatches/class-attr/extra-class-from-client/index.spec.js b/packages/@lwc/integration-not-karma/test-hydration/mismatches/class-attr/extra-class-from-client/index.spec.js index c212253276..300c373aae 100644 --- a/packages/@lwc/integration-not-karma/test-hydration/mismatches/class-attr/extra-class-from-client/index.spec.js +++ b/packages/@lwc/integration-not-karma/test-hydration/mismatches/class-attr/extra-class-from-client/index.spec.js @@ -1,3 +1,5 @@ +import { expectConsoleCallsDev } from '../../../../helpers/utils.js'; + export default { props: { ssr: true, @@ -19,7 +21,7 @@ export default { expect(p.className).not.toBe(snapshots.classes); expect(p.className).toBe('c1 c2 c3'); - TestUtils.expectConsoleCallsDev(consoleCalls, { + expectConsoleCallsDev(consoleCalls, { error: [], warn: [ 'Hydration attribute mismatch on:

- rendered on server: class="c1 c3" - expected on client: class="c1 c2 c3"', diff --git a/packages/@lwc/integration-not-karma/test-hydration/mismatches/class-attr/extra-class-from-server/index.spec.js b/packages/@lwc/integration-not-karma/test-hydration/mismatches/class-attr/extra-class-from-server/index.spec.js index 8a4869acb9..7bec4446a3 100644 --- a/packages/@lwc/integration-not-karma/test-hydration/mismatches/class-attr/extra-class-from-server/index.spec.js +++ b/packages/@lwc/integration-not-karma/test-hydration/mismatches/class-attr/extra-class-from-server/index.spec.js @@ -1,3 +1,5 @@ +import { expectConsoleCallsDev } from '../../../../helpers/utils.js'; + export default { props: { ssr: true, @@ -19,7 +21,7 @@ export default { expect(p.className).not.toBe(snapshots.classes); expect(p.className).toBe('c1 c3'); - TestUtils.expectConsoleCallsDev(consoleCalls, { + expectConsoleCallsDev(consoleCalls, { error: [], warn: [ 'Hydration attribute mismatch on:

- rendered on server: class="c1 c2 c3" - expected on client: class="c1 c3"', diff --git a/packages/@lwc/integration-not-karma/test-hydration/mismatches/class-attr/only-present-in-ssr/index.spec.js b/packages/@lwc/integration-not-karma/test-hydration/mismatches/class-attr/only-present-in-ssr/index.spec.js index 6915109a14..366280e61f 100644 --- a/packages/@lwc/integration-not-karma/test-hydration/mismatches/class-attr/only-present-in-ssr/index.spec.js +++ b/packages/@lwc/integration-not-karma/test-hydration/mismatches/class-attr/only-present-in-ssr/index.spec.js @@ -1,3 +1,5 @@ +import { expectConsoleCallsDev } from '../../../../helpers/utils.js'; + export default { advancedTest(target, { Component, hydrateComponent, consoleSpy }) { // This simulates a condition where the server-rendered markup has @@ -11,7 +13,7 @@ export default { hydrateComponent(target, Component, {}); const consoleCalls = consoleSpy.calls; - TestUtils.expectConsoleCallsDev(consoleCalls, { + expectConsoleCallsDev(consoleCalls, { error: [], warn: [ 'Hydration attribute mismatch on: - rendered on server: class="foo" - expected on client: class=""', diff --git a/packages/@lwc/integration-not-karma/test-hydration/mismatches/class-attr/same-different-order/index.spec.js b/packages/@lwc/integration-not-karma/test-hydration/mismatches/class-attr/same-different-order/index.spec.js index ea7c87d29f..920742d515 100644 --- a/packages/@lwc/integration-not-karma/test-hydration/mismatches/class-attr/same-different-order/index.spec.js +++ b/packages/@lwc/integration-not-karma/test-hydration/mismatches/class-attr/same-different-order/index.spec.js @@ -1,3 +1,5 @@ +import { expectConsoleCallsDev } from '../../../../helpers/utils.js'; + export default { props: { ssr: true, @@ -25,7 +27,7 @@ export default { expect(p).not.toBe(snapshots.p); expect(p.className).toBe('c1 c2 c3'); - TestUtils.expectConsoleCallsDev(consoleCalls, { + expectConsoleCallsDev(consoleCalls, { error: [], warn: [ 'Hydration attribute mismatch on:

- rendered on server: class="c3 c2 c1" - expected on client: class="c1 c2 c3"', diff --git a/packages/@lwc/integration-not-karma/test-hydration/mismatches/comment-instead-of-text/index.spec.js b/packages/@lwc/integration-not-karma/test-hydration/mismatches/comment-instead-of-text/index.spec.js index dfc078cd9f..2c2b60f320 100644 --- a/packages/@lwc/integration-not-karma/test-hydration/mismatches/comment-instead-of-text/index.spec.js +++ b/packages/@lwc/integration-not-karma/test-hydration/mismatches/comment-instead-of-text/index.spec.js @@ -1,3 +1,5 @@ +import { expectConsoleCallsDev } from '../../../helpers/utils.js'; + export default { props: { showAsText: true, @@ -17,7 +19,7 @@ export default { expect(comment.nodeType).toBe(Node.COMMENT_NODE); expect(comment.nodeValue).toBe(snapshots.text.nodeValue); - TestUtils.expectConsoleCallsDev(consoleCalls, { + expectConsoleCallsDev(consoleCalls, { error: [], warn: [ 'Hydration node mismatch on: #comment - rendered on server: #text - expected on client: #comment', diff --git a/packages/@lwc/integration-not-karma/test-hydration/mismatches/different-lwc-inner-html/index.spec.js b/packages/@lwc/integration-not-karma/test-hydration/mismatches/different-lwc-inner-html/index.spec.js index 461ce34b5a..ef8ecc792e 100644 --- a/packages/@lwc/integration-not-karma/test-hydration/mismatches/different-lwc-inner-html/index.spec.js +++ b/packages/@lwc/integration-not-karma/test-hydration/mismatches/different-lwc-inner-html/index.spec.js @@ -1,3 +1,5 @@ +import { expectConsoleCallsDev } from '../../../helpers/utils.js'; + export default { props: { content: '

test-content

', @@ -21,7 +23,7 @@ export default { expect(p).not.toBe(snapshot.p); expect(p.textContent).toBe('different-content'); - TestUtils.expectConsoleCallsDev(consoleCalls, { + expectConsoleCallsDev(consoleCalls, { error: [], warn: [ 'Hydration innerHTML mismatch on:
- rendered on server:

test-content

- expected on client:

different-content

', diff --git a/packages/@lwc/integration-not-karma/test-hydration/mismatches/display-errors-attrs-class-style/index.spec.js b/packages/@lwc/integration-not-karma/test-hydration/mismatches/display-errors-attrs-class-style/index.spec.js index 13167f0a20..1d39e94e19 100644 --- a/packages/@lwc/integration-not-karma/test-hydration/mismatches/display-errors-attrs-class-style/index.spec.js +++ b/packages/@lwc/integration-not-karma/test-hydration/mismatches/display-errors-attrs-class-style/index.spec.js @@ -1,3 +1,5 @@ +import { expectConsoleCallsDev } from '../../../helpers/utils.js'; + export default { props: { classes: 'ssr-class', @@ -23,7 +25,7 @@ export default { expect(p.getAttribute('style')).toBe('background-color: blue;'); expect(p.getAttribute('data-attrs')).toBe('client-attrs'); - TestUtils.expectConsoleCallsDev(consoleCalls, { + expectConsoleCallsDev(consoleCalls, { error: [], warn: [ 'Hydration attribute mismatch on:

- rendered on server: data-attrs="ssr-attrs" - expected on client: data-attrs="client-attrs"', diff --git a/packages/@lwc/integration-not-karma/test-hydration/mismatches/dynamic-component/index.spec.js b/packages/@lwc/integration-not-karma/test-hydration/mismatches/dynamic-component/index.spec.js index 658111cb33..74ddba5889 100644 --- a/packages/@lwc/integration-not-karma/test-hydration/mismatches/dynamic-component/index.spec.js +++ b/packages/@lwc/integration-not-karma/test-hydration/mismatches/dynamic-component/index.spec.js @@ -1,3 +1,5 @@ +import { expectConsoleCallsDev } from '../../../helpers/utils.js'; + export default { props: { ctor: 'server', @@ -17,7 +19,7 @@ export default { // Client side constructor expect(target.shadowRoot.querySelector('x-client')).not.toBeNull(); - TestUtils.expectConsoleCallsDev(consoleCalls, { + expectConsoleCallsDev(consoleCalls, { error: [], warn: [ 'Hydration node mismatch on: - rendered on server: - expected on client: ', diff --git a/packages/@lwc/integration-not-karma/test-hydration/mismatches/element-instead-of-textNode/index.spec.js b/packages/@lwc/integration-not-karma/test-hydration/mismatches/element-instead-of-textNode/index.spec.js index 4e928f311c..bd82a6efb4 100644 --- a/packages/@lwc/integration-not-karma/test-hydration/mismatches/element-instead-of-textNode/index.spec.js +++ b/packages/@lwc/integration-not-karma/test-hydration/mismatches/element-instead-of-textNode/index.spec.js @@ -1,3 +1,5 @@ +import { expectConsoleCallsDev } from '../../../helpers/utils.js'; + export default { props: { showAsText: false, @@ -19,7 +21,7 @@ export default { expect(text.nodeType).toBe(Node.TEXT_NODE); - TestUtils.expectConsoleCallsDev(consoleCalls, { + expectConsoleCallsDev(consoleCalls, { error: [], warn: [ 'Hydration node mismatch on: #text - rendered on server: - expected on client: #text', diff --git a/packages/@lwc/integration-not-karma/test-hydration/mismatches/favors-client-side-comment/index.spec.js b/packages/@lwc/integration-not-karma/test-hydration/mismatches/favors-client-side-comment/index.spec.js index f875575bfd..a83893a26d 100644 --- a/packages/@lwc/integration-not-karma/test-hydration/mismatches/favors-client-side-comment/index.spec.js +++ b/packages/@lwc/integration-not-karma/test-hydration/mismatches/favors-client-side-comment/index.spec.js @@ -1,3 +1,5 @@ +import { expectConsoleCallsDev } from '../../../helpers/utils.js'; + export default { props: { showFirstComment: true, @@ -18,7 +20,7 @@ export default { expect(comment.nodeValue).not.toBe(snapshots.commentText); expect(comment.nodeValue).toBe('second'); - TestUtils.expectConsoleCallsDev(consoleCalls, { + expectConsoleCallsDev(consoleCalls, { error: [], warn: [ 'Hydration comment mismatch on: #comment - rendered on server: first - expected on client: second', diff --git a/packages/@lwc/integration-not-karma/test-hydration/mismatches/favors-client-side-text/index.spec.js b/packages/@lwc/integration-not-karma/test-hydration/mismatches/favors-client-side-text/index.spec.js index 188978106f..1a8e675d19 100644 --- a/packages/@lwc/integration-not-karma/test-hydration/mismatches/favors-client-side-text/index.spec.js +++ b/packages/@lwc/integration-not-karma/test-hydration/mismatches/favors-client-side-text/index.spec.js @@ -1,3 +1,5 @@ +import { expectConsoleCallsDev } from '../../../helpers/utils.js'; + export default { props: { greeting: 'hello!', @@ -18,14 +20,14 @@ export default { expect(p.firstChild).toBe(snapshots.text); expect(p.textContent).toBe('bye!'); if (process.env.DISABLE_STATIC_CONTENT_OPTIMIZATION) { - TestUtils.expectConsoleCallsDev(consoleCalls, { + expectConsoleCallsDev(consoleCalls, { error: [], warn: [ 'Hydration text content mismatch on: #text - rendered on server: hello! - expected on client: bye!', ], }); } else { - TestUtils.expectConsoleCallsDev(consoleCalls, { + expectConsoleCallsDev(consoleCalls, { error: [], warn: [ 'Hydration text content mismatch on:

- rendered on server: hello! - expected on client: bye!', diff --git a/packages/@lwc/integration-not-karma/test-hydration/mismatches/host-mutation-in-connected-callback/attr-mutated-class-mismatch/index.spec.js b/packages/@lwc/integration-not-karma/test-hydration/mismatches/host-mutation-in-connected-callback/attr-mutated-class-mismatch/index.spec.js index 63d8c26a72..1ecc068a05 100644 --- a/packages/@lwc/integration-not-karma/test-hydration/mismatches/host-mutation-in-connected-callback/attr-mutated-class-mismatch/index.spec.js +++ b/packages/@lwc/integration-not-karma/test-hydration/mismatches/host-mutation-in-connected-callback/attr-mutated-class-mismatch/index.spec.js @@ -1,3 +1,5 @@ +import { expectConsoleCallsDev } from '../../../../helpers/utils.js'; + export default { props: { ssr: true, @@ -24,7 +26,7 @@ export default { expect(child.getAttribute('data-mutatis')).toBe('mutandis'); expect(child.getAttribute('class')).toBe('is-client'); - TestUtils.expectConsoleCallsDev(consoleCalls, { + expectConsoleCallsDev(consoleCalls, { error: [], warn: [ 'Hydration attribute mismatch on: - rendered on server: class="is-server" - expected on client: class="is-client"', diff --git a/packages/@lwc/integration-not-karma/test-hydration/mismatches/host-mutation-in-connected-callback/attr/index.spec.js b/packages/@lwc/integration-not-karma/test-hydration/mismatches/host-mutation-in-connected-callback/attr/index.spec.js index 00065f381a..d59747490a 100644 --- a/packages/@lwc/integration-not-karma/test-hydration/mismatches/host-mutation-in-connected-callback/attr/index.spec.js +++ b/packages/@lwc/integration-not-karma/test-hydration/mismatches/host-mutation-in-connected-callback/attr/index.spec.js @@ -1,3 +1,5 @@ +import { expectConsoleCallsDev } from '../../../../helpers/utils.js'; + export default { props: {}, snapshot(target) { @@ -14,7 +16,7 @@ export default { expect(child.getAttribute('data-foo')).toBe('bar'); expect(child.getAttribute('data-mutatis')).toBe('mutandis'); - TestUtils.expectConsoleCallsDev(consoleCalls, { + expectConsoleCallsDev(consoleCalls, { warn: [], error: [], }); diff --git a/packages/@lwc/integration-not-karma/test-hydration/mismatches/host-mutation-in-connected-callback/class-mutated-attr-mismatch/index.spec.js b/packages/@lwc/integration-not-karma/test-hydration/mismatches/host-mutation-in-connected-callback/class-mutated-attr-mismatch/index.spec.js index a63010e4d2..2ceea2c5b7 100644 --- a/packages/@lwc/integration-not-karma/test-hydration/mismatches/host-mutation-in-connected-callback/class-mutated-attr-mismatch/index.spec.js +++ b/packages/@lwc/integration-not-karma/test-hydration/mismatches/host-mutation-in-connected-callback/class-mutated-attr-mismatch/index.spec.js @@ -1,3 +1,5 @@ +import { expectConsoleCallsDev } from '../../../../helpers/utils.js'; + export default { props: { ssr: true, @@ -23,7 +25,7 @@ export default { expect(child.getAttribute('class')).toBe('static mutatis'); expect(child.getAttribute('data-mismatched-attr')).toBe('is-client'); - TestUtils.expectConsoleCallsDev(consoleCalls, { + expectConsoleCallsDev(consoleCalls, { error: [], warn: [ 'Hydration attribute mismatch on: - rendered on server: data-mismatched-attr="is-server" - expected on client: data-mismatched-attr="is-client"', diff --git a/packages/@lwc/integration-not-karma/test-hydration/mismatches/host-mutation-in-connected-callback/class/index.spec.js b/packages/@lwc/integration-not-karma/test-hydration/mismatches/host-mutation-in-connected-callback/class/index.spec.js index 2804139cdb..3124ee87e7 100644 --- a/packages/@lwc/integration-not-karma/test-hydration/mismatches/host-mutation-in-connected-callback/class/index.spec.js +++ b/packages/@lwc/integration-not-karma/test-hydration/mismatches/host-mutation-in-connected-callback/class/index.spec.js @@ -1,3 +1,5 @@ +import { expectConsoleCallsDev } from '../../../../helpers/utils.js'; + export default { props: {}, snapshot(target) { @@ -14,7 +16,7 @@ export default { 'static mutatis' ); - TestUtils.expectConsoleCallsDev(consoleCalls, { + expectConsoleCallsDev(consoleCalls, { warn: [], error: [], }); diff --git a/packages/@lwc/integration-not-karma/test-hydration/mismatches/host-mutation-in-connected-callback/style/index.spec.js b/packages/@lwc/integration-not-karma/test-hydration/mismatches/host-mutation-in-connected-callback/style/index.spec.js index eeb6a10ceb..e2c187c30d 100644 --- a/packages/@lwc/integration-not-karma/test-hydration/mismatches/host-mutation-in-connected-callback/style/index.spec.js +++ b/packages/@lwc/integration-not-karma/test-hydration/mismatches/host-mutation-in-connected-callback/style/index.spec.js @@ -1,3 +1,5 @@ +import { expectConsoleCallsDev } from '../../../../helpers/utils.js'; + export default { props: {}, snapshot(target) { @@ -12,7 +14,7 @@ export default { expect(snapshotAfterHydration.div).toBe(snapshots.div); expect(target.shadowRoot.querySelector('x-child').style.color).toBe('blue'); - TestUtils.expectConsoleCallsDev(consoleCalls, { + expectConsoleCallsDev(consoleCalls, { warn: [], error: [], }); diff --git a/packages/@lwc/integration-not-karma/test-hydration/mismatches/invalid-number-of-nodes/foreach/index.spec.js b/packages/@lwc/integration-not-karma/test-hydration/mismatches/invalid-number-of-nodes/foreach/index.spec.js index ebd16f0595..04b4d610c9 100644 --- a/packages/@lwc/integration-not-karma/test-hydration/mismatches/invalid-number-of-nodes/foreach/index.spec.js +++ b/packages/@lwc/integration-not-karma/test-hydration/mismatches/invalid-number-of-nodes/foreach/index.spec.js @@ -1,3 +1,5 @@ +import { expectConsoleCallsDev } from '../../../../helpers/utils.js'; + export default { props: { colors: ['red', 'blue', 'green'], @@ -15,7 +17,7 @@ export default { expect(hydratedSnapshot.text).not.toBe(snapshots.text); - TestUtils.expectConsoleCallsDev(consoleCalls, { + expectConsoleCallsDev(consoleCalls, { error: [], warn: [ 'Hydration child node mismatch on:

    - rendered on server:
  • ,
  • ,
  • - expected on client:
  • ,
  • ', diff --git a/packages/@lwc/integration-not-karma/test-hydration/mismatches/invalid-number-of-nodes/if-true/index.spec.js b/packages/@lwc/integration-not-karma/test-hydration/mismatches/invalid-number-of-nodes/if-true/index.spec.js index 14632e1b57..12d190bc15 100644 --- a/packages/@lwc/integration-not-karma/test-hydration/mismatches/invalid-number-of-nodes/if-true/index.spec.js +++ b/packages/@lwc/integration-not-karma/test-hydration/mismatches/invalid-number-of-nodes/if-true/index.spec.js @@ -1,3 +1,5 @@ +import { expectConsoleCallsDev } from '../../../../helpers/utils.js'; + export default { props: { showBlue: true, @@ -16,7 +18,7 @@ export default { expect(hydratedSnapshot.text).not.toBe(snapshots.text); if (process.env.DISABLE_STATIC_CONTENT_OPTIMIZATION) { - TestUtils.expectConsoleCallsDev(consoleCalls, { + expectConsoleCallsDev(consoleCalls, { error: [], warn: [ 'Hydration text content mismatch on: #text - rendered on server: blue - expected on client: green', @@ -25,7 +27,7 @@ export default { ], }); } else { - TestUtils.expectConsoleCallsDev(consoleCalls, { + expectConsoleCallsDev(consoleCalls, { error: [], warn: [ 'Hydration child node mismatch on:
      - rendered on server:
    • ,
    • ,
    • - expected on client:
    • ,,
    • ', diff --git a/packages/@lwc/integration-not-karma/test-hydration/mismatches/sibling-issue/index.spec.js b/packages/@lwc/integration-not-karma/test-hydration/mismatches/sibling-issue/index.spec.js index 7c3c8d9ff3..4dceba963c 100644 --- a/packages/@lwc/integration-not-karma/test-hydration/mismatches/sibling-issue/index.spec.js +++ b/packages/@lwc/integration-not-karma/test-hydration/mismatches/sibling-issue/index.spec.js @@ -1,3 +1,5 @@ +import { expectConsoleCallsDev } from '../../../helpers/utils.js'; + export default { props: { showMe: false, @@ -16,7 +18,7 @@ export default { expect(snapshots.div).toBeNull(); expect(div).toBeDefined(); - TestUtils.expectConsoleCallsDev(consoleCalls, { + expectConsoleCallsDev(consoleCalls, { error: [], warn: [ 'Hydration child node mismatch on: #document-fragment - rendered on server: - expected on client: #comment', diff --git a/packages/@lwc/integration-not-karma/test-hydration/mismatches/style-attr/computed/different-priority/index.spec.js b/packages/@lwc/integration-not-karma/test-hydration/mismatches/style-attr/computed/different-priority/index.spec.js index 117ea9bf41..4e0aa56496 100644 --- a/packages/@lwc/integration-not-karma/test-hydration/mismatches/style-attr/computed/different-priority/index.spec.js +++ b/packages/@lwc/integration-not-karma/test-hydration/mismatches/style-attr/computed/different-priority/index.spec.js @@ -1,3 +1,5 @@ +import { expectConsoleCallsDev } from '../../../../../helpers/utils.js'; + export default { props: { dynamicStyle: 'background-color: red; border-color: red;', @@ -21,7 +23,7 @@ export default { 'background-color: red; border-color: red !important;' ); - TestUtils.expectConsoleCallsDev(consoleCalls, { + expectConsoleCallsDev(consoleCalls, { error: [], warn: [ 'Hydration attribute mismatch on:

      - rendered on server: style="background-color: red; border-color: red;" - expected on client: style="background-color: red; border-color: red !important;"', diff --git a/packages/@lwc/integration-not-karma/test-hydration/mismatches/style-attr/computed/extra-from-client/index.spec.js b/packages/@lwc/integration-not-karma/test-hydration/mismatches/style-attr/computed/extra-from-client/index.spec.js index 5d843688be..8520604f94 100644 --- a/packages/@lwc/integration-not-karma/test-hydration/mismatches/style-attr/computed/extra-from-client/index.spec.js +++ b/packages/@lwc/integration-not-karma/test-hydration/mismatches/style-attr/computed/extra-from-client/index.spec.js @@ -1,3 +1,5 @@ +import { expectConsoleCallsDev } from '../../../../../helpers/utils.js'; + export default { props: { dynamicStyle: 'background-color: red; border-color: red;', @@ -21,7 +23,7 @@ export default { 'background-color: red; border-color: red; margin: 1px;' ); - TestUtils.expectConsoleCallsDev(consoleCalls, { + expectConsoleCallsDev(consoleCalls, { error: [], warn: [ 'Hydration attribute mismatch on:

      - rendered on server: style="background-color: red; border-color: red;" - expected on client: style="background-color: red; border-color: red; margin: 1px;"', diff --git a/packages/@lwc/integration-not-karma/test-hydration/mismatches/style-attr/computed/extra-from-server/index.spec.js b/packages/@lwc/integration-not-karma/test-hydration/mismatches/style-attr/computed/extra-from-server/index.spec.js index ca92f666fe..bdf60b7c45 100644 --- a/packages/@lwc/integration-not-karma/test-hydration/mismatches/style-attr/computed/extra-from-server/index.spec.js +++ b/packages/@lwc/integration-not-karma/test-hydration/mismatches/style-attr/computed/extra-from-server/index.spec.js @@ -1,3 +1,5 @@ +import { expectConsoleCallsDev } from '../../../../../helpers/utils.js'; + export default { props: { dynamicStyle: 'background-color: red; border-color: red; margin: 1px;', @@ -19,7 +21,7 @@ export default { expect(p.getAttribute('style')).not.toBe(snapshots.style); expect(p.getAttribute('style')).toBe('background-color: red; border-color: red;'); - TestUtils.expectConsoleCallsDev(consoleCalls, { + expectConsoleCallsDev(consoleCalls, { error: [], warn: [ 'Hydration attribute mismatch on:

      - rendered on server: style="background-color: red; border-color: red; margin: 1px;" - expected on client: style="background-color: red; border-color: red;"', diff --git a/packages/@lwc/integration-not-karma/test-hydration/mismatches/style-attr/computed/same-different-order/index.spec.js b/packages/@lwc/integration-not-karma/test-hydration/mismatches/style-attr/computed/same-different-order/index.spec.js index a9f3d09d8a..40786d91c2 100644 --- a/packages/@lwc/integration-not-karma/test-hydration/mismatches/style-attr/computed/same-different-order/index.spec.js +++ b/packages/@lwc/integration-not-karma/test-hydration/mismatches/style-attr/computed/same-different-order/index.spec.js @@ -1,3 +1,5 @@ +import { expectConsoleCallsDev } from '../../../../../helpers/utils.js'; + export default { props: { dynamicStyle: 'background-color: red; border-color: red; margin: 1px;', @@ -20,7 +22,7 @@ export default { 'margin: 1px; border-color: red; background-color: red;' ); - TestUtils.expectConsoleCallsDev(consoleCalls, { + expectConsoleCallsDev(consoleCalls, { error: [], warn: [ 'Hydration attribute mismatch on:

      - rendered on server: style="background-color: red; border-color: red; margin: 1px;" - expected on client: style="margin: 1px; border-color: red; background-color: red;"', diff --git a/packages/@lwc/integration-not-karma/test-hydration/mismatches/style-attr/empty-string/empty-on-client-nonempty-on-server/index.spec.js b/packages/@lwc/integration-not-karma/test-hydration/mismatches/style-attr/empty-string/empty-on-client-nonempty-on-server/index.spec.js index 6648a2a90a..6ccc8fb235 100644 --- a/packages/@lwc/integration-not-karma/test-hydration/mismatches/style-attr/empty-string/empty-on-client-nonempty-on-server/index.spec.js +++ b/packages/@lwc/integration-not-karma/test-hydration/mismatches/style-attr/empty-string/empty-on-client-nonempty-on-server/index.spec.js @@ -1,3 +1,5 @@ +import { expectConsoleCallsDev } from '../../../../../helpers/utils.js'; + export default { props: { styles: 'color: burlywood;', @@ -17,7 +19,7 @@ export default { expect(p).not.toBe(snapshots.p); expect(p.getAttribute('style')).toBe(null); - TestUtils.expectConsoleCallsDev(consoleCalls, { + expectConsoleCallsDev(consoleCalls, { error: [], warn: [ 'Hydration attribute mismatch on:

      - rendered on server: style="color: burlywood;" - expected on client: style=""', diff --git a/packages/@lwc/integration-not-karma/test-hydration/mismatches/style-attr/empty-string/empty-on-server-nonempty-on-client/index.spec.js b/packages/@lwc/integration-not-karma/test-hydration/mismatches/style-attr/empty-string/empty-on-server-nonempty-on-client/index.spec.js index aca494470d..745cffe63d 100644 --- a/packages/@lwc/integration-not-karma/test-hydration/mismatches/style-attr/empty-string/empty-on-server-nonempty-on-client/index.spec.js +++ b/packages/@lwc/integration-not-karma/test-hydration/mismatches/style-attr/empty-string/empty-on-server-nonempty-on-client/index.spec.js @@ -1,3 +1,5 @@ +import { expectConsoleCallsDev } from '../../../../../helpers/utils.js'; + export default { props: { styles: '', @@ -17,7 +19,7 @@ export default { expect(p).not.toBe(snapshots.p); expect(p.getAttribute('style')).toBe('color: burlywood;'); - TestUtils.expectConsoleCallsDev(consoleCalls, { + expectConsoleCallsDev(consoleCalls, { error: [], warn: [ 'Hydration attribute mismatch on:

      - rendered on server: style="" - expected on client: style="color: burlywood;"', diff --git a/packages/@lwc/integration-not-karma/test-hydration/mismatches/style-attr/static/different-priority/index.spec.js b/packages/@lwc/integration-not-karma/test-hydration/mismatches/style-attr/static/different-priority/index.spec.js index 80b6824fc4..8566cc6778 100644 --- a/packages/@lwc/integration-not-karma/test-hydration/mismatches/style-attr/static/different-priority/index.spec.js +++ b/packages/@lwc/integration-not-karma/test-hydration/mismatches/style-attr/static/different-priority/index.spec.js @@ -1,3 +1,5 @@ +import { expectConsoleCallsDev } from '../../../../../helpers/utils.js'; + export default { props: { ssr: true, @@ -21,7 +23,7 @@ export default { 'background-color: red; border-color: red !important;' ); - TestUtils.expectConsoleCallsDev(consoleCalls, { + expectConsoleCallsDev(consoleCalls, { error: [], warn: [ 'Hydration attribute mismatch on:

      - rendered on server: style="background-color: red; border-color: red;" - expected on client: style="background-color: red; border-color: red !important;"', diff --git a/packages/@lwc/integration-not-karma/test-hydration/mismatches/style-attr/static/extra-from-client/index.spec.js b/packages/@lwc/integration-not-karma/test-hydration/mismatches/style-attr/static/extra-from-client/index.spec.js index 89f82ca68a..fb56c341e9 100644 --- a/packages/@lwc/integration-not-karma/test-hydration/mismatches/style-attr/static/extra-from-client/index.spec.js +++ b/packages/@lwc/integration-not-karma/test-hydration/mismatches/style-attr/static/extra-from-client/index.spec.js @@ -1,3 +1,5 @@ +import { expectConsoleCallsDev } from '../../../../../helpers/utils.js'; + export default { props: { ssr: true, @@ -21,7 +23,7 @@ export default { 'background-color: red; border-color: red; margin: 1px;' ); - TestUtils.expectConsoleCallsDev(consoleCalls, { + expectConsoleCallsDev(consoleCalls, { error: [], warn: [ 'Hydration attribute mismatch on:

      - rendered on server: style="background-color: red; border-color: red;" - expected on client: style="background-color: red; border-color: red; margin: 1px;"', diff --git a/packages/@lwc/integration-not-karma/test-hydration/mismatches/style-attr/static/extra-from-server/index.spec.js b/packages/@lwc/integration-not-karma/test-hydration/mismatches/style-attr/static/extra-from-server/index.spec.js index f8bf2b3f88..6d4cb3bedf 100644 --- a/packages/@lwc/integration-not-karma/test-hydration/mismatches/style-attr/static/extra-from-server/index.spec.js +++ b/packages/@lwc/integration-not-karma/test-hydration/mismatches/style-attr/static/extra-from-server/index.spec.js @@ -1,3 +1,5 @@ +import { expectConsoleCallsDev } from '../../../../../helpers/utils.js'; + export default { props: { ssr: true, @@ -19,7 +21,7 @@ export default { expect(p.getAttribute('style')).not.toBe(snapshots.style); expect(p.getAttribute('style')).toBe('background-color: red; border-color: red;'); - TestUtils.expectConsoleCallsDev(consoleCalls, { + expectConsoleCallsDev(consoleCalls, { error: [], warn: [ 'Hydration attribute mismatch on:

      - rendered on server: style="background-color: red; border-color: red; margin: 1px;" - expected on client: style="background-color: red; border-color: red;"', diff --git a/packages/@lwc/integration-not-karma/test-hydration/mismatches/style-attr/static/same-different-order/index.spec.js b/packages/@lwc/integration-not-karma/test-hydration/mismatches/style-attr/static/same-different-order/index.spec.js index 6c8fa727f2..4f60a1854d 100644 --- a/packages/@lwc/integration-not-karma/test-hydration/mismatches/style-attr/static/same-different-order/index.spec.js +++ b/packages/@lwc/integration-not-karma/test-hydration/mismatches/style-attr/static/same-different-order/index.spec.js @@ -1,3 +1,5 @@ +import { expectConsoleCallsDev } from '../../../../../helpers/utils.js'; + export default { props: { ssr: true, @@ -27,7 +29,7 @@ export default { 'margin: 1px; border-color: red; background-color: red;' ); - TestUtils.expectConsoleCallsDev(consoleCalls, { + expectConsoleCallsDev(consoleCalls, { error: [], warn: [ 'Hydration attribute mismatch on:

      - rendered on server: style="background-color: red; border-color: red; margin: 1px;" - expected on client: style="margin: 1px; border-color: red; background-color: red;"', diff --git a/packages/@lwc/integration-not-karma/test-hydration/mismatches/text-instead-of-comment/index.spec.js b/packages/@lwc/integration-not-karma/test-hydration/mismatches/text-instead-of-comment/index.spec.js index ff771b9486..5067cbd985 100644 --- a/packages/@lwc/integration-not-karma/test-hydration/mismatches/text-instead-of-comment/index.spec.js +++ b/packages/@lwc/integration-not-karma/test-hydration/mismatches/text-instead-of-comment/index.spec.js @@ -1,3 +1,5 @@ +import { expectConsoleCallsDev } from '../../../helpers/utils.js'; + export default { props: { showAsText: false, @@ -17,7 +19,7 @@ export default { expect(text.nodeType).toBe(Node.TEXT_NODE); expect(text.nodeValue).toBe(snapshots.comment.nodeValue); - TestUtils.expectConsoleCallsDev(consoleCalls, { + expectConsoleCallsDev(consoleCalls, { error: [], warn: [ 'Hydration node mismatch on: #text - rendered on server: #comment - expected on client: #text', diff --git a/packages/@lwc/integration-not-karma/test-hydration/mismatches/textNode-instead-of-element/index.spec.js b/packages/@lwc/integration-not-karma/test-hydration/mismatches/textNode-instead-of-element/index.spec.js index 677f8106d9..0fa8c76759 100644 --- a/packages/@lwc/integration-not-karma/test-hydration/mismatches/textNode-instead-of-element/index.spec.js +++ b/packages/@lwc/integration-not-karma/test-hydration/mismatches/textNode-instead-of-element/index.spec.js @@ -1,3 +1,5 @@ +import { expectConsoleCallsDev } from '../../../helpers/utils.js'; + export default { props: { showAsText: true, @@ -19,7 +21,7 @@ export default { expect(text.nodeType).toBe(Node.ELEMENT_NODE); - TestUtils.expectConsoleCallsDev(consoleCalls, { + expectConsoleCallsDev(consoleCalls, { error: [], warn: [ 'Hydration node mismatch on: - rendered on server: #text - expected on client: ', diff --git a/packages/@lwc/integration-not-karma/test-hydration/mismatches/with-validation-opt-out/mutate-in-connected-and-render/no-opt-out/index.spec.js b/packages/@lwc/integration-not-karma/test-hydration/mismatches/with-validation-opt-out/mutate-in-connected-and-render/no-opt-out/index.spec.js index c7de6e2d5f..26b5a4cfaf 100644 --- a/packages/@lwc/integration-not-karma/test-hydration/mismatches/with-validation-opt-out/mutate-in-connected-and-render/no-opt-out/index.spec.js +++ b/packages/@lwc/integration-not-karma/test-hydration/mismatches/with-validation-opt-out/mutate-in-connected-and-render/no-opt-out/index.spec.js @@ -1,3 +1,5 @@ +import { expectConsoleCallsDev } from '../../../../../helpers/utils.js'; + export default { snapshot(target) { return { @@ -8,7 +10,7 @@ export default { const hydratedSnapshot = this.snapshot(target); expect(hydratedSnapshot.child).not.toBe(snapshots.child); - TestUtils.expectConsoleCallsDev(consoleCalls, { + expectConsoleCallsDev(consoleCalls, { error: [], warn: [ 'Hydration attribute mismatch on: - rendered on server: data-mutate-during-render="true" - expected on client: data-mutate-during-render="false"', diff --git a/packages/@lwc/integration-not-karma/test-hydration/mismatches/with-validation-opt-out/mutate-in-connected-and-render/opt-out-wrong-array/index.spec.js b/packages/@lwc/integration-not-karma/test-hydration/mismatches/with-validation-opt-out/mutate-in-connected-and-render/opt-out-wrong-array/index.spec.js index c7de6e2d5f..26b5a4cfaf 100644 --- a/packages/@lwc/integration-not-karma/test-hydration/mismatches/with-validation-opt-out/mutate-in-connected-and-render/opt-out-wrong-array/index.spec.js +++ b/packages/@lwc/integration-not-karma/test-hydration/mismatches/with-validation-opt-out/mutate-in-connected-and-render/opt-out-wrong-array/index.spec.js @@ -1,3 +1,5 @@ +import { expectConsoleCallsDev } from '../../../../../helpers/utils.js'; + export default { snapshot(target) { return { @@ -8,7 +10,7 @@ export default { const hydratedSnapshot = this.snapshot(target); expect(hydratedSnapshot.child).not.toBe(snapshots.child); - TestUtils.expectConsoleCallsDev(consoleCalls, { + expectConsoleCallsDev(consoleCalls, { error: [], warn: [ 'Hydration attribute mismatch on: - rendered on server: data-mutate-during-render="true" - expected on client: data-mutate-during-render="false"', diff --git a/packages/@lwc/integration-not-karma/test-hydration/mismatches/with-validation-opt-out/number-of-child-els/index.spec.js b/packages/@lwc/integration-not-karma/test-hydration/mismatches/with-validation-opt-out/number-of-child-els/index.spec.js index f849298def..28a27b49db 100644 --- a/packages/@lwc/integration-not-karma/test-hydration/mismatches/with-validation-opt-out/number-of-child-els/index.spec.js +++ b/packages/@lwc/integration-not-karma/test-hydration/mismatches/with-validation-opt-out/number-of-child-els/index.spec.js @@ -1,3 +1,5 @@ +import { expectConsoleCallsDev } from '../../../../helpers/utils.js'; + export default { props: { isServer: true, @@ -14,7 +16,7 @@ export default { const hydratedSnapshot = this.snapshot(target); expect(hydratedSnapshot.childMarkup).not.toBe(snapshots.childMarkup); - TestUtils.expectConsoleCallsDev(consoleCalls, { + expectConsoleCallsDev(consoleCalls, { error: [], warn: [ 'Hydration child node mismatch on: - rendered on server:

      - expected on client:
      ,
      ', diff --git a/packages/@lwc/integration-not-karma/test-hydration/mismatches/with-validation-opt-out/warnings/opt-out-array-of-non-strings/index.spec.js b/packages/@lwc/integration-not-karma/test-hydration/mismatches/with-validation-opt-out/warnings/opt-out-array-of-non-strings/index.spec.js index 78fdd35939..39ae491fdd 100644 --- a/packages/@lwc/integration-not-karma/test-hydration/mismatches/with-validation-opt-out/warnings/opt-out-array-of-non-strings/index.spec.js +++ b/packages/@lwc/integration-not-karma/test-hydration/mismatches/with-validation-opt-out/warnings/opt-out-array-of-non-strings/index.spec.js @@ -1,3 +1,5 @@ +import { expectConsoleCallsDev } from '../../../../../helpers/utils.js'; + export default { snapshot(target) { return { @@ -8,7 +10,7 @@ export default { const hydratedSnapshot = this.snapshot(target); expect(hydratedSnapshot.child).toBe(snapshots.child); - TestUtils.expectConsoleCallsDev(consoleCalls, { + expectConsoleCallsDev(consoleCalls, { warn: [ '`validationOptOut` must be `true` or an array of attributes that should not be validated.', ], diff --git a/packages/@lwc/integration-not-karma/test-hydration/mismatches/with-validation-opt-out/warnings/opt-out-false/index.spec.js b/packages/@lwc/integration-not-karma/test-hydration/mismatches/with-validation-opt-out/warnings/opt-out-false/index.spec.js index 78fdd35939..39ae491fdd 100644 --- a/packages/@lwc/integration-not-karma/test-hydration/mismatches/with-validation-opt-out/warnings/opt-out-false/index.spec.js +++ b/packages/@lwc/integration-not-karma/test-hydration/mismatches/with-validation-opt-out/warnings/opt-out-false/index.spec.js @@ -1,3 +1,5 @@ +import { expectConsoleCallsDev } from '../../../../../helpers/utils.js'; + export default { snapshot(target) { return { @@ -8,7 +10,7 @@ export default { const hydratedSnapshot = this.snapshot(target); expect(hydratedSnapshot.child).toBe(snapshots.child); - TestUtils.expectConsoleCallsDev(consoleCalls, { + expectConsoleCallsDev(consoleCalls, { warn: [ '`validationOptOut` must be `true` or an array of attributes that should not be validated.', ], diff --git a/packages/@lwc/integration-not-karma/test-hydration/mismatches/with-validation-opt-out/warnings/opt-out-non-array/index.spec.js b/packages/@lwc/integration-not-karma/test-hydration/mismatches/with-validation-opt-out/warnings/opt-out-non-array/index.spec.js index 78fdd35939..39ae491fdd 100644 --- a/packages/@lwc/integration-not-karma/test-hydration/mismatches/with-validation-opt-out/warnings/opt-out-non-array/index.spec.js +++ b/packages/@lwc/integration-not-karma/test-hydration/mismatches/with-validation-opt-out/warnings/opt-out-non-array/index.spec.js @@ -1,3 +1,5 @@ +import { expectConsoleCallsDev } from '../../../../../helpers/utils.js'; + export default { snapshot(target) { return { @@ -8,7 +10,7 @@ export default { const hydratedSnapshot = this.snapshot(target); expect(hydratedSnapshot.child).toBe(snapshots.child); - TestUtils.expectConsoleCallsDev(consoleCalls, { + expectConsoleCallsDev(consoleCalls, { warn: [ '`validationOptOut` must be `true` or an array of attributes that should not be validated.', ], diff --git a/packages/@lwc/integration-not-karma/test-hydration/mismatches/with-validation-opt-out/warnings/opt-out-null/index.spec.js b/packages/@lwc/integration-not-karma/test-hydration/mismatches/with-validation-opt-out/warnings/opt-out-null/index.spec.js index 78fdd35939..39ae491fdd 100644 --- a/packages/@lwc/integration-not-karma/test-hydration/mismatches/with-validation-opt-out/warnings/opt-out-null/index.spec.js +++ b/packages/@lwc/integration-not-karma/test-hydration/mismatches/with-validation-opt-out/warnings/opt-out-null/index.spec.js @@ -1,3 +1,5 @@ +import { expectConsoleCallsDev } from '../../../../../helpers/utils.js'; + export default { snapshot(target) { return { @@ -8,7 +10,7 @@ export default { const hydratedSnapshot = this.snapshot(target); expect(hydratedSnapshot.child).toBe(snapshots.child); - TestUtils.expectConsoleCallsDev(consoleCalls, { + expectConsoleCallsDev(consoleCalls, { warn: [ '`validationOptOut` must be `true` or an array of attributes that should not be validated.', ], diff --git a/packages/@lwc/integration-not-karma/test-hydration/stylesheet/host-scope-token/dynamic-render/mismatches/extra-class-in-client/index.spec.js b/packages/@lwc/integration-not-karma/test-hydration/stylesheet/host-scope-token/dynamic-render/mismatches/extra-class-in-client/index.spec.js index f716daa1a0..65e4bdee63 100644 --- a/packages/@lwc/integration-not-karma/test-hydration/stylesheet/host-scope-token/dynamic-render/mismatches/extra-class-in-client/index.spec.js +++ b/packages/@lwc/integration-not-karma/test-hydration/stylesheet/host-scope-token/dynamic-render/mismatches/extra-class-in-client/index.spec.js @@ -1,3 +1,5 @@ +import { expectConsoleCallsDev } from '../../../../../../helpers/utils.js'; + export default { props: { clazz: '', @@ -18,7 +20,7 @@ export default { expect(child).not.toBe(snapshots.child); expect(h1).not.toBe(snapshots.h1); - TestUtils.expectConsoleCallsDev(consoleCalls, { + expectConsoleCallsDev(consoleCalls, { error: [], warn: [ 'Hydration attribute mismatch on: - rendered on server: class="" - expected on client: class="foo"', diff --git a/packages/@lwc/integration-not-karma/test-hydration/stylesheet/host-scope-token/dynamic-render/mismatches/extra-class-in-server/index.spec.js b/packages/@lwc/integration-not-karma/test-hydration/stylesheet/host-scope-token/dynamic-render/mismatches/extra-class-in-server/index.spec.js index 2a3a0fdc62..fca2e74f7e 100644 --- a/packages/@lwc/integration-not-karma/test-hydration/stylesheet/host-scope-token/dynamic-render/mismatches/extra-class-in-server/index.spec.js +++ b/packages/@lwc/integration-not-karma/test-hydration/stylesheet/host-scope-token/dynamic-render/mismatches/extra-class-in-server/index.spec.js @@ -1,3 +1,5 @@ +import { expectConsoleCallsDev } from '../../../../../../helpers/utils.js'; + export default { props: { clazz: 'foo', @@ -18,7 +20,7 @@ export default { expect(child).not.toBe(snapshots.child); expect(h1).not.toBe(snapshots.h1); - TestUtils.expectConsoleCallsDev(consoleCalls, { + expectConsoleCallsDev(consoleCalls, { error: [], warn: [ 'Hydration attribute mismatch on: - rendered on server: class="foo" - expected on client: class=""', diff --git a/packages/@lwc/integration-not-karma/test-hydration/stylesheet/host-scope-token/dynamic-render/mismatches/wrong-scoped-template/index.spec.js b/packages/@lwc/integration-not-karma/test-hydration/stylesheet/host-scope-token/dynamic-render/mismatches/wrong-scoped-template/index.spec.js index 648071b0ac..73d6350229 100644 --- a/packages/@lwc/integration-not-karma/test-hydration/stylesheet/host-scope-token/dynamic-render/mismatches/wrong-scoped-template/index.spec.js +++ b/packages/@lwc/integration-not-karma/test-hydration/stylesheet/host-scope-token/dynamic-render/mismatches/wrong-scoped-template/index.spec.js @@ -1,3 +1,5 @@ +import { expectConsoleCallsDev } from '../../../../../../helpers/utils.js'; + export default { props: { showA: false, @@ -25,7 +27,7 @@ export default { getComputedStyle(child).getPropertyValue('--from-template').trim().replace(/"/g, "'") ).toBe("'a'"); - TestUtils.expectConsoleCallsDev(consoleCalls, { + expectConsoleCallsDev(consoleCalls, { error: [], warn: [ 'Hydration attribute mismatch on: