From 99470fba63f65b6a6306647ed39728a03d509708 Mon Sep 17 00:00:00 2001
From: Guilherme Datilio Ribeiro <guilhermedatilio@gmail.com>
Date: Thu, 27 Jul 2023 16:57:47 -0300
Subject: [PATCH] [AVT]: Added avt tests for OverflowMenu (#14250)

* test: added avt testing for overflowmenu

* test: change id to data-testid

* test: added the missing test for custom icon

* test: removed data-testid

* test: checking if the menu is open

* test: fixed the test for menu

---------

Co-authored-by: Andrea N. Cardona <cardona.n.andrea@gmail.com>
---
 .../OverflowMenu/OverflowMenu-test.avt.e2e.js | 104 ++++++++++++++++++
 .../OverflowMenu/OverflowMenu-test.e2e.js     |  26 +----
 2 files changed, 106 insertions(+), 24 deletions(-)
 create mode 100644 e2e/components/OverflowMenu/OverflowMenu-test.avt.e2e.js

diff --git a/e2e/components/OverflowMenu/OverflowMenu-test.avt.e2e.js b/e2e/components/OverflowMenu/OverflowMenu-test.avt.e2e.js
new file mode 100644
index 000000000000..a57df3b9971d
--- /dev/null
+++ b/e2e/components/OverflowMenu/OverflowMenu-test.avt.e2e.js
@@ -0,0 +1,104 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+const { expect, test } = require('@playwright/test');
+const { visitStory } = require('../../test-utils/storybook');
+
+test.describe('OverflowMenu @avt', () => {
+  test('accessibility-checker', async ({ page }) => {
+    await visitStory(page, {
+      component: 'OverflowMenu',
+      id: 'components-overflowmenu--default',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('OverflowMenu');
+  });
+
+  test('accessibility-checker render custom icon', async ({ page }) => {
+    await visitStory(page, {
+      component: 'OverflowMenu',
+      id: 'components-overflowmenu--render-custom-icon',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('OverflowMenu-custom-icon');
+  });
+
+  test('accessibility-checker open menu', async ({ page }) => {
+    await visitStory(page, {
+      component: 'OverflowMenu',
+      id: 'components-overflowmenu--default',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page.getByRole('button')).toBeVisible();
+
+    // Tab and open the toggle button for the OverflowMenu
+    await page.keyboard.press('Tab');
+    const toggleButton = page.getByRole('button');
+    await expect(toggleButton).toBeFocused();
+    await page.keyboard.press('Enter');
+    await expect(page.getByRole('menu')).toBeVisible();
+
+    await expect(page).toHaveNoACViolations('OverflowMenu-open');
+  });
+
+  test('accessibility-checker render custom icon open', async ({ page }) => {
+    await visitStory(page, {
+      component: 'OverflowMenu',
+      id: 'components-overflowmenu--render-custom-icon',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page.getByRole('button')).toBeVisible();
+
+    // Tab and open the toggle button for the OverflowMenu
+    await page.keyboard.press('Tab');
+    const toggleButton = page.getByRole('button');
+    await expect(toggleButton).toBeFocused();
+    await page.keyboard.press('Enter');
+    await expect(page.getByRole('menu')).toBeVisible();
+
+    await expect(page).toHaveNoACViolations('OverflowMenu-custom-icon-open');
+  });
+
+  test('overflow-menu - keyboard nav', async ({ page }) => {
+    await visitStory(page, {
+      component: 'OverflowMenu',
+      id: 'components-overflowmenu--default',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page.getByRole('button')).toBeVisible();
+
+    // Tab and open the OverflowMenu
+    await page.keyboard.press('Tab');
+    const toggleButton = page.getByRole('button');
+    await expect(toggleButton).toBeFocused();
+    await page.keyboard.press('Enter');
+    await expect(page.getByRole('menu')).toBeVisible();
+    // Navigation inside the menu
+    await expect(
+      page.locator('button').filter({ hasText: 'Stop app' })
+    ).toBeFocused();
+    await page.keyboard.press('ArrowDown');
+    await expect(
+      page.locator('button').filter({ hasText: 'Restart app' })
+    ).toBeFocused();
+    await page.keyboard.press('Enter');
+    // focus comes back to the toggle button
+    await expect(toggleButton).toBeFocused();
+  });
+});
diff --git a/e2e/components/OverflowMenu/OverflowMenu-test.e2e.js b/e2e/components/OverflowMenu/OverflowMenu-test.e2e.js
index e55f66fb1824..0fcd3b09a926 100644
--- a/e2e/components/OverflowMenu/OverflowMenu-test.e2e.js
+++ b/e2e/components/OverflowMenu/OverflowMenu-test.e2e.js
@@ -7,9 +7,9 @@
 
 'use strict';
 
-const { expect, test } = require('@playwright/test');
+const { test } = require('@playwright/test');
 const { themes } = require('../../test-utils/env');
-const { snapshotStory, visitStory } = require('../../test-utils/storybook');
+const { snapshotStory } = require('../../test-utils/storybook');
 
 test.describe('OverflowMenu', () => {
   themes.forEach((theme) => {
@@ -47,26 +47,4 @@ test.describe('OverflowMenu', () => {
       });
     });
   });
-
-  test('accessibility-checker @avt', async ({ page }) => {
-    await visitStory(page, {
-      component: 'OverflowMenu',
-      id: 'components-overflowmenu--default',
-      globals: {
-        theme: 'white',
-      },
-    });
-    await expect(page).toHaveNoACViolations('OverflowMenu');
-  });
-
-  test('feature flag accessibility-checker @avt', async ({ page }) => {
-    await visitStory(page, {
-      component: 'OverflowMenu',
-      id: 'experimental-feature-flags-overflowmenu--overflow-menu',
-      globals: {
-        theme: 'white',
-      },
-    });
-    await expect(page).toHaveNoACViolations('OverflowMenu feature-flag');
-  });
 });