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

amylo · 2022-10-16T01:54:19Z

Add compilerLogLevel flag to the Stencil testing config to specify which type of compiler console logs will appear during automated tests. By default, the level is set to "error" so only compiler errors will appear and console warnings will be suppressed. If developers wish to see console warnings again, they simply set compilerLogLevel: 'warn' in their Stencil testing config.

Pull request checklist

Please check if your PR fulfills the following requirements:

Tests for the changes have been added (for bug fixes / features)
Docs have been reviewed and added / updated if needed (for bug fixes / features)
Build (npm run build) was run locally and any changes were pushed
Unit tests (npm test) were run locally and passed
E2E Tests (npm run test.karma.prod) were run locally and passed
Prettier (npm run prettier) was run locally and passed

Pull request type

Please check the type of change your PR introduces:

What is the current behavior?

When executing unit tests for components, the Stencil compiler warns that a property "was modified from within the component" when the developer is simply trying to put their component into a specific state in order to test it. These console warnings end up flooding the terminal making it difficult for the developer to work on their component's unit tests.

GitHub Issue Number: #2832

What is the new behavior?

The default behaviour will suppress Stencil compiler's console warnings
If the developer wishes to see the Stencil compiler's console warnings during testing, they have to set a property in their Stencil.config.ts file, testing.compilerLogLevel to 'warn':

export const config: Config = {
  testing: {
    compilerLogLevel: 'warn'
  }
  ...
};

console errors will continue to display

Does this introduce a breaking change?

Yes
No

Testing

I tested this change by creating a repository with a Stencil component that had a Prop. In the component's unit test, I modify that Prop to another value and verify that my terminal did not display any Stencil compiler warning.

Then I updated the Stencil.config.ts file testing config with compilerLogLevel: 'warn' and ran the unit test again, this time I saw the Stencil compiler warning:

@Prop() \"buttonRole\" on <my-button> is immutable but was modified from within the component.
    More information: https://stenciljs.com/docs/properties#prop-mutability

Other information

github-actions · 2022-10-16T01:56:18Z

@stencil/[email protected] ts
tsc --noEmit --project scripts/tsconfig.json && tsx scripts/tech-debt-burndown-report.ts

`--strictNullChecks` error report

Typechecking with --strictNullChecks resulted in 1084 errors on this branch.

That's the same number of errors on main, so at least we're not creating new ones!

reports and statistics

Our most error-prone files

Path	Error Count
src/dev-server/index.ts	37
src/dev-server/server-process.ts	32
src/compiler/prerender/prerender-main.ts	22
src/runtime/vdom/vdom-render.ts	21
src/runtime/client-hydrate.ts	20
src/screenshot/connector-base.ts	19
src/testing/puppeteer/puppeteer-element.ts	19
src/dev-server/request-handler.ts	15
src/runtime/connected-callback.ts	15
src/compiler/prerender/prerender-optimize.ts	14
src/compiler/sys/stencil-sys.ts	14
src/sys/node/node-sys.ts	14
src/compiler/prerender/prerender-queue.ts	13
src/compiler/sys/in-memory-fs.ts	13
src/runtime/set-value.ts	13
src/compiler/output-targets/output-www.ts	12
src/compiler/transformers/test/parse-vdom.spec.ts	12
src/compiler/transformers/transform-utils.ts	12
src/mock-doc/test/attribute.spec.ts	12
src/compiler/build/compiler-ctx.ts	11

Our most common errors

Typescript Error Code	Count
TS2322	352
TS2345	333
TS18048	193
TS18047	76
TS2722	27
TS2532	24
TS2531	19
TS2454	14
TS2790	11
TS2352	9
TS2769	8
TS2416	7
TS2538	4
TS2493	3
TS18046	2
TS2684	1
TS2430	1

Unused exports report

There are 15 unused exports on this PR. That's the same number of errors on main, so at least we're not creating new ones!

Unused exports

