Cloudscape Design System
  • Get started
  • Foundation
  • Components
  • Patterns
  • Demos
  • GitHub 
Cloudscape Design System
  • Get started
  • Foundation
  • Components
  • Patterns
  • Demos
  • GitHub 
  • About
  • Guides
    • Introduction
    • Get started for designers
    • Get started for developers
  • Resources
    • Design resources
  • Integration
    • Using Cloudscape components
    • Global styles
  • Development guides
    • Collection hooks package
    • Content security policy (CSP)
    • Responsive development
    • State management
    • Z-index
  • Testing
    • Introduction to testing
    • Testing frameworks integration
    • Testing core classes
  1. Cloudscape Design System
    • Get started
    • Testing: Testing core classes

    Testing core classes

    API documentation for test utilities core classes.

      On this page

      • Overview
      • Unit Testing
      • Integration testing

      Overview

      This article contains the API documentation for Cloudscape test utilities core classes. These utilities don’t depend on the specific component you’re testing. For information about how to use these core classes in your tests, see introduction to testing.

      Test utilities expose two core classes:

      • An element wrapper for unit tests, where you typically have direct access to the Document Object Model (DOM).

      • An element wrapper for integration tests, where it’s typical to rely on string selectors.

      Unit Testing

      The entry point for unit tests is the default method exposed by the '@cloudscape-design/components/test-utils/dom'package. This method returns an instance of ElementWrapper. The following table describes the class interface.

      For more information and examples for unit testing with Cloudscape, see introduction to testing.

      ElementWrapper

      Name
      Return type
      Description
      Parameters
      blur---
      click-

      Performs a click by triggering a mouse event.

      Note that programmatic events ignore disabled attribute and will trigger listeners even if the element is disabled.

      params?: MouseEventInit
      findElementWrapper | null-selector: string
      findAlertAlertWrapper-selector?: string
      findAllarray-selector: string
      findAllByClassNamearray-className: string
      findAnnotationContextElementWrapper-selector?: string
      findAppLayoutAppLayoutWrapper-selector?: string
      findAreaChartAreaChartWrapper-selector?: string
      findAttributeEditorAttributeEditorWrapper-selector?: string
      findAutosuggestAutosuggestWrapper-selector?: string
      findBadgeBadgeWrapper-selector?: string
      findBarChartBarChartWrapper-selector?: string
      findBoardBoardWrapper-selector?: string
      findBoardItemBoardItemWrapper-selector?: string
      findBoxBoxWrapper-selector?: string
      findBreadcrumbGroupBreadcrumbGroupWrapper-selector?: string
      findButtonButtonWrapper-selector?: string
      findButtonDropdownButtonDropdownWrapper-selector?: string
      findByClassNameElementWrapper | null-className: string
      findCalendarCalendarWrapper-selector?: string
      findCardsCardsWrapper-selector?: string
      findCheckboxCheckboxWrapper-selector?: string
      findCodeEditorCodeEditorWrapper-selector?: string
      findCollectionPreferencesCollectionPreferencesWrapper-selector?: string
      findColumnLayoutColumnLayoutWrapper-selector?: string
      findComponentWrapper | null-
      • selector: string
      • ComponentClass:
      findContainerContainerWrapper-selector?: string
      findContentLayoutContentLayoutWrapper-selector?: string
      findDateInputDateInputWrapper-selector?: string
      findDatePickerDatePickerWrapper-selector?: string
      findDateRangePickerDateRangePickerWrapper-selector?: string
      findExpandableSectionExpandableSectionWrapper-selector?: string
      findFlashbarFlashbarWrapper-selector?: string
      findFormFormWrapper-selector?: string
      findFormFieldFormFieldWrapper-selector?: string
      findGridGridWrapper-selector?: string
      findHeaderHeaderWrapper-selector?: string
      findHelpPanelHelpPanelWrapper-selector?: string
      findHotspotHotspotWrapper-selector?: string
      findIconIconWrapper-selector?: string
      findInputInputWrapper-selector?: string
      findItemsPaletteItemsPaletteWrapper-selector?: string
      findLineChartLineChartWrapper-selector?: string
      findLinkLinkWrapper-selector?: string
      findMixedLineBarChartMixedLineBarChartWrapper-selector?: string
      findModalModalWrapper-selector?: string
      findMultiselectMultiselectWrapper-selector?: string
      findPaginationPaginationWrapper-selector?: string
      findPieChartPieChartWrapper-selector?: string
      findPopoverPopoverWrapper-selector?: string
      findProgressBarProgressBarWrapper-selector?: string
      findPropertyFilterPropertyFilterWrapper-selector?: string
      findRadioGroupRadioGroupWrapper-selector?: string
      findS3ResourceSelectorS3ResourceSelectorWrapper-selector?: string
      findSegmentedControlSegmentedControlWrapper-selector?: string
      findSelectSelectWrapper-selector?: string
      findSideNavigationSideNavigationWrapper-selector?: string
      findSpaceBetweenSpaceBetweenWrapper-selector?: string
      findSpinnerSpinnerWrapper-selector?: string
      findSplitPanelSplitPanelWrapper-selector?: string
      findStatusIndicatorStatusIndicatorWrapper-selector?: string
      findTableTableWrapper-selector?: string
      findTabsTabsWrapper-selector?: string
      findTagEditorTagEditorWrapper-selector?: string
      findTextContentTextContentWrapper-selector?: string
      findTextFilterTextFilterWrapper-selector?: string
      findTextareaTextareaWrapper-selector?: string
      findTilesTilesWrapper-selector?: string
      findTimeInputTimeInputWrapper-selector?: string
      findToggleToggleWrapper-selector?: string
      findTokenGroupTokenGroupWrapper-selector?: string
      findTopNavigationTopNavigationWrapper-selector?: string
      findTutorialPanelTutorialPanelWrapper-selector?: string
      findWizardWizardWrapper-selector?: string
      fireEvent--event: Event
      focus---
      getElementElementType--
      keydown--keyCode: KeyCode
      keypress--keyCode: KeyCode
      keyup--keyCode: KeyCode
      matchesthis | null-selector: string