fix(compiler): add flag to silence compiler warnings during testing

Add "compilerLogLevel" flag to the testing config to specify which type
of dev console logs will appear during automated tests. The default level
is set to "error" so only compiler errors will appear and warnings will be
suppressed.

src/declarations/stencil-public-compiler.ts

@@ -1728,6 +1728,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 {

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: `<cmp-a></cmp-a>`,
+      });
 
-    const { root, waitForChanges } = await newSpecPage({
-      components: [CmpA],
-      html: `<cmp-a></cmp-a>`,
+      expect(root).toEqualHtml('<cmp-a>1</cmp-a>');
+
+      await root.update();
+      await waitForChanges();
+
+      expect(root).toEqualHtml('<cmp-a>2</cmp-a>');
+      expect(spy).not.toHaveBeenCalled();
     });
+  });
 
-    expect(root).toEqualHtml('<cmp-a>1</cmp-a>');
+  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('<cmp-a>2</cmp-a>');
-    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: `<cmp-a></cmp-a>`,
+      });
+
+      expect(root).toEqualHtml('<cmp-a>1</cmp-a>');
+
+      await root.update();
+      await waitForChanges();
+
+      expect(root).toEqualHtml('<cmp-a>2</cmp-a>');
+      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 () => {

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;
+const LOG_LEVELS: string[] = ['warn', 'error'];
 
 const defaultConsoleError = (e: any) => {
   caughtErrors.push(e);
@@ -10,17 +11,25 @@ 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[]) => {
   /* noop for testing */
 };
 
 export const setErrorHandler = (handler: d.ErrorHandler) => (customError = handler);
+
+function allowLog(log: string): boolean {
+  return LOG_LEVELS.indexOf(log) >= LOG_LEVELS.indexOf(process.env.__STENCIL_TEST_LOGLEVEL ?? 'error');
+}

src/testing/testing.ts

@@ -217,5 +217,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;
 }