test(Select): add @AVT tests (#14380)

tw15egan · web-flow · commit 55bb7f3dee55 · 2023-08-05T16:03:43.000Z
* test(Select): add @AVT tests * fix(Select): update avt tests
diff --git a/e2e/components/Select/Select-test.avt.e2e.js b/e2e/components/Select/Select-test.avt.e2e.js
@@ -0,0 +1,66 @@
+/**
+ * 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('Select  @avt', () => {
+  test('accessibility-checker default', async ({ page }) => {
+    await visitStory(page, {
+      component: 'Select',
+      id: 'components-select--default',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('components-select--default');
+  });
+
+  test('accessibility-checker inline', async ({ page }) => {
+    await visitStory(page, {
+      component: 'Select',
+      id: 'components-select--inline',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('components-select--inline');
+  });
+
+  test('accessibility-checker skeleton', async ({ page }) => {
+    await visitStory(page, {
+      component: 'Select',
+      id: 'components-select--skeleton',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('components-select--skeleton');
+  });
+
+  test('select - keyboard nav', async ({ page }) => {
+    await visitStory(page, {
+      component: 'Select',
+      id: 'components-select--default',
+      globals: {
+        theme: 'white',
+      },
+    });
+
+    const select = page.getByRole('combobox');
+    await expect(select).toBeVisible();
+    // Tab to Select
+    await page.keyboard.press('Tab');
+    await expect(select).toBeFocused();
+    await expect(select).toHaveValue('');
+    // Select Option 4
+    await select.selectOption('Option 4');
+    await expect(select).toHaveValue('Option 4');
+  });
+});
diff --git a/packages/react/src/components/Select/Select.stories.js b/packages/react/src/components/Select/Select.stories.js
@@ -110,16 +110,7 @@ export const Inline = () => {
   );
 };
 
-export const Skeleton = () => (
-  <div
-    aria-label="loading select"
-    aria-live="assertive"
-    role="status"
-    tabIndex="0" // eslint-disable-line jsx-a11y/no-noninteractive-tabindex
-  >
-    <SelectSkeleton />
-  </div>
-);
+export const Skeleton = () => <SelectSkeleton />;
 
 export const _WithLayer = () => (
   <WithLayer>
