test(e2e): use playwright clock to freeze time (#1927)

## Proposed change

<!-- Please include a summary of the changes and the related issue.
Please also include relevant motivation and context. List any
dependencies that is required for this change. -->

## Related issues

- 🐛 Fixes #(issue)
- 🚀 Feature #(issue)

<!-- Please make sure to follow the contributing guidelines on
https://github.com/amadeus-digital/Otter/blob/main/CONTRIBUTING.md -->

apps/showcase/e2e-playwright/sanity/visual-sanity.e2e.ts

@@ -4,6 +4,7 @@ import { AppFixtureComponent } from '../../src/app/app.fixture';
 
 test.describe.serial('Sanity test', () => {
   test('Visual comparison for each page', async ({ browserName, page }) => {
+    await page.clock.install({ time: new Date('2000-01-01T00:00:00') });
     await page.goto(process.env.PLAYWRIGHT_TARGET_URL || 'http://localhost:4200/');
     const appFixture = new AppFixtureComponent(new O3rElement({element: page.locator('app-root'), page}));
 

apps/showcase/e2e-playwright/scenarios/component-replacement-page-scenario.e2e-playwright-spec.ts

@@ -5,6 +5,7 @@ import { ComponentReplacementPresFixtureComponent } from '../../src/components/s
 
 test.describe.serial('Test component replacement page', () => {
   test('Go to component replacement and play with date input', async ({ page }) => {
+    await page.clock.install({ time: new Date('2000-01-01T00:00:00') });
     await page.goto(process.env.PLAYWRIGHT_TARGET_URL || 'http://localhost:4200/');
     const appFixture = new AppFixtureComponent(new O3rElement({element: page.locator('app-root'), page}));
 

apps/showcase/e2e-playwright/scenarios/configuration-page-scenario.e2e-playwright-spec.ts

@@ -5,6 +5,7 @@ import { ConfigurationFixtureComponent } from '../../src/app/configuration/confi
 
 test.describe.serial('Test configuration page', () => {
   test('Go to configuration and play with override button', async ({ page }) => {
+    await page.clock.install({ time: new Date('2000-01-01T00:00:00') });
     await page.goto(process.env.PLAYWRIGHT_TARGET_URL || 'http://localhost:4200/');
     const appFixture = new AppFixtureComponent(new O3rElement({element: page.locator('app-root'), page}));
 

apps/showcase/e2e-playwright/scenarios/dynamic-content-page-scenario.e2e-playwright-spec.ts

@@ -5,6 +5,7 @@ import { DynamicContentFixtureComponent } from '../../src/app/dynamic-content/dy
 
 test.describe.serial('Test dynamic content page', () => {
   test('Go to dynamic content and play with override button', async ({ page }) => {
+    await page.clock.install({ time: new Date('2000-01-01T00:00:00') });
     await page.goto(process.env.PLAYWRIGHT_TARGET_URL || 'http://localhost:4200/');
     const appFixture = new AppFixtureComponent(new O3rElement({element: page.locator('app-root'), page}));
 

apps/showcase/package.json

@@ -91,7 +91,7 @@
     "@o3r/eslint-plugin": "workspace:^",
     "@o3r/schematics": "workspace:^",
     "@o3r/testing": "workspace:^",
-    "@playwright/test": "~1.44.0",
+    "@playwright/test": "~1.45.0",
     "@schematics/angular": "~18.0.0",
     "@stylistic/eslint-plugin-ts": "^2.0.0",
     "@types/bootstrap": "^5.2.10",

apps/showcase/src/assets/placeholders/placeholder-showcase.json

@@ -1,5 +1,5 @@
 {
-  "template": "<div class=\"d-flex flex-column align-items-center mb-5\"><label><code>outboundDate</code> fact:</label><div class=\"visual-testing-ignore w-100 text-center\"><%= outboundDate %></div></div>",
+  "template": "<div class=\"d-flex flex-column align-items-center mb-5\"><label><code>outboundDate</code> fact:</label><div class=\"w-100 text-center\"><%= outboundDate %></div></div>",
   "vars": {
     "outboundDate": {
       "value": "outboundDate",

apps/showcase/src/components/showcase/component-replacement/component-replacement-pres.template.html

@@ -1,5 +1,5 @@
 <div class="card p-2 flex-row">
-  <div class="w-50 visual-testing-ignore">
+  <div class="w-50">
     <p>Gregorian date: <b id="component-replacement-date">{{dateFormControl.value}}</b></p>
   </div>
   <div class="w-50">

apps/showcase/src/components/showcase/rules-engine/rules-engine-pres.template.html

@@ -1,7 +1,7 @@
 <div class="card my-3">
   <div class="row g-0">
     <div class="col-4 bg-body-tertiary d-flex align-items-center justify-content-center">
-      <img [src]="'otter.svg' | o3rDynamicContent" class="img-fluid rounded-start visual-testing-ignore" aria-hidden="true">
+      <img [src]="'otter.svg' | o3rDynamicContent" class="img-fluid rounded-start" aria-hidden="true">
     </div>
     <div class="col-8 container p-3">
       <div class="card-bod d-flex flex-column h-100">

apps/showcase/src/components/utilities/date-picker-input-hebrew/date-picker-input-hebrew-pres.template.html

@@ -2,7 +2,7 @@
 <div class="input-group" [dfCloseInputDatePicker]="dp">
   <input [id]="id"
         #dpin
-        class="form-control visual-testing-ignore"
+        class="form-control"
         placeholder="YYYY-MM-DD"
         [ngModel]="selectedDate()"
         (ngModelChange)="selectDate($event)"

apps/showcase/src/components/utilities/date-picker-input/date-picker-input-pres.template.html

@@ -1,5 +1,5 @@
 <div class="input-group" [dfCloseInputDatePicker]="dp">
-  <input [id]="id" #dpin class="form-control visual-testing-ignore" placeholder="YYYY-MM-DD"
+  <input [id]="id" #dpin class="form-control" placeholder="YYYY-MM-DD"
          [ngModel]="selectedDate" (ngModelChange)="selectDate($event)"
          ngbDatepicker #dp="ngbDatepicker" [displayMonths]="1" [navigation]="'arrows'" [outsideDays]="'collapsed'"
          [showWeekNumbers]="false" [dayTemplate]="dpdt" (dateSelect)="dpin.focus()" [disabled]="isDisabled()"

package.json

@@ -193,7 +193,7 @@
     "@o3r/eslint-plugin": "workspace:^",
     "@o3r/telemetry": "workspace:^",
     "@o3r/workspace": "workspace:^",
-    "@playwright/test": "~1.44.0",
+    "@playwright/test": "~1.45.0",
     "@popperjs/core": "^2.11.5",
     "@schematics/angular": "~18.0.0",
     "@stylistic/eslint-plugin-ts": "^2.0.0",

packages/@o3r/testing/package.json

@@ -107,7 +107,7 @@
     "@o3r/core": "workspace:^",
     "@o3r/localization": "workspace:^",
     "@o3r/schematics": "workspace:^",
-    "@playwright/test": "~1.44.0",
+    "@playwright/test": "~1.45.0",
     "@schematics/angular": "~18.0.0",
     "pixelmatch": "^5.2.1",
     "pngjs": "^7.0.0",
@@ -189,7 +189,7 @@
     "@o3r/localization": "workspace:^",
     "@o3r/schematics": "workspace:^",
     "@o3r/test-helpers": "workspace:^",
-    "@playwright/test": "~1.44.0",
+    "@playwright/test": "~1.45.0",
     "@schematics/angular": "~18.0.0",
     "@stylistic/eslint-plugin-ts": "^2.0.0",
     "@types/jest": "~29.5.2",

yarn.lock

@@ -7969,7 +7969,7 @@ __metadata:
     "@o3r/eslint-plugin": "workspace:^"
     "@o3r/telemetry": "workspace:^"
     "@o3r/workspace": "workspace:^"
-    "@playwright/test": "npm:~1.44.0"
+    "@playwright/test": "npm:~1.45.0"
     "@popperjs/core": "npm:^2.11.5"
     "@schematics/angular": "npm:~18.0.0"
     "@stylistic/eslint-plugin-ts": "npm:^2.0.0"
@@ -8754,7 +8754,7 @@ __metadata:
     "@o3r/schematics": "workspace:^"
     "@o3r/styling": "workspace:^"
     "@o3r/testing": "workspace:^"
-    "@playwright/test": "npm:~1.44.0"
+    "@playwright/test": "npm:~1.45.0"
     "@popperjs/core": "npm:^2.11.5"
     "@schematics/angular": "npm:~18.0.0"
     "@stylistic/eslint-plugin-ts": "npm:^2.0.0"
@@ -9281,7 +9281,7 @@ __metadata:
     "@o3r/localization": "workspace:^"
     "@o3r/schematics": "workspace:^"
     "@o3r/test-helpers": "workspace:^"
-    "@playwright/test": "npm:~1.44.0"
+    "@playwright/test": "npm:~1.45.0"
     "@schematics/angular": "npm:~18.0.0"
     "@stylistic/eslint-plugin-ts": "npm:^2.0.0"
     "@types/jest": "npm:~29.5.2"
@@ -9335,7 +9335,7 @@ __metadata:
     "@o3r/core": "workspace:^"
     "@o3r/localization": "workspace:^"
     "@o3r/schematics": "workspace:^"
-    "@playwright/test": ~1.44.0
+    "@playwright/test": ~1.45.0
     "@schematics/angular": ~18.0.0
     pixelmatch: ^5.2.1
     pngjs: ^7.0.0
@@ -9850,14 +9850,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@playwright/test@npm:~1.44.0":
-  version: 1.44.1
-  resolution: "@playwright/test@npm:1.44.1"
+"@playwright/test@npm:~1.45.0":
+  version: 1.45.0
+  resolution: "@playwright/test@npm:1.45.0"
   dependencies:
-    playwright: "npm:1.44.1"
+    playwright: "npm:1.45.0"
   bin:
     playwright: cli.js
-  checksum: 10/572b4c97834fae54fda833939b8f376df2c301b724f9825a3c705533efc124beb346dd9406f54cd771b3f79c00f0e5c70b5469ef33818a0d2e2ea17b19636f9a
+  checksum: 10/dc75cd1bedfb92e91374e78094372748315e467438b44b60bfa3596c8d3f90692328be1a0184250d8d228a50d7f29ce8523695c930604109087881173e23233a
   languageName: node
   linkType: hard
 
@@ -25525,12 +25525,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"playwright-core@npm:1.44.1":
-  version: 1.44.1
-  resolution: "playwright-core@npm:1.44.1"
+"playwright-core@npm:1.45.0":
+  version: 1.45.0
+  resolution: "playwright-core@npm:1.45.0"
   bin:
     playwright-core: cli.js
-  checksum: 10/f79f9022bbb760daed371e36c802b27d43dc75e67de4d139d83b47feea51c8b884f3296cce85c3afa71c942290cef1b4369cd9ddf4dda5457a0a81772c73b50a
+  checksum: 10/47b7e4334fc946fb438b9846a4d91cc992d2d25b830dd796c4b3aadfbec328e031ebf11a11ae65231aace2adb4991cc043bd227d7a5eb10c98562a23d70dfe80
   languageName: node
   linkType: hard
 
@@ -25544,18 +25544,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"playwright@npm:1.44.1":
-  version: 1.44.1
-  resolution: "playwright@npm:1.44.1"
+"playwright@npm:1.45.0":
+  version: 1.45.0
+  resolution: "playwright@npm:1.45.0"
   dependencies:
     fsevents: "npm:2.3.2"
-    playwright-core: "npm:1.44.1"
+    playwright-core: "npm:1.45.0"
   dependenciesMeta:
     fsevents:
       optional: true
   bin:
     playwright: cli.js
-  checksum: 10/3207178a78f1c971dddf99c9a08052e462c882092e0d47e3dd8287ced40897a49e387e545a61d31e5d68f7e443d7818660aa12ce43ab662d01d95bcfcfeca2ca
+  checksum: 10/65e7e4059ef09b89c9b03022ea3c462b004868eb92bbda1e95e45f99ab35a085b2982506837621ec62bf2caf2f2617aac7a016f8b85bc58026838e948889cd1d
   languageName: node
   linkType: hard