From f75ffc00b93c0e62d5f374e176830f676c5565ce Mon Sep 17 00:00:00 2001 From: Nolan Lawson Date: Wed, 17 Jul 2024 08:07:27 -0700 Subject: [PATCH 1/2] fix: trim `data-lwc-host-mutated` attr values (#283) --- .../jest-preset/src/ssr/html-serializer.js | 6 ++++-- .../frameworkAttrsWithValue.spec.js.snap | 9 +++++++++ .../__tests__/frameworkAttrsWithValue.spec.js | 15 +++++++++++++++ .../frameworkAttrsWithValue.css | 3 +++ .../frameworkAttrsWithValue.html | 3 +++ .../frameworkAttrsWithValue.js | 18 ++++++++++++++++++ .../frameworkAttrsWithValue.ssr-test.js.snap | 12 ++++++++++++ .../frameworkAttrsWithValue.ssr-test.js | 14 ++++++++++++++ .../frameworkAttrsWithValue.css | 3 +++ .../frameworkAttrsWithValue.html | 3 +++ .../frameworkAttrsWithValue.js | 18 ++++++++++++++++++ 11 files changed, 102 insertions(+), 2 deletions(-) create mode 100644 test/src/modules/serializer/frameworkAttrsWithValue/__tests__/__snapshots__/frameworkAttrsWithValue.spec.js.snap create mode 100644 test/src/modules/serializer/frameworkAttrsWithValue/__tests__/frameworkAttrsWithValue.spec.js create mode 100644 test/src/modules/serializer/frameworkAttrsWithValue/frameworkAttrsWithValue.css create mode 100644 test/src/modules/serializer/frameworkAttrsWithValue/frameworkAttrsWithValue.html create mode 100644 test/src/modules/serializer/frameworkAttrsWithValue/frameworkAttrsWithValue.js create mode 100644 test/src/modules/ssr/frameworkAttrsWithValue/__tests__/__snapshots__/frameworkAttrsWithValue.ssr-test.js.snap create mode 100644 test/src/modules/ssr/frameworkAttrsWithValue/__tests__/frameworkAttrsWithValue.ssr-test.js create mode 100644 test/src/modules/ssr/frameworkAttrsWithValue/frameworkAttrsWithValue.css create mode 100644 test/src/modules/ssr/frameworkAttrsWithValue/frameworkAttrsWithValue.html create mode 100644 test/src/modules/ssr/frameworkAttrsWithValue/frameworkAttrsWithValue.js diff --git a/packages/@lwc/jest-preset/src/ssr/html-serializer.js b/packages/@lwc/jest-preset/src/ssr/html-serializer.js index 47100161..fbfc79d5 100644 --- a/packages/@lwc/jest-preset/src/ssr/html-serializer.js +++ b/packages/@lwc/jest-preset/src/ssr/html-serializer.js @@ -104,8 +104,10 @@ function formatHTML(src) { res .trim() .replace(getKnownScopeTokensRegex(), '__lwc_scope_token__') - // These special attributes are reserved by the framework and are meaningless to component authors - .replace(/ data-lwc-host-mutated/g, '') + // These special attributes are reserved by the framework and are meaningless to component authors. + // `data-lwc-host-mutated` may or may not have an attribute value depending on the version of LWC. + // See: https://github.com/salesforce/lwc/pull/4385 + .replace(/ data-lwc-host-mutated(="[^"]*")?/g, '') .replace(/ data-rendered-by-lwc/g, '') ); } diff --git a/test/src/modules/serializer/frameworkAttrsWithValue/__tests__/__snapshots__/frameworkAttrsWithValue.spec.js.snap b/test/src/modules/serializer/frameworkAttrsWithValue/__tests__/__snapshots__/frameworkAttrsWithValue.spec.js.snap new file mode 100644 index 00000000..f19cdf3d --- /dev/null +++ b/test/src/modules/serializer/frameworkAttrsWithValue/__tests__/__snapshots__/frameworkAttrsWithValue.spec.js.snap @@ -0,0 +1,9 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`serializes a component containing framework-supplied attributes 1`] = ` + +

+ Hello world +

+ +`; diff --git a/test/src/modules/serializer/frameworkAttrsWithValue/__tests__/frameworkAttrsWithValue.spec.js b/test/src/modules/serializer/frameworkAttrsWithValue/__tests__/frameworkAttrsWithValue.spec.js new file mode 100644 index 00000000..897eb949 --- /dev/null +++ b/test/src/modules/serializer/frameworkAttrsWithValue/__tests__/frameworkAttrsWithValue.spec.js @@ -0,0 +1,15 @@ +/* + * Copyright (c) 2024, Salesforce, Inc. + * All rights reserved. + * SPDX-License-Identifier: MIT + * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT + */ +import { createElement } from 'lwc'; +import FrameworkAttrsWithValue from '../frameworkAttrsWithValue'; + +it('serializes a component containing framework-supplied attributes', () => { + const elm = createElement('serializer-component', { is: FrameworkAttrsWithValue }); + document.body.appendChild(elm); + + expect(elm).toMatchSnapshot(); +}); diff --git a/test/src/modules/serializer/frameworkAttrsWithValue/frameworkAttrsWithValue.css b/test/src/modules/serializer/frameworkAttrsWithValue/frameworkAttrsWithValue.css new file mode 100644 index 00000000..03d0aca0 --- /dev/null +++ b/test/src/modules/serializer/frameworkAttrsWithValue/frameworkAttrsWithValue.css @@ -0,0 +1,3 @@ +h1 { + color: blue; +} diff --git a/test/src/modules/serializer/frameworkAttrsWithValue/frameworkAttrsWithValue.html b/test/src/modules/serializer/frameworkAttrsWithValue/frameworkAttrsWithValue.html new file mode 100644 index 00000000..77dc69f8 --- /dev/null +++ b/test/src/modules/serializer/frameworkAttrsWithValue/frameworkAttrsWithValue.html @@ -0,0 +1,3 @@ + diff --git a/test/src/modules/serializer/frameworkAttrsWithValue/frameworkAttrsWithValue.js b/test/src/modules/serializer/frameworkAttrsWithValue/frameworkAttrsWithValue.js new file mode 100644 index 00000000..e3b8cc7e --- /dev/null +++ b/test/src/modules/serializer/frameworkAttrsWithValue/frameworkAttrsWithValue.js @@ -0,0 +1,18 @@ +/* + * Copyright (c) 2018, salesforce.com, inc. + * All rights reserved. + * SPDX-License-Identifier: MIT + * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT + */ + +import { LightningElement } from 'lwc'; + +export default class FrameworkAttrsWithValue extends LightningElement { + static renderMode = 'light'; + + connectedCallback() { + // Typically this is only added by the framework itself, but here we are explicitly adding it + // to make the test simpler + this.setAttribute('data-lwc-host-mutated', 'class data-foo'); + } +} diff --git a/test/src/modules/ssr/frameworkAttrsWithValue/__tests__/__snapshots__/frameworkAttrsWithValue.ssr-test.js.snap b/test/src/modules/ssr/frameworkAttrsWithValue/__tests__/__snapshots__/frameworkAttrsWithValue.ssr-test.js.snap new file mode 100644 index 00000000..396d7793 --- /dev/null +++ b/test/src/modules/ssr/frameworkAttrsWithValue/__tests__/__snapshots__/frameworkAttrsWithValue.ssr-test.js.snap @@ -0,0 +1,12 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`serializes component with framework-supplied attributes with value 1`] = ` + + +

+ Hello world +

+ +`; diff --git a/test/src/modules/ssr/frameworkAttrsWithValue/__tests__/frameworkAttrsWithValue.ssr-test.js b/test/src/modules/ssr/frameworkAttrsWithValue/__tests__/frameworkAttrsWithValue.ssr-test.js new file mode 100644 index 00000000..79b0cdc2 --- /dev/null +++ b/test/src/modules/ssr/frameworkAttrsWithValue/__tests__/frameworkAttrsWithValue.ssr-test.js @@ -0,0 +1,14 @@ +/* + * Copyright (c) 2018, salesforce.com, inc. + * All rights reserved. + * SPDX-License-Identifier: MIT + * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT + */ +import { renderComponent } from 'lwc'; +import FrameworkAttrsWithValue from '../frameworkAttrsWithValue'; + +it('serializes component with framework-supplied attributes with value', () => { + const renderedComponent = renderComponent('x-basic', FrameworkAttrsWithValue, {}); + + expect(renderedComponent).toMatchSnapshot(); +}); diff --git a/test/src/modules/ssr/frameworkAttrsWithValue/frameworkAttrsWithValue.css b/test/src/modules/ssr/frameworkAttrsWithValue/frameworkAttrsWithValue.css new file mode 100644 index 00000000..03d0aca0 --- /dev/null +++ b/test/src/modules/ssr/frameworkAttrsWithValue/frameworkAttrsWithValue.css @@ -0,0 +1,3 @@ +h1 { + color: blue; +} diff --git a/test/src/modules/ssr/frameworkAttrsWithValue/frameworkAttrsWithValue.html b/test/src/modules/ssr/frameworkAttrsWithValue/frameworkAttrsWithValue.html new file mode 100644 index 00000000..77dc69f8 --- /dev/null +++ b/test/src/modules/ssr/frameworkAttrsWithValue/frameworkAttrsWithValue.html @@ -0,0 +1,3 @@ + diff --git a/test/src/modules/ssr/frameworkAttrsWithValue/frameworkAttrsWithValue.js b/test/src/modules/ssr/frameworkAttrsWithValue/frameworkAttrsWithValue.js new file mode 100644 index 00000000..e3b8cc7e --- /dev/null +++ b/test/src/modules/ssr/frameworkAttrsWithValue/frameworkAttrsWithValue.js @@ -0,0 +1,18 @@ +/* + * Copyright (c) 2018, salesforce.com, inc. + * All rights reserved. + * SPDX-License-Identifier: MIT + * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT + */ + +import { LightningElement } from 'lwc'; + +export default class FrameworkAttrsWithValue extends LightningElement { + static renderMode = 'light'; + + connectedCallback() { + // Typically this is only added by the framework itself, but here we are explicitly adding it + // to make the test simpler + this.setAttribute('data-lwc-host-mutated', 'class data-foo'); + } +} From ec41b3573446e2839dd8a9a4572c144d72df264c Mon Sep 17 00:00:00 2001 From: Nolan Lawson Date: Wed, 17 Jul 2024 08:08:27 -0700 Subject: [PATCH 2/2] v16.0.3 --- lerna.json | 2 +- packages/@lwc/jest-preset/package.json | 8 ++++---- packages/@lwc/jest-resolver/package.json | 4 ++-- packages/@lwc/jest-serializer/package.json | 4 ++-- packages/@lwc/jest-shared/package.json | 2 +- packages/@lwc/jest-transformer/package.json | 4 ++-- test/package.json | 2 +- 7 files changed, 13 insertions(+), 13 deletions(-) diff --git a/lerna.json b/lerna.json index 414764fe..b1a48cfb 100644 --- a/lerna.json +++ b/lerna.json @@ -6,5 +6,5 @@ }, "exact": true, "npmClient": "yarn", - "version": "16.0.2" + "version": "16.0.3" } diff --git a/packages/@lwc/jest-preset/package.json b/packages/@lwc/jest-preset/package.json index 5fd6d3cf..3aed41fb 100644 --- a/packages/@lwc/jest-preset/package.json +++ b/packages/@lwc/jest-preset/package.json @@ -1,6 +1,6 @@ { "name": "@lwc/jest-preset", - "version": "16.0.2", + "version": "16.0.3", "description": "Jest preset configuration and stubs to help test LWC", "homepage": "https://lwc.dev/", "repository": { @@ -31,9 +31,9 @@ "jest": "^26 || ^27 || ^28 || ^29" }, "dependencies": { - "@lwc/jest-resolver": "16.0.2", - "@lwc/jest-serializer": "16.0.2", - "@lwc/jest-transformer": "16.0.2" + "@lwc/jest-resolver": "16.0.3", + "@lwc/jest-serializer": "16.0.3", + "@lwc/jest-transformer": "16.0.3" }, "engines": { "node": ">=10" diff --git a/packages/@lwc/jest-resolver/package.json b/packages/@lwc/jest-resolver/package.json index 6e0e232e..d1fac32a 100644 --- a/packages/@lwc/jest-resolver/package.json +++ b/packages/@lwc/jest-resolver/package.json @@ -1,6 +1,6 @@ { "name": "@lwc/jest-resolver", - "version": "16.0.2", + "version": "16.0.3", "description": "Jest resolver to resolve LWC specific packages", "homepage": "https://lwc.dev/", "repository": { @@ -22,7 +22,7 @@ "/src/index.js" ], "dependencies": { - "@lwc/jest-shared": "16.0.2" + "@lwc/jest-shared": "16.0.3" }, "peerDependencies": { "jest": "^26 || ^27 || ^28 || ^29" diff --git a/packages/@lwc/jest-serializer/package.json b/packages/@lwc/jest-serializer/package.json index 1cc3e40a..0883cc6e 100644 --- a/packages/@lwc/jest-serializer/package.json +++ b/packages/@lwc/jest-serializer/package.json @@ -1,6 +1,6 @@ { "name": "@lwc/jest-serializer", - "version": "16.0.2", + "version": "16.0.3", "description": "Custom Jest snapshot serializer", "homepage": "https://lwc.dev/", "repository": { @@ -18,7 +18,7 @@ "lwc" ], "dependencies": { - "@lwc/jest-shared": "16.0.2", + "@lwc/jest-shared": "16.0.3", "pretty-format": "^29.7.0" }, "peerDependencies": { diff --git a/packages/@lwc/jest-shared/package.json b/packages/@lwc/jest-shared/package.json index f73132d5..b134d926 100644 --- a/packages/@lwc/jest-shared/package.json +++ b/packages/@lwc/jest-shared/package.json @@ -1,6 +1,6 @@ { "name": "@lwc/jest-shared", - "version": "16.0.2", + "version": "16.0.3", "description": "Shared internal code for LWC Jest packages", "homepage": "https://lwc.dev/", "repository": { diff --git a/packages/@lwc/jest-transformer/package.json b/packages/@lwc/jest-transformer/package.json index 28053c97..e3d211ff 100644 --- a/packages/@lwc/jest-transformer/package.json +++ b/packages/@lwc/jest-transformer/package.json @@ -1,6 +1,6 @@ { "name": "@lwc/jest-transformer", - "version": "16.0.2", + "version": "16.0.3", "description": "Jest transformer for LWC and engine", "homepage": "https://lwc.dev/", "repository": { @@ -28,7 +28,7 @@ "@babel/plugin-syntax-decorators": "^7.24.1", "@babel/plugin-transform-modules-commonjs": "^7.24.1", "@babel/preset-typescript": "^7.24.1", - "@lwc/jest-shared": "16.0.2", + "@lwc/jest-shared": "16.0.3", "babel-preset-jest": "^29.6.3", "magic-string": "^0.30.9", "semver": "^7.6.0" diff --git a/test/package.json b/test/package.json index 158f02eb..db062afd 100644 --- a/test/package.json +++ b/test/package.json @@ -1,6 +1,6 @@ { "name": "test", - "version": "16.0.2", + "version": "16.0.3", "private": "true", "scripts": { "test": "jest"