test(TreeView): add @AVT tests (#14512)

Co-authored-by: Guilherme Datilio Ribeiro <guilhermedatilio@gmail.com>

e2e/components/TreeView/TreeView-test.avt.e2e.js

@@ -0,0 +1,101 @@
+/**
+ * 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('TreeView @avt', () => {
+  test.skip('accessibility-checker default', async ({ page }) => {
+    await visitStory(page, {
+      component: 'TreeView',
+      id: 'components-treeview--default',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('components-treeview--default');
+  });
+
+  test.skip('accessibility-checker with-icons', async ({ page }) => {
+    await visitStory(page, {
+      component: 'TreeView',
+      id: 'components-treeview--with-icons',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('components-treeview--with-icons');
+  });
+
+  test('treeview - keyboard nav', async ({ page }) => {
+    await visitStory(page, {
+      component: 'TreeView',
+      id: 'components-treeview--with-icons',
+      globals: {
+        theme: 'white',
+      },
+    });
+    const tree = page.getByRole('tree');
+    const treeLeaf = page.getByRole('treeitem', {
+      name: 'Artificial intelligence',
+    });
+    const treeBranchOne = page.getByRole('treeitem', {
+      name: 'Cloud computing',
+    });
+    const treeBranchTwo = page.getByRole('treeitem', {
+      name: 'Data & Analytics',
+    });
+    const deepNode = page.getByRole('treeitem', {
+      name: 'Resources',
+    });
+
+    await expect(tree).toBeVisible();
+    await expect(treeLeaf).toBeVisible();
+    await expect(treeBranchOne).toBeVisible();
+    await expect(treeBranchTwo).toBeVisible();
+    await expect(deepNode).toBeVisible();
+
+    // Tab to the first item
+    await page.keyboard.press('Tab');
+    await expect(treeLeaf).toBeFocused();
+    // Second tab should tab off of the tree entirely
+    await page.keyboard.press('Tab');
+    await expect(treeLeaf).not.toBeFocused();
+    await expect(tree).not.toBeFocused();
+    // Tab back into tree, navigate with arrow keys
+    await page.keyboard.press('Shift+Tab');
+    await expect(treeLeaf).toBeFocused();
+    await page.keyboard.press('ArrowDown');
+    await page.keyboard.press('ArrowDown');
+    await page.keyboard.press('ArrowDown');
+    await page.keyboard.press('ArrowDown');
+    await expect(treeBranchOne).toBeFocused();
+    // Close menu with ArrowLeft
+    await expect(treeBranchOne).toHaveAttribute('aria-expanded', 'true');
+    await page.keyboard.press('ArrowLeft');
+    await expect(treeBranchOne).toHaveAttribute('aria-expanded', 'false');
+    // Down arrow should go to next branch when closed, and should not go to disabled item
+    await page.keyboard.press('ArrowDown');
+    await expect(treeBranchTwo).toBeFocused();
+    await page.keyboard.press('ArrowDown');
+    await expect(treeBranchTwo).toBeFocused();
+    // Go back up to collapsed section, expand it, and traverse to bottom of branch
+    await page.keyboard.press('ArrowUp');
+    await expect(treeBranchOne).toBeFocused();
+    await page.keyboard.press('ArrowRight');
+    await expect(treeBranchOne).toHaveAttribute('aria-expanded', 'true');
+    await page.keyboard.press('ArrowDown');
+    await page.keyboard.press('ArrowDown');
+    await page.keyboard.press('ArrowDown');
+    await page.keyboard.press('ArrowDown');
+    await page.keyboard.press('ArrowDown');
+    await page.keyboard.press('ArrowDown');
+    await expect(deepNode).toBeFocused();
+  });
+});

e2e/components/TreeView/TreeView-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('TreeView', () => {
   themes.forEach((theme) => {
@@ -23,15 +23,4 @@ test.describe('TreeView', () => {
       });
     });
   });
-
-  test('accessibility-checker @avt', async ({ page }) => {
-    await visitStory(page, {
-      component: 'TreeView',
-      id: 'components-treeview--default',
-      globals: {
-        theme: 'white',
-      },
-    });
-    await expect(page).toHaveNoACViolations('TreeView');
-  });
 });

packages/react/src/components/TreeView/Treeview.stories.js

@@ -13,85 +13,85 @@ import './story.scss';
 const nodes = [
   {
     id: '1',
-    value: 'Level 1 (leaf)',
-    label: <span>Level 1 (leaf)</span>,
+    value: 'Artificial intelligence',
+    label: <span>Artificial intelligence</span>,
     renderIcon: Document,
   },
   {
     id: '2',
-    value: 'Level 1 (leaf)',
-    label: 'Level 1 (leaf)',
+    value: 'Blockchain',
+    label: 'Blockchain',
     renderIcon: Document,
   },
   {
     id: '3',
-    value: 'Level 1 (branch)',
-    label: 'Level 1 (branch)',
+    value: 'Business automation',
+    label: 'Business automation',
     renderIcon: Folder,
     children: [
       {
         id: '3-1',
-        value: 'Level 2 (leaf)',
-        label: 'Level 2 (leaf)',
+        value: 'Business process automation',
+        label: 'Business process automation',
         renderIcon: Document,
       },
       {
         id: '3-2',
-        value: 'Level 2 (leaf)',
-        label: 'Level 2 (leaf)',
+        value: 'Business process mapping',
+        label: 'Business process mapping',
         renderIcon: Document,
       },
     ],
   },
   {
     id: '4',
-    value: 'Level 1 (leaf)',
-    label: 'Level 1 (leaf)',
+    value: 'Business operations',
+    label: 'Business operations',
     renderIcon: Document,
   },
   {
     id: '5',
-    value: 'Level 1 (branch)',
-    label: 'Level 1 (branch)',
+    value: 'Cloud computing',
+    label: 'Cloud computing',
     isExpanded: true,
     renderIcon: Folder,
     children: [
       {
         id: '5-1',
-        value: 'Level 2 (leaf)',
-        label: 'Level 2 (leaf)',
+        value: 'Containers',
+        label: 'Containers',
         renderIcon: Document,
       },
       {
         id: '5-2',
-        value: 'Level 2 (leaf)',
-        label: 'Level 2 (leaf)',
+        value: 'Databases',
+        label: 'Databases',
         renderIcon: Document,
       },
       {
         id: '5-3',
-        value: 'Level 2 (branch)',
-        label: 'Level 2 (branch)',
+        value: 'DevOps',
+        label: 'DevOps',
         isExpanded: true,
         renderIcon: Folder,
         children: [
           {
             id: '5-4',
-            value: 'Level 3 (leaf)',
-            label: 'Level 3 (leaf)',
+            value: 'Solutions',
+            label: 'Solutions',
             renderIcon: Document,
           },
           {
             id: '5-5',
-            value: 'Level 3 (branch)',
-            label: 'Level 3 (branch)',
+            value: 'Case studies',
+            label: 'Case studies',
             isExpanded: true,
             renderIcon: Folder,
             children: [
               {
                 id: '5-6',
-                value: 'Level 4 (leaf)',
-                label: 'Level 4 (leaf)',
+                value: 'Resources',
+                label: 'Resources',
                 renderIcon: Document,
               },
             ],
@@ -102,61 +102,61 @@ const nodes = [
   },
   {
     id: '6',
-    value: 'Level 1 (branch)',
-    label: 'Level 1 (branch)',
+    value: 'Data & Analytics',
+    label: 'Data & Analytics',
     renderIcon: Folder,
     children: [
       {
         id: '6-1',
-        value: 'Level 2 (leaf)',
-        label: 'Level 2 (leaf)',
+        value: 'Big data',
+        label: 'Big data',
         renderIcon: Document,
       },
       {
         id: '6-2',
-        value: 'Level 2 (leaf)',
-        label: 'Level 2 (leaf)',
+        value: 'Business intelligence',
+        label: 'Business intelligence',
         renderIcon: Document,
       },
     ],
   },
   {
     id: '7',
-    value: 'Level 1 (branch)',
-    label: 'Level 1 (branch)',
+    value: 'Models',
+    label: 'Models',
     isExpanded: true,
     disabled: true,
     renderIcon: Folder,
     children: [
       {
         id: '7-1',
-        value: 'Level 2 (leaf)',
-        label: 'Level 2 (leaf)',
+        value: 'Audit',
+        label: 'Audit',
         renderIcon: Document,
       },
       {
         id: '7-2',
-        value: 'Level 2 (leaf)',
-        label: 'Level 2 (leaf)',
+        value: 'Monthly data',
+        label: 'Monthly data',
         renderIcon: Document,
       },
       {
         id: '8',
-        value: 'Level 2 (branch)',
-        label: 'Level 2 (branch)',
+        value: 'Data warehouse',
+        label: 'Data warehouse',
         isExpanded: true,
         renderIcon: Folder,
         children: [
           {
             id: '8-1',
-            value: 'Level 3 (leaf)',
-            label: 'Level 3 (leaf)',
+            value: 'Report samples',
+            label: 'Report samples',
             renderIcon: Document,
           },
           {
             id: '8-2',
-            value: 'Level 3 (leaf)',
-            label: 'Level 3 (leaf)',
+            value: 'Sales performance',
+            label: 'Sales performance',
             renderIcon: Document,
           },
         ],

packages/react/src/components/TreeView/story.scss

@@ -6,5 +6,5 @@
 //
 
 .cds--tree {
-  width: 16rem;
+  width: 20rem;
 }