diff --git a/packages/@lwc/integration-not-karma/configs/integration.js b/packages/@lwc/integration-not-karma/configs/integration.js index 0ce6a84d5b..e0bbc1a342 100644 --- a/packages/@lwc/integration-not-karma/configs/integration.js +++ b/packages/@lwc/integration-not-karma/configs/integration.js @@ -13,12 +13,7 @@ const baseConfig = createConfig({ /** @type {import("@web/test-runner").TestRunnerConfig} */ export default { ...baseConfig, - files: [ - 'test/**/*.spec.js', - // Make John fix this after his PR is merged - '!test/template-expressions/errors/index.spec.js', - '!test/template-expressions/smoke-test/index.spec.js', - ], + files: ['test/**/*.spec.js'], plugins: [ ...baseConfig.plugins, importMapsPlugin({ inject: { importMap: { imports: { lwc: './mocks/lwc.js' } } } }), 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 491b2fe688..91d7e8c240 100644 --- a/packages/@lwc/integration-not-karma/configs/plugins/serve-integration.js +++ b/packages/@lwc/integration-not-karma/configs/plugins/serve-integration.js @@ -40,30 +40,35 @@ const createRollupPlugin = (input, options) => { const transform = async (ctx) => { const input = ctx.path.slice(1); // strip leading / from URL path to get relative file path - const defaultRollupPlugin = createRollupPlugin(input); + // Override the LWC rollup plugin config on a per-file basis by searching for a comment + // directive /*!WTR {...}*/ and parsing the content as JSON. The spec file acts as a default + // location to update the config for every component file. + let rootConfig = {}; + const configDirective = /(?:\/\*|)/s; + const parseConfig = (src, id) => { + const configStr = src.match(configDirective)?.[1]; + if (!configStr) { + return rootConfig; // default config if no overrides found + } + const config = JSON.parse(configStr); + // id is full file path, input is relative to the package dir + if (id.endsWith(`/${input}`)) { + // this is the test entrypoint + rootConfig = config; + } + return config; + }; + const customLwcRollupPlugin = { ...defaultRollupPlugin, transform(src, id) { - let transform; + const { apiVersion, nativeOnly } = parseConfig(src, id); - // Override the LWC Rollup plugin to specify different options based on file name patterns. - // This allows us to alter the API version or other compiler props on a filename-only basis. - const apiVersion = id.match(/useApiVersion(\d+)/)?.[1]; - const nativeOnly = /\.native-only\./.test(id); + let transform; if (apiVersion) { - // The original Karma tests only ever had filename-based config for API version 60. - // Filename-based config is a pattern we want to move away from, so this transform - // only works for that version, so that we could simplify the logic here. - if (apiVersion !== '60') { - throw new Error( - 'TODO: fully implement or remove support for filename-based API version' - ); - } - transform = createRollupPlugin(input, { - apiVersion: 60, - }).transform; + transform = createRollupPlugin(input, { apiVersion }).transform; } else if (nativeOnly) { transform = createRollupPlugin(input, { disableSyntheticShadowSupport: true, @@ -71,6 +76,7 @@ const transform = async (ctx) => { } else { transform = defaultRollupPlugin.transform; } + return transform.call(this, src, id); }, }; diff --git a/packages/@lwc/integration-not-karma/test/mixed-api-version/x/useApiVersion60/useApiVersion60.js b/packages/@lwc/integration-not-karma/test/mixed-api-version/x/useApiVersion60/useApiVersion60.js index 9e2ab67e8f..0fd2bb4b23 100644 --- a/packages/@lwc/integration-not-karma/test/mixed-api-version/x/useApiVersion60/useApiVersion60.js +++ b/packages/@lwc/integration-not-karma/test/mixed-api-version/x/useApiVersion60/useApiVersion60.js @@ -1,4 +1,5 @@ +// Per-file compiler config, used in configs/plugins/serve-integration.js +/*!WTR {"apiVersion": 60}*/ import { LightningElement } from 'lwc'; -// By naming this component `useApiVersion60` we tell Karma's LWC Rollup plugin to compile it with API version 60 export default class extends LightningElement {} diff --git a/packages/@lwc/integration-not-karma/test/rendering/native-only-css/x/light/chic.native-only.css b/packages/@lwc/integration-not-karma/test/rendering/native-only-css/x/light/chic.native-only.css index 3f7b51fab0..c22f3baea4 100644 --- a/packages/@lwc/integration-not-karma/test/rendering/native-only-css/x/light/chic.native-only.css +++ b/packages/@lwc/integration-not-karma/test/rendering/native-only-css/x/light/chic.native-only.css @@ -1,3 +1,5 @@ +/* Per-file compiler config, used in configs/plugins/serve-integration.js */ +/*!WTR {"nativeOnly": true}*/ div { --chic: 'native'; } diff --git a/packages/@lwc/integration-not-karma/test/rendering/native-only-css/x/light/snazzy.native-only.scoped.css b/packages/@lwc/integration-not-karma/test/rendering/native-only-css/x/light/snazzy.native-only.scoped.css index 20e1bf49d9..13c0165120 100644 --- a/packages/@lwc/integration-not-karma/test/rendering/native-only-css/x/light/snazzy.native-only.scoped.css +++ b/packages/@lwc/integration-not-karma/test/rendering/native-only-css/x/light/snazzy.native-only.scoped.css @@ -1,3 +1,5 @@ +/* Per-file compiler config, used in configs/plugins/serve-integration.js */ +/*!WTR {"nativeOnly": true}*/ div { --snazzy: 'native'; } diff --git a/packages/@lwc/integration-not-karma/test/rendering/native-only-css/x/shadow/chic.native-only.css b/packages/@lwc/integration-not-karma/test/rendering/native-only-css/x/shadow/chic.native-only.css index 3f7b51fab0..c22f3baea4 100644 --- a/packages/@lwc/integration-not-karma/test/rendering/native-only-css/x/shadow/chic.native-only.css +++ b/packages/@lwc/integration-not-karma/test/rendering/native-only-css/x/shadow/chic.native-only.css @@ -1,3 +1,5 @@ +/* Per-file compiler config, used in configs/plugins/serve-integration.js */ +/*!WTR {"nativeOnly": true}*/ div { --chic: 'native'; } diff --git a/packages/@lwc/integration-not-karma/test/rendering/native-only-css/x/shadow/snazzy.native-only.scoped.css b/packages/@lwc/integration-not-karma/test/rendering/native-only-css/x/shadow/snazzy.native-only.scoped.css index 20e1bf49d9..13c0165120 100644 --- a/packages/@lwc/integration-not-karma/test/rendering/native-only-css/x/shadow/snazzy.native-only.scoped.css +++ b/packages/@lwc/integration-not-karma/test/rendering/native-only-css/x/shadow/snazzy.native-only.scoped.css @@ -1,3 +1,5 @@ +/* Per-file compiler config, used in configs/plugins/serve-integration.js */ +/*!WTR {"nativeOnly": true}*/ div { --snazzy: 'native'; } diff --git a/packages/@lwc/integration-not-karma/test/rendering/native-only-css/x/styleLibrary/foo.native-only.css b/packages/@lwc/integration-not-karma/test/rendering/native-only-css/x/styleLibrary/foo.native-only.css index f7ae70e9e7..a9700555b7 100644 --- a/packages/@lwc/integration-not-karma/test/rendering/native-only-css/x/styleLibrary/foo.native-only.css +++ b/packages/@lwc/integration-not-karma/test/rendering/native-only-css/x/styleLibrary/foo.native-only.css @@ -1,3 +1,5 @@ +/* Per-file compiler config, used in configs/plugins/serve-integration.js */ +/*!WTR {"nativeOnly": true}*/ div { --foo: 'native'; } diff --git a/packages/@lwc/integration-not-karma/test/template-expressions/errors/index.spec.js b/packages/@lwc/integration-not-karma/test/template-expressions/errors/index.spec.js index 77903150f0..ca2123e3ec 100644 --- a/packages/@lwc/integration-not-karma/test/template-expressions/errors/index.spec.js +++ b/packages/@lwc/integration-not-karma/test/template-expressions/errors/index.spec.js @@ -1,15 +1,20 @@ +// Per-file compiler config, used in configs/plugins/serve-integration.js +/*!WTR {"apiVersion": 66}*/ import { createElement } from 'lwc'; import UndefinedMemberExpressionObjParent from 'x/undefinedMemberExpressionObjParent'; import ThrowDuringCallParent from 'x/throwDuringCallParent'; +import { API_VERSION } from '../../../helpers/options'; -it(`should handle member expression with undefined object`, () => { +const cteEnabled = API_VERSION >= 66; + +it.runIf(cteEnabled)(`should handle member expression with undefined object`, () => { const parent = createElement('x-parent', { is: UndefinedMemberExpressionObjParent }); document.body.appendChild(parent); expect(parent.caughtError).toContain('undefined'); }); -it(`should handle errors thrown during call expression`, () => { +it.runIf(cteEnabled)(`should handle errors thrown during call expression`, () => { const parent = createElement('x-parent', { is: ThrowDuringCallParent }); document.body.appendChild(parent); expect(parent.caughtError).toContain("I'm the Gingerbread man!"); diff --git a/packages/@lwc/integration-not-karma/test/template-expressions/smoke-test/index.spec.js b/packages/@lwc/integration-not-karma/test/template-expressions/smoke-test/index.spec.js index 1c1d44a939..f03bea6cf2 100644 --- a/packages/@lwc/integration-not-karma/test/template-expressions/smoke-test/index.spec.js +++ b/packages/@lwc/integration-not-karma/test/template-expressions/smoke-test/index.spec.js @@ -1,8 +1,13 @@ +// Per-file compiler config, used in configs/plugins/serve-integration.js +/*!WTR {"apiVersion": 66}*/ import { createElement } from 'lwc'; import Test from 'x/test'; +import { API_VERSION } from '../../../helpers/options'; -it(`should support call expressions`, () => { +const cteEnabled = API_VERSION >= 66; + +it.runIf(cteEnabled)(`should support call expressions`, () => { const elm = createElement('x-test', { is: Test }); document.body.appendChild(elm);