test(Slug): add API, keyboard tests for Slug (#15792)

* test(Slug): add keyboard tests

* test(Slug): add api tests

* test(Slug): add slug tests to existing components

* test(Slug): add tests for remaining slug components

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

@@ -10,7 +10,7 @@
 const { expect, test } = require('@playwright/test');
 const { visitStory } = require('../../test-utils/storybook');
 
-test.describe('Slug @avt', () => {
+test.describe('@avt Slug', async () => {
   test('@avt-default-state', async ({ page }) => {
     await visitStory(page, {
       component: 'Slug',
@@ -47,4 +47,54 @@ test.describe('Slug @avt', () => {
     });
     await expect(page).toHaveNoACViolations('Slug-form');
   });
+
+  test('@avt-keyboard-nav - slug', async ({ page }) => {
+    await visitStory(page, {
+      component: 'Search',
+      id: 'experimental-unstable-slug--callout',
+      globals: {
+        theme: 'white',
+      },
+    });
+    const slug = page.getByRole('button', {
+      name: 'AI - Show information',
+    });
+    const callout = page.locator('.cds--popover--open');
+    await expect(slug).toBeVisible();
+    await expect(callout).toBeVisible();
+
+    // Tab to the Slug
+    await page.keyboard.press('Tab');
+    await expect(slug).toBeFocused();
+
+    // Close the slug (example is open by default)
+    await page.keyboard.press('Enter');
+    await expect(callout).toBeHidden();
+
+    // Should also be able to open with space
+    await page.keyboard.press('Space');
+    await expect(callout).toBeVisible();
+
+    // Tab should go to buttons, and then close after last button
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Tab');
+    await expect(
+      page.getByRole('button', {
+        name: 'View details',
+      })
+    ).toBeFocused();
+    await page.keyboard.press('Tab');
+    await expect(callout).toBeHidden();
+
+    // Should also close on escape
+    await page.keyboard.press('Shift+Tab');
+    await page.keyboard.press('Shift+Tab');
+    await expect(callout).toBeHidden();
+    await slug.click();
+    await expect(callout).toBeVisible();
+    await page.keyboard.press('Escape');
+    await expect(callout).toBeHidden();
+  });
 });

packages/react/src/components/Checkbox/__tests__/Checkbox-test.js

@@ -9,6 +9,9 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
 import Checkbox from '../Checkbox';
+import { Slug } from '../../Slug';
+
+const prefix = 'cds';
 
 describe('Checkbox', () => {
   it('should set the `id` on the <input> element', () => {
@@ -57,7 +60,9 @@ describe('Checkbox', () => {
 
   it('should hide the label if hideLabel is provided as a prop', () => {
     render(<Checkbox id="test" labelText="test-label" hideLabel />);
-    expect(screen.getByText('test-label')).toHaveClass('cds--visually-hidden');
+    expect(screen.getByText('test-label')).toHaveClass(
+      `${prefix}--visually-hidden`
+    );
   });
 
   it('should render helperText', () => {
@@ -113,7 +118,9 @@ describe('Checkbox', () => {
       />
     );
 
-    expect(container.firstChild).toHaveClass(`cds--checkbox-wrapper--readonly`);
+    expect(container.firstChild).toHaveClass(
+      `${prefix}--checkbox-wrapper--readonly`
+    );
   });
 
   it('should respect warn prop', () => {
@@ -128,10 +135,12 @@ describe('Checkbox', () => {
 
     // eslint-disable-next-line testing-library/no-node-access, testing-library/no-container
     const warnIcon = container.querySelector(
-      `svg.cds--checkbox__invalid-icon--warning`
+      `svg.${prefix}--checkbox__invalid-icon--warning`
     );
 
-    expect(container.firstChild).toHaveClass(`cds--checkbox-wrapper--warning`);
+    expect(container.firstChild).toHaveClass(
+      `${prefix}--checkbox-wrapper--warning`
+    );
     expect(warnIcon).toBeInTheDocument();
   });
 
@@ -147,7 +156,9 @@ describe('Checkbox', () => {
     );
 
     expect(screen.getByText('Warn text')).toBeInTheDocument();
-    expect(screen.getByText('Warn text')).toHaveClass(`cds--form-requirement`);
+    expect(screen.getByText('Warn text')).toHaveClass(
+      `${prefix}--form-requirement`
+    );
   });
 
   it('should call the `onChange` prop when the <input> value changes', async () => {
@@ -187,4 +198,19 @@ describe('Checkbox', () => {
     expect(onClick).toHaveBeenCalled();
     expect(onChange).not.toHaveBeenCalled();
   });
+
+  it('should respect slug prop', () => {
+    const { container } = render(
+      <Checkbox
+        defaultChecked
+        labelText="Checkbox label"
+        id="checkbox-label-1"
+        slug={<Slug />}
+      />
+    );
+
+    expect(container.firstChild).toHaveClass(
+      `${prefix}--checkbox-wrapper--slug`
+    );
+  });
 });

packages/react/src/components/CheckboxGroup/CheckboxGroup-test.js

@@ -9,6 +9,7 @@ import React from 'react';
 import CheckboxGroup from '../CheckboxGroup';
 import Checkbox from '../Checkbox/Checkbox';
 import { render, screen } from '@testing-library/react';
+import { Slug } from '../Slug';
 
 const prefix = 'cds';
 
@@ -148,4 +149,16 @@ describe('CheckboxGroup', () => {
       `${prefix}--form-requirement`
     );
   });
+
+  it('should respect slug prop', () => {
+    const { container } = render(
+      <CheckboxGroup
+        className="some-class"
+        legendText="Checkbox heading"
+        slug={<Slug />}
+      />
+    );
+
+    expect(container.firstChild).toHaveClass(`${prefix}--checkbox-group--slug`);
+  });
 });

packages/react/src/components/ComboBox/ComboBox-test.js

@@ -17,12 +17,15 @@ import {
 } from '../ListBox/test-helpers';
 import ComboBox from '../ComboBox';
 import { act } from 'react-dom/test-utils';
+import { Slug } from '../Slug';
 
 const findInputNode = () => screen.getByRole('combobox');
 const openMenu = async () => {
   await userEvent.click(findInputNode());
 };
 
+const prefix = 'cds';
+
 describe('ComboBox', () => {
   let mockProps;
 
@@ -117,6 +120,14 @@ describe('ComboBox', () => {
     expect(findInputNode()).toHaveDisplayValue('Apple');
   });
 
+  it('should respect slug prop', () => {
+    const { container } = render(<ComboBox {...mockProps} slug={<Slug />} />);
+
+    expect(container.firstChild).toHaveClass(
+      `${prefix}--list-box__wrapper--slug`
+    );
+  });
+
   describe('should display initially selected item found in `initialSelectedItem`', () => {
     it('using an object type for the `initialSelectedItem` prop', () => {
       render(
@@ -176,7 +187,9 @@ describe('ComboBox', () => {
     it('should not let the user expand the menu', async () => {
       render(<ComboBox {...mockProps} disabled={true} />);
       await openMenu();
-      expect(findListBoxNode()).not.toHaveClass('cds--list-box--expanded');
+      expect(findListBoxNode()).not.toHaveClass(
+        `${prefix}--list-box--expanded`
+      );
     });
   });
 
@@ -196,7 +209,9 @@ describe('ComboBox', () => {
     it('should not let the user expand the menu', async () => {
       render(<ComboBox {...mockProps} disabled={true} />);
       await openMenu();
-      expect(findListBoxNode()).not.toHaveClass('cds--list-box--expanded');
+      expect(findListBoxNode()).not.toHaveClass(
+        `${prefix}--list-box--expanded`
+      );
     });
   });
 

packages/react/src/components/ComposedModal/ComposedModal-test.js

@@ -14,6 +14,9 @@ import ComposedModal, { ModalBody } from './ComposedModal';
 import { ModalHeader } from './ModalHeader';
 import { ModalFooter } from './ModalFooter';
 import { TextInput } from '../../';
+import { Slug } from '../Slug';
+
+const prefix = 'cds';
 
 describe('ComposedModal', () => {
   describe('it renders as expected', () => {
@@ -206,7 +209,7 @@ describe('ComposedModal', () => {
       );
 
       expect(screen.getByRole('dialog', { hidden: true })).toHaveClass(
-        'cds--modal-container--lg'
+        `${prefix}--modal-container--lg`
       );
     });
 
@@ -229,5 +232,21 @@ describe('ComposedModal', () => {
       ).toBeDisabled();
       expect(screen.getByRole('button', { name: 'Cancel' })).toBeDisabled();
     });
+
+    it('should respect slug prop', () => {
+      const { container } = render(
+        <ComposedModal open slug={<Slug />}>
+          <ModalHeader>Modal header</ModalHeader>
+          <ModalBody>This is the modal body content</ModalBody>
+          <ModalFooter
+            primaryButtonText="Add"
+            secondaryButtonText="Cancel"
+            loadingStatus="active"
+            loadingDescription="loading..."></ModalFooter>
+        </ComposedModal>
+      );
+
+      expect(container.firstChild).toHaveClass(`${prefix}--modal--slug`);
+    });
   });
 });

packages/react/src/components/DatePicker/DatePicker-test.js

@@ -10,6 +10,9 @@ import DatePicker from './DatePicker';
 import DatePickerInput from '../DatePickerInput';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { Slug } from '../Slug';
+
+const prefix = 'cds';
 
 describe('DatePicker', () => {
   it('should add extra classes that are passed via className', () => {
@@ -51,7 +54,7 @@ describe('DatePicker', () => {
 
     expect(
       // eslint-disable-next-line testing-library/no-node-access
-      document.querySelector('.cds--date-picker--simple')
+      document.querySelector(`.${prefix}--date-picker--simple`)
     ).toBeInTheDocument();
   });
 
@@ -71,7 +74,7 @@ describe('DatePicker', () => {
 
     expect(
       // eslint-disable-next-line testing-library/no-node-access
-      document.querySelector('.cds--date-picker--single')
+      document.querySelector(`.${prefix}--date-picker--single`)
     ).toBeInTheDocument();
   });
 
@@ -93,7 +96,7 @@ describe('DatePicker', () => {
 
     expect(
       // eslint-disable-next-line testing-library/no-node-access
-      document.querySelector('.cds--date-picker--range')
+      document.querySelector(`.${prefix}--date-picker--range`)
     ).toBeInTheDocument();
   });
 
@@ -161,6 +164,20 @@ describe('DatePicker', () => {
 
     expect(ref).toHaveBeenCalledWith(container.firstChild);
   });
+
+  it('should respect slug prop', () => {
+    render(
+      <DatePickerInput
+        id="date-picker-input-id-start"
+        placeholder="mm/dd/yyyy"
+        labelText="Date Picker label"
+        data-testid="input-value"
+        slug={<Slug />}
+      />
+    );
+
+    expect(screen.getByRole('button')).toHaveClass(`${prefix}--slug__button`);
+  });
 });
 
 describe('Simple date picker', () => {
@@ -272,7 +289,7 @@ describe('Single date picker', () => {
     );
 
     // eslint-disable-next-line testing-library/no-node-access
-    const input = document.querySelector('.cds--date-picker__input');
+    const input = document.querySelector(`.${prefix}--date-picker__input`);
 
     expect(screen.getByRole('application')).not.toHaveClass('open');
     await userEvent.click(input);

packages/react/src/components/Dropdown/Dropdown-test.js

@@ -17,6 +17,7 @@ import {
 } from '../ListBox/test-helpers';
 import Dropdown from '../Dropdown';
 import DropdownSkeleton from '../Dropdown/Dropdown.Skeleton';
+import { Slug } from '../Slug';
 
 const prefix = 'cds';
 
@@ -189,6 +190,13 @@ describe('Dropdown', () => {
       render(<Dropdown {...mockProps} ref={ref} />);
       expect(ref.current).toHaveAttribute('aria-haspopup', 'listbox');
     });
+
+    it('should respect slug prop', () => {
+      const { container } = render(<Dropdown {...mockProps} slug={<Slug />} />);
+      expect(container.firstChild).toHaveClass(
+        `${prefix}--list-box__wrapper--slug`
+      );
+    });
   });
 });