From e962842fa6592f79ff83f86461ec4d64d5d3d2db Mon Sep 17 00:00:00 2001 From: Andrew Kushnir Date: Fri, 11 Nov 2022 15:08:55 -0800 Subject: [PATCH] test(common): add e2e tests for the fill mode checks in the NgOptimizedImage directive (#48036) This commit adds extra e2e tests for the fill mode checks in the NgOptimizedImage directive to make sure a warning is logged in a console. PR Close #48036 --- .../ng_optimized_image/ng_optimized_image.ts | 5 ++- .../test/bundling/image-directive/BUILD.bazel | 1 + .../e2e/fill-mode/fill-mode.e2e-spec.ts | 45 +++++++++++++++++++ .../e2e/fill-mode/fill-mode.ts | 36 +++++++++++++++ .../image-distortion.e2e-spec.ts | 2 +- .../test/bundling/image-directive/index.ts | 3 ++ 6 files changed, 89 insertions(+), 3 deletions(-) create mode 100644 packages/core/test/bundling/image-directive/e2e/fill-mode/fill-mode.e2e-spec.ts create mode 100644 packages/core/test/bundling/image-directive/e2e/fill-mode/fill-mode.ts diff --git a/packages/common/src/directives/ng_optimized_image/ng_optimized_image.ts b/packages/common/src/directives/ng_optimized_image/ng_optimized_image.ts index 1372201ae1016..3a25e75fedcce 100644 --- a/packages/common/src/directives/ng_optimized_image/ng_optimized_image.ts +++ b/packages/common/src/directives/ng_optimized_image/ng_optimized_image.ts @@ -877,8 +877,9 @@ function assertNonZeroRenderedHeight( RuntimeErrorCode.INVALID_INPUT, `${imgDirectiveDetails(dir.ngSrc)} the height of the fill-mode image is zero. ` + `This is likely because the containing element does not have the CSS 'position' ` + - `property set to one of the following: "relative", "fixed", or "absolute". Make this ` + - `change to ensure that the image is visible.`)); + `property set to one of the following: "relative", "fixed", or "absolute". ` + + `To fix this problem, make sure the container element has the CSS 'position' ` + + `property defined and the height of the element is not zero.`)); } }); } diff --git a/packages/core/test/bundling/image-directive/BUILD.bazel b/packages/core/test/bundling/image-directive/BUILD.bazel index f4acc41c4a969..7787657e27dbd 100644 --- a/packages/core/test/bundling/image-directive/BUILD.bazel +++ b/packages/core/test/bundling/image-directive/BUILD.bazel @@ -6,6 +6,7 @@ ng_module( name = "image-directive", srcs = [ "e2e/basic/basic.ts", + "e2e/fill-mode/fill-mode.ts", "e2e/image-distortion/image-distortion.ts", "e2e/lcp-check/lcp-check.ts", "e2e/oversized-image/oversized-image.ts", diff --git a/packages/core/test/bundling/image-directive/e2e/fill-mode/fill-mode.e2e-spec.ts b/packages/core/test/bundling/image-directive/e2e/fill-mode/fill-mode.e2e-spec.ts new file mode 100644 index 0000000000000..ed5f7f5306ddc --- /dev/null +++ b/packages/core/test/bundling/image-directive/e2e/fill-mode/fill-mode.e2e-spec.ts @@ -0,0 +1,45 @@ +/** + * @license + * Copyright Google LLC All Rights Reserved. + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://angular.io/license + */ + +/* tslint:disable:no-console */ +import {browser} from 'protractor'; +import {logging} from 'selenium-webdriver'; + +import {collectBrowserLogs} from '../browser-logs-util'; + +describe('NgOptimizedImage directive', () => { + it('should not warn when an image in the fill mode is rendered correctly', async () => { + await browser.get('/e2e/fill-mode-passing'); + const logs = await collectBrowserLogs(logging.Level.WARNING); + expect(logs.length).toEqual(0); + }); + + it('should warn if an image in the fill mode has zero height after rendering', async () => { + await browser.get('/e2e/fill-mode-failing'); + const logs = await collectBrowserLogs(logging.Level.WARNING); + + expect(logs.length).toEqual(1); + // Image loading order is not guaranteed, so all logs, rather than single entry + // needs to be checked in order to test whether a given error message is present. + const expectErrorMessageInLogs = (logs: logging.Entry[], message: string) => { + expect(logs.some((log) => { + return log.message.includes(message); + })).toBeTruthy(); + }; + + expectErrorMessageInLogs( + logs, + 'NG02952: The NgOptimizedImage directive (activated on an \\u003Cimg> element ' + + 'with the `ngSrc=\\"/e2e/logo-500w.jpg\\"`) has detected that the height ' + + 'of the fill-mode image is zero. This is likely because the containing element ' + + 'does not have the CSS \'position\' property set to one of the following: ' + + '\\"relative\\", \\"fixed\\", or \\"absolute\\". To fix this problem, ' + + 'make sure the container element has the CSS \'position\' ' + + 'property defined and the height of the element is not zero.'); + }); +}); diff --git a/packages/core/test/bundling/image-directive/e2e/fill-mode/fill-mode.ts b/packages/core/test/bundling/image-directive/e2e/fill-mode/fill-mode.ts new file mode 100644 index 0000000000000..83202d045a9b0 --- /dev/null +++ b/packages/core/test/bundling/image-directive/e2e/fill-mode/fill-mode.ts @@ -0,0 +1,36 @@ +/** + * @license + * Copyright Google LLC All Rights Reserved. + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://angular.io/license + */ + +import {NgOptimizedImage} from '@angular/common'; +import {Component} from '@angular/core'; + +@Component({ + selector: 'fill-mode-passing', + standalone: true, + imports: [NgOptimizedImage], + template: ` + +
+ +
+ `, +}) +export class FillModePassingComponent { +} +@Component({ + selector: 'fill-mode-failing', + standalone: true, + imports: [NgOptimizedImage], + template: ` +
+ +
+ `, +}) +export class FillModeFailingComponent { +} diff --git a/packages/core/test/bundling/image-directive/e2e/image-distortion/image-distortion.e2e-spec.ts b/packages/core/test/bundling/image-directive/e2e/image-distortion/image-distortion.e2e-spec.ts index caadd349cfb22..a057ee9588f4d 100644 --- a/packages/core/test/bundling/image-directive/e2e/image-distortion/image-distortion.e2e-spec.ts +++ b/packages/core/test/bundling/image-directive/e2e/image-distortion/image-distortion.e2e-spec.ts @@ -7,7 +7,7 @@ */ /* tslint:disable:no-console */ -import {browser, by, element, ExpectedConditions} from 'protractor'; +import {browser} from 'protractor'; import {logging} from 'selenium-webdriver'; import {collectBrowserLogs} from '../browser-logs-util'; diff --git a/packages/core/test/bundling/image-directive/index.ts b/packages/core/test/bundling/image-directive/index.ts index 5586e11a28f94..f676e7335ad0a 100644 --- a/packages/core/test/bundling/image-directive/index.ts +++ b/packages/core/test/bundling/image-directive/index.ts @@ -11,6 +11,7 @@ import {bootstrapApplication, provideProtractorTestingSupport} from '@angular/pl import {RouterModule} from '@angular/router'; import {BasicComponent} from './e2e/basic/basic'; +import {FillModeFailingComponent, FillModePassingComponent} from './e2e/fill-mode/fill-mode'; import {ImageDistortionFailingComponent, ImageDistortionPassingComponent} from './e2e/image-distortion/image-distortion'; import {LcpCheckComponent} from './e2e/lcp-check/lcp-check'; import {OversizedImageComponentFailing, OversizedImageComponentPassing} from './e2e/oversized-image/oversized-image'; @@ -38,6 +39,8 @@ const ROUTES = [ {path: 'e2e/image-distortion-failing', component: ImageDistortionFailingComponent}, {path: 'e2e/oversized-image-passing', component: OversizedImageComponentPassing}, {path: 'e2e/oversized-image-failing', component: OversizedImageComponentFailing}, + {path: 'e2e/fill-mode-passing', component: FillModePassingComponent}, + {path: 'e2e/fill-mode-failing', component: FillModeFailingComponent}, ]; bootstrapApplication(RootComponent, {