[WIP] mobile expamle

playwright/playwright.config.ts

@@ -76,6 +76,12 @@ const config: PlaywrightTestConfig = {
                 deviceScaleFactor: 2,
             },
         },
+        {
+            name: 'Mobile Safari',
+            use: {
+                ...devices['iPhone 13'],
+            },
+        },
     ],
 };
 

playwright/playwright/index.tsx

@@ -3,19 +3,16 @@ import React from 'react';
 import {beforeMount} from '@playwright/experimental-ct-react/hooks';
 
 import {ToasterProvider} from '../../src/components/Toaster';
-import {MobileProvider} from '../../src/components/mobile/MobileProvider';
 import {ThemeProvider} from '../../src/components/theme/ThemeProvider';
 
 import './index.scss';
 
 beforeMount(async ({App}) => {
     return (
         <ThemeProvider>
-            <MobileProvider>
-                <ToasterProvider>
-                    <App />
-                </ToasterProvider>
-            </MobileProvider>
+            <ToasterProvider>
+                <App />
+            </ToasterProvider>
         </ThemeProvider>
     );
 });

src/components/Button/__tests__/ButtonMobile.visual.test.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+import {test} from '~playwright/core';
+
+import {MobileProvider} from '../../../components/mobile';
+
+import {ButtonStories} from './helpersPlaywright';
+
+test.describe('Button Mobile', {tag: '@Button @Mobile'}, () => {
+    test.use({
+        viewport: {width: 390, height: 844},
+        isMobile: true,
+    });
+
+    test('render story: <Default>', async ({mount, expectScreenshot}) => {
+        await mount(
+            <MobileProvider mobile={true}>
+                <ButtonStories.Default />
+            </MobileProvider>,
+        );
+
+        await expectScreenshot();
+    });
+});