diff --git a/src/declarations/stencil-public-compiler.ts b/src/declarations/stencil-public-compiler.ts index 6a77afc73cd..a544d71c122 100644 --- a/src/declarations/stencil-public-compiler.ts +++ b/src/declarations/stencil-public-compiler.ts @@ -2004,6 +2004,14 @@ export interface TestingConfig extends JestConfig { * Amount of time in milliseconds to wait before a screenshot is taken. */ waitBeforeScreenshot?: number; + + /** + * Specify what type of Stencil compiler logs you want to see. + * Possible values: + * - error (default) + * - warn + */ + compilerLogLevel?: string; } export interface EmulateConfig { diff --git a/src/runtime/test/prop-warnings.spec.tsx b/src/runtime/test/prop-warnings.spec.tsx index cb60fe9e213..558ec585f6d 100644 --- a/src/runtime/test/prop-warnings.spec.tsx +++ b/src/runtime/test/prop-warnings.spec.tsx @@ -7,34 +7,70 @@ describe('prop', () => { afterEach(() => spy.mockReset()); afterAll(() => spy.mockRestore()); - it('should show warning when immutable prop is mutated', async () => { - @Component({ tag: 'cmp-a' }) - class CmpA { - @Prop() a = 1; - - @Method() - async update() { - this.a = 2; + describe('by default', () => { + it('should not show warning when immutable prop is mutated', async () => { + @Component({ tag: 'cmp-a' }) + class CmpA { + @Prop() a = 1; + + @Method() + async update() { + this.a = 2; + } + + render() { + return `${this.a}`; + } } - render() { - return `${this.a}`; - } - } + const { root, waitForChanges } = await newSpecPage({ + components: [CmpA], + html: ``, + }); - const { root, waitForChanges } = await newSpecPage({ - components: [CmpA], - html: ``, + expect(root).toEqualHtml('1'); + + await root.update(); + await waitForChanges(); + + expect(root).toEqualHtml('2'); + expect(spy).not.toHaveBeenCalled(); }); + }); - expect(root).toEqualHtml('1'); + describe('when compilerLogLevel is set to "warn"', () => { + beforeEach(() => (process.env.__STENCIL_TEST_LOGLEVEL = 'warn')); + afterEach(() => delete process.env.__STENCIL_TEST_LOGLEVEL); - await root.update(); - await waitForChanges(); + it('should show warning when immutable prop is mutated', async () => { + @Component({ tag: 'cmp-a' }) + class CmpA { + @Prop() a = 1; - expect(root).toEqualHtml('2'); - expect(spy).toHaveBeenCalledTimes(1); - expect(spy.mock.calls[0][0]).toMatch(/@Prop\(\) "[A-Za-z-]+" on <[A-Za-z-]+> is immutable/); + @Method() + async update() { + this.a = 2; + } + + render() { + return `${this.a}`; + } + } + + const { root, waitForChanges } = await newSpecPage({ + components: [CmpA], + html: ``, + }); + + expect(root).toEqualHtml('1'); + + await root.update(); + await waitForChanges(); + + expect(root).toEqualHtml('2'); + expect(spy).toHaveBeenCalledTimes(1); + expect(spy.mock.calls[0][0]).toMatch(/@Prop\(\) "[A-Za-z-]+" on <[A-Za-z-]+> is immutable/); + }); }); it('should not show warning when mutable prop is mutated', async () => { diff --git a/src/testing/platform/testing-log.ts b/src/testing/platform/testing-log.ts index c1a2711dddf..2fb17dbca78 100644 --- a/src/testing/platform/testing-log.ts +++ b/src/testing/platform/testing-log.ts @@ -2,6 +2,7 @@ import type * as d from '../../declarations'; import { caughtErrors } from './testing-constants'; let customError: d.ErrorHandler | undefined; +const LOG_LEVELS: string[] = ['warn', 'error']; const defaultConsoleError = (e: any) => { caughtErrors.push(e); @@ -10,13 +11,17 @@ const defaultConsoleError = (e: any) => { export const consoleError: d.ErrorHandler = (e: any, el?: any) => (customError || defaultConsoleError)(e, el); export const consoleDevError = (...e: any[]) => { - caughtErrors.push(new Error(e.join(', '))); + if (allowLog('error')) { + caughtErrors.push(new Error(e.join(', '))); + } }; export const consoleDevWarn = (...args: any[]) => { - // log warnings so we can spy on them when testing - const params = args.filter((a) => typeof a === 'string' || typeof a === 'number' || typeof a === 'boolean'); - console.warn(...params); + if (allowLog('warn')) { + // log warnings so we can spy on them when testing + const params = args.filter((a) => typeof a === 'string' || typeof a === 'number' || typeof a === 'boolean'); + console.warn(...params); + } }; export const consoleDevInfo = (..._: any[]) => { @@ -24,3 +29,7 @@ export const consoleDevInfo = (..._: any[]) => { }; export const setErrorHandler = (handler: d.ErrorHandler | undefined) => (customError = handler); + +function allowLog(log: string): boolean { + return LOG_LEVELS.indexOf(log) >= LOG_LEVELS.indexOf(process.env.__STENCIL_TEST_LOGLEVEL ?? 'error'); +} diff --git a/src/testing/testing.ts b/src/testing/testing.ts index f932453ce89..9ef9956f3ab 100644 --- a/src/testing/testing.ts +++ b/src/testing/testing.ts @@ -236,5 +236,9 @@ function setupTestingConfig(validatedConfig: ValidatedConfig): ValidatedConfig { validatedConfig.watch = true; } + if (validatedConfig?.testing?.compilerLogLevel) { + process.env.__STENCIL_TEST_LOGLEVEL = validatedConfig.testing.compilerLogLevel.toLowerCase().trim(); + } + return validatedConfig; }