From 616e981d410da7a0a87a8aef6a4424ae7aa059e8 Mon Sep 17 00:00:00 2001
From: Guilherme Datilio Ribeiro <guilhermedatilio@gmail.com>
Date: Fri, 15 Sep 2023 13:38:00 -0300
Subject: [PATCH] [AVT] - Added keyboard nav test `Breadcrumb` (#14639)

* test: added keyboard navigation test

* Apply suggestions from code review

* test: changed test name

* test: added timeout to avoid github action fail

* test: increase time by 50s

* test: added timeout

* test: changed expected test

* test: checking if the link is enabled

---------

Co-authored-by: Taylor Jones <tay1orjones@users.noreply.github.com>
---
 .../breadcrumb/breadcrumb-test.avt.e2e.js     | 110 ++++++++++++++++++
 .../breadcrumb/breadcrumb-test.e2e.js         |  13 +--
 2 files changed, 111 insertions(+), 12 deletions(-)
 create mode 100644 e2e/components/breadcrumb/breadcrumb-test.avt.e2e.js

diff --git a/e2e/components/breadcrumb/breadcrumb-test.avt.e2e.js b/e2e/components/breadcrumb/breadcrumb-test.avt.e2e.js
new file mode 100644
index 000000000000..36671ed5a883
--- /dev/null
+++ b/e2e/components/breadcrumb/breadcrumb-test.avt.e2e.js
@@ -0,0 +1,110 @@
+/**
+ * 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';
+
+import { expect, test } from '@playwright/test';
+import { visitStory } from '../../test-utils/storybook';
+
+test.describe('breadcrumb @avt', () => {
+  test('@avt-default-state', async ({ page }) => {
+    await visitStory(page, {
+      component: 'Breadcrumb',
+      id: 'components-breadcrumb--default',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('Breadcrumb');
+  });
+
+  test('@avt-advanced-states with overflow menu', async ({ page }) => {
+    await visitStory(page, {
+      component: 'Breadcrumb',
+      id: 'components-breadcrumb--breadcrumb-with-overflow-menu',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('Breadcrumb-with-overflow-menu');
+  });
+
+  test('@avt-advanced-states skeleton', async ({ page }) => {
+    await visitStory(page, {
+      component: 'Breadcrumb',
+      id: 'components-breadcrumb--skeleton',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('Breadcrumb-skeleton');
+  });
+
+  test('@avt-keyboard-nav default', async ({ page }) => {
+    await visitStory(page, {
+      component: 'Breadcrumb',
+      id: 'components-breadcrumb--default',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page.getByText('Breadcrumb 1')).toBeVisible();
+    await page.keyboard.press('Tab');
+    await expect(page.getByText('Breadcrumb 1')).toBeFocused();
+    // Checking if the link is enabled to be clicked on
+    await expect(page.getByText('Breadcrumb 1')).toBeEnabled();
+  });
+
+  test('@avt-keyboard-nav - item without href prop', async ({ page }) => {
+    await visitStory(page, {
+      component: 'Breadcrumb',
+      id: 'components-breadcrumb--default',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page.getByText('Breadcrumb 3')).toBeVisible();
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Tab');
+    await expect(page.getByText('Breadcrumb 3')).toBeFocused();
+
+    // The Breadcrumb 4 should not be focusable
+    await page.keyboard.press('Tab');
+    await expect(page.getByText('Breadcrumb 4')).not.toBeFocused();
+  });
+
+  test('@avt-keyboard-nav with overflow menu keyboard navigation', async ({
+    page,
+  }) => {
+    await visitStory(page, {
+      component: 'Breadcrumb',
+      id: 'components-breadcrumb--breadcrumb-with-overflow-menu',
+      globals: {
+        theme: 'white',
+      },
+    });
+
+    await expect(page.getByText('Breadcrumb 1')).toBeVisible();
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Tab');
+
+    // Verify icon-description
+    await expect(page.getByText('Options')).toBeVisible();
+
+    // Entering and navigating the options
+    await page.keyboard.press('Enter');
+    await expect(
+      page.locator('button', { hasText: 'Breadcrumb 3' })
+    ).toBeFocused();
+    await page.keyboard.press('ArrowDown');
+    await expect(
+      page.locator('button', { hasText: 'Breadcrumb 4' })
+    ).toBeFocused();
+  });
+});
diff --git a/e2e/components/breadcrumb/breadcrumb-test.e2e.js b/e2e/components/breadcrumb/breadcrumb-test.e2e.js
index 415dca782dd0..826bce39b829 100644
--- a/e2e/components/breadcrumb/breadcrumb-test.e2e.js
+++ b/e2e/components/breadcrumb/breadcrumb-test.e2e.js
@@ -7,7 +7,7 @@
 
 'use strict';
 
-const { expect, test } = require('@playwright/test');
+const { test } = require('@playwright/test');
 const { themes } = require('../../test-utils/env');
 const { snapshot } = require('../../test-utils/snapshot');
 const { snapshotStory, visitStory } = require('../../test-utils/storybook');
@@ -40,15 +40,4 @@ test.describe('breadcrumb', () => {
       });
     });
   });
-
-  test('accessibility-checker @avt', async ({ page }) => {
-    await visitStory(page, {
-      component: 'breadcrumb',
-      story: 'breadcrumb-story',
-      globals: {
-        theme: 'white',
-      },
-    });
-    await expect(page).toHaveNoACViolations('breadcrumb');
-  });
 });