fb-emulation

firebase.json

@@ -2,6 +2,9 @@
   "emulators": {
     "hosting": {
       "port": 4202
+    },
+    "functions": {
+      "port": 4402
     }
   },
   "hosting": {
@@ -85,5 +88,29 @@
         "function": "ssr"
       }
     ]
+  },
+  "functions": {
+    "source": ".",
+    "ignore": [
+      " **/.*",
+      "**/node_modules/**",
+      "**/tmp/**",
+      "**/tooling/**",
+      "**/LICENSE",
+      "**/CONTRIBUTING.md",
+      "**/README.md",
+      "**/commitlint.config.js",
+      "**/database.rules.json",
+      "**/firebase-debug.log",
+      "**/firebase.function.json",
+      "**/firebase.json",
+      "**/jest.config.ts",
+      "**/jest.preset.js",
+      "**/migrations.json",
+      "**/nx.json",
+      "**/tsconfig.json",
+      "**/ui-debug.log",
+      "**/wrangler.toml"
+    ]
   }
 }

projects/firebase-function/.eslintrc.json

@@ -1,35 +1,18 @@
 {
-  "extends": [
-    "../../.eslintrc.json"
-  ],
-  "ignorePatterns": [
-    "!**/*"
-  ],
+  "extends": ["../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
   "overrides": [
     {
-      "files": [
-        "*.ts",
-        "*.tsx",
-        "*.js",
-        "*.jsx"
-      ],
-      "extends": [
-        "plugin:unicorn/recommended"
-      ],
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "extends": [],
       "rules": {}
     },
     {
-      "files": [
-        "*.ts",
-        "*.tsx"
-      ],
+      "files": ["*.ts", "*.tsx"],
       "rules": {}
     },
     {
-      "files": [
-        "*.js",
-        "*.jsx"
-      ],
+      "files": ["*.js", "*.jsx"],
       "rules": {}
     }
   ]

projects/firebase-function/project.json

@@ -84,9 +84,7 @@
     "emulate": {
       "executor": "nx:run-commands",
       "options": {
-        "commands": [
-          "npx firebase --project=angular-movies --config=firebase.function.json emulators:start"
-        ],
+        "commands": ["npx firebase emulators:start --project=angular-movies"],
         "parallel": false
       }
     },

projects/firebase-function/src/index.ts

@@ -6,7 +6,6 @@ declare const __non_webpack_require__: NodeRequire;
 // '__non_webpack_require__' is a proxy to Node 'require'
 
 // tslint:disable-next-line:no-require-imports no-var-requires
-// eslint-disable-next-line unicorn/prefer-module
 const ssrApp = __non_webpack_require__('./main').app(); // NOTE: leave this as require() since this file is built dynamically by Angular CLI webpack
 /* Hack end */
 
@@ -17,5 +16,3 @@ export const ssr = functions
       '4GB' /* 4096MB memory function will run at currently fastest - 4.8 GHz CPU ( https://cloud.google.com/functions/pricing) */,
   })
   .https.onRequest(ssrApp);
-
-

projects/firebase-function/tooling/utils.ts

@@ -1,12 +1,12 @@
-import {mkdirSync, WriteFileOptions, writeFileSync} from "node:fs";
-import {dirname} from "node:path";
+import { mkdirSync, WriteFileOptions, writeFileSync } from 'node:fs';
+import { dirname } from 'node:path';
 
 export function getLog(verbose: boolean = false) {
   return (...logs: any[]) => {
     if (verbose) {
       console.log(...logs);
     }
-  }
+  };
 }
 
 export function getArgv(propertyName: string): string {
@@ -18,13 +18,12 @@ export function getArgv(propertyName: string): string {
   );
 }
 
-// eslint-disable-next-line unicorn/no-object-as-default-parameter
 export function writeFileSyncRecursive(
   filename: string,
   content: string,
   options?: WriteFileOptions
 ): void {
-  const options_ = options || {encoding: 'utf8'};
-  mkdirSync(dirname(filename), {recursive: true});
+  const options_ = options || { encoding: 'utf8' };
+  mkdirSync(dirname(filename), { recursive: true });
   writeFileSync(filename, content, options_);
 }

projects/firebase-function/user-flows/ci-flow.uf.ts

