test: changed theme change and connected toaster provider (#1788)

gravity-ui · Aug 27, 2024 · b953f18 · b953f18
1 parent 092b880
commit b953f18
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 17 deletions.
diff --git a/playwright/core/expectScreenshotFixture.ts b/playwright/core/expectScreenshotFixture.ts
@@ -12,13 +12,7 @@ export const expectScreenshotFixture: PlaywrightFixture<ExpectScreenshotFixture>
         nameSuffix,
         ...pageScreenshotOptions
     } = {}) => {
-        const captureScreenshot = async (theme: string) => {
-            const body = page.locator('body');
-
-            await body.evaluate((el: HTMLElement | SVGElement, newTheme: string) => {
-                el.setAttribute('class', `g-root g-root_theme_${newTheme}`);
-            }, theme);
-
+        const captureScreenshot = async () => {
             return (component || page.locator('.playwright-wrapper-test')).screenshot({
                 animations: 'disabled',
                 ...pageScreenshotOptions,
@@ -28,13 +22,17 @@ export const expectScreenshotFixture: PlaywrightFixture<ExpectScreenshotFixture>
         const nameScreenshot =
             testInfo.titlePath.slice(1).join(' ') + (nameSuffix ? ` ${nameSuffix}` : '');
 
-        expect(await captureScreenshot('dark')).toMatchSnapshot({
-            name: `${nameScreenshot} dark.png`,
-        });
+        await page.emulateMedia({colorScheme: 'light'});
 
-        expect(await captureScreenshot('light')).toMatchSnapshot({
+        expect(await captureScreenshot()).toMatchSnapshot({
             name: `${nameScreenshot} light.png`,
         });
+
+        await page.emulateMedia({colorScheme: 'dark'});
+
+        expect(await captureScreenshot()).toMatchSnapshot({
+            name: `${nameScreenshot} dark.png`,
+        });
     };
 
     await use(expectScreenshot);

diff --git a/playwright/playwright/index.html b/playwright/playwright/index.html
@@ -1,12 +1,12 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
     <head>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>Test component page</title>
     </head>
-    <body class="g-root g-root_theme_light">
-        <div id="root"></div>
-        <script type="module" src="./index.tsx"></script>
+    <body>
+        <div id="root" class="g-root"></div>
     </body>
+    <script type="module" src="./index.tsx"></script>
 </html>
diff --git a/playwright/playwright/index.tsx b/playwright/playwright/index.tsx
@@ -2,16 +2,20 @@ import React from 'react';
 
 import {beforeMount} from '@playwright/experimental-ct-react/hooks';
 
+import {ToasterComponent, 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 theme="light">
+        <ThemeProvider>
             <MobileProvider>
-                <App />
+                <ToasterProvider>
+                    <App />
+                    <ToasterComponent />
+                </ToasterProvider>
             </MobileProvider>
         </ThemeProvider>
     );