chore(Media): fix story

src/blocks/Media/__stories__/data.json

@@ -1,7 +1,5 @@
 {
   "common": {
-    "title": "Lorem ipsum dolor sit",
-    "description": "**Ut enim ad minim veniam** [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
     "additionalInfo": "Duis aute irure dolor in [reprehenderit](https://example.com) n voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
     "links": [
       {
@@ -49,38 +47,38 @@
     ]
   },
   "imageSlider": {
-    "content": {
-      "type": "media-block",
-      "media": {
-        "light": {
-          "image": [
-            "/story-assets/img_8-12_white.png",
-            "/story-assets/img_8-12_white.png",
-            "/story-assets/img_8-12_white.png"
-          ]
-        },
-        "dark": {
-          "image": [
-            "/story-assets/img_8-12_dark.png",
-            "/story-assets/img_8-12_dark.png",
-            "/story-assets/img_8-12_dark.png"
-          ]
-        }
+    "type": "media-block",
+    "media": {
+      "light": {
+        "image": [
+          "/story-assets/img_8-12_white.png",
+          "/story-assets/img_8-12_white.png",
+          "/story-assets/img_8-12_white.png"
+        ]
+      },
+      "dark": {
+        "image": [
+          "/story-assets/img_8-12_dark.png",
+          "/story-assets/img_8-12_dark.png",
+          "/story-assets/img_8-12_dark.png"
+        ]
       }
     }
   },
   "default": {
-    "content": {
-      "type": "media-block",
-      "media": {
-        "light": {
-          "image": "/story-assets/img_8-12_white.png"
-        },
-        "dark": {
-          "image": "/story-assets/img_8-12_dark.png"
-        }
+    "animated": false,
+    "type": "media-block",
+    "size": "l",
+    "media": {
+      "light": {
+        "image": "/story-assets/img_8-12_white.png"
+      },
+      "dark": {
+        "image": "/story-assets/img_8-12_dark.png"
       }
-    }
+    },
+    "title": "Lorem ipsum dolor sit",
+    "description": "**Ut enim ad minim veniam** [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."
   },
   "video": {
     "staticWithAutoPlay": {

src/blocks/Media/__tests__/Media.visual.test.tsx

@@ -1,6 +1,7 @@
 import {test} from '../../../../playwright/core/index';
 
 import {
+    ContentVariables,
     DataLens,
     Default,
     Direction,
@@ -19,19 +20,26 @@ test.describe('Media', () => {
     test('render stories <Default>', async ({mount, expectScreenshot, delay}) => {
         await mount(<Default />);
         await delay(DEFAULT_MEDIA_DELAY);
-        await expectScreenshot({skipTheme: 'dark'});
+        await expectScreenshot({
+            skipTheme: 'dark',
+        });
     });
 
     test('render stories <ImageSlider>', async ({mount, expectScreenshot, delay}) => {
         await mount(<ImageSlider />);
         await delay(DEFAULT_MEDIA_DELAY);
-        await expectScreenshot({skipTheme: 'dark'});
+        await expectScreenshot({
+            skipTheme: 'dark',
+        });
     });
 
-    test.skip('render stories <Video>', async ({mount, expectScreenshot, delay}) => {
+    test.skip('render stories <Video>', async ({mount, expectScreenshot, delay, page}) => {
         await mount(<Video />);
         await delay(DEFAULT_MEDIA_DELAY);
-        await expectScreenshot({skipTheme: 'dark'});
+        await expectScreenshot({
+            skipTheme: 'dark',
+            mask: [page.locator('.pc-media-component-image__item')],
+        });
     });
 
     test('render stories <DataLens>', async ({mount, expectScreenshot, page}) => {
@@ -42,34 +50,46 @@ test.describe('Media', () => {
         });
     });
 
-    test('render stories <Size>', async ({mount, expectScreenshot, delay}) => {
+    test('render stories <Size>', async ({mount, expectScreenshot, delay, page}) => {
         await mount(<Size />);
         await delay(DEFAULT_MEDIA_DELAY);
-        await expectScreenshot({skipTheme: 'dark'});
+        await expectScreenshot({
+            skipTheme: 'dark',
+            mask: [page.locator('.pc-media-component-image__item')],
+        });
     });
 
-    test('render stories <Direction>', async ({mount, expectScreenshot, delay}) => {
+    test('render stories <Direction>', async ({mount, expectScreenshot, delay, page}) => {
         await mount(<Direction />);
         await delay(DEFAULT_MEDIA_DELAY);
-        await expectScreenshot({skipTheme: 'dark'});
+        await expectScreenshot({
+            skipTheme: 'dark',
+            mask: [page.locator('.pc-media-component-image__item')],
+        });
     });
 
     test('render stories <WithoutShadowDeprecated>', async ({mount, expectScreenshot, delay}) => {
         await mount(<WithoutShadowDeprecated />);
         await delay(DEFAULT_MEDIA_DELAY);
-        await expectScreenshot({skipTheme: 'dark'});
+        await expectScreenshot({
+            skipTheme: 'dark',
+        });
     });
 
     test('render stories <WithoutShadow>', async ({mount, expectScreenshot, delay}) => {
         await mount(<WithoutShadow />);
         await delay(DEFAULT_MEDIA_DELAY);
-        await expectScreenshot({skipTheme: 'dark'});
+        await expectScreenshot({
+            skipTheme: 'dark',
+        });
     });
 
     test('render stories <WithBorder>', async ({mount, expectScreenshot, delay}) => {
         await mount(<WithBorder />);
         await delay(DEFAULT_MEDIA_DELAY);
-        await expectScreenshot({skipTheme: 'dark'});
+        await expectScreenshot({
+            skipTheme: 'dark',
+        });
     });
 
     // skip this test, because it is unstable
@@ -78,4 +98,13 @@ test.describe('Media', () => {
         await delay(DEFAULT_MEDIA_DELAY);
         await expectScreenshot({skipTheme: 'dark'});
     });
+
+    test('render stories <ContentVariables>', async ({mount, expectScreenshot, delay, page}) => {
+        await mount(<ContentVariables />);
+        await delay(DEFAULT_MEDIA_DELAY);
+        await expectScreenshot({
+            skipTheme: 'dark',
+            mask: [page.locator('.pc-media-component-image__item')],
+        });
+    });
 });

src/blocks/Media/__tests__/helpers.tsx

@@ -13,4 +13,5 @@ export const {
     WithoutShadow,
     WithBorder,
     Iframe,
+    ContentVariables,
 } = composeStories(MediaStories);