test: Playwright change theme (#232)

NasgulNexus · web-flow · commit befb814630b1 · 2024-08-23T18:14:14.000+02:00
diff --git a/playwright/core/expectScreenshotFixture.ts b/playwright/core/expectScreenshotFixture.ts
@@ -12,13 +12,7 @@ export const expectScreenshotFixture: PlaywrightFixture<ExpectScreenshotFixture>
         screenshotName,
         ...pageScreenshotOptions
     } = {}) => {
-        const captureScreenshot = async (theme: string) => {
-            const root = page.locator('#root');
-
-            await root.evaluate((el, theme) => {
-                el.classList.value = `g-root g-root_theme_${theme}`;
-            }, theme);
-
+        const captureScreenshot = async () => {
             return (component || page.locator('.playwright-wrapper-test')).screenshot({
                 animations: 'disabled',
                 ...pageScreenshotOptions,
@@ -27,12 +21,14 @@ export const expectScreenshotFixture: PlaywrightFixture<ExpectScreenshotFixture>
 
         const nameScreenshot = testInfo.titlePath.slice(1).join(' ');
 
-        expect(await captureScreenshot('dark')).toMatchSnapshot({
-            name: `${screenshotName || nameScreenshot} dark.png`,
+        expect(await captureScreenshot()).toMatchSnapshot({
+            name: `${screenshotName || nameScreenshot} light.png`,
         });
 
-        expect(await captureScreenshot('light')).toMatchSnapshot({
-            name: `${screenshotName || nameScreenshot} light.png`,
+        await page.emulateMedia({colorScheme: 'dark'});
+
+        expect(await captureScreenshot()).toMatchSnapshot({
+            name: `${screenshotName || nameScreenshot} dark.png`,
         });
     };
 
diff --git a/playwright/playwright/index.html b/playwright/playwright/index.html
@@ -1,12 +1,10 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="ru">
     <head>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>Test component page</title>
     </head>
-    <body>
-        <div id="root" class="g-root g-root_theme_light"></div>
-        <script type="module" src="./index.tsx"></script>
-    </body>
+    <body id="root" class="g-root"></body>
+    <script type="module" src="./index.tsx"></script>
 </html>
diff --git a/playwright/playwright/index.tsx b/playwright/playwright/index.tsx
@@ -7,7 +7,7 @@ import './index.scss';
 
 beforeMount(async ({App}) => {
     return (
-        <ThemeProvider theme="light">
+        <ThemeProvider>
             <MobileProvider>
                 <App />
             </MobileProvider>