@@ -1,5 +1,25 @@
-import {UserFlowContext, UserFlowInteractionsFn, UserFlowOptions, UserFlowProvider,} from '@push-based/user-flow';
-import {MovieListPageUFO} from '../../movies-user-flows/src';
+import { getLhConfig } from '../../movies-user-flows/src/internals/test-sets';
+
+import {
+  UserFlowContext,
+  UserFlowInteractionsFn,
+  UserFlowOptions,
+  UserFlowProvider,
+} from '@push-based/user-flow';
+import {
+  mergeBudgets,
+  MovieDetailPageUFO,
+  MovieListPageUFO,
+  SidebarUFO,
+} from '../../movies-user-flows/src';
+
+import Budget from 'lighthouse/types/lhr/budget';
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const angularBudgets: Budget[] = require('../../movies/testing/budgets/angular.budgets.json');
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const generalTimingBudget: Budget[] = require('../../movies/testing/budgets/general-timing.budgets.json');
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const movieListBudgets: Budget[] = require('../../movies/testing/budgets/movie-list.budgets.json');
 
 const flowOptions: UserFlowOptions = {
   name: 'Firebase Function Emulation',
@@ -8,14 +28,47 @@ const flowOptions: UserFlowOptions = {
 const interactions: UserFlowInteractionsFn = async (
   context: UserFlowContext
 ): Promise<any> => {
-  const {flow, collectOptions} = context;
+  const { flow, collectOptions } = context;
   const url = `${collectOptions.url}/list/category/popular`;
+  const sidebar = new SidebarUFO(context);
   const movieListPage = new MovieListPageUFO(context);
+  const topRatedName = 'topRated';
+  const movieDetailPage = new MovieDetailPageUFO(context);
 
+  const cfg = mergeBudgets([
+    angularBudgets,
+    generalTimingBudget,
+    movieListBudgets,
+  ]);
   await flow.navigate(url, {
     stepName: '🧭 Initial navigation',
+    config: getLhConfig(cfg),
+  });
+  await flow.snapshot({
+    stepName: '✔ Initial navigation done',
+  });
+  await flow.startTimespan({
+    stepName: '🧭 Navigate to popular',
+  });
+
+  await sidebar.clickSideMenuBtn();
+  await sidebar.navigateToCategory(topRatedName);
+  await movieListPage.awaitLCPContent();
+  await flow.endTimespan();
+  await flow.snapshot({
+    stepName: '✔ Navigation to popular done',
+  });
+  await flow.startTimespan({
+    stepName: '🧭 Navigate to detail page',
   });
-  await movieListPage.awaitHeadingContent();
+
+  await movieListPage.navigateToDetail();
+  await movieDetailPage.awaitAllContent();
+  await flow.endTimespan();
+  await flow.snapshot({
+    stepName: '✔ Navigation to detail done',
+  });
+
   return;
 };
 

projects/movies/project.json

@@ -195,7 +195,7 @@
       "executor": "nx:run-commands",
       "options": {
         "commands": [
-          "firebase emulators:start --only hosting --project angular-movies"
+          "npx firebase emulators:start --only hosting --project angular-movies"
         ],
         "parallel": false
       }

projects/movies/src/app/pages/account-feature/list-detail-page/list-share/list-share.component.ts

@@ -1,4 +1,4 @@
-import { LetDirective } from '@rx-angular/template/let';
+import { RxLet } from '@rx-angular/template/let';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -8,10 +8,11 @@ import {
 } from '@angular/core';
 import { ListDetailAdapter } from '../list-detail-page.adapter';
 import { DOCUMENT } from '@angular/common';
+
 // TODO
 @Component({
   standalone: true,
-  imports: [LetDirective],
+  imports: [RxLet],
   selector: 'ct-list-share',
   templateUrl: './list-share.component.html',
   styleUrls: ['./list-share.component.scss'],

projects/movies/src/app/routes.ts

@@ -1,5 +1,4 @@
-import {Routes} from '@angular/router';
-// import { RouteISRConfig } from 'ngx-isr';
+import { Routes } from '@angular/router';
 
 export const ROUTES: Routes = [
   /**
@@ -10,7 +9,7 @@ export const ROUTES: Routes = [
    *
    * E.g.:
    *
-   * _Bad_
+   * _Bad_ (multiple routs for the same component)
    *  {
    *  path: 'list-category/:category',
    *  loadComponent: import('list.component')
@@ -20,7 +19,7 @@ export const ROUTES: Routes = [
    *  loadComponent: import('list.component')
    *  }
    *
-   * _Good_
+   * _Good_ (multiple params instead of routs for the same component)
    * {
    *  path: 'list/:type/:identifier',
    *  loadComponent: import('list.component')
@@ -43,7 +42,7 @@ export const ROUTES: Routes = [
     loadChildren: () =>
       import(
         './pages/account-feature/list-detail-page/list-detail-page.routes'
-        ),
+      ),
   },
   {
     path: 'detail/person/:identifier',

projects/movies/src/app/shared/cdk/element-timing/wait-for-element-timing.ts

@@ -0,0 +1,46 @@
+declare const ngDevMode: boolean;
+
+export function waitForElementTiming(
+  identifiers: string[],
+  config: {
+    timeout: number;
+  } = { timeout: 5000 }
+): Promise<void> {
+  return new Promise<void>((resolve, reject) => {
+    const { timeout } = config;
+    const timeoutId = setTimeout(() => {
+      if (ngDevMode)
+        console.log(`waitForElementTiming timed out after ${timeout}ms`);
+      resolve();
+    }, timeout);
+    try {
+      const performanceObserver = new PerformanceObserver((l) => {
+        if (identifiers.length > 0 && l.getEntries().length) {
+          const observedIdentifiers = l
+            .getEntries()
+            .map((entry) => (entry as any).identifier as string)
+            .filter((i) => identifiers.includes(i));
+          if (ngDevMode && observedIdentifiers.length)
+            console.log('Observed Elements: ', observedIdentifiers);
+          // remove found identifiers
+          identifiers = identifiers.filter(
+            (i) => !observedIdentifiers.includes(i)
+          );
+          // If all identifiers are found
+          if (identifiers.length === 0) {
+            if (ngDevMode) console.log('All elements observed');
+            // cleanup
+            clearTimeout(timeoutId);
+            performanceObserver.disconnect();
+            resolve();
+          }
+        }
+      });
+      // performanceObserver.observe({type: 'largest-contentful-paint', buffered: true});
+      performanceObserver.observe({ type: 'element', buffered: true });
+    } catch (e) {
+      console.log('waitForElementTiming failed');
+      reject(e);
+    }
+  });
+}