refactor(common): minor NgOptimizedImage directive updates (#47082)

This commit contains a set of small changes based on the feedback received in #47082.

PR Close #47082

packages/common/src/directives/ng_optimized_image/lcp_image_observer.ts

@@ -57,7 +57,9 @@ export class LCPImageObserver implements OnDestroy {
       // a page, by virtue of being the only thing on the page so far, is often a LCP candidate
       // and gets reported by PerformanceObserver, but isn't necessarily the LCP element.
       const lcpElement = entries[entries.length - 1];
-      // Cast to `any` due to missing `element` on observed type of entry.
+
+      // Cast to `any` due to missing `element` on the `LargestContentfulPaint` type of entry.
+      // See https://developer.mozilla.org/en-US/docs/Web/API/LargestContentfulPaint
       const imgSrc = (lcpElement as any).element?.src ?? '';
 
       // Exclude `data:` and `blob:` URLs, since they are not supported by the directive.

packages/common/src/directives/ng_optimized_image/ng_optimized_image.ts

@@ -277,7 +277,7 @@ export class NgOptimizedImage implements OnInit, OnChanges, OnDestroy {
         // Monitor whether an image is an LCP element only in case
         // the `priority` attribute is missing. Otherwise, an image
         // has the necessary settings and no extra checks are required.
-        withLCPImageObserver(
+        invokeLCPImageObserverCallback(
             this.injector,
             (observer: LCPImageObserver) =>
                 observer.registerImage(this.getRewrittenSrc(), this.rawSrc));
@@ -345,7 +345,7 @@ export class NgOptimizedImage implements OnInit, OnChanges, OnDestroy {
   ngOnDestroy() {
     if (ngDevMode) {
       if (!this.priority && this._renderedSrc !== null) {
-        withLCPImageObserver(
+        invokeLCPImageObserverCallback(
             this.injector,
             (observer: LCPImageObserver) => observer.unregisterImage(this._renderedSrc!));
       }
@@ -383,7 +383,7 @@ function inputToBoolean(value: unknown): boolean {
  *   NgZone to make sure none of the calls inside the `LCPImageObserver` class trigger unnecessary
  *   change detection
  */
-function withLCPImageObserver(
+function invokeLCPImageObserverCallback(
     injector: Injector, operation: (observer: LCPImageObserver) => void): void {
   const ngZone = injector.get(NgZone);
   return ngZone.runOutsideAngular(() => {

packages/core/test/bundling/image-directive/BUILD.bazel

@@ -68,7 +68,7 @@ ts_devserver(
 ts_library(
     name = "img_dir_e2e_tests_lib",
     testonly = True,
-    srcs = ["e2e/util.ts"] + glob([
+    srcs = ["e2e/browser-logs-util.ts"] + glob([
         "e2e/**/*.e2e-spec.ts",
     ]),
     tsconfig = ":e2e/tsconfig-e2e.json",

packages/core/test/bundling/image-directive/e2e/basic/basic.e2e-spec.ts

@@ -9,7 +9,7 @@
 import {browser, by, element} from 'protractor';
 import {logging} from 'selenium-webdriver';
 
-import {collectBrowserLogs} from '../util';
+import {collectBrowserLogs} from '../browser-logs-util';
 
 describe('NgOptimizedImage directive', () => {
   it('should render an image with an updated `src`', async () => {

packages/core/test/bundling/image-directive/e2e/image-distortion/image-distortion.e2e-spec.ts

@@ -10,7 +10,7 @@
 import {browser, by, element, ExpectedConditions} from 'protractor';
 import {logging} from 'selenium-webdriver';
 
-import {collectBrowserLogs} from '../util';
+import {collectBrowserLogs} from '../browser-logs-util';
 
 describe('NgOptimizedImage directive', () => {
   it('should not warn if there is no image distortion', async () => {

packages/core/test/bundling/image-directive/e2e/lcp-check/lcp-check.e2e-spec.ts

@@ -10,7 +10,7 @@
 import {browser, by, element} from 'protractor';
 import {logging} from 'selenium-webdriver';
 
-import {collectBrowserLogs} from '../util';
+import {collectBrowserLogs} from '../browser-logs-util';
 
 describe('NgOptimizedImage directive', () => {
   it('should log a warning when a `priority` is missing on an LCP image', async () => {

packages/core/test/bundling/image-directive/e2e/oversized-image/oversized-image.e2e-spec.ts

@@ -10,7 +10,7 @@
 import {browser, by, element, ExpectedConditions} from 'protractor';
 import {logging} from 'selenium-webdriver';
 
-import {collectBrowserLogs} from '../util';
+import {collectBrowserLogs} from '../browser-logs-util';
 
 describe('NgOptimizedImage directive', () => {
   it('should not warn if there is no oversized image', async () => {

packages/core/test/bundling/image-directive/e2e/preconnect-check/preconnect-check.e2e-spec.ts

@@ -10,7 +10,7 @@
 import {browser, by, element, ElementHelper} from 'protractor';
 import {logging} from 'selenium-webdriver';
 
-import {collectBrowserLogs} from '../util';
+import {collectBrowserLogs} from '../browser-logs-util';
 
 // Verifies that both images used in a component were rendered.
 async function verifyImagesPresent(element: ElementHelper) {

packages/core/test/bundling/image-directive/e2e/start-server.js

@@ -9,6 +9,10 @@
 const protractorUtils = require('@bazel/protractor/protractor-utils');
 const protractor = require('protractor');
 
+/**
+ * Helper function to start up a server for testing using Protractor utils.
+ * Used as a part of the `protractor_web_test_suite` rule configuration.
+ */
 module.exports = async function(config) {
   const {port} = await protractorUtils.runServer(config.workspace, config.server, '-port', []);
   const serverUrl = `http://localhost:${port}`;