Add Keyboard Nav AVT test for FluidTextArea (#15161)

* test: changed text * test: added avt keyboard test * test: fixed test
carbon-design-system · Nov 14, 2023 · 0b006d6 · 0b006d6
1 parent 7b7ec95
commit 0b006d6
Showing 1 changed file with 87 additions and 0 deletions.
diff --git a/e2e/components/FluidTextArea/FluidTextArea-test.avt.e2e.js b/e2e/components/FluidTextArea/FluidTextArea-test.avt.e2e.js
@@ -21,4 +21,91 @@ test.describe('FluidTextArea @avt', () => {
     });
     await expect(page).toHaveNoACViolations('FluidTextArea @avt-default-state');
   });
+
+  test('@avt-advanced-states default-with-layers', async ({ page }) => {
+    await visitStory(page, {
+      component: 'FluidTextArea',
+      id: 'experimental-unstable-fluidtextarea--default-with-layers',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations(
+      'FluidTextArea-default-with-layers'
+    );
+  });
+
+  test('@avt-advanced-states default-with-tooltip', async ({ page }) => {
+    await visitStory(page, {
+      component: 'FluidTextArea',
+      id: 'experimental-unstable-fluidtextarea--default-with-tooltip',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations(
+      'FluidTextArea-default-with-tooltip'
+    );
+  });
+
+  test('@avt-advanced-states skeleton', async ({ page }) => {
+    await visitStory(page, {
+      component: 'FluidTextArea',
+      id: 'experimental-unstable-fluidtextarea--skeleton',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('FluidTextArea-skeleton');
+  });
+
+  test('@avt-keyboard-nav FluidTextArea default', async ({ page }) => {
+    await visitStory(page, {
+      component: 'TextArea',
+      id: 'experimental-unstable-fluidtextarea--default',
+      globals: {
+        theme: 'white',
+      },
+    });
+    const textArea = page.getByRole('textbox');
+    await expect(page.getByText('Text Area label')).toBeVisible();
+
+    // Checking focus on textarea
+    await page.keyboard.press('Tab');
+    await expect(textArea).toBeFocused();
+
+    // Writting a word to check functionality
+    await textArea.fill('test');
+    await expect(textArea).toHaveValue('test');
+    await expect(page).toHaveNoACViolations('FluidTextArea default');
+  });
+
+  test('@avt-keyboard-nav FluidTextArea with tooltip', async ({ page }) => {
+    await visitStory(page, {
+      component: 'TextArea',
+      id: 'experimental-unstable-fluidtextarea--default-with-tooltip',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page.getByText('Text Area label')).toBeVisible();
+
+    // Checking tooltip
+    await page.keyboard.press('Tab');
+    await expect(page.getByLabel('Show information')).toBeFocused();
+    await page.keyboard.press('Enter');
+    await expect(
+      page.getByText('Additional field information here.')
+    ).toBeVisible();
+
+    // Checking focus on textarea
+    const textArea = page.getByRole('textbox');
+    await page.keyboard.press('Tab');
+    await expect(textArea).toBeFocused();
+
+    // Writting a word to check functionality
+    await textArea.fill('test');
+    await expect(textArea).toHaveValue('test');
+    await expect(page).toHaveNoACViolations('FluidTextArea with tooltip');
+  });
 });