test(training): visual testing for training steps (AmadeusITGroup#2587)

## Proposed change

<!--
Please include a summary of the changes and the related issue.
Please also include relevant motivation and context.
-->

## Related issues

<!--
Please make sure to follow the [contribution
guidelines](https://github.com/amadeus-digital/Otter/blob/main/CONTRIBUTING.md)
-->

*- No issue associated -*

<!-- * 🐛 Fix #issue -->
<!-- * 🐛 Fix resolves #issue -->
<!-- * 🚀 Feature #issue -->
<!-- * 🚀 Feature resolves #issue -->
<!-- *  Pull Request #issue -->

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

@@ -8,6 +8,9 @@ import {
 import {
   AppFixtureComponent,
 } from '../../src/app/app.fixture';
+import {
+  TrainingFixtureComponent,
+} from '../../src/components/training/training.fixture';
 
 test.describe.serial('Sanity test', () => {
   test('Visual comparison for each page', async ({ browserName, page }) => {
@@ -81,5 +84,18 @@ test.describe.serial('Sanity test', () => {
       await page.waitForURL('**/sdk-intro');
       await expect(page).toHaveScreenshot([browserName, 'sdk-intro.png'], { fullPage: true, mask: [page.locator('.visual-testing-ignore')] });
     });
+
+    await test.step('sdk-training', async () => {
+      await appFixture.navigateToSDKTraining();
+      await page.waitForURL('**/sdk-training*');
+      await expect(page).toHaveScreenshot([browserName, 'sdk-training.png'], { fullPage: true, mask: [page.locator('.visual-testing-ignore')] });
+
+      const trainingFixture = new TrainingFixtureComponent(new O3rElement({ element: page.locator('o3r-training'), page }));
+      for (let i = 1; i < 9; i++) {
+        await trainingFixture.clickOnNextStep();
+        await page.waitForURL(`**/sdk-training#${i}`);
+        await expect(page).toHaveScreenshot([browserName, `sdk-training-step${i + 1}.png`], { fullPage: true, mask: [page.locator('.visual-testing-ignore')] });
+      }
+    });
   });
 });

apps/showcase/src/app/app.fixture.ts

@@ -37,6 +37,8 @@ export interface AppFixture extends ComponentFixtureProfile {
   navigateToPlaceholder(): Promise<void>;
   /** Go to SDK-intro page */
   navigateToSDKIntro(): Promise<void>;
+  /** Go to SDK-training page */
+  navigateToSDKTraining(): Promise<void>;
 }
 
 export class AppFixtureComponent extends O3rComponentFixture implements AppFixture {
@@ -99,4 +101,9 @@ export class AppFixtureComponent extends O3rComponentFixture implements AppFixtu
   public async navigateToSDKGenerator() {
     await (await this.getSideNav()).clickOnLink(10);
   }
+
+  /** @inheritDoc */
+  public async navigateToSDKTraining() {
+    await (await this.getSideNav()).clickOnLink(11);
+  }
 }

apps/showcase/src/components/training/training.component.html

@@ -25,9 +25,9 @@ <h1 class="m-0 flex-grow-1">{{title()}}</h1>
         </div>
       </div>
       <button type="button" class="btn btn-outline-secondary df-btn-icononly fa-chevron-left" [disabled]="currentStepIndex() <= 0"
-              aria-label="Previous step" (click)="setCurrentStep(currentStepIndex() - 1)"></button>
+              aria-label="Previous step" (click)="setCurrentStep(currentStepIndex() - 1)" id="training-exercise-previous-step"></button>
       <button type="button" class="btn btn-outline-secondary df-btn-icononly fa-chevron-right" [disabled]="currentStepIndex() >= steps().length - 1"
-              aria-label="Next step" (click)="setCurrentStep(currentStepIndex() + 1)"></button>
+              aria-label="Next step" (click)="setCurrentStep(currentStepIndex() + 1)" id="training-exercise-next-step"></button>
     </div>
   </div>
   <o3r-training-step-pres

apps/showcase/src/components/training/training.fixture.ts

@@ -0,0 +1,28 @@
+import {
+  ComponentFixtureProfile,
+  O3rComponentFixture,
+} from '@o3r/testing/core';
+
+/**
+ * A component fixture abstracts all the interaction you can have with the component's DOM
+ * for testing purpose, including instantiating the fixtures of sub-components.
+ * It should be used both for component testing and automated testing.
+ */
+export interface TrainingFixture extends ComponentFixtureProfile {
+  /** Click on previous step button */
+  clickOnPreviousStep: () => Promise<void>;
+  /** Click on next step button */
+  clickOnNextStep: () => Promise<void>;
+}
+
+export class TrainingFixtureComponent extends O3rComponentFixture implements TrainingFixture {
+  /** @inheritDoc */
+  public async clickOnPreviousStep() {
+    return (await this.query('#training-exercise-previous-step'))?.click();
+  }
+
+  /** @inheritDoc */
+  public async clickOnNextStep() {
+    return (await this.query('#training-exercise-next-step'))?.click();
+  }
+}