From 14519f5b7f9dfca7f0914e6ab8974f54670fcd84 Mon Sep 17 00:00:00 2001 From: rmch91 Date: Wed, 23 Oct 2024 15:38:16 +0200 Subject: [PATCH] fix unit tests --- .../components/media/media.service.spec.ts | 159 ++++++++++++------ 1 file changed, 104 insertions(+), 55 deletions(-) diff --git a/projects/storefrontlib/shared/components/media/media.service.spec.ts b/projects/storefrontlib/shared/components/media/media.service.spec.ts index 8b9dc5d2b14..0959a1a9183 100644 --- a/projects/storefrontlib/shared/components/media/media.service.spec.ts +++ b/projects/storefrontlib/shared/components/media/media.service.spec.ts @@ -24,22 +24,24 @@ const MockStorefrontConfig: Config = { width: 1, }, }, - pictureElementFormats: { - format400: { - mediaQueries: - '(max-width: 768px) and (-webkit-min-device-pixel-ratio: 3)', - }, - format200: { - mediaQueries: '(min-width: 768px) and (max-width: 1024px)', - }, - format600: { - mediaQueries: '(min-width: 1025px) and (max-width: 1439px)', - }, - format1: { - mediaQueries: '(min-width: 1440px)', + media: { + pictureElementFormats: { + format400: { + mediaQueries: + '(max-width: 768px) and (-webkit-min-device-pixel-ratio: 3)', + }, + format200: { + mediaQueries: '(min-width: 768px) and (max-width: 1024px)', + }, + format600: { + mediaQueries: '(min-width: 1025px) and (max-width: 1439px)', + }, + format1: { + mediaQueries: '(min-width: 1440px)', + }, }, + pictureFormatsOrder: ['format1', 'format200', 'format400', 'format600'], }, - pictureFormatsOrder: ['format1', 'format200', 'format400', 'format600'], }; const mockUnknownMediaContainer = { @@ -90,6 +92,41 @@ const mockBestFormatMediaContainer: MediaContainer = { }, }; +const mockContainerWithWidthAndHeight: MediaContainer = { + format1: { + url: 'format-1.url', + format: 'format1', + altText: 'alt text for format-1', + role: 'presentation', + width: 1400, + height: 500, + }, + format2: { + url: 'format-2.url', + format: 'format2', + altText: 'alt text for format-2', + role: 'presentation', + width: 200, + height: 100, + }, + format400: { + url: 'format-400.url', + format: 'format400', + altText: 'alt text for format-400', + role: 'presentation', + width: 400, + height: 300, + }, + format600: { + url: 'format-600.url', + format: 'format600', + altText: 'alt text for format-600', + role: 'presentation', + width: 600, + height: 400, + }, +}; + const mockUrlContainer = { absolute: { url: 'http://absolute.jpg', @@ -576,7 +613,10 @@ describe('MediaService', () => { it('should be sorted based on provided config', () => { const config = { ...MockStorefrontConfig, - pictureFormatsOrder: ['format600', 'format1', 'format400'], + media: { + ...MockStorefrontConfig.media, + pictureFormatsOrder: ['format600', 'format1', 'format400'], + }, }; configureTestingModule(config); const mediaService = TestBed.inject(MediaService); @@ -597,7 +637,10 @@ describe('MediaService', () => { it('should be sorted in natural order if the order was not provided in config', () => { const config = { ...MockStorefrontConfig, - pictureFormatsOrder: [], + media: { + ...MockStorefrontConfig.media, + pictureFormatsOrder: [], + }, }; configureTestingModule(config); const mediaService = TestBed.inject(MediaService); @@ -616,63 +659,69 @@ describe('MediaService', () => { }); }); - describe('width and height attributes for picture sources', () => { - it('should return all images with proper width and height properties based on values from config', () => { - const config = { - ...MockStorefrontConfig, - pictureElementFormats: { - format400: { - mediaQueries: - '(max-width: 768px) and (-webkit-min-device-pixel-ratio: 3)', - width: 200, - height: 300, - }, - format200: { - mediaQueries: '(min-width: 768px) and (max-width: 1024px)', - width: 700, - height: 1000, - }, - format600: { - mediaQueries: '(min-width: 1025px) and (max-width: 1439px)', - width: 1000, - height: 800, - }, - format1: { - mediaQueries: '(min-width: 1440px)', - width: 1440, - height: 1000, - }, - }, - }; - configureTestingModule(config); + describe('width and height attributes', () => { + it('should return all images with proper width and height properties based on values passed to container', () => { + configureTestingModule(MockStorefrontConfig); const service = TestBed.inject(MediaService); - const expectedResult = [ { srcset: 'base:format-1.url', media: '(min-width: 1440px)', - width: 1440, - height: 1000, + width: 1400, + height: 500, }, { srcset: 'base:format-400.url', media: '(max-width: 768px) and (-webkit-min-device-pixel-ratio: 3)', - width: 200, + width: 400, height: 300, }, { srcset: 'base:format-600.url', media: '(min-width: 1025px) and (max-width: 1439px)', - width: 1000, - height: 800, + width: 600, + height: 400, }, ]; - const result = service.getMediaForPictureElement( - mockBestFormatMediaContainer - )?.sources; + mockContainerWithWidthAndHeight + ); + + // Width & Height of best format image + expect(result?.width).toBe(600); + expect(result?.height).toBe(400); + + expect(result?.sources).toEqual(expectedResult); + }); + + it('should return media for HTML element with proper width and height properties based on values passed to container', () => { + configureTestingModule(MockStorefrontConfig); + const service = TestBed.inject(MediaService); + + const result = service.getMedia(mockContainerWithWidthAndHeight); + + // Width & Height of best format image + expect(result?.width).toBe(600); + expect(result?.height).toBe(400); + }); + + it('should return media for HTML element with proper width and height if container is type of Image', () => { + configureTestingModule(MockStorefrontConfig); + const service = TestBed.inject(MediaService); + const image = { + url: 'format-1.url', + format: 'format1', + altText: 'alt text for format-1', + role: 'presentation', + width: 1400, + height: 500, + }; + const result = service.getMedia(image); + + console.log(JSON.stringify(result)); - expect(result).toEqual(expectedResult); + expect(result?.width).toBe(image.width); + expect(result?.height).toBe(image.height); }); });