test(checklist): wcag2.2 readiness (#6577)

* test(checklist): wcag2.2 readiness * test(checklist): add test for taskname * Update e2e/components/Checklist/Checklist-test.avt.e2e.js Co-authored-by: Nandan Devadula <[email protected]> --------- Co-authored-by: Nandan Devadula <[email protected]>
carbon-design-system · Dec 17, 2024 · 9595f65 · 9595f65
1 parent fe1c02d
commit 9595f65
Show file tree

Hide file tree

Showing 2 changed files with 153 additions and 1 deletion.
diff --git a/e2e/components/Checklist/Checklist-test.avt.e2e.js b/e2e/components/Checklist/Checklist-test.avt.e2e.js
@@ -20,5 +20,56 @@ test.describe('Checklist @avt', () => {
       },
     });
     await expect(page).toHaveNoACViolations('Checklist @avt-default-state');
+
+    const buttonEle = page.locator('[aria-label="Checklist toggle"]');
+    const viewButton = page.getByRole('button', { name: 'View all (10)' });
+    const tooltipContent = await page.getByText('Toggle');
+    const taskButtons = page.locator('[title="Task name"]');
+    //press tab to move focus to buttonELement
+    await page.keyboard.press('Tab');
+    await expect(buttonEle).toBeInViewport();
+    await expect(buttonEle).toBeFocused();
+
+    //check the checklist is expanded
+    await expect(buttonEle).toHaveAttribute('aria-expanded', 'true');
+    await expect(viewButton).toBeVisible();
+    //Press enter to collapse the checklist
+    await page.keyboard.press('Enter');
+    await expect(buttonEle).toHaveAttribute('aria-expanded', 'false');
+
+    //Press escape to hide tooltip
+    await page.keyboard.press('Escape');
+    await expect(tooltipContent).not.toBeVisible();
+
+    //Press tab to move focus to 1st Task name
+    await page.keyboard.press('Tab');
+    await expect(taskButtons.nth(0)).toBeFocused();
+
+    //Press tab to move focus to 2nd Task name
+    await page.keyboard.press('Tab');
+    await expect(taskButtons.nth(1)).toBeFocused();
+
+    //Press tab to move focus to 3rd Task name
+    await page.keyboard.press('Tab');
+    await expect(taskButtons.nth(2)).toBeFocused();
+
+    //Press tab to move focus to View all(10) button
+    await page.keyboard.press('Tab');
+    await expect(viewButton).toBeFocused();
+
+    //check button element is showing Toggle tooltip while hovering
+    await buttonEle.hover();
+    await expect(tooltipContent).toBeVisible();
+  });
+
+  test('@avt-task-state', async ({ page }) => {
+    await visitStory(page, {
+      component: 'Checklist',
+      id: 'ibm-products-onboarding-checklist--task-states',
+      globals: {
+        carbonTheme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('Checklist @avt-task-state');
   });
 });
diff --git a/packages/ibm-products/src/components/Checklist/Checklist.test.js b/packages/ibm-products/src/components/Checklist/Checklist.test.js
@@ -6,7 +6,7 @@
  */
 
 import React, { act } from 'react';
-import { render, screen } from '@testing-library/react'; // https://testing-library.com/docs/react-testing-library/intro
+import { render, screen, fireEvent } from '@testing-library/react'; // https://testing-library.com/docs/react-testing-library/intro
 import userEvent from '@testing-library/user-event';
 
 import { pkg } from '../../settings';
@@ -50,6 +50,48 @@ const taskLists = [
       },
     ],
   },
+  {
+    title: 'List 3 title',
+    tasks: [
+      {
+        kind: 'indeterminate',
+        label: 'indeterminate task with callback',
+        onClick: () => {},
+      },
+      {
+        kind: 'indeterminate',
+        label: 'indeterminate task without callback',
+      },
+    ],
+  },
+  {
+    title: 'List 4 title',
+    tasks: [
+      {
+        kind: 'disabled',
+        label: 'disabled task with callback',
+        onClick: () => {},
+      },
+      {
+        kind: 'disabled',
+        label: 'disabled task without callback',
+      },
+    ],
+  },
+  {
+    title: 'List 5 title',
+    tasks: [
+      {
+        kind: 'error',
+        label: 'error task with callback',
+        onClick: () => {},
+      },
+      {
+        kind: 'error',
+        label: 'error task without callback',
+      },
+    ],
+  },
 ];
 
 // calculate some values based on taskLists
@@ -173,4 +215,63 @@ describe(componentName, () => {
     await click(taskItemWithCallback);
     expect(list1itemCallbackFn).toHaveBeenCalledTimes(1);
   });
+
+  it('should expand/collapse while clicking on checklist header button ', async () => {
+    renderComponent({
+      title: 'Checklist header',
+      viewAllLabel: `View all (10)`,
+    });
+
+    const buttonEle = screen.getAllByRole('button');
+    const toggleButton = buttonEle.find(
+      (btn) => btn.getAttribute('aria-label') === 'Checklist toggle'
+    );
+    // checking if the checklist is expanded
+    expect(toggleButton).toHaveAttribute('aria-expanded', 'true');
+    expect(screen.getByText('View all (10)')).toBeVisible();
+
+    // collapsing checklist
+    fireEvent.click(toggleButton);
+    expect(toggleButton).toHaveAttribute('aria-expanded', 'false');
+
+    // expand back on second click
+    fireEvent.click(toggleButton);
+    expect(toggleButton).toHaveAttribute('aria-expanded', 'true');
+    expect(screen.getByText('View all (10)')).toBeVisible();
+  });
+
+  it('should call checklist with checked, unchecked,indeterminate, disabled and error state', async () => {
+    renderComponent();
+    const checkedElement = screen
+      .getByTitle('List 1 title')
+      .nextElementSibling?.querySelector('li > span');
+    expect(checkedElement).toBeInViewport;
+    expect(checkedElement).toHaveClass(`${blockClass}__icon--checked`);
+
+    const uncheckedElement = screen
+      .getByTitle('List 2 title')
+      .nextElementSibling?.querySelector('li > span');
+    expect(uncheckedElement).toBeInViewport;
+    expect(uncheckedElement).toHaveClass(`${blockClass}__icon--unchecked`);
+
+    const indeterminateElement = screen
+      .getByTitle('List 3 title')
+      .nextElementSibling?.querySelector('li > span');
+    expect(indeterminateElement).toBeInViewport;
+    expect(indeterminateElement).toHaveClass(
+      `${blockClass}__icon--indeterminate`
+    );
+
+    const disabledElement = screen
+      .getByTitle('List 4 title')
+      .nextElementSibling?.querySelector('li > span');
+    expect(disabledElement).toBeInViewport;
+    expect(disabledElement).toHaveClass(`${blockClass}__icon--disabled`);
+
+    const errorElement = screen
+      .getByTitle('List 5 title')
+      .nextElementSibling?.querySelector('li > span');
+    expect(errorElement).toBeInViewport;
+    expect(errorElement).toHaveClass(`${blockClass}__icon--error`);
+  });
 });