change default elementType to img

SAP · Oct 17, 2024 · 6e37017 · 6e37017
1 parent d29bbcb
commit 6e37017
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 16 deletions.
diff --git a/projects/core/src/features-config/feature-toggles/config/feature-toggles.ts b/projects/core/src/features-config/feature-toggles/config/feature-toggles.ts
@@ -642,6 +642,10 @@ export interface FeatureTogglesInterface {
   /**
    * When enabled, allows to provide extended formats and media queries for <picture> element if used in MediaComponent.
    *
+   * Important: After activation default HTML element in MediaComponent will be `<img>`
+   * Only BannerComponent has passed `'picture'` value. If you need to use `<picture>` HTML element
+   * you need to pass `[elementType]="'picture'"` to `<cx-media>`
+   *
    * For proper work requires `pictureElementFormats`  provided in media config:
    *  ```ts
    * provideConfig({
@@ -659,7 +663,8 @@ export interface FeatureTogglesInterface {
    * After activating this toggle, new inputs in `MediaComponent` — specifically
    * `width`, `height`, and `sizes` — will be passed to the template as HTML attributes.
    *
-   * Toggle activates `@Input() elementType: 'img' | 'picture' = 'picture';` in `MediaComponent`
+   * Toggle activates `@Input() elementType: 'img' | 'picture' = 'img'` in `MediaComponent`
+   *
    */
   useExtendedMediaComponentConfiguration?: boolean;
 }

diff --git a/projects/storefrontlib/cms-components/content/banner/banner.component.html b/projects/storefrontlib/cms-components/content/banner/banner.component.html
@@ -10,7 +10,15 @@
       >
       </cx-generic-link>
       <p class="headline" *ngIf="data.headline" [innerHTML]="data.headline"></p>
-      <cx-media [container]="getImage(data)"></cx-media>
+      <cx-media
+        *cxFeature="'useExtendedMediaComponentConfiguration'"
+        [container]="getImage(data)"
+        [elementType]="'picture'"
+      ></cx-media>
+      <cx-media
+        *cxFeature="'!useExtendedMediaComponentConfiguration'"
+        [container]="getImage(data)"
+      ></cx-media>
       <p class="content" *ngIf="data.content" [innerHTML]="data.content"></p>
     </ng-container>
   </ng-container>
@@ -21,14 +29,30 @@
       [target]="getTarget(data)"
     >
       <p class="headline" *ngIf="data.headline" [innerHTML]="data.headline"></p>
-      <cx-media [container]="getImage(data)"></cx-media>
+      <cx-media
+        *cxFeature="'useExtendedMediaComponentConfiguration'"
+        [container]="getImage(data)"
+        [elementType]="'picture'"
+      ></cx-media>
+      <cx-media
+        *cxFeature="'!useExtendedMediaComponentConfiguration'"
+        [container]="getImage(data)"
+      ></cx-media>
       <p class="content" *ngIf="data.content" [innerHTML]="data.content"></p>
     </cx-generic-link>
   </ng-container>
   <ng-container *ngIf="!routerLink">
     <div class="no-link">
       <p class="headline" *ngIf="data.headline" [innerHTML]="data.headline"></p>
-      <cx-media [container]="getImage(data)"></cx-media>
+      <cx-media
+        *cxFeature="'useExtendedMediaComponentConfiguration'"
+        [container]="getImage(data)"
+        [elementType]="'picture'"
+      ></cx-media>
+      <cx-media
+        *cxFeature="'!useExtendedMediaComponentConfiguration'"
+        [container]="getImage(data)"
+      ></cx-media>
       <p class="content" *ngIf="data.content" [innerHTML]="data.content"></p>
     </div>
   </ng-container>

diff --git a/projects/storefrontlib/cms-components/content/banner/banner.component.spec.ts b/projects/storefrontlib/cms-components/content/banner/banner.component.spec.ts
@@ -12,6 +12,7 @@ import {
   SemanticPathService,
   UrlCommand,
 } from '@spartacus/core';
