test(hydration): test non-static-optimized

.github/workflows/karma.yml

@@ -182,6 +182,7 @@ jobs:
  - run: ENABLE_SYNTHETIC_SHADOW_IN_HYDRATION=1 yarn hydration:sauce:ci
  - run: NODE_ENV_FOR_TEST=production yarn hydration:sauce:ci
  - run: DISABLE_NATIVE_CUSTOM_ELEMENT_LIFECYCLE=1 yarn hydration:sauce:ci
+ - run: DISABLE_STATIC_CONTENT_OPTIMIZATION=1 yarn hydration:sauce:ci
 
  - name: Upload coverage results
  uses: actions/upload-artifact@v4

packages/@lwc/engine-core/src/framework/hydration.ts

@@ -858,13 +858,13 @@ function haveCompatibleStaticParts(vnode: VStatic, renderer: RendererAPI) {
  // Explicitly skip hydration validation when static parts don't contain `style` or `className`.
  // This means the style/class attributes are either static or don't exist on the element and
  // cannot be affected by hydration.
- const hasMatchingStyleAttr = shouldValidateAttr(data, 'style')
- ? validateStyleAttr(vnode, elm, data, renderer)
- : true;
  const hasMatchingClass = shouldValidateAttr(data, 'className')
  ? validateClassAttr(vnode, elm, data, renderer)
  : true;
- if (isFalse(hasMatchingAttrs && hasMatchingStyleAttr && hasMatchingClass)) {
+ const hasMatchingStyleAttr = shouldValidateAttr(data, 'style')
+ ? validateStyleAttr(vnode, elm, data, renderer)
+ : true;
+ if (isFalse(hasMatchingAttrs && hasMatchingClass && hasMatchingStyleAttr)) {
  return false;
  }
  } else {

packages/@lwc/integration-karma/scripts/karma-plugins/hydration-tests.js

@@ -11,6 +11,7 @@ const { format } = require('node:util');
 const { rollup } = require('rollup');
 const lwcRollupPlugin = require('@lwc/rollup-plugin');
 const ssr = require('@lwc/engine-server');
+const { DISABLE_STATIC_CONTENT_OPTIMIZATION } = require('../shared/options');
 const Watcher = require('./Watcher');
 
 const context = {
@@ -70,6 +71,7 @@ async function getCompiledModule(dirName) {
  strict: true,
  },
  enableDynamicComponents: true,
+ enableStaticContentOptimization: !DISABLE_STATIC_CONTENT_OPTIMIZATION,
  }),
  ],
  cache,

packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/same-different-order/index.spec.js

@@ -0,0 +1,36 @@
+export default {
+ props: {
+ ssr: true,
+ },
+ clientProps: {
+ ssr: false,
+ },
+ snapshot(target) {
+ const p = target.shadowRoot.querySelector('p');
+ return {
+ p,
+ classes: p.className,
+ };
+ },
+ test(target, snapshots, consoleCalls) {
+ const p = target.shadowRoot.querySelector('p');
+
+ // TODO [#4656]: static optimization causes mismatches for style/class only when ordering is different
+ if (process.env.DISABLE_STATIC_CONTENT_OPTIMIZATION) {
+ expect(p).toBe(snapshots.p);
+ expect(p.className).toBe(snapshots.classes);
+
+ expect(consoleCalls.error).toHaveSize(0);
+ } else {
+ expect(p).not.toBe(snapshots.p);
+ expect(p.className).toBe('c1 c2 c3');
+
+ TestUtils.expectConsoleCallsDev(consoleCalls, {
+ error: [
+ 'Mismatch hydrating element <p>: attribute "class" has different values, expected "c1 c2 c3" but found "c3 c2 c1"',
+ 'Hydration completed with errors.',
+ ],
+ });
+ }
+ },
+};

packages/@lwc/integration-karma/test-hydration/mismatches/display-errors-attrs-class-style/index.spec.js

@@ -26,8 +26,8 @@ export default {
  TestUtils.expectConsoleCallsDev(consoleCalls, {
  error: [
  'Mismatch hydrating element <p>: attribute "data-attrs" has different values, expected "client-attrs" but found "ssr-attrs"',
- 'Mismatch hydrating element <p>: attribute "style" has different values, expected "background-color: blue;" but found "background-color: red;"',
  'Mismatch hydrating element <p>: attribute "class" has different values, expected "client-class" but found "ssr-class"',
+ 'Mismatch hydrating element <p>: attribute "style" has different values, expected "background-color: blue;" but found "background-color: red;"',
  'Hydration completed with errors.',
  ],
  });

packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/static/same-different-order/index.spec.js

@@ -15,16 +15,24 @@ export default {
  test(target, snapshots, consoleCalls) {
  const p = target.shadowRoot.querySelector('p');
 
- expect(p).not.toBe(snapshots.p);
- expect(p.getAttribute('style')).toBe(
- 'margin: 1px; border-color: red; background-color: red;'
- );
+ // TODO [#4656]: static optimization causes mismatches for style/class only when ordering is different
+ if (process.env.DISABLE_STATIC_CONTENT_OPTIMIZATION) {
+ expect(p).toBe(snapshots.p);
+  expect(p.getAttribute('style')).toBe(snapshots.style);
 
- TestUtils.expectConsoleCallsDev(consoleCalls, {
- error: [
- 'Mismatch hydrating element <p>: attribute "style" has different values, expected "margin: 1px; border-color: red; background-color: red;" but found "background-color: red; border-color: red; margin: 1px;"',
- 'Hydration completed with errors.',
- ],
- });
+ expect(consoleCalls.error).toHaveSize(0);
+ } else {
+ expect(p).not.toBe(snapshots.p);
+ expect(p.getAttribute('style')).toBe(
+ 'margin: 1px; border-color: red; background-color: red;'
+ );
+
+ TestUtils.expectConsoleCallsDev(consoleCalls, {
+ error: [
+ 'Mismatch hydrating element <p>: attribute "style" has different values, expected "margin: 1px; border-color: red; background-color: red;" but found "background-color: red; border-color: red; margin: 1px;"',
+ 'Hydration completed with errors.',
+ ],
+ });
+ }
  },
 };