File	Line	Identifier
src/runtime/bootstrap-lazy.ts	21	setNonce
src/screenshot/screenshot-fs.ts	18	readScreenshotData
src/testing/testing-utils.ts	198	withSilentWarn
src/utils/index.ts	145	CUSTOM
src/utils/index.ts	245	NODE_TYPES
src/utils/index.ts	269	normalize
src/utils/index.ts	7	escapeRegExpSpecialCharacters
src/compiler/app-core/app-data.ts	25	BUILD
src/compiler/app-core/app-data.ts	116	Env
src/compiler/app-core/app-data.ts	118	NAMESPACE
src/compiler/fs-watch/fs-watch-rebuild.ts	123	updateCacheFromRebuild
src/compiler/types/validate-primary-package-output-target.ts	82	satisfies
src/compiler/types/validate-primary-package-output-target.ts	82	Record
src/testing/puppeteer/puppeteer-declarations.ts	496	WaitForEventOptions
src/compiler/sys/fetch/write-fetch-success.ts	7	writeFetchSuccessSync

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.

github-actions · 2024-06-19T15:10:00Z

PR built and packed!

Download the tarball here: https://github.com/ionic-team/stencil/actions/runs/9584393369/artifacts/1617558252

If your browser saves files to ~/Downloads you can install it like so:

unzip -d ~/Downloads ~/Downloads/stencil-core-4.18.3-dev.1718809754.ebcb17a.tgz.zip && npm install ~/Downloads/stencil-core-4.18.3-dev.1718809754.ebcb17a.tgz

christian-bromann

Thanks @amylo for raising the PR. I've have some comments to improve type safety and user input correctness.

christian-bromann · 2024-06-20T18:43:13Z

src/declarations/stencil-public-compiler.ts

+   *  - error (default)
+   *  - warn
+   */
+  compilerLogLevel?: string;


Suggested change

compilerLogLevel?: string;

compilerLogLevel?: 'error' | 'warn';

christian-bromann · 2024-06-20T18:43:47Z

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'];


Instead of string[] can we use the types defined above?

christian-bromann · 2024-06-20T18:47:15Z

src/testing/platform/testing-log.ts

 };

 export const consoleDevInfo = (..._: any[]) => {
  /* noop for testing */
 };

 export const setErrorHandler = (handler: d.ErrorHandler | undefined) => (customError = handler);
+
+function allowLog(log: string): boolean {


Can we add a validation here to ensure the user input is correct?

amylo requested a review from a team as a code owner October 16, 2022 01:54

amylo force-pushed the bugfix/2832 branch from 384990f to 3598681 Compare October 16, 2022 04:21

rwaskiewicz added the triage label Oct 17, 2022

rwaskiewicz removed the triage label Feb 10, 2023

Merge branch 'main' into bugfix/2832

88f4934

christian-bromann requested changes Jun 20, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

amylo commented Oct 16, 2022

github-actions bot commented Oct 16, 2022 •

edited

Loading

github-actions bot commented Jun 19, 2024

christian-bromann left a comment

christian-bromann Jun 20, 2024

christian-bromann Jun 20, 2024

christian-bromann Jun 20, 2024

	compilerLogLevel?: string;
	compilerLogLevel?: 'error' \| 'warn';

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

Are you sure you want to change the base?

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

Conversation

amylo commented Oct 16, 2022

Pull request checklist

Pull request type

What is the current behavior?

What is the new behavior?

Does this introduce a breaking change?

Testing

Other information

github-actions bot commented Oct 16, 2022 • edited Loading

--strictNullChecks error report

reports and statistics

Unused exports report

github-actions bot commented Jun 19, 2024

PR built and packed!

christian-bromann left a comment

Choose a reason for hiding this comment

christian-bromann Jun 20, 2024

Choose a reason for hiding this comment

christian-bromann Jun 20, 2024

Choose a reason for hiding this comment

christian-bromann Jun 20, 2024

Choose a reason for hiding this comment

github-actions bot commented Oct 16, 2022 •

edited

Loading

`--strictNullChecks` error report