+import { MockFeatureDirective } from 'projects/storefrontlib/shared/test/mock-feature-directive';
 import { BehaviorSubject, Observable, of } from 'rxjs';
 import { CmsComponentData } from '../../../cms-structure/page/model/cms-component-data';
 import { GenericLinkComponent } from '../../../shared/components/generic-link/generic-link.component';
@@ -81,7 +82,12 @@ describe('BannerComponent', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [RouterTestingModule, FeaturesConfigModule],
-      declarations: [BannerComponent, MockMediaComponent, GenericLinkComponent],
+      declarations: [
+        BannerComponent,
+        MockMediaComponent,
+        GenericLinkComponent,
+        MockFeatureDirective,
+      ],
       providers: [
         {
           provide: CmsComponentData,

diff --git a/projects/storefrontlib/shared/components/media/media.component.spec.ts b/projects/storefrontlib/shared/components/media/media.component.spec.ts
@@ -166,7 +166,7 @@ function configureTestingModule(
   }).compileComponents();
 }
 
-function createComponent(useImgElement = false) {
+function createComponent(elementType: 'picture' | 'img' = 'img') {
   const service = TestBed.inject(MediaService);
   const fixture = TestBed.createComponent(MediaComponent);
   const component = fixture.componentInstance;
@@ -182,9 +182,7 @@ function createComponent(useImgElement = false) {
 
   component.container = mockImageContainer;
 
-  if (useImgElement) {
-    component.elementType = 'img';
-  }
+  component.elementType = elementType;
 
   component.ngOnChanges();
   fixture.detectChanges();
@@ -203,7 +201,7 @@ describe('MediaComponent', () => {
   describe('with enabled useExtendedMediaComponentConfiguration', () => {
     it('should have picture element if elementType is `picture`', () => {
       configureTestingModule(new MockMediaService('srcset', true), false, true);
-      const { fixture } = createComponent(false);
+      const { fixture } = createComponent('picture');
 
       const picture = fixture.debugElement.query(By.css('picture'));
 
@@ -212,7 +210,7 @@ describe('MediaComponent', () => {
 
     it('should not have picture element if elementType is `img`', () => {
       configureTestingModule(new MockMediaService('srcset', true), false, true);
-      const { fixture } = createComponent(true);
+      const { fixture } = createComponent();
 
       const picture = fixture.debugElement.query(By.css('picture'));
 
@@ -221,24 +219,23 @@ describe('MediaComponent', () => {
 
     it('should call getMediaBasedOnHTMLElementType() method from service', () => {
       configureTestingModule(new MockMediaService('srcset', true), false, true);
-      const { getMediaSpy } = createComponent(true);
+      const { getMediaSpy } = createComponent();
 
       expect(getMediaSpy).toHaveBeenCalled();
     });
 
     it('should call getMediaForPictureElement() method from service if elementType is `picture`', () => {
       configureTestingModule(new MockMediaService('srcset', true), false, true);
       const { getMediaForPictureElementSpy, getMediaSpy } =
-        createComponent(false);
+        createComponent('picture');
 
       expect(getMediaForPictureElementSpy).toHaveBeenCalled();
       expect(getMediaSpy).not.toHaveBeenCalled();
     });
 
     it('should call getMedia() method from service if elementType is `img`', () => {
       configureTestingModule(new MockMediaService('srcset', true), false, true);
-      const { getMediaForPictureElementSpy, getMediaSpy } =
-        createComponent(true);
+      const { getMediaForPictureElementSpy, getMediaSpy } = createComponent();
 
       expect(getMediaForPictureElementSpy).not.toHaveBeenCalled();
       expect(getMediaSpy).toHaveBeenCalled();

diff --git a/projects/storefrontlib/shared/components/media/media.component.ts b/projects/storefrontlib/shared/components/media/media.component.ts
@@ -63,8 +63,10 @@ export class MediaComponent implements OnChanges {
 
   /**
    * Works only when `useExtendedMediaComponentConfiguration` toggle is true
+   *
+   * @default img
    */
-  @Input() elementType: 'img' | 'picture' = 'picture';
+  @Input() elementType: 'img' | 'picture' = 'img';
 
   /**
    * The intrinsic width of the image, in pixels