Merge branch 'main' into 5410-structured-list-background

carbon-design-system · Nov 14, 2023 · 963c5cc · 963c5cc
2 parents 3c4b122 + 0c30e68
commit 963c5cc
Show file tree

Hide file tree

Showing 29 changed files with 872 additions and 16 deletions.
diff --git a/e2e/components/FluidSearch/FluidSearch-test.avt.e2e.js b/e2e/components/FluidSearch/FluidSearch-test.avt.e2e.js
@@ -21,4 +21,49 @@ test.describe('FluidSearch @avt', () => {
     });
     await expect(page).toHaveNoACViolations('FluidSearch @avt-default-state');
   });
+
+  test('@avt-advanced-states skeleton', async ({ page }) => {
+    await visitStory(page, {
+      component: 'FluidSearch',
+      id: 'experimental-unstable-fluidsearch--skeleton',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('FluidSearch-skeleton');
+  });
+
+  test('@avt-keyboard-nav', async ({ page }) => {
+    await visitStory(page, {
+      component: 'Search',
+      id: 'experimental-unstable-fluidsearch--default',
+      globals: {
+        theme: 'white',
+      },
+    });
+    const search = page.getByRole('searchbox');
+    const clearButton = page.getByRole('button');
+    await expect(search).toBeVisible();
+    await expect(clearButton).not.toBeVisible();
+
+    // Tab to the Search
+    await page.keyboard.press('Tab');
+    await expect(search).toBeFocused();
+    // Enter search value
+    await search.fill('test');
+    await expect(search).toHaveValue('test');
+    await expect(clearButton).toBeVisible();
+    // Clear the search value with Clear button
+    await page.keyboard.press('Tab');
+    await expect(clearButton).toBeFocused();
+    await page.keyboard.press('Enter');
+    await expect(search).toHaveValue('');
+    await expect(search).toBeFocused();
+    // Clear the search value with ESC key
+    await search.fill('test');
+    await expect(search).toHaveValue('test');
+    await page.keyboard.press('Escape');
+    await expect(search).toHaveValue('');
+    await expect(search).toBeFocused();
+  });
 });
diff --git a/e2e/components/FluidSelect/FluidSelect-test.avt.e2e.js b/e2e/components/FluidSelect/FluidSelect-test.avt.e2e.js
@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2022
+ * 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.
@@ -21,4 +21,46 @@ test.describe('FluidSelect @avt', () => {
     });
     await expect(page).toHaveNoACViolations('FluidSelect @avt-default-state');
   });
+
+  test('@avt-advanced-states skeleton', async ({ page }) => {
+    await visitStory(page, {
+      component: 'FluidSelect',
+      id: 'experimental-unstable-fluidselect--skeleton',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('FluidSelect-skeleton');
+  });
+
+  test('@avt-keyboard-nav FluidSelect', async ({ page }) => {
+    await visitStory(page, {
+      component: 'FluidSelect',
+      id: 'experimental-unstable-fluidselect--default',
+      globals: {
+        theme: 'white',
+      },
+    });
+
+    const select = page.getByRole('combobox').first();
+    await expect(select).toBeVisible();
+
+    // Focus on label additional information
+    await page.keyboard.press('Tab');
+    await expect(
+      page.getByRole('button', { name: 'Show information' }).first()
+    ).toBeFocused();
+    await page.keyboard.press('Enter');
+    await expect(
+      page.getByText('Additional field information here.').first()
+    ).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/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');
+  });
 });
diff --git a/e2e/components/FluidTextInput/FluidTextInput-test.avt.e2e.js b/e2e/components/FluidTextInput/FluidTextInput-test.avt.e2e.js
@@ -19,9 +19,7 @@ test.describe('FluidTextInput @avt', () => {
         theme: 'white',
       },
     });
-    await expect(page).toHaveNoACViolations(
-      'FluidTextInput @avt-default-state'
-    );
+    await expect(page).toHaveNoACViolations('FluidTextInput');
   });
 
   test('@avt-advanced-states password input', async ({ page }) => {
@@ -32,6 +30,101 @@ test.describe('FluidTextInput @avt', () => {
         theme: 'white',
       },
     });
-    await expect(page).toHaveNoACViolations('FluidTextInput password input');
+    await expect(page).toHaveNoACViolations('FluidTextInput-password-input');
+  });
+
+  test('@avt-advanced-states with tooltip', async ({ page }) => {
+    await visitStory(page, {
+      component: 'FluidTextInput',
+      id: 'experimental-unstable-fluidtextinput--default-with-tooltip',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('FluidTextInput-with-tooltip');
+  });
+
+  test('@avt-advanced-states skeleton', async ({ page }) => {
+    await visitStory(page, {
+      component: 'FluidTextInput',
+      id: 'experimental-unstable-fluidtextinput--skeleton',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('FluidTextInput-skeleton');
+  });
+
+  test('@avt-keyboard-nav default', async ({ page }) => {
+    await visitStory(page, {
+      component: 'TextInput',
+      id: 'experimental-unstable-fluidtextinput--default',
+      globals: {
+        theme: 'white',
+      },
+    });
+    const input = page.getByRole('textbox');
+
+    // Check the focus
+    await expect(input).toBeVisible();
+    await page.keyboard.press('Tab');
+    await expect(input).toBeFocused();
+
+    // Check input interaction
+    await input.fill('Text');
+    await expect(input).toHaveValue('Text');
+    await page.keyboard.press('Backspace');
+    await expect(input).toHaveValue('Tex');
+  });
+
+  test('@avt-keyboard-nav with tooltip', async ({ page }) => {
+    await visitStory(page, {
+      component: 'TextInput',
+      id: 'experimental-unstable-fluidtextinput--default-with-tooltip',
+      globals: {
+        theme: 'white',
+      },
+    });
+    const input = page.getByRole('textbox');
+    await expect(input).toBeVisible();
+
+    // Check tooltip visibility
+    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();
+
+    // Check the focus
+    await page.keyboard.press('Tab');
+    await expect(input).toBeFocused();
+
+    // Check input interaction
+    await input.fill('Text');
+    await expect(input).toHaveValue('Text');
+    await page.keyboard.press('Backspace');
+    await expect(input).toHaveValue('Tex');
+  });
+
+  test('@avt-keyboard-nav for password', async ({ page }) => {
+    await visitStory(page, {
+      component: 'TextInput',
+      id: 'experimental-unstable-fluidtextinput--password-input',
+      globals: {
+        theme: 'white',
+      },
+    });
+    const input = page.getByRole('textbox');
+    const span = page.locator('span.cds--assistive-text');
+
+    await page.keyboard.press('Tab');
+    await input.fill('Text');
+
+    // Checking toggle interaction
+    await page.keyboard.press('Tab');
+    await expect(span).toHaveText('Show password');
+    await page.keyboard.press('Enter');
+    await expect(span).toHaveText('Hide password');
   });
 });