fix(showcase): clear override button not working for dynamic content … (

#1321)

…page

## 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/scenarios/dynamic-content-page-scenario.e2e-playwright-spec.ts

@@ -0,0 +1,33 @@
+import { O3rElement } from '@o3r/testing/core';
+import { expect, test } from '@playwright/test';
+import { AppFixtureComponent } from '../../src/app/app.fixture';
+import { DynamicContentFixtureComponent } from '../../src/app/dynamic-content/dynamic-content.fixture';
+
+test.describe.serial('Test dynamic content page', () => {
+  test('Go to dynamic content and play with override button', async ({ page }) => {
+    await page.goto(process.env.PLAYWRIGHT_TARGET_URL || 'http://localhost:4200/');
+    const appFixture = new AppFixtureComponent(new O3rElement({element: page.locator('app-root'), page}));
+
+    await test.step('go to dynamic content', async () => {
+      await appFixture.navigateToDynamicContent();
+      await page.waitForURL('**/dynamic-content');
+    });
+
+    await test.step('override dynamic content', async () => {
+      const dynamicContentFixture = new DynamicContentFixtureComponent(new O3rElement({element: page.locator('app-root'), page}));
+      const overrideButton = (await dynamicContentFixture.getOverrideButton())!;
+      const clearOverrideButton = (await dynamicContentFixture.getClearOverrideButton())!;
+
+      await expect(overrideButton.sourceElement.element).toBeEnabled();
+      await expect(clearOverrideButton.sourceElement.element).toBeDisabled();
+
+      await overrideButton.click();
+      await expect(overrideButton.sourceElement.element).toBeDisabled();
+      await expect(clearOverrideButton.sourceElement.element).toBeEnabled();
+
+      await clearOverrideButton.click();
+      await expect(overrideButton.sourceElement.element).toBeEnabled();
+      await expect(clearOverrideButton.sourceElement.element).toBeDisabled();
+    });
+  });
+});

apps/showcase/src/app/configuration/configuration.spec.ts

@@ -2,8 +2,8 @@ import { AsyncPipe } from '@angular/common';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { RouterModule } from '@angular/router';
 import { StoreModule } from '@ngrx/store';
-import { ConfigurationComponent } from './configuration.component';
 import { O3rElement } from '@o3r/testing/core';
+import { ConfigurationComponent } from './configuration.component';
 import { ConfigurationFixtureComponent } from './configuration.fixture';
 let componentFixture: ConfigurationFixtureComponent;
 

apps/showcase/src/app/configuration/configuration.template.html

@@ -30,9 +30,9 @@ <h2 id="configuration-examples">Examples</h2>
       <div class="row">
         <o3r-copy-text-pres language="html" [text]="codeConfig()" class="col-12 col-md-8 col-lg-9"></o3r-copy-text-pres>
         <div class="d-flex gap-2 align-self-start mt-md-2 pb-3 col-12 col-md-4 col-lg-3">
-          <button type="button" class="btn btn-primary" id="btn-override-config" [attr.disabled]="config() || null"
+          <button type="button" class="btn btn-primary" id="btn-override-config" [disabled]="!!config()"
                   [class.disabled]="config()" (click)="toggleConfig()">Override</button>
-          <button type="button" class="btn btn-danger" id="btn-clear-override-config" [attr.disabled]="!config() || null"
+          <button type="button" class="btn btn-danger" id="btn-clear-override-config" [disabled]="!config()"
                   [class.disabled]="!config()" (click)="toggleConfig()">Clear</button>
         </div>
       </div>

apps/showcase/src/app/dynamic-content/dynamic-content.fixture.ts

@@ -0,0 +1,25 @@
+import { ComponentFixtureProfile, O3rComponentFixture, O3rElement } 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 DynamicContentFixture extends ComponentFixtureProfile {
+  /** Get Override button */
+  getOverrideButton: () => Promise<O3rElement | undefined>;
+  /** Get Clear override button */
+  getClearOverrideButton: () => Promise<O3rElement | undefined>;
+}
+
+export class DynamicContentFixtureComponent extends O3rComponentFixture implements DynamicContentFixture {
+  /** @inheritDoc */
+  public getOverrideButton() {
+    return this.query('#btn-override-config');
+  }
+
+  /** @inheritDoc */
+  public getClearOverrideButton() {
+    return this.query('#btn-clear-override-config');
+  }
+}

apps/showcase/src/app/dynamic-content/dynamic-content.spec.ts

@@ -1,7 +1,10 @@
 import { AsyncPipe } from '@angular/common';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { RouterModule } from '@angular/router';
+import { O3rElement } from '@o3r/testing/core';
 import { DynamicContentComponent } from './dynamic-content.component';
+import { DynamicContentFixtureComponent } from './dynamic-content.fixture';
+let componentFixture: DynamicContentFixtureComponent;
 
 describe('DynamicContentComponent', () => {
   let component: DynamicContentComponent;
@@ -17,10 +20,14 @@ describe('DynamicContentComponent', () => {
     });
     fixture = TestBed.createComponent(DynamicContentComponent);
     component = fixture.componentInstance;
+
+    componentFixture = new DynamicContentFixtureComponent(new O3rElement(fixture.debugElement));
     fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
+
+    expect(componentFixture).toBeTruthy();
   });
 });

apps/showcase/src/app/dynamic-content/dynamic-content.template.html

@@ -24,9 +24,9 @@ <h2 id="dynamic-content-example">Example</h2>
       <div class="row">
         <o3r-copy-text-pres class="col-12 col-md-8 col-lg-9" language="html" [text]="codeDataDynamicContentPath"></o3r-copy-text-pres>
         <div class="d-flex gap-2 align-self-start mt-md-2 pb-3 col-12 col-md-4 col-lg-3">
-          <button type="button" class="btn btn-primary" disabled="{{bodyDynamicContentPath}}"
+          <button type="button" class="btn btn-primary" id="btn-override-config" [disabled]="!!bodyDynamicContentPath"
                   [class.disabled]="bodyDynamicContentPath" (click)="setLocalStorage()">Override</button>
-          <button type="button" class="btn btn-danger" disabled="{{!bodyDynamicContentPath}}"
+          <button type="button" class="btn btn-danger" id="btn-clear-override-config" [disabled]="!bodyDynamicContentPath"
                   [class.disabled]="!bodyDynamicContentPath" (click)="clearLocalStorage()">Clear</button>
         </div>
       </div>