chore: added vrt cases for popover with autoalign scroll (carbon-desi…

…gn-system#18082) * chore: added vrt cases for popover with autoalign scroll * fix: snapshot names should be unique
wkeese · Nov 17, 2024 · 6972097 · 6972097
1 parent 1df6d92
commit 6972097
Showing 1 changed file with 74 additions and 1 deletion.
diff --git a/e2e/components/Popover/Popover-test.e2e.js b/e2e/components/Popover/Popover-test.e2e.js
@@ -9,7 +9,8 @@
 
 const { test } = require('@playwright/test');
 const { themes } = require('../../test-utils/env');
-const { snapshotStory } = require('../../test-utils/storybook');
+const { snapshot } = require('../../test-utils/snapshot');
+const { snapshotStory, visitStory } = require('../../test-utils/storybook');
 
 test.describe('Popover', () => {
   themes.forEach((theme) => {
@@ -29,6 +30,78 @@ test.describe('Popover', () => {
           theme,
         });
       });
+      // test experimental autoAlign
+      test('popover - expermental autoAlign scroll to left @vrt', async ({
+        page,
+      }) => {
+        await visitStory(page, {
+          component: 'popover',
+          story: 'experimental-auto-align',
+          theme,
+        });
+        await page.evaluate(() => {
+          window.scrollBy(-500, 0); // Scroll 500px to the left
+        });
+        await snapshot(page, {
+          component: 'popover',
+          story: 'experimental-auto-align-left',
+          theme,
+        });
+      });
+
+      test('popover - expermental autoAlign scroll to right @vrt', async ({
+        page,
+      }) => {
+        await visitStory(page, {
+          component: 'popover',
+          story: 'experimental-auto-align',
+          theme,
+        });
+        await page.evaluate(() => {
+          window.scrollBy(500, 0); // Scroll 500px to the right
+        });
+        await snapshot(page, {
+          component: 'popover',
+          story: 'experimental-auto-align-right',
+          theme,
+        });
+      });
+
+      test('popover - expermental autoAlign scroll to top @vrt', async ({
+        page,
+      }) => {
+        await visitStory(page, {
+          component: 'popover',
+          story: 'experimental-auto-align',
+          theme,
+        });
+        await page.evaluate(() => {
+          window.scrollBy(0, -350); // Scroll 350px to the top
+        });
+        await snapshot(page, {
+          component: 'popover',
+          story: 'experimental-auto-align-top',
+          theme,
+        });
+      });
+
+      test('popover - expermental autoAlign scroll to bottom @vrt', async ({
+        page,
+      }) => {
+        await visitStory(page, {
+          component: 'popover',
+          story: 'experimental-auto-align',
+          theme,
+        });
+        await page.evaluate(() => {
+          window.scrollBy(0, 350); // Scroll 350px to the bottom
+        });
+        await snapshot(page, {
+          component: 'popover',
+          story: 'experimental-auto-align-bottom',
+          theme,
+        });
+      });
     });
   });
 });