### Integration Testing Examples

Source: https://cloudscape.design/components/alert/index.html

Examples demonstrating how to perform integration tests on the Alert component, including rendering content and interacting with slots.

```APIDOC
## Integration testing examples

### Render alert content slots
```javascript
import createWrapper from '@cloudscape-design/components/test-utils/selectors';

/**
 * browser – is a global object representing your testing framework.
 * The exact API could be different for your stack.
 */

describe('Alert', () => {
  it('renders alert content', async () => {
    // this tests a similar page like /components/alert/
    await browser.url('your-page-to-test');

    const wrapper = createWrapper().findAlert('[data-testid="alert-test-id"]')!;

    const textContent = await browser.$(wrapper.findContent().toSelector()).getText();

    expect(textContent).toContain(
      'Review the documentation to learn about potential compatibility issues with specific database versions.'
    );
  });

  it('renders alert header', async () => {
    // this tests a similar page like /components/alert/
    await browser.url('your-page-to-test');
    const wrapper = createWrapper().findAlert('[data-testid="alert-test-id"]')!;

    const textContent = await browser.$(wrapper.findHeader().toSelector()).getText();

    expect(textContent).toContain('Known issues/limitations');
  });
});
```

### Interacting with alert slots
```javascript
import createWrapper from '@cloudscape-design/components/test-utils/selectors';

/**
 * browser – is a global object representing your testing framework.
 * The exact API could be different for your stack.
 */

