Skip to content

Commit

Permalink
fix(common): improve formatting of image warnings (#47299)
Browse files Browse the repository at this point in the history 
This is a tiny fix to add paragraph breaks in
image distortion warnings to make them a bit
easier to read. With this change, the intrinsic
and rendered image sizes are printed on their
own lines instead of mid-paragraph.

PR Close #47299
  • Loading branch information
@kara @AndrewKushnir
kara authored and AndrewKushnir committed Sep 6, 2022
1 parent 0d337c9 commit c0d7ac9
Show file tree
Hide file tree
Showing 2 changed files with 21 additions and 21 deletions.
12 changes: 6 additions & 6 deletions packages/common/src/directives/ng_optimized_image/ng_optimized_image.ts
View file
Expand Up @@ -585,19 +585,19 @@ function assertNoImageDistortion(
RuntimeErrorCode.INVALID_INPUT,
`${imgDirectiveDetails(dir.rawSrc)} the aspect ratio of the image does not match ` +
`the aspect ratio indicated by the width and height attributes. ` +
`Intrinsic image size: ${intrinsicWidth}w x ${intrinsicHeight}h ` +
`(aspect-ratio: ${intrinsicAspectRatio}). Supplied width and height attributes: ` +
`\nIntrinsic image size: ${intrinsicWidth}w x ${intrinsicHeight}h ` +
`(aspect-ratio: ${intrinsicAspectRatio}). \nSupplied width and height attributes: ` +
`${suppliedWidth}w x ${suppliedHeight}h (aspect-ratio: ${suppliedAspectRatio}). ` +
`To fix this, update the width and height attributes.`));
`\nTo fix this, update the width and height attributes.`));
} else if (stylingDistortion) {
console.warn(formatRuntimeError(
RuntimeErrorCode.INVALID_INPUT,
`${imgDirectiveDetails(dir.rawSrc)} the aspect ratio of the rendered image ` +
`does not match the image's intrinsic aspect ratio. ` +
`Intrinsic image size: ${intrinsicWidth}w x ${intrinsicHeight}h ` +
`(aspect-ratio: ${intrinsicAspectRatio}). Rendered image size: ` +
`\nIntrinsic image size: ${intrinsicWidth}w x ${intrinsicHeight}h ` +
`(aspect-ratio: ${intrinsicAspectRatio}). \nRendered image size: ` +
`${renderedWidth}w x ${renderedHeight}h (aspect-ratio: ` +
`${renderedAspectRatio}). This issue can occur if "width" and "height" ` +
`${renderedAspectRatio}). \nThis issue can occur if "width" and "height" ` +
`attributes are added to an image without updating the corresponding ` +
`image styling. To fix this, adjust image styling. In most cases, ` +
`adding "height: auto" or "width: auto" to the image styling will fix ` +
Expand Down
30 changes: 15 additions & 15 deletions ...ages/core/test/bundling/image-directive/e2e/image-distortion/image-distortion.e2e-spec.ts
View file
Expand Up @@ -38,28 +38,28 @@ describe('NgOptimizedImage directive', () => {
'The NgOptimizedImage directive (activated on an \\u003Cimg> element ' +
'with the \`rawSrc=\\"/e2e/b.png\\"`) has detected that ' +
'the aspect ratio of the image does not match the aspect ratio indicated by the width and height attributes. ' +
'Intrinsic image size: 250w x 250h (aspect-ratio: 1). ' +
'Supplied width and height attributes: 26w x 30h (aspect-ratio: 0.8666666666666667). ' +
'To fix this, update the width and height attributes.');
'\\nIntrinsic image size: 250w x 250h (aspect-ratio: 1). ' +
'\\nSupplied width and height attributes: 26w x 30h (aspect-ratio: 0.8666666666666667). ' +
'\\nTo fix this, update the width and height attributes.');

expectErrorMessageInLogs(
logs,
'The NgOptimizedImage directive (activated on an \\u003Cimg> element ' +
'with the \`rawSrc=\\"/e2e/b.png\\"`) has detected that ' +
'the aspect ratio of the image does not match the aspect ratio indicated by the width and height attributes. ' +
'Intrinsic image size: 250w x 250h (aspect-ratio: 1). ' +
'Supplied width and height attributes: 24w x 240h (aspect-ratio: 0.1). ' +
'To fix this, update the width and height attributes.');
'\\nIntrinsic image size: 250w x 250h (aspect-ratio: 1). ' +
'\\nSupplied width and height attributes: 24w x 240h (aspect-ratio: 0.1). ' +
'\\nTo fix this, update the width and height attributes.');

// Images with incorrect styling
expectErrorMessageInLogs(
logs,
'The NgOptimizedImage directive (activated on an \\u003Cimg> element ' +
'with the \`rawSrc=\\"/e2e/b.png\\"`) has detected that ' +
'the aspect ratio of the rendered image does not match the image\'s intrinsic aspect ratio. ' +
'Intrinsic image size: 250w x 250h (aspect-ratio: 1). ' +
'Rendered image size: 250w x 30h (aspect-ratio: 8.333333333333334). ' +
'This issue can occur if \\"width\\" and \\"height\\" attributes are added to an image ' +
'\\nIntrinsic image size: 250w x 250h (aspect-ratio: 1). ' +
'\\nRendered image size: 250w x 30h (aspect-ratio: 8.333333333333334). ' +
'\\nThis issue can occur if \\"width\\" and \\"height\\" attributes are added to an image ' +
'without updating the corresponding image styling. To fix this, adjust image styling. In most cases, ' +
'adding \\"height: auto\\" or \\"width: auto\\" to the image styling will fix this issue.');

Expand All @@ -68,9 +68,9 @@ describe('NgOptimizedImage directive', () => {
'The NgOptimizedImage directive (activated on an \\u003Cimg> element ' +
'with the \`rawSrc=\\"/e2e/b.png\\"`) has detected that ' +
'the aspect ratio of the rendered image does not match the image\'s intrinsic aspect ratio. ' +
'Intrinsic image size: 250w x 250h (aspect-ratio: 1). ' +
'Rendered image size: 30w x 250h (aspect-ratio: 0.12). ' +
'This issue can occur if \\"width\\" and \\"height\\" attributes are added to an image ' +
'\\nIntrinsic image size: 250w x 250h (aspect-ratio: 1). ' +
'\\nRendered image size: 30w x 250h (aspect-ratio: 0.12). ' +
'\\nThis issue can occur if \\"width\\" and \\"height\\" attributes are added to an image ' +
'without updating the corresponding image styling. To fix this, adjust image styling. In most cases, ' +
'adding \\"height: auto\\" or \\"width: auto\\" to the image styling will fix this issue.');

Expand All @@ -82,8 +82,8 @@ describe('NgOptimizedImage directive', () => {
'The NgOptimizedImage directive (activated on an \\u003Cimg> element ' +
'with the \`rawSrc=\\"/e2e/b.png\\"`) has detected that ' +
'the aspect ratio of the image does not match the aspect ratio indicated by the width and height attributes. ' +
'Intrinsic image size: 250w x 250h (aspect-ratio: 1). ' +
'Supplied width and height attributes: 150w x 250h (aspect-ratio: 0.6). ' +
'To fix this, update the width and height attributes.');
'\\nIntrinsic image size: 250w x 250h (aspect-ratio: 1). ' +
'\\nSupplied width and height attributes: 150w x 250h (aspect-ratio: 0.6). ' +
'\\nTo fix this, update the width and height attributes.');
});
});

0 comments on commit c0d7ac9

Please sign in to comment.