test(common): add e2e tests for the fill mode checks in the NgOptimiz…

…edImage directive (angular#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 angular#48036

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.`));
     }
   });
 }

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",

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.');
+  });
+});

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: `
+    <!-- Make sure an image in the fill mode has the size of a container -->
+    <div style="position: absolute; width: 100px; height: 100px;">
+      <img ngSrc="/e2e/logo-500w.jpg" fill priority>
+    </div>
+  `,
+})
+export class FillModePassingComponent {
+}
+@Component({
+  selector: 'fill-mode-failing',
+  standalone: true,
+  imports: [NgOptimizedImage],
+  template: `
+    <div style="position: relative; width: 100%;">
+      <img ngSrc="/e2e/logo-500w.jpg" fill priority>
+    </div>
+  `,
+})
+export class FillModeFailingComponent {
+}

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

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, {