describe('Alert', () => {
  it('clicks an alert action', async () => {
    // this tests a similar page like components/alert/?tabId=playground&example=with-button
    await browser.url('your-page-to-test');
    const wrapper = createWrapper();

    const alertWrapper = wrapper.findAlert('[data-testid="alert-test-id"]')!;
    await browser.$(alertWrapper.findActionSlot().findButton('[data-testid="your-action"]').toSelector()).click();

    // test your business logic, for example when a button is clicked another element appears.
    const addedTextContent = await browser.$(wrapper.findBox('[data-testid="added-content]").toSelector()).getText();

    expect(addedTextContent).toContain('Button is pressed!');
  });

  it('alert is dismissible', async () => {
    // this tests a similar page like components/alert/?tabId=playground&example=with-button
    await browser.url('your-page-to-test');
    const wrapper = createWrapper().findAlert('[data-testid="alert-test-id"]')!;

    await browser.$(wrapper.findDismissButton().toSelector()).click();

    expect(await browser.$(wrapper.toSelector()).isExisting()).toBeFalsy();
  });
});
```
```

--------------------------------

### Table Preferences Management Example

Source: https://cloudscape.design/components/table/index.html

This example shows how to manage table preferences, such as column visibility and sorting. It highlights the importance of persisting these preferences and providing users with options to customize them via collection preferences.

```javascript
function handlePreferencesChange(newPreferences) {
  // Save preferences to local storage or backend
  localStorage.setItem('tablePreferences', JSON.stringify(newPreferences));
  // Update table state
  setTableState(prevState => ({ ...prevState, preferences: newPreferences }));
}

// Load preferences on component mount
const initialPreferences = JSON.parse(localStorage.getItem('tablePreferences')) || {
  columns: [
    { id: 'id', visible: true },
    { id: 'name', visible: true },
    { id: 'status', visible: true },
    { id: 'createdAt', visible: true },
  ],
  sorting: { field: 'createdAt', descending: true },
  stickyColumns: ['id'],
  contentDensity: 'comfortable' // 'comfortable' or 'compact'
};

// Render CollectionPreferences component
<CollectionPreferences
  title="Table Preferences"
  confirmLabel="Apply"
  cancelLabel="Cancel"
  preferences={tableState.preferences}
  onChange={handlePreferencesChange}
  // ... other props for available operations
/>;
```

--------------------------------

### Autosuggest Integration Testing Example

Source: https://cloudscape.design/components/autosuggest/index.html

Example of how to perform integration testing on the Autosuggest component, including selecting options by index.

```APIDOC
## Integration testing examples

### Selecting options from autosuggest

This example demonstrates how to interact with the Autosuggest component during integration testing, specifically focusing on selecting an option from the dropdown list using its index.

#### Method

```javascript
import createWrapper from '@cloudscape-design/components/test-utils/selectors';

/**
 * browser – is a global object representing your testing framework.
 * The exact API could be different for your stack.
 */

describe('Autosuggest', () => {
  it('selects options from the list by index', async () => {
    // go to a page which contains the autosuggest to test
    await browser.url('your-page-to-test');
    // always make sure to disambiguate your component to test with a data-testid attribute
    const wrapper = createWrapper().findAutosuggest('[data-testid="my-autosuggest"]')!;

    const autosuggestInput = await browser.$(wrapper.findNativeInput().toSelector());
    await autosuggestInput.click();
    await browser.$(wrapper.findDropdown().findOption(2).toSelector()).click();

    expect(browser.$(wrapper.findNativeInput().toSelector()).getText()).toBe('Option 2');
  });
});
```
```

--------------------------------

### TutorialItemWrapper API

Source: https://cloudscape.design/components/tutorial-panel/index.html

Provides methods to interact with tutorial items, enabling testers to find and control elements like collapse/expand buttons, prerequisites, and start buttons.

```APIDOC
## TutorialItemWrapper API

### Description
Methods for interacting with tutorial items.

### Methods

#### `findCollapseButton()`
- **Returns**: `ButtonWrapper`
- **Description**: Finds the collapse button for the tutorial item.

#### `findCompleted()`
- **Returns**: `ElementWrapper`
- **Description**: Finds the element indicating the tutorial item is completed.

#### `findDescription()`
- **Returns**: `ElementWrapper`
- **Description**: Finds the description of the tutorial item.

#### `findExpandButton()`
- **Returns**: `ButtonWrapper`
- **Description**: Finds the expand button for the tutorial item.

#### `findLearnMoreLink()`
- **Returns**: `LinkWrapper`
- **Description**: Finds the 'Learn More' link for the tutorial item.

#### `findPrerequisitesAlert()`
- **Returns**: `AlertWrapper`
- **Description**: Finds the alert element for prerequisites of the tutorial item.

#### `findStartButton()`
- **Returns**: `ButtonWrapper`
- **Description**: Finds the start button for the tutorial item.

#### `findTitle()`
- **Returns**: `ElementWrapper`
- **Description**: Finds the title of the tutorial item.
```

--------------------------------

### Property Filter Component Configuration and Interaction (React)

Source: https://cloudscape.design/components/property-filter/index.html

Demonstrates the configuration of the Property Filter component with filtering properties and options, and how to manage the query state using React's useState hook. This example shows the basic setup for a filter in a React application.

```jsx
import PropertyFilter, { PropertyFilterProps } from '@cloudscape-design/components/property-filter';
import createWrapper from '@cloudscape-design/components/test-utils/dom';

import { render } from '@testing-library/react';
import React, { useState } from 'react';

const filteringProperties: PropertyFilterProps['filteringProperties'] = [
  {
    key: 'instanceid',
    operators: ['=', '!=', ':', '!:', '^', '!^'],
    propertyLabel: 'Instance ID',
    groupValuesLabel: 'Instance ID values',
  },
  {
    key: 'state',
    propertyLabel: 'State',
    groupValuesLabel: 'State values',
  },
];

const filteringOptions: PropertyFilterProps['filteringOptions'] = [
  {
    propertyKey: 'instanceid',
    value: '1133',
  },
  {
    propertyKey: 'instanceid',
    value: '1123',
  },
  {
    propertyKey: 'instanceid',
    value: '0223',
  },
  {
    propertyKey: 'state',
    value: 'Stopped',
  },
  {
    propertyKey: 'state',
    value: 'Stopping',
  },
  {
    propertyKey: 'state',
    value: 'Running',
  },
];

function Component() {
  const [query, setQuery] = useState<PropertyFilterProps['query']>({
    tokens: [],
    operation: 'and',
  });

  return (
    <PropertyFilter
      filteringProperties={filteringProperties}
      filteringOptions={filteringOptions}
      onChange={event => setQuery(event.detail)}
      query={query}
    />
  );
}

describe('<PropertyFilter />', () => {
  it('adds token when option is found and enter is pressed', async () => {
    const { container } = render(<Component />);
    const wrapper = createWrapper(container);
    const enterKeyCode = 13;

    wrapper.findPropertyFilter()!.setInputValue('Instance ID=1133');
    wrapper.findPropertyFilter()!.findNativeInput().keydown(enterKeyCode);

    const tokens = wrapper.findPropertyFilter()!.findTokens();
    const tokenValues = tokens.map(token => token.getElement().textContent);

    expect(tokenValues).toEqual(['Instance ID = 1133']);
  });

  it('adds enum token with two options', async () => {
    const { container } = render(<Component />);
    const wrapper = createWrapper(container);

    wrapper.findPropertyFilter()!.focus();
    wrapper.findPropertyFilter()!.setInputValue('State =');
    wrapper.findPropertyFilter()!.selectSuggestionByValue('Stopped');
    wrapper.findPropertyFilter()!.selectSuggestionByValue('Stopping');
    wrapper.findPropertyFilter()!.findPropertySubmitButton()!.click();

    const tokens = wrapper.findPropertyFilter()!.findTokens();
    const tokenValues = tokens.map(token => token.getElement().textContent);

    expect(tokenValues).toEqual(['State = Stopped, Stopping']);
  });
});

```

--------------------------------

### Table Column Configuration Example

Source: https://cloudscape.design/components/table/index.html

This example demonstrates how to configure table columns, including setting properties like 'id', 'header', 'cell', and 'width'. It shows how to define column visibility and order, which is crucial for displaying unique identifiers and other item properties.

```typescript
const columns = [
  {
    id: "id",
    header: "Item ID",
    cell: (item) => item.id,
    width: 150,
    isRowHeader: true,
  },
  {
    id: "name",
    header: "Name",
    cell: (item) => item.name,
    width: 200,
  },
  {
    id: "status",
    header: "Status",
    cell: (item) => item.status,
    width: 120,
  },
  {
    id: "createdAt",
    header: "Created At",
    cell: (item) => new Date(item.createdAt).toLocaleDateString(),
    width: 180,
  },
];
```

--------------------------------

### Grid Breakpoint Configuration Example

Source: https://cloudscape.design/components/grid/index.html

Demonstrates how to configure colspans for different breakpoints (default, m, l) to create responsive layouts. The example shows how an element's width changes based on the grid's available horizontal space.

```json
{
  "default": 6, // 50% width for grid width < m breakpoint
  "m": 4,       // 33% width for grid width between m and l breakpoints
  "l": 3        // 25% width for grid width >= l breakpoint
}
```

--------------------------------

### Expand Tree View Item with Cloudscape Selectors

Source: https://cloudscape.design/components/tree-view/index.html

This example demonstrates how to expand an item in a Cloudscape Tree View component during integration testing. It uses `createWrapper` and `findItemToggle` to locate and click the toggle, then verifies that child items become visible. Dependencies include the testing framework's browser object and `@cloudscape-design/components/test-utils/selectors`.

```javascript
import createWrapper from '@cloudscape-design/components/test-utils/selectors';

/**
 * browser – is a global object representing your testing framework.
 * The exact API could be different for your stack.
 */

describe('Tree view', () => {
  it('expands an item', async () => {
    // This code tests a component instance similar to this: /components/tree-view/?tabId=playground&example=simple-tree-view
    await browser.url('your-page-to-test');
    const wrapper = createWrapper().findTreeView();

    const expandableItem = wrapper.findItemById('1');

    const toggleSelector = expandableItem.findItemToggle().toSelector();
    await browser.$(toggleSelector).click();

    const childItemsSelector = expandableItem.findChildItems().toSelector();
    const childItemsCount = await browser.$$(childItemsSelector).length;

    expect(childItemsCount).toBe(4);
  });
});
```

--------------------------------

### ExpandableSectionWrapper API

Source: https://cloudscape.design/components/expandable-section/index.html

Documentation for the ExpandableSectionWrapper API, detailing methods available for interacting with the ExpandableSection component during integration testing.

```APIDOC
## ExpandableSectionWrapper API

### Description
Provides methods to interact with and query elements within the `ExpandableSection` component during integration tests.

### Method
`Wrapper Methods`

### Endpoint
`N/A` (Wrapper API)

### Parameters
N/A

### API Endpoints

| Name | Return type | Description | Parameters |
| --- | --- | --- | --- |
| findContent | [ElementWrapper](/get-started/testing/core-classes/index.html.md) | Finds the content area of the expandable section. | - |
| findExpandButton | [ElementWrapper](/get-started/testing/core-classes/index.html.md) | Finds the button that toggles the expansion of the section. | - |
| findExpandedContent | [ElementWrapper](/get-started/testing/core-classes/index.html.md) | Finds the content that is displayed when the section is expanded. | - |
| findExpandIcon | [ElementWrapper](/get-started/testing/core-classes/index.html.md) | Finds the icon associated with the expand/collapse button. | - |
| findHeader | [ElementWrapper](/get-started/testing/core-classes/index.html.md) | Finds the header element of the expandable section. | - |
| findHeaderDescription | [ElementWrapper](/get-started/testing/core-classes/index.html.md) | Finds the description element within the header. | - |
| findHeaderText | [ElementWrapper](/get-started/testing/core-classes/index.html.md) | Finds the text element within the header. | - |

### Request Example
`N/A`

### Response
`N/A`
```

--------------------------------

### TutorialPanelWrapper API

Source: https://cloudscape.design/components/tutorial-panel/index.html

Provides methods to interact with the tutorial panel UI, allowing testers to find and interact with various components within the tutorial interface.

```APIDOC
## TutorialPanelWrapper API

### Description
Methods for interacting with the tutorial panel UI.

### Methods

#### `findCompletionScreenDescription()`
- **Returns**: `ElementWrapper`
- **Description**: Finds the description element on the completion screen.

#### `findCompletionScreenTitle()`
- **Returns**: `ElementWrapper`
- **Description**: Finds the title element on the completion screen.

#### `findDismissButton()`
- **Returns**: `ButtonWrapper`
- **Description**: Finds the dismiss button.

#### `findDownloadLink()`
- **Returns**: `LinkWrapper`
- **Description**: Finds the download link.

#### `findFeedbackLink()`
- **Returns**: `LinkWrapper`
- **Description**: Finds the feedback link.

#### `findTaskList()`
- **Returns**: `MultiElementWrapper<TutorialTaskWrapper>`
- **Description**: Finds the list of tutorial tasks.

#### `findTutorials()`
- **Returns**: `MultiElementWrapper<TutorialItemWrapper>`
- **Description**: Finds the list of tutorials.
```

--------------------------------

### Get Disabled Tab Reason - React Testing Library

Source: https://cloudscape.design/components/tabs/index.html

Provides an example of how to access and verify the disabled reason for a disabled tab in the Cloudscape Tabs component. This snippet uses React Testing Library and Cloudscape's test utility to simulate a mouse over event and check the displayed reason.

```javascript
import Tabs, { TabsProps } from '@cloudscape-design/components/tabs';
import createWrapper from '@cloudscape-design/components/test-utils/dom';

import { fireEvent, render } from '@testing-library/react';

const tabs: TabsProps['tabs'] = [
  {
    label: 'First tab label',
    id: 'first',
    disabled: false,
  },
  {
    label: 'Second tab label',
    id: 'second',
    disabled: true,
    disabledReason: 'User does not have access to this tab',
  },
];

describe('<Tabs />', () => {
  it('selects the custom option from the second tab', () => {
    const { container } = render(<Tabs tabs={tabs} />);
    const wrapper = createWrapper(container);

    const secondTab = wrapper.findTabs()!.findTabLinkById('second')!;
    fireEvent.mouseOver(secondTab.getElement());
    const disabledReason = secondTab.findDisabledReason()!.getElement();

    expect(disabledReason.textContent).toBe('User does not have access to this tab');
  });
});
```

--------------------------------

### Integration Test Example: Select avatar in avatar slot

Source: https://cloudscape.design/components/chat-bubble/index.html

Example demonstrating how to select and interact with an avatar within the avatar slot of a chat bubble.

```APIDOC
## Integration Test Example: Select avatar in avatar slot

### Description
This example demonstrates how to locate and interact with an `Avatar` component situated within the `avatarSlot` of a `ChatBubble`, including finding its associated tooltip.

### Method
GET (simulated)

### Endpoint
`/your-page-to-test`

### Parameters
None

### Request Example
```javascript
import createWrapper from '@cloudscape-design/chat-components/test-utils/selectors';

/**
 * browser – is a global object representing your testing framework.
 * The exact API could be different for your stack.
 */

describe('Chat bubble', () => {
  it('get avatar inside avatar slot', async () => {
    // this code tests a component instance similar to this /components/chat-bubble&example=incoming-message
    await browser.url('your-page-to-test');
    const wrapper = createWrapper().findChatBubble();

    const avatarSelector = await browser.$(wrapper.findAvatarSlot()!.findAvatar().toSelector());
    await avatarSelector.moveTo();

    const tooltipSelector = await browser.$(wrapper.findAvatarSlot()!.findAvatar().findTooltip().toSelector());

    expect(tooltipSelector.getText()).toBe('Generative AI assistant');
  });
});
```

### Response
#### Success Response (200)
- **avatarTooltipText** (string) - The text content of the avatar's tooltip.

#### Response Example
```json
{
  "avatarTooltipText": "Generative AI assistant"
}
```
```

--------------------------------

### Navigate and Submit Cloudscape Wizard Step by Step

Source: https://cloudscape.design/components/wizard/index.html

Demonstrates testing the step-by-step navigation and submission of the Cloudscape Wizard. It involves interacting with input fields, clicking navigation buttons, and verifying the final submitted state. Dependencies include '@cloudscape-design/components' and '@testing-library/react'.

```javascript
import Box from '@cloudscape-design/components/box';
import FormField from '@cloudscape-design/components/form-field';
import Input from '@cloudscape-design/components/input';
import createWrapper from '@cloudscape-design/components/test-utils/dom';
import TextContent from '@cloudscape-design/components/text-content';
import Wizard, { WizardProps } from '@cloudscape-design/components/wizard';

import { render } from '@testing-library/react';
import { useState } from 'react';

function Component() {
  const [activeStep, setActiveStep] = useState(0);
  const [firstName, setFirstName] = useState('');
  const [lastName, setLastName] = useState('');
  const [isSubmitted, setIsSubmitted] = useState(false);
  const fullName = `Your name is: "${firstName} ${lastName}"`;

  const steps: WizardProps['steps'] = [
    {
      title: 'First name',
      content:
        <FormField label="First name">
          <Input value={firstName} onChange={({ detail }) => setFirstName(detail.value)} />
        </FormField>,
    },
    {
      title: 'Last name',
      content:
        <FormField label="Last name">
          <Input value={lastName} onChange={({ detail }) => setLastName(detail.value)} />
        </FormField>,
    },
    {
      title: 'Review',
      content: <TextContent>{fullName}</TextContent>,
    },
  ];

  return (
    <Box>
      <TextContent>{isSubmitted ? 'Submitted!' : 'In progress'}</TextContent>
      <Wizard
        steps={steps}
        activeStepIndex={activeStep}
        allowSkipTo={true}
        i18nStrings={{
          skipToButtonLabel: step => `Skip to ${step.title}`,
          nextButton: 'Next step',
          submitButton: 'Submit',
        }}
        onNavigate={({ detail }) => setActiveStep(detail.requestedStepIndex)}
        onSubmit={() => setIsSubmitted(true)}
      />
      );
    </Box>
  );
}

describe('<Wizard />', () => {
  it('navigates the wizard and submits at the end', () => {
    const { container } = render(<Component />);
    const wrapper = createWrapper(container);

    const wizard = wrapper.findWizard()!;

    // Enter the first name and go to the next step.
    wizard.findContent()!.findInput()!.setInputValue('John');
    wizard.findPrimaryButton().click();

    // Enter the last name and go to the next step.
    wizard.findContent()!.findInput()!.setInputValue('Doe');
    wizard.findPrimaryButton().click();

    // Review the values.
    const reviewText = wizard.findContent()!.getElement().textContent;

    expect(reviewText).toBe('Your name is: "John Doe"');

    // Submit.
    wizard.findPrimaryButton().click();
    const statusText = wrapper.findTextContent()!.getElement();

    expect(statusText.textContent).toBe('Submitted!');
  });
});
```

--------------------------------

### Integration Test Example: Select code view in content slot

Source: https://cloudscape.design/components/chat-bubble/index.html

Example demonstrating how to select and retrieve text from a code view within the content slot of a chat bubble.

```APIDOC
## Integration Test Example: Select code view in content slot

### Description
This example shows how to use the testing utilities to interact with a `CodeView` component nested within the `contentSlot` of a `ChatBubble`.

### Method
GET (simulated)

### Endpoint
`/your-page-to-test`

### Parameters
None

### Request Example
```javascript
// side-effect import to install the finder methods of code view
import createWrapper from '@cloudscape-design/chat-components/test-utils/selectors';

import '@cloudscape-design/code-view/test-utils/selectors';

/**
 * browser – is a global object representing your testing framework.
 * The exact API could be different for your stack.
 */

describe('Chat bubble', () => {
  it('get content', async () => {
    // this code tests a component instance similar to the TestPage
    await browser.url('your-page-to-test');
    const wrapper = createWrapper().findChatBubble();

    const content = await browser.$(wrapper.findContentSlot().findCodeView().findContent().toSelector()).getText();

    expect(content).toEqual('const hello: string = "world";');
  });
});

/**
 * TestPage.tsx
 * 
 * function Component() {
 *   return (
 *     <ChatBubble
 *       type="incoming"
 *       avatar={<Avatar ariaLabel="Generative AI assistant" iconName="gen-ai" color="gen-ai" />} 
 *       ariaLabel="Generative AI assistant at 03:45:16"
 *     >
 *       <CodeView content='const hello: string = "world";' />
 *     </ChatBubble>
 *   );
 * }
 */
```

### Response
#### Success Response (200)
- **content** (string) - The text content of the code view.

#### Response Example
```json
{
  "content": "const hello: string = \"world\";"
}
```
```

--------------------------------

### Integration Test Example: Select button group in actions slot

Source: https://cloudscape.design/components/chat-bubble/index.html

Example demonstrating how to select and count items within a button group located in the actions slot of a chat bubble.

```APIDOC
## Integration Test Example: Select button group in actions slot

### Description
This example illustrates how to access the `actionsSlot` of a `ChatBubble` and then find and count the items within a `ButtonGroup` component.

### Method
GET (simulated)

### Endpoint
`/your-page-to-test`

### Parameters
None

### Request Example
```javascript
import createWrapper from '@cloudscape-design/chat-components/test-utils/selectors';

/**
 * browser – is a global object representing your testing framework.
 * The exact API could be different for your stack.
 */

describe('Chat bubble', () => {
  it('get button group inside actions slot', async () => {
    // this code tests a component instance similar to this /components/chat-bubble&example=incoming-message
    await browser.url('your-page-to-test');
    const wrapper = createWrapper().findChatBubble();

    const buttonGroupItemsSelector = await browser.$$( 
      wrapper.findActionsSlot()!.findButtonGroup().findItems().toSelector()
    );

    expect(buttonGroupItemsSelector.length).toBe(3);
  });
});
```

### Response
#### Success Response (200)
- **buttonGroupItemCount** (number) - The number of items in the button group.

#### Response Example
```json
{
  "buttonGroupItemCount": 3
}
```
```

--------------------------------

### Render and Select TopNavigation Component

Source: https://cloudscape.design/components/top-navigation/index.html

Demonstrates how to render the TopNavigation component and select it using testing utilities. It includes tests for rendering a single instance and selecting multiple instances.

```javascript
import { render } from '@testing-library/react';
import createWrapper from '@cloudscape-design/components/test-utils/dom';

import TopNavigation from '@cloudscape-design/components/top-navigation';

describe('<TopNavigation />', () => {
  it('renders the top-navigation component', () => {
    const { container } = render(<TopNavigation />);
    const wrapper = createWrapper(container);

    expect(wrapper.findTopNavigation()).toBeTruthy();
  });

  it('selects all top-navigation components', () => {
    const { container } = render(<>
      <TopNavigation />
      <TopNavigation />
      <TopNavigation />
    </>);
    const wrapper = createWrapper(container);

    const components = wrapper.findAllTopNavigations();
    expect(components).toHaveLength(3)
  });
});
```

--------------------------------

### ExpandableSection - Selecting the header

Source: https://cloudscape.design/components/expandable-section/index.html

This example demonstrates how to test the header text of the ExpandableSection. It retrieves the header text and asserts its value.

```APIDOC
## ExpandableSection - Selecting the header

### Description
Tests the header text rendering of the `ExpandableSection` component. It finds the header text element and asserts its content.

### Method
`Test`

### Endpoint
`N/A` (Component Integration Test)

### Parameters
N/A

### Request Example
```javascript
import createWrapper from '@cloudscape-design/components/test-utils/selectors';

describe('ExpandableSection', () => {
  it('renders the header text', async () => {
    await browser.url('your-test-page');
    const wrapper = createWrapper();
    const headerTextSelector = wrapper.findExpandableSection().findHeaderText().toSelector();
    const headerText = await browser.$(headerTextSelector).getText();
    expect(headerText).toBe('Test header text');
  });
});
```

### Response
#### Success Response (Test Assertion)
- `expect(headerText).toBe('Test header text');` - Verifies the content of the header text.

#### Response Example
`N/A`
```

--------------------------------

### Integration Testing Step Header Selection (Browser)

Source: https://cloudscape.design/components/steps/index.html

Provides an example of integration testing for selecting step headers in the Cloudscape Steps component using browser automation. It demonstrates fetching step headers via selectors and asserting their text.

```javascript
import createWrapper from '@cloudscape-design/components/test-utils/selectors';

/**
 * browser – is a global object representing your testing framework.
 * The exact API could be different for your stack.
 */

describe('Steps', () => {
  it('gets step header', async () => {
    // this code tests a component instance similar to this /components/steps&example=with-loading
    await browser.url('your-page-to-test');

    const wrapper = createWrapper().findSteps();
    const header1 = await browser.$(wrapper.findItems().get(0).findHeader().toSelector()).getText();
    const header2 = await browser.$(wrapper.findItems().get(1).findHeader().toSelector()).getText();

    expect(header1).toEqual('Success step');
    expect(header2).toEqual('Loading step');
  });
});
```

--------------------------------

### TutorialTaskWrapper API

Source: https://cloudscape.design/components/tutorial-panel/index.html

Provides methods to interact with individual tutorial task elements, allowing testers to access task-specific details and controls.

```APIDOC
## TutorialTaskWrapper API

### Description
Methods for interacting with individual tutorial task elements.

### Methods

#### `findSteps()`
- **Returns**: `MultiElementWrapper<ElementWrapper>`
- **Description**: Finds the steps within a tutorial task.

#### `findStepsTitle()`
- **Returns**: `ElementWrapper`
- **Description**: Finds the title of the steps within a tutorial task.

#### `findTitle()`
- **Returns**: `ElementWrapper`
- **Description**: Finds the title of the tutorial task.
```

--------------------------------

### Render and Select Help Panel - React Testing Library

Source: https://cloudscape.design/components/help-panel/index.html

Demonstrates how to render the HelpPanel component and select it using Cloudscape's test utilities. It covers finding a single HelpPanel and finding all instances within a test environment.

```javascript
import { render } from '@testing-library/react';
import createWrapper from '@cloudscape-design/components/test-utils/dom';

import HelpPanel from '@cloudscape-design/components/help-panel';

describe('<HelpPanel />', () => {
  it('renders the help-panel component', () => {
    const { container } = render(<HelpPanel />);
    const wrapper = createWrapper(container);

    expect(wrapper.findHelpPanel()).toBeTruthy();
  });

  it('selects all help-panel components', () => {
    const { container } = render(<>
      <HelpPanel />
      <HelpPanel />
      <HelpPanel />
    </>);
    const wrapper = createWrapper(container);

    const components = wrapper.findAllHelpPanels();
    expect(components).toHaveLength(3)
  });
});
```

--------------------------------

### ExpandableSection - Expanding the expandable section

Source: https://cloudscape.design/components/expandable-section/index.html

This example demonstrates how to test the expansion of an ExpandableSection component. It clicks the expand button and verifies that the content is visible.

```APIDOC
## ExpandableSection - Expanding the expandable section

### Description
Tests the expansion functionality of the `ExpandableSection` component by clicking the expand button and asserting that the expandable content is visible.

### Method
`Test`

### Endpoint
`N/A` (Component Integration Test)

### Parameters
N/A

### Request Example
```javascript
import createWrapper from '@cloudscape-design/components/test-utils/selectors';

describe('ExpandableSection', () => {
  it('expands the expandable section', async () => {
    await browser.url('your-test-page');
    const wrapper = createWrapper();
    const expandButtonSelector = wrapper.findExpandableSection().findExpandButton().toSelector();
    await browser.$(expandButtonSelector).click();
    const expandableContentSelector = wrapper.findExpandableSection().findExpandedContent().toSelector();
    const expandableContent = await browser.$(expandableContentSelector).getText();
    expect(expandableContent).toBe('Expandable content');
  });
});
```

### Response
#### Success Response (Test Assertion)
- `expect(expandableContent).toBe('Expandable content');` - Verifies the content of the expanded section.

#### Response Example
`N/A`
```

--------------------------------

### Install Board Components for Testing

Source: https://cloudscape.design/components/board/index.html

Imports necessary testing utilities for unit and integration testing of board components. Ensure the `@cloudscape-design/board-components` module is installed as a dependency.

```typescript
// side-effect import to install the finder methods
import '@cloudscape-design/board-components/test-utils/dom';
// use import from the main package to use the wrapper
import createWrapper from '@cloudscape-design/components/test-utils/dom';

createWrapper().findBoard().getElement();
```

```typescript
// side-effect import to install the finder methods
import '@cloudscape-design/board-components/test-utils/selectors';
// use import from the main package to use the wrapper
import createWrapper from '@cloudscape-design/components/test-utils/selectors';

createWrapper().findBoard().toSelector();
```

--------------------------------

### ExpandableSection - Collapsing the expandable section

Source: https://cloudscape.design/components/expandable-section/index.html

This example shows how to test the collapsing functionality of the ExpandableSection. It expands the section, then clicks the button again to collapse it, and verifies that the content is no longer visible.

```APIDOC
## ExpandableSection - Collapsing the expandable section

### Description
Tests the collapsing functionality of the `ExpandableSection` component. It first expands the section, then clicks the expand button again to collapse it, and asserts that the expandable content is no longer present.

### Method
`Test`

### Endpoint
`N/A` (Component Integration Test)

### Parameters
N/A

### Request Example
```javascript
import createWrapper from '@cloudscape-design/components/test-utils/selectors';

describe('ExpandableSection', () => {
  it('collapses the expandable section', async () => {
    await browser.url('your-test-page');
    const wrapper = createWrapper();
    const expandButtonSelector = wrapper.findExpandableSection().findExpandButton().toSelector();
    await browser.$(expandButtonSelector).click(); // Expand
    await browser.$(expandButtonSelector).click(); // Collapse
    const expandableContent = wrapper.findExpandableSection().findExpandedContent().toSelector();
    const isExpanded = await browser.$(expandableContent).isExisting();
    expect(isExpanded).toBe(false);
  });
});
```

### Response
#### Success Response (Test Assertion)
- `expect(isExpanded).toBe(false);` - Verifies that the expandable content element no longer exists.

#### Response Example
`N/A`
```

--------------------------------

### Steps Component ariaDescribedby Property Example

Source: https://cloudscape.design/components/steps/index.html

Illustrates how to provide a description for the Steps component using the `ariaDescribedby` property, linking it to an external paragraph for further context.

```javascript
import { Steps } from '@cloudscape/design-system-react';

// Assuming 'steps' is an array of step objects
const steps = [
  // ... step definitions
];

function MyComponent() {
  return (
    <>
      <p id="stepsDescriptionId">Cloudformation deployment will affect the following resources...</p>
      <Steps ariaDescribedby="stepsDescriptionId" steps={steps} />
    </>
  );
}
```

--------------------------------

### Integration Testing APIs - SupportPromptWrapper

Source: https://cloudscape.design/components/support-prompt-group/index.html

Information about the SupportPromptWrapper in the context of integration testing. No additional methods are available.

```APIDOC
## Integration Testing APIs - SupportPromptWrapper

### Description
Represents a support prompt item in integration testing scenarios.

### Methods

*   No methods available. This wrapper does not provide any additional methods.
```

--------------------------------

### Render BreadcrumbGroup Component

Source: https://cloudscape.design/components/breadcrumb-group/index.html

Renders the BreadcrumbGroup component and verifies its presence using testing utilities. This example demonstrates basic rendering and is a prerequisite for more complex tests.

```javascript
import { render } from '@testing-library/react';
import createWrapper from '@cloudscape-design/components/test-utils/dom';

import BreadcrumbGroup from '@cloudscape-design/components/breadcrumb-group';

describe('<BreadcrumbGroup />', () => {
  it('renders the breadcrumb-group component', () => {
    const { container } = render(<BreadcrumbGroup />);
    const wrapper = createWrapper(container);

    expect(wrapper.findBreadcrumbGroup()).toBeTruthy();
  });

  it('selects all breadcrumb-group components', () => {
    const { container } = render(<> <BreadcrumbGroup /> <BreadcrumbGroup /> <BreadcrumbGroup /> </>
    );
    const wrapper = createWrapper(container);

    const components = wrapper.findAllBreadcrumbGroups();
    expect(components).toHaveLength(3)
  });
});
```