test: add hydration tests

packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/computed/different-priority/index.spec.js

@@ -0,0 +1,30 @@
+export default {
+    props: {
+        dynamicStyle: 'background-color: red; border-color: red;',
+    },
+    clientProps: {
+        dynamicStyle: 'background-color: red; border-color: red !important;',
+    },
+    snapshot(target) {
+        const p = target.shadowRoot.querySelector('p');
+        return {
+            p,
+            style: p.getAttribute('style'),
+        };
+    },
+    test(target, snapshots, consoleCalls) {
+        const p = target.shadowRoot.querySelector('p');
+
+        expect(p).not.toBe(snapshots.p);
+        expect(p.getAttribute('style')).not.toBe(snapshots.style);
+        expect(p.getAttribute('style')).toBe(
+            'background-color: red; border-color: red !important;'
+        );
+
+        expect(consoleCalls.error).toHaveSize(2);
+        expect(consoleCalls.error[0][0].message).toContain(
+            '[LWC error]: Mismatch hydrating element <p>: attribute "style" has different values, expected "background-color: red; border-color: red !important;" but found "background-color: red; border-color: red;"'
+        );
+        expect(consoleCalls.error[1][0].message).toContain('Hydration completed with errors.');
+    },
+};

packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/computed/different-priority/x/main/main.html

@@ -0,0 +1,3 @@
+<template>
+    <p style={dynamicStyle}>txt</p>
+</template>

packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/computed/different-priority/x/main/main.js

@@ -0,0 +1,5 @@
+import { LightningElement, api } from 'lwc';
+
+export default class Main extends LightningElement {
+    @api dynamicStyle;
+}

packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/computed/extra-from-client/index.spec.js

@@ -0,0 +1,30 @@
+export default {
+    props: {
+        dynamicStyle: 'background-color: red; border-color: red;',
+    },
+    clientProps: {
+        dynamicStyle: 'background-color: red; border-color: red; margin: 1px;',
+    },
+    snapshot(target) {
+        const p = target.shadowRoot.querySelector('p');
+        return {
+            p,
+            style: p.getAttribute('style'),
+        };
+    },
+    test(target, snapshots, consoleCalls) {
+        const p = target.shadowRoot.querySelector('p');
+
+        expect(p).not.toBe(snapshots.p);
+        expect(p.getAttribute('style')).not.toBe(snapshots.style);
+        expect(p.getAttribute('style')).toBe(
+            'background-color: red; border-color: red; margin: 1px;'
+        );
+
+        expect(consoleCalls.error).toHaveSize(2);
+        expect(consoleCalls.error[0][0].message).toContain(
+            'Mismatch hydrating element <p>: attribute "style" has different values, expected "background-color: red; border-color: red; margin: 1px;" but found "background-color: red; border-color: red;"'
+        );
+        expect(consoleCalls.error[1][0].message).toContain('Hydration completed with errors.');
+    },
+};

packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/computed/extra-from-client/x/main/main.html

@@ -0,0 +1,3 @@
+<template>
+    <p style={dynamicStyle}>txt</p>
+</template>

packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/computed/extra-from-client/x/main/main.js

@@ -0,0 +1,5 @@
+import { LightningElement, api } from 'lwc';
+
+export default class Main extends LightningElement {
+    @api dynamicStyle;
+}

packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/computed/extra-from-server/index.spec.js

@@ -0,0 +1,28 @@
+export default {
+    props: {
+        dynamicStyle: 'background-color: red; border-color: red; margin: 1px;',
+    },
+    clientProps: {
+        dynamicStyle: 'background-color: red; border-color: red;',
+    },
+    snapshot(target) {
+        const p = target.shadowRoot.querySelector('p');
+        return {
+            p,
+            style: p.getAttribute('style'),
+        };
+    },
+    test(target, snapshots, consoleCalls) {
+        const p = target.shadowRoot.querySelector('p');
+
+        expect(p).not.toBe(snapshots.p);
+        expect(p.getAttribute('style')).not.toBe(snapshots.style);
+        expect(p.getAttribute('style')).toBe('background-color: red; border-color: red;');
+
+        expect(consoleCalls.error).toHaveSize(2);
+        expect(consoleCalls.error[0][0].message).toContain(
+            '[LWC error]: Mismatch hydrating element <p>: attribute "style" has different values, expected "background-color: red; border-color: red;" but found "background-color: red; border-color: red; margin: 1px;"'
+        );
+        expect(consoleCalls.error[1][0].message).toContain('Hydration completed with errors.');
+    },
+};

packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/computed/extra-from-server/x/main/main.html

@@ -0,0 +1,3 @@
+<template>
+    <p style={dynamicStyle}>txt</p>
+</template>

packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/computed/extra-from-server/x/main/main.js

@@ -0,0 +1,5 @@
+import { LightningElement, api } from 'lwc';
+
+export default class Main extends LightningElement {
+    @api dynamicStyle;
+}

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

@@ -0,0 +1,29 @@
+export default {
+    props: {
+        dynamicStyle: 'background-color: red; border-color: red; margin: 1px;',
+    },
+    clientProps: {
+        dynamicStyle: 'margin: 1px; border-color: red; background-color: red;',
+    },
+    snapshot(target) {
+        const p = target.shadowRoot.querySelector('p');
+        return {
+            p,
+            style: p.getAttribute('style'),
+        };
+    },
+    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;'
+        );
+
+        expect(consoleCalls.error).toHaveSize(2);
+        expect(consoleCalls.error[0][0].message).toContain(
+            '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;"'
+        );
+        expect(consoleCalls.error[1][0].message).toContain('Hydration completed with errors.');
+    },
+};

packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/computed/same-different-order/x/main/main.html

@@ -0,0 +1,3 @@
+<template>
+    <p style={dynamicStyle}>txt</p>
+</template>

packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/computed/same-different-order/x/main/main.js

@@ -0,0 +1,5 @@
+import { LightningElement, api } from 'lwc';
+
+export default class Main extends LightningElement {
+    @api dynamicStyle;
+}

packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/computed/same-priority/x/main/main.html

@@ -0,0 +1,3 @@
+<template>
+    <p style={dynamicStyle}>txt</p>
+</template>

packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/computed/same-priority/x/main/main.js

@@ -0,0 +1,6 @@
+import { LightningElement } from 'lwc';
+
+export default class Main extends LightningElement {
+    // Note: extra spaces matters
+    dynamicStyle = 'background-color: red; border-color:     red !important   ;    ';
+}

packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/computed/same/x/main/main.html

@@ -0,0 +1,3 @@
+<template>
+    <p style={dynamicStyle}>txt</p>
+</template>

packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/computed/same/x/main/main.js

@@ -0,0 +1,5 @@
+import { LightningElement, api } from 'lwc';
+
+export default class Main extends LightningElement {
+    @api dynamicStyle = 'background-color: red; border-color: red; margin: 1px;';
+}

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

@@ -0,0 +1,15 @@
+export default {
+    snapshot(target) {
+        const p = target.shadowRoot.querySelector('p');
+        return {
+            p,
+            style: p.getAttribute('style'),
+        };
+    },
+    test(target, snapshots) {
+        const p = target.shadowRoot.querySelector('p');
+
+        expect(p).toBe(snapshots.p);
+        expect(p.getAttribute('style')).toBe(snapshots.style);
+    },
+};

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

@@ -0,0 +1,17 @@
+export default {
+    snapshot(target) {
+        const p = target.shadowRoot.querySelector('p');
+        return {
+            p,
+            style: p.getAttribute('style'),
+        };
+    },
+    test(target, snapshots, consoleCalls) {
+        const p = target.shadowRoot.querySelector('p');
+
+        expect(p).toBe(snapshots.p);
+        expect(p.getAttribute('style')).toBe(snapshots.style);
+
+        expect(consoleCalls.error).toHaveSize(0);
+    },
+};