diff --git a/e2e/components/Checklist/Checklist-test.avt.e2e.js b/e2e/components/Checklist/Checklist-test.avt.e2e.js index f50662c70e..cd0bf3a40f 100644 --- 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 index a4ba4d5441..6464e63e17 100644 --- 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`); + }); });